@synergy-design-system/components 2.1.0 → 2.2.1

package/dist/chunks/{chunk.IZVJSS3N.js → chunk.HYBKODEA.js}

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-bar/progress-bar.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 SynProgressBar from './progress-bar.component.js';\n\nexport * from './progress-bar.component.js';\nexport default SynProgressBar;\n\nSynProgressBar.define('syn-progress-bar');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-progress-bar': SynProgressBar;\n  }\n}\n"],
+  "mappings": ";;;;;AAWA,IAAO,uBAAQ;AAEf,eAAe,OAAO,kBAAkB;",
+  "names": []
+}

package/dist/chunks/{chunk.ZV7LSX6O.js → chunk.I4JTI4B2.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.KGJX3LKJ.js";
+} from "./chunk.JLNTO45Z.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.ZV7LSX6O.js.map
+//# sourceMappingURL=chunk.I4JTI4B2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/divider/divider.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 SynDivider from './divider.component.js';\n\nexport * from './divider.component.js';\nexport default SynDivider;\n\nSynDivider.define('syn-divider');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-divider': SynDivider;\n  }\n}\n"],
+  "mappings": ";;;;;AAWA,IAAO,kBAAQ;AAEf,WAAW,OAAO,aAAa;",
+  "names": []
+}

package/dist/chunks/{chunk.3VLVBVTP.js → chunk.I6444N6Y.js}

@@ -1,34 +1,34 @@
 import {
   SynIconButton
-} from "./chunk.7BN75LQX.js";
+} from "./chunk.UNDLEHX2.js";
 import {
   animateTo,
   stopAnimations,
   waitForEvent
-} from "./chunk.UMKKOHXB.js";
+} from "./chunk.4OLTKAXX.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.QAUTITK3.js";
-import {
-  alert_styles_default
-} from "./chunk.PS4UJFYT.js";
+} from "./chunk.MSUX23ZJ.js";
 import {
   HasSlotController
-} from "./chunk.66WXVGAW.js";
+} from "./chunk.WVVQK5TE.js";
 import {
   watch
-} from "./chunk.AVTU2BGE.js";
+} from "./chunk.QJMO7V5R.js";
+import {
+  alert_custom_styles_default
+} from "./chunk.JRYXECAY.js";
+import {
+  alert_styles_default
+} from "./chunk.KG73YUXI.js";
 import {
   LocalizeController
-} from "./chunk.M6WH7QEC.js";
+} from "./chunk.E3KW3KQM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.NHFTJEYN.js";
-import {
-  alert_custom_styles_default
-} from "./chunk.JRYXECAY.js";
+} from "./chunk.JAHDSTW6.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -214,4 +214,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.3VLVBVTP.js.map
+//# sourceMappingURL=chunk.I6444N6Y.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/alert/alert.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 { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './alert.styles.js';\nimport customStyles from './alert.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'syn-toast-stack' });\n\n/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://synergy.style/components/alert\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the alert opens.\n * @event syn-after-show - Emitted after the alert opens and all animations are complete.\n * @event syn-hide - Emitted when the alert closes.\n * @event syn-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\nexport default class SynAlert extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon-button': SynIconButton };\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('syn-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', { dir: this.localize.dir() });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      this.emit('syn-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', { dir: this.localize.dir() });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\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 alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'syn-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('syn-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--primary': this.variant === 'primary',\n          'alert--success': this.variant === 'success',\n          'alert--neutral': this.variant === 'neutral',\n          'alert--warning': this.variant === 'warning',\n          'alert--danger': this.variant === 'danger'\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <div part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n\n        <div part=\"message\" class=\"alert__message\" aria-live=\"polite\">\n          <slot></slot>\n        </div>\n\n        ${this.closable\n          ? html`\n              <syn-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"x-lg\"\n                library=\"system\"\n                label=${this.localize.term('close')}\n                @click=${this.handleCloseClick}\n              ></syn-icon-button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.WFVW45MV.js → chunk.IKFF3LCP.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.PGZOI4DU.js";
+} from "./chunk.QZO5TDVH.js";
 
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.WFVW45MV.js.map
+//# sourceMappingURL=chunk.IKFF3LCP.js.map

package/dist/chunks/{chunk.IFVLU7ZD.js → chunk.IT2WF33D.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.J6CJP4LF.js";
+} from "./chunk.UH2Y55BA.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.IFVLU7ZD.js.map
+//# sourceMappingURL=chunk.IT2WF33D.js.map

package/dist/chunks/{chunk.CFIQXXMW.js → chunk.IVM3BGRH.js}

@@ -90,4 +90,4 @@ var option_styles_default = css`
 export {
   option_styles_default
 };
-//# sourceMappingURL=chunk.CFIQXXMW.js.map
+//# sourceMappingURL=chunk.IVM3BGRH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.styles.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    color: var(--syn-color-neutral-700);\n    padding: var(--syn-spacing-x-small) var(--syn-spacing-medium) var(--syn-spacing-x-small) var(--syn-spacing-x-small);\n    transition: var(--syn-transition-fast) fill;\n    cursor: pointer;\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-color-neutral-100);\n    color: var(--syn-color-neutral-1000);\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n    opacity: 1;\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: var(--syn-line-height-dense);\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.NHFTJEYN.js → chunk.JAHDSTW6.js}

@@ -67,7 +67,7 @@ var SynergyElement = class extends LitElement {
 };
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-SynergyElement.version = "2.1.0";
+SynergyElement.version = "2.2.1";
 SynergyElement.dependencies = {};
 __decorateClass([
   property()
@@ -80,4 +80,4 @@ export {
   component_styles_default,
   SynergyElement
 };
-//# sourceMappingURL=chunk.NHFTJEYN.js.map
+//# sourceMappingURL=chunk.JAHDSTW6.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles/component.styles.ts", "../../src/internal/synergy-element.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\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 */\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? never\n      : // ...and has at least one non-optional property\n        Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? never\n        : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? T\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? T\n        : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n        : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent<unknown>\n  : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n    name: EventTypeDoesNotRequireDetail<T>,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof EventTypesWithRequiredDetail>(\n    name: EventTypeRequiresDetail<T>,\n    options: SynEventInit<T>\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof ValidEventTypeMap>(\n    name: T,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T> {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType<T>;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = \"2.2.1\";\n  \n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof SynergyElement;\n\n    if (!currentlyRegisteredConstructor) {\n      customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record<string, typeof SynergyElement> = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof SynergyElement).define(name, component);\n    });\n  }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n"],
+  "mappings": ";;;;;;AAQA,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFf,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AA+DzB,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAcrD,KACE,MACA,SACuB;AACvB,UAAM,QAAQ,IAAI,YAAY,MAAM;AAAA,MAClC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ,CAAC;AAAA,OACN,QACJ;AAED,SAAK,cAAc,KAAK;AAExB,WAAO;AAAA,EACT;AAAA,EAOA,OAAO,OAAO,MAAc,qBAAqB,MAAM,UAAoC,CAAC,GAAG;AAC7F,UAAM,iCAAiC,eAAe,IAAI,IAAI;AAI9D,QAAI,CAAC,gCAAgC;AACnC,qBAAe,OAAO,MAAM,cAAc,mBAAmB;AAAA,MAAC,GAA0C,OAAO;AAC/G;AAAA,IACF;AAEA,QAAI,aAAa;AACjB,QAAI,kBAAkB;AAEtB,QAAI,aAAa,sBAAsB,mBAAmB,SAAS;AACjE,mBAAa,OAAO,mBAAmB;AAAA,IACzC;AAEA,QAAI,aAAa,kCAAkC,+BAA+B,SAAS;AACzF,wBAAkB,OAAO,+BAA+B;AAAA,IAC1D;AAGA,QAAI,cAAc,mBAAmB,eAAe,iBAAiB;AAEnE;AAAA,IACF;AAEA,YAAQ;AAAA,MACN,0BAA0B,IAAI,IAAI,UAAU,UAAU,IAAI,IAAI,eAAe;AAAA,IAC/E;AAAA,EACF;AAAA,EAIA,cAAc;AACZ,UAAM;AACN,WAAO,QAAS,KAAK,YAAsC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACtG,MAAC,KAAK,YAAsC,OAAO,MAAM,SAAS;AAAA,IACpE,CAAC;AAAA,EACH;AACF;AAAA;AAAA;AA5EqB,eAiCZ,UAAU;AAjCE,eAoEZ,eAAsD,CAAC;AAlElD;AAAA,EAAX,SAAS;AAAA,GAFS,eAEP;AACA;AAAA,EAAX,SAAS;AAAA,GAHS,eAGP;",
+  "names": []
+}

package/dist/chunks/{chunk.7C7XOARZ.js → chunk.JF6VUTP3.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.F6HATFB6.js";
+} from "./chunk.FX5EOGYW.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.7C7XOARZ.js.map
+//# sourceMappingURL=chunk.JF6VUTP3.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox/checkbox.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 SynCheckbox from './checkbox.component.js';\n\nexport * from './checkbox.component.js';\nexport default SynCheckbox;\n\nSynCheckbox.define('syn-checkbox');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-checkbox': SynCheckbox;\n  }\n}\n"],
+  "mappings": ";;;;;AAWA,IAAO,mBAAQ;AAEf,YAAY,OAAO,cAAc;",
+  "names": []
+}

package/dist/chunks/{chunk.KGJX3LKJ.js → chunk.JLNTO45Z.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk.FA6V2WD6.js";
 import {
   divider_styles_default
-} from "./chunk.ACTJFDNK.js";
+} from "./chunk.FSZIE7IO.js";
 import {
   watch
-} from "./chunk.AVTU2BGE.js";
+} from "./chunk.QJMO7V5R.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.NHFTJEYN.js";
+} from "./chunk.JAHDSTW6.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -41,4 +41,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.KGJX3LKJ.js.map
+//# sourceMappingURL=chunk.JLNTO45Z.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/divider/divider.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 { property } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './divider.styles.js';\nimport customStyles from './divider.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Dividers are used to visually separate or group elements.\n * @documentation https://synergy.style/components/divider\n * @status stable\n * @since 2.0\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The spacing of the divider.\n */\nexport default class SynDivider extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  /** Draws the divider in a vertical orientation. */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'separator');\n  }\n\n  @watch('vertical')\n  handleVerticalChange() {\n    this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAkBzB,IAAqB,aAArB,cAAwC,eAAe;AAAA,EAAvD;AAAA;AAI8C,oBAAW;AAAA;AAAA,EAEvD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,WAAW;AAAA,EACvC;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,oBAAoB,KAAK,WAAW,aAAa,YAAY;AAAA,EACjF;AACF;AAfqB,WACZ,SAAyB,CAAC,0BAAiB,wBAAQ,6BAAY;AAG1B;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAJvB,WAIyB;AAQ5C;AAAA,EADC,MAAM,UAAU;AAAA,GAXE,WAYnB;",
+  "names": []
+}

package/dist/chunks/{chunk.66DXY7BX.js → chunk.JLXCLATV.js}

@@ -44,4 +44,4 @@ var spinner_styles_default = css`
 export {
   spinner_styles_default
 };
-//# sourceMappingURL=chunk.66DXY7BX.js.map
+//# sourceMappingURL=chunk.JLXCLATV.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner/spinner.styles.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\n// Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.\n// Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and\n// break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized\n// according to its actual dimensions.\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --track-width: 2px;\n    --indicator-color: var(--syn-color-primary-600);\n    --speed: 2s;\n\n    display: inline-flex;\n    width: 1em;\n    height: 1em;\n    flex: none;\n  }\n\n  .spinner {\n    flex: 1 1 auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .spinner__track,\n  .spinner__indicator {\n    fill: none;\n    stroke-width: var(--track-width);\n    r: calc(0.5em - var(--track-width) / 2);\n    cx: 0.5em;\n    cy: 0.5em;\n    transform-origin: 50% 50%;\n  }\n\n  .spinner__track {\n    transform-origin: 0% 0%;\n  }\n\n  .spinner__indicator {\n    stroke: var(--indicator-color);\n    stroke-linecap: round;\n    stroke-dasharray: 150% 75%;\n    animation: spin var(--speed) linear infinite;\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAOpB,IAAO,yBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.TZCBMMHE.js → chunk.JNCK3S26.js}

@@ -3,11 +3,11 @@ import {
 } from "./chunk.PILX7LVU.js";
 import {
   menu_styles_default
-} from "./chunk.RSSY7KPD.js";
+} from "./chunk.C2CWYCOU.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.NHFTJEYN.js";
+} from "./chunk.JAHDSTW6.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -128,4 +128,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.TZCBMMHE.js.map
+//# sourceMappingURL=chunk.JNCK3S26.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu/menu.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 { html } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './menu.styles.js';\nimport customStyles from './menu.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynMenuItem from '../menu-item/menu-item.component.js';\n\nexport interface MenuSelectEventDetail {\n  item: SynMenuItem;\n}\n\n/**\n * @summary Menus provide a list of options for the user to choose from.\n * @documentation https://synergy.style/components/menu\n * @status stable\n * @since 2.0\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.\n */\nexport default class SynMenu extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const target = event.composedPath().find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));\n\n    if (!target) return;\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as SynMenuItem;\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('syn-select', { detail: { item } });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as SynMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'syn-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n      if (el.inert || !this.isMenuItem(el)) {\n        return false;\n      }\n      return true;\n    }) as SynMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: SynMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  render() {\n    return html`\n      <slot\n        @slotchange=${this.handleSlotChange}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleMouseDown}\n      ></slot>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.QTTBNK5Q.js → chunk.JQ47GWDL.js}

@@ -189,4 +189,4 @@ var tab_group_styles_default = css`
 export {
   tab_group_styles_default
 };
-//# sourceMappingURL=chunk.QTTBNK5Q.js.map
+//# sourceMappingURL=chunk.JQ47GWDL.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab-group/tab-group.styles.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --indicator-color: var(--syn-color-primary-600);\n    --track-color: var(--syn-color-neutral-200);\n    --track-width: 2px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition:\n      var(--syn-transition-fast) translate ease,\n      var(--syn-transition-fast) width ease;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 var(--syn-spacing-x-large);\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: var(--syn-spacing-x-large);\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: calc(-1 * var(--track-width));\n    border-bottom: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(syn-tab-panel) {\n    --padding: var(--syn-spacing-medium) 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(syn-tab-panel) {\n    --padding: 0 var(--syn-spacing-medium);\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(syn-tab-panel) {\n    --padding: 0 var(--syn-spacing-medium);\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.GNT5NIFP.js → chunk.JVXMHXUT.js}

@@ -1,53 +1,53 @@
 import {
   SynTag
-} from "./chunk.RESDFE73.js";
+} from "./chunk.HLFSDS2W.js";
 import {
   select_custom_styles_default
 } from "./chunk.OWMT6OL2.js";
 import {
   select_styles_default
-} from "./chunk.QNQNR3RY.js";
+} from "./chunk.SNLPFVBC.js";
 import {
   SynPopup
-} from "./chunk.QUR6IKYK.js";
+} from "./chunk.UDT3BHIY.js";
 import {
   scrollIntoView
-} from "./chunk.RIJKFEYZ.js";
+} from "./chunk.RX7A4EQ2.js";
 import {
   defaultValue
-} from "./chunk.WFAJR3FN.js";
+} from "./chunk.RBG37CD4.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.TTL762VF.js";
+} from "./chunk.CX4QZVGR.js";
 import {
   FormControlController
-} from "./chunk.JUJZBRXD.js";
+} from "./chunk.6EXC65JJ.js";
 import {
   animateTo,
   stopAnimations,
   waitForEvent
-} from "./chunk.UMKKOHXB.js";
+} from "./chunk.4OLTKAXX.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.QAUTITK3.js";
+} from "./chunk.MSUX23ZJ.js";
 import {
   SynIcon
-} from "./chunk.EPP5MGNJ.js";
+} from "./chunk.NDWE2XUA.js";
 import {
   HasSlotController
-} from "./chunk.66WXVGAW.js";
+} from "./chunk.WVVQK5TE.js";
 import {
   watch
-} from "./chunk.AVTU2BGE.js";
+} from "./chunk.QJMO7V5R.js";
 import {
   LocalizeController
-} from "./chunk.M6WH7QEC.js";
+} from "./chunk.E3KW3KQM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.NHFTJEYN.js";
+} from "./chunk.JAHDSTW6.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -764,4 +764,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.GNT5NIFP.js.map
+//# sourceMappingURL=chunk.JVXMHXUT.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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 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, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix 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\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    // 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        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.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      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    const allOptions = this.getAllOptions();\n    const value = Array.isArray(this.value) ? this.value : [this.value];\n    const values: string[] = [];\n\n    // Check for duplicate values in menu items\n    if (customElements.get('syn-option')) {\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    } else {\n      // Rerun this handler when <syn-option> is registered\n      customElements.whenDefined('syn-option').then(() => this.handleDefaultSlotChange());\n    }\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    // Update selected options cache\n    this.selectedOptions = this.getAllOptions().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      this.value = this.selectedOptions[0]?.value ?? '';\n      this.displayLabel = this.selectedOptions[0]?.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.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=\"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.G3RGLGE5.js → chunk.K3VTIXSY.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.3ABNIRST.js";
+} from "./chunk.B55SP7OT.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.G3RGLGE5.js.map
+//# sourceMappingURL=chunk.K3VTIXSY.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.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 SynRadio from './radio.component.js';\n\nexport * from './radio.component.js';\nexport default SynRadio;\n\nSynRadio.define('syn-radio');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-radio': SynRadio;\n  }\n}\n"],
+  "mappings": ";;;;;AAWA,IAAO,gBAAQ;AAEf,SAAS,OAAO,WAAW;",
+  "names": []
+}

package/dist/chunks/{chunk.XIUSSERX.js → chunk.K62NPKGN.js}

@@ -38,4 +38,4 @@ var radio_group_styles_default = css`
 export {
   radio_group_styles_default
 };
-//# sourceMappingURL=chunk.XIUSSERX.js.map
+//# sourceMappingURL=chunk.K62NPKGN.js.map