@synergy-design-system/components 2.14.3 → 2.15.0

package/dist/chunks/{chunk.OOABXWCW.js → chunk.R24T7WQN.js}

@@ -1,6 +1,11 @@
 // src/components/menu-item/menu-item.custom.styles.ts
 import { css } from "lit";
 var menu_item_custom_styles_default = css`
+  :host {
+    /* Custom override for hiding the checkmark in menus it is not needed */
+    --display-checkmark: flex;
+  }
+
   .menu-item {
     color: var(--syn-typography-color-text);
     font-size: var(--syn-font-size-medium);
@@ -23,14 +28,21 @@ var menu_item_custom_styles_default = css`
    */
   .menu-item .menu-item__prefix::slotted(syn-icon),
   .menu-item .menu-item__suffix::slotted(syn-icon) {
+    color: var(--syn-color-neutral-800);
     font-size: var(--syn-font-size-x-large);
   }
 
+  :host(:focus-visible)  .menu-item .menu-item__prefix::slotted(syn-icon),
+  :host(:focus-visible)  .menu-item .menu-item__suffix::slotted(syn-icon) {
+    color: var(--syn-color-neutral-0);
+  }
+
   /**
    * Adjust the size of icons
    */
   .menu-item .menu-item__chevron,
   .menu-item .menu-item__check {
+    display: var(--display-checkmark);
     font-size: var(--syn-font-size-x-large);
     width: var(--syn-font-size-x-large);
   }
@@ -103,9 +115,14 @@ var menu_item_custom_styles_default = css`
   .menu-item--checked .menu-item__label {
     font-weight: var(--syn-font-weight-semibold);
   }
+
+  /* Needed if we do not show the checkmark */
+  :host(:not([type="checkmark"]):not([loading])) .menu-item__label {
+    min-height: var(--syn-font-size-x-large);
+  }
 `;
 
 export {
   menu_item_custom_styles_default
 };
-//# sourceMappingURL=chunk.OOABXWCW.js.map
+//# sourceMappingURL=chunk.R24T7WQN.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/menu-item.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /* Custom override for hiding the checkmark in menus it is not needed */\n    --display-checkmark: flex;\n  }\n\n  .menu-item {\n    color: var(--syn-typography-color-text);\n    font-size: var(--syn-font-size-medium);\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium);\n  }\n\n  /**\n   * Handling for slotted prefix and suffix\n   */\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /**\n   * Set the default font size to make icons appear correct\n   */\n  .menu-item .menu-item__prefix::slotted(syn-icon),\n  .menu-item .menu-item__suffix::slotted(syn-icon) {\n    color: var(--syn-color-neutral-800);\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  :host(:focus-visible)  .menu-item .menu-item__prefix::slotted(syn-icon),\n  :host(:focus-visible)  .menu-item .menu-item__suffix::slotted(syn-icon) {\n    color: var(--syn-color-neutral-0);\n  }\n\n  /**\n   * Adjust the size of icons\n   */\n  .menu-item .menu-item__chevron,\n  .menu-item .menu-item__check {\n    display: var(--display-checkmark);\n    font-size: var(--syn-font-size-x-large);\n    width: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * This makes sure the chevron does not take any space if we do not have children\n   */\n  .menu-item .menu-item__chevron {\n    display: none;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .menu-item .menu-item__check {\n    color: var(--syn-color-primary-600);\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  /**\n   * When in loading state, do not show the checkmark as it would bleed through\n   */\n  .menu-item--loading .menu-item__check {\n    visibility: hidden;\n  }\n\n  /**\n   * Make sure the checkbox is also visible when the item is active\n   */\n  :host(:focus-visible) .menu-item--checked .menu-item__check {\n    color: var(--syn-color-neutral-0);\n  }\n\n  /**\n   * Special handling for the submenu chevron:\n   * We are using the \"chevron-down\" icon per default as\n   * we do not want all chevrons to be part of the bundle\n   * Therefore, we have to transform it into the right direction\n   */\n  .menu-item .menu-item__chevron syn-icon {\n    transform: rotate(-90deg);\n  }\n\n  .menu-item--rtl .menu-item__chevron syn-icon {\n    transform: rotate(90deg);\n  }\n\n  /**\n   * Make sure to show the chevron if there are children\n   */\n  .menu-item--has-submenu .menu-item__chevron {\n    display: flex;\n  }\n\n  /**\n   * Adjustments for the spinner in loading state\n   */\n  .menu-item--loading syn-spinner {\n    --indicator-color: currentColor;\n    --track-width: 2px;\n\n    font-size: var(--syn-font-size-medium);\n    left: var(--syn-spacing-medium);\n    opacity: 1;\n    position: absolute;\n    top: calc(50% - 0.5em);\n  }\n\n  /**\n   * Highlight checked items\n   */\n  .menu-item--checked .menu-item__label {\n    font-weight: var(--syn-font-weight-semibold);\n  }\n\n  /* Needed if we do not show the checkmark */\n  :host(:not([type=\"checkmark\"]):not([loading])) .menu-item__label {\n    min-height: var(--syn-font-size-x-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,kCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.ZVXLBYON.js → chunk.RWSNSLKJ.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.LR3QOC2S.js";
+} from "./chunk.K2QY3FGE.js";
 import {
   range_styles_default
 } from "./chunk.277APOW3.js";
@@ -32,7 +32,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -635,4 +635,4 @@ __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.ZVXLBYON.js.map
+//# sourceMappingURL=chunk.RWSNSLKJ.js.map

package/dist/chunks/{chunk.WNUD4VDX.js → chunk.RZBALBTK.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.MTPLSXES.js";
+} from "./chunk.O3KNRGUR.js";
 
 // src/components/spinner/spinner.ts
 var spinner_default = SynSpinner;
@@ -9,4 +9,4 @@ SynSpinner.define("syn-spinner");
 export {
   spinner_default
 };
-//# sourceMappingURL=chunk.WNUD4VDX.js.map
+//# sourceMappingURL=chunk.RZBALBTK.js.map

package/dist/chunks/{chunk.AGXEODV2.js → chunk.S5CYMFHY.js}

@@ -3,13 +3,13 @@ import {
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.3GAK3HCW.js";
+} from "./chunk.VIWVKO6H.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynAlert
-} from "./chunk.2VEV27HT.js";
+} from "./chunk.LPORVGSO.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -286,4 +286,4 @@ __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.AGXEODV2.js.map
+//# sourceMappingURL=chunk.S5CYMFHY.js.map

package/dist/chunks/{chunk.FAM3ZB47.js → chunk.SA775ZEU.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.RAOPZXJL.js";
 import {
   SynDivider
-} from "./chunk.QZRLHN6I.js";
+} from "./chunk.5JF5AJ3G.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -34,4 +34,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.FAM3ZB47.js.map
+//# sourceMappingURL=chunk.SA775ZEU.js.map

package/dist/chunks/{chunk.NPQAP7F6.js → chunk.SSAJWDUP.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.QS7HRCHA.js";
+} from "./chunk.5E67TIRM.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.NPQAP7F6.js.map
+//# sourceMappingURL=chunk.SSAJWDUP.js.map

package/dist/chunks/{chunk.R22XUKGQ.js → chunk.TD3P6CWD.js}

@@ -1,13 +1,13 @@
 import {
   SynSpinner
-} from "./chunk.MTPLSXES.js";
+} from "./chunk.O3KNRGUR.js";
 import {
   FormControlController,
   validValidityState
 } from "./chunk.AMIQC3O7.js";
 import {
   button_custom_styles_default
-} from "./chunk.42LDZR6F.js";
+} from "./chunk.5EGFFSLN.js";
 import {
   button_styles_default
 } from "./chunk.5SQ7NVBX.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.UAK6WG4U.js";
+} from "./chunk.BWDC4HUA.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -289,4 +289,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.R22XUKGQ.js.map
+//# sourceMappingURL=chunk.TD3P6CWD.js.map

package/dist/chunks/{chunk.CDQY5ANT.js → chunk.TOCKCG5O.js}

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

package/dist/chunks/{chunk.YHDODK3T.js → chunk.U56TKIWL.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.K5PXELDD.js";
+} from "./chunk.DFVWZ5PE.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.YHDODK3T.js.map
+//# sourceMappingURL=chunk.U56TKIWL.js.map

package/dist/chunks/{chunk.A2FQFTFB.js → chunk.UQMQVG4T.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.D6D5IFPL.js";
+} from "./chunk.2PIWVX2I.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.A2FQFTFB.js.map
+//# sourceMappingURL=chunk.UQMQVG4T.js.map

package/dist/chunks/{chunk.QUXICFJL.js → chunk.UZFJCTMI.js}

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

package/dist/chunks/{chunk.VRYQ7MKQ.js → chunk.V3PQN3RI.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.MCTYU5HS.js";
+} from "./chunk.FV4VHS63.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SynDialog;
@@ -9,4 +9,4 @@ SynDialog.define("syn-dialog");
 export {
   dialog_default
 };
-//# sourceMappingURL=chunk.VRYQ7MKQ.js.map
+//# sourceMappingURL=chunk.V3PQN3RI.js.map

package/dist/chunks/{chunk.IZ72PTZ7.js → chunk.V4SIKF4X.js}

@@ -276,10 +276,21 @@ var combobox_styles_default = css`
   /* Expand icon */
   .combobox__expand-icon {
     color: var(--syn-color-neutral-950);
-    font-size: var(--syn-spacing-large);
     margin-inline-start: var(--syn-spacing-small);
   }
 
+  .combobox--small .combobox__expand-icon {
+    font-size: var(--syn-spacing-medium);
+  }
+
+  .combobox--medium .combobox__expand-icon {
+    font-size: var(--syn-spacing-large);
+  }
+
+  .combobox--large .combobox__expand-icon {
+    font-size: var(--syn-spacing-x-large);
+  }
+
   /* Change combobox border on hover */
   .combobox:not(.combobox--disabled):hover .combobox__inputs {
     border-color: var(--syn-input-color-hover);
@@ -296,6 +307,12 @@ var combobox_styles_default = css`
     margin-inline-start: var(--syn-spacing-x-small);
   }
 
+  .combobox--small .combobox__suffix::slotted(syn-icon),
+  .combobox--small .combobox__prefix::slotted(syn-icon) {
+    font-size: var(--syn-font-size-medium);
+  }
+
+  /* Medium */
   .combobox--medium .combobox__prefix::slotted(*) {
     margin-inline-end: var(--syn-input-spacing-small);
   }
@@ -304,6 +321,12 @@ var combobox_styles_default = css`
     margin-inline-start: var(--syn-input-spacing-small);
   }
 
+  .combobox--medium .combobox__suffix::slotted(syn-icon),
+  .combobox--medium .combobox__prefix::slotted(syn-icon) {
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  /* Large */
   .combobox--large .combobox__prefix::slotted(*) {
     margin-inline-end: var(--syn-input-spacing-medium);
   }
@@ -312,6 +335,12 @@ var combobox_styles_default = css`
     margin-inline-start: var(--syn-input-spacing-medium);
   }
 
+  .combobox--large .combobox__suffix::slotted(syn-icon),
+  .combobox--large .combobox__prefix::slotted(syn-icon) {
+    font-size: var(--syn-font-size-2x-large);
+  }
+
+
   .combobox__prefix,
   .combobox__suffix {
     color: var(--syn-input-help-text-color);
@@ -339,4 +368,4 @@ var combobox_styles_default = css`
 export {
   combobox_styles_default
 };
-//# sourceMappingURL=chunk.IZ72PTZ7.js.map
+//# sourceMappingURL=chunk.V4SIKF4X.js.map

package/dist/chunks/{chunk.IZ72PTZ7.js.map → chunk.V4SIKF4X.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/combobox/combobox.styles.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .combobox {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .combobox::part(popup) {\n    z-index: var(--syn-z-index-dropdown);\n  }\n\n  .combobox[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .combobox[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .combobox__inputs {\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  .combobox__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  .combobox__display-input::placeholder {\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox:not(.combobox--disabled):hover .combobox__display-input {\n    color: var(--syn-input-color-hover);\n  }\n\n  .combobox__display-input:focus {\n    outline: none;\n  }\n\n  .combobox__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  /* Standard combobox */\n  .combobox--standard .combobox__inputs {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .combobox--standard.combobox--disabled .combobox__inputs {\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  .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\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  .combobox--small .combobox__inputs {\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  .combobox--small .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__inputs {\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  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__inputs {\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  .combobox--large .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-large);\n  }\n\n/* Prefix and Suffix */\n  .combobox__prefix,\n  .combobox__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Clear button */\n  .combobox__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  .combobox__clear:hover {\n    color: var(--syn-input-icon-color-hover);\n  }\n\n  .combobox__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .combobox__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  .combobox--open .combobox__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .combobox__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  .combobox__listbox ::slotted(syn-divider) {\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  .combobox__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\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .combobox__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--small .combobox__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--large .combobox__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Change combobox border on hover */\n  .combobox:not(.combobox--disabled):hover .combobox__inputs {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .combobox--small .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox__prefix,\n  .combobox__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n\n\n  /* Listbox */\n  .combobox__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .combobox__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
-  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .combobox {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .combobox::part(popup) {\n    z-index: var(--syn-z-index-dropdown);\n  }\n\n  .combobox[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .combobox[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .combobox__inputs {\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  .combobox__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  .combobox__display-input::placeholder {\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox:not(.combobox--disabled):hover .combobox__display-input {\n    color: var(--syn-input-color-hover);\n  }\n\n  .combobox__display-input:focus {\n    outline: none;\n  }\n\n  .combobox__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  /* Standard combobox */\n  .combobox--standard .combobox__inputs {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .combobox--standard.combobox--disabled .combobox__inputs {\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  .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\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  .combobox--small .combobox__inputs {\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  .combobox--small .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__inputs {\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  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__inputs {\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  .combobox--large .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-large);\n  }\n\n/* Prefix and Suffix */\n  .combobox__prefix,\n  .combobox__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Clear button */\n  .combobox__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  .combobox__clear:hover {\n    color: var(--syn-input-icon-color-hover);\n  }\n\n  .combobox__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .combobox__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  .combobox--open .combobox__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .combobox__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  .combobox__listbox ::slotted(syn-divider) {\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  .combobox__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\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .combobox__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--small .combobox__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--large .combobox__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    color: var(--syn-color-neutral-950);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .combobox--small .combobox__expand-icon {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--medium .combobox__expand-icon {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--large .combobox__expand-icon {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  /* Change combobox border on hover */\n  .combobox:not(.combobox--disabled):hover .combobox__inputs {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .combobox--small .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .combobox--small .combobox__suffix::slotted(syn-icon),\n  .combobox--small .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  /* Medium */\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__suffix::slotted(syn-icon),\n  .combobox--medium .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /* Large */\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__suffix::slotted(syn-icon),\n  .combobox--large .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n\n  .combobox__prefix,\n  .combobox__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n\n\n  /* Listbox */\n  .combobox__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .combobox__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.7MCSBLOW.js → chunk.VEHNAKBB.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.BMXPNWDD.js";
+} from "./chunk.FRQKTUY4.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.7MCSBLOW.js.map
+//# sourceMappingURL=chunk.VEHNAKBB.js.map

package/dist/chunks/{chunk.3GAK3HCW.js → chunk.VIWVKO6H.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -33,4 +33,4 @@ export {
   normalizeEventAttribute,
   getEventNameForElement
 };
-//# sourceMappingURL=chunk.3GAK3HCW.js.map
+//# sourceMappingURL=chunk.VIWVKO6H.js.map

package/dist/chunks/{chunk.3A65FBTX.js → chunk.VKRMYKYH.js}

@@ -49,6 +49,12 @@ var input_custom_styles_default = css`
     width: auto;
   }
 
+  /* Prefix / Suffix color */
+  .input__prefix ::slotted(*),
+  .input__suffix ::slotted(*) {
+    color: var(--syn-input-icon-color);
+  }
+
 
   /* PADDINGS */
   .input--small .input__control {
@@ -252,4 +258,4 @@ var input_custom_styles_default = css`
 export {
   input_custom_styles_default
 };
-//# sourceMappingURL=chunk.3A65FBTX.js.map
+//# sourceMappingURL=chunk.VKRMYKYH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/input/input.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n\n  /**\n  * Min-width size adjusted for each size so 2 full digits are shown for type number\n  */ \n \n  :host([size=\"small\"]) {\n    min-width: calc(var(--syn-input-font-size-small)*8.3);\n  }\n\n  :host([size=\"medium\"]) {\n    min-width: calc(var(--syn-input-font-size-medium)*9.4);\n  }\n\n  :host([size=\"large\"]) {\n    min-width: calc(var(--syn-input-font-size-large)*10);\n  }\n\n   /**\n   * Clearable + Password Toggle\n   */\n   .input__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n  }\n\n  .input--small .input__clear,\n  .input--small .input__password-toggle {\n    font-size: var(--syn-font-size-medium);\n    padding-left: var(--syn-spacing-x-small);\n    padding-right: var(--syn-spacing-small);\n    width: auto;\n  }\n\n  .input--medium .input__clear,\n  .input--medium .input__password-toggle {\n    font-size: var(--syn-font-size-x-large);\n    padding-left: var(--syn-spacing-small);\n    padding-right: var(--syn-spacing-medium);\n    width: auto;\n  }\n\n  .input--large .input__clear,\n  .input--large .input__password-toggle {\n    font-size: var(--syn-font-size-2x-large);\n    padding-left: var(--syn-spacing-medium);\n    padding-right: var(--syn-spacing-large);\n    width: auto;\n  }\n\n  /* Prefix / Suffix color */\n  .input__prefix ::slotted(*),\n  .input__suffix ::slotted(*) {\n    color: var(--syn-input-icon-color);\n  }\n\n\n  /* PADDINGS */\n  .input--small .input__control {\n    padding: var(--syn-spacing-3x-small) var(--syn-input-spacing-small);\n  }\n\n  .input--medium .input__control {\n    padding: var(--syn-spacing-x-small) var(--syn-input-spacing-medium);\n  }\n\n  .input--large .input__control {\n    padding: var(--syn-input-spacing-small) var(--syn-input-spacing-large);\n  }\n\n  .input--small .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-small) var(--syn-spacing-x-small);\n  }\n\n  .input--medium .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-small);\n  }\n\n  .input--large .input__prefix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-large) var(--syn-input-spacing-medium);\n  }\n\n  .input--small .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-spacing-x-small) var(--syn-input-spacing-small);\n  }\n\n  .input--medium .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-small) var(--syn-input-spacing-medium);\n  }\n\n  .input--large .input__suffix ::slotted(*) {\n    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-large);\n  }\n\n  .input__clear + .input__suffix ::slotted(*),\n  .input__password-toggle + .input__suffix ::slotted(*) {\n    margin-inline-start: 0;  \n  }\n\n  .input--small .input__clear + .input__password-toggle {\n    padding-left: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__clear + .input__password-toggle {\n    padding-left: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));\n  }\n\n  .input--large .input__clear + .input__password-toggle {\n    padding-left: var(--syn-spacing-x-small);\n  }\n\n  .input--small .input__clear:has(+ .input__password-toggle) {\n    padding-right: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__clear:has(+ .input__password-toggle) {\n    padding-right: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));\n  }\n\n  .input--large .input__clear:has(+ .input__password-toggle) {\n    padding-right: var(--syn-spacing-x-small);\n  }\n\n  .form-control--has-suffix .input--large .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--large .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-medium);\n  }\n\n  .form-control--has-suffix .input--small .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--small .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-x-small);\n  }\n\n  .form-control--has-suffix .input--medium .input__clear:has(+ .input__suffix),\n  .form-control--has-suffix .input--medium .input__password-toggle:has(+ .input__suffix) {\n    padding-right: var(--syn-spacing-small);\n  }\n\n  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__clear,\n  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__password-toggle {\n    padding-right: var(--syn-spacing-medium);\n  }\n\n  /* ICONS SIZE */\n   .input--small .input__prefix ::slotted(syn-icon),\n   .input--small .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n   }\n\n  .input--medium .input__prefix ::slotted(syn-icon),\n  .input--medium .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n   }\n\n  .input--large .input__prefix ::slotted(syn-icon),\n  .input--large .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n   }\n\n  :host([data-user-invalid]) .input--standard {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .input--standard.input--focused:not(.input--disabled) {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  .input--standard.input--disabled .input__suffix, \n  .input--standard.input--disabled .input__prefix {\n    cursor: not-allowed;\n  } \n\n\n  /**\n  * Number stepper\n  */\n  .input__number-stepper {\n    align-items: center;\n    display: flex;\n  }\n\n  .input--small .input__number-stepper {\n    margin-left: var(--syn-spacing-2x-small);\n  }\n\n  .input--medium .input__number-stepper {\n    margin-right: var(--syn-spacing-2x-small);\n  }\n\n  .input--large .input__number-stepper {\n    margin-right: var(--syn-spacing-x-small);\n  }\n\n\n  /**\n  * Number stepper buttons\n  */\n  .input__number-stepper-button {\n    align-items: center;\n    background: none;\n    border: none;\n    color: var(--syn-color-primary-600);\n    cursor: pointer;\n    display: flex;\n    padding: var(--syn-spacing-x-small);\n    transition: var(--syn-transition-x-fast) color;\n  }\n\n  .input--small .input__number-stepper-button {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .input--medium .input__number-stepper-button {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .input--large .input__number-stepper-button {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  .input__number-stepper-button:hover:not([disabled]) {\n    color: var(--syn-color-primary-900)\n  }\n\n  .input__number-stepper-button:active:not([disabled]) {\n    color: var(--syn-color-primary-950)\n  }\n\n  .input__number-stepper-button[disabled] {\n    color: var(--syn-color-neutral-400);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n\n\n  /**\n  * Number stepper divider\n  */\n  .input--small .input__number-divider {\n    height: var(--syn-font-size-medium);\n    margin: 0;\n  }\n\n  .input--medium .input__number-divider {\n    height: var(--syn-font-size-x-large);\n    margin: 0 var(--syn-spacing-2x-small);\n  }\n\n  .input--large .input__number-divider {\n    height: var(--syn-font-size-2x-large);\n    margin: 0 var(--syn-spacing-x-small);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.M7ICWWDM.js → chunk.VXZRJOTX.js}

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

package/dist/chunks/{chunk.SFCABZYW.js → chunk.WCXL7NRH.js}

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.UVT3K4BL.js";
+} from "./chunk.K5WTIEZV.js";
 
 // src/components/file/file.ts
 var file_default = SynFile;
@@ -9,4 +9,4 @@ SynFile.define("syn-file");
 export {
   file_default
 };
-//# sourceMappingURL=chunk.SFCABZYW.js.map
+//# sourceMappingURL=chunk.WCXL7NRH.js.map

package/dist/chunks/{chunk.LNBMB3DI.js → chunk.WFYNFVWT.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.PFCFF54R.js";
+} from "./chunk.75VVJW2H.js";
 
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.LNBMB3DI.js.map
+//# sourceMappingURL=chunk.WFYNFVWT.js.map

package/dist/chunks/{chunk.O2XUYEBK.js → chunk.XEFLPFHO.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.SPAJDYL5.js";
+} from "./chunk.ZIM4UHU2.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.O2XUYEBK.js.map
+//# sourceMappingURL=chunk.XEFLPFHO.js.map

package/dist/chunks/{chunk.GWRO6ZDZ.js → chunk.YCF3WQ7V.js}

@@ -25,7 +25,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -369,4 +369,4 @@ __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.GWRO6ZDZ.js.map
+//# sourceMappingURL=chunk.YCF3WQ7V.js.map

package/dist/chunks/{chunk.MGMIX6DT.js → chunk.YFFE4DOC.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.5JWKXQDN.js";
+} from "./chunk.KR7WAWSQ.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.MGMIX6DT.js.map
+//# sourceMappingURL=chunk.YFFE4DOC.js.map

package/dist/chunks/{chunk.NCQXRLJC.js → chunk.Z2RURM2Z.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SHCZO4KK.js";
 import {
   SynDivider
-} from "./chunk.QZRLHN6I.js";
+} from "./chunk.5JF5AJ3G.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -331,4 +331,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.NCQXRLJC.js.map
+//# sourceMappingURL=chunk.Z2RURM2Z.js.map

package/dist/chunks/{chunk.32AK63SX.js → chunk.Z2XRLTVO.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.2M3OO2G6.js";
+} from "./chunk.Z7MDYYFA.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.32AK63SX.js.map
+//# sourceMappingURL=chunk.Z2XRLTVO.js.map

package/dist/chunks/{chunk.TXKD5X4O.js → chunk.Z667C3NZ.js}

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "./chunk.EHHULBSP.js";
+} from "./chunk.HOVHN5S3.js";
 
 // src/components/tab-group/tab-group.ts
 var tab_group_default = SynTabGroup;
@@ -9,4 +9,4 @@ SynTabGroup.define("syn-tab-group");
 export {
   tab_group_default
 };
-//# sourceMappingURL=chunk.TXKD5X4O.js.map
+//# sourceMappingURL=chunk.Z667C3NZ.js.map

package/dist/chunks/{chunk.2M3OO2G6.js → chunk.Z7MDYYFA.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -132,4 +132,4 @@ __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.2M3OO2G6.js.map
+//# sourceMappingURL=chunk.Z7MDYYFA.js.map