@synergy-design-system/components 2.30.2 → 2.30.4

package/dist/chunks/{chunk.5BL4RVHI.js → chunk.AM4CD2E5.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.UUMXRZQH.js";
+} from "./chunk.7Y2NWCT3.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SynDialog;
@@ -9,4 +9,4 @@ SynDialog.define("syn-dialog");
 export {
   dialog_default
 };
-//# sourceMappingURL=chunk.5BL4RVHI.js.map
+//# sourceMappingURL=chunk.AM4CD2E5.js.map

package/dist/chunks/{chunk.MSQLDQBH.js → chunk.AMHWVTPZ.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.B6WN2G5V.js";
+} from "./chunk.QAEH7R3U.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.MSQLDQBH.js.map
+//# sourceMappingURL=chunk.AMHWVTPZ.js.map

package/dist/chunks/{chunk.XKQKPYTB.js → chunk.B7IE3QTD.js}

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

package/dist/chunks/{chunk.P6QZVA24.js → chunk.BDU6VEYE.js}

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

package/dist/chunks/{chunk.WABV7HP2.js → chunk.CWMN3RGF.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.SVQF57S5.js";
+} from "./chunk.J2SYEGGE.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.WABV7HP2.js.map
+//# sourceMappingURL=chunk.CWMN3RGF.js.map

package/dist/chunks/{chunk.HPFIPD65.js → chunk.D3JQ2TWU.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.XKQC62H5.js";
+} from "./chunk.ZP3B77TW.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.HPFIPD65.js.map
+//# sourceMappingURL=chunk.D3JQ2TWU.js.map

package/dist/chunks/{chunk.NIV4I3BO.js → chunk.DQFLAUMY.js}

@@ -1,6 +1,6 @@
 import {
   SynCard
-} from "./chunk.RVC3AMUR.js";
+} from "./chunk.RGIES44Z.js";
 
 // src/components/card/card.ts
 var card_default = SynCard;
@@ -9,4 +9,4 @@ SynCard.define("syn-card");
 export {
   card_default
 };
-//# sourceMappingURL=chunk.NIV4I3BO.js.map
+//# sourceMappingURL=chunk.DQFLAUMY.js.map

package/dist/chunks/{chunk.BZELMZLF.js → chunk.DTZ5GW6T.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SHCZO4KK.js";
 import {
   SynDivider
-} from "./chunk.M5PBGVOF.js";
+} from "./chunk.POX3RJRS.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -348,4 +348,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.BZELMZLF.js.map
+//# sourceMappingURL=chunk.DTZ5GW6T.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/nav-item/nav-item.component.ts"],
+  "sourcesContent": ["import { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { html, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport SynDivider from '../divider/divider.component.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './nav-item.styles.js';\n\n/**\n * @summary Flexible button / link component that can be used to quickly build navigations.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs\n * Takes one of 3 forms:\n * - button (default),\n * - link (overrides button if a 'href' is provided),\n * - or accordion (overrides all other if 'children' slot is defined).\n *\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n *\n * @event syn-show - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are hidden.\n *\n * @event syn-hide - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are shown.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @slot - The navigation item's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n * @slot children - Slot used to provide nested child navigation elements.\n * If provided, details and summary elements will be used.\n * A chevron will be shown on the right side regardless of the chevron property.\n *\n * @csspart base - The component's base wrapper including children.\n * @csspart children - The wrapper that holds the children\n * @csspart content-wrapper - The component's content wrapper.\n * @csspart content - The component's content excluding children.\n * @csspart current-indicator - The indicator used when current is set to true\n * @csspart chevron - The container that wraps the chevron.\n * @csspart details - The details element rendered when there are children available\n * @csspart divider - The components optional top divider.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n *\n * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.\n * @cssproperty --indentation-stepping - The amount of pixels each level will indent.\n * @cssproperty --display-children - Display property of the children. Defaults to \"contents\"\n */\nexport default class SynNavItem extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-divider': SynDivider,\n  };\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'children', 'prefix', 'suffix');\n\n  private resizeObserver: ResizeObserver;\n\n  private mutationObserver: MutationObserver;\n\n  /**\n   * The current focus state\n   */\n  @state() private hasFocus = false;\n\n  /**\n   * Only the prefix should be displayed\n   */\n  @state() private showPrefixOnly = false;\n\n  /**\n   * A nested nav-item is marked as current\n   */\n  @state() private currentMarkedChild = false;\n\n  /**\n   * The content area is multiline\n   */\n  @state() private isMultiLine = false;\n\n  /**\n   * Reference to the children slot\n   */\n  @query('slot[name=\"children\"]') childrenSlot: HTMLSlotElement;\n\n  /**\n   * Reference to the outermost button\n   */\n  @query('.nav-item') control: HTMLButtonElement | HTMLLinkElement | HTMLElement;\n\n  /**\n   * The navigation item's href target.\n   * If provided, the navigation item will use an anchor tag otherwise it will use a button tag.\n   *\n   * If the 'children' slot is provided, the navigation item will ignore the 'href' and use\n   * accordion behavior.\n   */\n  @property({ reflect: true, type: String }) href: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is present. */\n  @property() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * When using `href`, this attribute will map to the underlying link's `rel` attribute.\n   * Unlike regular links, the default is `noreferrer noopener` to prevent security exploits.\n   *\n   * However, if you're using `target` to point to a specific tab/window,\n   * this will prevent that from working correctly.\n   *\n   * You can remove or change the default value by setting the attribute\n   * to an empty string or a value of your choice, respectively.\n   */\n  @property() rel = 'noreferrer noopener';\n\n  /*\n   * Indicates that the navigation item is currently selected.\n   * The aria-current attribute is set to \"page\" on the host if true.\n   */\n  @property({ reflect: true, type: Boolean }) current = false;\n\n  /**\n   * Disables the navigation item.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /**\n   * The navigation item's orientation.\n   */\n  @property({ reflect: true, type: Boolean }) horizontal = false;\n\n  /**\n   * Appends a chevron to the right side of a navigation item.\n   * Only used if `horizontal` is false.\n   */\n  @property({ reflect: true, type: Boolean }) chevron = false;\n\n  /**\n   * Reflects HTML details element state and allows control from parent.\n   * Only used if `horizontal` is false and `children` is defined.\n   */\n  @property({ reflect: true, type: Boolean }) open = false;\n\n  /**\n   * Toggle to true to show a divider above the element.\n   * Only available when horizontal is false.\n   */\n  @property({ reflect: true, type: Boolean }) divider = false;\n\n  private isButton(): boolean {\n    return !this.href && !this.hasSlotController.test('children');\n  }\n\n  private isLink(): boolean {\n    return !!this.href && !this.hasSlotController.test('children');\n  }\n\n  private isAccordion(): boolean {\n    return this.hasSlotController.test('children');\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private getNavItemChildren(childrenSlot: HTMLSlotElement): SynNavItem[] {\n    return Array.from(\n      childrenSlot?.assignedElements({\n        flatten: true,\n      }) as HTMLElement[]\n      || [],\n    )\n      .map(slottedElement => (slottedElement.tagName.toLowerCase() === 'syn-nav-item' ? slottedElement as SynNavItem : Array.from(slottedElement.querySelectorAll<SynNavItem>(':scope > syn-nav-item'))))\n      .flat();\n  }\n\n  private getAllNestedNavItems(childrenSlot: HTMLSlotElement): SynNavItem[] {\n    const allNavItems = this.getNavItemChildren(childrenSlot);\n\n    const nestedNavItems = allNavItems\n      .map(item => item.getAllNestedNavItems(item.childrenSlot))\n      .flat();\n\n    return allNavItems.concat(nestedNavItems);\n  }\n\n  private handleCurrentMarkedChild() {\n    const sideNav = this.closest('syn-side-nav');\n\n    if (!this.open || !!sideNav?.rail) {\n      this.currentMarkedChild = this\n        .getAllNestedNavItems(this.childrenSlot)\n        .some(item => item.current);\n    }\n  }\n\n  private handleClickButton(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  private handleClickSummary(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (this.disabled) return;\n\n    if (this.open) {\n      this.hideDetails();\n    } else {\n      this.showDetails();\n    }\n  }\n\n  private hideDetails() {\n    this.open = false;\n    this.emit('syn-hide', {\n      cancelable: true,\n    });\n  }\n\n  private showDetails() {\n    this.open = true;\n    this.emit('syn-show', {\n      cancelable: true,\n    });\n  }\n\n  /**\n   * Automatically add the correct level of indentation for sub items if none is provided\n   */\n  private handleSlotChange() {\n    const computedStyle = getComputedStyle(this);\n    const lengthStyle = computedStyle.length;\n\n    // This workaround is needed for firefox.\n    // When the nav-item is used inside a custom-element with a custom-element in it\n    // (e.g syn-side-nav with integrated syn-drawer), the getComputedStyle property is not yet there\n    // Moving it in the next render cycle works.\n    // Probably related to the firefox special behavior. See: https://caniuse.com/mdn-api_window_getcomputedstyle\n    if (lengthStyle === 0) {\n      setTimeout(() => {\n        this.handleSlotChange();\n      });\n      return;\n    }\n\n    this.handleCurrentMarkedChild();\n\n    // Use the current level of the component\n    const level = computedStyle.getPropertyValue('--indentation');\n\n    // We allow at most 3 levels\n    const nextLevel = Math.min(parseInt(level, 10) + 1, 2);\n\n    this.getNavItemChildren(this.childrenSlot)\n      .forEach(item => {\n        item.style.setProperty('--indentation', nextLevel.toFixed(0));\n      });\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleWidth(entries: ResizeObserverEntry[]) {\n    entries.forEach(entry => {\n      if (entry.contentRect.width < 100) {\n        const hasPrefix = this.hasSlotController.test('prefix');\n        this.showPrefixOnly = hasPrefix;\n      } else {\n        this.showPrefixOnly = false;\n      }\n\n      if (entry.contentRect.height > 48) {\n        this.isMultiLine = true;\n      } else {\n        this.isMultiLine = false;\n      }\n    });\n  }\n\n  // Make sure the resize observer is disconnected when the horizontal property is set to true\n  // In this case we, never want it to use prefix only mode\n  @watch('horizontal', { waitUntilFirstUpdate: true })\n  handleHorizontalChange() {\n    if (this.horizontal) {\n      this.resizeObserver.disconnect();\n    } else {\n      this.resizeObserver.observe(this);\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver((entries) => this.handleWidth(entries));\n    if (!this.horizontal) {\n      this.resizeObserver.observe(this);\n    }\n  }\n\n  firstUpdated(_changedProperties: PropertyValues) {\n    super.firstUpdated(_changedProperties);\n    this.mutationObserver = new MutationObserver(() => {\n      if (this.childrenSlot) {\n        this.handleCurrentMarkedChild();\n      }\n    });\n\n    this.mutationObserver.observe(this, {\n      attributeFilter: ['current', 'open'],\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n  }\n\n  /**\n   * Removes focus from the button.\n   */\n  blur() {\n    this.control.blur();\n  }\n\n  /**\n   * Simulates a click on the nav-items button, link or summary.\n   */\n  click() {\n    this.control.click();\n  }\n\n  /**\n   * Sets focus on the nav-item\n   */\n  focus(options?: FocusOptions) {\n    this.control.focus(options);\n  }\n\n  // eslint-disable-next-line complexity\n  render() {\n    const isButton = this.isButton();\n    const isLink = this.isLink();\n    const isAccordion = this.isAccordion();\n\n    const sideNav = this.closest('syn-side-nav');\n\n    const showCurrentIndicatorForNested = (this.currentMarkedChild && !this.open)\n      || (this.currentMarkedChild && this.open && !!sideNav?.rail && !sideNav?.open);\n\n    // Defines the initial tag to use for the root component\n    let tag = literal`button`;\n    if (isAccordion) tag = literal`summary`;\n    else if (isLink) tag = literal`a`;\n\n    const hasChevron = (this.chevron || isAccordion) && !this.horizontal;\n\n    // Define the click method to use\n    let clickAction;\n    if (isAccordion) {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      clickAction = this.handleClickSummary;\n    } else if (isButton) {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      clickAction = this.handleClickButton;\n    }\n\n    /* eslint-disable lit/no-invalid-html */\n    /* eslint-disable lit/binding-positions */\n    /* eslint-disable @typescript-eslint/unbound-method */\n    const root = html`\n      <${tag}\n        aria-controls=${ifDefined(isAccordion ? 'navigation-item-details' : undefined)}\n        aria-current=${ifDefined(this.current ? 'page' : undefined)}\n        aria-disabled=${this.disabled}\n        @blur=${this.handleBlur}\n        class=${classMap({\n          'nav-item': true,\n          'nav-item--current': this.current || showCurrentIndicatorForNested,\n          'nav-item--disabled': this.disabled,\n          'nav-item--focused': this.hasFocus,\n          'nav-item--has-content': this.hasSlotController.test('[default]'),\n          'nav-item--has-prefix': this.hasSlotController.test('prefix'),\n          'nav-item--has-suffix': this.hasSlotController.test('suffix'),\n          'nav-item--horizontal': this.horizontal,\n          'nav-item--is-link': isLink,\n          'nav-item--multi-line': this.isMultiLine,\n          'nav-item--show-prefix-only': this.showPrefixOnly,\n          'nav-item--vertical': !this.horizontal,\n          'nav-item-is-accordion': isAccordion,\n        })}\n        @click=${clickAction}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        @focus=${this.handleFocus}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        part=\"base\"\n        role=${isLink ? 'link' : 'button'}\n        rel=${ifDefined(isLink ? this.rel : undefined)}\n        tabindex=${this.disabled ? '-1' : '0'}\n        target=${ifDefined(isLink ? this.target : undefined)}\n      >\n\n        ${this.divider && !this.horizontal\n          ? html`<syn-divider class=\"divider\" part=\"divider\"></syn-divider>`\n          : ''\n        }\n\n        <div class=\"nav-item__content\" part=\"content-wrapper\">\n          <slot name=\"prefix\" part=\"prefix\" class=\"nav-item__prefix\"></slot>\n\n          <div part=\"content-container\" class=\"nav-item__content-container\">\n            <slot part=\"content\"></slot>\n          </div>\n\n          <slot name=\"suffix\" part=\"suffix\" class=\"nav-item__suffix\"></slot>\n\n          ${hasChevron ? html`\n            <syn-icon\n              class=${classMap({\n                'nav-item__chevron': true,\n                'nav-item__chevron-open': this.open,\n              })}\n              color=\"currentColor\"\n              library=\"system\"\n              name=\"chevron-down\"\n              part=\"chevron\"\n            /></syn-icon>`\n          : ''}\n\n          <div\n            class=${classMap({\n              'current-indicator': true,\n              'current-indicator--disabled': this.disabled,\n              'current-indicator--visible': this.current || showCurrentIndicatorForNested,\n            })}\n            part=\"current-indicator\"\n          >\n          </div>\n        </div>\n\n      </${tag}>\n    `;\n    /* eslint-enable lit/no-invalid-html */\n    /* eslint-enable lit/binding-positions */\n\n    return isAccordion ? html`\n      <details\n        id=\"navigation-item-details\"\n        ?open=${this.open}\n        part=\"details\"\n      >\n        ${root}\n        <slot\n          class=\"children\"\n          name=\"children\"\n          part=\"children\"\n          @slotchange=${this.handleSlotChange}\n        ></slot>\n      </details>\n    ` : root;\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.4KYHVE5E.js → chunk.E65WRZUZ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.4KYHVE5E.js.map
+//# sourceMappingURL=chunk.E65WRZUZ.js.map

package/dist/chunks/{chunk.B5NEBCX6.js → chunk.EEDY654D.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.YAARHVTM.js";
+} from "./chunk.I5CHSTMM.js";
 
 // src/components/tab-panel/tab-panel.ts
 var tab_panel_default = SynTabPanel;
@@ -9,4 +9,4 @@ SynTabPanel.define("syn-tab-panel");
 export {
   tab_panel_default
 };
-//# sourceMappingURL=chunk.B5NEBCX6.js.map
+//# sourceMappingURL=chunk.EEDY654D.js.map

package/dist/chunks/{chunk.NV5NAKG7.js → chunk.EFTA2WH7.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.Y7CXPPVU.js";
+} from "./chunk.F6RNX3ZO.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.NV5NAKG7.js.map
+//# sourceMappingURL=chunk.EFTA2WH7.js.map

package/dist/chunks/{chunk.SVSSWAPO.js → chunk.EFVTKJMU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -160,4 +160,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.SVSSWAPO.js.map
+//# sourceMappingURL=chunk.EFVTKJMU.js.map

package/dist/chunks/chunk.EFVTKJMU.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 { state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { SynAttributesChangedEvent } from '../../events/syn-attributes-changed.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-design-system.github.io/?path=/docs/components-syn-menu--docs\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  @state() hasMenuItemsWithCheckmarks = false;\n\n  private handleUpdateCheckmarks(items: SynMenuItem[]) {\n    // #368: Treat a menu as having checkmarks if it has any checkboxes or items with loading states\n    // The loading indicator has to be checked as well, as it's specially placed over the check mark\n    this.hasMenuItemsWithCheckmarks = items.some(item => item.type === 'checkbox' || item.loading);  \n  }\n\n  private updateCheckMarksByChildPropChange = (e: SynAttributesChangedEvent) => {\n    e.stopImmediatePropagation();\n    this.handleUpdateCheckmarks(this.getAllItems());\n  };\n  \n  disconnectedCallback() {\n    this.removeEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n    this.addEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu');\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) 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    this.handleUpdateCheckmarks(items);\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        class=${classMap({\n          'menu--no-checkmarks': !this.hasMenuItemsWithCheckmarks,\n        })}\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.Y7CXPPVU.js → chunk.F6RNX3ZO.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.Y7CXPPVU.js.map
+//# sourceMappingURL=chunk.F6RNX3ZO.js.map

package/dist/chunks/{chunk.Y7CXPPVU.js.map → chunk.F6RNX3ZO.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/range-tick/range-tick.component.ts"],
-  "sourcesContent": ["import type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './range-tick.styles.js';\n\n/**\n * @summary Ticks visually improve positioning on range sliders.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @slot - The tick's label\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label.\n * @csspart line - The component's tick line.\n *\n * @cssproperty --tick-height - The height of the tick marker.\n * @cssproperty --tick-label-top - The top offset of the tick label.\n */\nexport default class SynRangeTick extends SynergyElement {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    styles,\n  ];\n\n  /**\n   * Whether the tick should be shown as a subdivision.\n   */\n  @property({ reflect: true, type: Boolean }) subdivision = false;\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          tick: true,\n          'tick--subdivision': this.subdivision,\n        })}\n        part=\"base\"\n      >\n        <div class=\"tick-line\" part=\"line\"></div>\n        <div class=\"tick-label\" part=\"label\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "sourcesContent": ["import type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './range-tick.styles.js';\n\n/**\n * @summary Ticks visually improve positioning on range sliders.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs\n * @status stable\n *\n * @slot - The tick's label\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label.\n * @csspart line - The component's tick line.\n *\n * @cssproperty --tick-height - The height of the tick marker.\n * @cssproperty --tick-label-top - The top offset of the tick label.\n */\nexport default class SynRangeTick extends SynergyElement {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    styles,\n  ];\n\n  /**\n   * Whether the tick should be shown as a subdivision.\n   */\n  @property({ reflect: true, type: Boolean }) subdivision = false;\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          tick: true,\n          'tick--subdivision': this.subdivision,\n        })}\n        part=\"base\"\n      >\n        <div class=\"tick-line\" part=\"line\"></div>\n        <div class=\"tick-label\" part=\"label\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
   "mappings": ";;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAmBzB,IAAqB,eAArB,cAA0C,eAAe;AAAA,EAAzD;AAAA;AAS8C,uBAAc;AAAA;AAAA,EAE1D,SAAS;AACP,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,qBAAqB,KAAK;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASR;AACF;AA3BqB,aACZ,SAAyB;AAAA,EAC9B;AAAA,EACA;AACF;AAK4C;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GATvB,aASyB;",
   "names": []
 }

package/dist/chunks/{chunk.NNHI3TAI.js → chunk.FJ2ARLVU.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.43YNZAWL.js";
 import {
   SynIconButton
-} from "./chunk.OW43BAXS.js";
+} from "./chunk.LZYNETOH.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.NNHI3TAI.js.map
+//# sourceMappingURL=chunk.FJ2ARLVU.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab/tab.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } 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 SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tab.styles.js';\nimport customStyles from './tab.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tab's label.\n *\n * @event syn-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */\nexport default class SynTab 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  private readonly attrId = ++id;\n  private readonly componentId = `syn-tab-${this.attrId}`;\n\n  @query('.tab') tab: HTMLElement;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = '';\n\n  /** Draws the tab in an active state. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Makes the tab closable and shows a close button. */\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * @internal\n   * Need to wrap in a `@property()` otherwise CustomElement throws a \"The result must not have attributes\" runtime error.\n   */\n  @property({ type: Number, reflect: true }) tabIndex = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n  }\n\n  private handleCloseClick(event: Event) {\n    event.stopPropagation();\n    this.emit('syn-close');\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n    if (this.disabled && !this.active) {\n      this.tabIndex = -1;\n    } else {\n      this.tabIndex = 0;\n    }\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          tab: true,\n          'tab--active': this.active,\n          'tab--closable': this.closable,\n          'tab--disabled': this.disabled\n        })}\n      >\n        <slot></slot>\n        ${this.closable\n          ? html`\n              <syn-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                name=\"x-lg\"\n                library=\"system\"\n                label=${this.localize.term('close')}\n                class=\"tab__close-button\"\n                @click=${this.handleCloseClick}\n                tabindex=\"-1\"\n              ></syn-icon-button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-tab': SynTab;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,UAAU,aAAa;AAShC,IAAI,KAAK;AAkBT,IAAqB,SAArB,cAAoC,eAAe;AAAA,EAAnD;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAEvD,SAAiB,SAAS,EAAE;AAC5B,SAAiB,cAAc,WAAW,KAAK,MAAM;AAKxB,iBAAQ;AAGO,kBAAS;AAGT,oBAAW;AAGX,oBAAW;AAMZ,oBAAW;AAAA;AAAA,EAEtD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEQ,iBAAiB,OAAc;AACrC,UAAM,gBAAgB;AACtB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,qBAAqB;AACnB,SAAK,aAAa,iBAAiB,KAAK,SAAS,SAAS,OAAO;AAAA,EACnE;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAEnE,QAAI,KAAK,YAAY,CAAC,KAAK,QAAQ;AACjC,WAAK,WAAW;AAAA,IAClB,OAAO;AACL,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,SAAS;AAEP,SAAK,KAAK,KAAK,GAAG,SAAS,IAAI,KAAK,KAAK,KAAK;AAE9C,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,KAAK;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,iBAAiB,KAAK;AAAA,MACtB,iBAAiB,KAAK;AAAA,IACxB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGA,KAAK,WACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMY,KAAK,SAAS,KAAK,OAAO,CAAC;AAAA;AAAA,yBAE1B,KAAK,gBAAgB;AAAA;AAAA;AAAA,gBAIlC,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAvFqB,OACZ,SAAyB,CAAC,0BAAiB,oBAAQ,yBAAY;AADnD,OAEZ,eAAe,EAAE,mBAAmB,cAAc;AAO1C;AAAA,EAAd,MAAM,MAAM;AAAA,GATM,OASJ;AAGc;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAZR,OAYU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,OAeyB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlBvB,OAkByB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBvB,OAqByB;AAMD;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BtB,OA2BwB;AAa3C;AAAA,EADC,MAAM,QAAQ;AAAA,GAvCI,OAwCnB;AAKA;AAAA,EADC,MAAM,UAAU;AAAA,GA5CE,OA6CnB;",
+  "names": []
+}

package/dist/chunks/{chunk.5CCH7OXU.js → chunk.FMMNG7VN.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.5SV32DIR.js";
+} from "./chunk.W74T3FY5.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.5CCH7OXU.js.map
+//# sourceMappingURL=chunk.FMMNG7VN.js.map

package/dist/chunks/{chunk.AAL3KZPB.js → chunk.GIRJTNXT.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.AAL3KZPB.js.map
+//# sourceMappingURL=chunk.GIRJTNXT.js.map

package/dist/chunks/{chunk.AAL3KZPB.js.map → chunk.GIRJTNXT.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/badge/badge.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 componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport styles from './badge.styles.js';\nimport customStyles from './badge.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy.style/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */\n@enableDefaultSettings('SynBadge')\nexport default class SynBadge extends SynergyElement {\n  \n  private readonly localize = new LocalizeController(this);\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  /** The badge's theme variant. */\n  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          badge: true,\n          'badge--primary': this.variant === 'primary',\n          'badge--success': this.variant === 'success',\n          'badge--neutral': this.variant === 'neutral',\n          'badge--warning': this.variant === 'warning',\n          'badge--danger': this.variant === 'danger',\n        })}\n        role=\"status\"\n      >\n        <slot>\n          <span class=\"visually-hidden\">\n            ${this.localize.term(\n              (this.variant === 'primary' || this.variant === 'neutral')\n                ? 'notification'\n                : this.variant\n              )}\n          </span>\n        </slot>\n      </span>\n    `;\n  }\n}\n"],
+  "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 componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport styles from './badge.styles.js';\nimport customStyles from './badge.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */\n@enableDefaultSettings('SynBadge')\nexport default class SynBadge extends SynergyElement {\n  \n  private readonly localize = new LocalizeController(this);\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  /** The badge's theme variant. */\n  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          badge: true,\n          'badge--primary': this.variant === 'primary',\n          'badge--success': this.variant === 'success',\n          'badge--neutral': this.variant === 'neutral',\n          'badge--warning': this.variant === 'warning',\n          'badge--danger': this.variant === 'danger',\n        })}\n        role=\"status\"\n      >\n        <slot>\n          <span class=\"visually-hidden\">\n            ${this.localize.term(\n              (this.variant === 'primary' || this.variant === 'neutral')\n                ? 'notification'\n                : this.variant\n              )}\n          </span>\n        </slot>\n      </span>\n    `;\n  }\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAoBzB,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAArD;AAAA;AAEE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAI1B,mBAAoE;AAAA;AAAA,EAEjG,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,kBAAkB,KAAK,YAAY;AAAA,MACnC,kBAAkB,KAAK,YAAY;AAAA,MACnC,kBAAkB,KAAK,YAAY;AAAA,MACnC,kBAAkB,KAAK,YAAY;AAAA,MACnC,iBAAiB,KAAK,YAAY;AAAA,IACpC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,cAKI,KAAK,SAAS;AAAA,MACb,KAAK,YAAY,aAAa,KAAK,YAAY,YAC5C,iBACA,KAAK;AAAA,IACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb;AACF;AAlCqB,SAGZ,SAAyB,CAAC,0BAAiB,sBAAQ,2BAAY;AAGzC;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GANR,SAMU;AANV,WAArB;AAAA,EADC,sBAAsB,UAAU;AAAA,GACZ;",
   "names": []
 }

package/dist/chunks/{chunk.UTQI2VQ2.js → chunk.GVUUQ2W4.js}

@@ -6,10 +6,10 @@ import {
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.6WWQYPMH.js";
+} from "./chunk.PS4UOADD.js";
 import {
   SynAlert
-} from "./chunk.OM4E6PT6.js";
+} from "./chunk.JFBMMGIE.js";
 import {
   enableDefaultSettings
 } from "./chunk.NUIJATJY.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -330,4 +330,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.UTQI2VQ2.js.map
+//# sourceMappingURL=chunk.GVUUQ2W4.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/validate/validate.component.ts"],
+  "sourcesContent": ["import type { CSSResultGroup, PropertyValues } from 'lit';\nimport { html } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { watch } from '../../internal/watch.js';\nimport SynAlert from '../alert/alert.component.js';\nimport {\n  getEventNameForElement,\n  isBlurEvent,\n  isInvalidEvent,\n  normalizeEventAttribute,\n} from './utility.js';\nimport styles from './validate.styles.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Validate provides form field validation messages in a unified way.\n * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and showing the validation message in a consistent, user defined way.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs\n * @dependency syn-alert\n *\n * @slot - The form field that should be validated.\n * Avoid slotting in more than one element, as subsequent ones will be ignored.\n *\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the form field.\n * @csspart alert - The syn-alert that is shown when the variant is set to \"inline\".\n * @csspart alert__base - The container that wraps the alert.\n * @csspart alert__message - The container that wraps the alert message.\n * @csspart alert__icon - The container that wraps the alert icon.\n */\n@enableDefaultSettings('SynValidate')\nexport default class SynValidate extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-alert': SynAlert,\n  };\n\n  controller = new AbortController();\n\n  observer: MutationObserver;\n\n  @queryAssignedElements() private slottedChildren: HTMLElement[];\n\n  @state() validationMessage = '';\n\n  @state() eagerFirstMount = true;\n\n  @state() isInternalTriggeredInvalid = false;\n\n  @state() isValid = true;\n\n  /**\n   * The variant that should be used to show validation alerts.\n   *\n   * The following variants are supported:\n   * - **native** (default): Uses the native browser validation, usually a browser tooltip.\n   * - **inline**: Show the validation message underneath the element, using a `<syn-alert>`\n   */\n  @property({ reflect: true }) variant: 'native' | 'inline' = 'native';\n\n  /** Do not show the error icon when using the inline variant validation */\n  @property({ attribute: 'hide-icon', reflect: true, type: Boolean }) hideIcon = false;\n\n  /**\n   * Defines the events that trigger the validation.\n   * `invalid` will always automatically be included.\n   * You may also use the `live` keyword to validate on every input change.\n   * `live` will make sure to listen to the `invalid`, `input` and `blur` events.\n   *\n   * Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n   * and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.\n   *\n   * @example ```html\n   * <!-- Validate on invalid and change events (invalid, change) -->\n   * <syn-validate on=\"invalid change\"></syn-validate>\n   *\n   * <!-- Validate on live events (invalid, blur, input)-->\n   * <syn-validate on=\"live\"></syn-validate>\n   *\n   * <!-- Validate on live and custom events (invalid, blur, input, focus, change) -->\n   * <syn-validate on=\"live focus change\"></syn-validate>\n   * ```\n   */\n  @property({ reflect: true }) on: string = '';\n\n  /**\n   * Custom validation message to be displayed when the input is invalid.\n   * Will override the default browser validation message.\n   * Set to an empty string to reset the validation message.\n   */\n  @property({ attribute: 'custom-validation-message', type: String }) customValidationMessage = '';\n\n  /**\n   * Set this to true to validate the input immediately when it is rendered.\n   * Best used with a `variant` of `inline`.\n   * When setting eager, the input will not be focused automatically.\n   *\n   * When using a `variant` of `native` the browser will focus\n   * the last eager field as it is using a tooltip.\n   * In this case it is better to just provide one eager field.\n   */\n  @property({ type: Boolean }) eager = false;\n\n  // Automatically refresh all event listeners when the on property changes.\n  @watch('on', { waitUntilFirstUpdate: true })\n  handleListenerChange() {\n    this.updateEvents();\n  }\n\n  @watch('eager', { waitUntilFirstUpdate: false })\n  async handleEagerChange() {\n    if (this.eager) {\n      const input = this.getInput();\n      await this.updateComplete;\n      input?.reportValidity();\n      this.eagerFirstMount = true;\n    } else {\n      this.eagerFirstMount = false;\n    }\n  }\n\n  // Synchronize the validation message on the wrapped input with the custom message\n  @watch('customValidationMessage', { waitUntilFirstUpdate: true })\n  handleCustomValidationMessageChange() {\n    const input = this.getInput();\n    if (input) {\n      this.setCustomValidationMessage(input);\n      this.setValidationMessage(input);\n    }\n  }\n\n  /**\n   * Returns the validity state of the input component.\n   * `true` for valid and `false` for invalid.\n   */\n  getValidity() {\n    return this.isValid;\n  }\n\n  /**\n   * Get the input element to validate. Defined as the first slotted element\n   * @returns The input element or undefined if not found\n   */\n  private getInput() {\n    const input = this.slottedChildren[0];\n    return input ? input as HTMLInputElement : undefined;\n  }\n\n  /**\n   * Get the event names to listen for.\n   * If the input is a synergy element, will use syn- prefixes.\n   * @returns The event names to listen for\n   */\n  // eslint-disable-next-line complexity\n  private getUsedEventNames() {\n    const input = this.getInput();\n\n    // If there is no input, skip before doing any harm\n    if (!input) {\n      return [];\n    }\n\n    // Make sure to always use an array of events\n    // This is needed because on may be a special value like \"live\"\n    const on = normalizeEventAttribute(this.on);\n\n    // Filter makes sure to remove empty values, e.g.\n    // <syn-validate on=\"\"></syn-validate>\n    const [...events] = on.filter(Boolean);\n\n    // Make sure to always have an invalid event\n    if (!events.includes('invalid')) {\n      events.push('invalid');\n    }\n\n    // Special handling for the live keyword:\n    // live always means on input and blur\n    if (events.includes('live')) {\n      events.push('input');\n      events.push('blur');\n    }\n\n    // Make sure to remove duplicated events and the live property\n    // and map the events to the correct event names\n    return Array.from(new Set(\n      events\n        .filter(e => e !== 'live')\n        .map(e => getEventNameForElement(input, e)),\n    ));\n  }\n\n  /**\n   * Update the events on the input element.\n   */\n  private updateEvents() {\n    this.controller.abort();\n    this.controller = new AbortController();\n    const input = this.getInput();\n\n    if (!input) {\n      return;\n    }\n\n    const events = this.getUsedEventNames();\n    events.forEach(eventName => {\n      input.addEventListener(eventName, this.validate, {\n        capture: isInvalidEvent(eventName),\n        signal: this.controller.signal,\n      });\n    });\n\n    // If the change event is not included,\n    // make sure to attach a custom listener that resets the validation message\n    // This is needed as the custom message may be set on change\n    const usedChangeEvent = getEventNameForElement(input, 'change');\n    if (!events.includes(usedChangeEvent)) {\n      input.addEventListener(usedChangeEvent, this.internalRevalidate, {\n        signal: this.controller.signal,\n      });\n    }\n  }\n\n  private setValidationMessage(input: HTMLInputElement) {\n    const { customValidationMessage } = this;\n    const validationMessage = customValidationMessage || input.validationMessage;\n    this.validationMessage = validationMessage;\n  }\n\n  /**\n   * Set the custom validation message to the input. This will make sure to either:\n   * - use the custom message if one is set or\n   * - use the default message if the custom message is empty\n   */\n  private setCustomValidationMessage(input: HTMLInputElement) {\n    // Set the custom validation message on the input only once, when the customValidationMessage\n    // is changed. Otherwise there could be problems with `variant=\"native\"` and `on=\"live\"` or\n    //  `on=\"blur\"`, because the browser popup will never disappear even if clicking somewhere else.\n    input.setCustomValidity(this.customValidationMessage);\n  }\n\n  /**\n   * Set the validation message from the input element\n   * @param e The event that was received\n   */\n  private internalRevalidate = (e: Event) => {\n    const input = e.currentTarget as HTMLInputElement;\n    if (input.validity?.valid) {\n      this.validationMessage = '';\n    }\n  };\n\n  /**\n   * Handle the blur event during validation\n   */\n  // eslint-disable-next-line class-methods-use-this\n  private handleFocus(input: HTMLInputElement) {\n    const activeElement = document.activeElement! as HTMLInputElement;\n    const activeElementIsWrapped = activeElement.closest('syn-validate');\n\n    if (!activeElement.validity?.valid && activeElementIsWrapped) {\n      // The active element is invalid do not scroll\n      return;\n    }\n\n    input.scrollIntoView({ block: 'nearest' });\n    input.focus();\n  }\n\n  /**\n   * Triggers a validation run, showing the validation message if needed.\n   */\n  // eslint-disable-next-line complexity\n  private validate = (e: Event) => {\n    // Make sure to stop the validate component from going into an endless cycle of triggering\n    if (isInvalidEvent(e.type) && this.variant === 'native' && this.isInternalTriggeredInvalid === true) {\n      this.isInternalTriggeredInvalid = false;\n      return;\n    }\n\n    // Make sure to always prevent the invalid event when not using native validation\n    if (isInvalidEvent(e.type) && this.variant !== 'native') {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n\n    const input = e.currentTarget as HTMLInputElement;\n    this.isValid = input.validity?.valid;\n\n    // When we are using eager, make sure to skip focus on the first mount\n    if (this.eager && this.eagerFirstMount) {\n      this.eagerFirstMount = false;\n      this.setValidationMessage(input);\n      return;\n    }\n\n    // If the active element that has focus is placed in a validate component,\n    // make sure to not loose focus.\n    if (!this.isValid && !isBlurEvent(e.type)) {\n      this.handleFocus(input);\n    }\n\n    this.setValidationMessage(input);\n\n    // Trigger reportValidity when using native validation, so the browser popup is also shown\n    // for other events than `invalid`. All events except the blur event, should trigger this.\n    if (!isBlurEvent(e.type) && this.variant === 'native') {\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.updateComplete.then(() => {\n        this.isInternalTriggeredInvalid = true;\n        input.reportValidity();\n      });\n    }\n  };\n\n  async firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.updateEvents();\n\n    // #713: Make sure to set the custom validation message on mount\n    // When we have a custom element, we need to wait for it to be ready!\n    const input = this.getInput();\n\n    if (this.customValidationMessage) {\n      if (input instanceof SynergyElement) {\n        await input.updateComplete;\n      }\n      input?.setCustomValidity(this.customValidationMessage);\n    }\n\n    // Make sure to run validation on mount if eager is set\n    if (this.eager) {\n      await this.updateComplete;\n      this.isValid = input?.validity?.valid ?? false;\n      input?.reportValidity();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // #717: Make sure to remove to rerun validation when\n    // disabled or readonly properties change on the input\n    this.observer = new MutationObserver(entries => {\n      const input = this.getInput();\n\n      if (!input) {\n        return;\n      }\n\n      const hasDisabledOrReadonly = entries\n        // Only check for changes on the input element\n        .filter(({ target }) => target === input)\n        // Check if the input is disabled or readonly\n        .every(entry => {\n          const target = entry.target as HTMLInputElement;\n          return target.hasAttribute('disabled') || target.hasAttribute('readonly');\n        });\n\n      if (hasDisabledOrReadonly) {\n        this.isValid = true;\n        this.validationMessage = '';\n      } else {\n        // When using a synergy element, we need to check the validity after the element is updated,\n        // as we cannot rely on the validity state of the element itself.\n        // Unfortunately, this depends on used browser :(.\n        const waitForPromise = input instanceof SynergyElement\n          ? input.updateComplete\n          : Promise.resolve();\n\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        waitForPromise.then(() => {\n          this.isValid = input?.validity?.valid ?? false;\n          this.validationMessage = input?.validationMessage ?? '';\n        });\n      }\n    });\n\n    this.observer.observe(this, {\n      attributeFilter: ['disabled', 'readonly'],\n      attributes: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.controller.abort();\n    this?.observer?.disconnect();\n  }\n\n  private renderInlineValidation() {\n    if (this.variant !== 'inline' || !this.validationMessage) {\n      return '';\n    }\n\n    return html`\n      <syn-alert\n        open\n        exportparts=\"base:alert__base,message:alert__message,icon:alert__icon\"\n        part=\"alert\"\n        variant=\"danger\"\n      >\n        ${!this.hideIcon\n          ? html`<syn-icon slot=\"icon\" name=\"error\" library=\"system\"></syn-icon>`\n          : ''\n        }\n        ${this.validationMessage}\n      </syn-alert>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"validate\"\n        part=\"base\"\n      >\n        <slot\n          class=\"validate__input-wrapper\"\n          part=\"input-wrapper\"\n        ></slot>\n        \n        ${this.renderInlineValidation()}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.6RF44NIZ.js → chunk.H7UCBY57.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.5T3OGIGW.js";
 import {
   icon_default
-} from "./chunk.A6S64XOS.js";
+} from "./chunk.ADBSYBKF.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -184,4 +184,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.6RF44NIZ.js.map
+//# sourceMappingURL=chunk.H7UCBY57.js.map

package/dist/chunks/{chunk.ZQ5BS2TM.js → chunk.HM44E4PX.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.AERTEAG5.js";
 import {
   FormControlController
-} from "./chunk.AMIQC3O7.js";
+} from "./chunk.OLRA37R5.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.4HHHVPCU.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -256,7 +256,7 @@ var SynTextarea = class extends SynergyElement {
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
             ></textarea>
-            <!-- This "adjuster" exists to prevent layout shifting. https://github.com/synergy-design-system/synergy/issues/2180 -->
+            <!-- This "adjuster" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->
             <div part="textarea-adjuster" class="textarea__size-adjuster" ?hidden=${this.resize !== "auto"}></div>
           </div>
         </div>
@@ -375,4 +375,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.ZQ5BS2TM.js.map
+//# sourceMappingURL=chunk.HM44E4PX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/textarea/textarea.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './textarea.styles.js';\nimport customStyles from './textarea.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */\n@enableDefaultSettings('SynTextarea')\nexport default class SynTextarea extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n  private resizeObserver: ResizeObserver;\n\n  @query('.textarea__control') input: HTMLTextAreaElement;\n  @query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;\n\n  @state() private hasFocus = false;\n  @property({ reflect: true }) title = ''; // make reactive to pass through\n\n  /** The name of the textarea, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the textarea, submitted as a name/value pair with form data. */\n  @property() value = '';\n\n  /** The textarea's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = '';\n\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Disables the textarea. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the textarea a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @property({ type: Number }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @property({ type: Number }) maxlength: number;\n\n  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n  @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n  /** Indicates whether the browser's autocorrect feature is on or off. */\n  @property() autocorrect: string;\n\n  /**\n   * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n   * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n   */\n  @property() autocomplete: string;\n\n  /** Indicates that the input should receive focus on page load. */\n  @property({ type: Boolean }) autofocus: boolean;\n\n  /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n  @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /** Enables spell checking on the textarea. */\n  @property({\n    type: Boolean,\n    converter: {\n      // Allow \"true|false\" attribute values but keep the property boolean\n      fromAttribute: value => (!value || value === 'false' ? false : true),\n      toAttribute: value => (value ? 'true' : 'false')\n    }\n  })\n  spellcheck = true;\n\n  /**\n   * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n   * keyboard on supportive devices.\n   */\n  @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n    this.updateComplete.then(() => {\n      this.setTextareaHeight();\n      this.resizeObserver.observe(this.input);\n    });\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.input) {\n      this.resizeObserver?.unobserve(this.input);\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.setTextareaHeight();\n    this.emit('syn-change');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private setTextareaHeight() {\n    if (this.resize === 'auto') {\n      // This prevents layout shifts. We use `clientHeight` instead of `scrollHeight` to account for if the `<textarea>` has a max-height set on it. In my tests, this has worked fine. Im not aware of any edge cases. [Konnor]\n      this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;\n      this.input.style.height = 'auto';\n      this.input.style.height = `${this.input.scrollHeight}px`;\n    } else {\n      this.input.style.height = '';\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch('rows', { waitUntilFirstUpdate: true })\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    this.formControlController.updateValidity();\n    this.setTextareaHeight();\n  }\n\n  /** Sets focus on the textarea. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the textarea. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Selects all the text in the textarea. */\n  select() {\n    this.input.select();\n  }\n\n  /** Gets or sets the textarea's scroll position. */\n  scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {\n    if (position) {\n      if (typeof position.top === 'number') this.input.scrollTop = position.top;\n      if (typeof position.left === 'number') this.input.scrollLeft = position.left;\n      return undefined;\n    }\n\n    return {\n      top: this.input.scrollTop,\n      left: this.input.scrollTop\n    };\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    const selectionStart = start ?? this.input.selectionStart;\n    const selectionEnd = end ?? this.input.selectionEnd;\n\n    this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n      this.setTextareaHeight();\n    }\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <div\n            part=\"base\"\n            class=${classMap({\n              textarea: true,\n              'textarea--small': this.size === 'small',\n              'textarea--medium': this.size === 'medium',\n              'textarea--large': this.size === 'large',\n              'textarea--standard': !this.readonly,\n              'textarea--readonly': this.readonly,\n              'textarea--disabled': this.disabled,\n              'textarea--focused': this.hasFocus,\n              'textarea--empty': !this.value,\n              'textarea--resize-none': this.resize === 'none',\n              'textarea--resize-vertical': this.resize === 'vertical',\n              'textarea--resize-auto': this.resize === 'auto'\n            })}\n          >\n            <textarea\n              part=\"textarea\"\n              id=\"input\"\n              class=\"textarea__control\"\n              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n              name=${ifDefined(this.name)}\n              .value=${live(this.value)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              ?required=${this.required}\n              placeholder=${ifDefined(this.placeholder)}\n              rows=${ifDefined(this.rows)}\n              minlength=${ifDefined(this.minlength)}\n              maxlength=${ifDefined(this.maxlength)}\n              autocapitalize=${ifDefined(this.autocapitalize)}\n              autocorrect=${ifDefined(this.autocorrect)}\n              ?autofocus=${this.autofocus}\n              spellcheck=${ifDefined(this.spellcheck)}\n              enterkeyhint=${ifDefined(this.enterkeyhint)}\n              inputmode=${ifDefined(this.inputmode)}\n              aria-describedby=\"help-text\"\n              @change=${this.handleChange}\n              @input=${this.handleInput}\n              @invalid=${this.handleInvalid}\n              @focus=${this.handleFocus}\n              @blur=${this.handleBlur}\n            ></textarea>\n            <!-- This \"adjuster\" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->\n            <div part=\"textarea-adjuster\" class=\"textarea__size-adjuster\" ?hidden=${this.resize !== 'auto'}></div>\n          </div>\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}