@synergy-design-system/components 2.14.3 → 2.14.4

package/dist/chunks/{chunk.6EVVIDQZ.js → chunk.BKKAEDNO.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -415,4 +415,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.6EVVIDQZ.js.map
+//# sourceMappingURL=chunk.BKKAEDNO.js.map

package/dist/chunks/{chunk.MTPLSXES.js → chunk.BPEZP3WP.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.MTPLSXES.js.map
+//# sourceMappingURL=chunk.BPEZP3WP.js.map

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

@@ -6,13 +6,13 @@ import {
 } from "./chunk.RAOPZXJL.js";
 import {
   SynDivider
-} from "./chunk.QZRLHN6I.js";
+} from "./chunk.UWYZBI2G.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.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.BQLRPCAA.js.map

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

@@ -1,13 +1,13 @@
 import {
   SynSpinner
-} from "./chunk.MTPLSXES.js";
+} from "./chunk.BPEZP3WP.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,19 +17,19 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.UAK6WG4U.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.KKIDHUOP.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -289,4 +289,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.R22XUKGQ.js.map
+//# sourceMappingURL=chunk.BS63LJFI.js.map

package/dist/chunks/{chunk.DOU546A6.js → chunk.BSWTMFN2.js}

@@ -1,6 +1,6 @@
 import {
   SynCard
-} from "./chunk.K5BSQPSN.js";
+} from "./chunk.WVZHBQS5.js";
 
 // src/components/card/card.ts
 var card_default = SynCard;
@@ -9,4 +9,4 @@ SynCard.define("syn-card");
 export {
   card_default
 };
-//# sourceMappingURL=chunk.DOU546A6.js.map
+//# sourceMappingURL=chunk.BSWTMFN2.js.map

package/dist/chunks/{chunk.7MCSBLOW.js → chunk.CCQ56RFM.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.BMXPNWDD.js";
+} from "./chunk.A4ZY6QII.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.CCQ56RFM.js.map

package/dist/chunks/{chunk.ZA3WJ6M5.js → chunk.CHIUNJAA.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.DYZDTSNX.js";
+} from "./chunk.D7A4ZGPT.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.ZA3WJ6M5.js.map
+//# sourceMappingURL=chunk.CHIUNJAA.js.map

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

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

package/dist/chunks/{chunk.25JUHBIK.js → chunk.CUGJ2WHE.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.I5N5WFJU.js";
+} from "./chunk.TA5XYGBC.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.25JUHBIK.js.map
+//# sourceMappingURL=chunk.CUGJ2WHE.js.map

package/dist/chunks/{chunk.SCT7M3OI.js → chunk.D2TE64F3.js}

@@ -1,24 +1,24 @@
 import {
   header_styles_default
-} from "./chunk.GVNVZMMM.js";
+} from "./chunk.66LQF6IO.js";
 import {
   icon_default
-} from "./chunk.V3YTSDOG.js";
+} from "./chunk.MBIFO2XO.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -182,4 +182,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.SCT7M3OI.js.map
+//# sourceMappingURL=chunk.D2TE64F3.js.map

package/dist/chunks/{chunk.DYZDTSNX.js → chunk.D7A4ZGPT.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.5732DMBC.js";
 import {
   SynIconButton
-} from "./chunk.K5PXELDD.js";
+} from "./chunk.I6IT6CZR.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -28,18 +28,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -394,4 +394,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.DYZDTSNX.js.map
+//# sourceMappingURL=chunk.D7A4ZGPT.js.map

package/dist/chunks/{chunk.XC2GLKQM.js → chunk.DOSBG7MN.js}

@@ -1,9 +1,3 @@
-import {
-  badge_custom_styles_default
-} from "./chunk.WQJRBFZA.js";
-import {
-  badge_styles_default
-} from "./chunk.Y5TMYX2L.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -12,7 +6,13 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
+import {
+  badge_custom_styles_default
+} from "./chunk.J6CGTLVH.js";
+import {
+  badge_styles_default
+} from "./chunk.Y5TMYX2L.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.XC2GLKQM.js.map
+//# sourceMappingURL=chunk.DOSBG7MN.js.map

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

@@ -23,9 +23,15 @@ 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
    */
@@ -108,4 +114,4 @@ var menu_item_custom_styles_default = css`
 export {
   menu_item_custom_styles_default
 };
-//# sourceMappingURL=chunk.OOABXWCW.js.map
+//# sourceMappingURL=chunk.E7AZZSVA.js.map

package/dist/chunks/chunk.E7AZZSVA.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  .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    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"],
+  "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;",
+  "names": []
+}

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

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.PFCFF54R.js";
+} from "./chunk.R6PLNFHF.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.EASMPKTG.js.map

package/dist/chunks/{chunk.UVT3K4BL.js → chunk.EZJD2GUY.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   SynButton
-} from "./chunk.R22XUKGQ.js";
+} from "./chunk.BS63LJFI.js";
 import {
   FormControlController
 } from "./chunk.AMIQC3O7.js";
@@ -26,19 +26,19 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.UAK6WG4U.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.KKIDHUOP.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -528,4 +528,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.UVT3K4BL.js.map
+//# sourceMappingURL=chunk.EZJD2GUY.js.map

package/dist/chunks/{chunk.A7DYRCSL.js → chunk.FJ6R3VJZ.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.P5CBQNOP.js";
+} from "./chunk.LPRWR5XH.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.A7DYRCSL.js.map
+//# sourceMappingURL=chunk.FJ6R3VJZ.js.map

package/dist/chunks/{chunk.YMCR3GIU.js → chunk.FU4AFJ2U.js}

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

package/dist/chunks/{chunk.KX3ATDPK.js → chunk.G2ZSWWS6.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.NCQXRLJC.js";
+} from "./chunk.Q27Z7MPU.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.KX3ATDPK.js.map
+//# sourceMappingURL=chunk.G2ZSWWS6.js.map

package/dist/chunks/{chunk.SNVEQ432.js → chunk.G6YW3R3W.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.DQC3S32H.js";
+} from "./chunk.XOMKTBTJ.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.SNVEQ432.js.map
+//# sourceMappingURL=chunk.G6YW3R3W.js.map

package/dist/chunks/{chunk.PONNA4YL.js → chunk.HU2NICBI.js}

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

package/dist/chunks/{chunk.K5PXELDD.js → chunk.I6IT6CZR.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.DZ7YIR5N.js";
 import {
   SynIcon
-} from "./chunk.UAK6WG4U.js";
+} from "./chunk.KKIDHUOP.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -138,4 +138,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.K5PXELDD.js.map
+//# sourceMappingURL=chunk.I6IT6CZR.js.map

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

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.CJVTIJGE.js";
+} from "./chunk.5JK5C3NG.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.I7SRS2KN.js.map

package/dist/chunks/{chunk.KG52EHDB.js → chunk.IFW77IB7.js}

@@ -49,7 +49,7 @@ var optgroup_styles_default = css`
 
   .optgroup__prefix,
   .optgroup__suffix {
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-color-neutral-800);
     font-size: var(--syn-spacing-large);
   }
 `;
@@ -57,4 +57,4 @@ var optgroup_styles_default = css`
 export {
   optgroup_styles_default
 };
-//# sourceMappingURL=chunk.KG52EHDB.js.map
+//# sourceMappingURL=chunk.IFW77IB7.js.map

package/dist/chunks/{chunk.KG52EHDB.js.map → chunk.IFW77IB7.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/optgroup/optgroup.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --display-divider: block;\n  }\n\n  .optgroup__divider {\n    --spacing: var(--syn-spacing-x-small);\n\n    display: var(--display-divider);\n  }\n\n  .optgroup__label-container {\n    align-items: center;\n    box-sizing: border-box;\n    color: var(--syn-color-neutral-950);\n    display: flex;\n    gap: var(--syn-spacing-small);\n  }\n\n  /**\n   * Only show the label container when there is a label at all\n   */\n  .optgroup--has-prefix .optgroup__label-container,\n  .optgroup--has-label .optgroup__label-container,\n  .optgroup--has-suffix .optgroup__label-container {\n    padding-block: var(--syn-spacing-small);\n    padding-inline: var(--syn-spacing-medium);\n  }\n\n  /**\n   * Format main label.\n   * Make sure this works for props and slotted content\n   */\n  .optgroup__label-content,\n  .optgroup__label::slotted(*) {\n    flex: 1;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-semibold);\n    line-height: var(--syn-line-height-normal);\n  }\n\n  /* Disabled Label */\n  .optgroup--is-disabled .optgroup__label-container {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .optgroup__prefix,\n  .optgroup__suffix {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --display-divider: block;\n  }\n\n  .optgroup__divider {\n    --spacing: var(--syn-spacing-x-small);\n\n    display: var(--display-divider);\n  }\n\n  .optgroup__label-container {\n    align-items: center;\n    box-sizing: border-box;\n    color: var(--syn-color-neutral-950);\n    display: flex;\n    gap: var(--syn-spacing-small);\n  }\n\n  /**\n   * Only show the label container when there is a label at all\n   */\n  .optgroup--has-prefix .optgroup__label-container,\n  .optgroup--has-label .optgroup__label-container,\n  .optgroup--has-suffix .optgroup__label-container {\n    padding-block: var(--syn-spacing-small);\n    padding-inline: var(--syn-spacing-medium);\n  }\n\n  /**\n   * Format main label.\n   * Make sure this works for props and slotted content\n   */\n  .optgroup__label-content,\n  .optgroup__label::slotted(*) {\n    flex: 1;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-semibold);\n    line-height: var(--syn-line-height-normal);\n  }\n\n  /* Disabled Label */\n  .optgroup--is-disabled .optgroup__label-container {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .optgroup__prefix,\n  .optgroup__suffix {\n    color: var(--syn-color-neutral-800);\n    font-size: var(--syn-spacing-large);\n  }\n`;\n"],
   "mappings": ";AAAA,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;",
   "names": []
 }

package/dist/chunks/{chunk.HCJMC4IT.js → chunk.IQFXQYVK.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.6DCZLSTP.js";
+} from "./chunk.7HCKODF3.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.HCJMC4IT.js.map
+//# sourceMappingURL=chunk.IQFXQYVK.js.map

package/dist/chunks/{chunk.WQJRBFZA.js → chunk.J6CGTLVH.js}

@@ -4,7 +4,7 @@ var badge_custom_styles_default = css`
   .badge {
     border: none;
     border-radius: var(--syn-border-radius-pill);
-    font: var(--syn-body-x-small-bold);
+    font: var(--syn-body-medium-bold);
     height: var(--syn-spacing-large);
     line-height: var(--syn-spacing-large);
     min-width: var(--syn-spacing-large);
@@ -63,4 +63,4 @@ var badge_custom_styles_default = css`
 export {
   badge_custom_styles_default
 };
-//# sourceMappingURL=chunk.WQJRBFZA.js.map
+//# sourceMappingURL=chunk.J6CGTLVH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/badge/badge.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .badge {\n    border: none;\n    border-radius: var(--syn-border-radius-pill);\n    font: var(--syn-body-medium-bold);\n    height: var(--syn-spacing-large);\n    line-height: var(--syn-spacing-large);\n    min-width: var(--syn-spacing-large);\n    padding: 0 var(--syn-spacing-x-small);\n  }\n\n  /* Variant modifiers */\n  .badge--primary {\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .badge--success {\n    background-color: var(--syn-color-success-500);\n    color: var(--syn-typography-color-text);\n  }\n\n  .badge--neutral {\n    background-color: var(--syn-color-neutral-800);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .badge--warning {\n    background-color: var(--syn-color-warning-400);\n    color: var(--syn-typography-color-text);\n  }\n\n  .badge--danger {\n    background-color: var(--syn-color-error-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  /**\n   * Special treatment: If the badge is empty, show it as a dot only\n   */\n  :host(:empty) .badge {\n    height: var(--syn-spacing-x-small);\n    min-width: initial;\n    padding: 0;\n    width: var(--syn-spacing-x-small);\n  }\n\n  .visually-hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\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;",
+  "names": []
+}

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

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.UVT3K4BL.js";
+} from "./chunk.EZJD2GUY.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.JCAIRKGN.js.map

package/dist/chunks/{chunk.EFEGWSPA.js → chunk.JM7ZCKEK.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.QZRLHN6I.js";
+} from "./chunk.UWYZBI2G.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.EFEGWSPA.js.map
+//# sourceMappingURL=chunk.JM7ZCKEK.js.map

package/dist/chunks/{chunk.SF4OPBS6.js → chunk.JN6WVWJX.js}

@@ -1,12 +1,12 @@
+import {
+  SynIcon
+} from "./chunk.KKIDHUOP.js";
 import {
   breadcrumb_custom_styles_default
 } from "./chunk.32CYREEV.js";
 import {
   breadcrumb_styles_default
 } from "./chunk.S22BO5SF.js";
-import {
-  SynIcon
-} from "./chunk.UAK6WG4U.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.SF4OPBS6.js.map
+//# sourceMappingURL=chunk.JN6WVWJX.js.map

package/dist/chunks/{chunk.UAK6WG4U.js → chunk.KKIDHUOP.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.LB6HDIPZ.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -182,4 +182,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.UAK6WG4U.js.map
+//# sourceMappingURL=chunk.KKIDHUOP.js.map