@synergy-design-system/components 1.19.0 → 1.20.1

package/dist/custom-elements.json

@@ -2,6 +2,263 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "components/alert/alert.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynAlert",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the optional icon.",
+              "name": "icon"
+            },
+            {
+              "description": "The container that wraps the alert's main content.",
+              "name": "message"
+            },
+            {
+              "description": "The close button, an `<syn-icon-button>`.",
+              "name": "close-button"
+            },
+            {
+              "description": "The close button's exported `base` part.",
+              "name": "close-button__base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The alert's main content.",
+              "name": ""
+            },
+            {
+              "description": "An icon to show in the alert. Works best with `<syn-icon>`.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon-button': SynIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "autoHideTimeout",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'icon', 'suffix')"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "base",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables a close button that allows the user to dismiss the alert.",
+              "attribute": "closable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The alert's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "duration",
+              "default": "Infinity",
+              "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.",
+              "attribute": "duration"
+            },
+            {
+              "kind": "method",
+              "name": "restartAutoHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCloseClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseMove",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDurationChange"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the alert."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the alert"
+            },
+            {
+              "kind": "method",
+              "name": "toast",
+              "description": "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."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the alert opens.",
+              "name": "syn-show",
+              "reactName": "onSynShow",
+              "eventName": "SynShowEvent"
+            },
+            {
+              "description": "Emitted after the alert opens and all animations are complete.",
+              "name": "syn-after-show",
+              "reactName": "onSynAfterShow",
+              "eventName": "SynAfterShowEvent"
+            },
+            {
+              "description": "Emitted when the alert closes.",
+              "name": "syn-hide",
+              "reactName": "onSynHide",
+              "eventName": "SynHideEvent"
+            },
+            {
+              "description": "Emitted after the alert closes and all animations are complete.",
+              "name": "syn-after-hide",
+              "reactName": "onSynAfterHide",
+              "eventName": "SynAfterHideEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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.",
+              "fieldName": "open"
+            },
+            {
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables a close button that allows the user to dismiss the alert.",
+              "fieldName": "closable"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The alert's theme variant.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "duration",
+              "default": "Infinity",
+              "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.",
+              "fieldName": "duration"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Alerts are used to display important messages inline or as toast notifications.",
+          "tagNameWithoutPrefix": "alert",
+          "tagName": "syn-alert",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://synergy.style/components/alert\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the alert opens.\n * @event syn-after-show - Emitted after the alert opens and all animations are complete.\n * @event syn-hide - Emitted when the alert closes.\n * @event syn-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */",
+          "documentation": "https://synergy.style/components/alert",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon-button"
+          ],
+          "animations": [
+            {
+              "name": "alert.show",
+              "description": "The animation to use when showing the alert."
+            },
+            {
+              "name": "alert.hide",
+              "description": "The animation to use when hiding the alert."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynAlert",
+            "module": "components/alert/alert.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.js",
@@ -8191,10 +8448,6 @@
             {
               "description": "The width of the side-nav if in open state",
               "name": "--side-nav-open-width"
-            },
-            {
-              "description": "The width of the side-nav if in rail mode without open",
-              "name": "--side-nav-rail-width"
             }
           ],
           "cssParts": [
@@ -8472,7 +8725,7 @@
           "tagNameWithoutPrefix": "side-nav",
           "tagName": "syn-side-nav",
           "customElement": true,
-          "jsDoc": "/**\n * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.\n * It can be used to group multiple navigation items (<syn-nav-item />s) together.\n *\n * @example\n * <syn-side-nav open>\n *  <syn-nav-item >Item 1</syn-nav-item>\n *  <syn-nav-item divider>Item 2</syn-nav-item>\n * </syn-side-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\n *\n * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.\n * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.\n *    Please avoid having to many nav-items as it can massively influence the user experience.\n *\n * @event syn-show - Emitted when the side-nav opens.\n * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.\n * @event syn-hide - Emitted when the side-nav closes.\n * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.\n *\n * @csspart base - The components base wrapper\n * @csspart drawer - The drawer that is used under the hood for creating the side-nav\n * @csspart content-container - The components main content container\n * @csspart content - The components main content\n * @csspart footer-container - The components footer content container\n * @csspart footer-divider - The components footer divider\n * @csspart footer - The components footer content\n * @csspart overlay - The overlay that covers the screen behind the side-nav.\n *\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\n * @cssproperty  --side-nav-rail-width - The width of the side-nav if in rail mode without open\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.\n * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.\n * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.\n * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.\n */",
+          "jsDoc": "/**\n * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.\n * It can be used to group multiple navigation items (<syn-nav-item />s) together.\n *\n * @example\n * <syn-side-nav open>\n *  <syn-nav-item >Item 1</syn-nav-item>\n *  <syn-nav-item divider>Item 2</syn-nav-item>\n * </syn-side-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\n *\n * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.\n * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.\n *    Please avoid having to many nav-items as it can massively influence the user experience.\n *\n * @event syn-show - Emitted when the side-nav opens.\n * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.\n * @event syn-hide - Emitted when the side-nav closes.\n * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.\n *\n * @csspart base - The components base wrapper\n * @csspart drawer - The drawer that is used under the hood for creating the side-nav\n * @csspart content-container - The components main content container\n * @csspart content - The components main content\n * @csspart footer-container - The components footer content container\n * @csspart footer-divider - The components footer divider\n * @csspart footer - The components footer content\n * @csspart overlay - The overlay that covers the screen behind the side-nav.\n *\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.\n * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.\n * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.\n * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.\n */",
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs",
           "status": "stable",
           "since": "1.14.0",
@@ -9925,7 +10178,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.19.0",
+    "version": "1.20.1",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/internal/test/data-testid-helpers.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Allows you to find a DOM element based on the value of its `data-testid` attribute.
+ * This attribute can be used to decouple identifying dom elements for testing from
+ * styling (which is typically done via class selectors) or other ids which serve
+ * different purposes.
+ * See also https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
+ * Inspired by https://testing-library.com/docs/queries/bytestid/
+ * @param {HTMLElement} container - A parent element of the DOM element to find
+ * @param {string} testId - The value of the `data-testid` attribute of the component to find.
+ * @returns The found element or null if there was no such element
+ */
+export declare const queryByTestId: <T extends Element>(container: HTMLElement, testId: string) => T | null;

package/dist/synergy.d.ts

@@ -1,3 +1,4 @@
+export { default as SynAlert } from './components/alert/alert.js';
 export { default as SynBadge } from './components/badge/badge.js';
 export { default as SynButtonGroup } from './components/button-group/button-group.js';
 export { default as SynButton } from './components/button/button.js';

package/dist/synergy.js

@@ -1,202 +1,209 @@
+import {
+  textarea_default
+} from "./chunks/chunk.T22EPQFZ.js";
 import {
   getFormControls,
   serialize
 } from "./chunks/chunk.GBARDV25.js";
 import "./chunks/chunk.NKIYFJN2.js";
 import {
-  tag_default
-} from "./chunks/chunk.EMKKKKFU.js";
+  switch_default
+} from "./chunks/chunk.HQGUQXW3.js";
 import {
-  textarea_default
-} from "./chunks/chunk.5LG6OZVL.js";
-import "./chunks/chunk.P6H4IUOO.js";
+  tag_default
+} from "./chunks/chunk.JZODXQHQ.js";
+import "./chunks/chunk.4ITEU4FK.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.2EI3TNL7.js";
 import {
-  switch_default
-} from "./chunks/chunk.UGPXRN6M.js";
-import "./chunks/chunk.TJIIZ7CR.js";
+  side_nav_default
+} from "./chunks/chunk.BQXII3KW.js";
+import "./chunks/chunk.CNKYRD6D.js";
+import "./chunks/chunk.GO3CCKC3.js";
+import "./chunks/chunk.FPCN35CP.js";
 import "./chunks/chunk.W5JK7V7K.js";
 import "./chunks/chunk.TAO5QIIQ.js";
+import {
+  radio_group_default
+} from "./chunks/chunk.AT43Q6HI.js";
+import "./chunks/chunk.NQSOUJKR.js";
+import "./chunks/chunk.F4MRQLNL.js";
+import "./chunks/chunk.XIUSSERX.js";
 import {
   select_default
-} from "./chunks/chunk.T46C67Z2.js";
-import "./chunks/chunk.3JD6SIIU.js";
-import "./chunks/chunk.2JOZWWOE.js";
+} from "./chunks/chunk.MMYVCYE5.js";
+import "./chunks/chunk.6E5BE4HF.js";
+import "./chunks/chunk.UJXG3FXH.js";
 import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.BGHK4NQA.js";
 import "./chunks/chunk.OWMT6OL2.js";
 import "./chunks/chunk.QNQNR3RY.js";
 import {
-  side_nav_default
-} from "./chunks/chunk.SRUKBLUF.js";
-import "./chunks/chunk.W7PLVOS3.js";
-import "./chunks/chunk.GO3CCKC3.js";
+  progress_ring_default
+} from "./chunks/chunk.YLGY4KSI.js";
 import {
   radio_default
-} from "./chunks/chunk.DUNJ5BV6.js";
+} from "./chunks/chunk.EIBBCV5V.js";
+import "./chunks/chunk.JNZSO64N.js";
+import "./chunks/chunk.V6VND4OF.js";
+import "./chunks/chunk.PKO6FEOM.js";
 import {
   radio_button_default
-} from "./chunks/chunk.DZ7S4RJY.js";
-import "./chunks/chunk.LECQCB4C.js";
+} from "./chunks/chunk.VQN6N2CM.js";
+import "./chunks/chunk.7JIRQOP4.js";
 import "./chunks/chunk.QPK7SLOE.js";
-import {
-  radio_group_default
-} from "./chunks/chunk.4I5SYBN7.js";
-import "./chunks/chunk.XHI2F52K.js";
-import "./chunks/chunk.F4MRQLNL.js";
-import "./chunks/chunk.XIUSSERX.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.N5F4YN7J.js";
-import {
-  progress_ring_default
-} from "./chunks/chunk.GJ6H2WYF.js";
-import "./chunks/chunk.ET6X3DLL.js";
+} from "./chunks/chunk.HPTSLEE7.js";
+import "./chunks/chunk.QUK3LXRT.js";
+import "./chunks/chunk.AMAK44YX.js";
+import "./chunks/chunk.XBUAZUNQ.js";
+import "./chunks/chunk.XIVWHHDF.js";
 import "./chunks/chunk.2V3HGTTL.js";
 import "./chunks/chunk.45VEGVRJ.js";
-import "./chunks/chunk.RURN5UFR.js";
-import "./chunks/chunk.V6VND4OF.js";
-import "./chunks/chunk.PKO6FEOM.js";
+import {
+  option_default
+} from "./chunks/chunk.F7AUODH4.js";
 import {
   popup_default
-} from "./chunks/chunk.UHGLUAVY.js";
+} from "./chunks/chunk.6UIL66TA.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.KJORV2US.js";
-import "./chunks/chunk.AQHCB5J4.js";
-import "./chunks/chunk.74N5WLM5.js";
+} from "./chunks/chunk.YZDFPCCW.js";
+import "./chunks/chunk.7K4JAZHY.js";
 import "./chunks/chunk.XNP4OTUB.js";
-import "./chunks/chunk.LPAMBMOA.js";
-import "./chunks/chunk.AMAK44YX.js";
-import "./chunks/chunk.XBUAZUNQ.js";
+import "./chunks/chunk.74N5WLM5.js";
 import {
-  optgroup_default
-} from "./chunks/chunk.NH3IR2C2.js";
+  nav_item_default
+} from "./chunks/chunk.FO7FIXHB.js";
+import "./chunks/chunk.4FAXULII.js";
+import "./chunks/chunk.L4UUXVRZ.js";
 import {
-  option_default
-} from "./chunks/chunk.KUWSMYGR.js";
-import "./chunks/chunk.W5NCYA3D.js";
-import "./chunks/chunk.3B24TYVN.js";
+  optgroup_default
+} from "./chunks/chunk.3QBKXE6G.js";
+import "./chunks/chunk.RWXSOQP2.js";
+import "./chunks/chunk.KG52EHDB.js";
+import "./chunks/chunk.SQO3FMZF.js";
 import "./chunks/chunk.CFIQXXMW.js";
+import "./chunks/chunk.3B24TYVN.js";
+import {
+  menu_item_default
+} from "./chunks/chunk.EUKJV6XG.js";
 import {
   menu_label_default
-} from "./chunks/chunk.CZ6WRNZU.js";
-import "./chunks/chunk.X4X2RMYJ.js";
+} from "./chunks/chunk.FVKVAJGY.js";
+import "./chunks/chunk.X4NJXF6V.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.3FOVDOJX.js";
 import {
-  nav_item_default
-} from "./chunks/chunk.BZBSIR5N.js";
-import "./chunks/chunk.KPYNOAQ6.js";
-import "./chunks/chunk.L4UUXVRZ.js";
-import "./chunks/chunk.Z3NQ3OCM.js";
-import "./chunks/chunk.KG52EHDB.js";
+  input_default
+} from "./chunks/chunk.PUZSGDYU.js";
 import {
   menu_default
-} from "./chunks/chunk.G5P3WTL3.js";
-import {
-  menu_item_default
-} from "./chunks/chunk.UN5IHLKM.js";
-import "./chunks/chunk.NGEQ7HRH.js";
+} from "./chunks/chunk.YKP4IONJ.js";
+import "./chunks/chunk.6INMENLF.js";
+import "./chunks/chunk.PILX7LVU.js";
+import "./chunks/chunk.RSSY7KPD.js";
+import "./chunks/chunk.LAGRQ3IS.js";
 import "./chunks/chunk.OOABXWCW.js";
 import "./chunks/chunk.PDHVYHXD.js";
 import "./chunks/chunk.JDBDBGQP.js";
 import {
   icon_button_default
-} from "./chunks/chunk.API7KARX.js";
-import {
-  input_default
-} from "./chunks/chunk.NGJRG6XB.js";
-import "./chunks/chunk.TDPC64DK.js";
+} from "./chunks/chunk.5EC3WXBS.js";
+import "./chunks/chunk.FE5K4IMY.js";
 import "./chunks/chunk.3A65FBTX.js";
 import "./chunks/chunk.AW2HNLNP.js";
-import "./chunks/chunk.V2LC4HXQ.js";
-import "./chunks/chunk.PILX7LVU.js";
-import "./chunks/chunk.RSSY7KPD.js";
-import {
-  drawer_default
-} from "./chunks/chunk.L7WWNO6T.js";
 import {
   dropdown_default
-} from "./chunks/chunk.6HSRAAQU.js";
-import "./chunks/chunk.Q5FGJTK5.js";
-import "./chunks/chunk.BPHDK3CI.js";
-import "./chunks/chunk.MIMALEWP.js";
-import "./chunks/chunk.2KYFCKCK.js";
-import "./chunks/chunk.SLCYXMHB.js";
+} from "./chunks/chunk.5NBOZ6NJ.js";
 import {
   header_default
-} from "./chunks/chunk.5L2JI5UY.js";
-import "./chunks/chunk.BLEAPCEP.js";
-import {
-  icon_default
-} from "./chunks/chunk.2UY7COPU.js";
+} from "./chunks/chunk.QVWYVLGP.js";
+import "./chunks/chunk.KRKLIXKV.js";
 import "./chunks/chunk.AOKNP4QD.js";
 import {
-  checkbox_default
-} from "./chunks/chunk.VELRTLV7.js";
+  icon_default
+} from "./chunks/chunk.HWTSSZC2.js";
 import {
   divider_default
-} from "./chunks/chunk.RZE2HSE2.js";
-import "./chunks/chunk.4J7Z64K2.js";
-import "./chunks/chunk.FA6V2WD6.js";
-import "./chunks/chunk.ACTJFDNK.js";
-import "./chunks/chunk.2DDDCRJ3.js";
+} from "./chunks/chunk.23PWSJXG.js";
+import {
+  drawer_default
+} from "./chunks/chunk.GJUGKRQ6.js";
+import "./chunks/chunk.46MCZQWP.js";
 import "./chunks/chunk.RIJKFEYZ.js";
-import "./chunks/chunk.QAZDNT7V.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 {
-  button_default
-} from "./chunks/chunk.ARMOGDBS.js";
+import "./chunks/chunk.VTYWG57Y.js";
+import "./chunks/chunk.FUU4FRAY.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.O2XQWYYG.js";
-import "./chunks/chunk.WJQ6ZWWB.js";
-import "./chunks/chunk.A7IIJ2LL.js";
-import "./chunks/chunk.A47EKSQ4.js";
+} from "./chunks/chunk.SXVH6V2V.js";
+import {
+  checkbox_default
+} from "./chunks/chunk.GHNHKD6M.js";
+import "./chunks/chunk.GZ2HG3RN.js";
 import "./chunks/chunk.WFAJR3FN.js";
 import "./chunks/chunk.TTL762VF.js";
 import "./chunks/chunk.2XZKXVMR.js";
 import "./chunks/chunk.NIYKFSPR.js";
+import "./chunks/chunk.4XKOBCVD.js";
+import "./chunks/chunk.FA6V2WD6.js";
+import "./chunks/chunk.ACTJFDNK.js";
 import {
   badge_default
-} from "./chunks/chunk.5ZXK3DHG.js";
-import "./chunks/chunk.MCRJOP4B.js";
-import "./chunks/chunk.WQJRBFZA.js";
-import "./chunks/chunk.II4PANKR.js";
-import "./chunks/chunk.QY3NFYFU.js";
-import "./chunks/chunk.DEGXHPWD.js";
+} from "./chunks/chunk.5MHW6GEI.js";
+import {
+  button_default
+} from "./chunks/chunk.SYIU62AX.js";
+import "./chunks/chunk.KXRTRZVI.js";
+import "./chunks/chunk.KLJ3XXVZ.js";
 import "./chunks/chunk.OSBC36KQ.js";
-import "./chunks/chunk.Q4CRAGN3.js";
 import "./chunks/chunk.JUJZBRXD.js";
+import "./chunks/chunk.K55MKNUR.js";
+import "./chunks/chunk.Q4CRAGN3.js";
+import "./chunks/chunk.C6NSZT54.js";
+import "./chunks/chunk.A7IIJ2LL.js";
+import {
+  alert_default
+} from "./chunks/chunk.R3MFUBCO.js";
+import "./chunks/chunk.NNOVR6QD.js";
+import "./chunks/chunk.VKYYJ2BL.js";
+import "./chunks/chunk.ZHH2AHOZ.js";
+import "./chunks/chunk.LJQ7LEPV.js";
+import "./chunks/chunk.7BEVGRQ2.js";
+import "./chunks/chunk.QAUTITK3.js";
 import "./chunks/chunk.66WXVGAW.js";
-import "./chunks/chunk.QMBZGUIN.js";
-import "./chunks/chunk.PJO6TM3T.js";
-import "./chunks/chunk.2RF7KO5I.js";
+import "./chunks/chunk.DJF4JI4X.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 {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.C7624ITA.js";
+import "./chunks/chunk.JRYXECAY.js";
+import "./chunks/chunk.PS4UJFYT.js";
+import "./chunks/chunk.Z2AU22QV.js";
+import "./chunks/chunk.II4PANKR.js";
 import "./chunks/chunk.GEHO4WRP.js";
 import "./chunks/chunk.QY3GFWGZ.js";
-import "./chunks/chunk.LVQ53WA2.js";
-import "./chunks/chunk.K55MKNUR.js";
+import "./chunks/chunk.56J5UZ5O.js";
+import "./chunks/chunk.WQJRBFZA.js";
 import "./chunks/chunk.QNDC5KWA.js";
 export {
+  alert_default as SynAlert,
   badge_default as SynBadge,
   button_default as SynButton,
   button_group_default as SynButtonGroup,

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) {