@synergy-design-system/components 2.2.1 → 2.3.0

package/dist/synergy.js

@@ -1,261 +1,273 @@
-import "./chunks/chunk.NKIYFJN2.js";
 import {
   tooltip_default
-} from "./chunks/chunk.6DRGHR6G.js";
+} from "./chunks/chunk.J4NGGBQ2.js";
 import {
   getFormControls,
   serialize
 } from "./chunks/chunk.MXCWG2OM.js";
+import "./chunks/chunk.NKIYFJN2.js";
 import {
   tag_default
-} from "./chunks/chunk.PWYE2CKN.js";
+} from "./chunks/chunk.JEKJLMVU.js";
 import {
   textarea_default
-} from "./chunks/chunk.TXMRS4NH.js";
-import "./chunks/chunk.N4VVLOEJ.js";
+} from "./chunks/chunk.BII2H6QQ.js";
+import "./chunks/chunk.SAF4PRHP.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.CRA5CBMD.js";
-import "./chunks/chunk.U3EYIUEM.js";
-import "./chunks/chunk.4X3HY2V5.js";
+import "./chunks/chunk.4BC6L66J.js";
 import "./chunks/chunk.3YMWLLPP.js";
+import "./chunks/chunk.4X3HY2V5.js";
 import {
   tab_group_default
-} from "./chunks/chunk.L6GEJZFX.js";
+} from "./chunks/chunk.43EYA2HH.js";
 import {
   tab_panel_default
-} from "./chunks/chunk.SCGLKYNG.js";
-import "./chunks/chunk.HGGCQORF.js";
+} from "./chunks/chunk.6BCAOA7S.js";
+import "./chunks/chunk.E333D77M.js";
 import "./chunks/chunk.XHWYGYMQ.js";
 import "./chunks/chunk.HVXG4JG6.js";
 import {
   switch_default
-} from "./chunks/chunk.UJ7VV2OQ.js";
+} from "./chunks/chunk.RYF22CBO.js";
 import {
   tab_default
-} from "./chunks/chunk.T5EFYGGU.js";
-import "./chunks/chunk.DV75WCZZ.js";
+} from "./chunks/chunk.7A4VBS4X.js";
+import "./chunks/chunk.D3CUJ7FL.js";
 import "./chunks/chunk.OE4RXQU2.js";
 import "./chunks/chunk.U7YAV7S3.js";
-import "./chunks/chunk.CMRXPLDZ.js";
-import "./chunks/chunk.NGI67WXT.js";
+import "./chunks/chunk.YTVTTW3B.js";
 import "./chunks/chunk.JQ47GWDL.js";
+import "./chunks/chunk.NGI67WXT.js";
 import {
   side_nav_default
-} from "./chunks/chunk.IKFF3LCP.js";
-import "./chunks/chunk.QZO5TDVH.js";
-import "./chunks/chunk.ONW45GQI.js";
+} from "./chunks/chunk.6N22J2UN.js";
 import {
   spinner_default
-} from "./chunks/chunk.LTNA7DH6.js";
-import "./chunks/chunk.4BTQU7DS.js";
-import "./chunks/chunk.W5JK7V7K.js";
+} from "./chunks/chunk.XQWP6SMH.js";
+import "./chunks/chunk.YQM3FZBP.js";
 import "./chunks/chunk.4TB35TYG.js";
+import "./chunks/chunk.W5JK7V7K.js";
 import {
   radio_group_default
-} from "./chunks/chunk.PBKGBCEY.js";
-import "./chunks/chunk.AJE2OV62.js";
-import "./chunks/chunk.F4MRQLNL.js";
-import "./chunks/chunk.K62NPKGN.js";
+} from "./chunks/chunk.XWLOIF46.js";
 import {
   select_default
-} from "./chunks/chunk.GQX42DIK.js";
-import "./chunks/chunk.JVXMHXUT.js";
-import "./chunks/chunk.HLFSDS2W.js";
-import "./chunks/chunk.B6R3IVGO.js";
+} from "./chunks/chunk.4TGVXD35.js";
+import "./chunks/chunk.CA4QXWOI.js";
+import "./chunks/chunk.CJ64HMRK.js";
 import "./chunks/chunk.6EPU7YUS.js";
+import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.OWMT6OL2.js";
 import "./chunks/chunk.SNLPFVBC.js";
-import {
-  progress_ring_default
-} from "./chunks/chunk.2GXD4L2M.js";
+import "./chunks/chunk.66BSJQ57.js";
+import "./chunks/chunk.ONW45GQI.js";
 import {
   radio_default
-} from "./chunks/chunk.K3VTIXSY.js";
-import "./chunks/chunk.B55SP7OT.js";
+} from "./chunks/chunk.Z3KXEXZK.js";
+import "./chunks/chunk.GNBYM75U.js";
 import "./chunks/chunk.V6VND4OF.js";
 import "./chunks/chunk.EHSNF4SS.js";
 import {
   radio_button_default
-} from "./chunks/chunk.7MHGXXEB.js";
-import "./chunks/chunk.G72MXFHF.js";
+} from "./chunks/chunk.SFRDDSWI.js";
+import "./chunks/chunk.S44C5OQR.js";
 import "./chunks/chunk.4BRJ5OJE.js";
+import "./chunks/chunk.A5T5QIRR.js";
+import "./chunks/chunk.F4MRQLNL.js";
+import "./chunks/chunk.K62NPKGN.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.HYBKODEA.js";
-import "./chunks/chunk.FGLWJH52.js";
+} from "./chunks/chunk.EOZEZ2XM.js";
+import "./chunks/chunk.WNRXN24D.js";
 import "./chunks/chunk.AMAK44YX.js";
 import "./chunks/chunk.QUM76UHV.js";
-import "./chunks/chunk.4XCGV45H.js";
+import {
+  progress_ring_default
+} from "./chunks/chunk.UEHYOYDV.js";
+import "./chunks/chunk.AQZKYDTS.js";
 import "./chunks/chunk.2V3HGTTL.js";
 import "./chunks/chunk.RMIDAEF5.js";
 import {
   option_default
-} from "./chunks/chunk.EVRCBL4M.js";
+} from "./chunks/chunk.NMSKNQ3B.js";
 import {
   popup_default
-} from "./chunks/chunk.ZDGXQEWX.js";
+} from "./chunks/chunk.4LCZCUMF.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.FEQGC6LL.js";
-import "./chunks/chunk.AH7JXEA2.js";
-import "./chunks/chunk.XNP4OTUB.js";
+} from "./chunks/chunk.ZFJL5UPT.js";
+import "./chunks/chunk.ALF7C2K3.js";
 import "./chunks/chunk.74N5WLM5.js";
+import "./chunks/chunk.XNP4OTUB.js";
 import {
   nav_item_default
-} from "./chunks/chunk.KKW6IPIK.js";
-import "./chunks/chunk.E7SVB2R6.js";
-import "./chunks/chunk.FAAETEJ2.js";
+} from "./chunks/chunk.CRN2Q7MJ.js";
 import {
   optgroup_default
-} from "./chunks/chunk.IT2WF33D.js";
-import "./chunks/chunk.UH2Y55BA.js";
+} from "./chunks/chunk.KZSS64BS.js";
+import "./chunks/chunk.7FYRHIYL.js";
 import "./chunks/chunk.KG52EHDB.js";
-import "./chunks/chunk.PJZ7TFHA.js";
-import "./chunks/chunk.IVM3BGRH.js";
+import "./chunks/chunk.GDUHGZNB.js";
 import "./chunks/chunk.3B24TYVN.js";
+import "./chunks/chunk.IVM3BGRH.js";
 import {
   menu_item_default
-} from "./chunks/chunk.6FFYAZU4.js";
+} from "./chunks/chunk.5AFAYK7R.js";
 import {
   menu_label_default
-} from "./chunks/chunk.WALDQS7F.js";
-import "./chunks/chunk.BOFG4VID.js";
+} from "./chunks/chunk.KEJRP2YF.js";
+import "./chunks/chunk.DYAEF25V.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.RAOPZXJL.js";
+import "./chunks/chunk.B5SSBYGJ.js";
+import "./chunks/chunk.FAAETEJ2.js";
 import {
   input_default
-} from "./chunks/chunk.QT3ESAPF.js";
+} from "./chunks/chunk.TPGRGJR3.js";
 import {
   menu_default
-} from "./chunks/chunk.26HGFJIQ.js";
-import "./chunks/chunk.JNCK3S26.js";
+} from "./chunks/chunk.X6QYMTT6.js";
+import "./chunks/chunk.QTL37DVE.js";
 import "./chunks/chunk.PILX7LVU.js";
 import "./chunks/chunk.C2CWYCOU.js";
-import "./chunks/chunk.ESFHL7OW.js";
-import "./chunks/chunk.OOABXWCW.js";
+import "./chunks/chunk.KJULR6ZF.js";
 import "./chunks/chunk.MLP2VIC7.js";
 import "./chunks/chunk.U2OMGNNZ.js";
+import "./chunks/chunk.OOABXWCW.js";
 import {
   icon_button_default
-} from "./chunks/chunk.NOPRJ4QH.js";
-import "./chunks/chunk.QXWUF6OB.js";
-import "./chunks/chunk.3A65FBTX.js";
+} from "./chunks/chunk.WODYLR4A.js";
+import "./chunks/chunk.7TRBFW6D.js";
 import "./chunks/chunk.3B22DBSJ.js";
-import {
-  dropdown_default
-} from "./chunks/chunk.ADZJXJ4U.js";
+import "./chunks/chunk.3A65FBTX.js";
 import {
   header_default
-} from "./chunks/chunk.EN4BZT55.js";
-import "./chunks/chunk.N4SL33Q2.js";
+} from "./chunks/chunk.QQUUXS2I.js";
+import "./chunks/chunk.RXHKSN5J.js";
 import "./chunks/chunk.GVNVZMMM.js";
 import {
   icon_default
-} from "./chunks/chunk.GIVVS2TV.js";
-import {
-  divider_default
-} from "./chunks/chunk.I4JTI4B2.js";
+} from "./chunks/chunk.MYK2AWCR.js";
 import {
   drawer_default
-} from "./chunks/chunk.QXH7H6AN.js";
-import "./chunks/chunk.XZTGJHD2.js";
+} from "./chunks/chunk.6ULGNLBL.js";
+import "./chunks/chunk.W55D3EVE.js";
 import "./chunks/chunk.I4FIU7FA.js";
 import "./chunks/chunk.N7QJ54ZM.js";
-import "./chunks/chunk.6PJ7AOK4.js";
-import "./chunks/chunk.UDT3BHIY.js";
+import {
+  dropdown_default
+} from "./chunks/chunk.JPW3OCEH.js";
+import "./chunks/chunk.MBCDRER6.js";
+import "./chunks/chunk.2ISDOIZK.js";
 import "./chunks/chunk.AZ3N5IOO.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.D6IIQDWJ.js";
-import {
-  checkbox_default
-} from "./chunks/chunk.JF6VUTP3.js";
 import {
   dialog_default
-} from "./chunks/chunk.NIUH3JWB.js";
-import "./chunks/chunk.ELQHZNNF.js";
+} from "./chunks/chunk.CL3UAP77.js";
+import "./chunks/chunk.Z46Q4HC4.js";
 import "./chunks/chunk.PMC3VAD6.js";
 import "./chunks/chunk.RX7A4EQ2.js";
 import "./chunks/chunk.POGMEL53.js";
 import "./chunks/chunk.IU3SSJZE.js";
 import "./chunks/chunk.MU43DZ7W.js";
-import "./chunks/chunk.JLNTO45Z.js";
+import {
+  divider_default
+} from "./chunks/chunk.RXPHW5QH.js";
+import "./chunks/chunk.HRWJZ263.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.FSZIE7IO.js";
 import {
-  button_group_default
-} from "./chunks/chunk.FFA5NEKJ.js";
-import {
-  card_default
-} from "./chunks/chunk.EKZFQX32.js";
-import "./chunks/chunk.25RVT6CZ.js";
-import "./chunks/chunk.36SZKAYW.js";
-import "./chunks/chunk.C4JTZKPZ.js";
-import "./chunks/chunk.FX5EOGYW.js";
+  checkbox_default
+} from "./chunks/chunk.EZVTRKT7.js";
+import "./chunks/chunk.Y45V3AOE.js";
 import "./chunks/chunk.RBG37CD4.js";
 import "./chunks/chunk.CX4QZVGR.js";
 import "./chunks/chunk.IG3RCOB3.js";
 import "./chunks/chunk.6OX2AX3Z.js";
 import {
-  breadcrumb_item_default
-} from "./chunks/chunk.6666WCQQ.js";
+  details_default
+} from "./chunks/chunk.GR7AJIV7.js";
+import "./chunks/chunk.OE3Y3CA4.js";
+import "./chunks/chunk.PU2BDR2W.js";
+import "./chunks/chunk.VA26EAEP.js";
 import {
   button_default
-} from "./chunks/chunk.3OCNGMHR.js";
-import "./chunks/chunk.24P533FX.js";
-import "./chunks/chunk.YAYURZHV.js";
+} from "./chunks/chunk.626F5A6G.js";
+import {
+  button_group_default
+} from "./chunks/chunk.EW7GTAPE.js";
+import "./chunks/chunk.FTAZTCF6.js";
+import "./chunks/chunk.GRVNUIP2.js";
+import {
+  card_default
+} from "./chunks/chunk.JWXV5LZJ.js";
+import "./chunks/chunk.RHSBVJQ2.js";
+import "./chunks/chunk.36SZKAYW.js";
+import "./chunks/chunk.C4JTZKPZ.js";
+import {
+  breadcrumb_default
+} from "./chunks/chunk.KX2JSJEA.js";
+import {
+  breadcrumb_item_default
+} from "./chunks/chunk.GYM6FCBH.js";
+import "./chunks/chunk.N3246A5F.js";
+import "./chunks/chunk.NGIGPLN2.js";
+import "./chunks/chunk.O6ZH6AOI.js";
+import "./chunks/chunk.MWX2VWP5.js";
+import "./chunks/chunk.TOHYRWJW.js";
 import "./chunks/chunk.AWJ376R6.js";
 import "./chunks/chunk.JLXCLATV.js";
 import "./chunks/chunk.6EXC65JJ.js";
 import "./chunks/chunk.I25TRQGB.js";
 import "./chunks/chunk.5SQ7NVBX.js";
-import "./chunks/chunk.24WTVGXH.js";
-import "./chunks/chunk.GRVNUIP2.js";
 import {
-  badge_default
-} from "./chunks/chunk.OG6ZFKXJ.js";
+  alert_default
+} from "./chunks/chunk.OPHNLOT2.js";
 import {
-  breadcrumb_default
-} from "./chunks/chunk.5V2LG5C6.js";
-import "./chunks/chunk.SYCQ26JK.js";
+  badge_default
+} from "./chunks/chunk.FLUU3VLX.js";
+import "./chunks/chunk.IGZRKQVY.js";
+import "./chunks/chunk.WQJRBFZA.js";
+import "./chunks/chunk.Y5TMYX2L.js";
+import "./chunks/chunk.KIJSLOT3.js";
 import "./chunks/chunk.32CYREEV.js";
 import "./chunks/chunk.S22BO5SF.js";
-import "./chunks/chunk.ZZE4YFZH.js";
-import "./chunks/chunk.O6ZH6AOI.js";
-import "./chunks/chunk.NGIGPLN2.js";
 import {
-  alert_default
-} from "./chunks/chunk.HNULADIV.js";
-import "./chunks/chunk.I6444N6Y.js";
-import "./chunks/chunk.UNDLEHX2.js";
+  accordion_default
+} from "./chunks/chunk.6QD4QY4G.js";
+import "./chunks/chunk.RLIJRLLJ.js";
+import "./chunks/chunk.WNUZ6LH4.js";
+import "./chunks/chunk.VRAOUUOJ.js";
+import "./chunks/chunk.TYYZK3XM.js";
 import "./chunks/chunk.ZHH2AHOZ.js";
 import "./chunks/chunk.DZ7YIR5N.js";
-import "./chunks/chunk.4OLTKAXX.js";
+import "./chunks/chunk.PYLHI2JQ.js";
 import "./chunks/chunk.MSUX23ZJ.js";
-import "./chunks/chunk.NDWE2XUA.js";
+import "./chunks/chunk.WVVQK5TE.js";
+import "./chunks/chunk.NKFRPPTB.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.AA54UMGR.js";
-import "./chunks/chunk.YTEJW7IF.js";
+} from "./chunks/chunk.AV56MW4Q.js";
 import "./chunks/chunk.SDQC32B3.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import "./chunks/chunk.ZBW4ZSZ7.js";
-import "./chunks/chunk.WVVQK5TE.js";
-import "./chunks/chunk.QJMO7V5R.js";
+import "./chunks/chunk.YTEJW7IF.js";
+import "./chunks/chunk.E3KW3KQM.js";
+import "./chunks/chunk.QZNPL6WK.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.234ERFCE.js";
+import "./chunks/chunk.QJMO7V5R.js";
+import "./chunks/chunk.E6UCXKSB.js";
 import "./chunks/chunk.JRYXECAY.js";
 import "./chunks/chunk.KG73YUXI.js";
-import "./chunks/chunk.NETSJN4U.js";
-import "./chunks/chunk.Y5TMYX2L.js";
-import "./chunks/chunk.E3KW3KQM.js";
-import "./chunks/chunk.QZNPL6WK.js";
-import "./chunks/chunk.JAHDSTW6.js";
-import "./chunks/chunk.WQJRBFZA.js";
 import "./chunks/chunk.QNDC5KWA.js";
 export {
+  accordion_default as SynAccordion,
   alert_default as SynAlert,
   badge_default as SynBadge,
   breadcrumb_default as SynBreadcrumb,
@@ -264,6 +276,7 @@ export {
   button_group_default as SynButtonGroup,
   card_default as SynCard,
   checkbox_default as SynCheckbox,
+  details_default as SynDetails,
   dialog_default as SynDialog,
   divider_default as SynDivider,
   drawer_default as SynDrawer,

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.NKIYFJN2.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.AA54UMGR.js";
-import "../chunks/chunk.YTEJW7IF.js";
+} from "../chunks/chunk.AV56MW4Q.js";
 import "../chunks/chunk.SDQC32B3.js";
+import "../chunks/chunk.YTEJW7IF.js";
 import "../chunks/chunk.234ERFCE.js";
 import "../chunks/chunk.QNDC5KWA.js";
 export {

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

@@ -2,6 +2,33 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "name": "syn-accordion",
+      "description": "Accordions provide the ability to group a list of `<syn-details>`.\n---\n\n\n### **Slots:**\n - _default_ - The accordion's main content. Must be `<syn-details />` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "close-others",
+          "description": "Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.",
+          "values": []
+        },
+        {
+          "name": "contained",
+          "description": "Draws the accordion and the slotted `<syn-details>` as contained elements.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size that should be applied to all slotted `<syn-details>` elements",
+          "values": [{ "name": "medium" }, { "name": "large" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/accordion"
+        }
+      ]
+    },
     {
       "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.",
@@ -337,6 +364,43 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+          "values": []
+        },
+        {
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the details so it can't be toggled.",
+          "values": []
+        },
+        {
+          "name": "contained",
+          "description": "Draws the details as contained element.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The details's size.",
+          "values": [{ "name": "medium" }, { "name": "large" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/details"
+        }
+      ]
+    },
     {
       "name": "syn-dialog",
       "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the dialog opens.\n- **syn-after-show** - Emitted after the dialog opens and all animations are complete.\n- **syn-hide** - Emitted when the dialog closes.\n- **syn-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **syn-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **syn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -96,8 +96,8 @@
     "vendorism": "^3.0.0",
     "vue-tsc": "^2.0.14",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "2.2.0"
+    "@synergy-design-system/tokens": "2.3.0",
+    "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "release": {
     "branches": [
@@ -165,7 +165,7 @@
     "lit": "^3.1.3"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.2.0"
+    "@synergy-design-system/tokens": "^2.3.0"
   },
   "scripts": {
     "build": "node scripts/build.js",

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/header/header.ts"],
-  "sourcesContent": ["/* eslint-disable */\nimport SynHeader from './header.component.js';\n\nexport * from './header.component.js';\nexport default SynHeader;\n\nSynHeader.define('syn-header');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-header': SynHeader;\n  }\n}\n"],
-  "mappings": ";;;;;AAIA,IAAO,iBAAQ;AAEf,UAAU,OAAO,YAAY;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/styles/component.styles.ts", "../../src/internal/synergy-element.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n`;\n", "/**\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 { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? never\n      : // ...and has at least one non-optional property\n        Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? never\n        : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? T\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? T\n        : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n        ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n        : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent<unknown>\n  : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n    name: EventTypeDoesNotRequireDetail<T>,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof EventTypesWithRequiredDetail>(\n    name: EventTypeRequiresDetail<T>,\n    options: SynEventInit<T>\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof ValidEventTypeMap>(\n    name: T,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T> {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType<T>;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = \"2.2.1\";\n  \n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof SynergyElement;\n\n    if (!currentlyRegisteredConstructor) {\n      customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record<string, typeof SynergyElement> = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof SynergyElement).define(name, component);\n    });\n  }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n"],
-  "mappings": ";;;;;;AAQA,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFf,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AA+DzB,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAcrD,KACE,MACA,SACuB;AACvB,UAAM,QAAQ,IAAI,YAAY,MAAM;AAAA,MAClC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ,CAAC;AAAA,OACN,QACJ;AAED,SAAK,cAAc,KAAK;AAExB,WAAO;AAAA,EACT;AAAA,EAOA,OAAO,OAAO,MAAc,qBAAqB,MAAM,UAAoC,CAAC,GAAG;AAC7F,UAAM,iCAAiC,eAAe,IAAI,IAAI;AAI9D,QAAI,CAAC,gCAAgC;AACnC,qBAAe,OAAO,MAAM,cAAc,mBAAmB;AAAA,MAAC,GAA0C,OAAO;AAC/G;AAAA,IACF;AAEA,QAAI,aAAa;AACjB,QAAI,kBAAkB;AAEtB,QAAI,aAAa,sBAAsB,mBAAmB,SAAS;AACjE,mBAAa,OAAO,mBAAmB;AAAA,IACzC;AAEA,QAAI,aAAa,kCAAkC,+BAA+B,SAAS;AACzF,wBAAkB,OAAO,+BAA+B;AAAA,IAC1D;AAGA,QAAI,cAAc,mBAAmB,eAAe,iBAAiB;AAEnE;AAAA,IACF;AAEA,YAAQ;AAAA,MACN,0BAA0B,IAAI,IAAI,UAAU,UAAU,IAAI,IAAI,eAAe;AAAA,IAC/E;AAAA,EACF;AAAA,EAIA,cAAc;AACZ,UAAM;AACN,WAAO,QAAS,KAAK,YAAsC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACtG,MAAC,KAAK,YAAsC,OAAO,MAAM,SAAS;AAAA,IACpE,CAAC;AAAA,EACH;AACF;AAAA;AAAA;AA5EqB,eAiCZ,UAAU;AAjCE,eAoEZ,eAAsD,CAAC;AAlElD;AAAA,EAAX,SAAS;AAAA,GAFS,eAEP;AACA;AAAA,EAAX,SAAS;AAAA,GAHS,eAGP;",
-  "names": []
-}