@synergy-design-system/components 2.1.0 → 2.2.1

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

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

package/dist/chunks/{chunk.Z5MQOTP5.js → chunk.EN4BZT55.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.7Q7PVXO3.js";
+} from "./chunk.N4SL33Q2.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.Z5MQOTP5.js.map
+//# sourceMappingURL=chunk.EN4BZT55.js.map

package/dist/chunks/{chunk.V4G76JVW.js → chunk.ESFHL7OW.js}

@@ -3,33 +3,33 @@ import {
 } from "./chunk.OOABXWCW.js";
 import {
   menu_item_styles_default
-} from "./chunk.PDHVYHXD.js";
+} from "./chunk.MLP2VIC7.js";
 import {
   SubmenuController
-} from "./chunk.JDBDBGQP.js";
+} from "./chunk.U2OMGNNZ.js";
 import {
   SynPopup
-} from "./chunk.QUR6IKYK.js";
+} from "./chunk.UDT3BHIY.js";
 import {
   SynSpinner
-} from "./chunk.76N53L44.js";
+} from "./chunk.YAYURZHV.js";
 import {
   SynIcon
-} from "./chunk.EPP5MGNJ.js";
+} from "./chunk.NDWE2XUA.js";
 import {
   HasSlotController,
   getTextContent
-} 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";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.V4G76JVW.js.map
+//# sourceMappingURL=chunk.ESFHL7OW.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/menu-item.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 { getTextContent, HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { SubmenuController } from './submenu-controller.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynPopup from '../popup/popup.component.js';\nimport SynSpinner from '../spinner/spinner.component.js';\nimport styles from './menu-item.styles.js';\nimport customStyles from './menu-item.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Menu items provide options for the user to pick from in a menu.\n * @documentation https://synergy.style/components/menu-item\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-spinner\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n * @slot submenu - Used to denote a nested menu.\n *\n * @csspart base - The component's base wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n * @csspart spinner - The spinner that shows when the menu item is in the loading state.\n * @csspart spinner__base - The spinner's base part.\n * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).\n *\n * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.\n */\nexport default class SynMenuItem extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = {\n    'syn-icon': SynIcon,\n    'syn-popup': SynPopup,\n    'syn-spinner': SynSpinner\n  };\n\n  private cachedTextLabel: string;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('.menu-item') menuItem: HTMLElement;\n\n  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */\n  @property() type: 'normal' | 'checkbox' = 'normal';\n\n  /** Draws the item in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @property() value = '';\n\n  /** Draws the menu item in a loading state. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Draws the menu item in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private readonly localize = new LocalizeController(this);\n  private readonly hasSlotController = new HasSlotController(this, 'submenu');\n  private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.handleHostClick);\n    this.addEventListener('mouseover', this.handleMouseOver);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n    this.removeEventListener('mouseover', this.handleMouseOver);\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n    }\n  }\n\n  private handleHostClick = (event: MouseEvent) => {\n    // Prevent the click event from being emitted when the button is disabled or loading\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    this.focus();\n    event.stopPropagation();\n  };\n\n  @watch('checked')\n  handleCheckedChange() {\n    // For proper accessibility, users have to use type=\"checkbox\" to use the checked attribute\n    if (this.checked && this.type !== 'checkbox') {\n      this.checked = false;\n      console.error('The checked attribute can only be used on menu items with type=\"checkbox\"', this);\n      return;\n    }\n\n    // Only checkbox types can receive the aria-checked attribute\n    if (this.type === 'checkbox') {\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('type')\n  handleTypeChange() {\n    if (this.type === 'checkbox') {\n      this.setAttribute('role', 'menuitemcheckbox');\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.setAttribute('role', 'menuitem');\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  getTextLabel() {\n    return getTextContent(this.defaultSlot);\n  }\n\n  isSubmenu() {\n    return this.hasSlotController.test('submenu');\n  }\n\n  render() {\n    const isRtl = this.localize.dir() === 'rtl';\n    const isSubmenuExpanded = this.submenuController.isExpanded();\n\n    return html`\n      <div\n        id=\"anchor\"\n        part=\"base\"\n        class=${classMap({\n          'menu-item': true,\n          'menu-item--rtl': isRtl,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--loading': this.loading,\n          'menu-item--has-submenu': this.isSubmenu(),\n          'menu-item--submenu-expanded': isSubmenuExpanded\n        })}\n        ?aria-haspopup=\"${this.isSubmenu()}\"\n        ?aria-expanded=\"${isSubmenuExpanded ? true : false}\"\n      >\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <syn-icon name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        </span>\n\n        <slot name=\"prefix\" part=\"prefix\" class=\"menu-item__prefix\"></slot>\n\n        <slot part=\"label\" class=\"menu-item__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n\n        <slot name=\"suffix\" part=\"suffix\" class=\"menu-item__suffix\"></slot>\n\n        <span part=\"submenu-icon\" class=\"menu-item__chevron\">\n          <syn-icon name=\"chevron-down\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        </span>\n\n        ${this.submenuController.renderSubmenu()}\n        ${this.loading ? html` <syn-spinner part=\"spinner\" exportparts=\"base:spinner__base\"></syn-spinner> ` : ''}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.LVTHHB6Y.js → chunk.EVRCBL4M.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.6UEMF3N6.js";
+} from "./chunk.PJZ7TFHA.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.LVTHHB6Y.js.map
+//# sourceMappingURL=chunk.EVRCBL4M.js.map

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

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

package/dist/chunks/{chunk.XMQLJOHH.js → chunk.FEQGC6LL.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.74RW2G4A.js";
+} from "./chunk.AH7JXEA2.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.XMQLJOHH.js.map
+//# sourceMappingURL=chunk.FEQGC6LL.js.map

package/dist/chunks/{chunk.GK2R5VV6.js → chunk.FFA5NEKJ.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.HMNKECG7.js";
+} from "./chunk.24WTVGXH.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.GK2R5VV6.js.map
+//# sourceMappingURL=chunk.FFA5NEKJ.js.map

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

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

package/dist/chunks/{chunk.VKFY3IRP.js → chunk.FGLWJH52.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk.AMAK44YX.js";
 import {
   progress_bar_styles_default
-} from "./chunk.XBUAZUNQ.js";
+} from "./chunk.QUM76UHV.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";
@@ -66,4 +66,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.VKFY3IRP.js.map
+//# sourceMappingURL=chunk.FGLWJH52.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-bar/progress-bar.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './progress-bar.styles.js';\nimport customStyles from './progress-bar.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Progress bars are used to show the status of an ongoing operation.\n * @documentation https://synergy.style/components/progress-bar\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the progress indicator.\n *\n * @csspart base - The component's base wrapper.\n * @csspart indicator - The progress bar's indicator.\n * @csspart label - The progress bar's label.\n *\n * @cssproperty --height - The progress bar's height.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --label-color - The color of the label.\n * @cssproperty --speed - The speed of the progress bar when in indeterminate state.\n */\nexport default class SynProgressBar extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  private readonly localize = new LocalizeController(this);\n\n  /** The current progress as a percentage, 0 to 100. */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** A custom label for assistive devices. */\n  @property() label = '';\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n          'progress-bar--rtl': this.localize.dir() === 'rtl'\n        })}\n        role=\"progressbar\"\n        title=${ifDefined(this.title)}\n        aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=${this.indeterminate ? 0 : this.value}\n      >\n        <div part=\"indicator\" class=\"progress-bar__indicator\" style=${styleMap({ width: `${this.value}%` })}>\n          ${!this.indeterminate ? html` <slot part=\"label\" class=\"progress-bar__label\"></slot> ` : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAE1B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAyBzB,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAEE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAGZ,iBAAQ;AAGP,yBAAgB;AAGhD,iBAAQ;AAAA;AAAA,EAEpB,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,+BAA+B,KAAK;AAAA,MACpC,qBAAqB,KAAK,SAAS,IAAI,MAAM;AAAA,IAC/C,CAAC,CAAC;AAAA;AAAA,gBAEM,UAAU,KAAK,KAAK,CAAC;AAAA,qBAChB,KAAK,MAAM,SAAS,IAAI,KAAK,QAAQ,KAAK,SAAS,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA,wBAGhE,KAAK,gBAAgB,IAAI,KAAK,KAAK;AAAA;AAAA,sEAEW,SAAS,EAAE,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC;AAAA,YAC/F,CAAC,KAAK,gBAAgB,iEAAiE,EAAE;AAAA;AAAA;AAAA;AAAA,EAInG;AACF;AAnCqB,eACZ,SAAyB,CAAC,0BAAiB,6BAAQ,kCAAY;AAI3B;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GALtB,eAKwB;AAGC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GARvB,eAQyB;AAGhC;AAAA,EAAX,SAAS;AAAA,GAXS,eAWP;",
+  "names": []
+}

package/dist/chunks/{chunk.ACTJFDNK.js → chunk.FSZIE7IO.js}

@@ -25,4 +25,4 @@ var divider_styles_default = css`
 export {
   divider_styles_default
 };
-//# sourceMappingURL=chunk.ACTJFDNK.js.map
+//# sourceMappingURL=chunk.FSZIE7IO.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/divider/divider.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    --color: var(--syn-panel-border-color);\n    --width: var(--syn-panel-border-width);\n    --spacing: var(--syn-spacing-medium);\n  }\n\n  :host(:not([vertical])) {\n    display: block;\n    border-top: solid var(--width) var(--color);\n    margin: var(--spacing) 0;\n  }\n\n  :host([vertical]) {\n    display: inline-block;\n    height: 100%;\n    border-left: solid var(--width) var(--color);\n    margin: 0 var(--spacing);\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,yBAAQ;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.F6HATFB6.js → chunk.FX5EOGYW.js}

@@ -1,32 +1,32 @@
 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 {
   checkbox_custom_styles_default
 } from "./chunk.IG3RCOB3.js";
 import {
   checkbox_styles_default
-} from "./chunk.NIYKFSPR.js";
+} from "./chunk.6OX2AX3Z.js";
 import {
   FormControlController
-} from "./chunk.JUJZBRXD.js";
+} from "./chunk.6EXC65JJ.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 {
   SynergyElement,
   component_styles_default
-} from "./chunk.NHFTJEYN.js";
+} from "./chunk.JAHDSTW6.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -259,4 +259,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.F6HATFB6.js.map
+//# sourceMappingURL=chunk.FX5EOGYW.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox/checkbox.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport customStyles from './checkbox.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private readonly formControlController = new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: string;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.emit('syn-change');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleInput() {\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n    this.formControlController.updateValidity();\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    //\n    // NOTE: we use a <div> around the label slot because of this Chrome bug.\n    //\n    // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n    //\n    return html`\n      <div\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-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"base\"\n          class=${classMap({\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--indeterminate': this.indeterminate,\n            'checkbox--small': this.size === 'small',\n            'checkbox--medium': this.size === 'medium',\n            'checkbox--large': this.size === 'large'\n          })}\n        >\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n            name=${this.name}\n            value=${ifDefined(this.value)}\n            .indeterminate=${live(this.indeterminate)}\n            .checked=${live(this.checked)}\n            .disabled=${this.disabled}\n            .required=${this.required}\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-describedby=\"help-text\"\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @invalid=${this.handleInvalid}\n            @blur=${this.handleBlur}\n            @focus=${this.handleFocus}\n          />\n\n          <span\n            part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n              ? ' control--indeterminate'\n              : ''}\"\n            class=\"checkbox__control\"\n          >\n            ${this.checked\n              ? html`\n                  <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n                `\n              : ''}\n            ${!this.checked && this.indeterminate\n              ? html`\n                  <syn-icon\n                    part=\"indeterminate-icon\"\n                    class=\"checkbox__indeterminate-icon\"\n                    library=\"system\"\n                    name=\"indeterminate\"\n                  ></syn-icon>\n                `\n              : ''}\n          </span>\n\n          <div part=\"label\" class=\"checkbox__label\">\n            <slot></slot>\n          </div>\n        </label>\n\n        <div\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n          class=\"form-control__help-text\"\n          id=\"help-text\"\n          part=\"form-control-help-text\"\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.SZFQAOEB.js → chunk.G72MXFHF.js}

@@ -1,16 +1,16 @@
 import {
   radio_button_styles_default
-} from "./chunk.QPK7SLOE.js";
+} from "./chunk.4BRJ5OJE.js";
 import {
   HasSlotController
-} from "./chunk.66WXVGAW.js";
+} from "./chunk.WVVQK5TE.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";
@@ -131,4 +131,4 @@ __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.SZFQAOEB.js.map
+//# sourceMappingURL=chunk.G72MXFHF.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-button/radio-button.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 { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './radio-button.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynRadioButton extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n\n  @query('.button') input: HTMLInputElement;\n  @query('.hidden-input') hiddenInput: HTMLInputElement;\n\n  @state() protected hasFocus = false;\n\n  /**\n   * @internal The radio button's checked state. This is exposed as an \"internal\" attribute so we can reflect it, making\n   * it easier to style in button groups.\n   */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string;\n\n  /** Disables the radio button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\n   * this attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style radio button with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.checked = true;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  /** Sets focus on the radio button. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio button. */\n  blur() {\n    this.input.blur();\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" role=\"presentation\">\n        <button\n          part=\"${`button${this.checked ? ' button--checked' : ''}`}\"\n          role=\"radio\"\n          aria-checked=\"${this.checked}\"\n          class=${classMap({\n            button: true,\n            'button--default': true,\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n            'button--checked': this.checked,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--outline': true,\n            'button--pill': this.pill,\n            'button--has-label': this.hasSlotController.test('[default]'),\n            'button--has-prefix': this.hasSlotController.test('prefix'),\n            'button--has-suffix': this.hasSlotController.test('suffix')\n          })}\n          aria-disabled=${this.disabled}\n          type=\"button\"\n          value=${ifDefined(this.value)}\n          tabindex=\"${this.checked ? '0' : '-1'}\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n        >\n          <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n          <slot part=\"label\" class=\"button__label\"></slot>\n          <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        </button>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,OAAO,aAAa;AA2BvC,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,UAAU,QAAQ;AAKvF,SAAU,WAAW;AAMc,mBAAU;AAMV,oBAAW;AAM1B,gBAAqC;AAGtB,gBAAO;AAAA;AAAA,EAEnD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,cAAc;AAAA,EAC1C;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,YAAY,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB;AAAA,IACF;AAEA,SAAK,UAAU;AAAA,EACjB;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,kBAGO,SAAS,KAAK,UAAU,qBAAqB,EAAE,EAAE;AAAA;AAAA,0BAEzC,KAAK,OAAO;AAAA,kBACpB,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,iBAAiB,KAAK,SAAS;AAAA,MAC/B,kBAAkB,KAAK,SAAS;AAAA,MAChC,iBAAiB,KAAK,SAAS;AAAA,MAC/B,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB;AAAA,MACnB,gBAAgB,KAAK;AAAA,MACrB,qBAAqB,KAAK,kBAAkB,KAAK,WAAW;AAAA,MAC5D,sBAAsB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MAC1D,sBAAsB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IAC5D,CAAC,CAAC;AAAA,0BACc,KAAK,QAAQ;AAAA;AAAA,kBAErB,UAAU,KAAK,KAAK,CAAC;AAAA,sBACjB,KAAK,UAAU,MAAM,IAAI;AAAA,kBAC7B,KAAK,UAAU;AAAA,mBACd,KAAK,WAAW;AAAA,mBAChB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjC;AACF;AA5GqB,eACZ,SAAyB,CAAC,0BAAiB,2BAAM;AAItC;AAAA,EAAjB,MAAM,SAAS;AAAA,GALG,eAKD;AACM;AAAA,EAAvB,MAAM,eAAe;AAAA,GANH,eAMK;AAEL;AAAA,EAAlB,MAAM;AAAA,GARY,eAQA;AAMyB;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAdvB,eAcyB;AAGhC;AAAA,EAAX,SAAS;AAAA,GAjBS,eAiBP;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApBvB,eAoByB;AAMf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA1BR,eA0BU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BvB,eA6ByB;AA4B5C;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAxD9B,eAyDnB;",
+  "names": []
+}

package/dist/chunks/{chunk.NF4C4WLY.js → chunk.GIVVS2TV.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.EPP5MGNJ.js";
+} from "./chunk.NDWE2XUA.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.NF4C4WLY.js.map
+//# sourceMappingURL=chunk.GIVVS2TV.js.map

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

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

package/dist/chunks/{chunk.IUB3EVHS.js → chunk.GQX42DIK.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.GNT5NIFP.js";
+} from "./chunk.JVXMHXUT.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.IUB3EVHS.js.map
+//# sourceMappingURL=chunk.GQX42DIK.js.map

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

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

package/dist/chunks/{chunk.A7IIJ2LL.js → chunk.GRVNUIP2.js}

@@ -15,4 +15,4 @@ var button_group_styles_default = css`
 export {
   button_group_styles_default
 };
-//# sourceMappingURL=chunk.A7IIJ2LL.js.map
+//# sourceMappingURL=chunk.GRVNUIP2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button-group/button-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    display: inline-block;\n  }\n\n  .button-group {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.Q2LICMN2.js → chunk.HGGCQORF.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk.XHWYGYMQ.js";
 import {
   tab_panel_styles_default
-} from "./chunk.YUHA7UIQ.js";
+} from "./chunk.HVXG4JG6.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";
@@ -62,4 +62,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.Q2LICMN2.js.map
+//# sourceMappingURL=chunk.HGGCQORF.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab-panel/tab-panel.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } 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 './tab-panel.styles.js';\nimport customStyles from './tab-panel.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://synergy.style/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */\nexport default class SynTabPanel extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly attrId = ++id;\n  private readonly componentId = `syn-tab-panel-${this.attrId}`;\n\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = '';\n\n  /** When true, the tab panel will be shown. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute('role', 'tabpanel');\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.setAttribute('aria-hidden', this.active ? 'false' : 'true');\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          'tab-panel': true,\n          'tab-panel--active': this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAQzB,IAAI,KAAK;AAcT,IAAqB,cAArB,cAAyC,eAAe;AAAA,EAAxD;AAAA;AAGE,SAAiB,SAAS,EAAE;AAC5B,SAAiB,cAAc,iBAAiB,KAAK,MAAM;AAG9B,gBAAO;AAGQ,kBAAS;AAAA;AAAA,EAErD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,KAAK,KAAK,GAAG,SAAS,IAAI,KAAK,KAAK,KAAK;AAC9C,SAAK,aAAa,QAAQ,UAAU;AAAA,EACtC;AAAA,EAGA,qBAAqB;AACnB,SAAK,aAAa,eAAe,KAAK,SAAS,UAAU,MAAM;AAAA,EACjE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,aAAa;AAAA,MACb,qBAAqB,KAAK;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA,EAGR;AACF;AAlCqB,YACZ,SAAyB,CAAC,0BAAiB,0BAAQ,+BAAY;AAMzC;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPR,YAOU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAVvB,YAUyB;AAS5C;AAAA,EADC,MAAM,QAAQ;AAAA,GAlBI,YAmBnB;",
+  "names": []
+}

package/dist/chunks/{chunk.RESDFE73.js → chunk.HLFSDS2W.js}

@@ -3,17 +3,17 @@ import {
 } from "./chunk.B6R3IVGO.js";
 import {
   tag_styles_default
-} from "./chunk.BGHK4NQA.js";
+} from "./chunk.6EPU7YUS.js";
 import {
   SynIconButton
-} from "./chunk.7BN75LQX.js";
+} from "./chunk.UNDLEHX2.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";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.RESDFE73.js.map
+//# sourceMappingURL=chunk.HLFSDS2W.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tag/tag.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property } from 'lit/decorators.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 './tag.styles.js';\nimport customStyles from './tag.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://synergy.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tag's content.\n *\n * @event syn-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\nexport default class SynTag extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon-button': SynIconButton };\n\n  private readonly localize = new LocalizeController(this);\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('syn-remove');\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          tag: true,\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifiers\n          'tag--removable': this.removable\n        })}\n      >\n        <slot part=\"content\" class=\"tag__content\"></slot>\n\n        ${this.removable\n          ? html`\n              <syn-icon-button\n                part=\"remove-button\"\n                exportparts=\"base:remove-button__base\"\n                name=\"x-lg\"\n                library=\"system\"\n                label=${this.localize.term('remove')}\n                class=\"tag__remove\"\n                @click=${this.handleRemoveClick}\n                tabindex=\"-1\"\n              ></syn-icon-button>\n            `\n          : ''}\n      </span>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAyBzB,IAAqB,SAArB,cAAoC,eAAe;AAAA,EAAnD;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAG1B,gBAAqC;AAGrC,qBAAY;AAAA;AAAA,EAEjC,oBAAoB;AAC1B,SAAK,KAAK,YAAY;AAAA,EACxB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,KAAK;AAAA;AAAA,MAGL,cAAc,KAAK,SAAS;AAAA,MAC5B,eAAe,KAAK,SAAS;AAAA,MAC7B,cAAc,KAAK,SAAS;AAAA;AAAA,MAG5B,kBAAkB,KAAK;AAAA,IACzB,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,UAIA,KAAK,YACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMY,KAAK,SAAS,KAAK,QAAQ,CAAC;AAAA;AAAA,yBAE3B,KAAK,iBAAiB;AAAA;AAAA;AAAA,gBAInC,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAnDqB,OACZ,SAAyB,CAAC,0BAAiB,oBAAQ,yBAAY;AADnD,OAEZ,eAAe,EAAE,mBAAmB,cAAc;AAK5B;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPR,OAOU;AAGA;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAVR,OAUU;",
+  "names": []
+}

package/dist/chunks/{chunk.GRPQ7TL2.js → chunk.HNULADIV.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.3VLVBVTP.js";
+} from "./chunk.I6444N6Y.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.GRPQ7TL2.js.map
+//# sourceMappingURL=chunk.HNULADIV.js.map

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

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

package/dist/chunks/{chunk.YUHA7UIQ.js → chunk.HVXG4JG6.js}

@@ -21,4 +21,4 @@ var tab_panel_styles_default = css`
 export {
   tab_panel_styles_default
 };
-//# sourceMappingURL=chunk.YUHA7UIQ.js.map
+//# sourceMappingURL=chunk.HVXG4JG6.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab-panel/tab-panel.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    --padding: 0;\n\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\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;",
+  "names": []
+}