@synergy-design-system/components 1.19.0 → 1.20.0

package/dist/components/side-nav/side-nav.component.js

@@ -1,32 +1,32 @@
 import {
   SynSideNav
-} from "../../chunks/chunk.W7PLVOS3.js";
+} from "../../chunks/chunk.TGGCQSF3.js";
 import "../../chunks/chunk.GO3CCKC3.js";
-import "../../chunks/chunk.4J7Z64K2.js";
+import "../../chunks/chunk.IGFBLFXD.js";
+import "../../chunks/chunk.RIJKFEYZ.js";
+import "../../chunks/chunk.KZMWNTUS.js";
+import "../../chunks/chunk.PHSJD47V.js";
+import "../../chunks/chunk.2QOQY4ZG.js";
+import "../../chunks/chunk.35WADEQD.js";
 import "../../chunks/chunk.FA6V2WD6.js";
 import "../../chunks/chunk.ACTJFDNK.js";
-import "../../chunks/chunk.2DDDCRJ3.js";
-import "../../chunks/chunk.RIJKFEYZ.js";
-import "../../chunks/chunk.QAZDNT7V.js";
+import "../../chunks/chunk.HL7SBENS.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.66WXVGAW.js";
-import "../../chunks/chunk.QMBZGUIN.js";
-import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.CSXBPQFP.js";
 import "../../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.C7624ITA.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
+import "../../chunks/chunk.C7624ITA.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynSideNav as default

package/dist/components/side-nav/side-nav.js

@@ -1,33 +1,33 @@
 import {
   side_nav_default
-} from "../../chunks/chunk.SRUKBLUF.js";
-import "../../chunks/chunk.W7PLVOS3.js";
+} from "../../chunks/chunk.RWIYH2J5.js";
+import "../../chunks/chunk.TGGCQSF3.js";
 import "../../chunks/chunk.GO3CCKC3.js";
-import "../../chunks/chunk.4J7Z64K2.js";
+import "../../chunks/chunk.IGFBLFXD.js";
+import "../../chunks/chunk.RIJKFEYZ.js";
+import "../../chunks/chunk.KZMWNTUS.js";
+import "../../chunks/chunk.PHSJD47V.js";
+import "../../chunks/chunk.2QOQY4ZG.js";
+import "../../chunks/chunk.35WADEQD.js";
 import "../../chunks/chunk.FA6V2WD6.js";
 import "../../chunks/chunk.ACTJFDNK.js";
-import "../../chunks/chunk.2DDDCRJ3.js";
-import "../../chunks/chunk.RIJKFEYZ.js";
-import "../../chunks/chunk.QAZDNT7V.js";
+import "../../chunks/chunk.HL7SBENS.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.66WXVGAW.js";
-import "../../chunks/chunk.QMBZGUIN.js";
-import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.CSXBPQFP.js";
 import "../../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.C7624ITA.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
+import "../../chunks/chunk.C7624ITA.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   side_nav_default as default

package/dist/components/spinner/spinner.component.js

@@ -1,10 +1,10 @@
 import {
   SynSpinner
-} from "../../chunks/chunk.DEGXHPWD.js";
+} from "../../chunks/chunk.I4HVPXQK.js";
 import "../../chunks/chunk.OSBC36KQ.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynSpinner as default

package/dist/components/switch/switch.component.js

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "../../chunks/chunk.TJIIZ7CR.js";
+} from "../../chunks/chunk.GE3ZKSIL.js";
 import "../../chunks/chunk.W5JK7V7K.js";
 import "../../chunks/chunk.TAO5QIIQ.js";
 import "../../chunks/chunk.WFAJR3FN.js";
@@ -8,7 +8,7 @@ import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.JUJZBRXD.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynSwitch as default

package/dist/components/switch/switch.js

@@ -1,7 +1,7 @@
 import {
   switch_default
-} from "../../chunks/chunk.UGPXRN6M.js";
-import "../../chunks/chunk.TJIIZ7CR.js";
+} from "../../chunks/chunk.IFBYW5FA.js";
+import "../../chunks/chunk.GE3ZKSIL.js";
 import "../../chunks/chunk.W5JK7V7K.js";
 import "../../chunks/chunk.TAO5QIIQ.js";
 import "../../chunks/chunk.WFAJR3FN.js";
@@ -9,7 +9,7 @@ import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.JUJZBRXD.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   switch_default as default

package/dist/components/tag/tag.component.js

@@ -1,22 +1,22 @@
 import {
   SynTag
-} from "../../chunks/chunk.2JOZWWOE.js";
+} from "../../chunks/chunk.UEVDP3J5.js";
 import "../../chunks/chunk.B6R3IVGO.js";
 import "../../chunks/chunk.BGHK4NQA.js";
-import "../../chunks/chunk.QAZDNT7V.js";
+import "../../chunks/chunk.HL7SBENS.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.LJQ7LEPV.js";
-import "../../chunks/chunk.QMBZGUIN.js";
-import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.CSXBPQFP.js";
 import "../../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.C7624ITA.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
+import "../../chunks/chunk.C7624ITA.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynTag as default

package/dist/components/tag/tag.js

@@ -1,23 +1,23 @@
 import {
   tag_default
-} from "../../chunks/chunk.EMKKKKFU.js";
-import "../../chunks/chunk.2JOZWWOE.js";
+} from "../../chunks/chunk.AOQTVAEY.js";
+import "../../chunks/chunk.UEVDP3J5.js";
 import "../../chunks/chunk.B6R3IVGO.js";
 import "../../chunks/chunk.BGHK4NQA.js";
-import "../../chunks/chunk.QAZDNT7V.js";
+import "../../chunks/chunk.HL7SBENS.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.LJQ7LEPV.js";
-import "../../chunks/chunk.QMBZGUIN.js";
-import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.CSXBPQFP.js";
 import "../../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.C7624ITA.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
+import "../../chunks/chunk.C7624ITA.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   tag_default as default

package/dist/components/textarea/textarea.component.js

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "../../chunks/chunk.P6H4IUOO.js";
+} from "../../chunks/chunk.54HPCZLM.js";
 import "../../chunks/chunk.YBIBWRKC.js";
 import "../../chunks/chunk.2EI3TNL7.js";
 import "../../chunks/chunk.WFAJR3FN.js";
@@ -8,7 +8,7 @@ import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.JUJZBRXD.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynTextarea as default

package/dist/components/textarea/textarea.js

@@ -1,7 +1,7 @@
 import {
   textarea_default
-} from "../../chunks/chunk.5LG6OZVL.js";
-import "../../chunks/chunk.P6H4IUOO.js";
+} from "../../chunks/chunk.F4A2CST4.js";
+import "../../chunks/chunk.54HPCZLM.js";
 import "../../chunks/chunk.YBIBWRKC.js";
 import "../../chunks/chunk.2EI3TNL7.js";
 import "../../chunks/chunk.WFAJR3FN.js";
@@ -9,7 +9,7 @@ import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.JUJZBRXD.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.LVQ53WA2.js";
+import "../../chunks/chunk.32GEMZZV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   textarea_default as default

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",
@@ -9925,7 +10182,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.19.0",
+    "version": "1.20.0",
     "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';