@synergy-design-system/components 1.18.0 → 1.20.0

package/dist/synergy.js

@@ -1,6 +1,6 @@
 import {
   textarea_default
-} from "./chunks/chunk.53VFVSIM.js";
+} from "./chunks/chunk.F4A2CST4.js";
 import {
   getFormControls,
   serialize
@@ -8,189 +8,202 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   switch_default
-} from "./chunks/chunk.B4VL2R3N.js";
+} from "./chunks/chunk.IFBYW5FA.js";
 import {
   tag_default
-} from "./chunks/chunk.CFFJSWFS.js";
-import "./chunks/chunk.FRDS4YDO.js";
+} from "./chunks/chunk.AOQTVAEY.js";
+import "./chunks/chunk.54HPCZLM.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.2EI3TNL7.js";
 import {
   side_nav_default
-} from "./chunks/chunk.XHHUDQGP.js";
-import "./chunks/chunk.ZSZ3RXHE.js";
+} from "./chunks/chunk.RWIYH2J5.js";
+import "./chunks/chunk.TGGCQSF3.js";
 import "./chunks/chunk.GO3CCKC3.js";
-import "./chunks/chunk.FJGYUKQB.js";
+import "./chunks/chunk.GE3ZKSIL.js";
 import "./chunks/chunk.W5JK7V7K.js";
 import "./chunks/chunk.TAO5QIIQ.js";
 import {
   radio_group_default
-} from "./chunks/chunk.ZP62IDKA.js";
-import "./chunks/chunk.POVJ44KS.js";
+} from "./chunks/chunk.LJJHFA3A.js";
+import "./chunks/chunk.DHBMSKDO.js";
 import "./chunks/chunk.F4MRQLNL.js";
 import "./chunks/chunk.XIUSSERX.js";
 import {
   select_default
-} from "./chunks/chunk.QO53BVNG.js";
-import "./chunks/chunk.VC3APXJ3.js";
-import "./chunks/chunk.HWDX5ZOJ.js";
+} from "./chunks/chunk.SOA43S6O.js";
+import "./chunks/chunk.TVUPDAKK.js";
+import "./chunks/chunk.UEVDP3J5.js";
 import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.BGHK4NQA.js";
 import "./chunks/chunk.OWMT6OL2.js";
 import "./chunks/chunk.QNQNR3RY.js";
 import {
   progress_ring_default
-} from "./chunks/chunk.RH56E6RP.js";
+} from "./chunks/chunk.3Z63ZDCN.js";
 import {
   radio_default
-} from "./chunks/chunk.XDKUBSEZ.js";
-import "./chunks/chunk.NVEZ4QNM.js";
+} from "./chunks/chunk.LDN3IDWU.js";
+import "./chunks/chunk.AUURIE7A.js";
 import "./chunks/chunk.V6VND4OF.js";
 import "./chunks/chunk.PKO6FEOM.js";
 import {
   radio_button_default
-} from "./chunks/chunk.G34JOXVF.js";
-import "./chunks/chunk.EWF2AO27.js";
+} from "./chunks/chunk.CKQLSMDO.js";
+import "./chunks/chunk.EPZGNWBV.js";
 import "./chunks/chunk.QPK7SLOE.js";
+import {
+  progress_bar_default
+} from "./chunks/chunk.XOYMSEKT.js";
+import "./chunks/chunk.RRCGUD4A.js";
+import "./chunks/chunk.AMAK44YX.js";
+import "./chunks/chunk.XBUAZUNQ.js";
+import "./chunks/chunk.WQNQONGU.js";
+import "./chunks/chunk.2V3HGTTL.js";
+import "./chunks/chunk.45VEGVRJ.js";
+import {
+  option_default
+} from "./chunks/chunk.A6AAFCG3.js";
 import {
   popup_default
-} from "./chunks/chunk.TWTFELWJ.js";
+} from "./chunks/chunk.HXG34EFO.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.VFL2ABHB.js";
-import "./chunks/chunk.IZUY7TUK.js";
-import "./chunks/chunk.74N5WLM5.js";
+} from "./chunks/chunk.EZDC4UMG.js";
+import "./chunks/chunk.47JB5OS5.js";
 import "./chunks/chunk.XNP4OTUB.js";
-import "./chunks/chunk.YOBIFHIM.js";
-import "./chunks/chunk.2V3HGTTL.js";
-import "./chunks/chunk.45VEGVRJ.js";
+import "./chunks/chunk.74N5WLM5.js";
 import {
-  optgroup_default
-} from "./chunks/chunk.3NKRV5WI.js";
+  nav_item_default
+} from "./chunks/chunk.AQKOFOYX.js";
+import "./chunks/chunk.524IJCDT.js";
+import "./chunks/chunk.L4UUXVRZ.js";
 import {
-  option_default
-} from "./chunks/chunk.VJWNNZNH.js";
-import "./chunks/chunk.AMHVRA6L.js";
-import "./chunks/chunk.3B24TYVN.js";
+  optgroup_default
+} from "./chunks/chunk.RA4T4PSL.js";
+import "./chunks/chunk.FTG2II25.js";
+import "./chunks/chunk.KG52EHDB.js";
+import "./chunks/chunk.NSW46LNB.js";
 import "./chunks/chunk.CFIQXXMW.js";
+import "./chunks/chunk.3B24TYVN.js";
+import {
+  menu_item_default
+} from "./chunks/chunk.VWZE6BIA.js";
 import {
   menu_label_default
-} from "./chunks/chunk.AYPU2CVS.js";
-import "./chunks/chunk.ORRBYZK7.js";
+} from "./chunks/chunk.PIGPCN4I.js";
+import "./chunks/chunk.L3ANONV5.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.3FOVDOJX.js";
 import {
-  nav_item_default
-} from "./chunks/chunk.MR7U25T2.js";
-import "./chunks/chunk.DP66NN4T.js";
-import "./chunks/chunk.L4UUXVRZ.js";
-import "./chunks/chunk.KTX5YB4Z.js";
-import "./chunks/chunk.KG52EHDB.js";
+  input_default
+} from "./chunks/chunk.TLBRAHTC.js";
 import {
   menu_default
-} from "./chunks/chunk.XOEDYQWT.js";
-import {
-  menu_item_default
-} from "./chunks/chunk.JGXFT7JF.js";
-import "./chunks/chunk.XALEH2Z2.js";
+} from "./chunks/chunk.O63F2VQH.js";
+import "./chunks/chunk.YVG2RYSG.js";
+import "./chunks/chunk.PILX7LVU.js";
+import "./chunks/chunk.RSSY7KPD.js";
+import "./chunks/chunk.LT2IOL3W.js";
 import "./chunks/chunk.OOABXWCW.js";
 import "./chunks/chunk.PDHVYHXD.js";
 import "./chunks/chunk.JDBDBGQP.js";
 import {
   icon_button_default
-} from "./chunks/chunk.ALJZ43KV.js";
-import {
-  input_default
-} from "./chunks/chunk.LLS2ZY55.js";
-import "./chunks/chunk.HSRG6R67.js";
+} from "./chunks/chunk.3NEF2ECB.js";
+import "./chunks/chunk.YLVTDJCD.js";
 import "./chunks/chunk.3A65FBTX.js";
 import "./chunks/chunk.AW2HNLNP.js";
-import "./chunks/chunk.I5UERUDK.js";
-import "./chunks/chunk.PILX7LVU.js";
-import "./chunks/chunk.RSSY7KPD.js";
-import {
-  drawer_default
-} from "./chunks/chunk.3WXUF3OF.js";
 import {
   dropdown_default
-} from "./chunks/chunk.6CUDSTFZ.js";
-import "./chunks/chunk.4LFIZT4V.js";
-import "./chunks/chunk.OPIYLV55.js";
-import "./chunks/chunk.MIMALEWP.js";
-import "./chunks/chunk.2KYFCKCK.js";
-import "./chunks/chunk.SLCYXMHB.js";
+} from "./chunks/chunk.JHY3MH4D.js";
 import {
   header_default
-} from "./chunks/chunk.K5FUJGJ7.js";
-import "./chunks/chunk.QV2W7HAY.js";
-import {
-  icon_default
-} from "./chunks/chunk.MU2UKMFS.js";
+} from "./chunks/chunk.HAOJSHHP.js";
+import "./chunks/chunk.ZGVJ3KBH.js";
 import "./chunks/chunk.AOKNP4QD.js";
 import {
-  checkbox_default
-} from "./chunks/chunk.WV7JKJPD.js";
+  icon_default
+} from "./chunks/chunk.2HMAZW6A.js";
 import {
   divider_default
-} from "./chunks/chunk.5G2YSQBG.js";
-import "./chunks/chunk.XH3MA254.js";
-import "./chunks/chunk.FA6V2WD6.js";
-import "./chunks/chunk.ACTJFDNK.js";
-import "./chunks/chunk.YJAGURE4.js";
+} from "./chunks/chunk.5NSIAXSA.js";
+import {
+  drawer_default
+} from "./chunks/chunk.RKLLBPDJ.js";
+import "./chunks/chunk.IGFBLFXD.js";
 import "./chunks/chunk.RIJKFEYZ.js";
-import "./chunks/chunk.3MHH6ND2.js";
-import "./chunks/chunk.ZHH2AHOZ.js";
-import "./chunks/chunk.LJQ7LEPV.js";
-import "./chunks/chunk.2QOQY4ZG.js";
-import "./chunks/chunk.7BEVGRQ2.js";
-import "./chunks/chunk.QAUTITK3.js";
 import "./chunks/chunk.KZMWNTUS.js";
 import "./chunks/chunk.PHSJD47V.js";
+import "./chunks/chunk.YXI6WDAW.js";
+import "./chunks/chunk.FTBYTDD5.js";
+import "./chunks/chunk.MIMALEWP.js";
+import "./chunks/chunk.2QOQY4ZG.js";
+import "./chunks/chunk.2KYFCKCK.js";
+import "./chunks/chunk.SLCYXMHB.js";
 import {
   button_group_default
-} from "./chunks/chunk.MKYRLUII.js";
+} from "./chunks/chunk.VMECHIZN.js";
 import {
-  button_default
-} from "./chunks/chunk.GBXK6QMT.js";
-import "./chunks/chunk.QTL6QHN6.js";
-import "./chunks/chunk.R7ZKZ6JE.js";
-import "./chunks/chunk.OSBC36KQ.js";
-import "./chunks/chunk.K55MKNUR.js";
-import "./chunks/chunk.Q4CRAGN3.js";
-import "./chunks/chunk.ENPKDAIZ.js";
+  checkbox_default
+} from "./chunks/chunk.L55DODNB.js";
+import "./chunks/chunk.CWHSZ4BH.js";
 import "./chunks/chunk.WFAJR3FN.js";
 import "./chunks/chunk.TTL762VF.js";
+import "./chunks/chunk.2XZKXVMR.js";
+import "./chunks/chunk.NIYKFSPR.js";
+import "./chunks/chunk.35WADEQD.js";
+import "./chunks/chunk.FA6V2WD6.js";
+import "./chunks/chunk.ACTJFDNK.js";
+import {
+  button_default
+} from "./chunks/chunk.FQFZOZEN.js";
+import {
+  badge_default
+} from "./chunks/chunk.SW3IVEWX.js";
+import "./chunks/chunk.AWAHSLMZ.js";
+import "./chunks/chunk.WQJRBFZA.js";
+import "./chunks/chunk.II4PANKR.js";
+import "./chunks/chunk.EUKFLHGG.js";
+import "./chunks/chunk.A7IIJ2LL.js";
+import {
+  alert_default
+} from "./chunks/chunk.GM27OBUM.js";
+import "./chunks/chunk.UINFNZLR.js";
+import "./chunks/chunk.HL7SBENS.js";
+import "./chunks/chunk.ZHH2AHOZ.js";
+import "./chunks/chunk.LJQ7LEPV.js";
+import "./chunks/chunk.7BEVGRQ2.js";
+import "./chunks/chunk.QAUTITK3.js";
+import "./chunks/chunk.JRYXECAY.js";
+import "./chunks/chunk.PS4UJFYT.js";
+import "./chunks/chunk.DKUZB46V.js";
+import "./chunks/chunk.I4HVPXQK.js";
+import "./chunks/chunk.OSBC36KQ.js";
 import "./chunks/chunk.JUJZBRXD.js";
+import "./chunks/chunk.Q4CRAGN3.js";
 import "./chunks/chunk.66WXVGAW.js";
-import "./chunks/chunk.O54BQSFI.js";
-import "./chunks/chunk.PJO6TM3T.js";
-import "./chunks/chunk.2RF7KO5I.js";
+import "./chunks/chunk.CSXBPQFP.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
 } from "./chunks/chunk.66MOXMDP.js";
 import "./chunks/chunk.6C4JXZZN.js";
 import "./chunks/chunk.VTKIDI7N.js";
+import "./chunks/chunk.PJO6TM3T.js";
+import "./chunks/chunk.2RF7KO5I.js";
 import "./chunks/chunk.AVTU2BGE.js";
-import "./chunks/chunk.2XZKXVMR.js";
-import "./chunks/chunk.NIYKFSPR.js";
+import "./chunks/chunk.GEHO4WRP.js";
+import "./chunks/chunk.QY3GFWGZ.js";
+import "./chunks/chunk.32GEMZZV.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.C7624ITA.js";
-import {
-  badge_default
-} from "./chunks/chunk.T4CNSRSR.js";
-import "./chunks/chunk.ITVKE7NY.js";
-import "./chunks/chunk.GEHO4WRP.js";
-import "./chunks/chunk.QY3GFWGZ.js";
-import "./chunks/chunk.WQJRBFZA.js";
-import "./chunks/chunk.II4PANKR.js";
-import "./chunks/chunk.S7GUBN44.js";
-import "./chunks/chunk.3XSHKQTX.js";
-import "./chunks/chunk.A7IIJ2LL.js";
+import "./chunks/chunk.K55MKNUR.js";
 import "./chunks/chunk.QNDC5KWA.js";
 export {
+  alert_default as SynAlert,
   badge_default as SynBadge,
   button_default as SynButton,
   button_group_default as SynButtonGroup,
@@ -210,6 +223,7 @@ export {
   option_default as SynOption,
   popup_default as SynPopup,
   prio_nav_default as SynPrioNav,
+  progress_bar_default as SynProgressBar,
   progress_ring_default as SynProgressRing,
   radio_default as SynRadio,
   radio_button_default as SynRadioButton,

package/dist/themes/utility.css

@@ -31,7 +31,7 @@
 }
 
 .syn-toast-stack syn-alert {
-  margin: var(--syn-spacing-medium);
+  margin: var(--syn-spacing-small);
 }
 
 .syn-toast-stack syn-alert::part(base) {

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

@@ -2,6 +2,44 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "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 alert's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "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.style/components/alert"
+        }
+      ]
+    },
     {
       "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.",
@@ -1002,6 +1040,33 @@
         }
       ]
     },
+    {
+      "name": "syn-progress-bar",
+      "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n- **--speed** - The speed of the progress bar when in indeterminate state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The current progress as a percentage, 0 to 100.",
+          "values": []
+        },
+        {
+          "name": "indeterminate",
+          "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "A custom label for assistive devices.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/progress-bar"
+        }
+      ]
+    },
     {
       "name": "syn-progress-ring",
       "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -90,8 +90,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": "1.13.0"
+    "@synergy-design-system/tokens": "1.14.0",
+    "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "release": {
     "branches": [