@synergy-design-system/components 3.1.0 → 3.2.1

package/dist/chunks/{chunk.6WFPHCIK.js.map → chunk.EQ3KJJ3H.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/side-nav/side-nav.component.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/unbound-method */\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup } from 'lit';\nimport { html } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './side-nav.styles.js';\nimport SynDrawer from '../drawer/drawer.component.js';\nimport SynDivider from '../divider/divider.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynNavItem from '../nav-item/nav-item.component.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport { getAnimation, setAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { unlockBodyScrolling } from '../../internal/scroll.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.\n * It can be used to group multiple navigation items (<syn-nav-item />s) together.\n *\n * @example\n * <syn-side-nav open>\n *  <syn-nav-item >Item 1</syn-nav-item>\n *  <syn-nav-item divider>Item 2</syn-nav-item>\n * </syn-side-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\n * @dependency syn-icon\n * @dependency syn-nav-item\n *\n * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.\n * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.\n *    Please avoid having to many nav-items as it can massively influence the user experience.\n * @slot toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item\n * for variant=\"sticky\".\n *\n * @event syn-show - Emitted when the side-nav opens.\n * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.\n * @event syn-hide - Emitted when the side-nav closes.\n * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.\n *\n * @csspart base - The components base wrapper\n * @csspart drawer - The drawer that is used under the hood for creating the side-nav\n * @csspart content-container - The components main content container\n * @csspart content - The components main content\n * @csspart footer-container - The components footer content container\n  (where the footer slot content is rendered)\n * @csspart footer-divider - The components footer divider\n * @csspart footer - The components footer content\n * @csspart overlay - The overlay that covers the screen behind the side-nav.\n * @csspart panel - The side-nav's panel (where the whole content is rendered).\n * @csspart body - The side-nav's body (where the default slot content is rendered)\n * @csspart drawer__base - The drawer's base wrapper\n * @csspart toggle-nav-item - The nav-item to toggle open state for variant=\"sticky\"\n * @csspart toggle-icon - The icon of the toggle nav-item for variant=\"sticky\"\n * @csspart toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav\n *  in variant=\"default\".\n * @animation sideNav.showRail - The animation to use when showing the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav\n *  in variant=\"default\".\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.\n * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.\n */\n@enableDefaultSettings('SynSideNav')\nexport default class SynSideNav extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-divider': SynDivider,\n    'syn-drawer': SynDrawer,\n    'syn-icon': SynIcon,\n    'syn-nav-item': SynNavItem,\n  };\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'footer');\n\n  private readonly localize = new LocalizeController(this);\n\n  private timeout: NodeJS.Timeout;\n\n  /**\n   * Current animation active state\n   */\n  @state() private isAnimationActive = false;\n\n  /**\n   * Reference to the drawer\n   */\n  @query('.side-nav__drawer') private drawer: SynDrawer;\n\n  /**\n   * Indicates whether or not the side-nav is open.\n   * You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n   * `hide()` methods and this attribute will reflect the side-nav's open state.\n   *\n   * Depending on the \"variant\" attribute, the behavior will differ.\n   *\n   * __Default__:\n   * With `open` will show the side-nav with an overlay.\n   * Without `open`, the side-nav will be hidden.\n   *\n   * __Rail__:\n   * With `open` will show the whole side-nav with an overlay for touch devices\n   * or without an overlay for non-touch devices.\n   * Without `open`, the side-nav will only show the prefix of nav-item's.\n   *\n   * __Sticky__:\n   * With `open` will show the whole side-nav with an overlay for touch devices\n   * or without an overlay for non-touch devices.\n   * Without `open`, the side-nav will only show the prefix of nav-item's.\n   *\n   */\n  @property({ reflect: true, type: Boolean }) open = false;\n\n  /**\n   * The variant that should be used to show the side navigation.\n   *\n   * The following variants are supported:\n   * - **default** (default): Always shows the whole content and additionally an overlay.\n   * This makes especially sense for applications, where you navigate to a place and stay\n   * there for a longer time.\n   * - **rail**: Only show the prefix of navigation items in closed state.\n   * This will open on hover on the rail navigation.\n   * On touch devices the navigation opens on click and shows an overlay.\n   * Note: The rail variant is only an option if all Navigation Items on the first level\n   * have an Icon.\n   * If this is not the case you should use a burger navigation.\n   * - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\n   * and full width. This variant is only possible for non-nested navigation items.\n   * Note: The sticky variant is only an option if all Navigation Items on the first level\n   * have an Icon and if there are only \"first level\" items.\n   */\n  @property({ reflect: true }) variant: 'default' | 'rail' | 'sticky' = 'default';\n\n  /**\n   * By default, the side-nav traps the focus if in variant=\"default\" and open.\n   * To disable the focus trapping, set this attribute.\n   */\n  @property({ attribute: 'no-focus-trapping', reflect: true, type: Boolean }) noFocusTrapping = false;\n\n  private setDelayedCallback(callback: () => void) {\n    clearTimeout(this.timeout);\n    this.timeout = setTimeout(callback, 100);\n  }\n\n  private handleMouseEnter() {\n    // Debounce mouse events, to avoid infinite loop of open / closing in variant=\"rail\"\n    this.setDelayedCallback(() => {\n      this.open = true;\n    });\n  }\n\n  private handleMouseLeave() {\n    // Debounce mouse events, to avoid infinite loop of open / closing in variant=\"rail\"\n    this.setDelayedCallback(() => {\n      this.open = false;\n    });\n  }\n\n  private handleRequestClose() {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  private addMouseListener() {\n    this.drawer.shadowRoot!.querySelector('.drawer__panel')?.addEventListener('mouseenter', this.handleMouseEnter);\n    this.drawer.shadowRoot!.querySelector('.drawer__panel')?.addEventListener('mouseleave', this.handleMouseLeave);\n  }\n\n  private removeMouseListener() {\n    this.drawer.shadowRoot!.querySelector('.drawer__panel')?.removeEventListener('mouseenter', this.handleMouseEnter);\n    this.drawer.shadowRoot!.querySelector('.drawer__panel')?.removeEventListener('mouseleave', this.handleMouseLeave);\n  }\n\n  private setDrawerAnimations() {\n    const showAnimation = getAnimation(this, `sideNav.show${this.variant === 'default' ? 'NonRail' : 'Rail'}`, { dir: this.localize.dir() });\n    const hideAnimation = getAnimation(this, `sideNav.hide${this.variant === 'default' ? 'NonRail' : 'Rail'}`, { dir: this.localize.dir() });\n    const hideOverlay = getAnimation(this, 'sideNav.overlay.hide', { dir: this.localize.dir() });\n    const showOverlay = getAnimation(this, 'sideNav.overlay.show', { dir: this.localize.dir() });\n\n    setAnimation(this.drawer, 'drawer.showStart', showAnimation);\n    setAnimation(this.drawer, 'drawer.hideStart', hideAnimation);\n    setAnimation(this.drawer, 'drawer.overlay.hide', hideOverlay);\n    setAnimation(this.drawer, 'drawer.overlay.show', showOverlay);\n  }\n\n  @watch('variant', { waitUntilFirstUpdate: true })\n  handleVariantChange() {\n    this.setDrawerAnimations();\n    this.drawer.forceVisibility(this.variant !== 'default');\n\n    switch (this.variant) {\n    case 'rail':\n      // For hover handling\n      this.addMouseListener();\n      break;\n    case 'sticky':\n    case 'default':\n    default:\n      this.removeMouseListener();\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  handleOpenChange() {\n    if (this.variant === 'default') {\n      return;\n    }\n\n    this.isAnimationActive = true;\n\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    waitForEvent(this.drawer, `syn-after-${this.open ? 'show' : 'hide'}`).then(() => {\n      this.isAnimationActive = false;\n    });\n  }\n\n  @watch('noFocusTrapping', { waitUntilFirstUpdate: true })\n  handleFocusTrapping() {\n    if (this.variant === 'default') {\n      if (this.noFocusTrapping) {\n        this.drawer.modal.activateExternal();\n      } else {\n        this.drawer.modal.deactivateExternal();\n      }\n    }\n  }\n\n  /** Shows the side-nav. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n    this.open = true;\n\n    return waitForEvent(this.drawer, 'syn-after-show');\n  }\n\n  /** Hides the side-nav */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n\n    return waitForEvent(this.drawer, 'syn-after-hide');\n  }\n\n  constructor() {\n    super();\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.addEventListener('syn-initial-focus', (event) => {\n      if (this.variant !== 'default') {\n        // We need to do this, to stop the drawer from giving focus to the panel\n        event.preventDefault();\n\n        // The originalTrigger needs to be removed, otherwise when closing the drawer,\n        // the first focused nav-item is focused again...\n        // eslint-disable-next-line dot-notation\n        this.drawer['originalTrigger'] = null;\n      }\n    });\n\n    this.addEventListener('focusin', (event) => {\n      const targetTag = (event.target as HTMLElement).tagName.toLowerCase();\n      // Open the side-nav if it`s in variant=\"rail\", closed and the focused element is a nav-item\n      if (targetTag === 'syn-nav-item' && this.variant === 'rail' && !this.open) {\n        this.open = true;\n      }\n    });\n\n    this.addEventListener('focusout', (event) => {\n      const targetTag = (event.target as HTMLElement).tagName.toLowerCase();\n      const relatedTargetTag = (event.relatedTarget as HTMLElement)?.tagName.toLowerCase();\n\n      // Close the side-nav, if it`s in variant=\"rail\", open and the next focused element\n      // is no longer a nav-item\n      if (targetTag === 'syn-nav-item' && relatedTargetTag !== 'syn-nav-item' && this.variant === 'rail' && this.open) {\n        this.open = false;\n      }\n    });\n  }\n\n  /**\n   * Initial setup for first render like special variant=\"rail\" and variant=\"sticky\" handling\n   * and drawer animations.\n   * */\n  firstUpdated() {\n    this.setDrawerAnimations();\n\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    this.drawer.updateComplete.then(() => {\n      this.drawer.forceVisibility(this.variant !== 'default');\n      // change tabindex of drawer to make only nav-items focusable and not the panel of the drawer\n      (this.drawer.shadowRoot!.querySelector('.drawer__panel') as HTMLElement).tabIndex = -1;\n    });\n\n    switch (this.variant) {\n    case 'rail':\n      // Wait for the drawer`s update to be completed\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.drawer.updateComplete.then(() => {\n        this.addMouseListener();\n      });\n      break;\n    case 'sticky': break;\n    case 'default':\n    default:\n      if (this.noFocusTrapping) {\n        // Disable the focus trapping of the modal\n        this.drawer.modal.activateExternal();\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    //  Remove modal listeners\n    if (this.drawer) {\n      unlockBodyScrolling(this.drawer);\n      this.drawer.modal.deactivate();\n    }\n  }\n\n  private toggleOpenState() {\n    this.open = !this.open;\n  }\n\n  // eslint-disable-next-line complexity\n  render() {\n    const isTouch = window.navigator.maxTouchPoints > 0 || !!('ontouchstart' in window);\n    const hasFooter = this.hasSlotController.test('footer');\n    const showFooterDivider = hasFooter || this.variant === 'sticky';\n\n    /* eslint-disable lit/no-invalid-html */\n    /* eslint-disable @typescript-eslint/unbound-method */\n    return html`\n      <nav\n        class=${classMap({\n          'side-nav': true,\n          'side-nav--animation': this.isAnimationActive,\n          'side-nav--fix': this.variant === 'default',\n          'side-nav--has-footer': hasFooter,\n          'side-nav--open': this.open,\n          'side-nav--rail': this.variant === 'rail',\n          'side-nav--sticky': this.variant === 'sticky',\n          'side-nav--touch': isTouch,\n        })}\n        part=\"base\"\n      >\n        \n        <syn-drawer\n          class=\"side-nav__drawer\"\n          ?contained=${this.variant !== 'default'}\n          exportparts=\"overlay,panel,body,base:drawer__base\"\n          label=${this.localize.term('sideNav')}\n          no-header\n          ?open=${this.open}\n          part=\"drawer\"\n          placement=\"start\"\n          @syn-request-close=${this.handleRequestClose} \n        >\n          <div part=\"content-container\" class=\"side-nav__content-container\">\n            <slot part=\"content\"></slot>\n          </div>\n          \n          <footer class=\"side-nav__footer\" part=\"footer-container\" slot=\"footer\">  \n\n            ${showFooterDivider ? html`<syn-divider part=\"footer-divider\" class=\"side-nav__footer-divider\"></syn-divider>` : ''}\n            <slot name=\"footer\" part=\"footer\" ></slot>\n            ${this.variant === 'sticky'\n              ? html`<syn-nav-item part=\"toggle-nav-item\" class=\"side-nav__toggle-nav-item\" @click=${this.toggleOpenState} ?divider=${hasFooter}>\n                      <slot name=\"toggle-icon\" slot=\"prefix\" class=\"side-nav__toggle-icon\">\n                        <syn-icon library=\"system\" name=\"sticky_sidebar\" part=\"toggle-icon\"></syn-icon>\n                      </slot>\n                      <slot name=\"toggle-label\" part=\"toggle-label\">\n                        ${(!this.open && !this.isAnimationActive) ? this.localize.term('sideNavShow') : this.localize.term('sideNavHide')}\n                      </slot>\n                    </syn-nav-item>`\n              : ''\n            }\n          \n          </footer>\n\n        </syn-drawer>\n\n      </nav>\n    `;\n    /* eslint-enable lit/no-invalid-html */\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n\n// Show animations\nsetDefaultAnimation('sideNav.showRail', {\n  keyframes: [\n    { width: 'var(--side-nav-rail-width)' },\n    { width: 'var(--side-nav-open-width)' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('sideNav.showNonRail', {\n  keyframes: [\n    { opacity: 0, translate: '-100%' },\n    { opacity: 1, translate: '0' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\n// Hide animations\nsetDefaultAnimation('sideNav.hideNonRail', {\n  keyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '-100%' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('sideNav.hideRail', {\n  keyframes: [\n    { width: 'var(--side-nav-open-width)' },\n    { width: 'var(--side-nav-rail-width)' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\n// Overlay animations\nsetDefaultAnimation('sideNav.overlay.show', {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 },\n});\n\nsetDefaultAnimation('sideNav.overlay.hide', {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 },\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/unbound-method */\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup } from 'lit';\nimport { html } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './side-nav.styles.js';\nimport SynDrawer from '../drawer/drawer.component.js';\nimport SynDivider from '../divider/divider.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynNavItem from '../nav-item/nav-item.component.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport { getAnimation, setAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { unlockBodyScrolling } from '../../internal/scroll.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.\n * It can be used to group multiple navigation items (<syn-nav-item />s) together.\n *\n * @example\n * <syn-side-nav open>\n *  <syn-nav-item >Item 1</syn-nav-item>\n *  <syn-nav-item divider>Item 2</syn-nav-item>\n * </syn-side-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\n * @dependency syn-icon\n * @dependency syn-nav-item\n *\n * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.\n * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.\n *    Please avoid having to many nav-items as it can massively influence the user experience.\n * @slot toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item\n * for variant=\"sticky\".\n *\n * @event syn-show - Emitted when the side-nav opens.\n * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.\n * @event syn-hide - Emitted when the side-nav closes.\n * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.\n *\n * @csspart base - The components base wrapper\n * @csspart drawer - The drawer that is used under the hood for creating the side-nav\n * @csspart content-container - The components main content container\n * @csspart content - The components main content\n * @csspart footer-container - The components footer content container\n  (where the footer slot content is rendered)\n * @csspart footer-divider - The components footer divider\n * @csspart footer - The components footer content\n * @csspart overlay - The overlay that covers the screen behind the side-nav.\n * @csspart panel - The side-nav's panel (where the whole content is rendered).\n * @csspart body - The side-nav's body (where the default slot content is rendered)\n * @csspart drawer__base - The drawer's base wrapper\n * @csspart toggle-nav-item - The nav-item to toggle open state for variant=\"sticky\"\n * @csspart toggle-icon - The icon of the toggle nav-item for variant=\"sticky\"\n * @csspart toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav\n *  in variant=\"default\".\n * @animation sideNav.showRail - The animation to use when showing the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav\n *  in variant=\"default\".\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.\n * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.\n */\n@enableDefaultSettings('SynSideNav')\nexport default class SynSideNav extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-divider': SynDivider,\n    'syn-drawer': SynDrawer,\n    'syn-icon': SynIcon,\n    'syn-nav-item': SynNavItem,\n  };\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'footer');\n\n  private readonly localize = new LocalizeController(this);\n\n  private timeout: NodeJS.Timeout;\n\n  /**\n   * Current animation active state\n   */\n  @state() private isAnimationActive = false;\n\n  /**\n   * Reference to the drawer\n   */\n  @query('.side-nav__drawer') private drawer: SynDrawer;\n\n  /**\n   * Indicates whether or not the side-nav is open.\n   * You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n   * `hide()` methods and this attribute will reflect the side-nav's open state.\n   *\n   * Depending on the \"variant\" attribute, the behavior will differ.\n   *\n   * __Default__:\n   * With `open` will show the side-nav with an overlay.\n   * Without `open`, the side-nav will be hidden.\n   *\n   * __Rail__:\n   * With `open` will show the whole side-nav with an overlay for touch devices\n   * or without an overlay for non-touch devices.\n   * Without `open`, the side-nav will only show the prefix of nav-item's.\n   *\n   * __Sticky__:\n   * With `open` will show the whole side-nav with an overlay for touch devices\n   * or without an overlay for non-touch devices.\n   * Without `open`, the side-nav will only show the prefix of nav-item's.\n   *\n   */\n  @property({ reflect: true, type: Boolean }) open = false;\n\n  /**\n   * The variant that should be used to show the side navigation.\n   *\n   * The following variants are supported:\n   * - **default** (default): Always shows the whole content and additionally an overlay.\n   * This makes especially sense for applications, where you navigate to a place and stay\n   * there for a longer time.\n   * - **rail**: Only show the prefix of navigation items in closed state.\n   * This will open on hover on the rail navigation.\n   * On touch devices the navigation opens on click and shows an overlay.\n   * Note: The rail variant is only an option if all Navigation Items on the first level\n   * have an Icon.\n   * If this is not the case you should use a burger navigation.\n   * - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\n   * and full width. This variant is only possible for non-nested navigation items.\n   * Note: The sticky variant is only an option if all Navigation Items on the first level\n   * have an Icon and if there are only \"first level\" items.\n   */\n  @property({ reflect: true }) variant: 'default' | 'rail' | 'sticky' = 'default';\n\n  /**\n   * By default, the side-nav traps the focus if in variant=\"default\" and open.\n   * To disable the focus trapping, set this attribute.\n   */\n  @property({ attribute: 'no-focus-trapping', reflect: true, type: Boolean }) noFocusTrapping = false;\n\n  private setDelayedCallback(callback: () => void) {\n    clearTimeout(this.timeout);\n    this.timeout = setTimeout(callback, 100);\n  }\n\n  private handleMouseEnter() {\n    // Debounce mouse events, to avoid infinite loop of open / closing in variant=\"rail\"\n    this.setDelayedCallback(() => {\n      this.open = true;\n    });\n  }\n\n  private handleMouseLeave() {\n    // Debounce mouse events, to avoid infinite loop of open / closing in variant=\"rail\"\n    this.setDelayedCallback(() => {\n      this.open = false;\n    });\n  }\n\n  private handleRequestClose() {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  private addMouseListener() {\n    this.drawer.shadowRoot!.querySelector('.drawer__panel')?.addEventListener('mouseenter', this.handleMouseEnter);\n    this.drawer.shadowRoot!.querySelector('.drawer__panel')?.addEventListener('mouseleave', this.handleMouseLeave);\n  }\n\n  private removeMouseListener() {\n    this.drawer.shadowRoot!.querySelector('.drawer__panel')?.removeEventListener('mouseenter', this.handleMouseEnter);\n    this.drawer.shadowRoot!.querySelector('.drawer__panel')?.removeEventListener('mouseleave', this.handleMouseLeave);\n  }\n\n  private setDrawerAnimations() {\n    const showAnimation = getAnimation(this, `sideNav.show${this.variant === 'default' ? 'NonRail' : 'Rail'}`, { dir: this.localize.dir() });\n    const hideAnimation = getAnimation(this, `sideNav.hide${this.variant === 'default' ? 'NonRail' : 'Rail'}`, { dir: this.localize.dir() });\n    const hideOverlay = getAnimation(this, 'sideNav.overlay.hide', { dir: this.localize.dir() });\n    const showOverlay = getAnimation(this, 'sideNav.overlay.show', { dir: this.localize.dir() });\n\n    setAnimation(this.drawer, 'drawer.showStart', showAnimation);\n    setAnimation(this.drawer, 'drawer.hideStart', hideAnimation);\n    setAnimation(this.drawer, 'drawer.overlay.hide', hideOverlay);\n    setAnimation(this.drawer, 'drawer.overlay.show', showOverlay);\n  }\n\n  @watch('variant', { waitUntilFirstUpdate: true })\n  handleVariantChange() {\n    this.setDrawerAnimations();\n    this.drawer.forceVisibility(this.variant !== 'default');\n\n    switch (this.variant) {\n      case 'rail':\n      // For hover handling\n        this.addMouseListener();\n        break;\n      case 'sticky':\n      case 'default':\n      default:\n        this.removeMouseListener();\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  handleOpenChange() {\n    if (this.variant === 'default') {\n      return;\n    }\n\n    this.isAnimationActive = true;\n\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    waitForEvent(this.drawer, `syn-after-${this.open ? 'show' : 'hide'}`).then(() => {\n      this.isAnimationActive = false;\n    });\n  }\n\n  @watch('noFocusTrapping', { waitUntilFirstUpdate: true })\n  handleFocusTrapping() {\n    if (this.variant === 'default') {\n      if (this.noFocusTrapping) {\n        this.drawer.modal.activateExternal();\n      } else {\n        this.drawer.modal.deactivateExternal();\n      }\n    }\n  }\n\n  /** Shows the side-nav. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n    this.open = true;\n\n    return waitForEvent(this.drawer, 'syn-after-show');\n  }\n\n  /** Hides the side-nav */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n\n    return waitForEvent(this.drawer, 'syn-after-hide');\n  }\n\n  constructor() {\n    super();\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.addEventListener('syn-initial-focus', (event) => {\n      if (this.variant !== 'default') {\n        // We need to do this, to stop the drawer from giving focus to the panel\n        event.preventDefault();\n\n        // The originalTrigger needs to be removed, otherwise when closing the drawer,\n        // the first focused nav-item is focused again...\n        // eslint-disable-next-line dot-notation\n        this.drawer['originalTrigger'] = null;\n      }\n    });\n\n    this.addEventListener('focusin', (event) => {\n      const targetTag = (event.target as HTMLElement).tagName.toLowerCase();\n      // Open the side-nav if it`s in variant=\"rail\", closed and the focused element is a nav-item\n      if (targetTag === 'syn-nav-item' && this.variant === 'rail' && !this.open) {\n        this.open = true;\n      }\n    });\n\n    this.addEventListener('focusout', (event) => {\n      const targetTag = (event.target as HTMLElement).tagName.toLowerCase();\n      const relatedTargetTag = (event.relatedTarget as HTMLElement)?.tagName.toLowerCase();\n\n      // Close the side-nav, if it`s in variant=\"rail\", open and the next focused element\n      // is no longer a nav-item\n      if (targetTag === 'syn-nav-item' && relatedTargetTag !== 'syn-nav-item' && this.variant === 'rail' && this.open) {\n        this.open = false;\n      }\n    });\n  }\n\n  /**\n   * Initial setup for first render like special variant=\"rail\" and variant=\"sticky\" handling\n   * and drawer animations.\n   * */\n  firstUpdated() {\n    this.setDrawerAnimations();\n\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    this.drawer.updateComplete.then(() => {\n      this.drawer.forceVisibility(this.variant !== 'default');\n      // change tabindex of drawer to make only nav-items focusable and not the panel of the drawer\n      (this.drawer.shadowRoot!.querySelector('.drawer__panel') as HTMLElement).tabIndex = -1;\n    });\n\n    switch (this.variant) {\n      case 'rail':\n      // Wait for the drawer`s update to be completed\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        this.drawer.updateComplete.then(() => {\n          this.addMouseListener();\n        });\n        break;\n      case 'sticky': break;\n      case 'default':\n      default:\n        if (this.noFocusTrapping) {\n        // Disable the focus trapping of the modal\n          this.drawer.modal.activateExternal();\n        }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    //  Remove modal listeners\n    if (this.drawer) {\n      unlockBodyScrolling(this.drawer);\n      this.drawer.modal.deactivate();\n    }\n  }\n\n  private toggleOpenState() {\n    this.open = !this.open;\n  }\n\n  // eslint-disable-next-line complexity\n  render() {\n    const isTouch = window.navigator.maxTouchPoints > 0 || !!('ontouchstart' in window);\n    const hasFooter = this.hasSlotController.test('footer');\n    const showFooterDivider = hasFooter || this.variant === 'sticky';\n\n    /* eslint-disable lit/no-invalid-html */\n    /* eslint-disable @typescript-eslint/unbound-method */\n    return html`\n      <nav\n        class=${classMap({\n          'side-nav': true,\n          'side-nav--animation': this.isAnimationActive,\n          'side-nav--fix': this.variant === 'default',\n          'side-nav--has-footer': hasFooter,\n          'side-nav--open': this.open,\n          'side-nav--rail': this.variant === 'rail',\n          'side-nav--sticky': this.variant === 'sticky',\n          'side-nav--touch': isTouch,\n        })}\n        part=\"base\"\n      >\n        \n        <syn-drawer\n          class=\"side-nav__drawer\"\n          ?contained=${this.variant !== 'default'}\n          exportparts=\"overlay,panel,body,base:drawer__base\"\n          label=${this.localize.term('sideNav')}\n          no-header\n          ?open=${this.open}\n          part=\"drawer\"\n          placement=\"start\"\n          @syn-request-close=${this.handleRequestClose} \n        >\n          <div part=\"content-container\" class=\"side-nav__content-container\">\n            <slot part=\"content\"></slot>\n          </div>\n          \n          <footer class=\"side-nav__footer\" part=\"footer-container\" slot=\"footer\">  \n\n            ${showFooterDivider ? html`<syn-divider part=\"footer-divider\" class=\"side-nav__footer-divider\"></syn-divider>` : ''}\n            <slot name=\"footer\" part=\"footer\" ></slot>\n            ${this.variant === 'sticky'\n              ? html`<syn-nav-item part=\"toggle-nav-item\" class=\"side-nav__toggle-nav-item\" @click=${this.toggleOpenState} ?divider=${hasFooter}>\n                      <slot name=\"toggle-icon\" slot=\"prefix\" class=\"side-nav__toggle-icon\">\n                        <syn-icon library=\"system\" name=\"sticky_sidebar\" part=\"toggle-icon\"></syn-icon>\n                      </slot>\n                      <slot name=\"toggle-label\" part=\"toggle-label\">\n                        ${(!this.open && !this.isAnimationActive) ? this.localize.term('sideNavShow') : this.localize.term('sideNavHide')}\n                      </slot>\n                    </syn-nav-item>`\n              : ''\n            }\n          \n          </footer>\n\n        </syn-drawer>\n\n      </nav>\n    `;\n    /* eslint-enable lit/no-invalid-html */\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n\n// Show animations\nsetDefaultAnimation('sideNav.showRail', {\n  keyframes: [\n    { width: 'var(--side-nav-rail-width)' },\n    { width: 'var(--side-nav-open-width)' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('sideNav.showNonRail', {\n  keyframes: [\n    { opacity: 0, translate: '-100%' },\n    { opacity: 1, translate: '0' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\n// Hide animations\nsetDefaultAnimation('sideNav.hideNonRail', {\n  keyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '-100%' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('sideNav.hideRail', {\n  keyframes: [\n    { width: 'var(--side-nav-open-width)' },\n    { width: 'var(--side-nav-rail-width)' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\n// Overlay animations\nsetDefaultAnimation('sideNav.overlay.show', {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 },\n});\n\nsetDefaultAnimation('sideNav.overlay.hide', {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 },\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/chunks/{chunk.UIRABJTT.js → chunk.EVSLGGKP.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.5ORVYCVV.js";
+} from "./chunk.AUJMQLMT.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.UIRABJTT.js.map
+//# sourceMappingURL=chunk.EVSLGGKP.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/badge/badge.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynBadge from './badge.component.js';\n\nexport * from './badge.component.js';\nexport default SynBadge;\n\nSynBadge.define('syn-badge');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-badge': SynBadge;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,gBAAQ;AAEf,SAAS,OAAO,WAAW;",
+  "names": []
+}

package/dist/chunks/{chunk.SM4ANWX6.js → chunk.F2QQ2JAK.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.VGI7V7OS.js";
+} from "./chunk.KRF7VWRQ.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.SM4ANWX6.js.map
+//# sourceMappingURL=chunk.F2QQ2JAK.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox/checkbox.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynCheckbox from './checkbox.component.js';\n\nexport * from './checkbox.component.js';\nexport default SynCheckbox;\n\nSynCheckbox.define('syn-checkbox');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-checkbox': SynCheckbox;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,mBAAQ;AAEf,YAAY,OAAO,cAAc;",
+  "names": []
+}

package/dist/chunks/{chunk.4VOWXLEZ.js → chunk.FCXOOYNC.js}

@@ -3,32 +3,32 @@ import {
 } from "./chunk.SLDFB2O3.js";
 import {
   switch_styles_default
-} from "./chunk.4TB35TYG.js";
+} from "./chunk.X323W6VB.js";
 import {
   defaultValue
-} from "./chunk.3NXKLKWH.js";
+} from "./chunk.3JDUKQRN.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.G4URZQCL.js";
+} from "./chunk.PTRCO527.js";
 import {
   FormControlController
-} from "./chunk.U5757NSE.js";
+} from "./chunk.J3GDDM6Q.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   enableDefaultSettings
-} from "./chunk.MLILJGXQ.js";
+} from "./chunk.YACUYJZN.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -255,4 +255,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.4VOWXLEZ.js.map
+//# sourceMappingURL=chunk.FCXOOYNC.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/switch/switch.component.ts"],
+  "sourcesContent": ["/* 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 './switch.styles.js';\nimport customStyles from './switch.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 Switches allow the user to toggle an option on or off.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n * @slot help-text - Text that describes how to use the switch. 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 the control's checked state changes.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n * @csspart form-control-help-text - The help text's wrapper.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */\n@enableDefaultSettings('SynSwitch')\nexport default class SynSwitch extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n\n  private readonly formControlController = new FormControlController(this, {\n    value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynSwitch) => control.defaultChecked,\n    setValue: (control: SynSwitch, checked: boolean) => (control.checked = checked)\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n  @property({ reflect: true }) title = ''; // make reactive to pass through\n\n  /** The name of the switch, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the switch, submitted as a name/value pair with form data. */\n  @property() value: string;\n\n  /** The switch's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the switch. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the switch in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the switch a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The switch's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleInput() {\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.emit('syn-change');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n      this.emit('syn-change');\n      this.emit('syn-input');\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n      this.emit('syn-change');\n      this.emit('syn-input');\n    }\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  handleCheckedChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.formControlController.updateValidity();\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(true);\n  }\n\n  /** Simulates a click on the switch. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the switch. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** 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 hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    return html`\n      <div\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"base\"\n          class=${classMap({\n            switch: true,\n            'switch--checked': this.checked,\n            'switch--disabled': this.disabled,\n            'switch--focused': this.hasFocus,\n            'switch--small': this.size === 'small',\n            'switch--medium': this.size === 'medium',\n            'switch--large': this.size === 'large'\n          })}\n        >\n          <input\n            class=\"switch__input\"\n            type=\"checkbox\"\n            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n            name=${this.name}\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            .disabled=${this.disabled}\n            .required=${this.required}\n            role=\"switch\"\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-describedby=\"help-text\"\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @invalid=${this.handleInvalid}\n            @blur=${this.handleBlur}\n            @focus=${this.handleFocus}\n            @keydown=${this.handleKeyDown}\n          />\n\n          <span part=\"control\" class=\"switch__control\">\n            <span part=\"thumb\" class=\"switch__thumb\"></span>\n          </span>\n\n          <div part=\"label\" class=\"switch__label\">\n            <slot></slot>\n          </div>\n        </label>\n\n        <div\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n          class=\"form-control__help-text\"\n          id=\"help-text\"\n          part=\"form-control-help-text\"\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-switch': SynSwitch;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AAIzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,UAAU,OAAO,aAAa;AAsCvC,IAAqB,YAArB,cAAuC,eAA6C;AAAA,EAApF;AAAA;AAGE,SAAiB,wBAAwB,IAAI,sBAAsB,MAAM;AAAA,MACvE,OAAO,CAAC,YAAwB,QAAQ,UAAU,QAAQ,SAAS,OAAO;AAAA,MAC1E,cAAc,CAAC,YAAuB,QAAQ;AAAA,MAC9C,UAAU,CAAC,SAAoB,YAAsB,QAAQ,UAAU;AAAA,IACzE,CAAC;AACD,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,WAAW;AAInE,SAAQ,WAAW;AACC,iBAAQ;AAGzB,gBAAO;AAMU,gBAAqC;AAGtB,oBAAW;AAGX,mBAAU;AAG7B,0BAAiB;AAOb,gBAAO;AAGQ,oBAAW;AAGjB,oBAAW;AAAA;AAAA;AAAA,EAGjD,IAAI,WAAW;AACb,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA,EAGA,IAAI,oBAAoB;AACtB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAEA,eAAe;AACb,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,cAAc;AACpB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,cAAc,OAAc;AAClC,SAAK,sBAAsB,YAAY,KAAK;AAC5C,SAAK,sBAAsB,iBAAiB,KAAK;AAAA,EACnD;AAAA,EAEQ,cAAc;AACpB,SAAK,UAAU,CAAC,KAAK;AACrB,SAAK,KAAK,YAAY;AAAA,EACxB;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,cAAc,OAAsB;AAC1C,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,WAAK,UAAU;AACf,WAAK,KAAK,YAAY;AACtB,WAAK,KAAK,WAAW;AAAA,IACvB;AAEA,QAAI,MAAM,QAAQ,cAAc;AAC9B,YAAM,eAAe;AACrB,WAAK,UAAU;AACf,WAAK,KAAK,YAAY;AACtB,WAAK,KAAK,WAAW;AAAA,IACvB;AAAA,EACF;AAAA,EAGA,sBAAsB;AACpB,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAGA,uBAAuB;AAErB,SAAK,sBAAsB,YAAY,IAAI;AAAA,EAC7C;AAAA;AAAA,EAGA,QAAQ;AACN,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA,EAGA,gBAAgB;AACd,WAAO,KAAK,MAAM,cAAc;AAAA,EAClC;AAAA;AAAA,EAGA,UAAkC;AAChC,WAAO,KAAK,sBAAsB,QAAQ;AAAA,EAC5C;AAAA;AAAA,EAGA,iBAAiB;AACf,WAAO,KAAK,MAAM,eAAe;AAAA,EACnC;AAAA;AAAA,EAGA,kBAAkB,SAAiB;AACjC,SAAK,MAAM,kBAAkB,OAAO;AACpC,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEA,SAAS;AACP,UAAM,kBAAkB,KAAK,kBAAkB,KAAK,WAAW;AAC/D,UAAM,cAAc,KAAK,WAAW,OAAO,CAAC,CAAC;AAE7C,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,uBAAuB,KAAK,SAAS;AAAA,MACrC,wBAAwB,KAAK,SAAS;AAAA,MACtC,uBAAuB,KAAK,SAAS;AAAA,MACrC,+BAA+B;AAAA,IACjC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIQ,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,mBAAmB,KAAK;AAAA,MACxB,iBAAiB,KAAK,SAAS;AAAA,MAC/B,kBAAkB,KAAK,SAAS;AAAA,MAChC,iBAAiB,KAAK,SAAS;AAAA,IACjC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKQ,KAAK,KAAuF;AAAA,mBAC7F,KAAK,IAAI;AAAA,oBACR,UAAU,KAAK,KAAK,CAAC;AAAA,uBAClB,KAAK,KAAK,OAAO,CAAC;AAAA,wBACjB,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA;AAAA,2BAEV,KAAK,UAAU,SAAS,OAAO;AAAA;AAAA,qBAErC,KAAK,WAAW;AAAA,qBAChB,KAAK,WAAW;AAAA,uBACd,KAAK,aAAa;AAAA,oBACrB,KAAK,UAAU;AAAA,qBACd,KAAK,WAAW;AAAA,uBACd,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAajB,cAAc,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKnB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9C;AACF;AAtNqB,UACZ,SAAyB,CAAC,0BAAiB,6BAAmB,uBAAQ,oCAAyB,4BAAY;AASjF;AAAA,EAAhC,MAAM,wBAAwB;AAAA,GAVZ,UAUc;AAEhB;AAAA,EAAhB,MAAM;AAAA,GAZY,UAYF;AACY;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAbR,UAaU;AAGjB;AAAA,EAAX,SAAS;AAAA,GAhBS,UAgBP;AAGA;AAAA,EAAX,SAAS;AAAA,GAnBS,UAmBP;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAtBR,UAsBU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzBvB,UAyByB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA5BvB,UA4ByB;AAGnB;AAAA,EAAxB,aAAa,SAAS;AAAA,GA/BJ,UA+BM;AAOI;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAtCR,UAsCU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzCvB,UAyCyB;AAGN;AAAA,EAArC,SAAS,EAAE,WAAW,YAAY,CAAC;AAAA,GA5CjB,UA4CmB;AAyDtC;AAAA,EADC,MAAM,WAAW,EAAE,sBAAsB,KAAK,CAAC;AAAA,GApG7B,UAqGnB;AAMA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA1G9B,UA2GnB;AA3GmB,YAArB;AAAA,EADC,sBAAsB,WAAW;AAAA,GACb;",
+  "names": []
+}

package/dist/chunks/{chunk.I64H5F6D.js → chunk.FLDDHQXG.js}

@@ -1,18 +1,18 @@
 import {
   progress_ring_styles_default
-} from "./chunk.RMIDAEF5.js";
+} from "./chunk.PB6IANE7.js";
 import {
   progress_ring_custom_styles_default
 } from "./chunk.GCTLPTMT.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.I64H5F6D.js.map
+//# sourceMappingURL=chunk.FLDDHQXG.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-ring/progress-ring.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './progress-ring.styles.js';\nimport customStyles from './progress-ring.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The progress ring label.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */\nexport default class SynProgressRing extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly localize = new LocalizeController(this);\n\n  @query('.progress-ring__indicator') indicator: SVGCircleElement;\n\n  @state() indicatorOffset: string;\n\n  /** The current progress as a percentage, 0 to 100. */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** A custom label for assistive devices. */\n  @property() label = '';\n\n  updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    //\n    // This block is only required for Safari because it doesn't transition the circle when the custom properties\n    // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,\n    // but I couldn't pinpoint it so this works around the problem.\n    //\n    if (changedProps.has('value')) {\n      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));\n      const circumference = 2 * Math.PI * radius;\n      const offset = circumference - (this.value / 100) * circumference;\n\n      this.indicatorOffset = `${offset}px`;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"progress-ring\"\n        role=\"progressbar\"\n        aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}\n        aria-describedby=\"label\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"${this.value}\"\n        style=\"--percentage: ${this.value / 100}\"\n      >\n        <svg class=\"progress-ring__image\">\n          <circle class=\"progress-ring__track\"></circle>\n          <circle class=\"progress-ring__indicator\" style=\"stroke-dashoffset: ${this.indicatorOffset}\"></circle>\n        </svg>\n\n        <slot id=\"label\" part=\"label\" class=\"progress-ring__label\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AACA,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AAyBvC,IAAqB,kBAArB,cAA6C,eAAe;AAAA,EAA5D;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAOZ,iBAAQ;AAGvC,iBAAQ;AAAA;AAAA,EAEpB,QAAQ,cAAoC;AAC1C,UAAM,QAAQ,YAAY;AAO1B,QAAI,aAAa,IAAI,OAAO,GAAG;AAC7B,YAAM,SAAS,WAAW,iBAAiB,KAAK,SAAS,EAAE,iBAAiB,GAAG,CAAC;AAChF,YAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,YAAM,SAAS,gBAAiB,KAAK,QAAQ,MAAO;AAEpD,WAAK,kBAAkB,GAAG,MAAM;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,MAAM,SAAS,IAAI,KAAK,QAAQ,KAAK,SAAS,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI/D,KAAK,KAAK;AAAA,+BACJ,KAAK,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,+EAIgC,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjG;AACF;AAtDqB,gBACZ,SAAyB,CAAC,0BAAiB,8BAAQ,mCAAY;AAIlC;AAAA,EAAnC,MAAM,2BAA2B;AAAA,GALf,gBAKiB;AAE3B;AAAA,EAAR,MAAM;AAAA,GAPY,gBAOV;AAGkC;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAVtB,gBAUwB;AAG/B;AAAA,EAAX,SAAS;AAAA,GAbS,gBAaP;",
+  "names": []
+}

package/dist/chunks/{chunk.DU3L7OGA.js → chunk.FQPIRAA6.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.3WVPUEAN.js";
 import {
   progress_bar_styles_default
-} from "./chunk.QUM76UHV.js";
+} from "./chunk.VPL7U5EC.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -68,4 +68,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.DU3L7OGA.js.map
+//# sourceMappingURL=chunk.FQPIRAA6.js.map

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

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

package/dist/chunks/{chunk.BWTMFHNM.js → chunk.FVIRHFY6.js}

@@ -38,13 +38,14 @@ var getValueFromOption = (option) => {
   }
   return value;
 };
+var getValuesFromOptions = (options) => options.map(getValueFromOption);
 var checkValueBelongsToOption = (value, option) => {
-  if (!option || !value) {
+  if (!option || value === void 0 || value === null || value === "") {
     return false;
   }
   const optionValue = option.value;
   const optionText = option.getTextLabel();
-  return value === optionValue || value === optionText;
+  return String(value) === String(optionValue) || String(value) === optionText;
 };
 
 export {
@@ -57,6 +58,7 @@ export {
   createElementFromTemplateResult,
   createOptionFromDifferentTypes,
   getValueFromOption,
+  getValuesFromOptions,
   checkValueBelongsToOption
 };
-//# sourceMappingURL=chunk.BWTMFHNM.js.map
+//# sourceMappingURL=chunk.FVIRHFY6.js.map

package/dist/chunks/{chunk.BWTMFHNM.js.map → chunk.FVIRHFY6.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/combobox/utils.ts"],
-  "sourcesContent": ["import { type TemplateResult, html, render } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type SynOptGroup from '../optgroup/optgroup.js';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * Get a list of all assigned elements for a given slot\n * @param slot The slot to query\n * @returns Flattened list of assigned elements\n */\nexport const getAssignedElementsForSlot = (slot: HTMLSlotElement) => Array.from(\n  slot.assignedElements({ flatten: true }),\n) as HTMLElement[];\n\n/**\n * Retrieves the option or nested options from the provided HTMLElement.\n *\n * @param item - The HTMLElement representing the option or containing nested options.\n * @returns The found syn-option(s)\n */\nexport const getOptionOrNestedOptions = (item: HTMLElement): SynOption | SynOption[] => (\n  item.tagName.toLocaleLowerCase() === 'syn-option' ? item as SynOption : Array.from(item.querySelectorAll<SynOption>(':scope > syn-option'))\n);\n\n/**\n * Check if an item is a syn-optgroup\n * @param item The item to check for\n * @returns True if the item is a SynOptgroup, false otherwise\n */\nexport const isOptgroup = (item: HTMLElement): item is SynOptGroup => (\n  item.tagName.toLocaleLowerCase() === 'syn-optgroup'\n);\n\n/**\n * Get a list of only Option elements\n * @param items List of items to check for\n * @returns New array of all found syn-nav-items\n */\nexport const getAllOptions = (items: HTMLElement[]) => items.map(getOptionOrNestedOptions);\n\n/**\n * Get a list of only Optgroup elements\n * @param items List of items to check for\n * @returns New array of all found syn-optgroup's\n */\nexport const filterOnlyOptgroups = (items: HTMLElement[]) => items.filter(isOptgroup);\n\n/**\n * Normalize a string by removing accents and converting to lowercase\n * @param str The string to normalize\n * @returns The normalized string\n */\nexport const normalizeString = (str: string) => str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '').toLowerCase();\n\n/**\n * Creates a `SynOption` element from a given `TemplateResult`.\n * We assume that the given `TemplateResult` is a <syn-option>.\n *\n * @param template - The `TemplateResult` to be rendered into a `SynOption`.\n * @returns The created SynOption element\n */\nexport const createElementFromTemplateResult = (template: TemplateResult) => {\n  const container = document.createElement('div');\n  render(template, container);\n  return container.firstElementChild as HTMLElement;\n};\n\nconst getOptionOrUndefined = (element: HTMLElement) => (element.tagName.toLocaleLowerCase() === 'syn-option' ? element as SynOption : undefined);\n\n/**\n * This function takes an input of type `TemplateResult`, `string`, or `HTMLElement`\n * and creates an SynOption from it.\n *\n * @param option - The option which can be of type `TemplateResult`, `string` or `HTMLElement`.\n * @returns The created SynOption or undefined if the option was not a valid type.\n */\nexport const createOptionFromDifferentTypes = (option: TemplateResult | string | HTMLElement) => {\n  if (!option) return undefined;\n\n  if (option instanceof HTMLElement) {\n    return getOptionOrUndefined(option);\n  }\n\n  if (typeof option === 'string') {\n    const template = html`${unsafeHTML(option)}`;\n    const element = createElementFromTemplateResult(template);\n    return getOptionOrUndefined(element);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(option, '_$litType$')) {\n    const element = createElementFromTemplateResult(option);\n    return getOptionOrUndefined(element);\n  }\n\n  return undefined;\n};\n\n/**\n * Gets the value from an option. If an option has no value, it will use the text label.\n * @param option The syn-option to get the value from\n * @returns The value of the option\n */\nexport const getValueFromOption = (option: SynOption) => {\n  const { value } = option;\n  if (value === undefined || value === null || value === '') {\n    // If the option has no value, use the text label\n    return option.getTextLabel();\n  }\n  return value;\n};\n\n/**\n * Check if a value belongs to the value or text label of an option.\n * @param value The value to check\n * @param option The option to check against\n * @returns True if the value belongs to the option, false otherwise\n */\nexport const checkValueBelongsToOption = (value: string, option: SynOption | undefined) => {\n  if (!option || !value) {\n    return false;\n  }\n\n  const optionValue = option.value;\n  const optionText = option.getTextLabel();\n  return value === optionValue || value === optionText;\n};\n"],
-  "mappings": ";AAAA,SAA8B,MAAM,cAAc;AAClD,SAAS,kBAAkB;AASpB,IAAM,6BAA6B,CAAC,SAA0B,MAAM;AAAA,EACzE,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAAC;AACzC;AAQO,IAAM,2BAA2B,CAAC,SACvC,KAAK,QAAQ,kBAAkB,MAAM,eAAe,OAAoB,MAAM,KAAK,KAAK,iBAA4B,qBAAqB,CAAC;AAQrI,IAAM,aAAa,CAAC,SACzB,KAAK,QAAQ,kBAAkB,MAAM;AAQhC,IAAM,gBAAgB,CAAC,UAAyB,MAAM,IAAI,wBAAwB;AAOlF,IAAM,sBAAsB,CAAC,UAAyB,MAAM,OAAO,UAAU;AAO7E,IAAM,kBAAkB,CAAC,QAAgB,IAAI,UAAU,KAAK,EAAE,QAAQ,oBAAoB,EAAE,EAAE,YAAY;AAS1G,IAAM,kCAAkC,CAAC,aAA6B;AAC3E,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,SAAO,UAAU,SAAS;AAC1B,SAAO,UAAU;AACnB;AAEA,IAAM,uBAAuB,CAAC,YAA0B,QAAQ,QAAQ,kBAAkB,MAAM,eAAe,UAAuB;AAS/H,IAAM,iCAAiC,CAAC,WAAkD;AAC/F,MAAI,CAAC,OAAQ,QAAO;AAEpB,MAAI,kBAAkB,aAAa;AACjC,WAAO,qBAAqB,MAAM;AAAA,EACpC;AAEA,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,WAAW,OAAO,WAAW,MAAM,CAAC;AAC1C,UAAM,UAAU,gCAAgC,QAAQ;AACxD,WAAO,qBAAqB,OAAO;AAAA,EACrC;AAEA,MAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,GAAG;AAC9D,UAAM,UAAU,gCAAgC,MAAM;AACtD,WAAO,qBAAqB,OAAO;AAAA,EACrC;AAEA,SAAO;AACT;AAOO,IAAM,qBAAqB,CAAC,WAAsB;AACvD,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AAEzD,WAAO,OAAO,aAAa;AAAA,EAC7B;AACA,SAAO;AACT;AAQO,IAAM,4BAA4B,CAAC,OAAe,WAAkC;AACzF,MAAI,CAAC,UAAU,CAAC,OAAO;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,OAAO,aAAa;AACvC,SAAO,UAAU,eAAe,UAAU;AAC5C;",
+  "sourcesContent": ["import { type TemplateResult, html, render } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type SynOptGroup from '../optgroup/optgroup.js';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * Get a list of all assigned elements for a given slot\n * @param slot The slot to query\n * @returns Flattened list of assigned elements\n */\nexport const getAssignedElementsForSlot = (slot: HTMLSlotElement) => Array.from(\n  slot.assignedElements({ flatten: true }),\n) as HTMLElement[];\n\n/**\n * Retrieves the option or nested options from the provided HTMLElement.\n *\n * @param item - The HTMLElement representing the option or containing nested options.\n * @returns The found syn-option(s)\n */\nexport const getOptionOrNestedOptions = (item: HTMLElement): SynOption | SynOption[] => (\n  item.tagName.toLocaleLowerCase() === 'syn-option' ? item as SynOption : Array.from(item.querySelectorAll<SynOption>(':scope > syn-option'))\n);\n\n/**\n * Check if an item is a syn-optgroup\n * @param item The item to check for\n * @returns True if the item is a SynOptgroup, false otherwise\n */\nexport const isOptgroup = (item: HTMLElement): item is SynOptGroup => (\n  item.tagName.toLocaleLowerCase() === 'syn-optgroup'\n);\n\n/**\n * Get a list of only Option elements\n * @param items List of items to check for\n * @returns New array of all found syn-nav-items\n */\nexport const getAllOptions = (items: HTMLElement[]) => items.map(getOptionOrNestedOptions);\n\n/**\n * Get a list of only Optgroup elements\n * @param items List of items to check for\n * @returns New array of all found syn-optgroup's\n */\nexport const filterOnlyOptgroups = (items: HTMLElement[]) => items.filter(isOptgroup);\n\n/**\n * Normalize a string by removing accents and converting to lowercase\n * @param str The string to normalize\n * @returns The normalized string\n */\nexport const normalizeString = (str: string) => str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '').toLowerCase();\n\n/**\n * Creates a `SynOption` element from a given `TemplateResult`.\n * We assume that the given `TemplateResult` is a <syn-option>.\n *\n * @param template - The `TemplateResult` to be rendered into a `SynOption`.\n * @returns The created SynOption element\n */\nexport const createElementFromTemplateResult = (template: TemplateResult) => {\n  const container = document.createElement('div');\n  render(template, container);\n  return container.firstElementChild as HTMLElement;\n};\n\nconst getOptionOrUndefined = (element: HTMLElement) => (element.tagName.toLocaleLowerCase() === 'syn-option' ? element as SynOption : undefined);\n\n/**\n * This function takes an input of type `TemplateResult`, `string`, or `HTMLElement`\n * and creates an SynOption from it.\n *\n * @param option - The option which can be of type `TemplateResult`, `string` or `HTMLElement`.\n * @returns The created SynOption or undefined if the option was not a valid type.\n */\nexport const createOptionFromDifferentTypes = (option: TemplateResult | string | HTMLElement) => {\n  if (!option) return undefined;\n\n  if (option instanceof HTMLElement) {\n    return getOptionOrUndefined(option);\n  }\n\n  if (typeof option === 'string') {\n    const template = html`${unsafeHTML(option)}`;\n    const element = createElementFromTemplateResult(template);\n    return getOptionOrUndefined(element);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(option, '_$litType$')) {\n    const element = createElementFromTemplateResult(option);\n    return getOptionOrUndefined(element);\n  }\n\n  return undefined;\n};\n\n/**\n * Gets the value from an option. If an option has no value, it will use the text label.\n * @param option The syn-option to get the value from\n * @returns The value of the option\n */\nexport const getValueFromOption = (option: SynOption) => {\n  const { value } = option;\n  if (value === undefined || value === null || value === '') {\n    // If the option has no value, use the text label\n    return option.getTextLabel();\n  }\n  return value;\n};\n\n/**\n * Get the values for options. If an option has no value, it will use the text label.\n *\n * @param options List of syn-options to get the values from\n * @returns The values of the options\n */\nexport const getValuesFromOptions = (options: SynOption[]) => options.map(getValueFromOption);\n\n/**\n * Check if a value belongs to the value or text label of an option.\n * @param value The value to check\n * @param option The option to check against\n * @returns True if the value belongs to the option, false otherwise\n */\nexport const checkValueBelongsToOption = (value: string | number, option: SynOption | undefined) => {\n  if (!option || value === undefined || value === null || value === '') {\n    return false;\n  }\n\n  const optionValue = option.value;\n  const optionText = option.getTextLabel();\n  return String(value) === String(optionValue) || String(value) === optionText;\n};\n"],
+  "mappings": ";AAAA,SAA8B,MAAM,cAAc;AAClD,SAAS,kBAAkB;AASpB,IAAM,6BAA6B,CAAC,SAA0B,MAAM;AAAA,EACzE,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAAC;AACzC;AAQO,IAAM,2BAA2B,CAAC,SACvC,KAAK,QAAQ,kBAAkB,MAAM,eAAe,OAAoB,MAAM,KAAK,KAAK,iBAA4B,qBAAqB,CAAC;AAQrI,IAAM,aAAa,CAAC,SACzB,KAAK,QAAQ,kBAAkB,MAAM;AAQhC,IAAM,gBAAgB,CAAC,UAAyB,MAAM,IAAI,wBAAwB;AAOlF,IAAM,sBAAsB,CAAC,UAAyB,MAAM,OAAO,UAAU;AAO7E,IAAM,kBAAkB,CAAC,QAAgB,IAAI,UAAU,KAAK,EAAE,QAAQ,oBAAoB,EAAE,EAAE,YAAY;AAS1G,IAAM,kCAAkC,CAAC,aAA6B;AAC3E,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,SAAO,UAAU,SAAS;AAC1B,SAAO,UAAU;AACnB;AAEA,IAAM,uBAAuB,CAAC,YAA0B,QAAQ,QAAQ,kBAAkB,MAAM,eAAe,UAAuB;AAS/H,IAAM,iCAAiC,CAAC,WAAkD;AAC/F,MAAI,CAAC,OAAQ,QAAO;AAEpB,MAAI,kBAAkB,aAAa;AACjC,WAAO,qBAAqB,MAAM;AAAA,EACpC;AAEA,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,WAAW,OAAO,WAAW,MAAM,CAAC;AAC1C,UAAM,UAAU,gCAAgC,QAAQ;AACxD,WAAO,qBAAqB,OAAO;AAAA,EACrC;AAEA,MAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,GAAG;AAC9D,UAAM,UAAU,gCAAgC,MAAM;AACtD,WAAO,qBAAqB,OAAO;AAAA,EACrC;AAEA,SAAO;AACT;AAOO,IAAM,qBAAqB,CAAC,WAAsB;AACvD,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AAEzD,WAAO,OAAO,aAAa;AAAA,EAC7B;AACA,SAAO;AACT;AAQO,IAAM,uBAAuB,CAAC,YAAyB,QAAQ,IAAI,kBAAkB;AAQrF,IAAM,4BAA4B,CAAC,OAAwB,WAAkC;AAClG,MAAI,CAAC,UAAU,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACpE,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,OAAO,aAAa;AACvC,SAAO,OAAO,KAAK,MAAM,OAAO,WAAW,KAAK,OAAO,KAAK,MAAM;AACpE;",
   "names": []
 }

package/dist/chunks/{chunk.NLYVOJGK.js → chunk.FXJLG622.js}

@@ -20,4 +20,4 @@ var component_styles_default = css`
 export {
   component_styles_default
 };
-//# sourceMappingURL=chunk.NLYVOJGK.js.map
+//# sourceMappingURL=chunk.FXJLG622.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles/component.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.XTWO6ZZW.js → chunk.GPP4D4HH.js}

@@ -310,4 +310,4 @@ var select_styles_default = css`
 export {
   select_styles_default
 };
-//# sourceMappingURL=chunk.XTWO6ZZW.js.map
+//# sourceMappingURL=chunk.GPP4D4HH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/select/select.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: var(--syn-z-index-dropdown);\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    letter-spacing: var(--syn-input-letter-spacing);\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition:\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) border,\n      var(--syn-transition-fast) box-shadow,\n      var(--syn-transition-fast) background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--syn-input-color);\n    cursor: inherit;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  .select__display-input::placeholder {\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--syn-input-color-hover);\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .select__tags::slotted(syn-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(syn-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--syn-input-background-color-disabled);\n    border-color: var(--syn-input-border-color-disabled);\n    color: var(--syn-input-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--syn-input-background-color-focus);\n    border-color: var(--syn-input-border-color-focus);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n  }\n\n/* Sizes */\n  .select--small .select__combobox {\n    border-radius: var(--syn-input-border-radius-small);\n    font-size: var(--syn-input-font-size-small);\n    min-height: var(--syn-input-height-small);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-small);\n  }\n\n  .select--small .select__clear {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .select--small .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {\n    padding-block: 2px;\n    padding-inline-start: 0;\n  }\n\n  .select--small .select__tags {\n    gap: 2px;\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--syn-input-border-radius-medium);\n    font-size: var(--syn-input-font-size-medium);\n    min-height: var(--syn-input-height-medium);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-medium);\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {\n    padding-inline-start: 0;\n    padding-block: 3px;\n  }\n\n  .select--medium .select__tags {\n    gap: 3px;\n  }\n\n  .select--large .select__combobox {\n    border-radius: var(--syn-input-border-radius-large);\n    font-size: var(--syn-input-font-size-large);\n    min-height: var(--syn-input-height-large);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-large);\n  }\n\n  .select--large .select__clear {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .select--large .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-large);\n  }\n\n  .select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {\n    padding-inline-start: 0;\n    padding-block: 4px;\n  }\n\n  .select--large .select__tags {\n    gap: 4px;\n  }/* Prefix and Suffix */\n  .select__prefix,\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--syn-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--syn-transition-fast) color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--syn-input-icon-color-hover);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: var(--syn-transition-medium) rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    box-shadow: var(--syn-shadow-large);\n    background: var(--syn-panel-background-color);\n    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-medium);\n    padding-block: var(--syn-spacing-x-small);\n    padding-inline: 0;\n    overflow: auto;\n    overscroll-behavior: none;\n\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n  }\n\n  .select__listbox ::slotted(syn-divider) {\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  .select__listbox ::slotted(small) {\n    display: block;\n    font-size: var(--syn-font-size-small);\n    font-weight: var(--syn-font-weight-semibold);\n    color: var(--syn-color-neutral-500);\n    padding-block: var(--syn-spacing-2x-small);\n    padding-inline: var(--syn-spacing-x-large);\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.DZSZDFCN.js → chunk.H5ZIVYK5.js}

@@ -1,37 +1,37 @@
 import {
   SubmenuController
-} from "./chunk.KW5TWA5Y.js";
+} from "./chunk.BC532CB6.js";
 import {
   menu_item_custom_styles_default
 } from "./chunk.UNYO3GI7.js";
 import {
   menu_item_styles_default
-} from "./chunk.FSWTBNSI.js";
+} from "./chunk.N7HN275B.js";
 import {
   SynPopup
-} from "./chunk.P3W7SDQW.js";
+} from "./chunk.T3OH2LR6.js";
 import {
   SynSpinner
-} from "./chunk.KCLOTN4Z.js";
+} from "./chunk.2RS24S7K.js";
 import {
   HasSlotController,
   getTextContent
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.Q6XDV7O7.js";
+} from "./chunk.7XSJ52RM.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -241,4 +241,4 @@ SynMenuItem = __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.DZSZDFCN.js.map
+//# sourceMappingURL=chunk.H5ZIVYK5.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/menu-item.component.ts", "../../src/internal/watchEvent.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getTextContent, HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { SubmenuController } from './submenu-controller.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynPopup from '../popup/popup.component.js';\nimport SynSpinner from '../spinner/spinner.component.js';\nimport styles from './menu-item.styles.js';\nimport customStyles from './menu-item.custom.styles.js';\nimport { emitEventForPropertyUpdates } from '../../internal/watchEvent.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-design-system.github.io/?path=/docs/components-syn-menu-item--docs\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 */\n@emitEventForPropertyUpdates(['type', 'loading'], {\n  waitUntilFirstUpdated: true,\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  private readonly localize = new LocalizeController(this);\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.localize.dir() === 'rtl';\n    const isSubmenuExpanded = this.submenuController.isExpanded();\n\n    return html`\n      <div\n        id=\"anchor\"\n        part=\"base\"\n        class=${classMap({\n          'menu-item': true,\n          'menu-item--rtl': isRtl,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--loading': this.loading,\n          'menu-item--has-submenu': this.isSubmenu(),\n          'menu-item--submenu-expanded': isSubmenuExpanded\n        })}\n        ?aria-haspopup=\"${this.isSubmenu()}\"\n        ?aria-expanded=\"${isSubmenuExpanded ? true : false}\"\n      >\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <syn-icon name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        </span>\n\n        <slot name=\"prefix\" part=\"prefix\" class=\"menu-item__prefix\"></slot>\n\n        <slot part=\"label\" class=\"menu-item__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n\n        <slot name=\"suffix\" part=\"suffix\" class=\"menu-item__suffix\"></slot>\n\n        <span part=\"submenu-icon\" class=\"menu-item__chevron\">\n          <syn-icon name=\"chevron-down\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        </span>\n\n        ${this.submenuController.renderSubmenu()}\n        ${this.loading ? html` <syn-spinner part=\"spinner\" exportparts=\"base:spinner__base\"></syn-spinner> ` : ''}\n      </div>\n    `;\n  }\n}\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropertyValues } from 'lit';\nimport type SynergyElement from './synergy-element.js';\n\ntype Constructor<T = object> = new (...args: any[]) => T;\n\ninterface DecoratorOptions {\n  /**\n   * If true, will only start watching after the initial updated call\n   */\n  waitUntilFirstUpdated?: boolean;\n}\n\n/**\n * Class decorator that automatically emits a `syn-attributes-changed` event\n * when at least one of the provided attributes have changed.\n * The event will contain an array of all changed properties, including their\n * - attribute name\n * - old value and\n * - new value.\n *\n * @example\n * ```ts\n * class OriginalClass extends SynergyElement {}\n * export const MyComponent = emitEventForPropertyUpdates(['attribute1', 'attribute2'])(BaseClass);\n *\n * // Create the component, providing initial values for the changed attribute list\n * const myComponent = document.createElement('my-component');\n * myComponent.attribute1 = 'initial value for attribute 1';\n * myComponent.attribute2 = 'initial value for attribute 2';\n *\n * // Create a container and listen for the event\n * const container = document.createElement('div');\n * container.addEventListener('syn-attributes-changed', (event: SynAttributesChangedEvent) => {\n *   // We do not want to propagate the event further\n *   event.stopImmidiatePropagation();\n *\n *   console.log(event.detail);\n * });\n *\n * // Add the component to the container\n * container.appendChild(myComponent);\n *\n * // Change the attributes\n * myComponent.attribute1 = 'value for attribute 1';\n * myComponent.attribute2 = 'value for attribute 2';\n *\n * // Output:\n * // [\n * //   {\n * //     attribute: 'attribute1',\n * //     oldValue: 'initial value for attribute 1',\n * //     newValue: 'value for attribute 1'\n * //   },\n * //   {\n * //     attribute: 'attribute2',\n * //     oldValue: 'initial value for attribute 2',\n * //     newValue: 'value for attribute 2'\n * //   }\n * // ]\n * ```\n */\nexport function emitEventForPropertyUpdates(\n  watchedProperties: string[],\n  options?: DecoratorOptions,\n) {\n  const resolvedOptions: Required<DecoratorOptions> = {\n    waitUntilFirstUpdated: false,\n    ...options,\n  };\n\n  return <T extends Constructor<SynergyElement>>(Proto: T): T => class extends Proto {\n    // True if the event was emitted, false otherwise\n    #synPrivateFirstChangeHasBeenEmitted = !resolvedOptions.waitUntilFirstUpdated;\n\n    updated(changedProps: PropertyValues) {\n      if (!this.#synPrivateFirstChangeHasBeenEmitted) {\n        this.#synPrivateFirstChangeHasBeenEmitted = true;\n        return;\n      }\n\n      // Get the list of all changed properties\n      const monitoredChangedProperties = Array\n        .from(changedProps)\n        .filter(([key]) => watchedProperties.includes(key as string));\n\n      // If there are no changed properties, return before sending anything\n      if (monitoredChangedProperties.length === 0) {\n        super.updated(changedProps);\n        return;\n      }\n\n      // Send out the event with all changed properties\n      const detail = monitoredChangedProperties.map(([key, value]) => ({\n        attribute: key,\n        newValue: this[key as keyof this],\n        oldValue: value,\n      }));\n\n      this.emit('syn-attributes-changed', {\n        detail,\n      });\n      super.updated(changedProps);\n    }\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.UT3DWYFM.js → chunk.H6EHQYZA.js}

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "./chunk.U5757NSE.js";
+} from "./chunk.J3GDDM6Q.js";
 
 // src/utilities/form.ts
 function serialize(form) {
@@ -37,4 +37,4 @@ export {
   serialize,
   getFormControls
 };
-//# sourceMappingURL=chunk.UT3DWYFM.js.map
+//# sourceMappingURL=chunk.H6EHQYZA.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utilities/form.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { formCollections } from '../internal/form.js';\n\n/**\n * Serializes a form and returns a plain object. If a form control with the same name appears more than once, the\n * property will be converted to an array.\n */\nexport function serialize(form: HTMLFormElement) {\n  const formData = new FormData(form);\n  const object: Record<string, unknown> = {};\n\n  formData.forEach((value, key) => {\n    if (Reflect.has(object, key)) {\n      const entry = object[key];\n      if (Array.isArray(entry)) {\n        entry.push(value);\n      } else {\n        object[key] = [object[key], value];\n      }\n    } else {\n      object[key] = value;\n    }\n  });\n\n  return object;\n}\n\n/**\n * Returns all form controls that are associated with the specified form. Includes both native and Synergy form\n * controls. Use this function in lieu of the `HTMLFormElement.elements` property, which doesn't recognize Synergy\n * form controls.\n */\nexport function getFormControls(form: HTMLFormElement) {\n  const rootNode = form.getRootNode() as Document | ShadowRoot;\n  const allNodes = [...rootNode.querySelectorAll('*')];\n  const formControls = [...form.elements];\n  const collection = formCollections.get(form);\n  const synergyFormControls = collection ? Array.from(collection) : [];\n\n  // To return form controls in the right order, we sort by DOM index\n  return [...formControls, ...synergyFormControls].sort((a: Element, b: Element) => {\n    if (allNodes.indexOf(a) < allNodes.indexOf(b)) return -1;\n    if (allNodes.indexOf(a) > allNodes.indexOf(b)) return 1;\n    return 0;\n  });\n}\n"],
+  "mappings": ";;;;;AAOO,SAAS,UAAU,MAAuB;AAC/C,QAAM,WAAW,IAAI,SAAS,IAAI;AAClC,QAAM,SAAkC,CAAC;AAEzC,WAAS,QAAQ,CAAC,OAAO,QAAQ;AAC/B,QAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,YAAM,QAAQ,OAAO,GAAG;AACxB,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,cAAM,KAAK,KAAK;AAAA,MAClB,OAAO;AACL,eAAO,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,MACnC;AAAA,IACF,OAAO;AACL,aAAO,GAAG,IAAI;AAAA,IAChB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,SAAS,gBAAgB,MAAuB;AACrD,QAAM,WAAW,KAAK,YAAY;AAClC,QAAM,WAAW,CAAC,GAAG,SAAS,iBAAiB,GAAG,CAAC;AACnD,QAAM,eAAe,CAAC,GAAG,KAAK,QAAQ;AACtC,QAAM,aAAa,gBAAgB,IAAI,IAAI;AAC3C,QAAM,sBAAsB,aAAa,MAAM,KAAK,UAAU,IAAI,CAAC;AAGnE,SAAO,CAAC,GAAG,cAAc,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAY,MAAe;AAChF,QAAI,SAAS,QAAQ,CAAC,IAAI,SAAS,QAAQ,CAAC,EAAG,QAAO;AACtD,QAAI,SAAS,QAAQ,CAAC,IAAI,SAAS,QAAQ,CAAC,EAAG,QAAO;AACtD,WAAO;AAAA,EACT,CAAC;AACH;",
+  "names": []
+}