@synergy-design-system/components 2.12.1 → 2.13.0

package/dist/chunks/{chunk.NGD3FJHJ.js → chunk.2TU3PMLN.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.D44UFEGJ.js";
+} from "./chunk.DLIV66GJ.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.NGD3FJHJ.js.map
+//# sourceMappingURL=chunk.2TU3PMLN.js.map

package/dist/chunks/{chunk.TCK2OZIA.js → chunk.4E3AZRVT.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.OMVVPU3N.js";
+} from "./chunk.W6QWU55E.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.TCK2OZIA.js.map
+//# sourceMappingURL=chunk.4E3AZRVT.js.map

package/dist/chunks/{chunk.TZC4IPT3.js → chunk.4E76ZRQI.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.JVIDZKUX.js";
+} from "./chunk.PFORJYFS.js";
 
 // src/components/prio-nav/prio-nav.ts
 var prio_nav_default = SynPrioNav;
@@ -9,4 +9,4 @@ SynPrioNav.define("syn-prio-nav");
 export {
   prio_nav_default
 };
-//# sourceMappingURL=chunk.TZC4IPT3.js.map
+//# sourceMappingURL=chunk.4E76ZRQI.js.map

package/dist/chunks/{chunk.RTEKLXU3.js → chunk.4OD2H3XB.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.V6VHMR46.js";
+} from "./chunk.YVMY7F6B.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.RTEKLXU3.js.map
+//# sourceMappingURL=chunk.4OD2H3XB.js.map

package/dist/chunks/{chunk.6FVSBWBR.js → chunk.4QUIUWWD.js}

@@ -1,6 +1,6 @@
 import {
   SynValidate
-} from "./chunk.N4ZA77ZV.js";
+} from "./chunk.MFNB75KX.js";
 
 // src/components/validate/validate.ts
 var validate_default = SynValidate;
@@ -9,4 +9,4 @@ SynValidate.define("syn-validate");
 export {
   validate_default
 };
-//# sourceMappingURL=chunk.6FVSBWBR.js.map
+//# sourceMappingURL=chunk.4QUIUWWD.js.map

package/dist/chunks/{chunk.C6HMB33J.js → chunk.5NUBLBWE.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.HFXDDKUQ.js";
+} from "./chunk.QC77ZFJI.js";
 
 // src/components/spinner/spinner.ts
 var spinner_default = SynSpinner;
@@ -9,4 +9,4 @@ SynSpinner.define("syn-spinner");
 export {
   spinner_default
 };
-//# sourceMappingURL=chunk.C6HMB33J.js.map
+//# sourceMappingURL=chunk.5NUBLBWE.js.map

package/dist/chunks/{chunk.V26UKAYH.js → chunk.5WASDVJX.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.M5JWXYAN.js";
+} from "./chunk.E3JM7C7O.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.V26UKAYH.js.map
+//# sourceMappingURL=chunk.5WASDVJX.js.map

package/dist/chunks/{chunk.KP2IPT7J.js → chunk.6O6CGMJA.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.3JB36AXI.js";
+} from "./chunk.WWG3H2UB.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.KP2IPT7J.js.map
+//# sourceMappingURL=chunk.6O6CGMJA.js.map

package/dist/chunks/{chunk.4ZAJFDDB.js → chunk.6Q3EOAQV.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WOJ2VRZY.js";
 import {
   SynDivider
-} from "./chunk.UNKM3AR6.js";
+} from "./chunk.FF7XVNF3.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.RZI6FTCQ.js";
+} from "./chunk.BMMT5J3T.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -331,4 +331,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.4ZAJFDDB.js.map
+//# sourceMappingURL=chunk.6Q3EOAQV.js.map

package/dist/chunks/{chunk.V3UNHLRQ.js → chunk.6SDNRNEM.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.ETBT2YG4.js";
+} from "./chunk.PP6YASVT.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.V3UNHLRQ.js.map
+//# sourceMappingURL=chunk.6SDNRNEM.js.map

package/dist/chunks/{chunk.WNOYE7FJ.js → chunk.6VAC3Z2Q.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.RZI6FTCQ.js";
+} from "./chunk.BMMT5J3T.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -89,4 +89,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.WNOYE7FJ.js.map
+//# sourceMappingURL=chunk.6VAC3Z2Q.js.map

package/dist/chunks/{chunk.QACXXGS7.js → chunk.6WKJKCWD.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   SynButtonGroup
-} from "./chunk.WNOYE7FJ.js";
+} from "./chunk.6VAC3Z2Q.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.RZI6FTCQ.js";
+} from "./chunk.BMMT5J3T.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -363,4 +363,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.QACXXGS7.js.map
+//# sourceMappingURL=chunk.6WKJKCWD.js.map

package/dist/chunks/{chunk.QACXXGS7.js.map → chunk.6WKJKCWD.js.map}

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

package/dist/chunks/{chunk.IAX5P4YW.js → chunk.7HZV4MYT.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.GI2NYM36.js";
+} from "./chunk.GQRFIMFT.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.IAX5P4YW.js.map
+//# sourceMappingURL=chunk.7HZV4MYT.js.map

package/dist/chunks/{chunk.IOYGNDRB.js → chunk.API5O3M4.js}

@@ -1,12 +1,15 @@
 import {
   popup_styles_default
 } from "./chunk.AZ3N5IOO.js";
+import {
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.RZI6FTCQ.js";
+} from "./chunk.BMMT5J3T.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -25,6 +28,7 @@ function isVirtualElement(e) {
 var SynPopup = class extends SynergyElement {
   constructor() {
     super(...arguments);
+    this.localize = new LocalizeController(this);
     this.active = false;
     this.placement = "top";
     this.strategy = "absolute";
@@ -254,7 +258,7 @@ var SynPopup = class extends SynergyElement {
         getOffsetParent
       })
     }).then(({ x, y, middlewareData, placement }) => {
-      const isRtl = this.matches(":dir(rtl)");
+      const isRtl = this.localize.dir() === "rtl";
       const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[placement.split("-")[0]];
       this.setAttribute("data-current-placement", placement);
       Object.assign(this.popup.style, {
@@ -411,4 +415,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.IOYGNDRB.js.map
+//# sourceMappingURL=chunk.API5O3M4.js.map

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

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

package/dist/chunks/{chunk.KDMX4Q33.js → chunk.B5L6RSX7.js}

@@ -25,7 +25,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.RZI6FTCQ.js";
+} from "./chunk.BMMT5J3T.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -249,4 +249,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.KDMX4Q33.js.map
+//# sourceMappingURL=chunk.B5L6RSX7.js.map

package/dist/chunks/{chunk.4WXSVFZF.js → chunk.BBVDCOTU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.RZI6FTCQ.js";
+} from "./chunk.BMMT5J3T.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -105,4 +105,4 @@ __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.4WXSVFZF.js.map
+//# sourceMappingURL=chunk.BBVDCOTU.js.map

package/dist/chunks/{chunk.CROIIGEK.js → chunk.BLUAN7RH.js}

@@ -1,15 +1,15 @@
 import {
   SynTag
-} from "./chunk.U3FPKF7P.js";
+} from "./chunk.WRXAT2ZV.js";
 import {
   select_custom_styles_default
 } from "./chunk.ZO4VONAT.js";
 import {
   select_styles_default
-} from "./chunk.DFABWKX7.js";
+} from "./chunk.MJEJKJER.js";
 import {
   SynPopup
-} from "./chunk.IOYGNDRB.js";
+} from "./chunk.API5O3M4.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
@@ -39,7 +39,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.6IPI5YJJ.js";
+} from "./chunk.ULXNVBWC.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -51,7 +51,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.RZI6FTCQ.js";
+} from "./chunk.BMMT5J3T.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -73,6 +73,7 @@ var SynSelect = class extends SynergyElement {
     this.hasFocus = false;
     this.displayLabel = "";
     this.selectedOptions = [];
+    this.valueHasChanged = false;
     this.name = "";
     this.value = "";
     this.defaultValue = "";
@@ -134,6 +135,7 @@ var SynSelect = class extends SynergyElement {
           return;
         }
         if (this.currentOption && !this.currentOption.disabled) {
+          this.valueHasChanged = true;
           if (this.multiple) {
             this.toggleOptionSelection(this.currentOption);
           } else {
@@ -174,7 +176,7 @@ var SynSelect = class extends SynergyElement {
         }
         this.setCurrentOption(allOptions[newIndex]);
       }
-      if (event.key.length === 1 || event.key === "Backspace") {
+      if (event.key && event.key.length === 1 || event.key === "Backspace") {
         const allOptions = this.getAllOptions();
         if (event.metaKey || event.ctrlKey || event.altKey) {
           return;
@@ -220,6 +222,9 @@ var SynSelect = class extends SynergyElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    setTimeout(() => {
+      this.handleDefaultSlotChange();
+    });
     this.open = false;
   }
   addOpenListeners() {
@@ -301,6 +306,7 @@ var SynSelect = class extends SynergyElement {
     const option = target.closest("syn-option");
     const oldValue = this.value;
     if (option && !option.disabled) {
+      this.valueHasChanged = true;
       if (this.multiple) {
         this.toggleOptionSelection(option);
       } else {
@@ -320,15 +326,15 @@ var SynSelect = class extends SynergyElement {
     }
   }
   handleDefaultSlotChange() {
-    const allOptions = this.getAllOptions();
-    const value = Array.isArray(this.value) ? this.value : [this.value];
-    const values = [];
-    if (customElements.get("syn-option")) {
-      allOptions.forEach((option) => values.push(option.value));
-      this.setSelectedOptions(allOptions.filter((el) => value.includes(el.value)));
-    } else {
+    if (!customElements.get("syn-option")) {
       customElements.whenDefined("syn-option").then(() => this.handleDefaultSlotChange());
     }
+    const allOptions = this.getAllOptions();
+    const val = this.valueHasChanged ? this.value : this.defaultValue;
+    const value = Array.isArray(val) ? val : [val];
+    const values = [];
+    allOptions.forEach((option) => values.push(option.value));
+    this.setSelectedOptions(allOptions.filter((el) => value.includes(el.value)));
   }
   handleTagRemove(event, option) {
     event.stopPropagation();
@@ -385,8 +391,9 @@ var SynSelect = class extends SynergyElement {
   // This method must be called whenever the selection changes. It will update the selected options cache, the current
   // value, and the display value
   selectionChanged() {
-    var _a, _b, _c, _d;
-    this.selectedOptions = this.getAllOptions().filter((el) => el.selected);
+    var _a, _b, _c;
+    const options = this.getAllOptions();
+    this.selectedOptions = options.filter((el) => el.selected);
     if (this.multiple) {
       this.value = this.selectedOptions.map((el) => el.value);
       if (this.placeholder && this.value.length === 0) {
@@ -395,8 +402,9 @@ var SynSelect = class extends SynergyElement {
         this.displayLabel = this.localize.term("numOptionsSelected", this.selectedOptions.length);
       }
     } else {
-      this.value = (_b = (_a = this.selectedOptions[0]) == null ? void 0 : _a.value) != null ? _b : "";
-      this.displayLabel = (_d = (_c = this.selectedOptions[0]) == null ? void 0 : _c.getTextLabel()) != null ? _d : "";
+      const selectedOption = this.selectedOptions[0];
+      this.value = (_a = selectedOption == null ? void 0 : selectedOption.value) != null ? _a : "";
+      this.displayLabel = (_c = (_b = selectedOption == null ? void 0 : selectedOption.getTextLabel) == null ? void 0 : _b.call(selectedOption)) != null ? _c : "";
     }
     this.updateComplete.then(() => {
       this.formControlController.updateValidity();
@@ -507,7 +515,7 @@ var SynSelect = class extends SynergyElement {
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;
-    const isPlaceholderVisible = this.placeholder && this.value.length === 0;
+    const isPlaceholderVisible = this.placeholder && this.value && this.value.length <= 0;
     return html`
       <div
         part="form-control"
@@ -685,6 +693,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], SynSelect.prototype, "selectedOptions", 2);
+__decorateClass([
+  state()
+], SynSelect.prototype, "valueHasChanged", 2);
 __decorateClass([
   property()
 ], SynSelect.prototype, "name", 2);
@@ -768,4 +779,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.CROIIGEK.js.map
+//# sourceMappingURL=chunk.BLUAN7RH.js.map