@synergy-design-system/components 2.45.2 → 2.46.1

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 2.45.2
+ * @synergy-design-system/components version 2.46.1
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!

package/dist/synergy.js

@@ -6,220 +6,220 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   tooltip_default
-} from "./chunks/chunk.SMY2U453.js";
+} from "./chunks/chunk.VCECBW7W.js";
 import {
   validate_default
-} from "./chunks/chunk.Q2FNI7VB.js";
-import "./chunks/chunk.NQRQ7TD6.js";
-import "./chunks/chunk.SUADB3XZ.js";
+} from "./chunks/chunk.JJQF7MYQ.js";
+import "./chunks/chunk.LVB5FYMI.js";
+import "./chunks/chunk.MQU6DT6G.js";
 import "./chunks/chunk.MVM3NN6Y.js";
 import {
   tag_default
-} from "./chunks/chunk.CDJYUWQJ.js";
+} from "./chunks/chunk.BNELSXQA.js";
 import {
   textarea_default
-} from "./chunks/chunk.33HW5JD7.js";
-import "./chunks/chunk.2UXCJDAJ.js";
+} from "./chunks/chunk.BHYZ6XJB.js";
+import "./chunks/chunk.AO4ITMFF.js";
 import "./chunks/chunk.SHIPVO7H.js";
 import "./chunks/chunk.FQWBH6B3.js";
 import {
   tab_group_default
-} from "./chunks/chunk.F2XOWYTI.js";
-import "./chunks/chunk.YN7K46LX.js";
+} from "./chunks/chunk.MEMTZELM.js";
+import "./chunks/chunk.WGPVCCIG.js";
 import "./chunks/chunk.XOXVVU5C.js";
 import "./chunks/chunk.PKYC7QF3.js";
 import {
   tab_panel_default
-} from "./chunks/chunk.IOMDBIJI.js";
-import "./chunks/chunk.2RWNCMZU.js";
+} from "./chunks/chunk.DKQD7OO7.js";
+import "./chunks/chunk.UUM2ETQI.js";
 import "./chunks/chunk.XHWYGYMQ.js";
 import "./chunks/chunk.HVXG4JG6.js";
 import {
   switch_default
-} from "./chunks/chunk.IX463R5Y.js";
-import "./chunks/chunk.4XY2BVNK.js";
+} from "./chunks/chunk.AVWE6BNC.js";
+import "./chunks/chunk.YRIMDR5B.js";
 import "./chunks/chunk.3QYBPNXR.js";
 import "./chunks/chunk.4TB35TYG.js";
 import {
   tab_default
-} from "./chunks/chunk.OW5F6IPP.js";
-import "./chunks/chunk.7J4L52X7.js";
+} from "./chunks/chunk.4WMXKU2F.js";
+import "./chunks/chunk.RF3HVQNQ.js";
 import "./chunks/chunk.JMMSJRM5.js";
 import "./chunks/chunk.43YNZAWL.js";
 import {
   side_nav_default
-} from "./chunks/chunk.SNFVW3JM.js";
-import "./chunks/chunk.HVSXOYWW.js";
+} from "./chunks/chunk.NU35DBAX.js";
+import "./chunks/chunk.D5MPWWM5.js";
 import "./chunks/chunk.FWLUR33I.js";
 import {
   spinner_default
-} from "./chunks/chunk.BRHITFVR.js";
+} from "./chunks/chunk.PHHBGTMW.js";
 import {
   range_tick_default
-} from "./chunks/chunk.4QDZGB6K.js";
-import "./chunks/chunk.PRZNYBMZ.js";
+} from "./chunks/chunk.VRDZQTJK.js";
+import "./chunks/chunk.NO5OLFH5.js";
 import "./chunks/chunk.OI3HOOCT.js";
 import {
   select_default
-} from "./chunks/chunk.YFEK7I4W.js";
-import "./chunks/chunk.EBMWYPMN.js";
-import "./chunks/chunk.URNJAXTL.js";
-import "./chunks/chunk.VN2PSQ4U.js";
+} from "./chunks/chunk.CIPXOQBQ.js";
+import "./chunks/chunk.R4L6L3AR.js";
+import "./chunks/chunk.3YOITYNE.js";
+import "./chunks/chunk.2NIFD3YE.js";
 import "./chunks/chunk.6EPU7YUS.js";
 import "./chunks/chunk.VECCQZP5.js";
 import "./chunks/chunk.O4QFINH7.js";
 import "./chunks/chunk.XTWO6ZZW.js";
 import {
   radio_group_default
-} from "./chunks/chunk.KNUR2AQS.js";
+} from "./chunks/chunk.6SM6P3CN.js";
 import {
   range_default
-} from "./chunks/chunk.G325VK6R.js";
-import "./chunks/chunk.NZ7ZWYRP.js";
-import "./chunks/chunk.7MRTIUE2.js";
+} from "./chunks/chunk.NYUOB6YA.js";
+import "./chunks/chunk.GA34D6ZU.js";
+import "./chunks/chunk.KYCEK2QU.js";
 import "./chunks/chunk.E7LBPRDC.js";
 import "./chunks/chunk.O644HRW3.js";
 import "./chunks/chunk.UFNQFJO6.js";
 import "./chunks/chunk.236RSW67.js";
-import "./chunks/chunk.D2NG6SZW.js";
+import "./chunks/chunk.MZXU665M.js";
 import "./chunks/chunk.I6YARDHH.js";
 import {
   radio_default
-} from "./chunks/chunk.N36WAFT5.js";
-import "./chunks/chunk.HB5VOG7O.js";
+} from "./chunks/chunk.ZNAP7EJI.js";
+import "./chunks/chunk.EHTBVINZ.js";
 import "./chunks/chunk.GKA5WPFF.js";
 import "./chunks/chunk.EHSNF4SS.js";
 import {
   radio_button_default
-} from "./chunks/chunk.2U2KM62A.js";
-import "./chunks/chunk.DLGN2SKF.js";
+} from "./chunks/chunk.ZISACVPU.js";
+import "./chunks/chunk.K2MGM2DJ.js";
 import "./chunks/chunk.4BRJ5OJE.js";
-import "./chunks/chunk.UW4JDWEI.js";
+import "./chunks/chunk.4IN3Y67T.js";
 import "./chunks/chunk.32LFHSM5.js";
 import "./chunks/chunk.K62NPKGN.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.LW3LVZ3I.js";
-import "./chunks/chunk.RCOGQGLL.js";
+} from "./chunks/chunk.DBFFCFG2.js";
+import "./chunks/chunk.345CZB7H.js";
 import "./chunks/chunk.AX3K3YYK.js";
 import "./chunks/chunk.QUM76UHV.js";
 import {
   progress_ring_default
-} from "./chunks/chunk.Z5A6S7OG.js";
-import "./chunks/chunk.AWMAUFQ2.js";
+} from "./chunks/chunk.4J72AR65.js";
+import "./chunks/chunk.QJE4SQ57.js";
 import "./chunks/chunk.2V3HGTTL.js";
 import "./chunks/chunk.RMIDAEF5.js";
 import {
   popup_default
-} from "./chunks/chunk.2EJUIR46.js";
+} from "./chunks/chunk.U2BHJYZE.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.UG4TPQMJ.js";
-import "./chunks/chunk.GYMNIDUG.js";
+} from "./chunks/chunk.JVJDLYZA.js";
+import "./chunks/chunk.IY5N6C2K.js";
 import "./chunks/chunk.74N5WLM5.js";
 import "./chunks/chunk.OJ3N7TWP.js";
 import {
   optgroup_default
-} from "./chunks/chunk.3H57PIKI.js";
+} from "./chunks/chunk.6LSFTILG.js";
 import {
   option_default
-} from "./chunks/chunk.IISFS2XQ.js";
+} from "./chunks/chunk.SWN4WCBH.js";
 import {
   menu_label_default
-} from "./chunks/chunk.MOG6Z5CP.js";
-import "./chunks/chunk.AJIOVSMV.js";
+} from "./chunks/chunk.7CR6DR5D.js";
+import "./chunks/chunk.OODLPHWZ.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.RAOPZXJL.js";
 import {
   nav_item_default
-} from "./chunks/chunk.HI6E6INJ.js";
-import "./chunks/chunk.TPRLH2LQ.js";
+} from "./chunks/chunk.7KY7Y3FT.js";
+import "./chunks/chunk.LVRQHR7S.js";
 import "./chunks/chunk.5V47GZA4.js";
-import "./chunks/chunk.WMRE3ZWT.js";
+import "./chunks/chunk.PL2GGNLW.js";
 import "./chunks/chunk.MJ7R4QQT.js";
 import {
   menu_default
-} from "./chunks/chunk.ZVBLLRCO.js";
+} from "./chunks/chunk.AIROPXN6.js";
 import {
   menu_item_default
-} from "./chunks/chunk.7QHWUHRC.js";
-import "./chunks/chunk.MWT5A6UR.js";
+} from "./chunks/chunk.ZSF63D7A.js";
+import "./chunks/chunk.ULYN5J47.js";
 import "./chunks/chunk.JQ5WZR46.js";
 import "./chunks/chunk.FSWTBNSI.js";
 import "./chunks/chunk.V4HPWQE7.js";
 import {
   icon_button_default
-} from "./chunks/chunk.LTBKA57Y.js";
+} from "./chunks/chunk.A2PGIGHY.js";
 import {
   input_default
-} from "./chunks/chunk.C54XEFIT.js";
-import "./chunks/chunk.DR2XVWMI.js";
+} from "./chunks/chunk.EUGMWEVZ.js";
+import "./chunks/chunk.3QCBNWCH.js";
 import "./chunks/chunk.NFXT5LNY.js";
 import "./chunks/chunk.K2O55TNU.js";
 import "./chunks/chunk.XAQKFEHH.js";
-import "./chunks/chunk.DEN4XP76.js";
+import "./chunks/chunk.EVYBO35K.js";
 import "./chunks/chunk.AVZITCPQ.js";
 import "./chunks/chunk.C2CWYCOU.js";
 import {
   file_default
-} from "./chunks/chunk.HPO5QTRK.js";
+} from "./chunks/chunk.DBXTU3V3.js";
 import {
   header_default
-} from "./chunks/chunk.ASPF2OAT.js";
-import "./chunks/chunk.K6NJ2PDK.js";
+} from "./chunks/chunk.DT6FEM7S.js";
+import "./chunks/chunk.S5GVWNKP.js";
 import "./chunks/chunk.5T3OGIGW.js";
 import {
   icon_default
-} from "./chunks/chunk.W6FHD2B6.js";
+} from "./chunks/chunk.6A7RMKGL.js";
 import {
   drawer_default
-} from "./chunks/chunk.MIJZV3OK.js";
+} from "./chunks/chunk.XELFSLIH.js";
 import {
   dropdown_default
-} from "./chunks/chunk.TERMIGDH.js";
-import "./chunks/chunk.3LVJS4GV.js";
+} from "./chunks/chunk.CGXNOKIN.js";
+import "./chunks/chunk.Q4IB5RDS.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.D6IIQDWJ.js";
-import "./chunks/chunk.E6HJE4GR.js";
+import "./chunks/chunk.G53PEWUZ.js";
 import "./chunks/chunk.CW2Q7KG6.js";
 import {
   dialog_default
-} from "./chunks/chunk.DGI6ZRTS.js";
+} from "./chunks/chunk.DP7QAI72.js";
 import {
   divider_default
-} from "./chunks/chunk.KVUTPLNY.js";
-import "./chunks/chunk.GWDNPLW3.js";
-import "./chunks/chunk.FA6V2WD6.js";
+} from "./chunks/chunk.2AKDDOVJ.js";
+import "./chunks/chunk.D6HJPICP.js";
+import "./chunks/chunk.57RV2JXO.js";
 import "./chunks/chunk.FSZIE7IO.js";
-import "./chunks/chunk.VDRHRLQQ.js";
+import "./chunks/chunk.2LPFZRFQ.js";
 import "./chunks/chunk.N7QJ54ZM.js";
 import "./chunks/chunk.I4FIU7FA.js";
 import {
   details_default
-} from "./chunks/chunk.ES3ECZZN.js";
-import "./chunks/chunk.5YXHVJLW.js";
-import "./chunks/chunk.KX43XLOR.js";
+} from "./chunks/chunk.7X3GNLON.js";
+import "./chunks/chunk.MTY2JTS2.js";
+import "./chunks/chunk.DFK2PRNS.js";
 import "./chunks/chunk.VA26EAEP.js";
-import "./chunks/chunk.2AN6WN6D.js";
+import "./chunks/chunk.5X62A5OZ.js";
 import "./chunks/chunk.MU43DZ7W.js";
 import "./chunks/chunk.AYAX7BG7.js";
 import "./chunks/chunk.G76BKD7B.js";
 import "./chunks/chunk.IU3SSJZE.js";
 import {
   checkbox_default
-} from "./chunks/chunk.DAQXMWRG.js";
-import "./chunks/chunk.MGD7HFL3.js";
+} from "./chunks/chunk.MPS5OPEZ.js";
+import "./chunks/chunk.B3KIWQTN.js";
 import "./chunks/chunk.Y3LNC7J6.js";
 import "./chunks/chunk.6OX2AX3Z.js";
 import {
   combobox_default
-} from "./chunks/chunk.IEUQSDIW.js";
-import "./chunks/chunk.EBCCBTTK.js";
-import "./chunks/chunk.7VCXMB4O.js";
+} from "./chunks/chunk.FF5A5C2D.js";
+import "./chunks/chunk.VN4RKJFZ.js";
+import "./chunks/chunk.WTN5SLDS.js";
 import "./chunks/chunk.G3KRSXVI.js";
 import "./chunks/chunk.IVM3BGRH.js";
 import "./chunks/chunk.ARR23WUY.js";
-import "./chunks/chunk.RJYU4MHA.js";
+import "./chunks/chunk.PPN5DV7M.js";
 import "./chunks/chunk.36EHOOOO.js";
 import "./chunks/chunk.AZ3N5IOO.js";
 import {
@@ -235,71 +235,69 @@ import "./chunks/chunk.QC7X32ZP.js";
 import "./chunks/chunk.TRGOAYBG.js";
 import {
   button_default
-} from "./chunks/chunk.3LSWYRUI.js";
+} from "./chunks/chunk.HZA7BFQB.js";
 import {
   button_group_default
-} from "./chunks/chunk.4NZFJ6JA.js";
-import "./chunks/chunk.GLW6G7B4.js";
+} from "./chunks/chunk.4W7TNUEY.js";
+import "./chunks/chunk.FOZENWRI.js";
 import "./chunks/chunk.GRVNUIP2.js";
 import {
   card_default
-} from "./chunks/chunk.CF2AJWUC.js";
-import "./chunks/chunk.QZ7IKRAL.js";
+} from "./chunks/chunk.QWAQJ2D5.js";
+import "./chunks/chunk.Z6VUTWKV.js";
 import "./chunks/chunk.QMLSKYXR.js";
 import "./chunks/chunk.C4JTZKPZ.js";
 import {
   breadcrumb_default
-} from "./chunks/chunk.LQWXDISM.js";
+} from "./chunks/chunk.VTU3QNYB.js";
 import {
   breadcrumb_item_default
-} from "./chunks/chunk.R7NKVOAJ.js";
-import "./chunks/chunk.3YODD7Z3.js";
+} from "./chunks/chunk.VKFTPKZE.js";
+import "./chunks/chunk.2WFCE5MY.js";
 import "./chunks/chunk.NGIGPLN2.js";
 import "./chunks/chunk.O6ZH6AOI.js";
-import "./chunks/chunk.5R4H4RCZ.js";
-import "./chunks/chunk.PCMT3MUM.js";
+import "./chunks/chunk.3YTSGIKK.js";
+import "./chunks/chunk.ZMJAULGK.js";
 import "./chunks/chunk.4WQZFNSE.js";
 import "./chunks/chunk.JLXCLATV.js";
 import "./chunks/chunk.HP2LEQRU.js";
 import "./chunks/chunk.VWY2RG4F.js";
 import "./chunks/chunk.5SQ7NVBX.js";
 import {
-  alert_default
-} from "./chunks/chunk.5LGG5AH4.js";
+  accordion_default
+} from "./chunks/chunk.BMWZXSYV.js";
 import {
   badge_default
-} from "./chunks/chunk.2M3G5L4T.js";
-import "./chunks/chunk.DORATI2I.js";
+} from "./chunks/chunk.JG3SWIYR.js";
+import "./chunks/chunk.AUQS5XUZ.js";
 import "./chunks/chunk.J6CGTLVH.js";
 import "./chunks/chunk.Y5TMYX2L.js";
-import "./chunks/chunk.OORIUDCN.js";
+import "./chunks/chunk.2EO7CMQE.js";
 import "./chunks/chunk.32CYREEV.js";
 import "./chunks/chunk.S22BO5SF.js";
 import {
-  accordion_default
-} from "./chunks/chunk.GSC3S4C7.js";
-import "./chunks/chunk.ENKVXWBD.js";
-import "./chunks/chunk.WNUZ6LH4.js";
-import "./chunks/chunk.KR75XE3N.js";
+  alert_default
+} from "./chunks/chunk.ZZ4UBMKG.js";
+import "./chunks/chunk.SVBYNXI7.js";
 import "./chunks/chunk.WXVOTRW5.js";
-import "./chunks/chunk.AHFMEUB7.js";
+import "./chunks/chunk.K3PVNJ5B.js";
 import "./chunks/chunk.YST4XUIG.js";
 import "./chunks/chunk.DZ7YIR5N.js";
 import "./chunks/chunk.C2ENQBPM.js";
 import "./chunks/chunk.G6ITZTTW.js";
 import "./chunks/chunk.7JGKUB4A.js";
 import "./chunks/chunk.WVVQK5TE.js";
-import "./chunks/chunk.AVJBYGN3.js";
+import "./chunks/chunk.HLO3D2W6.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.DVUFNZNA.js";
+} from "./chunks/chunk.KFKQ3W6V.js";
 import "./chunks/chunk.YTEJW7IF.js";
 import {
   setSystemIconLibrary
-} from "./chunks/chunk.NMQAMCTH.js";
-import "./chunks/chunk.UBCXGNY7.js";
-import "./chunks/chunk.UUKF7HEE.js";
+} from "./chunks/chunk.TQLPO53Q.js";
+import "./chunks/chunk.LOOQDMQL.js";
+import "./chunks/chunk.HSKSME2B.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import "./chunks/chunk.ZBW4ZSZ7.js";
 import "./chunks/chunk.OAQRCZOO.js";
@@ -308,6 +306,9 @@ import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.234ERFCE.js";
+import "./chunks/chunk.QBHZAR4C.js";
+import "./chunks/chunk.BXY667C7.js";
+import "./chunks/chunk.MCSHQZTN.js";
 import {
   enableDefaultSettings
 } from "./chunks/chunk.E5UUNP6E.js";
@@ -321,9 +322,8 @@ import "./chunks/chunk.6QJYD7WX.js";
 import "./chunks/chunk.RB2JR2ND.js";
 import "./chunks/chunk.BVZQ6QSY.js";
 import "./chunks/chunk.NLYVOJGK.js";
-import "./chunks/chunk.7PWEDR4V.js";
-import "./chunks/chunk.QBHZAR4C.js";
-import "./chunks/chunk.BXY667C7.js";
+import "./chunks/chunk.2IC6CPWR.js";
+import "./chunks/chunk.WNUZ6LH4.js";
 import "./chunks/chunk.Z4XV3SMG.js";
 export {
   accordion_default as SynAccordion,

package/dist/utilities/icon-library.js

@@ -2,11 +2,11 @@ import "../chunks/chunk.NKIYFJN2.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.DVUFNZNA.js";
+} from "../chunks/chunk.KFKQ3W6V.js";
 import "../chunks/chunk.YTEJW7IF.js";
-import "../chunks/chunk.NMQAMCTH.js";
-import "../chunks/chunk.UBCXGNY7.js";
-import "../chunks/chunk.UUKF7HEE.js";
+import "../chunks/chunk.TQLPO53Q.js";
+import "../chunks/chunk.LOOQDMQL.js";
+import "../chunks/chunk.HSKSME2B.js";
 import "../chunks/chunk.234ERFCE.js";
 import "../chunks/chunk.Z4XV3SMG.js";
 export {

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

@@ -30,22 +30,12 @@
       ]
     },
     {
-      "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.",
+      "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": "open",
-          "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
-          "values": []
-        },
-        {
-          "name": "closable",
-          "description": "Enables a close button that allows the user to dismiss the alert.",
-          "values": []
-        },
         {
           "name": "variant",
-          "description": "The alert's theme variant.",
+          "description": "The badge's theme variant.",
           "values": [
             { "name": "primary" },
             { "name": "success" },
@@ -53,27 +43,32 @@
             { "name": "warning" },
             { "name": "danger" }
           ]
-        },
-        {
-          "name": "duration",
-          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
-          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs"
         }
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
+          "values": []
+        },
+        {
+          "name": "closable",
+          "description": "Enables a close button that allows the user to dismiss the alert.",
+          "values": []
+        },
         {
           "name": "variant",
-          "description": "The badge's theme variant.",
+          "description": "The alert's theme variant.",
           "values": [
             { "name": "primary" },
             { "name": "success" },
@@ -81,12 +76,17 @@
             { "name": "warning" },
             { "name": "danger" }
           ]
+        },
+        {
+          "name": "duration",
+          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
+          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs"
         }
       ]
     },
@@ -465,7 +465,7 @@
     },
     {
       "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.\n- **body** - The container that wraps the details content.",
+      "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 Properties:**\n - **--syn-details-open-rotation** - The rotation angle of the summary icon when the details is open. _(default: undefined)_\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.\n- **body** - The container that wraps the details content.",
       "attributes": [
         {
           "name": "open",
@@ -1234,7 +1234,7 @@
     },
     {
       "name": "syn-option",
-      "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+      "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **sanitizeValueForDelimiter()** - Replaces any occurrences of the delimiter in the option's original value with underscores.\n- **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
       "attributes": [
         {
           "name": "value",
@@ -1678,6 +1678,23 @@
         }
       ]
     },
+    {
+      "name": "syn-resize-observer",
+      "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n---\n\n\n### **Events:**\n - **syn-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the observer.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-resize-observer--docs"
+        }
+      ]
+    },
     {
       "name": "syn-select",
       "description": "Selects 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 select's menu opens.\n- **syn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the select's menu closes.\n- **syn-after-hide** - Emitted after the select'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\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `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-divider>` to group items visually.\n- **label** - The input'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 input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, 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 options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.\n- **popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.",
@@ -1782,23 +1799,6 @@
         }
       ]
     },
-    {
-      "name": "syn-resize-observer",
-      "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n---\n\n\n### **Events:**\n - **syn-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "Disables the observer.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-resize-observer--docs"
-        }
-      ]
-    },
     {
       "name": "syn-side-nav",
       "description": "The <syn-side-nav /> element contains secondary navigation and fits below the header.\nIt can be used to group multiple navigation items (<syn-nav-item />s) together.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the side-nav opens.\n- **syn-after-show** - Emitted after the side-nav opens and all animations are complete.\n- **syn-hide** - Emitted when the side-nav closes.\n- **syn-after-hide** - Emitted after the side-nav closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the side-nav.\n- **hide()** - Hides the side-nav\n\n### **Slots:**\n - _default_ - The main content of the side-nav. Used for <syn-nav-item /> elements.\n- **footer** - The footer content of the side-nav. Used for <syn-nav-item /> elements. Please avoid having to many nav-items as it can massively influence the user experience.\n- **toggle-label** - The label of the toggle nav-item for variant=\"sticky\".\n- **toggle-icon** - An icon to use in lieu of the default icon for the toggle nav-item for variant=\"sticky\".\n\n### **CSS Properties:**\n - **--side-nav-open-width** - The width of the side-nav if in open state _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components base wrapper\n- **drawer** - The drawer that is used under the hood for creating the side-nav\n- **content-container** - The components main content container\n- **content** - The components main content\n- **footer-container** - The components footer content container (where the footer slot content is rendered)\n- **footer-divider** - The components footer divider\n- **footer** - The components footer content\n- **overlay** - The overlay that covers the screen behind the side-nav.\n- **panel** - The side-nav's panel (where the whole content is rendered).\n- **body** - The side-nav's body (where the default slot content is rendered)\n- **drawer__base** - The drawer's base wrapper\n- **toggle-nav-item** - The nav-item to toggle open state for variant=\"sticky\"\n- **toggle-icon** - The icon of the toggle nav-item for variant=\"sticky\"\n- **toggle-label** - The label of the toggle nav-item for variant=\"sticky\".",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.45.2",
+  "version": "2.46.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -104,9 +104,9 @@
     "unist-util-visit": "^5.0.0",
     "user-agent-data-types": "^0.4.2",
     "vendorism": "^5.0.0",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "2.26.1"
+    "@synergy-design-system/stylelint-config-syn": "0.1.0",
+    "@synergy-design-system/tokens": "2.27.0"
   },
   "release": {
     "branches": [
@@ -174,7 +174,7 @@
     "lit": "^3.3.0"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.26.1"
+    "@synergy-design-system/tokens": "^2.27.0"
   },
   "scripts": {
     "figma-export": "pnpm run /^figma-export:.*/",