@synergy-design-system/components 2.30.1 → 2.30.3

package/dist/chunks/{chunk.5PKVCNHM.js → chunk.2BF2ZBSM.js}

@@ -10,10 +10,10 @@ import {
 } from "./chunk.AERTEAG5.js";
 import {
   SynButton
-} from "./chunk.KBBZYAPL.js";
+} from "./chunk.UMJHRTE5.js";
 import {
   FormControlController
-} from "./chunk.AMIQC3O7.js";
+} from "./chunk.OLRA37R5.js";
 import {
   animateTo
 } from "./chunk.A3OYJILJ.js";
@@ -26,22 +26,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.R3THZVHP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.IC3XQ2EB.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
 import {
   enableDefaultSettings
 } from "./chunk.NUIJATJY.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -534,4 +534,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.5PKVCNHM.js.map
+//# sourceMappingURL=chunk.2BF2ZBSM.js.map

package/dist/chunks/chunk.2BF2ZBSM.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.SZ73NMRJ.js → chunk.2NS2E3LJ.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.QHPOPKTJ.js";
+} from "./chunk.R2CZGOPZ.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.SZ73NMRJ.js.map
+//# sourceMappingURL=chunk.2NS2E3LJ.js.map

package/dist/chunks/{chunk.DG6GXAVF.js → chunk.2W4MHJAM.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk.OJ3N7TWP.js";
 import {
   SynNavItem
-} from "./chunk.46CKMKX5.js";
+} from "./chunk.ZJ43C76S.js";
 import {
   SynMenu
-} from "./chunk.B3D627OD.js";
+} from "./chunk.JIELXBUU.js";
 import {
   SynDropdown
-} from "./chunk.QHPOPKTJ.js";
+} from "./chunk.R2CZGOPZ.js";
 import {
   SynIcon
-} from "./chunk.R3THZVHP.js";
+} from "./chunk.IC3XQ2EB.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.DG6GXAVF.js.map
+//# sourceMappingURL=chunk.2W4MHJAM.js.map

package/dist/chunks/chunk.2W4MHJAM.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/prio-nav/prio-nav.component.ts"],
+  "sourcesContent": ["/* eslint-disable no-param-reassign */\nimport type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './prio-nav.styles.js';\nimport SynDropdown from '../dropdown/dropdown.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynMenu from '../menu/menu.component.js';\nimport SynNavItem from '../nav-item/nav-item.component.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport {\n  filterOnlyNavItems,\n  getAssignedElementsForSlot,\n  hideNavigationItem,\n  showNavigationItem,\n} from './utils.js';\n\n/**\n * @summary The `<syn-prio-nav />` element provides a generic navigation bar\n * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\n * together. It will automatically group all items not visible in the viewport into a custom\n * priority menu.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs\n * @example\n * <syn-prio-nav>\n *  <syn-nav-item current horizontal>Item 1</syn-nav-item>\n *  <button role=\"menuitem\">Item 2 (custom)</button>\n *  <syn-nav-item horizontal>Item 3</syn-nav-item>\n * </syn-prio-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-dropdown\n * @dependency syn-icon\n * @dependency syn-menu\n * @dependency syn-nav-item\n *\n * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s\n *    or have a role of \"menuitem\"\n *\n * @csspart base - The component's base wrapper.\n * @csspart priority-menu - The wrapper around the priority menu\n * @csspart priority-menu-nav-item - The navigation item for the priority menu\n * @csspart priority-menu-label - The label for the priority menu\n * @csspart priority-menu-icon - The icon for the priority menu\n * @csspart priority-menu-container - The container for the shifted navigation items,\n *    if there is not enough space.\n *\n */\nexport default class SynPrioNav extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-dropdown': SynDropdown,\n    'syn-icon': SynIcon,\n    'syn-menu': SynMenu,\n    'syn-nav-item': SynNavItem,\n  };\n\n  /**\n   * Internal resize observer\n   */\n  private resizeObserver: ResizeObserver;\n\n  private readonly localize = new LocalizeController(this);\n\n  /**\n   * Reference to the rendered children slot\n   */\n  @query('slot:not([name])') private defaultSlot: HTMLSlotElement;\n\n  /**\n   * Reference to the slot where priority menu items are placed\n   */\n  @query('slot[name=menu]') private menuSlot: HTMLSlotElement;\n\n  /**\n   * The wrapper that holds the horizontal navigation items\n   */\n  @query('.horizontal-nav') private horizontalNav: HTMLDivElement;\n\n  /**\n   * The priority menu dropdown\n   */\n  @query('.priority-menu') private priorityMenu: SynDropdown;\n\n  /**\n   * Internal state reflecting if the item positions have been cached\n   */\n  @state() private itemPositionsCached = false;\n\n  /**\n   * The amount of nav items that are currently slotted\n   */\n  @state() private amountOfNavItems = 0;\n\n  /**\n   * The amount of items that are currently visible\n   */\n  @state() private amountOfVisibleItems = 0;\n\n  /**\n   * Internal state reflecting if there are items in the priority menu\n   */\n  @state() private hasItemsInDropdown = false;\n\n  /**\n   * Get a list of all slotted `<syn-nav-item />` elements\n   * that are either in the main slot or the priority menu slot\n   */\n  private getSlottedNavItems() {\n    const navItemsInDefaultSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.defaultSlot));\n    const navItemsInMenuSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.menuSlot));\n    return navItemsInDefaultSlot.concat(navItemsInMenuSlot);\n  }\n\n  /**\n   * Cache the items right offset position to make faster checks placement into priority menu\n   * @param items The items to cache the position for\n   */\n  private cacheItemPositions(items: SynNavItem[]) {\n    const { left } = this.horizontalNav.getBoundingClientRect();\n    items.forEach(item => {\n      // We have to measure while the items are in the primary slot,\n      // else we will just get the placement in the priority menu\n      item.removeAttribute('slot');\n      const { right } = item.getBoundingClientRect();\n      // We also need to consider the location of the parent\n      item.dataset.right = (right - left).toString();\n    });\n\n    this.itemPositionsCached = true;\n  }\n\n  /**\n   * Determines which items should be shown or hidden, depending on the current width\n   */\n  private handlePriorityMenu() {\n    const navItems = this.getSlottedNavItems();\n\n    if (!this.itemPositionsCached) {\n      this.cacheItemPositions(navItems);\n    }\n\n    // Get the widths of the horizontal nav and the priority menu\n    // We subtract the width of the priority menu to get the final width\n    const { width } = this.horizontalNav.getBoundingClientRect();\n\n    // #651: Do not take the size of the priority menu\n    // into account when it is hidden\n    const reservedPrioMenuSize = this.priorityMenu.classList.contains('priority-menu--hidden')\n      ? 0\n      : this.priorityMenu.clientWidth;\n\n    const finalWidth = width - reservedPrioMenuSize;\n\n    // Cache the first item that should be hidden\n    let firstHiddenItemRightPos: number | undefined;\n\n    // Cache the last item so we can decide to use the finalWidth or just the width\n    // later on. This is needed as otherwise the last item will be hidden when using finalWidth\n    const lastNavItem = navItems.at(-1);\n\n    const itemVisibilities = navItems.map(item => {\n      const measureWidth = item === lastNavItem ? width : finalWidth;\n      const isHidden = !!(\n        firstHiddenItemRightPos\n        || parseFloat(item.dataset.right!) > measureWidth\n      );\n\n      // Get the position of the first item\n      // Will get used to position the priority menu\n      if (isHidden && !firstHiddenItemRightPos) {\n        firstHiddenItemRightPos = parseFloat(item.dataset.right!);\n      }\n\n      return {\n        isHidden,\n        item,\n      };\n    });\n\n    const visibleItems = itemVisibilities.filter(({ isHidden }) => !isHidden).length;\n    const hasOnlyOneItem = visibleItems === 1;\n\n    // Finally, hide or show the items based on the visibility\n    // As requested in #410, we hide all items if there is only one item\n    itemVisibilities.forEach(({ item, isHidden }) => {\n      if (isHidden || hasOnlyOneItem) {\n        hideNavigationItem(item);\n      } else {\n        showNavigationItem(item);\n      }\n    });\n\n    // Tell the render call that we have items in the priority menu\n    // and toggle the visibility of the priority menu label\n    this.hasItemsInDropdown = visibleItems !== navItems.length;\n    this.amountOfVisibleItems = hasOnlyOneItem ? 0 : visibleItems;\n  }\n\n  private renderPriorityMenu() {\n    return html`\n      <syn-dropdown\n        class=${classMap({\n          'priority-menu': true,\n          'priority-menu--has-visible-items': this.amountOfVisibleItems !== 0,\n          'priority-menu--hidden': !this.hasItemsInDropdown,\n        })}\n        part=\"priority-menu\"\n        placement=\"bottom-end\"\n      >\n        <syn-nav-item class=\"priority-menu__nav-item\" slot=\"trigger\" horizontal part=\"priority-menu-nav-item\">\n          <syn-icon \n            class=\"priority-menu__icon\"\n            label=\"More\"\n            library=\"system\"\n            name=\"more\"\n            part=\"priority-menu-icon\"\n            slot=\"prefix\"\n          >\n          </syn-icon>\n          <span\n            class=${classMap({\n              'priority-menu__label': true,\n              'priority-menu__label--visible': this.amountOfVisibleItems === 0,\n            })}\n            part=\"priority-menu-label\"\n          >\n            ${this.localize.term('menu')}\n          </span>\n        </syn-nav-item>\n\n        <syn-menu part=\"priority-menu-container\">\n          <slot name=\"menu\"></slot>\n        </syn-menu>\n\n      </syn-dropdown>\n    `;\n  }\n\n  private slotChange() {\n    const slottedItems = this.getSlottedNavItems();\n\n    // Make sure to trigger a recalculation of the item positions if we a new list of slotted items\n    if (slottedItems.length !== this.amountOfNavItems) {\n      this.cacheItemPositions(slottedItems);\n      this.handlePriorityMenu();\n      this.amountOfNavItems = slottedItems.length;\n    }\n  }\n\n  protected firstUpdated() {\n    // Cache the original role of the items so we can reset it if needed.\n    this.getSlottedNavItems().forEach(item => {\n      item.dataset.originalRole = item.getAttribute('role') ?? '';\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.handlePriorityMenu());\n    this.resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this);\n  }\n\n  render() {\n    /* eslint-disable @typescript-eslint/unbound-method */\n    return html`\n      <nav class=\"horizontal-nav\" part=\"base\">\n        <slot @slotchange=${this.slotChange}></slot>\n        ${this.renderPriorityMenu()}\n      </nav>\n    `;\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,OAAO,aAAa;AAmD7B,IAAqB,aAArB,cAAwC,eAAe;AAAA,EAAvD;AAAA;AAeE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAyB9C,SAAQ,sBAAsB;AAK9B,SAAQ,mBAAmB;AAK3B,SAAQ,uBAAuB;AAK/B,SAAQ,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9B,qBAAqB;AAC3B,UAAM,wBAAwB,mBAAmB,2BAA2B,KAAK,WAAW,CAAC;AAC7F,UAAM,qBAAqB,mBAAmB,2BAA2B,KAAK,QAAQ,CAAC;AACvF,WAAO,sBAAsB,OAAO,kBAAkB;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,mBAAmB,OAAqB;AAC9C,UAAM,EAAE,KAAK,IAAI,KAAK,cAAc,sBAAsB;AAC1D,UAAM,QAAQ,UAAQ;AAGpB,WAAK,gBAAgB,MAAM;AAC3B,YAAM,EAAE,MAAM,IAAI,KAAK,sBAAsB;AAE7C,WAAK,QAAQ,SAAS,QAAQ,MAAM,SAAS;AAAA,IAC/C,CAAC;AAED,SAAK,sBAAsB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKQ,qBAAqB;AAC3B,UAAM,WAAW,KAAK,mBAAmB;AAEzC,QAAI,CAAC,KAAK,qBAAqB;AAC7B,WAAK,mBAAmB,QAAQ;AAAA,IAClC;AAIA,UAAM,EAAE,MAAM,IAAI,KAAK,cAAc,sBAAsB;AAI3D,UAAM,uBAAuB,KAAK,aAAa,UAAU,SAAS,uBAAuB,IACrF,IACA,KAAK,aAAa;AAEtB,UAAM,aAAa,QAAQ;AAG3B,QAAI;AAIJ,UAAM,cAAc,SAAS,GAAG,EAAE;AAElC,UAAM,mBAAmB,SAAS,IAAI,UAAQ;AAC5C,YAAM,eAAe,SAAS,cAAc,QAAQ;AACpD,YAAM,WAAW,CAAC,EAChB,2BACG,WAAW,KAAK,QAAQ,KAAM,IAAI;AAKvC,UAAI,YAAY,CAAC,yBAAyB;AACxC,kCAA0B,WAAW,KAAK,QAAQ,KAAM;AAAA,MAC1D;AAEA,aAAO;AAAA,QACL;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM,eAAe,iBAAiB,OAAO,CAAC,EAAE,SAAS,MAAM,CAAC,QAAQ,EAAE;AAC1E,UAAM,iBAAiB,iBAAiB;AAIxC,qBAAiB,QAAQ,CAAC,EAAE,MAAM,SAAS,MAAM;AAC/C,UAAI,YAAY,gBAAgB;AAC9B,2BAAmB,IAAI;AAAA,MACzB,OAAO;AACL,2BAAmB,IAAI;AAAA,MACzB;AAAA,IACF,CAAC;AAID,SAAK,qBAAqB,iBAAiB,SAAS;AACpD,SAAK,uBAAuB,iBAAiB,IAAI;AAAA,EACnD;AAAA,EAEQ,qBAAqB;AAC3B,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,iBAAiB;AAAA,MACjB,oCAAoC,KAAK,yBAAyB;AAAA,MAClE,yBAAyB,CAAC,KAAK;AAAA,IACjC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAeU,SAAS;AAAA,MACf,wBAAwB;AAAA,MACxB,iCAAiC,KAAK,yBAAyB;AAAA,IACjE,CAAC,CAAC;AAAA;AAAA;AAAA,cAGA,KAAK,SAAS,KAAK,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUtC;AAAA,EAEQ,aAAa;AACnB,UAAM,eAAe,KAAK,mBAAmB;AAG7C,QAAI,aAAa,WAAW,KAAK,kBAAkB;AACjD,WAAK,mBAAmB,YAAY;AACpC,WAAK,mBAAmB;AACxB,WAAK,mBAAmB,aAAa;AAAA,IACvC;AAAA,EACF;AAAA,EAEU,eAAe;AAEvB,SAAK,mBAAmB,EAAE,QAAQ,UAAQ;AApQ9C;AAqQM,WAAK,QAAQ,gBAAe,UAAK,aAAa,MAAM,MAAxB,YAA6B;AAAA,IAC3D,CAAC;AAAA,EACH;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,IAAI,eAAe,MAAM,KAAK,mBAAmB,CAAC;AACxE,SAAK,eAAe,QAAQ,IAAI;AAAA,EAClC;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,eAAe,UAAU,IAAI;AAAA,EACpC;AAAA,EAEA,SAAS;AAEP,WAAO;AAAA;AAAA,4BAEiB,KAAK,UAAU;AAAA,UACjC,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA,EAIjC;AACF;AAvOqB,WACZ,SAAyB,CAAC,0BAAiB,uBAAM;AADrC,WAGZ,eAAe;AAAA,EACpB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,gBAAgB;AAClB;AAYmC;AAAA,EAAlC,MAAM,kBAAkB;AAAA,GApBN,WAoBgB;AAKD;AAAA,EAAjC,MAAM,iBAAiB;AAAA,GAzBL,WAyBe;AAKA;AAAA,EAAjC,MAAM,iBAAiB;AAAA,GA9BL,WA8Be;AAKD;AAAA,EAAhC,MAAM,gBAAgB;AAAA,GAnCJ,WAmCc;AAKhB;AAAA,EAAhB,MAAM;AAAA,GAxCY,WAwCF;AAKA;AAAA,EAAhB,MAAM;AAAA,GA7CY,WA6CF;AAKA;AAAA,EAAhB,MAAM;AAAA,GAlDY,WAkDF;AAKA;AAAA,EAAhB,MAAM;AAAA,GAvDY,WAuDF;",
+  "names": []
+}

package/dist/chunks/{chunk.3TOKEYJ6.js → chunk.3EPDSEI7.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.762G3PEJ.js";
+} from "./chunk.D3UJRRO6.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.3TOKEYJ6.js.map
+//# sourceMappingURL=chunk.3EPDSEI7.js.map

package/dist/chunks/{chunk.2X3APD3V.js → chunk.3OUFLG7V.js}

@@ -6,19 +6,19 @@ import {
 } from "./chunk.EHSNF4SS.js";
 import {
   SynIcon
-} from "./chunk.R3THZVHP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.IC3XQ2EB.js";
 import {
   enableDefaultSettings
 } from "./chunk.NUIJATJY.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -120,4 +120,4 @@ SynRadio = __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.2X3APD3V.js.map
+//# sourceMappingURL=chunk.3OUFLG7V.js.map

package/dist/chunks/chunk.3OUFLG7V.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.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 { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './radio.styles.js';\nimport customStyles from './radio.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */\n@enableDefaultSettings('SynRadio')\nexport default class SynRadio extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  @state() checked = false;\n  @state() protected hasFocus = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string;\n\n  /**\n   * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\n   * attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setInitialAttributes();\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  };\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  };\n\n  private setInitialAttributes() {\n    this.setAttribute('role', 'radio');\n    this.setAttribute('tabindex', '-1');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    this.setAttribute('tabindex', this.checked ? '0' : '-1');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n          'radio--small': this.size === 'small',\n          'radio--medium': this.size === 'medium',\n          'radio--large': this.size === 'large'\n        })}\n      >\n        <span part=\"${`control${this.checked ? ' control--checked' : ''}`}\" class=\"radio__control\">\n          ${this.checked\n            ? html` <syn-icon part=\"checked-icon\" class=\"radio__checked-icon\" library=\"system\" name=\"radio\"></syn-icon> `\n            : ''}\n        </span>\n\n        <slot part=\"label\" class=\"radio__label\"></slot>\n      </span>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AA8BhC,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAmBnD,cAAc;AACZ,UAAM;AAhBC,mBAAU;AACV,SAAU,WAAW;AASD,gBAAqC;AAGtB,oBAAW;AAcvD,SAAQ,aAAa,MAAM;AACzB,WAAK,WAAW;AAChB,WAAK,KAAK,UAAU;AAAA,IACtB;AAEA,SAAQ,cAAc,MAAM;AAC1B,UAAI,CAAC,KAAK,UAAU;AAClB,aAAK,UAAU;AAAA,MACjB;AAAA,IACF;AAEA,SAAQ,cAAc,MAAM;AAC1B,WAAK,WAAW;AAChB,WAAK,KAAK,WAAW;AAAA,IACvB;AAxBE,SAAK,iBAAiB,QAAQ,KAAK,UAAU;AAC7C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,qBAAqB;AAAA,EAC5B;AAAA,EAkBQ,uBAAuB;AAC7B,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,YAAY,IAAI;AAClC,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,sBAAsB;AACpB,SAAK,aAAa,gBAAgB,KAAK,UAAU,SAAS,OAAO;AACjE,SAAK,aAAa,YAAY,KAAK,UAAU,MAAM,IAAI;AAAA,EACzD;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,MACxB,kBAAkB,KAAK;AAAA,MACvB,gBAAgB,KAAK,SAAS;AAAA,MAC9B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,gBAAgB,KAAK,SAAS;AAAA,IAChC,CAAC,CAAC;AAAA;AAAA,sBAEY,UAAU,KAAK,UAAU,sBAAsB,EAAE,EAAE;AAAA,YAC7D,KAAK,UACH,8GACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd;AACF;AAxFqB,SACZ,SAAyB,CAAC,0BAAiB,sBAAQ,2BAAY;AADnD,SAEZ,eAAe,EAAE,YAAY,QAAQ;AAEnC;AAAA,EAAR,MAAM;AAAA,GAJY,SAIV;AACU;AAAA,EAAlB,MAAM;AAAA,GALY,SAKA;AAGP;AAAA,EAAX,SAAS;AAAA,GARS,SAQP;AAMiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAdR,SAcU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjBvB,SAiByB;AAqC5C;AAAA,EADC,MAAM,SAAS;AAAA,GArDG,SAsDnB;AAMA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA3D9B,SA4DnB;AA5DmB,WAArB;AAAA,EADC,sBAAsB,UAAU;AAAA,GACZ;",
+  "names": []
+}

package/dist/chunks/{chunk.WASTXK4A.js → chunk.3QPOD3RO.js}

@@ -9,19 +9,19 @@ import {
 } from "./chunk.ARR23WUY.js";
 import {
   SynIcon
-} from "./chunk.R3THZVHP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.IC3XQ2EB.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -165,4 +165,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.WASTXK4A.js.map
+//# sourceMappingURL=chunk.3QPOD3RO.js.map

package/dist/chunks/chunk.3QPOD3RO.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.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 { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './option.styles.js';\nimport customStyles from './option.custom.styles.js';\nimport { delimiterToWhiteSpace } from './utility.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynOption extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  // @ts-expect-error - Controller is currently unused\n  private readonly localize = new LocalizeController(this);\n\n  private isInitialized = false;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  // the delimiter used to separate multiple values in a select\n  // This is provided by the wrapping syn-select\n  @state() delimiter = ' ';\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value: string | number = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n  }\n\n  private handleDefaultSlotChange() {\n    if (this.isInitialized) {\n      // When the label changes, tell the controller to update\n      customElements.whenDefined('syn-combobox').then(() => {\n        const controller = this.closest('syn-combobox');\n        if (controller) {\n          controller.handleDefaultSlotChange();\n        }\n      });\n      customElements.whenDefined('syn-select').then(() => {\n        const controller = this.closest('syn-select');\n        if (controller) {\n          controller.handleDefaultSlotChange();\n        }\n      });\n    } else {\n      this.isInitialized = true;\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    if (typeof this.value === 'number') {\n      return;\n    }\n\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    const { delimiter } = this;\n\n    if (this.value.includes(delimiter)) {\n      console.error(`Option values cannot include \"${delimiter}\". All occurrences of \"${delimiter}\" have been replaced with \"_\".`, this);\n      this.value = delimiterToWhiteSpace(this.value, this.delimiter);\n    }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    const nodes = this.childNodes;\n    let label = '';\n\n    [...nodes].forEach(node => {\n      if (node.nodeType === Node.ELEMENT_NODE) {\n        if (!(node as HTMLElement).hasAttribute('slot')) {\n          label += (node as HTMLElement).textContent;\n        }\n      }\n\n      if (node.nodeType === Node.TEXT_NODE) {\n        label += node.textContent;\n      }\n    });\n\n    return label.trim();\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          option: true,\n          'option--current': this.current,\n          'option--disabled': this.disabled,\n          'option--selected': this.selected,\n          'option--hover': this.hasHover\n        })}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <syn-icon part=\"checked-icon\" class=\"option__check\" name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n        <slot part=\"label\" class=\"option__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n        <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.QOP6ET4B.js → chunk.3TECDOBS.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.46CKMKX5.js";
+} from "./chunk.ZJ43C76S.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.QOP6ET4B.js.map
+//# sourceMappingURL=chunk.3TECDOBS.js.map

package/dist/chunks/{chunk.JCJ64TPZ.js → chunk.43UZR7JA.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.UKUUCUD7.js";
+} from "./chunk.NLYJFOZZ.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.JCJ64TPZ.js.map
+//# sourceMappingURL=chunk.43UZR7JA.js.map

package/dist/chunks/{chunk.UTPP6KE2.js → chunk.45RYQJWS.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.RAU2GK6I.js";
+} from "./chunk.CXRCFXZR.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.UTPP6KE2.js.map
+//# sourceMappingURL=chunk.45RYQJWS.js.map

package/dist/chunks/{chunk.AQHRP3JF.js → chunk.4FYUNOAF.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.B3D627OD.js";
+} from "./chunk.JIELXBUU.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.AQHRP3JF.js.map
+//# sourceMappingURL=chunk.4FYUNOAF.js.map

package/dist/chunks/{chunk.2GXRGBN3.js → chunk.4KUAEC3S.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.2RXN2SCD.js";
+} from "./chunk.C4JBMUTM.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.2GXRGBN3.js.map
+//# sourceMappingURL=chunk.4KUAEC3S.js.map

package/dist/chunks/{chunk.GAN4SEH5.js → chunk.4XC7NAJH.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressBar
-} from "./chunk.WIZJDLTC.js";
+} from "./chunk.ZHGCYOV2.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SynProgressBar;
@@ -9,4 +9,4 @@ SynProgressBar.define("syn-progress-bar");
 export {
   progress_bar_default
 };
-//# sourceMappingURL=chunk.GAN4SEH5.js.map
+//# sourceMappingURL=chunk.4XC7NAJH.js.map

package/dist/chunks/{chunk.QJPMVHQX.js → chunk.5U2JN5LA.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -415,4 +415,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.QJPMVHQX.js.map
+//# sourceMappingURL=chunk.5U2JN5LA.js.map

package/dist/chunks/chunk.5U2JN5LA.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/popup/popup.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 { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.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\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  /**\n   * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\n   * clipped, using a `fixed` position strategy can often workaround it.\n   */\n  @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';\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    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 (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      this.strategy === 'absolute'\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: this.strategy,\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        class=${classMap({\n          popup: true,\n          'popup--active': this.active,\n          'popup--fixed': this.strategy === 'fixed',\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": ";;;;;;;;;;;;;;;;;;;AAQA,SAAS,OAAO,YAAY,iBAAiB,MAAM,QAAQ,UAAU,OAAO,YAAY;AACxF,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,UAAU,aAAa;AAWhC,SAAS,iBAAiB,GAAiC;AACzD,SACE,MAAM,QACN,OAAO,MAAM,YACb,2BAA2B,MAC1B,oBAAoB,IAAI,EAAE,0BAA0B,UAAU;AAEnE;AA+BA,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAArD;AAAA;AAKE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAiBX,kBAAS;AAMxB,qBAYZ;AAMY,oBAAiC;AAGlC,oBAAW;AAGX,oBAAW;AAOV,iBAAQ;AAOO,0BAAwD;AAM5C,wBAAe;AAM1C,gBAAO;AAqBpC,kCAAyB;AAO0B,gCAA+C;AAU3C,uBAAc;AAGxC,iBAAQ;AAUmB,wBAAe;AAgBX,2BAAkB;AAQtB,uBAAc;AA0QtE,SAAQ,oBAAoB,MAAM;AAChC,UAAI,KAAK,eAAe,KAAK,UAAU;AACrC,cAAM,aAAa,KAAK,SAAS,sBAAsB;AACvD,cAAM,YAAY,KAAK,MAAM,sBAAsB;AACnD,cAAM,aAAa,KAAK,UAAU,SAAS,KAAK,KAAK,KAAK,UAAU,SAAS,QAAQ;AACrF,YAAI,WAAW;AACf,YAAI,WAAW;AACf,YAAI,YAAY;AAChB,YAAI,YAAY;AAChB,YAAI,cAAc;AAClB,YAAI,cAAc;AAClB,YAAI,eAAe;AACnB,YAAI,eAAe;AAEnB,YAAI,YAAY;AACd,cAAI,WAAW,MAAM,UAAU,KAAK;AAElC,uBAAW,WAAW;AACtB,uBAAW,WAAW;AACtB,wBAAY,WAAW;AACvB,wBAAY,WAAW;AAEvB,0BAAc,UAAU;AACxB,0BAAc,UAAU;AACxB,2BAAe,UAAU;AACzB,2BAAe,UAAU;AAAA,UAC3B,OAAO;AAEL,uBAAW,UAAU;AACrB,uBAAW,UAAU;AACrB,wBAAY,UAAU;AACtB,wBAAY,UAAU;AAEtB,0BAAc,WAAW;AACzB,0BAAc,WAAW;AACzB,2BAAe,WAAW;AAC1B,2BAAe,WAAW;AAAA,UAC5B;AAAA,QACF,OAAO;AACL,cAAI,WAAW,OAAO,UAAU,MAAM;AAEpC,uBAAW,WAAW;AACtB,uBAAW,WAAW;AACtB,wBAAY,UAAU;AACtB,wBAAY,UAAU;AAEtB,0BAAc,WAAW;AACzB,0BAAc,WAAW;AACzB,2BAAe,UAAU;AACzB,2BAAe,UAAU;AAAA,UAC3B,OAAO;AAEL,uBAAW,UAAU;AACrB,uBAAW,UAAU;AACrB,wBAAY,WAAW;AACvB,wBAAY,WAAW;AAEvB,0BAAc,UAAU;AACxB,0BAAc,UAAU;AACxB,2BAAe,WAAW;AAC1B,2BAAe,WAAW;AAAA,UAC5B;AAAA,QACF;AAEA,aAAK,MAAM,YAAY,6BAA6B,GAAG,QAAQ,IAAI;AACnE,aAAK,MAAM,YAAY,6BAA6B,GAAG,QAAQ,IAAI;AACnE,aAAK,MAAM,YAAY,8BAA8B,GAAG,SAAS,IAAI;AACrE,aAAK,MAAM,YAAY,8BAA8B,GAAG,SAAS,IAAI;AACrE,aAAK,MAAM,YAAY,gCAAgC,GAAG,WAAW,IAAI;AACzE,aAAK,MAAM,YAAY,gCAAgC,GAAG,WAAW,IAAI;AACzE,aAAK,MAAM,YAAY,iCAAiC,GAAG,YAAY,IAAI;AAC3E,aAAK,MAAM,YAAY,iCAAiC,GAAG,YAAY,IAAI;AAAA,MAC7E;AAAA,IACF;AAAA;AAAA,EAjVA,MAAM,oBAAoB;AACxB,UAAM,kBAAkB;AAGxB,UAAM,KAAK;AACX,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,KAAK;AAAA,EACZ;AAAA,EAEA,MAAM,QAAQ,cAAoC;AAChD,UAAM,QAAQ,YAAY;AAG1B,QAAI,aAAa,IAAI,QAAQ,GAAG;AAC9B,UAAI,KAAK,QAAQ;AACf,aAAK,MAAM;AAAA,MACb,OAAO;AACL,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AAGA,QAAI,aAAa,IAAI,QAAQ,GAAG;AAC9B,WAAK,mBAAmB;AAAA,IAC1B;AAGA,QAAI,KAAK,QAAQ;AACf,YAAM,KAAK;AACX,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,MAAc,qBAAqB;AACjC,UAAM,KAAK,KAAK;AAEhB,QAAI,KAAK,UAAU,OAAO,KAAK,WAAW,UAAU;AAElD,YAAM,OAAO,KAAK,YAAY;AAC9B,WAAK,WAAW,KAAK,eAAe,KAAK,MAAM;AAAA,IACjD,WAAW,KAAK,kBAAkB,WAAW,iBAAiB,KAAK,MAAM,GAAG;AAE1E,WAAK,WAAW,KAAK;AAAA,IACvB,OAAO;AAEL,WAAK,WAAW,KAAK,cAA2B,iBAAiB;AAAA,IACnE;AAIA,QAAI,KAAK,oBAAoB,iBAAiB;AAC5C,WAAK,WAAW,KAAK,SAAS,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,CAAC;AAAA,IACrE;AAGA,QAAI,KAAK,YAAY,KAAK,QAAQ;AAChC,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AAAA,EAEQ,QAAQ;AAEd,QAAI,CAAC,KAAK,YAAY,CAAC,KAAK,QAAQ;AAClC;AAAA,IACF;AAEA,SAAK,UAAU,WAAW,KAAK,UAAU,KAAK,OAAO,MAAM;AACzD,WAAK,WAAW;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EAEA,MAAc,OAAsB;AAClC,WAAO,IAAI,QAAQ,aAAW;AAC5B,UAAI,KAAK,SAAS;AAChB,aAAK,QAAQ;AACb,aAAK,UAAU;AACf,aAAK,gBAAgB,wBAAwB;AAC7C,aAAK,MAAM,eAAe,6BAA6B;AACvD,aAAK,MAAM,eAAe,8BAA8B;AACxD,8BAAsB,MAAM,QAAQ,CAAC;AAAA,MACvC,OAAO;AACL,gBAAQ;AAAA,MACV;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA,EAGA,aAAa;AAEX,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,UAAU;AAClC;AAAA,IACF;AAKA,UAAM,aAAa;AAAA;AAAA,MAEjB,OAAO,EAAE,UAAU,KAAK,UAAU,WAAW,KAAK,SAAS,CAAC;AAAA,IAC9D;AAGA,QAAI,KAAK,MAAM;AACb,iBAAW;AAAA,QACT,KAAK;AAAA,UACH,OAAO,CAAC,EAAE,MAAM,MAAM;AACpB,kBAAM,YAAY,KAAK,SAAS,WAAW,KAAK,SAAS;AACzD,kBAAM,aAAa,KAAK,SAAS,YAAY,KAAK,SAAS;AAC3D,iBAAK,MAAM,MAAM,QAAQ,YAAY,GAAG,MAAM,UAAU,KAAK,OAAO;AACpE,iBAAK,MAAM,MAAM,SAAS,aAAa,GAAG,MAAM,UAAU,MAAM,OAAO;AAAA,UACzE;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AAEL,WAAK,MAAM,MAAM,QAAQ;AACzB,WAAK,MAAM,MAAM,SAAS;AAAA,IAC5B;AAGA,QAAI,KAAK,MAAM;AACb,iBAAW;AAAA,QACT,KAAK;AAAA,UACH,UAAU,KAAK;AAAA;AAAA,UAEf,oBAAoB,KAAK;AAAA,UACzB,kBAAkB,KAAK,yBAAyB,aAAa,YAAY;AAAA,UACzE,SAAS,KAAK;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAGA,QAAI,KAAK,OAAO;AACd,iBAAW;AAAA,QACT,MAAM;AAAA,UACJ,UAAU,KAAK;AAAA,UACf,SAAS,KAAK;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAGA,QAAI,KAAK,UAAU;AACjB,iBAAW;AAAA,QACT,KAAK;AAAA,UACH,UAAU,KAAK;AAAA,UACf,SAAS,KAAK;AAAA,UACd,OAAO,CAAC,EAAE,gBAAgB,gBAAgB,MAAM;AAC9C,gBAAI,KAAK,aAAa,cAAc,KAAK,aAAa,QAAQ;AAC5D,mBAAK,MAAM,YAAY,gCAAgC,GAAG,eAAe,IAAI;AAAA,YAC/E,OAAO;AACL,mBAAK,MAAM,eAAe,8BAA8B;AAAA,YAC1D;AAEA,gBAAI,KAAK,aAAa,gBAAgB,KAAK,aAAa,QAAQ;AAC9D,mBAAK,MAAM,YAAY,+BAA+B,GAAG,cAAc,IAAI;AAAA,YAC7E,OAAO;AACL,mBAAK,MAAM,eAAe,6BAA6B;AAAA,YACzD;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AAEL,WAAK,MAAM,eAAe,6BAA6B;AACvD,WAAK,MAAM,eAAe,8BAA8B;AAAA,IAC1D;AAGA,QAAI,KAAK,OAAO;AACd,iBAAW;AAAA,QACT,MAAM;AAAA,UACJ,SAAS,KAAK;AAAA,UACd,SAAS,KAAK;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAOA,UAAM,kBACJ,KAAK,aAAa,aACd,CAAC,YAAqB,SAAS,gBAAgB,SAAS,YAAY,IACpE,SAAS;AAEf,oBAAgB,KAAK,UAAU,KAAK,OAAO;AAAA,MACzC,WAAW,KAAK;AAAA,MAChB;AAAA,MACA,UAAU,KAAK;AAAA,MACf,UAAU,iCACL,WADK;AAAA,QAER;AAAA,MACF;AAAA,IACF,CAAC,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,gBAAgB,UAAU,MAAM;AAO/C,YAAM,QAAQ,KAAK,SAAS,IAAI,MAAM;AACtC,YAAM,aAAa,EAAE,KAAK,UAAU,OAAO,QAAQ,QAAQ,OAAO,MAAM,QAAQ,EAAE,UAAU,MAAM,GAAG,EAAE,CAAC,CAAC;AAEzG,WAAK,aAAa,0BAA0B,SAAS;AAErD,aAAO,OAAO,KAAK,MAAM,OAAO;AAAA,QAC9B,MAAM,GAAG,CAAC;AAAA,QACV,KAAK,GAAG,CAAC;AAAA,MACX,CAAC;AAED,UAAI,KAAK,OAAO;AACd,cAAM,SAAS,eAAe,MAAO;AACrC,cAAM,SAAS,eAAe,MAAO;AACrC,YAAI,MAAM;AACV,YAAI,QAAQ;AACZ,YAAI,SAAS;AACb,YAAI,OAAO;AAEX,YAAI,KAAK,mBAAmB,SAAS;AAEnC,gBAAM,QAAQ,OAAO,WAAW,WAAW,QAAQ,KAAK,YAAY,sCAAsC;AAC1G,gBAAM,OAAO,WAAW,WAAW,QAAQ,KAAK,YAAY,sCAAsC;AAClG,kBAAQ,QAAQ,QAAQ;AACxB,iBAAO,QAAQ,KAAK;AAAA,QACtB,WAAW,KAAK,mBAAmB,OAAO;AAExC,gBAAM,QAAQ,OAAO,WAAW,WAAW,QAAQ,KAAK,YAAY,sCAAsC;AAC1G,kBAAQ,QAAQ,KAAK;AACrB,iBAAO,QAAQ,QAAQ;AACvB,mBAAS,OAAO,WAAW,WAAW,QAAQ,KAAK,YAAY,sCAAsC;AAAA,QACvG,WAAW,KAAK,mBAAmB,UAAU;AAE3C,iBAAO,OAAO,WAAW,WAAW,2CAA2C;AAC/E,gBAAM,OAAO,WAAW,WAAW,2CAA2C;AAAA,QAChF,OAAO;AAEL,iBAAO,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AACpD,gBAAM,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAAA,QACrD;AAEA,eAAO,OAAO,KAAK,QAAQ,OAAO;AAAA,UAChC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,CAAC,UAAU,GAAG;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAGD,0BAAsB,MAAM,KAAK,kBAAkB,CAAC;AAEpD,SAAK,KAAK,gBAAgB;AAAA,EAC5B;AAAA,EA6EA,SAAS;AACP,WAAO;AAAA,wCAC6B,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,gBAI/C,SAAS;AAAA,MACf,sBAAsB;AAAA,MACtB,+BAA+B,KAAK,eAAe,KAAK;AAAA,IAC1D,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKM,SAAS;AAAA,MACf,OAAO;AAAA,MACP,iBAAiB,KAAK;AAAA,MACtB,gBAAgB,KAAK,aAAa;AAAA,MAClC,oBAAoB,KAAK;AAAA,IAC3B,CAAC,CAAC;AAAA;AAAA;AAAA,UAGA,KAAK,QAAQ,0EAA0E,EAAE;AAAA;AAAA;AAAA,EAGjG;AACF;AAxgBqB,SACZ,SAAyB,CAAC,0BAAiB,oBAAM;AAOvC;AAAA,EAAhB,MAAM,QAAQ;AAAA,GARI,SAQF;AACe;AAAA,EAA/B,MAAM,eAAe;AAAA,GATH,SASa;AAOpB;AAAA,EAAX,SAAS;AAAA,GAhBS,SAgBP;AAMgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAtBvB,SAsByB;AAMf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA5BR,SA4BU;AAkBA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA9CR,SA8CU;AAGD;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjDP,SAiDS;AAGA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDP,SAoDS;AAOC;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA3DR,SA2DU;AAOe;AAAA,EAA3C,SAAS,EAAE,WAAW,kBAAkB,CAAC;AAAA,GAlEvB,SAkEyB;AAMY;AAAA,EAAvD,SAAS,EAAE,WAAW,iBAAiB,MAAM,OAAO,CAAC;AAAA,GAxEnC,SAwEqC;AAM3B;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA9ER,SA8EU;AAqB7B;AAAA,EAdC,SAAS;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,MACT,eAAe,CAAC,UAAkB;AAChC,eAAO,MACJ,MAAM,GAAG,EACT,IAAI,OAAK,EAAE,KAAK,CAAC,EACjB,OAAO,OAAK,MAAM,EAAE;AAAA,MACzB;AAAA,MACA,aAAa,CAAC,UAAc;AAC1B,eAAO,MAAM,KAAK,GAAG;AAAA,MACvB;AAAA,IACF;AAAA,EACF,CAAC;AAAA,GAlGkB,SAmGnB;AAOmD;AAAA,EAAlD,SAAS,EAAE,WAAW,yBAAyB,CAAC;AAAA,GA1G9B,SA0GgC;AAOvB;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjHP,SAiHS;AAG2B;AAAA,EAAtD,SAAS,EAAE,WAAW,gBAAgB,MAAM,OAAO,CAAC;AAAA,GApHlC,SAoHoC;AAG1B;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAvHR,SAuHU;AAOD;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9HP,SA8HS;AAG4B;AAAA,EAAvD,SAAS,EAAE,WAAW,iBAAiB,MAAM,OAAO,CAAC;AAAA,GAjInC,SAiIqC;AAGlB;AAAA,EAArC,SAAS,EAAE,WAAW,YAAY,CAAC;AAAA,GApIjB,SAoImB;AAG1B;AAAA,EAAX,SAAS;AAAA,GAvIS,SAuIP;AAOgB;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9IP,SA8IS;AAGgC;AAAA,EAA3D,SAAS,EAAE,WAAW,qBAAqB,MAAM,OAAO,CAAC;AAAA,GAjJvC,SAiJyC;AAQJ;AAAA,EAAvD,SAAS,EAAE,WAAW,gBAAgB,MAAM,QAAQ,CAAC;AAAA,GAzJnC,SAyJqC;",
+  "names": []
+}

package/dist/chunks/{chunk.BMR7V4GF.js → chunk.67BZVLOD.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.63LZB375.js";
+} from "./chunk.WZSMJ2WD.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.BMR7V4GF.js.map
+//# sourceMappingURL=chunk.67BZVLOD.js.map

package/dist/chunks/{chunk.UTJJJQMA.js → chunk.6GBQX53P.js}

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "./chunk.AMIQC3O7.js";
+} from "./chunk.OLRA37R5.js";
 
 // src/utilities/form.ts
 function serialize(form) {
@@ -37,4 +37,4 @@ export {
   serialize,
   getFormControls
 };
-//# sourceMappingURL=chunk.UTJJJQMA.js.map
+//# sourceMappingURL=chunk.6GBQX53P.js.map

package/dist/chunks/{chunk.NHGNW7PA.js → chunk.6HKWYUE5.js}

@@ -18,22 +18,22 @@ import {
 } from "./chunk.HQ6QUSK7.js";
 import {
   SynIcon
-} from "./chunk.R3THZVHP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.IC3XQ2EB.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
 import {
   enableDefaultSettings
 } from "./chunk.NUIJATJY.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -247,4 +247,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.NHGNW7PA.js.map
+//# sourceMappingURL=chunk.6HKWYUE5.js.map