@synergy-design-system/components 2.15.1 → 2.16.0

package/dist/chunks/{chunk.4SXWPSBS.js → chunk.GU4BIPJ7.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.LPK45S5C.js";
+} from "./chunk.3VTK46AD.js";
 import {
   FormControlController,
   validValidityState
@@ -17,19 +17,19 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.JRJDNTMQ.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.WEMAFCFO.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.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -289,4 +289,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.4SXWPSBS.js.map
+//# sourceMappingURL=chunk.GU4BIPJ7.js.map

package/dist/chunks/{chunk.U47735LM.js → chunk.GUPAWM6P.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.BUIGXGRQ.js";
+} from "./chunk.ZP5CC64G.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.U47735LM.js.map
+//# sourceMappingURL=chunk.GUPAWM6P.js.map

package/dist/chunks/{chunk.HAYZCPF3.js → chunk.GVVTVQF7.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.33URTGM5.js";
+} from "./chunk.RTI5KERT.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.HAYZCPF3.js.map
+//# sourceMappingURL=chunk.GVVTVQF7.js.map

package/dist/chunks/{chunk.HHDEWNIZ.js → chunk.HC6MGGJ6.js}

@@ -3,13 +3,13 @@ import {
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.X3A2E75N.js";
+} from "./chunk.LRG4PEXV.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynAlert
-} from "./chunk.IIIKSFUF.js";
+} from "./chunk.ZOAG7CLB.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -286,4 +286,4 @@ __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.HHDEWNIZ.js.map
+//# sourceMappingURL=chunk.HC6MGGJ6.js.map

package/dist/chunks/{chunk.O4NRAWMA.js → chunk.HPAT4ZGY.js}

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

package/dist/chunks/{chunk.BEZ7YOJ3.js → chunk.HTCBVBIB.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.4SXWPSBS.js";
+} from "./chunk.GU4BIPJ7.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.BEZ7YOJ3.js.map
+//# sourceMappingURL=chunk.HTCBVBIB.js.map

package/dist/chunks/{chunk.MDHV46T7.js → chunk.HVPCPK6U.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   SynButtonGroup
-} from "./chunk.42PJGQ52.js";
+} from "./chunk.42SNRHHV.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -363,4 +363,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.MDHV46T7.js.map
+//# sourceMappingURL=chunk.HVPCPK6U.js.map

package/dist/chunks/{chunk.SRH6ZOHT.js → chunk.HVVPX2VA.js}

@@ -1,4 +1,5 @@
 // src/components/combobox/option-renderer.ts
+import "lit";
 var defaultOptionRenderer = (option) => option;
 var highlightOptionRenderer = (option, query) => {
   if (!query) {
@@ -10,6 +11,7 @@ var highlightOptionRenderer = (option, query) => {
   const indexLabel = clonedOption.innerHTML.indexOf(optionLabel);
   const mark = document.createElement("mark");
   mark.textContent = optionLabel.slice(queryIndex, queryIndex + query.length);
+  mark.classList.add("syn-highlight-style");
   const exchangedText = optionLabel.replace(new RegExp(query, "i"), mark.outerHTML);
   const previousContent = clonedOption.innerHTML.slice(0, indexLabel);
   const followingContent = clonedOption.innerHTML.slice(indexLabel + optionLabel.length);
@@ -21,4 +23,4 @@ export {
   defaultOptionRenderer,
   highlightOptionRenderer
 };
-//# sourceMappingURL=chunk.SRH6ZOHT.js.map
+//# sourceMappingURL=chunk.HVVPX2VA.js.map

package/dist/chunks/{chunk.SRH6ZOHT.js.map → chunk.HVVPX2VA.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/combobox/option-renderer.ts"],
-  "sourcesContent": ["import type { TemplateResult } from 'lit';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * A type definition for a function that renders an option.\n *\n * @param option - The option to be rendered.\n * @param query - The current query string used for filtering options.\n * @returns - The changed option to render\n */\nexport type OptionRenderer = (\n  option: SynOption,\n  query?: string\n) => TemplateResult | string | HTMLElement;\n\n/**\n * The default option renderer, which does not change the option.\n */\nexport const defaultOptionRenderer: OptionRenderer = (option: SynOption) => option;\n\n/**\n * A function that highlights the query string with a mark element in the option.\n */\nexport const highlightOptionRenderer: OptionRenderer = (option: SynOption, query: string) => {\n  if (!query) {\n    return option;\n  }\n\n  const clonedOption = option.cloneNode(true) as SynOption;\n  const optionLabel = clonedOption.getTextLabel();\n  const queryIndex = optionLabel.toLowerCase().indexOf(query.toLowerCase());\n  const indexLabel = clonedOption.innerHTML.indexOf(optionLabel);\n\n  const mark = document.createElement('mark');\n  mark.textContent = optionLabel.slice(queryIndex, queryIndex + query.length);\n\n  const exchangedText = optionLabel.replace(new RegExp(query, 'i'), mark.outerHTML);\n  const previousContent = clonedOption.innerHTML.slice(0, indexLabel);\n  const followingContent = clonedOption.innerHTML.slice(indexLabel + optionLabel.length);\n  // eslint-disable-next-line no-param-reassign\n  clonedOption.innerHTML = previousContent.concat(exchangedText, followingContent);\n  return clonedOption;\n};\n"],
-  "mappings": ";AAkBO,IAAM,wBAAwC,CAAC,WAAsB;AAKrE,IAAM,0BAA0C,CAAC,QAAmB,UAAkB;AAC3F,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,OAAO,UAAU,IAAI;AAC1C,QAAM,cAAc,aAAa,aAAa;AAC9C,QAAM,aAAa,YAAY,YAAY,EAAE,QAAQ,MAAM,YAAY,CAAC;AACxE,QAAM,aAAa,aAAa,UAAU,QAAQ,WAAW;AAE7D,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,cAAc,YAAY,MAAM,YAAY,aAAa,MAAM,MAAM;AAE1E,QAAM,gBAAgB,YAAY,QAAQ,IAAI,OAAO,OAAO,GAAG,GAAG,KAAK,SAAS;AAChF,QAAM,kBAAkB,aAAa,UAAU,MAAM,GAAG,UAAU;AAClE,QAAM,mBAAmB,aAAa,UAAU,MAAM,aAAa,YAAY,MAAM;AAErF,eAAa,YAAY,gBAAgB,OAAO,eAAe,gBAAgB;AAC/E,SAAO;AACT;",
+  "sourcesContent": ["import { type TemplateResult } from 'lit';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * A type definition for a function that renders an option.\n *\n * @param option - The option to be rendered.\n * @param query - The current query string used for filtering options.\n * @returns - The changed option to render\n */\nexport type OptionRenderer = (\n  option: SynOption,\n  query?: string\n) => TemplateResult | string | HTMLElement;\n\n/**\n * The default option renderer, which does not change the option.\n */\nexport const defaultOptionRenderer: OptionRenderer = (option: SynOption) => option;\n\n/**\n * A function that highlights the query string with a mark element in the option.\n */\nexport const highlightOptionRenderer: OptionRenderer = (option: SynOption, query: string) => {\n  if (!query) {\n    return option;\n  }\n\n  const clonedOption = option.cloneNode(true) as SynOption;\n  const optionLabel = clonedOption.getTextLabel();\n  const queryIndex = optionLabel.toLowerCase().indexOf(query.toLowerCase());\n  const indexLabel = clonedOption.innerHTML.indexOf(optionLabel);\n\n  const mark = document.createElement('mark');\n  mark.textContent = optionLabel.slice(queryIndex, queryIndex + query.length);\n  mark.classList.add('syn-highlight-style');\n\n  const exchangedText = optionLabel.replace(new RegExp(query, 'i'), mark.outerHTML);\n  const previousContent = clonedOption.innerHTML.slice(0, indexLabel);\n  const followingContent = clonedOption.innerHTML.slice(indexLabel + optionLabel.length);\n  // eslint-disable-next-line no-param-reassign\n  clonedOption.innerHTML = previousContent.concat(exchangedText, followingContent);\n  return clonedOption;\n};\n"],
+  "mappings": ";AAAA,OAAoC;AAkB7B,IAAM,wBAAwC,CAAC,WAAsB;AAKrE,IAAM,0BAA0C,CAAC,QAAmB,UAAkB;AAC3F,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,OAAO,UAAU,IAAI;AAC1C,QAAM,cAAc,aAAa,aAAa;AAC9C,QAAM,aAAa,YAAY,YAAY,EAAE,QAAQ,MAAM,YAAY,CAAC;AACxE,QAAM,aAAa,aAAa,UAAU,QAAQ,WAAW;AAE7D,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,cAAc,YAAY,MAAM,YAAY,aAAa,MAAM,MAAM;AAC1E,OAAK,UAAU,IAAI,qBAAqB;AAExC,QAAM,gBAAgB,YAAY,QAAQ,IAAI,OAAO,OAAO,GAAG,GAAG,KAAK,SAAS;AAChF,QAAM,kBAAkB,aAAa,UAAU,MAAM,GAAG,UAAU;AAClE,QAAM,mBAAmB,aAAa,UAAU,MAAM,aAAa,YAAY,MAAM;AAErF,eAAa,YAAY,gBAAgB,OAAO,eAAe,gBAAgB;AAC/E,SAAO;AACT;",
   "names": []
 }

package/dist/chunks/{chunk.OBMYXDWN.js → chunk.I4IRVCPG.js}

@@ -1,15 +1,15 @@
-import {
-  accordion_styles_default
-} from "./chunk.WNUZ6LH4.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  accordion_styles_default
+} from "./chunk.WNUZ6LH4.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -105,4 +105,4 @@ __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.OBMYXDWN.js.map
+//# sourceMappingURL=chunk.I4IRVCPG.js.map

package/dist/chunks/chunk.IJQ7XW3N.js

@@ -0,0 +1,81 @@
+// src/components/option/option.custom.styles.ts
+import { css } from "lit";
+var option_custom_styles_default = css`
+  /**
+   * The syn-option is now able to adjust its height from a parent item
+   * This is done by exposing multiple css variables to the outside:
+   *
+   * --option-min-height (defaults to 48px) The minimal height of an element
+   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use
+   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use
+   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark
+   * 
+   * See below for usage of these variables
+   */
+  .option {
+    font-size: var(--option-font-size, var(--syn-font-size-medium));
+    
+    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
+    min-height: var(--option-min-height, var(--syn-input-height-medium));
+    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));
+  }
+
+  .option:not(.option--current) {
+    color: var(--syn-color-neutral-950);
+  }
+
+  .option__label {
+    line-height: var(--syn-line-height-normal);
+  }
+
+  .option__check {
+    color: var(--syn-color-primary-600);
+    font-size: var(--option-icon-size, var(--syn-spacing-large));
+  }
+
+  .option .option__check {
+    padding-inline-end: var(--syn-spacing-small);
+  }
+
+  /* Invert the check mark when keyboard navigation is used */
+  .option--current .option__check {
+    color: var(--syn-color-neutral-0);
+  }
+
+  /* Use larger spacing between icons and content */
+  .option__prefix::slotted(*) {
+    margin-inline-end: var(--syn-spacing-small);
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  /* Set correct icon size when someone uses syn-icon in the slots */
+  .option__prefix::slotted(syn-icon),
+  .option__suffix::slotted(syn-icon) {
+    color: var(--syn-color-neutral-800);
+    font-size: var(--option-icon-size, var(--syn-spacing-large));
+  }
+
+  .option--current .option__prefix::slotted(syn-icon),
+  .option--current .option__suffix::slotted(syn-icon) {
+    color: var(--syn-color-neutral-0);
+  }
+
+  /* This is needed for the highlight styling of the options in syn-combobox */
+  .option__label::slotted(.syn-highlight-style) {
+    background-color: transparent;
+    color: var(--syn-color-neutral-950);
+    font: var(--syn-body-medium-bold);
+  }
+
+  :host([aria-selected='true']) .option__label::slotted(.syn-highlight-style) {
+    color: var(--syn-color-neutral-0);
+  }
+`;
+
+export {
+  option_custom_styles_default
+};
+//# sourceMappingURL=chunk.IJQ7XW3N.js.map

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

package/dist/chunks/{chunk.Q6GZM3EQ.js → chunk.ITMT4PJC.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.CCI2SULM.js";
+} from "./chunk.4Y7THPZR.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.Q6GZM3EQ.js.map
+//# sourceMappingURL=chunk.ITMT4PJC.js.map

package/dist/chunks/{chunk.KLXZ3EYA.js → chunk.JBTGKNX6.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk.74N5WLM5.js";
 import {
   SynNavItem
-} from "./chunk.XRQDVGVT.js";
+} from "./chunk.PIZR7FER.js";
 import {
   SynMenu
-} from "./chunk.HGDCL6QB.js";
+} from "./chunk.QAEUBEAV.js";
 import {
   SynDropdown
-} from "./chunk.HA6POUML.js";
+} from "./chunk.A5JVTKA7.js";
 import {
   SynIcon
-} from "./chunk.JRJDNTMQ.js";
+} from "./chunk.WEMAFCFO.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.KLXZ3EYA.js.map
+//# sourceMappingURL=chunk.JBTGKNX6.js.map

package/dist/chunks/{chunk.QVMCU452.js → chunk.JDACQD7S.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.QVMCU452.js.map
+//# sourceMappingURL=chunk.JDACQD7S.js.map

package/dist/chunks/{chunk.BFVB5VHQ.js → chunk.JIES4EWK.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.KLXZ3EYA.js";
+} from "./chunk.JBTGKNX6.js";
 
 // src/components/prio-nav/prio-nav.ts
 var prio_nav_default = SynPrioNav;
@@ -9,4 +9,4 @@ SynPrioNav.define("syn-prio-nav");
 export {
   prio_nav_default
 };
-//# sourceMappingURL=chunk.BFVB5VHQ.js.map
+//# sourceMappingURL=chunk.JIES4EWK.js.map

package/dist/chunks/{chunk.B5UKTWSL.js → chunk.JV3P24FY.js}

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

package/dist/chunks/{chunk.SGJLQJQQ.js → chunk.KB72SYP4.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.VIRODKYQ.js";
+} from "./chunk.WFLEIPHW.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.SGJLQJQQ.js.map
+//# sourceMappingURL=chunk.KB72SYP4.js.map

package/dist/chunks/{chunk.5RGNCN5S.js → chunk.KTCL35FV.js}

@@ -1,24 +1,24 @@
+import {
+  option_custom_styles_default
+} from "./chunk.IJQ7XW3N.js";
 import {
   option_styles_default
 } from "./chunk.IVM3BGRH.js";
-import {
-  option_custom_styles_default
-} from "./chunk.BBHVVRXK.js";
 import {
   SynIcon
-} from "./chunk.JRJDNTMQ.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.WEMAFCFO.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.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -32,6 +32,7 @@ var SynOption = class extends SynergyElement {
     super(...arguments);
     // @ts-expect-error - Controller is currently unused
     this.localize = new LocalizeController(this);
+    this.isInitialized = false;
     this.current = false;
     this.selected = false;
     this.hasHover = false;
@@ -44,18 +45,22 @@ var SynOption = class extends SynergyElement {
     this.setAttribute("aria-selected", "false");
   }
   handleDefaultSlotChange() {
-    customElements.whenDefined("syn-combobox").then(() => {
-      const controller = this.closest("syn-combobox");
-      if (controller) {
-        controller.handleDefaultSlotChange();
-      }
-    });
-    customElements.whenDefined("syn-select").then(() => {
-      const controller = this.closest("syn-select");
-      if (controller) {
-        controller.handleDefaultSlotChange();
-      }
-    });
+    if (this.isInitialized) {
+      customElements.whenDefined("syn-combobox").then(() => {
+        const controller = this.closest("syn-combobox");
+        if (controller) {
+          controller.handleDefaultSlotChange();
+        }
+      });
+      customElements.whenDefined("syn-select").then(() => {
+        const controller = this.closest("syn-select");
+        if (controller) {
+          controller.handleDefaultSlotChange();
+        }
+      });
+    } else {
+      this.isInitialized = true;
+    }
   }
   handleMouseEnter() {
     this.hasHover = true;
@@ -149,4 +154,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.5RGNCN5S.js.map
+//# sourceMappingURL=chunk.KTCL35FV.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './option.styles.js';\nimport customStyles from './option.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy.style/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynOption extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  // @ts-expect-error - Controller is currently unused\n  private readonly localize = new LocalizeController(this);\n\n  private isInitialized = false;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n  }\n\n  private handleDefaultSlotChange() {\n      if(this.isInitialized) {\n      // When the label changes, tell the controller to update\n      customElements.whenDefined('syn-combobox').then(() => {\n        const controller = this.closest('syn-combobox');\n        if (controller) {\n          controller.handleDefaultSlotChange();\n        }\n      });\n      customElements.whenDefined('syn-select').then(() => {\n        const controller = this.closest('syn-select');\n        if (controller) {\n          controller.handleDefaultSlotChange();\n        }\n      });\n    } else {\n      this.isInitialized = true;\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    if (this.value.includes(' ')) {\n      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);\n      this.value = this.value.replace(/ /g, '_');\n    }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    const nodes = this.childNodes;\n    let label = '';\n\n    [...nodes].forEach(node => {\n      if (node.nodeType === Node.ELEMENT_NODE) {\n        if (!(node as HTMLElement).hasAttribute('slot')) {\n          label += (node as HTMLElement).textContent;\n        }\n      }\n\n      if (node.nodeType === Node.TEXT_NODE) {\n        label += node.textContent;\n      }\n    });\n\n    return label.trim();\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          option: true,\n          'option--current': this.current,\n          'option--disabled': this.disabled,\n          'option--selected': this.selected,\n          'option--hover': this.hasHover\n        })}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <syn-icon part=\"checked-icon\" class=\"option__check\" name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n        <slot part=\"label\" class=\"option__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n        <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AA2BvC,IAAqB,YAArB,cAAuC,eAAe;AAAA,EAAtD;AAAA;AAKE;AAAA,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAEvD,SAAQ,gBAAgB;AAIf,mBAAU;AACV,oBAAW;AACX,oBAAW;AAOS,iBAAQ;AAGO,oBAAW;AAAA;AAAA,EAEvD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,QAAQ;AAClC,SAAK,aAAa,iBAAiB,OAAO;AAAA,EAC5C;AAAA,EAEQ,0BAA0B;AAC9B,QAAG,KAAK,eAAe;AAEvB,qBAAe,YAAY,cAAc,EAAE,KAAK,MAAM;AACpD,cAAM,aAAa,KAAK,QAAQ,cAAc;AAC9C,YAAI,YAAY;AACd,qBAAW,wBAAwB;AAAA,QACrC;AAAA,MACF,CAAC;AACD,qBAAe,YAAY,YAAY,EAAE,KAAK,MAAM;AAClD,cAAM,aAAa,KAAK,QAAQ,YAAY;AAC5C,YAAI,YAAY;AACd,qBAAW,wBAAwB;AAAA,QACrC;AAAA,MACF,CAAC;AAAA,IACH,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAAA,EACF;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW;AAAA,EAClB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,oBAAoB;AAGlB,QAAI,OAAO,KAAK,UAAU,UAAU;AAClC,WAAK,QAAQ,OAAO,KAAK,KAAK;AAAA,IAChC;AAEA,QAAI,KAAK,MAAM,SAAS,GAAG,GAAG;AAC5B,cAAQ,MAAM,yFAAyF,IAAI;AAC3G,WAAK,QAAQ,KAAK,MAAM,QAAQ,MAAM,GAAG;AAAA,IAC3C;AAAA,EACF;AAAA;AAAA,EAGA,eAAe;AACb,UAAM,QAAQ,KAAK;AACnB,QAAI,QAAQ;AAEZ,KAAC,GAAG,KAAK,EAAE,QAAQ,UAAQ;AACzB,UAAI,KAAK,aAAa,KAAK,cAAc;AACvC,YAAI,CAAE,KAAqB,aAAa,MAAM,GAAG;AAC/C,mBAAU,KAAqB;AAAA,QACjC;AAAA,MACF;AAEA,UAAI,KAAK,aAAa,KAAK,WAAW;AACpC,iBAAS,KAAK;AAAA,MAChB;AAAA,IACF,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,oBAAoB,KAAK;AAAA,MACzB,iBAAiB,KAAK;AAAA,IACxB,CAAC,CAAC;AAAA,sBACY,KAAK,gBAAgB;AAAA,sBACrB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,+DAIoB,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIzF;AACF;AA5HqB,UACZ,SAAyB,CAAC,0BAAiB,uBAAQ,4BAAY;AADnD,UAEZ,eAAe,EAAE,YAAY,QAAQ;AAOnB;AAAA,EAAxB,MAAM,gBAAgB;AAAA,GATJ,UASM;AAEhB;AAAA,EAAR,MAAM;AAAA,GAXY,UAWV;AACA;AAAA,EAAR,MAAM;AAAA,GAZY,UAYV;AACA;AAAA,EAAR,MAAM;AAAA,GAbY,UAaV;AAOoB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GApBR,UAoBU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvBvB,UAuByB;AAqC5C;AAAA,EADC,MAAM,UAAU;AAAA,GA3DE,UA4DnB;AAKA;AAAA,EADC,MAAM,UAAU;AAAA,GAhEE,UAiEnB;AAKA;AAAA,EADC,MAAM,OAAO;AAAA,GArEK,UAsEnB;",
+  "names": []
+}

package/dist/chunks/{chunk.KYN4SHKA.js → chunk.KTVS4UZQ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -132,4 +132,4 @@ __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.KYN4SHKA.js.map
+//# sourceMappingURL=chunk.KTVS4UZQ.js.map

package/dist/chunks/{chunk.XQ2QE2VZ.js → chunk.KYN52V35.js}

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

package/dist/chunks/{chunk.X3A2E75N.js → chunk.LRG4PEXV.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -33,4 +33,4 @@ export {
   normalizeEventAttribute,
   getEventNameForElement
 };
-//# sourceMappingURL=chunk.X3A2E75N.js.map
+//# sourceMappingURL=chunk.LRG4PEXV.js.map

package/dist/chunks/{chunk.5SCNOTZV.js → chunk.LZSMNTI2.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.ZSB3UTQI.js";
+} from "./chunk.NTVLNKUW.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.5SCNOTZV.js.map
+//# sourceMappingURL=chunk.LZSMNTI2.js.map

package/dist/chunks/{chunk.ZNXC6YL4.js → chunk.MA2KQ5TL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.6EPU7YUS.js";
 import {
   SynIconButton
-} from "./chunk.LYM7AO7F.js";
+} from "./chunk.A47YOODQ.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BQ5QQEE4.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.ZNXC6YL4.js.map
+//# sourceMappingURL=chunk.MA2KQ5TL.js.map

package/dist/chunks/{chunk.S3SEKRV6.js → chunk.MEHGV46S.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.ALMVWAT6.js";
+} from "./chunk.4EVO3ZSJ.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.S3SEKRV6.js.map
+//# sourceMappingURL=chunk.MEHGV46S.js.map