@synergy-design-system/components 3.4.1 → 3.6.0

package/dist/chunks/{chunk.RFZFX5DB.js → chunk.IR3P3QGG.js}

@@ -1,16 +1,12 @@
-import {
-  radio_group_custom_styles_default
-} from "./chunk.6USNG4EL.js";
 import {
   radio_group_styles_default
-} from "./chunk.YPYFEST2.js";
+} from "./chunk.45MATNO2.js";
 import {
-  form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.PTRCO527.js";
+} from "./chunk.34WYIU4C.js";
 import {
   SynButtonGroup
-} from "./chunk.GIRTTUXE.js";
+} from "./chunk.B4UA7LU7.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -20,18 +16,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
+import {
+  enableDefaultSettings
+} from "./chunk.4BEGBAQD.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
-import {
-  enableDefaultSettings
-} from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -63,7 +59,8 @@ var SynRadioGroup = class extends SynergyElement {
     const hasCustomValidityMessage = this.customValidityMessage !== "";
     if (hasCustomValidityMessage) {
       return customErrorValidityState;
-    } else if (isRequiredAndEmpty) {
+    }
+    if (isRequiredAndEmpty) {
       return valueMissingValidityState;
     }
     return validValidityState;
@@ -74,7 +71,8 @@ var SynRadioGroup = class extends SynergyElement {
     const hasCustomValidityMessage = this.customValidityMessage !== "";
     if (hasCustomValidityMessage) {
       return this.customValidityMessage;
-    } else if (isRequiredAndEmpty) {
+    }
+    if (isRequiredAndEmpty) {
       return this.validationInput.validationMessage;
     }
     return "";
@@ -93,11 +91,13 @@ var SynRadioGroup = class extends SynergyElement {
     const target = event.target.closest("syn-radio, syn-radio-button");
     const radios = this.getAllRadios();
     const oldValue = this.value;
-    if (!target || target.disabled) {
+    if (!target || target.disabled || target.readonly) {
       return;
     }
     this.value = target.value;
-    radios.forEach((radio) => radio.checked = radio === target);
+    radios.forEach((radio) => {
+      radio.checked = radio === target;
+    });
     if (this.value !== oldValue) {
       this.emit("syn-change");
       this.emit("syn-input");
@@ -108,30 +108,34 @@ var SynRadioGroup = class extends SynergyElement {
     if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
       return;
     }
-    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
-    const checkedRadio = (_a = radios.find((radio) => radio.checked)) != null ? _a : radios[0];
+    const availableRadios = this.getAllRadios().filter((radio) => !radio.disabled && !radio.readonly);
+    const checkedRadio = (_a = availableRadios.find((radio) => radio.checked)) != null ? _a : availableRadios[0];
     const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
     const oldValue = this.value;
-    let index = radios.indexOf(checkedRadio) + incr;
+    let index = availableRadios.indexOf(checkedRadio) + incr;
     if (index < 0) {
-      index = radios.length - 1;
+      index = availableRadios.length - 1;
     }
-    if (index > radios.length - 1) {
+    if (index > availableRadios.length - 1) {
       index = 0;
     }
-    this.getAllRadios().forEach((radio) => {
+    const allRadios = this.getAllRadios();
+    allRadios.forEach((radio) => {
       radio.checked = false;
       if (!this.hasButtonGroup) {
         radio.setAttribute("tabindex", "-1");
       }
     });
-    this.value = radios[index].value;
-    radios[index].checked = true;
+    if (!availableRadios[index]) {
+      return;
+    }
+    this.value = availableRadios[index].value;
+    availableRadios[index].checked = true;
     if (!this.hasButtonGroup) {
-      radios[index].setAttribute("tabindex", "0");
-      radios[index].focus();
+      availableRadios[index].setAttribute("tabindex", "0");
+      availableRadios[index].focus();
     } else {
-      radios[index].shadowRoot.querySelector("button").focus();
+      availableRadios[index].shadowRoot.querySelector("button").focus();
     }
     if (this.value !== oldValue) {
       this.emit("syn-change");
@@ -193,7 +197,9 @@ var SynRadioGroup = class extends SynergyElement {
   }
   updateCheckedRadio() {
     const radios = this.getAllRadios();
-    radios.forEach((radio) => radio.checked = radio.value === this.value);
+    radios.forEach((radio) => {
+      radio.checked = radio.value === this.value;
+    });
     this.formControlController.setValidity(this.validity.valid);
   }
   handleSizeChange() {
@@ -228,7 +234,9 @@ var SynRadioGroup = class extends SynergyElement {
     if (!isValid) {
       this.validationInput.hidden = false;
       this.validationInput.reportValidity();
-      this.validationTimeout = setTimeout(() => this.validationInput.hidden = true, 1e4);
+      this.validationTimeout = setTimeout(() => {
+        this.validationInput.hidden = true;
+      }, 1e4);
     }
     return isValid;
   }
@@ -262,12 +270,12 @@ var SynRadioGroup = class extends SynergyElement {
         part="form-control"
         class=${classMap({
       "form-control": true,
-      "form-control--small": this.size === "small",
-      "form-control--medium": this.size === "medium",
+      "form-control--has-help-text": hasHelpText,
+      "form-control--has-label": hasLabel,
       "form-control--large": this.size === "large",
+      "form-control--medium": this.size === "medium",
       "form-control--radio-group": true,
-      "form-control--has-label": hasLabel,
-      "form-control--has-help-text": hasHelpText
+      "form-control--small": this.size === "small"
     })}
         role="radiogroup"
         aria-labelledby="label"
@@ -318,7 +326,7 @@ var SynRadioGroup = class extends SynergyElement {
     `;
   }
 };
-SynRadioGroup.styles = [component_styles_default, form_control_styles_default, radio_group_styles_default, form_control_custom_styles_default, radio_group_custom_styles_default];
+SynRadioGroup.styles = [component_styles_default, form_control_styles_default, radio_group_styles_default];
 SynRadioGroup.dependencies = { "syn-button-group": SynButtonGroup };
 __decorateClass([
   query("slot:not([name])")
@@ -354,7 +362,7 @@ __decorateClass([
   property({ reflect: true })
 ], SynRadioGroup.prototype, "form", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ reflect: true, type: Boolean })
 ], SynRadioGroup.prototype, "required", 2);
 __decorateClass([
   watch("size", { waitUntilFirstUpdate: true })
@@ -369,4 +377,4 @@ SynRadioGroup = __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.RFZFX5DB.js.map
+//# sourceMappingURL=chunk.IR3P3QGG.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-group/radio-group.component.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-floating-promises */\n/* eslint-disable no-param-reassign */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport {\n  FormControlController,\n  customErrorValidityState,\n  validValidityState,\n  valueMissingValidityState,\n} from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynButtonGroup from '../button-group/button-group.component.js';\nimport styles from './radio-group.styles.js';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type SynRadio from '../radio/radio.js';\nimport type SynRadioButton from '../radio-button/radio-button.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\n@enableDefaultSettings('SynRadioGroup')\nexport default class SynRadioGroup extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];\n\n  static dependencies = { 'syn-button-group': SynButtonGroup };\n\n  protected readonly formControlController = new FormControlController(this);\n\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n  private customValidityMessage = '';\n\n  private validationTimeout: number;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @query('.radio-group__validation-input') validationInput: HTMLInputElement;\n\n  @state() private hasButtonGroup = false;\n\n  @state() private errorMessage = '';\n\n  @state() defaultValue: string | number = '';\n\n  /**\n   * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n   * instead.\n   */\n  @property() label = '';\n\n  /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** The name of the radio group, submitted as a name/value pair with form data. */\n  @property() name = 'option';\n\n  /** The current value of the radio group, submitted as a name/value pair with form data. */\n  @property({ reflect: true }) value: string | number = '';\n\n  /** The radio group's size. This size will be applied to all child radios and radio buttons. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\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  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ reflect: true, type: Boolean }) required = false;\n\n  /** Gets the validity state object */\n  get validity() {\n    const isRequiredAndEmpty = this.required && !this.value;\n    const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n    if (hasCustomValidityMessage) {\n      return customErrorValidityState;\n    }\n\n    if (isRequiredAndEmpty) {\n      return valueMissingValidityState;\n    }\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    const isRequiredAndEmpty = this.required && !this.value;\n    const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n    if (hasCustomValidityMessage) {\n      return this.customValidityMessage;\n    }\n\n    if (isRequiredAndEmpty) {\n      return this.validationInput.validationMessage;\n    }\n\n    return '';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private getAllRadios() {\n    return [...this.querySelectorAll<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')];\n  }\n\n  private handleRadioClick(event: MouseEvent) {\n    const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;\n    const radios = this.getAllRadios();\n    const oldValue = this.value;\n\n    // #1174: If we have a radio, also do nothing if the radio is readonly\n    if (!target || target.disabled || (target as SynRadio).readonly) {\n      return;\n    }\n\n    this.value = target.value;\n    radios.forEach(radio => {\n      radio.checked = radio === target;\n    });\n\n    if (this.value !== oldValue) {\n      this.emit('syn-change');\n      this.emit('syn-input');\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\n      return;\n    }\n\n    // #1174: Filter out elements that are either disabled or readonly\n    const availableRadios = this.getAllRadios().filter(radio => (!radio.disabled && !(radio as SynRadio).readonly));\n    const checkedRadio = availableRadios.find(radio => radio.checked) ?? availableRadios[0];\n\n    // eslint-disable-next-line no-nested-ternary\n    const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n    const oldValue = this.value;\n    let index = availableRadios.indexOf(checkedRadio) + incr;\n\n    if (index < 0) {\n      index = availableRadios.length - 1;\n    }\n\n    if (index > availableRadios.length - 1) {\n      index = 0;\n    }\n\n    const allRadios = this.getAllRadios();\n\n    allRadios.forEach(radio => {\n      radio.checked = false;\n\n      if (!this.hasButtonGroup) {\n        radio.setAttribute('tabindex', '-1');\n      }\n    });\n\n    // #1175: If all radios are readonly, skip and focus the first one and do not change the value\n    if (!availableRadios[index]) {\n      return;\n    }\n\n    this.value = availableRadios[index].value;\n    availableRadios[index].checked = true;\n\n    if (!this.hasButtonGroup) {\n      availableRadios[index].setAttribute('tabindex', '0');\n      availableRadios[index].focus();\n    } else {\n      availableRadios[index].shadowRoot!.querySelector('button')!.focus();\n    }\n\n    if (this.value !== oldValue) {\n      this.emit('syn-change');\n      this.emit('syn-input');\n    }\n\n    event.preventDefault();\n  }\n\n  private handleLabelClick() {\n    this.focus();\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private async syncRadioElements() {\n    const radios = this.getAllRadios();\n\n    await Promise.all(\n      // Sync the checked state and size\n      radios.map(async radio => {\n        await radio.updateComplete;\n        radio.checked = radio.value === this.value;\n        radio.size = this.size;\n      }),\n    );\n\n    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'syn-radio-button');\n\n    if (radios.length > 0 && !radios.some(radio => radio.checked)) {\n      if (this.hasButtonGroup) {\n        const buttonRadio = radios[0].shadowRoot?.querySelector('button');\n\n        if (buttonRadio) {\n          buttonRadio.setAttribute('tabindex', '0');\n        }\n      } else {\n        radios[0].setAttribute('tabindex', '0');\n      }\n    }\n\n    if (this.hasButtonGroup) {\n      const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');\n\n      if (buttonGroup) {\n        buttonGroup.disableRole = true;\n      }\n    }\n  }\n\n  private syncRadios() {\n    if (customElements.get('syn-radio') && customElements.get('syn-radio-button')) {\n      this.syncRadioElements();\n      return;\n    }\n\n    if (customElements.get('syn-radio')) {\n      this.syncRadioElements();\n    } else {\n      customElements.whenDefined('syn-radio').then(() => this.syncRadios());\n    }\n\n    if (customElements.get('syn-radio-button')) {\n      this.syncRadioElements();\n    } else {\n      // Rerun this handler when <syn-radio> or <syn-radio-button> is registered\n      customElements.whenDefined('syn-radio-button').then(() => this.syncRadios());\n    }\n  }\n\n  private updateCheckedRadio() {\n    const radios = this.getAllRadios();\n    radios.forEach(radio => {\n      radio.checked = radio.value === this.value;\n    });\n    this.formControlController.setValidity(this.validity.valid);\n  }\n\n  @watch('size', { waitUntilFirstUpdate: true })\n  handleSizeChange() {\n    this.syncRadios();\n  }\n\n  @watch('value')\n  handleValueChange() {\n    if (this.hasUpdated) {\n      this.updateCheckedRadio();\n    }\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    const isRequiredAndEmpty = this.required && !this.value;\n    const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n    if (isRequiredAndEmpty || hasCustomValidityMessage) {\n      this.formControlController.emitInvalidEvent();\n      return false;\n    }\n\n    return true;\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(): boolean {\n    const isValid = this.validity.valid;\n\n    this.errorMessage = this.customValidityMessage || isValid ? '' : this.validationInput.validationMessage;\n    this.formControlController.setValidity(isValid);\n    this.validationInput.hidden = true;\n    clearTimeout(this.validationTimeout);\n\n    if (!isValid) {\n      // Show the browser's constraint validation message\n      this.validationInput.hidden = false;\n      this.validationInput.reportValidity();\n      this.validationTimeout = setTimeout(() => {\n        this.validationInput.hidden = true;\n      }, 10000) as unknown as number;\n    }\n\n    return isValid;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message = '') {\n    this.customValidityMessage = message;\n    this.errorMessage = message;\n    this.validationInput.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  /** Sets focus on the radio-group. */\n  public focus(options?: FocusOptions) {\n    const radios = this.getAllRadios();\n    const checked = radios.find(radio => radio.checked);\n    const firstEnabledRadio = radios.find(radio => !radio.disabled);\n    const radioToFocus = checked || firstEnabledRadio;\n\n    // Call focus for the checked radio\n    // If no radio is checked, focus the first one that is not disabled\n    if (radioToFocus) {\n      radioToFocus.focus(options);\n    }\n  }\n\n  render() {\n    /* eslint-disable @typescript-eslint/unbound-method */\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n    const defaultSlot = html`\n      <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>\n    `;\n\n    return html`\n      <fieldset\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--has-help-text': hasHelpText,\n          'form-control--has-label': hasLabel,\n          'form-control--large': this.size === 'large',\n          'form-control--medium': this.size === 'medium',\n          'form-control--radio-group': true,\n          'form-control--small': this.size === 'small',\n        })}\n        role=\"radiogroup\"\n        aria-labelledby=\"label\"\n        aria-describedby=\"help-text\"\n        aria-errormessage=\"error-message\"\n      >\n        <label\n          part=\"form-control-label\"\n          id=\"label\"\n          class=\"form-control__label\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n          @click=${this.handleLabelClick}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <div class=\"visually-hidden\">\n            <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\n            <label class=\"radio-group__validation\">\n              <input\n                type=\"text\"\n                class=\"radio-group__validation-input\"\n                ?required=${this.required}\n                tabindex=\"-1\"\n                hidden\n                @invalid=${this.handleInvalid}\n              />\n            </label>\n          </div>\n\n          ${this.hasButtonGroup\n            ? html`\n                <syn-button-group part=\"button-group\" exportparts=\"base:button-group__base\" role=\"presentation\">\n                  ${defaultSlot}\n                </syn-button-group>\n              `\n            : defaultSlot}\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </fieldset>\n    `;\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.UHLDAGGC.js → chunk.IV3FR4CG.js}

@@ -1,16 +1,15 @@
 import {
   file_styles_default
-} from "./chunk.CDOWFAH2.js";
+} from "./chunk.2ECWEEUO.js";
 import {
   defaultValue
 } from "./chunk.3JDUKQRN.js";
 import {
-  form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.PTRCO527.js";
+} from "./chunk.34WYIU4C.js";
 import {
   SynButton
-} from "./chunk.ZWIJDTHA.js";
+} from "./chunk.NB2UOW3O.js";
 import {
   FormControlController
 } from "./chunk.J3GDDM6Q.js";
@@ -26,22 +25,22 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.3BNYHBTW.js";
-import {
-  watch
-} from "./chunk.SMIMHADA.js";
+} from "./chunk.6GMIINJO.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
-} from "./chunk.YACUYJZN.js";
+} from "./chunk.4BEGBAQD.js";
+import {
+  watch
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -69,6 +68,7 @@ var SynFile = class extends SynergyElement {
     this.label = "";
     this.helpText = "";
     this.disabled = false;
+    this.readonly = false;
     this.droparea = false;
     this.accept = "";
     this.multiple = false;
@@ -209,11 +209,17 @@ var SynFile = class extends SynergyElement {
   handleDragOver(e) {
     e.preventDefault();
     e.stopPropagation();
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.userIsDragging = true;
   }
   handleDragLeave(e) {
     e.preventDefault();
     e.stopPropagation();
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.userIsDragging = false;
   }
   // eslint-disable-next-line complexity
@@ -221,6 +227,9 @@ var SynFile = class extends SynergyElement {
     var _a;
     e.preventDefault();
     e.stopPropagation();
+    if (this.disabled || this.readonly) {
+      return;
+    }
     if (!e.dataTransfer) {
       return;
     }
@@ -332,7 +341,7 @@ var SynFile = class extends SynergyElement {
         <syn-button
           class="button"
           @click=${this.handleClick}
-          ?disabled=${this.disabled}
+          ?disabled=${this.disabled || this.readonly}
           exportparts="base:button__base"
           part="button"
           size=${this.size}
@@ -346,7 +355,6 @@ var SynFile = class extends SynergyElement {
   }
   /* eslint-enable @typescript-eslint/unbound-method */
   /* eslint-disable @typescript-eslint/unbound-method */
-  // eslint-disable-next-line complexity
   render() {
     const hasLabel = this.label || !!this.hasSlotController.test("label");
     const hasHelpText = this.helpText ? true : !!this.hasSlotController.test("help-text");
@@ -408,7 +416,7 @@ var SynFile = class extends SynergyElement {
           aria-describedby="help-text"
           @change=${this.handleChange}
           class="input__control"
-          ?disabled=${this.disabled}
+          ?disabled=${this.disabled || this.readonly}
           id="input"
           @invalid=${this.handleInvalid}
           ?multiple=${this.multiple}
@@ -426,7 +434,6 @@ var SynFile = class extends SynergyElement {
 SynFile.styles = [
   component_styles_default,
   form_control_styles_default,
-  form_control_custom_styles_default,
   file_styles_default
 ];
 SynFile.dependencies = {
@@ -460,6 +467,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], SynFile.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynFile.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean })
 ], SynFile.prototype, "droparea", 2);
@@ -534,4 +544,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.UHLDAGGC.js.map
+//# sourceMappingURL=chunk.IV3FR4CG.js.map

package/dist/chunks/chunk.IV3FR4CG.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 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    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  /** Sets the file control to a readonly state. */\n  @property({ reflect: true, type: Boolean }) readonly = 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\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.userIsDragging = true;\n  }\n\n  private handleDragLeave(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\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 (this.disabled || this.readonly) {\n      return;\n    }\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 || this.readonly}\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  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 || this.readonly}\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.NG6MPQXW.js → chunk.JBNR3EZZ.js}

@@ -1,18 +1,15 @@
-import {
-  popup_custom_styles_default
-} from "./chunk.36EHOOOO.js";
 import {
   popup_styles_default
-} from "./chunk.DEJAPNIZ.js";
+} from "./chunk.3334XOIY.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -342,7 +339,7 @@ var SynPopup = class extends SynergyElement {
     `;
   }
 };
-SynPopup.styles = [component_styles_default, popup_styles_default, popup_custom_styles_default];
+SynPopup.styles = [component_styles_default, popup_styles_default];
 __decorateClass([
   query(".popup")
 ], SynPopup.prototype, "popup", 2);
@@ -426,4 +423,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.NG6MPQXW.js.map
+//# sourceMappingURL=chunk.JBNR3EZZ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/popup/popup.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { offsetParent } from 'composed-offset-position';\nimport { property, query } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './popup.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nconst SUPPORTS_POPOVER = globalThis?.HTMLElement?.prototype.hasOwnProperty('popover');\n\nexport interface VirtualElement {\n  getBoundingClientRect: () => DOMRect;\n  contextElement?: Element;\n}\n\nfunction isVirtualElement(e: unknown): e is VirtualElement {\n  return (\n    e !== null &&\n    typeof e === 'object' &&\n    'getBoundingClientRect' in e &&\n    ('contextElement' in e ? e.contextElement instanceof Element : true)\n  );\n}\n\n/**\n * @summary Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs\n * @status stable\n * @since 2.0\n *\n * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n *  operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n *  `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n *  maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n *  attribute is used.\n * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n */\nexport default class SynPopup extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private anchorEl: Element | VirtualElement | null;\n  private cleanup: ReturnType<typeof autoUpdate> | undefined;\n  private readonly localize = new LocalizeController(this);\n\n  /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */\n  @query('.popup') popup: HTMLElement;\n  @query('.popup__arrow') private arrowEl: HTMLElement;\n\n  /**\n   * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\n   * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n   * `anchor` slot instead.\n   */\n  @property() anchor: Element | string | VirtualElement;\n\n  /**\n   * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\n   * down and the popup will be hidden.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\n   * panel inside of the viewport.\n   */\n  @property({ reflect: true }) placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the panel away from its anchor. */\n  @property({ type: Number }) distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its anchor. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n   * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n   * `::part(arrow)` in your stylesheet.\n   */\n  @property({ type: Boolean }) arrow = false;\n\n  /**\n   * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\n   * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\n   * align the arrow to the start, end, or center of the popover instead.\n   */\n  @property({ attribute: 'arrow-placement' }) arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n  /**\n   * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\n   * this will prevent it from overflowing the corners.\n   */\n  @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;\n\n  /**\n   * When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n   * `flipFallbackPlacements` to further configure how the fallback placement is determined.\n   */\n  @property({ type: Boolean }) flip = false;\n\n  /**\n   * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\n   * string of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\n   * fallback strategy will be used instead.\n   * */\n  @property({\n    attribute: 'flip-fallback-placements',\n    converter: {\n      fromAttribute: (value: string) => {\n        return value\n          .split(' ')\n          .map(p => p.trim())\n          .filter(p => p !== '');\n      },\n      toAttribute: (value: []) => {\n        return value.join(' ');\n      }\n    }\n  })\n  flipFallbackPlacements = '';\n\n  /**\n   * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\n   * the popup should be positioned using the best available fit based on available space or as it was initially\n   * preferred.\n   */\n  @property({ attribute: 'flip-fallback-strategy' }) flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n  /**\n   * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) flipBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */\n  @property({ attribute: 'flip-padding', type: Number }) flipPadding = 0;\n\n  /** Moves the popup along the axis to keep it in view when clipped. */\n  @property({ type: Boolean }) shift = false;\n\n  /**\n   * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) shiftBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */\n  @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;\n\n  /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */\n  @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';\n\n  /** Syncs the popup's width or height to that of the anchor element. */\n  @property() sync: 'width' | 'height' | 'both';\n\n  /**\n   * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) autoSizeBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */\n  @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;\n\n  /**\n   * When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\n   * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\n   * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\n   * active.\n   */\n  @property({ attribute: 'hover-bridge', type: Boolean }) hoverBridge = false;\n\n  async connectedCallback() {\n    super.connectedCallback();\n\n    // Start the positioner after the first update\n    await this.updateComplete;\n    this.start();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.stop();\n  }\n\n  async updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    // Start or stop the positioner when active changes\n    if (changedProps.has('active')) {\n      if (this.active) {\n        this.start();\n      } else {\n        this.stop();\n      }\n    }\n\n    // Update the anchor when anchor changes\n    if (changedProps.has('anchor')) {\n      this.handleAnchorChange();\n    }\n\n    // All other properties will trigger a reposition when active\n    if (this.active) {\n      await this.updateComplete;\n      this.reposition();\n    }\n  }\n\n  private async handleAnchorChange() {\n    await this.stop();\n\n    if (this.anchor && typeof this.anchor === 'string') {\n      // Locate the anchor by id\n      const root = this.getRootNode() as Document | ShadowRoot;\n      this.anchorEl = root.getElementById(this.anchor);\n    } else if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {\n      // Use the anchor's reference\n      this.anchorEl = this.anchor;\n    } else {\n      // Look for a slotted anchor\n      this.anchorEl = this.querySelector<HTMLElement>('[slot=\"anchor\"]');\n    }\n\n    // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`\n    // and positioning can't be calculated on them\n    if (this.anchorEl instanceof HTMLSlotElement) {\n      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;\n    }\n\n    // If the anchor is valid, start it up\n    if (this.anchorEl && this.active) {\n      this.start();\n    }\n  }\n\n  private start() {\n    // We can't start the positioner without an anchor or when the popup is inactive\n    if (!this.anchorEl || !this.active) {\n      return;\n    }\n\n    if (SUPPORTS_POPOVER) {\n      this.popup.showPopover?.();\n    }\n\n    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {\n      this.reposition();\n    });\n  }\n\n  private async stop(): Promise<void> {\n    return new Promise(resolve => {\n      if (SUPPORTS_POPOVER) {\n        // #1041 In some testing frameworks the disconnectedCallback is called too early so this.popup is not yet available\n        this.popup?.hidePopover?.();\n      }\n      if (this.cleanup) {\n        this.cleanup();\n        this.cleanup = undefined;\n        this.removeAttribute('data-current-placement');\n        this.style.removeProperty('--auto-size-available-width');\n        this.style.removeProperty('--auto-size-available-height');\n        requestAnimationFrame(() => resolve());\n      } else {\n        resolve();\n      }\n    });\n  }\n\n  /** Forces the popup to recalculate and reposition itself. */\n  reposition() {\n    // Nothing to do if the popup is inactive or the anchor doesn't exist\n    if (!this.active || !this.anchorEl) {\n      return;\n    }\n\n    //\n    // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware\n    //\n    const middleware = [\n      // The offset middleware goes first\n      offset({ mainAxis: this.distance, crossAxis: this.skidding })\n    ];\n\n    // First we sync width/height\n    if (this.sync) {\n      middleware.push(\n        size({\n          apply: ({ rects }) => {\n            const syncWidth = this.sync === 'width' || this.sync === 'both';\n            const syncHeight = this.sync === 'height' || this.sync === 'both';\n            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';\n            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're not matching width/height\n      this.popup.style.width = '';\n      this.popup.style.height = '';\n    }\n\n    // Then we flip\n    if (this.flip) {\n      middleware.push(\n        flip({\n          boundary: this.flipBoundary,\n          // @ts-expect-error - We're converting a string attribute to an array here\n          fallbackPlacements: this.flipFallbackPlacements,\n          fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n          padding: this.flipPadding\n        })\n      );\n    }\n\n    // Then we shift\n    if (this.shift) {\n      middleware.push(\n        shift({\n          boundary: this.shiftBoundary,\n          padding: this.shiftPadding\n        })\n      );\n    }\n\n    // Now we adjust the size as needed\n    if (this.autoSize) {\n      middleware.push(\n        size({\n          boundary: this.autoSizeBoundary,\n          padding: this.autoSizePadding,\n          apply: ({ availableWidth, availableHeight }) => {\n            if (this.autoSize === 'vertical' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-height');\n            }\n\n            if (this.autoSize === 'horizontal' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-width');\n            }\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're no longer using auto-size\n      this.style.removeProperty('--auto-size-available-width');\n      this.style.removeProperty('--auto-size-available-height');\n    }\n\n    // Finally, we add an arrow\n    if (this.arrow) {\n      middleware.push(\n        arrow({\n          element: this.arrowEl,\n          padding: this.arrowPadding\n        })\n      );\n    }\n\n    //\n    // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.\n    //\n    // More info: https://github.com/shoelace-style/shoelace/issues/1135\n    //\n    const getOffsetParent =\n      SUPPORTS_POPOVER\n        ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n        : platform.getOffsetParent;\n\n    computePosition(this.anchorEl, this.popup, {\n      placement: this.placement,\n      middleware,\n      strategy: SUPPORTS_POPOVER ? 'absolute' : 'fixed',\n      platform: {\n        ...platform,\n        getOffsetParent\n      }\n    }).then(({ x, y, middlewareData, placement }) => {\n      //\n      // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of\n      // that, we'll use the same approach that Floating UI uses.\n      //\n      // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31\n      //\n      const isRtl = this.localize.dir() === 'rtl';\n      const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;\n\n      this.setAttribute('data-current-placement', placement);\n\n      Object.assign(this.popup.style, {\n        left: `${x}px`,\n        top: `${y}px`\n      });\n\n      if (this.arrow) {\n        const arrowX = middlewareData.arrow!.x;\n        const arrowY = middlewareData.arrow!.y;\n        let top = '';\n        let right = '';\n        let bottom = '';\n        let left = '';\n\n        if (this.arrowPlacement === 'start') {\n          // Start\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? value : '';\n          left = isRtl ? '' : value;\n        } else if (this.arrowPlacement === 'end') {\n          // End\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? '' : value;\n          left = isRtl ? value : '';\n          bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n        } else if (this.arrowPlacement === 'center') {\n          // Center\n          left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n          top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n        } else {\n          // Anchor (default)\n          left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n          top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n        }\n\n        Object.assign(this.arrowEl.style, {\n          top,\n          right,\n          bottom,\n          left,\n          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'\n        });\n      }\n    });\n\n    // Wait until the new position is drawn before updating the hover bridge, otherwise it can get out of sync\n    requestAnimationFrame(() => this.updateHoverBridge());\n\n    this.emit('syn-reposition');\n  }\n\n  private updateHoverBridge = () => {\n    if (this.hoverBridge && this.anchorEl) {\n      const anchorRect = this.anchorEl.getBoundingClientRect();\n      const popupRect = this.popup.getBoundingClientRect();\n      const isVertical = this.placement.includes('top') || this.placement.includes('bottom');\n      let topLeftX = 0;\n      let topLeftY = 0;\n      let topRightX = 0;\n      let topRightY = 0;\n      let bottomLeftX = 0;\n      let bottomLeftY = 0;\n      let bottomRightX = 0;\n      let bottomRightY = 0;\n\n      if (isVertical) {\n        if (anchorRect.top < popupRect.top) {\n          // Anchor is above\n          topLeftX = anchorRect.left;\n          topLeftY = anchorRect.bottom;\n          topRightX = anchorRect.right;\n          topRightY = anchorRect.bottom;\n\n          bottomLeftX = popupRect.left;\n          bottomLeftY = popupRect.top;\n          bottomRightX = popupRect.right;\n          bottomRightY = popupRect.top;\n        } else {\n          // Anchor is below\n          topLeftX = popupRect.left;\n          topLeftY = popupRect.bottom;\n          topRightX = popupRect.right;\n          topRightY = popupRect.bottom;\n\n          bottomLeftX = anchorRect.left;\n          bottomLeftY = anchorRect.top;\n          bottomRightX = anchorRect.right;\n          bottomRightY = anchorRect.top;\n        }\n      } else {\n        if (anchorRect.left < popupRect.left) {\n          // Anchor is on the left\n          topLeftX = anchorRect.right;\n          topLeftY = anchorRect.top;\n          topRightX = popupRect.left;\n          topRightY = popupRect.top;\n\n          bottomLeftX = anchorRect.right;\n          bottomLeftY = anchorRect.bottom;\n          bottomRightX = popupRect.left;\n          bottomRightY = popupRect.bottom;\n        } else {\n          // Anchor is on the right\n          topLeftX = popupRect.right;\n          topLeftY = popupRect.top;\n          topRightX = anchorRect.left;\n          topRightY = anchorRect.top;\n\n          bottomLeftX = popupRect.right;\n          bottomLeftY = popupRect.bottom;\n          bottomRightX = anchorRect.left;\n          bottomRightY = anchorRect.bottom;\n        }\n      }\n\n      this.style.setProperty('--hover-bridge-top-left-x', `${topLeftX}px`);\n      this.style.setProperty('--hover-bridge-top-left-y', `${topLeftY}px`);\n      this.style.setProperty('--hover-bridge-top-right-x', `${topRightX}px`);\n      this.style.setProperty('--hover-bridge-top-right-y', `${topRightY}px`);\n      this.style.setProperty('--hover-bridge-bottom-left-x', `${bottomLeftX}px`);\n      this.style.setProperty('--hover-bridge-bottom-left-y', `${bottomLeftY}px`);\n      this.style.setProperty('--hover-bridge-bottom-right-x', `${bottomRightX}px`);\n      this.style.setProperty('--hover-bridge-bottom-right-y', `${bottomRightY}px`);\n    }\n  };\n\n  render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this.handleAnchorChange}></slot>\n\n      <span\n        part=\"hover-bridge\"\n        class=${classMap({\n          'popup-hover-bridge': true,\n          'popup-hover-bridge--visible': this.hoverBridge && this.active\n        })}\n      ></span>\n\n      <div\n        part=\"popup\"\n        popover=${ifDefined(SUPPORTS_POPOVER ? 'manual' : undefined)}\n        class=${classMap({\n          popup: true,\n          'popup--active': this.active,\n          'popup--fixed': !SUPPORTS_POPOVER,\n          'popup--has-arrow': this.arrow\n        })}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\" class=\"popup__arrow\" role=\"presentation\"></div>` : ''}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["_a"]
+}

package/dist/chunks/{chunk.SFAXS422.js → chunk.JXCCMLXD.js}

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

package/dist/chunks/{chunk.ZZPMWJEV.js → chunk.K7FUMJK2.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.3T6ULO23.js";
 import {
   SynDivider
-} from "./chunk.WYNTVNZN.js";
+} from "./chunk.BYGCAEBC.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -131,4 +131,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.ZZPMWJEV.js.map
+//# sourceMappingURL=chunk.K7FUMJK2.js.map