@synergy-design-system/components 2.14.2 → 2.14.4

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/drawer/drawer.component.ts", "../../src/internal/string.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';\nimport { property, query } from 'lit/decorators.js';\nimport { uppercaseFirstLetter } from '../../internal/string.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport Modal from '../../internal/modal.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './drawer.styles.js';\nimport customStyles from './drawer.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n * @documentation https://synergy.style/components/drawer\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event syn-show - Emitted when the drawer opens.\n * @event syn-after-show - Emitted after the drawer opens and all animations are complete.\n * @event syn-hide - Emitted when the drawer closes.\n * @event syn-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event syn-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.\n */\nexport default class SynDrawer extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon-button': SynIconButton };\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n  private readonly localize = new LocalizeController(this);\n  private originalTrigger: HTMLElement | null;\n  public modal = new Modal(this);\n  private closeWatcher: CloseWatcher | null;\n\n  @query('.drawer') drawer: HTMLElement;\n  @query('.drawer__panel') panel: HTMLElement;\n  @query('.drawer__overlay') overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true }) label = '';\n\n  /** The direction from which the drawer will open. */\n  @property({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;\n\n  firstUpdated() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unlockBodyScrolling(this);\n    this.closeWatcher?.destroy();\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const slRequestClose = this.emit('syn-request-close', {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, 'drawer.denyClose', { dir: this.localize.dir() });\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      if (!this.contained) {\n        this.closeWatcher = new CloseWatcher();\n        this.closeWatcher.onclose = () => this.requestClose('keyboard');\n      }\n    } else {\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n    }\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    this.closeWatcher?.destroy();\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Contained drawers aren't modal and don't response to the escape key\n    if (this.contained) {\n      return;\n    }\n\n    if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n      event.stopImmediatePropagation();\n      this.requestClose('keyboard');\n    }\n  };\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('syn-show');\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/synergy-design-system/synergy/issues/693\n      //\n      const autoFocusTarget = this.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit('syn-initial-focus', { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`, {\n        dir: this.localize.dir()\n      });\n      const overlayAnimation = getAnimation(this, 'drawer.overlay.show', { dir: this.localize.dir() });\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      this.emit('syn-hide');\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        this.modal.deactivate();\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${uppercaseFirstLetter(this.placement)}`, {\n        dir: this.localize.dir()\n      });\n      const overlayAnimation = getAnimation(this, 'drawer.overlay.hide', { dir: this.localize.dir() });\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.drawer.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === 'function') {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  @watch('contained', { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the drawer */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--top': this.placement === 'top',\n          'drawer--end': this.placement === 'end',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--start': this.placement === 'start',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--rtl': this.localize.dir() === 'rtl',\n          'drawer--has-footer': this.hasSlotController.test('footer')\n        })}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" @click=${() => this.requestClose('overlay')} tabindex=\"-1\"></div>\n\n        <div\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n          aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}\n          tabindex=\"0\"\n        >\n          ${!this.noHeader\n            ? html`\n                <header part=\"header\" class=\"drawer__header\">\n                  <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->\n                    <slot name=\"label\"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer__header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                    <syn-icon-button\n                      part=\"close-button\"\n                      exportparts=\"base:close-button__base\"\n                      class=\"drawer__close\"\n                      name=\"x-lg\"\n                      label=${this.localize.term('close')}\n                      library=\"system\"\n                      @click=${() => this.requestClose('close-button')}\n                    ></syn-icon-button>\n                  </div>\n                </header>\n              `\n            : ''}\n\n          <slot part=\"body\" class=\"drawer__body\"></slot>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation('drawer.showTop', {\n  keyframes: [\n    { opacity: 0, translate: '0 -100%' },\n    { opacity: 1, translate: '0 0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideTop', {\n  keyframes: [\n    { opacity: 1, translate: '0 0' },\n    { opacity: 0, translate: '0 -100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// End\nsetDefaultAnimation('drawer.showEnd', {\n  keyframes: [\n    { opacity: 0, translate: '100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: '-100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideEnd', {\n  keyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '100%' }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '-100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Bottom\nsetDefaultAnimation('drawer.showBottom', {\n  keyframes: [\n    { opacity: 0, translate: '0 100%' },\n    { opacity: 1, translate: '0 0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideBottom', {\n  keyframes: [\n    { opacity: 1, translate: '0 0' },\n    { opacity: 0, translate: '0 100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Start\nsetDefaultAnimation('drawer.showStart', {\n  keyframes: [\n    { opacity: 0, translate: '-100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: '100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideStart', {\n  keyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '-100%' }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Deny close\nsetDefaultAnimation('drawer.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation('drawer.overlay.show', {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation('drawer.overlay.hide', {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n", "/**\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 */\n/** Converts the first letter of a string to uppercase */\nexport function uppercaseFirstLetter(string: string) {\n  return string.charAt(0).toUpperCase() + string.slice(1);\n}\n"],
-  "mappings": "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",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/menu-item/menu-item.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .menu-item {\n    color: var(--syn-typography-color-text);\n    font-size: var(--syn-font-size-medium);\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium);\n  }\n\n  /**\n   * Handling for slotted prefix and suffix\n   */\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /**\n   * Set the default font size to make icons appear correct\n   */\n  .menu-item .menu-item__prefix::slotted(syn-icon),\n  .menu-item .menu-item__suffix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * Adjust the size of icons\n   */\n  .menu-item .menu-item__chevron,\n  .menu-item .menu-item__check {\n    font-size: var(--syn-font-size-x-large);\n    width: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * This makes sure the chevron does not take any space if we do not have children\n   */\n  .menu-item .menu-item__chevron {\n    display: none;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .menu-item .menu-item__check {\n    color: var(--syn-color-primary-600);\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  /**\n   * When in loading state, do not show the checkmark as it would bleed through\n   */\n  .menu-item--loading .menu-item__check {\n    visibility: hidden;\n  }\n\n  /**\n   * Make sure the checkbox is also visible when the item is active\n   */\n  :host(:focus-visible) .menu-item--checked .menu-item__check {\n    color: var(--syn-color-neutral-0);\n  }\n\n  /**\n   * Special handling for the submenu chevron:\n   * We are using the \"chevron-down\" icon per default as\n   * we do not want all chevrons to be part of the bundle\n   * Therefore, we have to transform it into the right direction\n   */\n  .menu-item .menu-item__chevron syn-icon {\n    transform: rotate(-90deg);\n  }\n\n  .menu-item--rtl .menu-item__chevron syn-icon {\n    transform: rotate(90deg);\n  }\n\n  /**\n   * Make sure to show the chevron if there are children\n   */\n  .menu-item--has-submenu .menu-item__chevron {\n    display: flex;\n  }\n\n  /**\n   * Adjustments for the spinner in loading state\n   */\n  .menu-item--loading syn-spinner {\n    --indicator-color: currentColor;\n    --track-width: 2px;\n\n    font-size: var(--syn-font-size-medium);\n    left: var(--syn-spacing-medium);\n    opacity: 1;\n    position: absolute;\n    top: calc(50% - 0.5em);\n  }\n\n  /**\n   * Highlight checked items\n   */\n  .menu-item--checked .menu-item__label {\n    font-weight: var(--syn-font-weight-semibold);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,kCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/textarea/textarea.component.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './textarea.styles.js';\nimport customStyles from './textarea.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy.style/components/textarea\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */\nexport default class SynTextarea extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n  private resizeObserver: ResizeObserver;\n\n  @query('.textarea__control') input: HTMLTextAreaElement;\n  @query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;\n\n  @state() private hasFocus = false;\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the textarea, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the textarea, submitted as a name/value pair with form data. */\n  @property() value = '';\n\n  /** The textarea's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = '';\n\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Disables the textarea. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the textarea a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @property({ type: Number }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @property({ type: Number }) maxlength: number;\n\n  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n  @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n  /** Indicates whether the browser's autocorrect feature is on or off. */\n  @property() autocorrect: string;\n\n  /**\n   * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n   * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n   */\n  @property() autocomplete: string;\n\n  /** Indicates that the input should receive focus on page load. */\n  @property({ type: Boolean }) autofocus: boolean;\n\n  /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n  @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /** Enables spell checking on the textarea. */\n  @property({\n    type: Boolean,\n    converter: {\n      // Allow \"true|false\" attribute values but keep the property boolean\n      fromAttribute: value => (!value || value === 'false' ? false : true),\n      toAttribute: value => (value ? 'true' : 'false')\n    }\n  })\n  spellcheck = true;\n\n  /**\n   * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n   * keyboard on supportive devices.\n   */\n  @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n    this.updateComplete.then(() => {\n      this.setTextareaHeight();\n      this.resizeObserver.observe(this.input);\n    });\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.input) {\n      this.resizeObserver?.unobserve(this.input);\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.setTextareaHeight();\n    this.emit('syn-change');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private setTextareaHeight() {\n    if (this.resize === 'auto') {\n      // This prevents layout shifts. We use `clientHeight` instead of `scrollHeight` to account for if the `<textarea>` has a max-height set on it. In my tests, this has worked fine. Im not aware of any edge cases. [Konnor]\n      this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;\n      this.input.style.height = 'auto';\n      this.input.style.height = `${this.input.scrollHeight}px`;\n    } else {\n      (this.input.style.height as string | undefined) = undefined;\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch('rows', { waitUntilFirstUpdate: true })\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    this.formControlController.updateValidity();\n    this.setTextareaHeight();\n  }\n\n  /** Sets focus on the textarea. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the textarea. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Selects all the text in the textarea. */\n  select() {\n    this.input.select();\n  }\n\n  /** Gets or sets the textarea's scroll position. */\n  scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {\n    if (position) {\n      if (typeof position.top === 'number') this.input.scrollTop = position.top;\n      if (typeof position.left === 'number') this.input.scrollLeft = position.left;\n      return undefined;\n    }\n\n    return {\n      top: this.input.scrollTop,\n      left: this.input.scrollTop\n    };\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    const selectionStart = start ?? this.input.selectionStart;\n    const selectionEnd = end ?? this.input.selectionEnd;\n\n    this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n      this.setTextareaHeight();\n    }\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <div\n            part=\"base\"\n            class=${classMap({\n              textarea: true,\n              'textarea--small': this.size === 'small',\n              'textarea--medium': this.size === 'medium',\n              'textarea--large': this.size === 'large',\n              'textarea--standard': !this.readonly,\n              'textarea--readonly': this.readonly,\n              'textarea--disabled': this.disabled,\n              'textarea--focused': this.hasFocus,\n              'textarea--empty': !this.value,\n              'textarea--resize-none': this.resize === 'none',\n              'textarea--resize-vertical': this.resize === 'vertical',\n              'textarea--resize-auto': this.resize === 'auto'\n            })}\n          >\n            <textarea\n              part=\"textarea\"\n              id=\"input\"\n              class=\"textarea__control\"\n              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n              name=${ifDefined(this.name)}\n              .value=${live(this.value)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              ?required=${this.required}\n              placeholder=${ifDefined(this.placeholder)}\n              rows=${ifDefined(this.rows)}\n              minlength=${ifDefined(this.minlength)}\n              maxlength=${ifDefined(this.maxlength)}\n              autocapitalize=${ifDefined(this.autocapitalize)}\n              autocorrect=${ifDefined(this.autocorrect)}\n              ?autofocus=${this.autofocus}\n              spellcheck=${ifDefined(this.spellcheck)}\n              enterkeyhint=${ifDefined(this.enterkeyhint)}\n              inputmode=${ifDefined(this.inputmode)}\n              aria-describedby=\"help-text\"\n              @change=${this.handleChange}\n              @input=${this.handleInput}\n              @invalid=${this.handleInvalid}\n              @focus=${this.handleFocus}\n              @blur=${this.handleBlur}\n            ></textarea>\n            <!-- This \"adjuster\" exists to prevent layout shifting. https://github.com/synergy-design-system/synergy/issues/2180 -->\n            <div part=\"textarea-adjuster\" class=\"textarea__size-adjuster\" ?hidden=${this.resize !== 'auto'}></div>\n          </div>\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAIzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,UAAU,OAAO,aAAa;AAiCvC,IAAqB,cAArB,cAAyC,eAA6C;AAAA,EAAtF;AAAA;AAGE,SAAiB,wBAAwB,IAAI,sBAAsB,MAAM;AAAA,MACvE,qBAAqB,CAAC,YAAY,WAAW;AAAA,IAC/C,CAAC;AACD,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,OAAO;AAM5E,SAAQ,WAAW;AAChB,iBAAQ;AAGR,gBAAO;AAGP,iBAAQ;AAGS,gBAAqC;AAGtD,iBAAQ;AAGkB,oBAAW;AAGrC,uBAAc;AAGE,gBAAO;AAGvB,kBAAuC;AAGP,oBAAW;AAGX,oBAAW;AAO1B,gBAAO;AAGQ,oBAAW;AAmCvD,sBAAa;AASG,wBAAe;AAAA;AAAA;AAAA,EAG/B,IAAI,WAAW;AACb,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA,EAGA,IAAI,oBAAoB;AACtB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,IAAI,eAAe,MAAM,KAAK,kBAAkB,CAAC;AAEvE,SAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,kBAAkB;AACvB,WAAK,eAAe,QAAQ,KAAK,KAAK;AAAA,IACxC,CAAC;AAAA,EACH;AAAA,EAEA,eAAe;AACb,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEA,uBAAuB;AA3KzB;AA4KI,UAAM,qBAAqB;AAC3B,QAAI,KAAK,OAAO;AACd,iBAAK,mBAAL,mBAAqB,UAAU,KAAK;AAAA,IACtC;AAAA,EACF;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,eAAe;AACrB,SAAK,QAAQ,KAAK,MAAM;AACxB,SAAK,kBAAkB;AACvB,SAAK,KAAK,YAAY;AAAA,EACxB;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,cAAc;AACpB,SAAK,QAAQ,KAAK,MAAM;AACxB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,cAAc,OAAc;AAClC,SAAK,sBAAsB,YAAY,KAAK;AAC5C,SAAK,sBAAsB,iBAAiB,KAAK;AAAA,EACnD;AAAA,EAEQ,oBAAoB;AAC1B,QAAI,KAAK,WAAW,QAAQ;AAE1B,WAAK,aAAa,MAAM,SAAS,GAAG,KAAK,MAAM,YAAY;AAC3D,WAAK,MAAM,MAAM,SAAS;AAC1B,WAAK,MAAM,MAAM,SAAS,GAAG,KAAK,MAAM,YAAY;AAAA,IACtD,OAAO;AACL,MAAC,KAAK,MAAM,MAAM,SAAgC;AAAA,IACpD;AAAA,EACF;AAAA,EAGA,uBAAuB;AAErB,SAAK,sBAAsB,YAAY,KAAK,QAAQ;AAAA,EACtD;AAAA,EAGA,mBAAmB;AACjB,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAGA,MAAM,oBAAoB;AACxB,UAAM,KAAK;AACX,SAAK,sBAAsB,eAAe;AAC1C,SAAK,kBAAkB;AAAA,EACzB;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA,EAGA,SAAS;AACP,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA;AAAA,EAGA,eAAe,UAAuF;AACpG,QAAI,UAAU;AACZ,UAAI,OAAO,SAAS,QAAQ,SAAU,MAAK,MAAM,YAAY,SAAS;AACtE,UAAI,OAAO,SAAS,SAAS,SAAU,MAAK,MAAM,aAAa,SAAS;AACxE,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,MACL,KAAK,KAAK,MAAM;AAAA,MAChB,MAAM,KAAK,MAAM;AAAA,IACnB;AAAA,EACF;AAAA;AAAA,EAGA,kBACE,gBACA,cACA,qBAAsD,QACtD;AACA,SAAK,MAAM,kBAAkB,gBAAgB,cAAc,kBAAkB;AAAA,EAC/E;AAAA;AAAA,EAGA,aACE,aACA,OACA,KACA,aAAsD,YACtD;AACA,UAAM,iBAAiB,wBAAS,KAAK,MAAM;AAC3C,UAAM,eAAe,oBAAO,KAAK,MAAM;AAEvC,SAAK,MAAM,aAAa,aAAa,gBAAgB,cAAc,UAAU;AAE7E,QAAI,KAAK,UAAU,KAAK,MAAM,OAAO;AACnC,WAAK,QAAQ,KAAK,MAAM;AACxB,WAAK,kBAAkB;AAAA,IACzB;AAAA,EACF;AAAA;AAAA,EAGA,gBAAgB;AACd,WAAO,KAAK,MAAM,cAAc;AAAA,EAClC;AAAA;AAAA,EAGA,UAAkC;AAChC,WAAO,KAAK,sBAAsB,QAAQ;AAAA,EAC5C;AAAA;AAAA,EAGA,iBAAiB;AACf,WAAO,KAAK,MAAM,eAAe;AAAA,EACnC;AAAA;AAAA,EAGA,kBAAkB,SAAiB;AACjC,SAAK,MAAM,kBAAkB,OAAO;AACpC,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEA,SAAS;AACP,UAAM,eAAe,KAAK,kBAAkB,KAAK,OAAO;AACxD,UAAM,kBAAkB,KAAK,kBAAkB,KAAK,WAAW;AAC/D,UAAM,WAAW,KAAK,QAAQ,OAAO,CAAC,CAAC;AACvC,UAAM,cAAc,KAAK,WAAW,OAAO,CAAC,CAAC;AAE7C,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,uBAAuB,KAAK,SAAS;AAAA,MACrC,wBAAwB,KAAK,SAAS;AAAA,MACtC,uBAAuB,KAAK,SAAS;AAAA,MACrC,2BAA2B;AAAA,MAC3B,+BAA+B;AAAA,IACjC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMc,WAAW,UAAU,MAAM;AAAA;AAAA,+BAEpB,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMrB,SAAS;AAAA,MACf,UAAU;AAAA,MACV,mBAAmB,KAAK,SAAS;AAAA,MACjC,oBAAoB,KAAK,SAAS;AAAA,MAClC,mBAAmB,KAAK,SAAS;AAAA,MACjC,sBAAsB,CAAC,KAAK;AAAA,MAC5B,sBAAsB,KAAK;AAAA,MAC3B,sBAAsB,KAAK;AAAA,MAC3B,qBAAqB,KAAK;AAAA,MAC1B,mBAAmB,CAAC,KAAK;AAAA,MACzB,yBAAyB,KAAK,WAAW;AAAA,MACzC,6BAA6B,KAAK,WAAW;AAAA,MAC7C,yBAAyB,KAAK,WAAW;AAAA,IAC3C,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMQ,KAAK,KAAuF;AAAA,qBAC7F,UAAU,KAAK,IAAI,CAAC;AAAA,uBAClB,KAAK,KAAK,KAAK,CAAC;AAAA,0BACb,KAAK,QAAQ;AAAA,0BACb,KAAK,QAAQ;AAAA,0BACb,KAAK,QAAQ;AAAA,4BACX,UAAU,KAAK,WAAW,CAAC;AAAA,qBAClC,UAAU,KAAK,IAAI,CAAC;AAAA,0BACf,UAAU,KAAK,SAAS,CAAC;AAAA,0BACzB,UAAU,KAAK,SAAS,CAAC;AAAA,+BACpB,UAAU,KAAK,cAAc,CAAC;AAAA,4BACjC,UAAU,KAAK,WAAW,CAAC;AAAA,2BAC5B,KAAK,SAAS;AAAA,2BACd,UAAU,KAAK,UAAU,CAAC;AAAA,6BACxB,UAAU,KAAK,YAAY,CAAC;AAAA,0BAC/B,UAAU,KAAK,SAAS,CAAC;AAAA;AAAA,wBAE3B,KAAK,YAAY;AAAA,uBAClB,KAAK,WAAW;AAAA,yBACd,KAAK,aAAa;AAAA,uBACpB,KAAK,WAAW;AAAA,sBACjB,KAAK,UAAU;AAAA;AAAA;AAAA,oFAG+C,KAAK,WAAW,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQlF,cAAc,UAAU,MAAM;AAAA;AAAA,mCAEnB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9C;AACF;AA9VqB,YACZ,SAAyB,CAAC,0BAAiB,6BAAmB,yBAAQ,oCAAyB,8BAAY;AAQrF;AAAA,EAA5B,MAAM,oBAAoB;AAAA,GATR,YASU;AACM;AAAA,EAAlC,MAAM,0BAA0B;AAAA,GAVd,YAUgB;AAElB;AAAA,EAAhB,MAAM;AAAA,GAZY,YAYF;AACL;AAAA,EAAX,SAAS;AAAA,GAbS,YAaP;AAGA;AAAA,EAAX,SAAS;AAAA,GAhBS,YAgBP;AAGA;AAAA,EAAX,SAAS;AAAA,GAnBS,YAmBP;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAtBR,YAsBU;AAGjB;AAAA,EAAX,SAAS;AAAA,GAzBS,YAyBP;AAG0B;AAAA,EAArC,SAAS,EAAE,WAAW,YAAY,CAAC;AAAA,GA5BjB,YA4BmB;AAG1B;AAAA,EAAX,SAAS;AAAA,GA/BS,YA+BP;AAGgB;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlCP,YAkCS;AAGhB;AAAA,EAAX,SAAS;AAAA,GArCS,YAqCP;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAxCvB,YAwCyB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA3CvB,YA2CyB;AAOf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAlDR,YAkDU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArDvB,YAqDyB;AAGhB;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxDP,YAwDS;AAGA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3DP,YA2DS;AAGhB;AAAA,EAAX,SAAS;AAAA,GA9DS,YA8DP;AAGA;AAAA,EAAX,SAAS;AAAA,GAjES,YAiEP;AAMA;AAAA,EAAX,SAAS;AAAA,GAvES,YAuEP;AAGiB;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA1ER,YA0EU;AAGjB;AAAA,EAAX,SAAS;AAAA,GA7ES,YA6EP;AAWZ;AAAA,EARC,SAAS;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,MAET,eAAe,WAAU,CAAC,SAAS,UAAU,UAAU,QAAQ;AAAA,MAC/D,aAAa,WAAU,QAAQ,SAAS;AAAA,IAC1C;AAAA,EACF,CAAC;AAAA,GAvFkB,YAwFnB;AAMY;AAAA,EAAX,SAAS;AAAA,GA9FS,YA8FP;AAGI;AAAA,EAAf,aAAa;AAAA,GAjGK,YAiGH;AAuEhB;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAvK9B,YAwKnB;AAMA;AAAA,EADC,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA7K1B,YA8KnB;AAKM;AAAA,EADL,MAAM,SAAS,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAlL3B,YAmLb;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/select/select.component.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynPopup from '../popup/popup.component.js';\nimport SynTag from '../tag/tag.component.js';\nimport styles from './select.styles.js';\nimport customStyles from './select.custom.styles.js';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type { SynRemoveEvent } from '../../events/syn-remove.js';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://synergy.style/components/select\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the select's menu opens.\n * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the select's menu closes.\n * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n */\nexport default class SynSelect extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = {\n    'syn-icon': SynIcon,\n    'syn-popup': SynPopup,\n    'syn-tag': SynTag\n  };\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n  private readonly localize = new LocalizeController(this);\n  private typeToSelectString = '';\n  private typeToSelectTimeout: number;\n  private closeWatcher: CloseWatcher | null;\n\n  @query('.select') popup: SynPopup;\n  @query('.select__combobox') combobox: HTMLSlotElement;\n  @query('.select__display-input') displayInput: HTMLInputElement;\n  @query('.select__value-input') valueInput: HTMLInputElement;\n  @query('.select__listbox') listbox: HTMLSlotElement;\n\n  @state() private hasFocus = false;\n  @state() displayLabel = '';\n  @state() currentOption: SynOption;\n  @state() selectedOptions: SynOption[] = [];\n  @state() private valueHasChanged: boolean = false;\n\n  /** The name of the select, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /**\n   * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\n   * value attribute will be a space-delimited list of values based on the options selected, and the value property will\n   * be an array. **For this reason, values must not contain spaces.**\n   */\n  @property({\n    converter: {\n      fromAttribute: (value: string) => value.split(' '),\n      toAttribute: (value: string[]) => value.join(' ')\n    }\n  })\n  value: string | string[] = '';\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue: string | string[] = '';\n\n  /** The select's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Placeholder text to show as a hint when the select is empty. */\n  @property() placeholder = '';\n\n  /** Allows more than one option to be selected. */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /**\n   * The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\n   * indicate the number of additional items that are selected. Set to 0 to remove the limit.\n   */\n  @property({ attribute: 'max-options-visible', type: Number }) maxOptionsVisible = 3;\n\n  /** Disables the select control. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Adds a clear button when the select is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /**\n   * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  /** The select's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /**\n   * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\n   * inside of the viewport.\n   */\n  @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';\n\n  /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** The select's required attribute. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**\n   * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\n   * is the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\n   * the specified value.\n   */\n  @property() getTag: (option: SynOption, index: number) => TemplateResult | string | HTMLElement = option => {\n    return html`\n      <syn-tag\n        part=\"tag\"\n        exportparts=\"\n              base:tag__base,\n              content:tag__content,\n              remove-button:tag__remove-button,\n              remove-button__base:tag__remove-button__base\n            \"\n        size=${this.size}\n        removable\n        @syn-remove=${(event: SynRemoveEvent) => this.handleTagRemove(event, option)}\n      >\n        ${option.getTextLabel()}\n      </syn-tag>\n    `;\n  };\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.valueInput.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.valueInput.validationMessage;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    setTimeout(() => {\n      this.handleDefaultSlotChange();\n    });\n\n    // Because this is a form control, it shouldn't be opened initially\n    this.open = false;\n  }\n\n  private addOpenListeners() {\n    //\n    // Listen on the root node instead of the document in case the elements are inside a shadow root\n    //\n    // https://github.com/synergy-design-system/synergy/issues/1763\n    //\n    document.addEventListener('focusin', this.handleDocumentFocusIn);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n\n    // If the component is rendered in a shadow root, we need to attach the focusin listener there too\n    if (this.getRootNode() !== document) {\n      this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn);\n    }\n\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => {\n        if (this.open) {\n          this.hide();\n          this.displayInput.focus({ preventScroll: true });\n        }\n      };\n    }\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('focusin', this.handleDocumentFocusIn);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n\n    if (this.getRootNode() !== document) {\n      this.getRootNode().removeEventListener('focusin', this.handleDocumentFocusIn);\n    }\n\n    this.closeWatcher?.destroy();\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.displayInput.setSelectionRange(0, 0);\n    this.emit('syn-focus');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleDocumentFocusIn = (event: KeyboardEvent) => {\n    // Close when focusing out of the select\n    const path = event.composedPath();\n    if (this && !path.includes(this)) {\n      this.hide();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const isClearButton = target.closest('.select__clear') !== null;\n    const isIconButton = target.closest('syn-icon-button') !== null;\n\n    // Ignore presses when the target is an icon button (e.g. the remove button in <syn-tag>)\n    if (isClearButton || isIconButton) {\n      return;\n    }\n\n    // Close when pressing escape\n    if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.hide();\n      this.displayInput.focus({ preventScroll: true });\n    }\n\n    // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the\n    // buffer we _don't_ close it.\n    if (event.key === 'Enter' || (event.key === ' ' && this.typeToSelectString === '')) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n\n      // If it's not open, open it\n      if (!this.open) {\n        this.show();\n        return;\n      }\n\n      // If it is open, update the value based on the current selection and close it\n      if (this.currentOption && !this.currentOption.disabled) {\n        this.valueHasChanged = true;\n        if (this.multiple) {\n          this.toggleOptionSelection(this.currentOption);\n        } else {\n          this.setSelectedOptions(this.currentOption);\n        }\n\n        // Emit after updating\n        this.updateComplete.then(() => {\n          this.emit('syn-input');\n          this.emit('syn-change');\n        });\n\n        if (!this.multiple) {\n          this.hide();\n          this.displayInput.focus({ preventScroll: true });\n        }\n      }\n\n      return;\n    }\n\n    // Navigate options\n    if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const allOptions = this.getAllOptions();\n      const currentIndex = allOptions.indexOf(this.currentOption);\n      let newIndex = Math.max(0, currentIndex);\n\n      // Prevent scrolling\n      event.preventDefault();\n\n      // Open it\n      if (!this.open) {\n        this.show();\n\n        // If an option is already selected, stop here because we want that one to remain highlighted when the listbox\n        // opens for the first time\n        if (this.currentOption) {\n          return;\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        newIndex = currentIndex + 1;\n        if (newIndex > allOptions.length - 1) newIndex = 0;\n      } else if (event.key === 'ArrowUp') {\n        newIndex = currentIndex - 1;\n        if (newIndex < 0) newIndex = allOptions.length - 1;\n      } else if (event.key === 'Home') {\n        newIndex = 0;\n      } else if (event.key === 'End') {\n        newIndex = allOptions.length - 1;\n      }\n\n      this.setCurrentOption(allOptions[newIndex]);\n    }\n\n    // All other \"printable\" keys trigger type to select\n    if ((event.key && event.key.length === 1) || event.key === 'Backspace') {\n      const allOptions = this.getAllOptions();\n\n      // Don't block important key combos like CMD+R\n      if (event.metaKey || event.ctrlKey || event.altKey) {\n        return;\n      }\n\n      // Open, unless the key that triggered is backspace\n      if (!this.open) {\n        if (event.key === 'Backspace') {\n          return;\n        }\n\n        this.show();\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = window.setTimeout(() => (this.typeToSelectString = ''), 1000);\n\n      if (event.key === 'Backspace') {\n        this.typeToSelectString = this.typeToSelectString.slice(0, -1);\n      } else {\n        this.typeToSelectString += event.key.toLowerCase();\n      }\n\n      for (const option of allOptions) {\n        const label = option.getTextLabel().toLowerCase();\n\n        if (label.startsWith(this.typeToSelectString)) {\n          this.setCurrentOption(option);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the select\n    const path = event.composedPath();\n    if (this && !path.includes(this)) {\n      this.hide();\n    }\n  };\n\n  private handleLabelClick() {\n    this.displayInput.focus();\n  }\n\n  private handleComboboxMouseDown(event: MouseEvent) {\n    const path = event.composedPath();\n    const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'syn-icon-button');\n\n    // Ignore disabled controls and clicks on tags (remove buttons)\n    if (this.disabled || isIconButton) {\n      return;\n    }\n\n    event.preventDefault();\n    this.displayInput.focus({ preventScroll: true });\n    this.open = !this.open;\n  }\n\n  private handleComboboxKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      return;\n    }\n\n    event.stopPropagation();\n    this.handleDocumentKeyDown(event);\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.stopPropagation();\n\n    if (this.value !== '') {\n      this.setSelectedOptions([]);\n      this.displayInput.focus({ preventScroll: true });\n\n      // Emit after update\n      this.updateComplete.then(() => {\n        this.emit('syn-clear');\n        this.emit('syn-input');\n        this.emit('syn-change');\n      });\n    }\n  }\n\n  private handleClearMouseDown(event: MouseEvent) {\n    // Don't lose focus or propagate events when clicking the clear button\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  private handleOptionClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const option = target.closest('syn-option');\n    const oldValue = this.value;\n\n    if (option && !option.disabled) {\n      this.valueHasChanged = true;\n      if (this.multiple) {\n        this.toggleOptionSelection(option);\n      } else {\n        this.setSelectedOptions(option);\n      }\n\n      // Set focus after updating so the value is announced by screen readers\n      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));\n\n      if (this.value !== oldValue) {\n        // Emit after updating\n        this.updateComplete.then(() => {\n          this.emit('syn-input');\n          this.emit('syn-change');\n        });\n      }\n\n      if (!this.multiple) {\n        this.hide();\n        this.displayInput.focus({ preventScroll: true });\n      }\n    }\n  }\n\n  private handleDefaultSlotChange() {\n    if (!customElements.get('syn-option')) {\n      customElements.whenDefined('syn-option').then(() => this.handleDefaultSlotChange());\n    }\n\n    const allOptions = this.getAllOptions();\n    const val = this.valueHasChanged ? this.value : this.defaultValue;\n    const value = Array.isArray(val) ? val : [val];\n    const values: string[] = [];\n\n    // Check for duplicate values in menu items\n    allOptions.forEach(option => values.push(option.value));\n\n    // Select only the options that match the new value\n    this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));\n  }\n\n  private handleTagRemove(event: SynRemoveEvent, option: SynOption) {\n    event.stopPropagation();\n\n    if (!this.disabled) {\n      this.toggleOptionSelection(option, false);\n\n      // Emit after updating\n      this.updateComplete.then(() => {\n        this.emit('syn-input');\n        this.emit('syn-change');\n      });\n    }\n  }\n\n  // Gets an array of all <syn-option> elements\n  private getAllOptions() {\n    return [...this.querySelectorAll<SynOption>('syn-option')];\n  }\n\n  // Gets the first <syn-option> element\n  private getFirstOption() {\n    return this.querySelector<SynOption>('syn-option');\n  }\n\n  // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one\n  // option may be \"current\" at a time.\n  private setCurrentOption(option: SynOption | null) {\n    const allOptions = this.getAllOptions();\n\n    // Clear selection\n    allOptions.forEach(el => {\n      el.current = false;\n      el.tabIndex = -1;\n    });\n\n    // Select the target option\n    if (option) {\n      this.currentOption = option;\n      option.current = true;\n      option.tabIndex = 0;\n      option.focus();\n    }\n  }\n\n  // Sets the selected option(s)\n  private setSelectedOptions(option: SynOption | SynOption[]) {\n    const allOptions = this.getAllOptions();\n    const newSelectedOptions = Array.isArray(option) ? option : [option];\n\n    // Clear existing selection\n    allOptions.forEach(el => (el.selected = false));\n\n    // Set the new selection\n    if (newSelectedOptions.length) {\n      newSelectedOptions.forEach(el => (el.selected = true));\n    }\n\n    // Update selection, value, and display label\n    this.selectionChanged();\n  }\n\n  // Toggles an option's selected state\n  private toggleOptionSelection(option: SynOption, force?: boolean) {\n    if (force === true || force === false) {\n      option.selected = force;\n    } else {\n      option.selected = !option.selected;\n    }\n\n    this.selectionChanged();\n  }\n\n  // This method must be called whenever the selection changes. It will update the selected options cache, the current\n  // value, and the display value\n  private selectionChanged() {\n    const options = this.getAllOptions();\n    // Update selected options cache\n    this.selectedOptions = options.filter(el => el.selected);\n\n    // Update the value and display label\n    if (this.multiple) {\n      this.value = this.selectedOptions.map(el => el.value);\n\n      if (this.placeholder && this.value.length === 0) {\n        // When no items are selected, keep the value empty so the placeholder shows\n        this.displayLabel = '';\n      } else {\n        this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);\n      }\n    } else {\n      const selectedOption = this.selectedOptions[0];\n      this.value = selectedOption?.value ?? '';\n      this.displayLabel = selectedOption?.getTextLabel?.() ?? '';\n    }\n\n    // Update validity\n    this.updateComplete.then(() => {\n      this.formControlController.updateValidity();\n    });\n  }\n  protected get tags() {\n    return this.selectedOptions.map((option, index) => {\n      if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {\n        const tag = this.getTag(option, index);\n        // Wrap so we can handle the remove\n        return html`<div @syn-remove=${(e: SynRemoveEvent) => this.handleTagRemove(e, option)}>\n          ${typeof tag === 'string' ? unsafeHTML(tag) : tag}\n        </div>`;\n      } else if (index === this.maxOptionsVisible) {\n        // Hit tag limit\n        return html`<syn-tag size=${this.size}>+${this.selectedOptions.length - index}</syn-tag>`;\n      }\n      return html``;\n    });\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Close the listbox when the control is disabled\n    if (this.disabled) {\n      this.open = false;\n      this.handleOpenChange();\n    }\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  handleValueChange() {\n    const allOptions = this.getAllOptions();\n    const value = Array.isArray(this.value) ? this.value : [this.value];\n\n    // Select only the options that match the new value\n    this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open && !this.disabled) {\n      // Reset the current option\n      this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());\n\n      // Show\n      this.emit('syn-show');\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.listbox.hidden = false;\n      this.popup.active = true;\n\n      // Select the appropriate option based on value after the listbox opens\n      requestAnimationFrame(() => {\n        this.setCurrentOption(this.currentOption);\n      });\n\n      const { keyframes, options } = getAnimation(this, 'select.show', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n\n      // Make sure the current option is scrolled into view (required for Safari)\n      if (this.currentOption) {\n        scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto');\n      }\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      this.emit('syn-hide');\n      this.removeOpenListeners();\n\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'select.hide', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.listbox.hidden = true;\n      this.popup.active = false;\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  /** Shows the listbox. */\n  async show() {\n    if (this.open || this.disabled) {\n      this.open = false;\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the listbox. */\n  async hide() {\n    if (!this.open || this.disabled) {\n      this.open = false;\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.valueInput.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.valueInput.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.valueInput.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  /** Sets focus on the control. */\n  focus(options?: FocusOptions) {\n    this.displayInput.focus(options);\n  }\n\n  /** Removes focus from the control. */\n  blur() {\n    this.displayInput.blur();\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n    const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;\n    const isPlaceholderVisible = this.placeholder && this.value && this.value.length <= 0;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText\n        })}\n      >\n        <label\n          id=\"label\"\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n          @click=${this.handleLabelClick}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <syn-popup\n            class=${classMap({\n              select: true,\n              'select--standard': true,\n              'select--open': this.open,\n              'select--disabled': this.disabled,\n              'select--multiple': this.multiple,\n              'select--focused': this.hasFocus,\n              'select--placeholder-visible': isPlaceholderVisible,\n              'select--top': this.placement === 'top',\n              'select--bottom': this.placement === 'bottom',\n              'select--small': this.size === 'small',\n              'select--medium': this.size === 'medium',\n              'select--large': this.size === 'large'\n            })}\n            placement=${this.placement}\n            strategy=${this.hoist ? 'fixed' : 'absolute'}\n            flip\n            shift\n            sync=\"width\"\n            auto-size=\"vertical\"\n            auto-size-padding=\"10\"\n          >\n            <div\n              part=\"combobox\"\n              class=\"select__combobox\"\n              slot=\"anchor\"\n              @keydown=${this.handleComboboxKeyDown}\n              @mousedown=${this.handleComboboxMouseDown}\n            >\n              <slot part=\"prefix\" name=\"prefix\" class=\"select__prefix\"></slot>\n\n              <input\n                part=\"display-input\"\n                class=\"select__display-input\"\n                type=\"text\"\n                placeholder=${this.placeholder}\n                .disabled=${this.disabled}\n                .value=${this.displayLabel}\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                autocapitalize=\"off\"\n                readonly\n                aria-controls=\"listbox\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-haspopup=\"listbox\"\n                aria-labelledby=\"label\"\n                aria-disabled=${this.disabled ? 'true' : 'false'}\n                aria-describedby=\"help-text\"\n                role=\"combobox\"\n                tabindex=\"0\"\n                @focus=${this.handleFocus}\n                @blur=${this.handleBlur}\n              />\n\n              ${this.multiple ? html`<div part=\"tags\" class=\"select__tags\">${this.tags}</div>` : ''}\n\n              <input\n                class=\"select__value-input\"\n                type=\"text\"\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                .value=${Array.isArray(this.value) ? this.value.join(', ') : this.value}\n                tabindex=\"-1\"\n                aria-hidden=\"true\"\n                @focus=${() => this.focus()}\n                @invalid=${this.handleInvalid}\n              />\n\n              ${hasClearIcon\n                ? html`\n                    <button\n                      part=\"clear-button\"\n                      class=\"select__clear\"\n                      type=\"button\"\n                      aria-label=${this.localize.term('clearEntry')}\n                      @mousedown=${this.handleClearMouseDown}\n                      @click=${this.handleClearClick}\n                      tabindex=\"-1\"\n                    >\n                      <slot name=\"clear-icon\">\n                        <syn-icon name=\"x-circle-fill\" library=\"system\"></syn-icon>\n                      </slot>\n                    </button>\n                  `\n                : ''}\n\n              <slot name=\"suffix\" part=\"suffix\" class=\"select__suffix\"></slot>\n\n              <slot name=\"expand-icon\" part=\"expand-icon\" class=\"select__expand-icon\">\n                <syn-icon library=\"system\" name=\"chevron-down\"></syn-icon>\n              </slot>\n            </div>\n\n            <div\n              id=\"listbox\"\n              role=\"listbox\"\n              aria-expanded=${this.open ? 'true' : 'false'}\n              aria-multiselectable=${this.multiple ? 'true' : 'false'}\n              aria-labelledby=\"label\"\n              part=\"listbox\"\n              class=\"select__listbox\"\n              tabindex=\"-1\"\n              @mouseup=${this.handleOptionClick}\n              @slotchange=${this.handleDefaultSlotChange}\n            >\n              <slot></slot>\n            </div>\n          </syn-popup>\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('select.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('select.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n"],
-  "mappings": "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",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/dialog/dialog.component.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport Modal from '../../internal/modal.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './dialog.styles.js';\nimport customStyles from './dialog.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n * @documentation https://synergy.style/components/dialog\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The dialog's main content.\n * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @event syn-show - Emitted when the dialog opens.\n * @event syn-after-show - Emitted after the dialog opens and all animations are complete.\n * @event syn-hide - Emitted when the dialog closes.\n * @event syn-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to\n *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the dialog.\n * @csspart panel - The dialog's panel (where the dialog and its content are rendered).\n * @csspart header - The dialog's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @csspart title - The dialog's title.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.\n * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.\n * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.\n */\nexport default class SynDialog extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = {\n    'syn-icon-button': SynIconButton\n  };\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n  private readonly localize = new LocalizeController(this);\n  private originalTrigger: HTMLElement | null;\n  public modal = new Modal(this);\n  private closeWatcher: CloseWatcher | null;\n\n  @query('.dialog') dialog: HTMLElement;\n  @query('.dialog__panel') panel: HTMLElement;\n  @query('.dialog__overlay') overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true }) label = '';\n\n  /**\n   * Disables the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the dialog.\n   */\n  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;\n\n  firstUpdated() {\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.modal.deactivate();\n    unlockBodyScrolling(this);\n    this.closeWatcher?.destroy();\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const slRequestClose = this.emit('syn-request-close', {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, 'dialog.denyClose', { dir: this.localize.dir() });\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => this.requestClose('keyboard');\n    } else {\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n    }\n  }\n\n  private removeOpenListeners() {\n    this.closeWatcher?.destroy();\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n      event.stopPropagation();\n      this.requestClose('keyboard');\n    }\n  };\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('syn-show');\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause\n      // the dialogs's animation to jitter (if it starts offscreen), so we'll temporarily remove the attribute, call\n      // `focus({ preventScroll: true })` ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/synergy-design-system/synergy/issues/693\n      //\n      const autoFocusTarget = this.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit('syn-initial-focus', { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      const panelAnimation = getAnimation(this, 'dialog.show', { dir: this.localize.dir() });\n      const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: this.localize.dir() });\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      this.emit('syn-hide');\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, 'dialog.hide', { dir: this.localize.dir() });\n      const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', { dir: this.localize.dir() });\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === 'function') {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  /** Shows the dialog. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the dialog */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--has-footer': this.hasSlotController.test('footer')\n        })}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" @click=${() => this.requestClose('overlay')} tabindex=\"-1\"></div>\n\n        <div\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n          aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}\n          tabindex=\"-1\"\n        >\n          ${!this.noHeader\n            ? html`\n                <header part=\"header\" class=\"dialog__header\">\n                  <h2 part=\"title\" class=\"dialog__title\" id=\"title\">\n                    <slot name=\"label\"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"dialog__header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                    <syn-icon-button\n                      part=\"close-button\"\n                      exportparts=\"base:close-button__base\"\n                      class=\"dialog__close\"\n                      name=\"x-lg\"\n                      label=${this.localize.term('close')}\n                      library=\"system\"\n                      @click=\"${() => this.requestClose('close-button')}\"\n                    ></syn-icon-button>\n                  </div>\n                </header>\n              `\n            : ''}\n          ${\n            '' /* The tabindex=\"-1\" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. Previously this was just a <slot>, but tabindex=\"-1\" on the slot causes children to not be focusable. https://github.com/synergy-design-system/synergy/issues/1753#issuecomment-1836803277 */\n          }\n          <div part=\"body\" class=\"dialog__body\" tabindex=\"-1\"><slot></slot></div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('dialog.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('dialog.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation('dialog.overlay.show', {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation('dialog.overlay.hide', {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n"],
-  "mappings": "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",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/badge/badge.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .badge {\n    border: none;\n    border-radius: var(--syn-border-radius-pill);\n    font: var(--syn-body-x-small-bold);\n    height: var(--syn-spacing-large);\n    line-height: var(--syn-spacing-large);\n    min-width: var(--syn-spacing-large);\n    padding: 0 var(--syn-spacing-x-small);\n  }\n\n  /* Variant modifiers */\n  .badge--primary {\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .badge--success {\n    background-color: var(--syn-color-success-500);\n    color: var(--syn-typography-color-text);\n  }\n\n  .badge--neutral {\n    background-color: var(--syn-color-neutral-800);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .badge--warning {\n    background-color: var(--syn-color-warning-400);\n    color: var(--syn-typography-color-text);\n  }\n\n  .badge--danger {\n    background-color: var(--syn-color-error-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  /**\n   * Special treatment: If the badge is empty, show it as a dot only\n   */\n  :host(:empty) .badge {\n    height: var(--syn-spacing-x-small);\n    min-width: initial;\n    padding: 0;\n    width: var(--syn-spacing-x-small);\n  }\n\n  .visually-hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/select/select.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox,\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .select__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--small .select__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--large .select__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Change select border on hover */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .select:not(.select--disabled):hover .select__combobox {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .select--small .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .select--large .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .select__prefix,\n  .select__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n  /* Multi Select */\n  .select__tags {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .select--small .select__tags {\n    gap: var(--syn-spacing-2x-small);\n  }\n\n  .select--medium .select__tags {\n    gap: var(--syn-spacing-x-small);\n  }\n\n  .select--large .select__tags {\n    gap: var(--syn-spacing-small);\n  }\n\n  /* Listbox */\n  .select__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .select__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}