@synergy-design-system/components 2.6.0 → 2.7.0

package/dist/chunks/{chunk.NREQNXC6.js.map → chunk.4WDBHKEV.js.map}

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/components/nav-item/nav-item.component.ts"],
   "sourcesContent": ["import { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup } 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 SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './nav-item.styles.js';\nimport { watch } from '../../internal/watch.js';\n\n/**\n * @summary Flexible button / link component that can be used to quickly build navigations.\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  /**\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  /*\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      const navItemChildren = this.getAllNestedNavItems(this.childrenSlot);\n\n      const currentMarkedItem = navItemChildren\n        .findIndex((item) => !!item.shadowRoot?.querySelector('.nav-item--current'));\n\n      this.currentMarkedChild = currentMarkedItem !== -1;\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    this.handleCurrentMarkedChild();\n\n    // Use the current level of the component\n    const level = getComputedStyle(this).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  @watch('open')\n  handleOpenChange() {\n    this.handleCurrentMarkedChild();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver((entries) => this.handleWidth(entries));\n    this.resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.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        tabindex=${this.disabled ? '-1' : '0'}\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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",
+  "mappings": "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",
   "names": []
 }

package/dist/chunks/{chunk.2VMSUMKU.js → chunk.4ZABXKYI.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuLabel
-} from "./chunk.D3FO6WR5.js";
+} from "./chunk.ZWKWTOIU.js";
 
 // src/components/menu-label/menu-label.ts
 var menu_label_default = SynMenuLabel;
@@ -9,4 +9,4 @@ SynMenuLabel.define("syn-menu-label");
 export {
   menu_label_default
 };
-//# sourceMappingURL=chunk.2VMSUMKU.js.map
+//# sourceMappingURL=chunk.4ZABXKYI.js.map

package/dist/chunks/{chunk.RX7A4EQ2.js → chunk.5732DMBC.js}

@@ -23,6 +23,14 @@ function lockBodyScrolling(lockingEl) {
   locks.add(lockingEl);
   if (!document.documentElement.classList.contains("syn-scroll-lock")) {
     const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
+    let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
+    if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
+      scrollbarGutterProperty = "stable";
+    }
+    if (scrollbarWidth < 2) {
+      scrollbarGutterProperty = "";
+    }
+    document.documentElement.style.setProperty("--syn-scroll-lock-gutter", scrollbarGutterProperty);
     document.documentElement.classList.add("syn-scroll-lock");
     document.documentElement.style.setProperty("--syn-scroll-lock-size", `${scrollbarWidth}px`);
   }
@@ -63,4 +71,4 @@ export {
   unlockBodyScrolling,
   scrollIntoView
 };
-//# sourceMappingURL=chunk.RX7A4EQ2.js.map
+//# sourceMappingURL=chunk.5732DMBC.js.map

package/dist/chunks/chunk.5732DMBC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/offset.ts", "../../src/internal/scroll.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 */\n/**\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems\n * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)\n  };\n}\n", "/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { getOffset } from './offset.js';\n\nconst locks = new Set();\n\n/** Returns the width of the document's scrollbar */\nfunction getScrollbarWidth() {\n  const documentWidth = document.documentElement.clientWidth;\n  return Math.abs(window.innerWidth - documentWidth);\n}\n\n/**\n * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `<body>` element.\n */\nfunction getExistingBodyPadding() {\n  const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ''));\n\n  if (isNaN(padding) || !padding) {\n    return 0;\n  }\n\n  return padding;\n}\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n\n  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from\n  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.\n  if (!document.documentElement.classList.contains('syn-scroll-lock')) {\n    /** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */\n    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `syn-scroll-lock` class is applied\n\n    let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;\n\n    // default is auto, unsupported browsers is \"undefined\"\n    if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {\n      scrollbarGutterProperty = 'stable';\n    }\n\n    /** Sometimes the scrollbar width is 1px, even then, we assume nothing is overflowing. */\n    if (scrollbarWidth < 2) {\n      // if there's no scrollbar, just set it to an empty string so whatever the user has set gets used. This is useful if the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.\n      scrollbarGutterProperty = '';\n    }\n    document.documentElement.style.setProperty('--syn-scroll-lock-gutter', scrollbarGutterProperty);\n    document.documentElement.classList.add('syn-scroll-lock');\n    document.documentElement.style.setProperty('--syn-scroll-lock-size', `${scrollbarWidth}px`);\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.documentElement.classList.remove('syn-scroll-lock');\n    document.documentElement.style.removeProperty('--syn-scroll-lock-size');\n  }\n}\n\n/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"],
+  "mappings": ";AAeO,SAAS,UAAU,SAAsB,QAAqB;AACnE,SAAO;AAAA,IACL,KAAK,KAAK,MAAM,QAAQ,sBAAsB,EAAE,MAAM,OAAO,sBAAsB,EAAE,GAAG;AAAA,IACxF,MAAM,KAAK,MAAM,QAAQ,sBAAsB,EAAE,OAAO,OAAO,sBAAsB,EAAE,IAAI;AAAA,EAC7F;AACF;;;ACVA,IAAM,QAAQ,oBAAI,IAAI;AAGtB,SAAS,oBAAoB;AAC3B,QAAM,gBAAgB,SAAS,gBAAgB;AAC/C,SAAO,KAAK,IAAI,OAAO,aAAa,aAAa;AACnD;AAKA,SAAS,yBAAyB;AAChC,QAAM,UAAU,OAAO,iBAAiB,SAAS,IAAI,EAAE,aAAa,QAAQ,MAAM,EAAE,CAAC;AAErF,MAAI,MAAM,OAAO,KAAK,CAAC,SAAS;AAC9B,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAMO,SAAS,kBAAkB,WAAwB;AACxD,QAAM,IAAI,SAAS;AAInB,MAAI,CAAC,SAAS,gBAAgB,UAAU,SAAS,iBAAiB,GAAG;AAEnE,UAAM,iBAAiB,kBAAkB,IAAI,uBAAuB;AAEpE,QAAI,0BAA0B,iBAAiB,SAAS,eAAe,EAAE;AAGzE,QAAI,CAAC,2BAA2B,4BAA4B,QAAQ;AAClE,gCAA0B;AAAA,IAC5B;AAGA,QAAI,iBAAiB,GAAG;AAEtB,gCAA0B;AAAA,IAC5B;AACA,aAAS,gBAAgB,MAAM,YAAY,4BAA4B,uBAAuB;AAC9F,aAAS,gBAAgB,UAAU,IAAI,iBAAiB;AACxD,aAAS,gBAAgB,MAAM,YAAY,0BAA0B,GAAG,cAAc,IAAI;AAAA,EAC5F;AACF;AAKO,SAAS,oBAAoB,WAAwB;AAC1D,QAAM,OAAO,SAAS;AAEtB,MAAI,MAAM,SAAS,GAAG;AACpB,aAAS,gBAAgB,UAAU,OAAO,iBAAiB;AAC3D,aAAS,gBAAgB,MAAM,eAAe,wBAAwB;AAAA,EACxE;AACF;AAGO,SAAS,eACd,SACA,WACA,YAAgD,YAChD,WAA8B,UAC9B;AACA,QAAM,SAAS,UAAU,SAAS,SAAS;AAC3C,QAAM,YAAY,OAAO,MAAM,UAAU;AACzC,QAAM,aAAa,OAAO,OAAO,UAAU;AAC3C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,aAAa,UAAU;AAC9C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,YAAY,UAAU;AAE7C,MAAI,cAAc,gBAAgB,cAAc,QAAQ;AACtD,QAAI,aAAa,MAAM;AACrB,gBAAU,SAAS,EAAE,MAAM,YAAY,SAAS,CAAC;AAAA,IACnD,WAAW,aAAa,QAAQ,cAAc,MAAM;AAClD,gBAAU,SAAS,EAAE,MAAM,aAAa,UAAU,cAAc,QAAQ,aAAa,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AAEA,MAAI,cAAc,cAAc,cAAc,QAAQ;AACpD,QAAI,YAAY,MAAM;AACpB,gBAAU,SAAS,EAAE,KAAK,WAAW,SAAS,CAAC;AAAA,IACjD,WAAW,YAAY,QAAQ,eAAe,MAAM;AAClD,gBAAU,SAAS,EAAE,KAAK,YAAY,UAAU,eAAe,QAAQ,cAAc,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/chunks/{chunk.F6HHFAPB.js → chunk.5WTYMY7E.js}

@@ -6,20 +6,20 @@ import {
 } from "./chunk.IVM3BGRH.js";
 import {
   SynIcon
-} from "./chunk.UYCIME52.js";
+} from "./chunk.XNGZHSRO.js";
 import {
   LocalizeController
-} from "./chunk.QQ3HY3YJ.js";
+} from "./chunk.ESQAXAFE.js";
 import {
   watch
-} from "./chunk.ITKS5ZOS.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/option/option.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -144,4 +144,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.F6HHFAPB.js.map
+//# sourceMappingURL=chunk.5WTYMY7E.js.map

package/dist/chunks/{chunk.CGOHWVSA.js → chunk.6I4QZHQ6.js}

@@ -4,12 +4,12 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass,
   __spreadProps,
   __spreadValues
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/popup/popup.component.ts
 import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from "@floating-ui/dom";
@@ -252,7 +252,7 @@ var SynPopup = class extends SynergyElement {
         getOffsetParent
       })
     }).then(({ x, y, middlewareData, placement }) => {
-      const isRtl = getComputedStyle(this).direction === "rtl";
+      const isRtl = this.matches(":dir(rtl)");
       const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[placement.split("-")[0]];
       this.setAttribute("data-current-placement", placement);
       Object.assign(this.popup.style, {
@@ -409,4 +409,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.CGOHWVSA.js.map
+//# sourceMappingURL=chunk.6I4QZHQ6.js.map

package/dist/chunks/{chunk.CGOHWVSA.js.map → chunk.6I4QZHQ6.js.map}

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

package/dist/chunks/{chunk.J2EUQLBR.js → chunk.6OCJR2YI.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk.KG52EHDB.js";
 import {
   SynDivider
-} from "./chunk.4SSPQ66Z.js";
+} from "./chunk.EZRPX4D7.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   watch
-} from "./chunk.ITKS5ZOS.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/optgroup/optgroup.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.J2EUQLBR.js.map
+//# sourceMappingURL=chunk.6OCJR2YI.js.map

package/dist/chunks/{chunk.6UAOF7WN.js → chunk.72HIKLQG.js}

@@ -20,6 +20,14 @@ var select_custom_styles_default = css`
     font-size: var(--syn-spacing-large);
   }
 
+  .select--small .select__clear {
+    font-size: var(--syn-spacing-medium);
+  }
+
+  .select--large .select__clear {
+    font-size: var(--syn-spacing-x-large);
+  }
+
   .select--medium .select__clear {
     margin-inline-start: var(--syn-spacing-small);
   }
@@ -37,22 +45,35 @@ var select_custom_styles_default = css`
     border-color: var(--syn-input-color-hover);
   }
 
-  /* Prefix */
+  /* Prefix and Suffix */
 
   /* Small */
   .select--small .select__prefix::slotted(*) {
     margin-inline-end: var(--syn-spacing-x-small);
   }
 
+  .select--small .select__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
   .select--medium .select__prefix::slotted(*) {
     margin-inline-end: var(--syn-input-spacing-small);
   }
 
+  .select--medium .select__suffix::slotted(*) {
+    margin-inline-start: var(--syn-input-spacing-small);
+  }
+
   .select--large .select__prefix::slotted(*) {
     margin-inline-end: var(--syn-input-spacing-medium);
   }
 
-  .select__prefix {
+  .select--large .select__suffix::slotted(*) {
+    margin-inline-start: var(--syn-input-spacing-medium);
+  }
+
+  .select__prefix,
+  .select__suffix {
     color: var(--syn-input-help-text-color);
   }
 
@@ -93,4 +114,4 @@ var select_custom_styles_default = css`
 export {
   select_custom_styles_default
 };
-//# sourceMappingURL=chunk.6UAOF7WN.js.map
+//# sourceMappingURL=chunk.72HIKLQG.js.map

package/dist/chunks/chunk.72HIKLQG.js.map

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

package/dist/chunks/{chunk.6BJDFV76.js → chunk.72KEPLD4.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.CGOHWVSA.js";
+} from "./chunk.6I4QZHQ6.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.6BJDFV76.js.map
+//# sourceMappingURL=chunk.72KEPLD4.js.map

package/dist/chunks/{chunk.ITKS5ZOS.js → chunk.74IOULXM.js}

@@ -1,6 +1,6 @@
 import {
   __spreadValues
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/internal/watch.ts
 function watch(propertyName, options) {
@@ -31,4 +31,4 @@ function watch(propertyName, options) {
 export {
   watch
 };
-//# sourceMappingURL=chunk.ITKS5ZOS.js.map
+//# sourceMappingURL=chunk.74IOULXM.js.map

package/dist/chunks/{chunk.AQJKRHVT.js → chunk.7B5QDYTK.js}

@@ -3,36 +3,33 @@ import {
 } from "./chunk.OOABXWCW.js";
 import {
   menu_item_styles_default
-} from "./chunk.MLP2VIC7.js";
+} from "./chunk.FSWTBNSI.js";
 import {
   SubmenuController
-} from "./chunk.U2OMGNNZ.js";
+} from "./chunk.JNP34M27.js";
 import {
   SynPopup
-} from "./chunk.CGOHWVSA.js";
+} from "./chunk.6I4QZHQ6.js";
 import {
   SynSpinner
-} from "./chunk.Y3LKXZKA.js";
+} from "./chunk.KSPAGGI2.js";
 import {
   HasSlotController,
   getTextContent
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.UYCIME52.js";
-import {
-  LocalizeController
-} from "./chunk.QQ3HY3YJ.js";
+} from "./chunk.XNGZHSRO.js";
 import {
   watch
-} from "./chunk.ITKS5ZOS.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3I5JDTGT.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.HLQ75E45.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/menu-item/menu-item.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -46,9 +43,8 @@ var SynMenuItem = class extends SynergyElement {
     this.value = "";
     this.loading = false;
     this.disabled = false;
-    this.localize = new LocalizeController(this);
     this.hasSlotController = new HasSlotController(this, "submenu");
-    this.submenuController = new SubmenuController(this, this.hasSlotController, this.localize);
+    this.submenuController = new SubmenuController(this, this.hasSlotController);
     this.handleHostClick = (event) => {
       if (this.disabled) {
         event.preventDefault();
@@ -113,7 +109,7 @@ var SynMenuItem = class extends SynergyElement {
     return this.hasSlotController.test("submenu");
   }
   render() {
-    const isRtl = this.localize.dir() === "rtl";
+    const isRtl = this.matches(":dir(rtl)");
     const isSubmenuExpanded = this.submenuController.isExpanded();
     return html`
       <div
@@ -191,4 +187,4 @@ __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.AQJKRHVT.js.map
+//# sourceMappingURL=chunk.7B5QDYTK.js.map

package/dist/chunks/chunk.7B5QDYTK.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 { 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 hasSlotController = new HasSlotController(this, 'submenu');\n  private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController);\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.matches(':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.AQ3OGEJ7.js → chunk.7GVODRHO.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.NCXSLHHQ.js";
+} from "./chunk.DKGNY4YS.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.AQ3OGEJ7.js.map
+//# sourceMappingURL=chunk.7GVODRHO.js.map

package/dist/chunks/{chunk.536NCWEA.js → chunk.7I5Q3H5W.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.2IEYCSI6.js";
+} from "./chunk.YVPJSA6G.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.536NCWEA.js.map
+//# sourceMappingURL=chunk.7I5Q3H5W.js.map