@synergy-design-system/components 2.7.3 → 2.8.1

package/dist/styles/fouc.css

@@ -9,6 +9,7 @@
  */
 syn-accordion:not(:defined),
 syn-breadcrumb:not(:defined),
+syn-combobox:not(:defined),
 syn-details:not(:defined),
 syn-divider:not(:defined),
 syn-file:not(:defined),

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 2.7.3
+ * @synergy-design-system/components version 2.8.1
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!
@@ -17,6 +17,7 @@
  */
 syn-accordion:not(:defined),
 syn-breadcrumb:not(:defined),
+syn-combobox:not(:defined),
 syn-details:not(:defined),
 syn-divider:not(:defined),
 syn-file:not(:defined),

package/dist/synergy.d.ts

@@ -7,6 +7,7 @@ export { default as SynButtonGroup } from './components/button-group/button-grou
 export { default as SynButton } from './components/button/button.js';
 export { default as SynCard } from './components/card/card.js';
 export { default as SynCheckbox } from './components/checkbox/checkbox.js';
+export { default as SynCombobox } from './components/combobox/combobox.js';
 export { default as SynDetails } from './components/details/details.js';
 export { default as SynDialog } from './components/dialog/dialog.js';
 export { default as SynDivider } from './components/divider/divider.js';
@@ -45,4 +46,5 @@ export { default as SynTooltip } from './components/tooltip/tooltip.js';
 export * from './utilities/base-path.js';
 export * from './utilities/icon-library.js';
 export * from './utilities/form.js';
+export * from './components/combobox/option-renderer.js';
 export * from './events/events.js';

package/dist/synergy.js

@@ -1,238 +1,249 @@
+import {
+  tooltip_default
+} from "./chunks/chunk.UJ2YRD74.js";
 import {
   getFormControls,
   serialize
 } from "./chunks/chunk.DRLBTO2U.js";
 import "./chunks/chunk.NKIYFJN2.js";
-import {
-  tooltip_default
-} from "./chunks/chunk.6TC2LPMR.js";
 import {
   tag_default
-} from "./chunks/chunk.X66YHPJA.js";
+} from "./chunks/chunk.RHR4U6OW.js";
 import {
   textarea_default
-} from "./chunks/chunk.DT36GYSH.js";
-import "./chunks/chunk.ECDY5TKE.js";
+} from "./chunks/chunk.HHBOU4HL.js";
+import "./chunks/chunk.BADCMLNU.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.CRA5CBMD.js";
 import {
   tab_group_default
-} from "./chunks/chunk.GIBJ6FPQ.js";
-import "./chunks/chunk.HPSPKQLI.js";
-import "./chunks/chunk.NGI67WXT.js";
-import "./chunks/chunk.JQ47GWDL.js";
+} from "./chunks/chunk.KTALTT2Z.js";
 import {
   tab_panel_default
-} from "./chunks/chunk.N67W7UCV.js";
-import "./chunks/chunk.NXCWYPDM.js";
+} from "./chunks/chunk.RUYJJAFE.js";
+import "./chunks/chunk.FHB2H5R2.js";
 import "./chunks/chunk.XHWYGYMQ.js";
 import "./chunks/chunk.HVXG4JG6.js";
 import {
   switch_default
-} from "./chunks/chunk.2G33IFLB.js";
-import "./chunks/chunk.NIPOPIJP.js";
-import "./chunks/chunk.W5JK7V7K.js";
-import "./chunks/chunk.4TB35TYG.js";
+} from "./chunks/chunk.7L5M45GY.js";
 import {
   tab_default
-} from "./chunks/chunk.LZD6FGSA.js";
-import "./chunks/chunk.HQ4HY5BJ.js";
+} from "./chunks/chunk.WRCWSEE7.js";
+import "./chunks/chunk.VJ34GMBJ.js";
 import "./chunks/chunk.ZW75HBAK.js";
 import "./chunks/chunk.BBUFEDXF.js";
-import {
-  select_default
-} from "./chunks/chunk.YYWAJRPZ.js";
+import "./chunks/chunk.3PECQYUM.js";
+import "./chunks/chunk.JQ47GWDL.js";
+import "./chunks/chunk.NGI67WXT.js";
 import {
   side_nav_default
-} from "./chunks/chunk.XA7VQOLP.js";
-import "./chunks/chunk.44FNGHON.js";
-import "./chunks/chunk.ONW45GQI.js";
+} from "./chunks/chunk.SZWESO3L.js";
 import {
   spinner_default
-} from "./chunks/chunk.D6S3UBQR.js";
-import {
-  range_default
-} from "./chunks/chunk.XRXMHJTJ.js";
+} from "./chunks/chunk.QHRX5Z2F.js";
+import "./chunks/chunk.CUCUCDH2.js";
+import "./chunks/chunk.4TB35TYG.js";
+import "./chunks/chunk.W5JK7V7K.js";
 import {
   range_tick_default
-} from "./chunks/chunk.EGA4WZHP.js";
-import "./chunks/chunk.ZAPJHYAZ.js";
+} from "./chunks/chunk.Y2EMVYXM.js";
+import "./chunks/chunk.QILAGLSO.js";
 import "./chunks/chunk.I6YARDHH.js";
-import "./chunks/chunk.SEJ765XO.js";
-import "./chunks/chunk.6ZGBHIAN.js";
-import "./chunks/chunk.B6R3IVGO.js";
+import {
+  select_default
+} from "./chunks/chunk.WNHTRLHT.js";
+import "./chunks/chunk.J44JFQKE.js";
+import "./chunks/chunk.MSPUCOOE.js";
 import "./chunks/chunk.6EPU7YUS.js";
-import "./chunks/chunk.72HIKLQG.js";
+import "./chunks/chunk.B6R3IVGO.js";
+import "./chunks/chunk.ZO4VONAT.js";
 import "./chunks/chunk.35V3TAOT.js";
-import {
-  radio_button_default
-} from "./chunks/chunk.RD3OMAT5.js";
+import "./chunks/chunk.BAU2TJA6.js";
+import "./chunks/chunk.ONW45GQI.js";
 import {
   radio_group_default
-} from "./chunks/chunk.B7O5Z3R6.js";
-import "./chunks/chunk.XL6QVKUJ.js";
+} from "./chunks/chunk.57O66K77.js";
+import "./chunks/chunk.CKE7C643.js";
 import "./chunks/chunk.F4MRQLNL.js";
 import "./chunks/chunk.K62NPKGN.js";
-import "./chunks/chunk.4TRRPM7T.js";
-import "./chunks/chunk.ORZP7K64.js";
-import "./chunks/chunk.4X3HY2V5.js";
+import {
+  range_default
+} from "./chunks/chunk.5IBMJU5B.js";
+import "./chunks/chunk.OMUEASJV.js";
+import "./chunks/chunk.DYYUQIA2.js";
 import "./chunks/chunk.O644HRW3.js";
-import "./chunks/chunk.236RSW67.js";
+import "./chunks/chunk.4X3HY2V5.js";
 import "./chunks/chunk.277APOW3.js";
+import "./chunks/chunk.236RSW67.js";
 import {
   progress_ring_default
-} from "./chunks/chunk.FCJAOZAO.js";
+} from "./chunks/chunk.AAFLJTCI.js";
 import {
   radio_default
-} from "./chunks/chunk.QNJIEARD.js";
-import "./chunks/chunk.URLTXPUD.js";
+} from "./chunks/chunk.EN7WGVFV.js";
+import "./chunks/chunk.SYY26NKV.js";
 import "./chunks/chunk.V6VND4OF.js";
 import "./chunks/chunk.EHSNF4SS.js";
-import "./chunks/chunk.2VUT3BL6.js";
-import "./chunks/chunk.4BRJ5OJE.js";
 import {
-  prio_nav_default
-} from "./chunks/chunk.PRFM7LHM.js";
+  radio_button_default
+} from "./chunks/chunk.KQTEJUZC.js";
+import "./chunks/chunk.RC5BEOPA.js";
+import "./chunks/chunk.4BRJ5OJE.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.47QPSOZS.js";
-import "./chunks/chunk.7JO5GM6Q.js";
+} from "./chunks/chunk.UQ4AQCDW.js";
+import "./chunks/chunk.EZNNJFB7.js";
 import "./chunks/chunk.AMAK44YX.js";
 import "./chunks/chunk.QUM76UHV.js";
-import "./chunks/chunk.LHLRPAQ2.js";
+import "./chunks/chunk.VKYAP6J3.js";
 import "./chunks/chunk.2V3HGTTL.js";
 import "./chunks/chunk.RMIDAEF5.js";
 import {
   option_default
-} from "./chunks/chunk.MK6YKHLR.js";
-import "./chunks/chunk.6H325Y64.js";
-import "./chunks/chunk.3B24TYVN.js";
-import "./chunks/chunk.IVM3BGRH.js";
+} from "./chunks/chunk.ACEU7Q65.js";
 import {
   popup_default
-} from "./chunks/chunk.27IBSVKG.js";
-import "./chunks/chunk.BZ4XKZIO.js";
-import "./chunks/chunk.74N5WLM5.js";
-import "./chunks/chunk.XNP4OTUB.js";
+} from "./chunks/chunk.OCZ6SNNW.js";
 import {
-  menu_label_default
-} from "./chunks/chunk.4G2ABYSY.js";
+  prio_nav_default
+} from "./chunks/chunk.BJ2F6ARR.js";
+import "./chunks/chunk.OOSXOXEW.js";
+import "./chunks/chunk.XNP4OTUB.js";
+import "./chunks/chunk.74N5WLM5.js";
 import {
   nav_item_default
-} from "./chunks/chunk.HYHMM5YY.js";
-import "./chunks/chunk.PBKQU2MD.js";
+} from "./chunks/chunk.2VGUDLNP.js";
+import "./chunks/chunk.W6DMUOGD.js";
 import "./chunks/chunk.VGEA67UG.js";
 import {
   optgroup_default
-} from "./chunks/chunk.O5FATZG2.js";
-import "./chunks/chunk.YSJVZKXR.js";
+} from "./chunks/chunk.JI7DN44F.js";
+import "./chunks/chunk.FIZMTZML.js";
 import "./chunks/chunk.KG52EHDB.js";
-import {
-  menu_default
-} from "./chunks/chunk.PMZH2LSC.js";
+import "./chunks/chunk.HHRJTCUN.js";
+import "./chunks/chunk.IVM3BGRH.js";
+import "./chunks/chunk.3B24TYVN.js";
 import {
   menu_item_default
-} from "./chunks/chunk.Z2UVOZS7.js";
-import "./chunks/chunk.ALLHYPJO.js";
+} from "./chunks/chunk.E3QPS5XK.js";
+import {
+  menu_label_default
+} from "./chunks/chunk.5P7T4EJW.js";
+import "./chunks/chunk.52JYIPPF.js";
+import "./chunks/chunk.X6GR6IA2.js";
+import "./chunks/chunk.RAOPZXJL.js";
+import {
+  input_default
+} from "./chunks/chunk.2QZJVYXZ.js";
+import {
+  menu_default
+} from "./chunks/chunk.RTMHCZ2X.js";
+import "./chunks/chunk.QA7ENF6T.js";
+import "./chunks/chunk.PILX7LVU.js";
+import "./chunks/chunk.C2CWYCOU.js";
+import "./chunks/chunk.3MI2YYYP.js";
 import "./chunks/chunk.OOABXWCW.js";
 import "./chunks/chunk.FSWTBNSI.js";
 import "./chunks/chunk.JNP34M27.js";
-import "./chunks/chunk.UPND3GC3.js";
-import "./chunks/chunk.RAOPZXJL.js";
-import "./chunks/chunk.X6GR6IA2.js";
 import {
   icon_button_default
-} from "./chunks/chunk.RLLRACFX.js";
-import {
-  input_default
-} from "./chunks/chunk.EY2Y3YRB.js";
-import "./chunks/chunk.A3FSHIF2.js";
+} from "./chunks/chunk.DORQF2IR.js";
+import "./chunks/chunk.ISY76A43.js";
 import "./chunks/chunk.3A65FBTX.js";
 import "./chunks/chunk.3B22DBSJ.js";
-import "./chunks/chunk.PSO4P4GI.js";
-import "./chunks/chunk.PILX7LVU.js";
-import "./chunks/chunk.C2CWYCOU.js";
 import {
   file_default
-} from "./chunks/chunk.KEA5422Y.js";
-import "./chunks/chunk.NDG2QRC6.js";
-import "./chunks/chunk.IKZOQ7AE.js";
+} from "./chunks/chunk.FWGBAOEO.js";
 import {
   header_default
-} from "./chunks/chunk.HPZNNV2N.js";
-import "./chunks/chunk.I6M5U7WI.js";
+} from "./chunks/chunk.B7G5PMM3.js";
+import "./chunks/chunk.D6HHUC7H.js";
+import "./chunks/chunk.GVNVZMMM.js";
 import {
   icon_default
-} from "./chunks/chunk.25BLXBE3.js";
-import "./chunks/chunk.GVNVZMMM.js";
+} from "./chunks/chunk.QENGAJI2.js";
 import {
   drawer_default
-} from "./chunks/chunk.5TZ32OW5.js";
-import "./chunks/chunk.VG4DMEAL.js";
-import "./chunks/chunk.I4FIU7FA.js";
-import "./chunks/chunk.N7QJ54ZM.js";
+} from "./chunks/chunk.Q4VDUQXB.js";
 import {
   dropdown_default
-} from "./chunks/chunk.HXNRNBJJ.js";
-import "./chunks/chunk.K4MYBKIV.js";
-import "./chunks/chunk.OTAHBVCK.js";
-import "./chunks/chunk.AZ3N5IOO.js";
+} from "./chunks/chunk.5LY7AGHD.js";
+import "./chunks/chunk.UUDEWIY2.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.D6IIQDWJ.js";
+import "./chunks/chunk.BS6RCJAA.js";
+import "./chunks/chunk.IKZOQ7AE.js";
 import {
   dialog_default
-} from "./chunks/chunk.4GSWQCRZ.js";
-import "./chunks/chunk.346JZFRN.js";
-import "./chunks/chunk.XDM6VD32.js";
-import "./chunks/chunk.5732DMBC.js";
-import "./chunks/chunk.POGMEL53.js";
-import "./chunks/chunk.IU3SSJZE.js";
-import "./chunks/chunk.MU43DZ7W.js";
+} from "./chunks/chunk.QOFFSNC7.js";
 import {
   divider_default
-} from "./chunks/chunk.GFGLP2XV.js";
-import "./chunks/chunk.2MSXUGA3.js";
+} from "./chunks/chunk.EAPQXMZ2.js";
+import "./chunks/chunk.4PTV2G5L.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.FSZIE7IO.js";
+import "./chunks/chunk.AO7D6MGZ.js";
+import "./chunks/chunk.N7QJ54ZM.js";
+import "./chunks/chunk.I4FIU7FA.js";
+import {
+  details_default
+} from "./chunks/chunk.NC25624J.js";
+import "./chunks/chunk.EG2IMMFQ.js";
+import "./chunks/chunk.PU2BDR2W.js";
+import "./chunks/chunk.VA26EAEP.js";
+import "./chunks/chunk.P7BBVH4J.js";
+import "./chunks/chunk.MU43DZ7W.js";
+import "./chunks/chunk.XDM6VD32.js";
+import "./chunks/chunk.POGMEL53.js";
+import "./chunks/chunk.IU3SSJZE.js";
 import {
   checkbox_default
-} from "./chunks/chunk.O7D5YLTT.js";
-import "./chunks/chunk.UAGD75LH.js";
-import "./chunks/chunk.RBG37CD4.js";
-import "./chunks/chunk.FKKJBKYL.js";
+} from "./chunks/chunk.HJN2PJLO.js";
+import "./chunks/chunk.GWH3EUTB.js";
 import "./chunks/chunk.IG3RCOB3.js";
 import "./chunks/chunk.6OX2AX3Z.js";
 import {
-  details_default
-} from "./chunks/chunk.ASZAVTMB.js";
-import "./chunks/chunk.5GMJIKGV.js";
-import "./chunks/chunk.PU2BDR2W.js";
-import "./chunks/chunk.VA26EAEP.js";
+  combobox_default
+} from "./chunks/chunk.FV5CR37F.js";
+import "./chunks/chunk.ZWBQZ3TF.js";
+import "./chunks/chunk.A2JGI7YK.js";
+import "./chunks/chunk.AZ3N5IOO.js";
+import {
+  defaultOptionRenderer,
+  highlightOptionRenderer
+} from "./chunks/chunk.SRH6ZOHT.js";
+import "./chunks/chunk.2Y33P22F.js";
+import "./chunks/chunk.5732DMBC.js";
+import "./chunks/chunk.RBG37CD4.js";
+import "./chunks/chunk.FKKJBKYL.js";
+import "./chunks/chunk.DPCIJLV4.js";
+import "./chunks/chunk.J2OXSQAK.js";
 import {
   button_default
-} from "./chunks/chunk.EZ7I56KK.js";
+} from "./chunks/chunk.AFGSWIVU.js";
 import {
   button_group_default
-} from "./chunks/chunk.JGBBFBPJ.js";
-import "./chunks/chunk.5BCFFU3J.js";
+} from "./chunks/chunk.X3UWO4AP.js";
+import "./chunks/chunk.C2U4OMNI.js";
 import "./chunks/chunk.GRVNUIP2.js";
 import {
   card_default
-} from "./chunks/chunk.6ZK3DZXC.js";
-import "./chunks/chunk.U7R56RK2.js";
+} from "./chunks/chunk.CW4MHF2R.js";
+import "./chunks/chunk.BWIAZH7P.js";
 import "./chunks/chunk.36SZKAYW.js";
 import "./chunks/chunk.C4JTZKPZ.js";
 import {
   breadcrumb_default
-} from "./chunks/chunk.27VOTCNN.js";
+} from "./chunks/chunk.QEE6QHNL.js";
 import {
   breadcrumb_item_default
-} from "./chunks/chunk.2KZ6JLJO.js";
-import "./chunks/chunk.JEUDRPFA.js";
+} from "./chunks/chunk.BGIPS7RY.js";
+import "./chunks/chunk.NB7DQIH4.js";
 import "./chunks/chunk.NGIGPLN2.js";
 import "./chunks/chunk.O6ZH6AOI.js";
-import "./chunks/chunk.QEF2QGUA.js";
-import "./chunks/chunk.5D3ZJ7E6.js";
+import "./chunks/chunk.76SYNITQ.js";
+import "./chunks/chunk.ZNLBIUIN.js";
 import "./chunks/chunk.AWJ376R6.js";
 import "./chunks/chunk.JLXCLATV.js";
 import "./chunks/chunk.BBNQVEPD.js";
@@ -240,31 +251,30 @@ import "./chunks/chunk.42LDZR6F.js";
 import "./chunks/chunk.5SQ7NVBX.js";
 import {
   alert_default
-} from "./chunks/chunk.Q2LDKDXO.js";
+} from "./chunks/chunk.PTFQMAJK.js";
 import {
   badge_default
-} from "./chunks/chunk.GTWZJL5P.js";
-import "./chunks/chunk.3JNRTS6S.js";
+} from "./chunks/chunk.P7HCXUSU.js";
+import "./chunks/chunk.4OSD25EN.js";
 import "./chunks/chunk.WQJRBFZA.js";
 import "./chunks/chunk.Y5TMYX2L.js";
-import "./chunks/chunk.JAE3UEX3.js";
+import "./chunks/chunk.QI7ZFRLW.js";
 import "./chunks/chunk.32CYREEV.js";
 import "./chunks/chunk.S22BO5SF.js";
 import {
   accordion_default
-} from "./chunks/chunk.G7HAFDVT.js";
-import "./chunks/chunk.4WIQUVMN.js";
+} from "./chunks/chunk.UQ6SGBIE.js";
+import "./chunks/chunk.3PMJXCGF.js";
 import "./chunks/chunk.WNUZ6LH4.js";
-import "./chunks/chunk.JBOBJZS2.js";
-import "./chunks/chunk.BCAVTKWB.js";
+import "./chunks/chunk.576XTTSC.js";
+import "./chunks/chunk.EM53DV44.js";
 import "./chunks/chunk.6QYKWCSO.js";
 import "./chunks/chunk.DZ7YIR5N.js";
 import "./chunks/chunk.C2ENQBPM.js";
 import "./chunks/chunk.A3OYJILJ.js";
 import "./chunks/chunk.HQ6QUSK7.js";
 import "./chunks/chunk.WVVQK5TE.js";
-import "./chunks/chunk.5EJ2YM4D.js";
-import "./chunks/chunk.ZBW4ZSZ7.js";
+import "./chunks/chunk.HM57BJF5.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -272,6 +282,7 @@ import {
 import "./chunks/chunk.YTEJW7IF.js";
 import "./chunks/chunk.AINKZEUX.js";
 import "./chunks/chunk.PJO6TM3T.js";
+import "./chunks/chunk.ZBW4ZSZ7.js";
 import "./chunks/chunk.ESQAXAFE.js";
 import "./chunks/chunk.GHGGBS4N.js";
 import {
@@ -279,7 +290,7 @@ import {
   setBasePath
 } from "./chunks/chunk.234ERFCE.js";
 import "./chunks/chunk.74IOULXM.js";
-import "./chunks/chunk.HQSCOWEI.js";
+import "./chunks/chunk.POA3IDNG.js";
 import "./chunks/chunk.JRYXECAY.js";
 import "./chunks/chunk.KG73YUXI.js";
 import "./chunks/chunk.2GFK6XTO.js";
@@ -293,6 +304,7 @@ export {
   button_group_default as SynButtonGroup,
   card_default as SynCard,
   checkbox_default as SynCheckbox,
+  combobox_default as SynCombobox,
   details_default as SynDetails,
   dialog_default as SynDialog,
   divider_default as SynDivider,
@@ -328,8 +340,10 @@ export {
   tag_default as SynTag,
   textarea_default as SynTextarea,
   tooltip_default as SynTooltip,
+  defaultOptionRenderer,
   getBasePath,
   getFormControls,
+  highlightOptionRenderer,
   registerIconLibrary,
   serialize,
   setBasePath,

package/dist/vscode.html-custom-data.json

@@ -29,29 +29,6 @@
         }
       ]
     },
-    {
-      "name": "syn-badge",
-      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/badge"
-        }
-      ]
-    },
     {
       "name": "syn-alert",
       "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the alert opens.\n- **syn-after-show** - Emitted after the alert opens and all animations are complete.\n- **syn-hide** - Emitted when the alert closes.\n- **syn-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
@@ -90,6 +67,29 @@
         }
       ]
     },
+    {
+      "name": "syn-badge",
+      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/badge"
+        }
+      ]
+    },
     {
       "name": "syn-breadcrumb",
       "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -364,6 +364,100 @@
         }
       ]
     },
+    {
+      "name": "syn-combobox",
+      "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the combobox's menu opens.\n- **syn-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the combobox's menu closes.\n- **syn-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **syn-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a syn-error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<syn-option>` elements. You can use `<syn-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the combobox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The combobox's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text to show as a hint when the combobox is empty.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the combobox control.",
+          "values": []
+        },
+        {
+          "name": "clearable",
+          "description": "Adds a clear button when the combobox is not empty.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
+          "values": []
+        },
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+          "values": [{ "name": "top" }, { "name": "bottom" }]
+        },
+        {
+          "name": "help-text",
+          "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "The combobox's required attribute.",
+          "values": []
+        },
+        {
+          "name": "getOption",
+          "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
+          "values": [{ "name": "OptionRenderer" }]
+        },
+        {
+          "name": "filter",
+          "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+          "values": [
+            { "name": "(option: SynOption" },
+            { "name": "queryString: string) => boolean" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/combobox"
+        }
+      ]
+    },
     {
       "name": "syn-details",
       "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the details opens.\n- **syn-after-show** - Emitted after the details opens and all animations are complete.\n- **syn-hide** - Emitted when the details closes.\n- **syn-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",