@synergy-design-system/components 2.35.0 → 2.37.0

package/dist/chunks/{chunk.PHLPBWXY.js → chunk.B6KOTGTB.js}

@@ -1,9 +1,9 @@
 import {
   SynOption
-} from "./chunk.EMQOPT2J.js";
+} from "./chunk.CTNBYRG5.js";
 import {
   SynPopup
-} from "./chunk.I3OZNLMM.js";
+} from "./chunk.TAND6PH5.js";
 import {
   defaultOptionRenderer
 } from "./chunk.HVVPX2VA.js";
@@ -23,13 +23,13 @@ import {
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.AERTEAG5.js";
+} from "./chunk.G4URZQCL.js";
 import {
   combobox_custom_styles_default
 } from "./chunk.EWVMF6KH.js";
 import {
   combobox_styles_default
-} from "./chunk.PY4VOF4Y.js";
+} from "./chunk.GTAE5OSA.js";
 import {
   FormControlController
 } from "./chunk.HP2LEQRU.js";
@@ -49,7 +49,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.4VA5RT47.js";
+} from "./chunk.DO3VTFPG.js";
 import {
   LocalizeController
 } from "./chunk.IPGLY3H4.js";
@@ -64,7 +64,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -859,4 +859,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.PHLPBWXY.js.map
+//# sourceMappingURL=chunk.B6KOTGTB.js.map

package/dist/chunks/{chunk.MJABBGBF.js → chunk.BIX5HHIN.js}

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

package/dist/chunks/{chunk.GSZB4MXT.js → chunk.BPN4N2Y5.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.GDYTJLQR.js";
+} from "./chunk.GHUFY3QR.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.GSZB4MXT.js.map
+//# sourceMappingURL=chunk.BPN4N2Y5.js.map

package/dist/chunks/{chunk.IH35LOE2.js → chunk.CAV3YFM2.js}

@@ -1,6 +1,6 @@
 import {
   input_custom_styles_default
-} from "./chunk.HX3IWSE5.js";
+} from "./chunk.M6PF4GYJ.js";
 import {
   input_styles_default
 } from "./chunk.XAQKFEHH.js";
@@ -9,14 +9,14 @@ import {
 } from "./chunk.NFXT5LNY.js";
 import {
   SynDivider
-} from "./chunk.E5Q5IE2L.js";
+} from "./chunk.Z7HK2AZP.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.AERTEAG5.js";
+} from "./chunk.G4URZQCL.js";
 import {
   FormControlController
 } from "./chunk.HP2LEQRU.js";
@@ -25,7 +25,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.4VA5RT47.js";
+} from "./chunk.DO3VTFPG.js";
 import {
   LocalizeController
 } from "./chunk.IPGLY3H4.js";
@@ -45,7 +45,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -859,4 +859,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.IH35LOE2.js.map
+//# sourceMappingURL=chunk.CAV3YFM2.js.map

package/dist/chunks/{chunk.652F5XWB.js → chunk.CKJN6UYI.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.3KSTKO5I.js";
+} from "./chunk.YC2IAAVO.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.652F5XWB.js.map
+//# sourceMappingURL=chunk.CKJN6UYI.js.map

package/dist/chunks/{chunk.EMQOPT2J.js → chunk.CTNBYRG5.js}

@@ -1,6 +1,6 @@
 import {
   option_custom_styles_default
-} from "./chunk.IJQ7XW3N.js";
+} from "./chunk.G3KRSXVI.js";
 import {
   option_styles_default
 } from "./chunk.IVM3BGRH.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.ARR23WUY.js";
 import {
   SynIcon
-} from "./chunk.4VA5RT47.js";
+} from "./chunk.DO3VTFPG.js";
 import {
   LocalizeController
 } from "./chunk.IPGLY3H4.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -165,4 +165,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.EMQOPT2J.js.map
+//# sourceMappingURL=chunk.CTNBYRG5.js.map

package/dist/chunks/{chunk.H7H6X2QD.js → chunk.CTNUTHO5.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.5OJFKC6H.js";
+} from "./chunk.KICVSHKN.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.H7H6X2QD.js.map
+//# sourceMappingURL=chunk.CTNUTHO5.js.map

package/dist/chunks/{chunk.IKZOQ7AE.js → chunk.CW2Q7KG6.js}

@@ -155,7 +155,7 @@ var file_styles_default = css`
   :host([disabled]) .droparea,
   :host([disabled]) .input__value {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   :host(:not([disabled])) .form-control--user-dragging .droparea {
@@ -181,4 +181,4 @@ var file_styles_default = css`
 export {
   file_styles_default
 };
-//# sourceMappingURL=chunk.IKZOQ7AE.js.map
+//# sourceMappingURL=chunk.CW2Q7KG6.js.map

package/dist/chunks/{chunk.IKZOQ7AE.js.map → chunk.CW2Q7KG6.js.map}

@@ -1,7 +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-color-primary-900);\n    color: var(--syn-color-primary-900);\n  }\n\n  /* Drop Area */\n  .droparea {\n    --highlight-color: var(--syn-color-primary-600);\n\n    border: var(--syn-border-width-small) dashed var(--syn-input-border-color);\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-border-width-small) dashed var(--syn-color-primary-600);\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: 0.5;\n  }\n\n  :host(:not([disabled])) .form-control--user-dragging .droparea {\n    background: var(--syn-color-primary-50);\n    border: var(--syn-border-width-small) solid var(--syn-color-primary-600);\n    cursor: pointer;\n  }\n\n  :host(:not([disabled])) .droparea:not(:focus-visible):hover {\n    --highlight-color: var(--syn-color-primary-900);\n\n    border: var(--syn-border-width-small) dashed var(--syn-color-primary-900);\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-border-width-small) dashed var(--syn-input-border-color-focus-error);\n  }\n`;\n"],
+  "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-color-primary-900);\n    color: var(--syn-color-primary-900);\n  }\n\n  /* Drop Area */\n  .droparea {\n    --highlight-color: var(--syn-color-primary-600);\n\n    border: var(--syn-border-width-small) dashed var(--syn-input-border-color);\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-border-width-small) dashed var(--syn-color-primary-600);\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-border-width-small) solid var(--syn-color-primary-600);\n    cursor: pointer;\n  }\n\n  :host(:not([disabled])) .droparea:not(:focus-visible):hover {\n    --highlight-color: var(--syn-color-primary-900);\n\n    border: var(--syn-border-width-small) dashed var(--syn-color-primary-900);\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-border-width-small) dashed var(--syn-input-border-color-focus-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;",
   "names": []
 }

package/dist/chunks/{chunk.7BGVLHIA.js → chunk.CWYJMTQX.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.7BGVLHIA.js.map
+//# sourceMappingURL=chunk.CWYJMTQX.js.map

package/dist/chunks/{chunk.JMLDFGMB.js → chunk.D7UI7OZG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.5T3OGIGW.js";
 import {
   icon_default
-} from "./chunk.UI5Y2DGS.js";
+} from "./chunk.NWIDBLP5.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -200,4 +200,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.JMLDFGMB.js.map
+//# sourceMappingURL=chunk.D7UI7OZG.js.map

package/dist/chunks/{chunk.ZI7INRQL.js → chunk.DEQGTKN2.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.ZI7INRQL.js.map
+//# sourceMappingURL=chunk.DEQGTKN2.js.map

package/dist/chunks/{chunk.5KRECKTA.js → chunk.DMPOPGWM.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.G76BKD7B.js";
 import {
   SynPopup
-} from "./chunk.I3OZNLMM.js";
+} from "./chunk.TAND6PH5.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -385,4 +385,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.5KRECKTA.js.map
+//# sourceMappingURL=chunk.DMPOPGWM.js.map

package/dist/chunks/{chunk.4VA5RT47.js → chunk.DO3VTFPG.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.4VA5RT47.js.map
+//# sourceMappingURL=chunk.DO3VTFPG.js.map

package/dist/chunks/{chunk.4DW7CR6A.js → chunk.DOOJ2WJ7.js}

@@ -5,6 +5,11 @@ import {
 // src/components/select/select.custom.styles.ts
 import { css } from "lit";
 var select_custom_styles_default = css`
+  /** #429: Use token for opacity */
+  .select--standard.select--disabled .select__combobox {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
   /**
    * Invalid user data
    */
@@ -176,4 +181,4 @@ var select_custom_styles_default = css`
 export {
   select_custom_styles_default
 };
-//# sourceMappingURL=chunk.4DW7CR6A.js.map
+//# sourceMappingURL=chunk.DOOJ2WJ7.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/select/select.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport sharedOptionSize from '../option/option-size.styles.js';\n\nexport default css`\n  /** #429: Use token for opacity */\n  .select--standard.select--disabled .select__combobox {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox,\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .select__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--small .select__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--large .select__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    color: var(--syn-color-neutral-950);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .select--small .select__expand-icon {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--medium .select__expand-icon {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--large .select__expand-icon {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  /* Change select border on hover */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .select:not(.select--disabled):hover .select__combobox {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .select--small .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(syn-icon),\n  .select--small .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  /* Medium */\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(syn-icon),\n  .select--medium .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /* Large */\n  .select--large .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(syn-icon),\n  .select--large .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n\n  .select__prefix,\n  .select__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n  /* Multi Select */\n  .select__tags {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .select--small .select__tags {\n    gap: var(--syn-spacing-2x-small);\n  }\n\n  .select--medium .select__tags {\n    gap: var(--syn-spacing-x-small);\n  }\n\n  .select--large .select__tags {\n    gap: var(--syn-spacing-small);\n  }\n\n  /* Listbox */\n  .select__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: 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  .select__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n\n  /**\n   * #850: Allow to measure the size of the combobox.\n   * This is needed so we can automatically size and truncate the tags in the <syn-select multiple> component.\n   * Scoped to multiple to not break the single select per accident.\n   */\n  :host([multiple]) .select__tags {\n    min-width: 100px;\n    overflow: hidden;\n  }\n\n  :host([multiple]) .select__tags > div {\n    display: contents;\n  }\n\n  :host([multiple]) .select__tags > div > syn-tag {\n    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);\n\n    max-width: var(--syn-select-tag-max-width);\n  }\n\n  :host([multiple]) .select__tags > div > syn-tag::part(content) {\n    display: initial;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ${sharedOptionSize}\n`;\n"],
+  "mappings": ";;;;;AAAA,SAAS,WAAW;AAGpB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2KX,0BAAgB;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.D33UQBH6.js → chunk.DSWE3XQ7.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.JMLDFGMB.js";
+} from "./chunk.D7UI7OZG.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.D33UQBH6.js.map
+//# sourceMappingURL=chunk.DSWE3XQ7.js.map

package/dist/chunks/{chunk.UAZIYU7B.js → chunk.DU2BULT5.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -55,4 +55,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.UAZIYU7B.js.map
+//# sourceMappingURL=chunk.DU2BULT5.js.map

package/dist/chunks/{chunk.3ZLRUSNG.js → chunk.DZOQWZN6.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.OL7JOEWW.js";
+} from "./chunk.IS2S5SXW.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.3ZLRUSNG.js.map
+//# sourceMappingURL=chunk.DZOQWZN6.js.map

package/dist/chunks/{chunk.IHPLG57I.js → chunk.F3T5JFJS.js}

@@ -1,6 +1,6 @@
 import {
   checkbox_custom_styles_default
-} from "./chunk.6IRAPT75.js";
+} from "./chunk.Y3LNC7J6.js";
 import {
   checkbox_styles_default
 } from "./chunk.6OX2AX3Z.js";
@@ -10,7 +10,7 @@ import {
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.AERTEAG5.js";
+} from "./chunk.G4URZQCL.js";
 import {
   FormControlController
 } from "./chunk.HP2LEQRU.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.4VA5RT47.js";
+} from "./chunk.DO3VTFPG.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -31,7 +31,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -267,4 +267,4 @@ SynCheckbox = __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.IHPLG57I.js.map
+//# sourceMappingURL=chunk.F3T5JFJS.js.map

package/dist/chunks/{chunk.WAYKRG2H.js → chunk.F5SALGKS.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumb
-} from "./chunk.NC5YH2BX.js";
+} from "./chunk.4HZC7SKZ.js";
 
 // src/components/breadcrumb/breadcrumb.ts
 var breadcrumb_default = SynBreadcrumb;
@@ -9,4 +9,4 @@ SynBreadcrumb.define("syn-breadcrumb");
 export {
   breadcrumb_default
 };
-//# sourceMappingURL=chunk.WAYKRG2H.js.map
+//# sourceMappingURL=chunk.F5SALGKS.js.map

package/dist/chunks/{chunk.FOKGA6XD.js → chunk.FEHMBCVV.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.UFNOEXUF.js";
+} from "./chunk.ML4VTAHP.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.FOKGA6XD.js.map
+//# sourceMappingURL=chunk.FEHMBCVV.js.map

package/dist/chunks/{chunk.IJQ7XW3N.js → chunk.G3KRSXVI.js}

@@ -24,6 +24,11 @@ var option_custom_styles_default = css`
     color: var(--syn-color-neutral-950);
   }
 
+  /** #429: Use token for opacity */
+  .option--disabled { 
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
   .option__label {
     line-height: var(--syn-line-height-normal);
   }
@@ -78,4 +83,4 @@ var option_custom_styles_default = css`
 export {
   option_custom_styles_default
 };
-//# sourceMappingURL=chunk.IJQ7XW3N.js.map
+//# sourceMappingURL=chunk.G3KRSXVI.js.map

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

@@ -0,0 +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    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: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-color-neutral-950);\n  }\n\n  /** #429: Use token for opacity */\n  .option--disabled { \n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    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-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-color-neutral-800);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-color-neutral-0);\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: var(--syn-color-neutral-950);\n    font: var(--syn-body-medium-bold);\n  }\n\n  :host([aria-selected='true']) .option__label::slotted(.syn-highlight-style) {\n    color: var(--syn-color-neutral-0);\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;",
+  "names": []
+}

package/dist/chunks/{chunk.AERTEAG5.js → chunk.G4URZQCL.js}

@@ -94,7 +94,7 @@ var form_control_custom_styles_default = css2`
   :host([disabled]) .form-control--has-label .form-control__label,
   :host([disabled]) .form-control--has-help-text .form-control__help-text {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--syn-input-disabled-opacity);
   }
 `;
 
@@ -102,4 +102,4 @@ export {
   form_control_styles_default,
   form_control_custom_styles_default
 };
-//# sourceMappingURL=chunk.AERTEAG5.js.map
+//# sourceMappingURL=chunk.G4URZQCL.js.map

package/dist/chunks/{chunk.AERTEAG5.js.map → chunk.G4URZQCL.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles/form-control.styles.ts", "../../src/styles/form-control.custom.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  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: var(--syn-input-label-color);\n    margin-bottom: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: var(--syn-input-label-font-size-small);\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--syn-input-label-font-size-medium);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: var(--syn-input-label-font-size-large);\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n    color: var(--syn-input-required-content-color);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--syn-input-help-text-color);\n    margin-top: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-small);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-medium);\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-large);\n  }\n\n  .form-control--has-help-text.form-control--radio-group .form-control__help-text {\n    margin-top: var(--syn-spacing-2x-small);\n  }\n`;\n", "import { css } from 'lit';\n\nexport default css` \n\n   /* Label */\n  .form-control--has-label .form-control__label {\n   font-weight: var(--syn-font-weight-semibold);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    margin-bottom: var(--syn-spacing-x-small);\n  }\n  \n  .form-control--has-label.form-control--medium .form-control__label {\n    margin-bottom: var(--syn-input-spacing-small);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    margin-bottom: var(--syn-input-spacing-medium);\n  }\n\n    /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    margin-top: var(--syn-spacing-x-small);\n  }\n\n    /* ERROR */\n  :host([data-user-invalid]:not([disabled])) .form-control__help-text {\n    color: var(--syn-input-help-text-color-error);\n   }\n\n  /* DISABLED */\n  :host([disabled]) .form-control--has-label .form-control__label,\n  :host([disabled]) .form-control--has-help-text .form-control__help-text {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n`;\n"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: var(--syn-input-label-color);\n    margin-bottom: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: var(--syn-input-label-font-size-small);\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--syn-input-label-font-size-medium);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: var(--syn-input-label-font-size-large);\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n    color: var(--syn-input-required-content-color);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--syn-input-help-text-color);\n    margin-top: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-small);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-medium);\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-large);\n  }\n\n  .form-control--has-help-text.form-control--radio-group .form-control__help-text {\n    margin-top: var(--syn-spacing-2x-small);\n  }\n`;\n", "import { css } from 'lit';\n\nexport default css` \n\n   /* Label */\n  .form-control--has-label .form-control__label {\n   font-weight: var(--syn-font-weight-semibold);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    margin-bottom: var(--syn-spacing-x-small);\n  }\n  \n  .form-control--has-label.form-control--medium .form-control__label {\n    margin-bottom: var(--syn-input-spacing-small);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    margin-bottom: var(--syn-input-spacing-medium);\n  }\n\n    /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    margin-top: var(--syn-spacing-x-small);\n  }\n\n    /* ERROR */\n  :host([data-user-invalid]:not([disabled])) .form-control__help-text {\n    color: var(--syn-input-help-text-color-error);\n   }\n\n  /* DISABLED */\n  :host([disabled]) .form-control--has-label .form-control__label,\n  :host([disabled]) .form-control--has-help-text .form-control__help-text {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n`;\n"],
   "mappings": ";AAQA,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;;;ACVf,SAAS,OAAAA,YAAW;AAEpB,IAAO,qCAAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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": ["css"]
 }

package/dist/chunks/{chunk.EEFZAOU4.js → chunk.GFYHBLWB.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressBar
-} from "./chunk.JWUGHFUS.js";
+} from "./chunk.2STXKNFJ.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SynProgressBar;
@@ -9,4 +9,4 @@ SynProgressBar.define("syn-progress-bar");
 export {
   progress_bar_default
 };
-//# sourceMappingURL=chunk.EEFZAOU4.js.map
+//# sourceMappingURL=chunk.GFYHBLWB.js.map

package/dist/chunks/{chunk.GDYTJLQR.js → chunk.GHUFY3QR.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QJUAY4YD.js";
+} from "./chunk.AFZ5JDGZ.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.GDYTJLQR.js.map
+//# sourceMappingURL=chunk.GHUFY3QR.js.map

package/dist/chunks/{chunk.PY4VOF4Y.js → chunk.GTAE5OSA.js}

@@ -242,6 +242,11 @@ var combobox_styles_default = css`
   }
 
 
+  /** #429: Use token for opacity */
+  .combobox--standard.combobox--disabled .combobox__inputs {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
   /**
    * Invalid user data
    */
@@ -395,4 +400,4 @@ var combobox_styles_default = css`
 export {
   combobox_styles_default
 };
-//# sourceMappingURL=chunk.PY4VOF4Y.js.map
+//# sourceMappingURL=chunk.GTAE5OSA.js.map