@synergy-design-system/components 3.13.0 → 3.13.2

package/dist/chunks/{chunk.EJS2OFIR.js → chunk.2H6OJSR3.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -68,4 +68,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.EJS2OFIR.js.map
+//# sourceMappingURL=chunk.2H6OJSR3.js.map

package/dist/chunks/{chunk.I4WG2YDD.js → chunk.2RBPXF6C.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.X6PKTIP5.js";
+} from "./chunk.ZO6FAYF5.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.I4WG2YDD.js.map
+//# sourceMappingURL=chunk.2RBPXF6C.js.map

package/dist/chunks/{chunk.T5H3RXAK.js → chunk.2RGZNJHX.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.T5H3RXAK.js.map
+//# sourceMappingURL=chunk.2RGZNJHX.js.map

package/dist/chunks/{chunk.G756EIOG.js → chunk.326WL6HB.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.H3UH2F64.js";
+} from "./chunk.JHKT2P33.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = SynProgressRing;
@@ -9,4 +9,4 @@ SynProgressRing.define("syn-progress-ring");
 export {
   progress_ring_default
 };
-//# sourceMappingURL=chunk.G756EIOG.js.map
+//# sourceMappingURL=chunk.326WL6HB.js.map

package/dist/chunks/{chunk.U76OT6PG.js → chunk.34NRFIDU.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.6UQSVKP2.js";
+} from "./chunk.QV34SJ45.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.U76OT6PG.js.map
+//# sourceMappingURL=chunk.34NRFIDU.js.map

package/dist/chunks/{chunk.SXTJRHJM.js → chunk.3FAW4MJN.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.QAUVQGKQ.js";
+} from "./chunk.EEF446UE.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SynDialog;
@@ -9,4 +9,4 @@ SynDialog.define("syn-dialog");
 export {
   dialog_default
 };
-//# sourceMappingURL=chunk.SXTJRHJM.js.map
+//# sourceMappingURL=chunk.3FAW4MJN.js.map

package/dist/chunks/{chunk.SSA3RPCZ.js → chunk.3KRPLKY4.js}

@@ -6,16 +6,16 @@ import {
   isInvalidEvent,
   isSynergyElement,
   normalizeEventAttribute
-} from "./chunk.IJ3TLB2G.js";
+} from "./chunk.4WGU73MG.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynTooltip
-} from "./chunk.MTORRKS7.js";
+} from "./chunk.KTSXAOC7.js";
 import {
   SynAlert
-} from "./chunk.GOGAVWGT.js";
+} from "./chunk.YQARGDXI.js";
 import {
   enableDefaultSettings
 } from "./chunk.4MG3QDNW.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -439,4 +439,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.SSA3RPCZ.js.map
+//# sourceMappingURL=chunk.3KRPLKY4.js.map

package/dist/chunks/{chunk.OQUVO5QW.js → chunk.3U6C42N7.js}

@@ -1,22 +1,54 @@
-// src/components/icon-button/icon-button.custom.styles.ts
+// src/components/icon-button/icon-button.styles.ts
 import { css } from "lit";
-var icon_button_custom_styles_default = css`
+var icon_button_styles_default = css`
+  :host {
+    color: var(--syn-color-neutral-600);
+    display: inline-block;
+  }
+
   .icon-button {
+    align-items: center;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: none;
     border-radius: 0;
     color: currentColor;
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
     font-size: inherit;
+    padding: var(--syn-spacing-x-small);
+    transition: var(--syn-transition-x-fast) color;
   }
 
-  .icon-button--disabled {
-    color: var(--syn-color-neutral-400);
-
-    /** #429: Use token for opacity */
-    opacity: var(--syn-input-disabled-opacity);
+  .icon-button:focus {
+    outline: none;
   }
 
-  /* Remove round borders */
   .icon-button:focus-visible {
-    border-radius: var(--syn-icon-button-focus-ring-border-radius);
+    border-radius: var(--syn-icon-button-focus-ring-border-radius); /* Remove round borders */
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  .icon-button:hover:not(.icon-button--disabled),
+  .icon-button:focus-visible:not(.icon-button--disabled) {
+    color: var(--syn-color-primary-600);
+  }
+
+  .icon-button:active:not(.icon-button--disabled) {
+    color: var(--syn-color-primary-700);
+  }
+
+  .icon-button--disabled {
+    cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
+  }
+
+  .icon-button__icon {
+    pointer-events: none;
   }
 
   /* Colors */
@@ -79,6 +111,6 @@ var icon_button_custom_styles_default = css`
 `;
 
 export {
-  icon_button_custom_styles_default
+  icon_button_styles_default
 };
-//# sourceMappingURL=chunk.OQUVO5QW.js.map
+//# sourceMappingURL=chunk.3U6C42N7.js.map

package/dist/chunks/chunk.3U6C42N7.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon-button/icon-button.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    color: var(--syn-color-neutral-600);\n    display: inline-block;\n  }\n\n  .icon-button {\n    align-items: center;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-appearance: none;\n    appearance: none;\n    background: none;\n    border: none;\n    border-radius: 0;\n    color: currentColor;\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    font-size: inherit;\n    padding: var(--syn-spacing-x-small);\n    transition: var(--syn-transition-x-fast) color;\n  }\n\n  .icon-button:focus {\n    outline: none;\n  }\n\n  .icon-button:focus-visible {\n    border-radius: var(--syn-icon-button-focus-ring-border-radius); /* Remove round borders */\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  .icon-button:hover:not(.icon-button--disabled),\n  .icon-button:focus-visible:not(.icon-button--disabled) {\n    color: var(--syn-color-primary-600);\n  }\n\n  .icon-button:active:not(.icon-button--disabled) {\n    color: var(--syn-color-primary-700);\n  }\n\n  .icon-button--disabled {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */\n  }\n\n  .icon-button__icon {\n    pointer-events: none;\n  }\n\n  /* Colors */\n  :host([color=\"currentColor\"]) {\n    color: currentColor;\n  }\n\n  :host([color=\"primary\"]),\n  :host([color=\"primary\"]) .icon-button:focus-visible:not(.icon-button--disabled) {\n    color: var(--syn-interactive-emphasis-color);\n  }\n\n  :host([color=\"primary\"]) .icon-button:hover:not(.icon-button--disabled) {\n    color: var(--syn-interactive-emphasis-color-hover);\n  }\n\n  :host([color=\"primary\"]) .icon-button:active:not(.icon-button--disabled) {\n    color: var(--syn-interactive-emphasis-color-active);\n  }\n\n  :host([color=\"neutral\"]) {\n    color: var(--syn-interactive-quiet-color);\n  }\n\n  :host([color=\"neutral\"]) .icon-button:hover:not(.icon-button--disabled) {\n    color: var(--syn-interactive-quiet-color-hover);\n  }\n\n  :host([color=\"neutral\"]) .icon-button:active:not(.icon-button--disabled) {\n    color: var(--syn-interactive-quiet-color-active);\n  }\n\n  :host([color=\"neutral\"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {\n    color: var(--syn-interactive-quiet-color);\n  }\n\n  /* Sizes */\n  .icon-button--small {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .icon-button--medium {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .icon-button--large {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  /* Force user to set \"label\" prop */\n  .icon-button[aria-label=\"\"] {\n    border: var(--syn-border-width-large) var(--syn-color-error-600) solid;\n  }\n\n  .icon-button[aria-label=\"\"]::after {\n    content: \"Set label prop for a11y to get rid of this text and border!\";\n    font-size: var(--syn-font-size-2x-small);\n    margin-left: var(--syn-spacing-2x-small);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,6BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.E2WLIVWQ.js → chunk.3UMDHDWF.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.E2WLIVWQ.js.map
+//# sourceMappingURL=chunk.3UMDHDWF.js.map

package/dist/chunks/{chunk.4BENERGC.js → chunk.4RYQJN7A.js}

@@ -1,16 +1,16 @@
 import {
   SynTag
-} from "./chunk.MFVS7MUC.js";
+} from "./chunk.OPIYV7ZJ.js";
 import {
   compareValues,
   isAllowedValue
 } from "./chunk.VECCQZP5.js";
 import {
   SynOption
-} from "./chunk.EV5T2KRE.js";
+} from "./chunk.OADHSKBY.js";
 import {
   SynPopup
-} from "./chunk.R2D6RKFZ.js";
+} from "./chunk.D5FQYO3C.js";
 import {
   scrollIntoView
 } from "./chunk.2DT3C6WE.js";
@@ -52,7 +52,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.E7UKVDND.js";
+} from "./chunk.FS73AEN3.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -67,7 +67,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -1359,4 +1359,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.4BENERGC.js.map
+//# sourceMappingURL=chunk.4RYQJN7A.js.map

package/dist/chunks/{chunk.IJ3TLB2G.js → chunk.4WGU73MG.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -78,4 +78,4 @@ export {
   alertSizeForInput,
   getActualInputElement
 };
-//# sourceMappingURL=chunk.IJ3TLB2G.js.map
+//# sourceMappingURL=chunk.4WGU73MG.js.map

package/dist/chunks/{chunk.L4MXZWSE.js → chunk.5DNDIB2N.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.E7UKVDND.js";
+} from "./chunk.FS73AEN3.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.L4MXZWSE.js.map
+//# sourceMappingURL=chunk.5DNDIB2N.js.map

package/dist/chunks/{chunk.WT5FBGFT.js → chunk.6AAKUZVO.js}

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

package/dist/chunks/{chunk.3EF6CSZF.js → chunk.6CITJ2RZ.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.OCPY6NOK.js";
+} from "./chunk.FFPLQRIO.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.3EF6CSZF.js.map
+//# sourceMappingURL=chunk.6CITJ2RZ.js.map

package/dist/chunks/{chunk.X2H7QIYN.js → chunk.6HVHSYQ5.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.6KV2HL6R.js";
+} from "./chunk.JTN5MB5D.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.X2H7QIYN.js.map
+//# sourceMappingURL=chunk.6HVHSYQ5.js.map

package/dist/chunks/{chunk.E3BMCLH6.js → chunk.6JK7AMVB.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.E3BMCLH6.js.map
+//# sourceMappingURL=chunk.6JK7AMVB.js.map

package/dist/chunks/{chunk.NDUXLFRC.js → chunk.7KWHMGIV.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.34WYIU4C.js";
 import {
   SynButtonGroup
-} from "./chunk.7L2GHQFH.js";
+} from "./chunk.Z3UGCQW7.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -27,7 +27,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -377,4 +377,4 @@ SynRadioGroup = __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.NDUXLFRC.js.map
+//# sourceMappingURL=chunk.7KWHMGIV.js.map

package/dist/chunks/{chunk.6R3EL3PY.js → chunk.AP2SH4PA.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.6R3EL3PY.js.map
+//# sourceMappingURL=chunk.AP2SH4PA.js.map

package/dist/chunks/{chunk.R7GT4LAH.js → chunk.ARXVC3MK.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.4BENERGC.js";
+} from "./chunk.4RYQJN7A.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.R7GT4LAH.js.map
+//# sourceMappingURL=chunk.ARXVC3MK.js.map

package/dist/chunks/{chunk.WTV2UR24.js → chunk.AYOMLZBF.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.IRH2QH56.js";
+} from "./chunk.H7ZDVJ2O.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.WTV2UR24.js.map
+//# sourceMappingURL=chunk.AYOMLZBF.js.map

package/dist/chunks/{chunk.RASNGP2A.js → chunk.BEYB5RAL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.432DTUIX.js";
 import {
   SynIcon
-} from "./chunk.E7UKVDND.js";
+} from "./chunk.FS73AEN3.js";
 import {
   enableDefaultSettings
 } from "./chunk.4MG3QDNW.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -126,4 +126,4 @@ SynRadio = __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.RASNGP2A.js.map
+//# sourceMappingURL=chunk.BEYB5RAL.js.map

package/dist/chunks/{chunk.P3R7Y2GT.js → chunk.BNLXC535.js}

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.KW4YXGPX.js";
+} from "./chunk.QJE2WRQ5.js";
 
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.P3R7Y2GT.js.map
+//# sourceMappingURL=chunk.BNLXC535.js.map

package/dist/chunks/{chunk.6O5XWWFC.js → chunk.BWMQL46C.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.E2WLIVWQ.js";
+} from "./chunk.3UMDHDWF.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.6O5XWWFC.js.map
+//# sourceMappingURL=chunk.BWMQL46C.js.map

package/dist/chunks/{chunk.M6QDGJSG.js → chunk.C6SX5END.js}

@@ -1,6 +1,6 @@
 import {
   SynTagGroup
-} from "./chunk.ETXP3XPE.js";
+} from "./chunk.DM5XFQNA.js";
 
 // src/components/tag-group/tag-group.ts
 var tag_group_default = SynTagGroup;
@@ -9,4 +9,4 @@ SynTagGroup.define("syn-tag-group");
 export {
   tag_group_default
 };
-//# sourceMappingURL=chunk.M6QDGJSG.js.map
+//# sourceMappingURL=chunk.C6SX5END.js.map

package/dist/chunks/{chunk.OFFS4ERC.js → chunk.CTK4RY6V.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.GOGAVWGT.js";
+} from "./chunk.YQARGDXI.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.OFFS4ERC.js.map
+//# sourceMappingURL=chunk.CTK4RY6V.js.map

package/dist/chunks/{chunk.M2BOV2XC.js → chunk.CVWEOXIN.js}

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

package/dist/chunks/{chunk.R2D6RKFZ.js → chunk.D5FQYO3C.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -423,4 +423,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.R2D6RKFZ.js.map
+//# sourceMappingURL=chunk.D5FQYO3C.js.map

package/dist/chunks/{chunk.CUDIVEVT.js → chunk.D64TGJ7Y.js}

@@ -139,16 +139,16 @@ var option_styles_default = css`
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
-  .option--hover .option__prefix::slotted(syn-icon),
-  .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover);
-  }
-
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
     color: var(--syn-option-icon-color-active);
   }
 
+  .option--hover:not(.option--disabled) .option__prefix::slotted(syn-icon),
+  .option--hover:not(.option--disabled) .option__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color-hover);
+  }
+
   /* This is needed for the highlight styling of the options in syn-combobox */
   .option__label::slotted(.syn-highlight-style) {
     background-color: transparent;
@@ -167,4 +167,4 @@ var option_styles_default = css`
 export {
   option_styles_default
 };
-//# sourceMappingURL=chunk.CUDIVEVT.js.map
+//# sourceMappingURL=chunk.D64TGJ7Y.js.map

package/dist/chunks/{chunk.CUDIVEVT.js.map → chunk.D64TGJ7Y.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/option/option.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  /**\n   * 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    align-items: center;\n\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 2px) / calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 4px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    color: var(--syn-color-neutral-700);\n    cursor: pointer;\n    display: flex;\n    font-family: var(--syn-font-sans);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n    font-weight: var(--syn-font-weight-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    line-height: var(--syn-line-height-normal);\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n    position: relative;\n    transition: var(--syn-transition-fast) fill;\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color);\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active);\n    color: var(--syn-option-color-active);\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option--disabled {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */\n    outline: none;\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option__label {\n    display: inline-block;\n    flex: 1 1 auto;\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    padding-inline-end: var(--syn-spacing-small);\n    visibility: hidden;\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover);\n  }\n\n  .option__prefix,\n  .option__suffix {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--hover .option__prefix::slotted(syn-icon),\n  .option--hover .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover);\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active);\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  /**\n   * 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    align-items: center;\n\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 2px) / calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 4px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    color: var(--syn-color-neutral-700);\n    cursor: pointer;\n    display: flex;\n    font-family: var(--syn-font-sans);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n    font-weight: var(--syn-font-weight-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    line-height: var(--syn-line-height-normal);\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n    position: relative;\n    transition: var(--syn-transition-fast) fill;\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color);\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active);\n    color: var(--syn-option-color-active);\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option--disabled {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */\n    outline: none;\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option__label {\n    display: inline-block;\n    flex: 1 1 auto;\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    padding-inline-end: var(--syn-spacing-small);\n    visibility: hidden;\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover);\n  }\n\n  .option__prefix,\n  .option__suffix {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active);\n  }\n\n  .option--hover:not(.option--disabled) .option__prefix::slotted(syn-icon),\n  .option--hover:not(.option--disabled) .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover);\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.6STJZLLN.js → chunk.DI3VOE4L.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.34WYIU4C.js";
 import {
   SynButton
-} from "./chunk.X6PKTIP5.js";
+} from "./chunk.ZO6FAYF5.js";
 import {
   FormControlController
 } from "./chunk.J3GDDM6Q.js";
@@ -25,7 +25,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.E7UKVDND.js";
+} from "./chunk.FS73AEN3.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -40,7 +40,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -544,4 +544,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.6STJZLLN.js.map
+//# sourceMappingURL=chunk.DI3VOE4L.js.map

package/dist/chunks/{chunk.ETXP3XPE.js → chunk.DM5XFQNA.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.HM7S6D5F.js";
+} from "./chunk.NOWZ5D35.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -98,4 +98,4 @@ SynTagGroup = __decorateClass([
 export {
   SynTagGroup
 };
-//# sourceMappingURL=chunk.ETXP3XPE.js.map
+//# sourceMappingURL=chunk.DM5XFQNA.js.map