@synergy-design-system/components 2.77.0 → 3.0.0

package/dist/chunks/{chunk.L5NLWYJZ.js → chunk.ATT3RT4A.js}

@@ -7,36 +7,36 @@ import {
 import {
   getDeepestActiveElement,
   getTabbableBoundary
-} from "./chunk.G76BKD7B.js";
+} from "./chunk.DQKV5FSY.js";
 import {
   SynPopup
-} from "./chunk.MGWPQRJ7.js";
+} from "./chunk.5QGW4QZT.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.G6ITZTTW.js";
+} from "./chunk.6EKUFYET.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.7JGKUB4A.js";
+} from "./chunk.ADSEQZBF.js";
+import {
+  watch
+} from "./chunk.JE5Y2YD7.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass
-} from "./chunk.Z4XV3SMG.js";
+} from "./chunk.MO2GTRUM.js";
 
 // src/components/dropdown/dropdown.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -53,7 +53,6 @@ var SynDropdown = class extends SynergyElement {
     this.stayOpenOnSelect = false;
     this.distance = 0;
     this.skidding = 0;
-    this.hoist = false;
     this.sync = void 0;
     this.handleKeyDown = (event) => {
       if (this.open && event.key === "Escape") {
@@ -297,7 +296,6 @@ var SynDropdown = class extends SynergyElement {
         placement=${this.placement}
         distance=${this.distance}
         skidding=${this.skidding}
-        strategy=${this.hoist ? "fixed" : "absolute"}
         flip
         shift
         auto-size="vertical"
@@ -358,9 +356,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], SynDropdown.prototype, "skidding", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SynDropdown.prototype, "hoist", 2);
 __decorateClass([
   property({ reflect: true })
 ], SynDropdown.prototype, "sync", 2);
@@ -385,4 +380,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.L5NLWYJZ.js.map
+//# sourceMappingURL=chunk.ATT3RT4A.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/dropdown/dropdown.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { getDeepestActiveElement } from '../../internal/active-elements.js';\nimport { getTabbableBoundary } from '../../internal/tabbable.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynPopup from '../popup/popup.component.js';\nimport styles from './dropdown.styles.js';\nimport customStyles from './dropdown.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynSelectEvent } from '../../events/syn-select.js';\nimport type SynButton from '../button/button.js';\nimport type SynIconButton from '../icon-button/icon-button.js';\nimport type SynMenu from '../menu/menu.js';\n\n/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.\n *\n * @event syn-show - Emitted when the dropdown opens.\n * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event syn-hide - Emitted when the dropdown closes.\n * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<syn-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */\nexport default class SynDropdown extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-popup': SynPopup };\n\n  @query('.dropdown') popup: SynPopup;\n  @query('.dropdown__trigger') trigger: HTMLSlotElement;\n  @query('.dropdown__panel') panel: HTMLSlotElement;\n\n  private readonly localize = new LocalizeController(this);\n  private closeWatcher: CloseWatcher | null;\n\n  /**\n   * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\n   * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @property({ reflect: true }) placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /** Disables the dropdown so the panel will not open. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\n   * dropdowns that allow for multiple interactions.\n   */\n  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true }) stayOpenOnSelect = false;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n   * components that use a dropdown internally.\n   */\n  @property({ attribute: false }) containingElement?: HTMLElement;\n\n  /** The distance in pixels from which to offset the panel away from its trigger. */\n  @property({ type: Number }) distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its trigger. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Syncs the popup width or height to that of the trigger element.\n   */\n  @property({ reflect: true }) sync: 'width' | 'height' | 'both' | undefined = undefined;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n  }\n\n  firstUpdated() {\n    this.panel.hidden = !this.open;\n\n    // If the dropdown is visible on init, update its position\n    if (this.open) {\n      this.addOpenListeners();\n      this.popup.active = true;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.hide();\n  }\n\n  focusOnTrigger() {\n    const trigger = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n    if (typeof trigger?.focus === 'function') {\n      trigger.focus();\n    }\n  }\n\n  getMenu() {\n    return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'syn-menu') as\n      | SynMenu\n      | undefined;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation\n    // in case any ancestors are also listening for this key.\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n      event.stopPropagation();\n      this.focusOnTrigger();\n      this.hide();\n      return;\n    }\n\n    // Handle tabbing\n    if (event.key === 'Tab') {\n      // Tabbing within an open menu should close the dropdown and refocus the trigger\n      if (this.open && document.activeElement?.tagName.toLowerCase() === 'syn-menu-item') {\n        event.preventDefault();\n        this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      const computeClosestContaining = (element: Element | null | undefined, tagName: string): Element | null => {\n        if (!element) return null;\n\n        const closest = element.closest(tagName);\n        if (closest) return closest;\n\n        const rootNode = element.getRootNode();\n        if (rootNode instanceof ShadowRoot) {\n          return computeClosestContaining(rootNode.host, tagName);\n        }\n\n        return null;\n      };\n\n      // Tabbing outside of the containing element closes the panel\n      //\n      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        const activeElement =\n          this.containingElement?.getRootNode() instanceof ShadowRoot\n            ? getDeepestActiveElement()\n            : document.activeElement;\n\n        if (\n          !this.containingElement ||\n          computeClosestContaining(activeElement, this.containingElement.tagName.toLowerCase()) !==\n            this.containingElement\n        ) {\n          this.hide();\n        }\n      });\n    }\n  };\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath();\n    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  };\n\n  private handlePanelSelect = (event: SynSelectEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'syn-menu') {\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  handleTriggerClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n      this.focusOnTrigger();\n    }\n  }\n\n  async handleTriggerKeyDown(event: KeyboardEvent) {\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    if ([' ', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n      this.handleTriggerClick();\n      return;\n    }\n\n    const menu = this.getMenu();\n\n    if (menu) {\n      const menuItems = menu.getAllItems();\n      const firstMenuItem = menuItems[0];\n      const lastMenuItem = menuItems[menuItems.length - 1];\n\n      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n      // faster navigation.\n      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n        event.preventDefault();\n\n        // Show the menu if it's not already open\n        if (!this.open) {\n          this.show();\n\n          // Wait for the dropdown to open before focusing, but not the animation\n          await this.updateComplete;\n        }\n\n        if (menuItems.length > 0) {\n          // Focus on the first/last menu item after showing\n          this.updateComplete.then(() => {\n            if (event.key === 'ArrowDown' || event.key === 'Home') {\n              menu.setCurrentItem(firstMenuItem);\n              firstMenuItem.focus();\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              lastMenuItem.focus();\n            }\n          });\n        }\n      }\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <syn-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n  //\n  updateAccessibleTrigger() {\n    const assignedElements = this.trigger.assignedElements({ flatten: true }) as HTMLElement[];\n    const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);\n    let target: HTMLElement;\n\n    if (accessibleTrigger) {\n      switch (accessibleTrigger.tagName.toLowerCase()) {\n        // Synergy buttons have to update the internal button so it's announced correctly by screen readers\n        case 'syn-button':\n        case 'syn-icon-button':\n          target = (accessibleTrigger as SynButton | SynIconButton).button;\n          break;\n\n        default:\n          target = accessibleTrigger;\n      }\n\n      target.setAttribute('aria-haspopup', 'true');\n      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  /** Shows the dropdown panel. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the dropdown panel */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  /**\n   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  reposition() {\n    this.popup.reposition();\n  }\n\n  addOpenListeners() {\n    this.panel.addEventListener('syn-select', this.handlePanelSelect);\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => {\n        this.hide();\n        this.focusOnTrigger();\n      };\n    } else {\n      this.panel.addEventListener('keydown', this.handleKeyDown);\n    }\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\n    if (this.panel) {\n      this.panel.removeEventListener('syn-select', this.handlePanelSelect);\n      this.panel.removeEventListener('keydown', this.handleKeyDown);\n    }\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    this.closeWatcher?.destroy();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n\n    if (this.open) {\n      // Show\n      this.emit('syn-show');\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      this.emit('syn-hide');\n      this.removeOpenListeners();\n\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  render() {\n    return html`\n      <syn-popup\n        part=\"base\"\n        exportparts=\"popup:base__popup\"\n        id=\"dropdown\"\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=${ifDefined(this.sync ? this.sync : undefined)}\n        class=${classMap({\n          dropdown: true,\n          'dropdown--open': this.open\n        })}\n      >\n        <slot\n          name=\"trigger\"\n          slot=\"anchor\"\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n        ></slot>\n\n        <div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby=\"dropdown\">\n          <slot part=\"panel\" class=\"dropdown__panel\"></slot>\n        </div>\n      </syn-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('dropdown.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('dropdown.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n"],
+  "mappings": "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",
+  "names": ["_a"]
+}

package/dist/chunks/{chunk.5CNWQEKR.js → chunk.B3UAPU32.js}

@@ -1,24 +1,24 @@
-import {
-  badge_custom_styles_default
-} from "./chunk.CCEFC33U.js";
-import {
-  badge_styles_default
-} from "./chunk.Y5TMYX2L.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
-} from "./chunk.HYFCK7MM.js";
+} from "./chunk.KSWDM4HW.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
+import {
+  badge_custom_styles_default
+} from "./chunk.SA423NRC.js";
+import {
+  badge_styles_default
+} from "./chunk.Y5TMYX2L.js";
 import {
   __decorateClass
-} from "./chunk.Z4XV3SMG.js";
+} from "./chunk.MO2GTRUM.js";
 
 // src/components/badge/badge.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.5CNWQEKR.js.map
+//# sourceMappingURL=chunk.B3UAPU32.js.map

package/dist/chunks/{chunk.ATSI7CIG.js → chunk.B56PMMC4.js}

@@ -1,27 +1,27 @@
 import {
   header_styles_default
-} from "./chunk.EK4TK5MY.js";
+} from "./chunk.5OXFZJYX.js";
 import {
   icon_default
-} from "./chunk.M7H53KXO.js";
+} from "./chunk.4ZEHQOJ3.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
+import {
+  watch
+} from "./chunk.JE5Y2YD7.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass
-} from "./chunk.Z4XV3SMG.js";
+} from "./chunk.MO2GTRUM.js";
 
 // src/components/header/header.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -206,4 +206,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.ATSI7CIG.js.map
+//# sourceMappingURL=chunk.B56PMMC4.js.map

package/dist/chunks/{chunk.S74CFZ4Z.js → chunk.BL5JW7YS.js}

@@ -36,18 +36,18 @@ var option_custom_styles_default = css`
   }
 
   .option:not(.option--current) {
-    color: var(--syn-option-color, var(--syn-typography-color-text));
+    color: var(--syn-option-color);
   }
 
   .option--current,
   .option--current.option--hover:not(.option--disabled) {
-    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-active);
+    color: var(--syn-option-color-active);
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   /** #429: Use token for opacity */
@@ -56,8 +56,8 @@ var option_custom_styles_default = css`
   }
 
   .option--current.option--disabled {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   .option__label {
@@ -65,7 +65,7 @@ var option_custom_styles_default = css`
   }
 
   .option__check {
-    color: var(--syn-option-check-color, var(--syn-color-primary-600));
+    color: var(--syn-option-check-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
@@ -75,11 +75,11 @@ var option_custom_styles_default = css`
 
   /* Invert the check mark when keyboard navigation is used */
   .option--current .option__check {
-    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-active);
   }
 
   .option--hover:not(.option--current) .option__check {
-    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-hover);
   }
 
   /* Use larger spacing between icons and content */
@@ -94,18 +94,18 @@ var option_custom_styles_default = css`
   /* Set correct icon size when someone uses syn-icon in the slots */
   .option__prefix::slotted(syn-icon),
   .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
+    color: var(--syn-option-icon-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
   .option--hover .option__prefix::slotted(syn-icon),
   .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-hover);
   }
 
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-active);
   }
 
   /* This is needed for the highlight styling of the options in syn-combobox */
@@ -119,4 +119,4 @@ var option_custom_styles_default = css`
 export {
   option_custom_styles_default
 };
-//# sourceMappingURL=chunk.S74CFZ4Z.js.map
+//# sourceMappingURL=chunk.BL5JW7YS.js.map

package/dist/chunks/{chunk.S74CFZ4Z.js.map → chunk.BL5JW7YS.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/option/option.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * The syn-option is now able to adjust its height from a parent item\n   * This is done by exposing multiple css variables to the outside:\n   *\n   * --option-min-height (defaults to 48px) The minimal height of an element\n   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use\n   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use\n   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark\n   * \n   * See below for usage of these variables\n   */\n  .option {\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color, var(--syn-typography-color-text));\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  /** #429: Use token for opacity */\n  .option--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color, var(--syn-color-primary-600));\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color, var(--syn-typography-color-text));\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--hover .option__prefix::slotted(syn-icon),\n  .option--hover .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * The syn-option is now able to adjust its height from a parent item\n   * This is done by exposing multiple css variables to the outside:\n   *\n   * --option-min-height (defaults to 48px) The minimal height of an element\n   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use\n   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use\n   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark\n   * \n   * See below for usage of these variables\n   */\n  .option {\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color);\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active);\n    color: var(--syn-option-color-active);\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  /** #429: Use token for opacity */\n  .option--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active);\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover);\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--hover .option__prefix::slotted(syn-icon),\n  .option--hover .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover);\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active);\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.6KN2JP2V.js → chunk.BNHQTT5B.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.VI5FLXBL.js";
+} from "./chunk.JQ4NCOOB.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.6KN2JP2V.js.map
+//# sourceMappingURL=chunk.BNHQTT5B.js.map

package/dist/chunks/{chunk.77CVXMWD.js → chunk.BVV2XKW3.js}

@@ -2,7 +2,7 @@
 import { css } from "lit";
 var breadcrumb_item_custom_styles_default = css`
   .breadcrumb-item {
-    color: var(--syn-breadcrumb-color, var(--syn-color-neutral-500));
+    color: var(--syn-breadcrumb-color);
     font-size: var(--syn-font-size-x-small);
     font-weight: var(--syn-font-weight-semibold);
   }
@@ -80,4 +80,4 @@ var breadcrumb_item_custom_styles_default = css`
 export {
   breadcrumb_item_custom_styles_default
 };
-//# sourceMappingURL=chunk.77CVXMWD.js.map
+//# sourceMappingURL=chunk.BVV2XKW3.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb-item/breadcrumb-item.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .breadcrumb-item {\n    color: var(--syn-breadcrumb-color);\n    font-size: var(--syn-font-size-x-small);\n    font-weight: var(--syn-font-weight-semibold);\n  }\n\n  /**\n   * Make sure to remove the border radius.\n   * Without this, focus will be rounded\n   */\n  .breadcrumb-item__label {\n    border-radius: var(--syn-border-radius-none);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item {\n    font-weight: var(--syn-font-weight-normal);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label {\n    color: var(--syn-typography-color-text);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {\n    color: var(--syn-color-primary-600);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label:active {\n    color: var(--syn-color-primary-950);\n  }\n\n  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {\n    margin-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  /**\n   * Adjust color and font size to match Synergy's typography.\n   */\n  .breadcrumb-item--has-prefix .breadcrumb-item__prefix,\n  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    color: var(--syn-typography-color-text);\n    font-size: var(--syn-spacing-medium);\n  }\n\n  /**\n   * Make sure the color of the last item's prefix and suffix matches the text.\n   */\n  :host(:last-of-type) .breadcrumb-item--has-prefix .breadcrumb-item__prefix,\n  :host(:last-of-type) .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    color: inherit;\n  }\n\n  .breadcrumb-item__separator {\n    font-size: var(--syn-spacing-medium);\n    margin: 0 var(--syn-spacing-x-small) 0 var(--syn-spacing-2x-small);\n  }\n\n  /**\n   * Make sure the direction of the chevron matches the direction of the text.\n   */\n  .breadcrumb-item__separator ::slotted(syn-icon.ltr) {\n    rotate: -90deg;\n  }\n\n  .breadcrumb-item__separator ::slotted(syn-icon.rtl) {\n    rotate: 90deg;\n  }\n\n  .breadcrumb-item__label--drop-down {\n    display: flex;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.5C3IFF3A.js → chunk.CDOWFAH2.js}

@@ -77,13 +77,13 @@ var file_styles_default = css`
    */
   .form-control--user-dragging:not([disabled]) .button::part(base) {
     background: none;
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-interactive-emphasis-color-hover);
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /* Drop Area */
   .droparea {
-    --highlight-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --highlight-color: var(--syn-interactive-emphasis-color);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color);
     border-radius: var(--syn-input-border-radius-medium);
@@ -93,7 +93,7 @@ var file_styles_default = css`
   }
 
   .droparea:focus-visible {
-    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -161,12 +161,12 @@ var file_styles_default = css`
 
   :host(:not([disabled])) .form-control--user-dragging .droparea {
     background: var(--syn-color-primary-50);
-    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);
     cursor: pointer;
   }
 
   :host(:not([disabled])) .droparea:not(:focus-visible):hover {
-    --highlight-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    --highlight-color: var(--syn-interactive-emphasis-color-hover);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);
     cursor: pointer;
@@ -182,4 +182,4 @@ var file_styles_default = css`
 export {
   file_styles_default
 };
-//# sourceMappingURL=chunk.5C3IFF3A.js.map
+//# sourceMappingURL=chunk.CDOWFAH2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/file/file.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .input__control {\n    /**\n     * Visually hide the input type=file without display:none\n     * This is necessary for accessibility reasons and so the native html input validation popup \n     * is shown.\n     */\n    border: 0;\n    clip-path: inset(50%);\n    height: 1px;\n    margin: 0;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  .form-control--droparea .input__control {\n    /* move the input into the center, so the native validation popup is centered to the droparea */\n    left: 50%;\n  }\n\n  .form-control-input {\n    /* needed, so the native validation popup is centered correctly */\n    position: relative;\n  }\n\n  /* Regular Input with button only */\n  .button__wrapper {\n    align-items: center;\n    display: flex;\n    gap: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--small .button__wrapper {\n    gap: var(--syn-input-spacing-small);\n  }\n\n  :host([size=\"large\"]) .button__wrapper {\n    gap: var(--syn-input-spacing-large);\n  }\n\n  /**\n   * The value of the chosen file(s) or the placeholder text\n   */\n  .input__value {\n    color: var(--syn-input-color);\n    font-size: var(--syn-input-label-font-size-medium);\n  }\n\n  .input__value.input__value--hidden {\n    display: none;\n  }\n\n  .input__value--placeholder {\n    color: var(--syn-input-help-text-color);\n  }\n\n  .form-control--small .input__value {\n    font-size: var(--syn-input-label-font-size-small);\n  }\n\n  .form-control--large .input__value {\n    font-size: var(--syn-input-label-font-size-large);\n  }\n\n  /**\n   * Special case for regular inputs:\n   * When the user uses drag and drop, highlight the button with the primary color\n   */\n  .form-control--user-dragging:not([disabled]) .button::part(base) {\n    background: none;\n    border-color: var(--syn-interactive-emphasis-color-hover);\n    color: var(--syn-interactive-emphasis-color-hover);\n  }\n\n  /* Drop Area */\n  .droparea {\n    --highlight-color: var(--syn-interactive-emphasis-color);\n\n    border: var(--syn-input-border-width) dashed var(--syn-input-border-color);\n    border-radius: var(--syn-input-border-radius-medium);\n    font: var(--syn-body-medium-regular);\n    padding: var(--syn-spacing-x-large) var(--syn-spacing-large);\n    transition: var(--syn-transition-medium) background;\n  }\n\n  .droparea:focus-visible {\n    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Adjust the highlight to match an inactive item */\n  :host([disabled]) .droparea {\n    --highlight-color: var(--syn-color-neutral-600);\n  }\n\n  :host([disabled]) .input__value {\n    display: none;\n  }\n\n  .droparea__background {\n    align-items: center;\n    display: flex;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-x-small) var(--syn-spacing-medium);\n  }\n\n  .droparea__icon {\n    align-items: center;\n    color: var(--highlight-color);\n    display: flex;\n    font-size: var(--syn-spacing-3x-large);\n  }\n\n  .droparea__text {\n    display: flex;\n    flex-direction: column;\n    gap: var(--syn-spacing-3x-small);\n    margin: 0;\n  }\n\n  .droparea__text strong {\n    color: var(--highlight-color);\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  /* Sizes */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .form-control--small .droparea {\n    font: var(--syn-body-small-regular);\n  }\n\n  .form-control--small .droparea__icon {\n    font-size: var(--syn-spacing-2x-large)\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  .form-control--large .droparea {\n    font: var(--syn-body-large-regular);\n  }\n\n  .form-control--large .droparea__icon {\n    font-size: var(--syn-spacing-4x-large)\n  }\n\n  /* Disabled Styles */\n  :host([disabled]) .droparea,\n  :host([disabled]) .input__value {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  :host(:not([disabled])) .form-control--user-dragging .droparea {\n    background: var(--syn-color-primary-50);\n    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);\n    cursor: pointer;\n  }\n\n  :host(:not([disabled])) .droparea:not(:focus-visible):hover {\n    --highlight-color: var(--syn-interactive-emphasis-color-hover);\n\n    border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);\n    cursor: pointer;\n  }\n\n  /* Validation */\n  /* stylelint-disable-next-line no-descending-specificity */\n  :host([data-user-invalid]:not([disabled])) .droparea {\n    border: var(--syn-input-border-width) dashed var(--syn-input-focus-ring-error);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,sBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.GPST4OZW.js → chunk.D5GEYHUG.js}

@@ -1,6 +1,6 @@
 import {
   spinner_custom_styles_default
-} from "./chunk.4WQZFNSE.js";
+} from "./chunk.WQMTAEYE.js";
 import {
   spinner_styles_default
 } from "./chunk.JLXCLATV.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.GPST4OZW.js.map
+//# sourceMappingURL=chunk.D5GEYHUG.js.map

package/dist/chunks/{chunk.6YNHGMLP.js → chunk.DHT3ZN7B.js}

@@ -1,44 +1,44 @@
 import {
   SubmenuController
-} from "./chunk.V4HPWQE7.js";
+} from "./chunk.KW5TWA5Y.js";
 import {
   menu_item_custom_styles_default
-} from "./chunk.OAAB4YO4.js";
+} from "./chunk.UNYO3GI7.js";
 import {
   menu_item_styles_default
 } from "./chunk.FSWTBNSI.js";
 import {
   SynPopup
-} from "./chunk.MGWPQRJ7.js";
+} from "./chunk.5QGW4QZT.js";
 import {
   SynSpinner
-} from "./chunk.GPST4OZW.js";
+} from "./chunk.D5GEYHUG.js";
 import {
   HasSlotController,
   getTextContent
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.RCBSMXQH.js";
+} from "./chunk.GJIDYO3Z.js";
+import {
+  watch
+} from "./chunk.JE5Y2YD7.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet,
   __privateSet,
   __spreadValues
-} from "./chunk.Z4XV3SMG.js";
+} from "./chunk.MO2GTRUM.js";
 
 // src/components/menu-item/menu-item.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -241,4 +241,4 @@ SynMenuItem = __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.6YNHGMLP.js.map
+//# sourceMappingURL=chunk.DHT3ZN7B.js.map

package/dist/chunks/{chunk.G76BKD7B.js → chunk.DQKV5FSY.js}

@@ -1,6 +1,6 @@
 import {
   __yieldStar
-} from "./chunk.Z4XV3SMG.js";
+} from "./chunk.MO2GTRUM.js";
 
 // src/internal/active-elements.ts
 function* activeElements(activeElement = document.activeElement) {
@@ -154,4 +154,4 @@ export {
   getTabbableBoundary,
   getTabbableElements
 };
-//# sourceMappingURL=chunk.G76BKD7B.js.map
+//# sourceMappingURL=chunk.DQKV5FSY.js.map

package/dist/chunks/{chunk.W7AA6XGD.js → chunk.DRLFKWVC.js}

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

package/dist/chunks/{chunk.7KBMO52G.js → chunk.DXVTZKXX.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.ENBJUBPD.js";
+} from "./chunk.5F5Y2RD6.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.7KBMO52G.js.map
+//# sourceMappingURL=chunk.DXVTZKXX.js.map

package/dist/chunks/{chunk.UCLYCASW.js → chunk.EHZBQTCT.js}

@@ -33,7 +33,7 @@ var dialog_custom_styles_default = css`
   /* Overlay Background */
   .dialog__overlay {
     /* #946: Add background blur for sick 2025 */
-    backdrop-filter: blur(var(--syn-overlay-background-blur, 0));
+    backdrop-filter: blur(var(--syn-overlay-background-blur));
   }
 
   /**
@@ -62,4 +62,4 @@ var dialog_custom_styles_default = css`
 export {
   dialog_custom_styles_default
 };
-//# sourceMappingURL=chunk.UCLYCASW.js.map
+//# sourceMappingURL=chunk.EHZBQTCT.js.map

package/dist/chunks/{chunk.UCLYCASW.js.map → chunk.EHZBQTCT.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/dialog/dialog.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /**\n     * Used as the default padding for the dialog title\n     */\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n\n    /**\n     * Defines the default body spacing\n     */\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n\n    /**\n     * Defines the default footer spacing\n     */\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);\n  }\n\n  .dialog__panel {\n    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-large);\n  }\n\n  .dialog__header-actions {\n    align-items: flex-start;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;\n  }\n\n  /* Overlay Background */\n  .dialog__overlay {\n    /* #946: Add background blur for sick 2025 */\n    backdrop-filter: blur(var(--syn-overlay-background-blur, 0));\n  }\n\n  /**\n   * We need this to make sure we are big enough as defined in the layout\n   * When omitting this statement, we will get rounding problems via line-height\n   */\n  .dialog__title,\n  .dialog__header-actions {\n    min-height: 88px;\n  }\n\n  .dialog__header-actions syn-icon-button,\n  .dialog__header-actions ::slotted(syn-icon-button) {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .dialog__title {\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-x-large);\n    font-weight: var(--syn-font-weight-bold);\n    line-height: var(--syn-line-height-normal);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /**\n     * Used as the default padding for the dialog title\n     */\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n\n    /**\n     * Defines the default body spacing\n     */\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n\n    /**\n     * Defines the default footer spacing\n     */\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);\n  }\n\n  .dialog__panel {\n    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-large);\n  }\n\n  .dialog__header-actions {\n    align-items: flex-start;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;\n  }\n\n  /* Overlay Background */\n  .dialog__overlay {\n    /* #946: Add background blur for sick 2025 */\n    backdrop-filter: blur(var(--syn-overlay-background-blur));\n  }\n\n  /**\n   * We need this to make sure we are big enough as defined in the layout\n   * When omitting this statement, we will get rounding problems via line-height\n   */\n  .dialog__title,\n  .dialog__header-actions {\n    min-height: 88px;\n  }\n\n  .dialog__header-actions syn-icon-button,\n  .dialog__header-actions ::slotted(syn-icon-button) {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .dialog__title {\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-x-large);\n    font-weight: var(--syn-font-weight-bold);\n    line-height: var(--syn-line-height-normal);\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }