@synergy-design-system/components 2.10.2 → 2.11.1

package/dist/custom-elements.json

@@ -144,6 +144,82 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynBadge",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The badge's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "syn-badge",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy.style/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy.style/components/badge",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynBadge",
+            "module": "components/badge/badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -202,6 +278,22 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "remainingTimeInterval",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "countdownAnimation",
+              "type": {
+                "text": "Animation | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "hasSlotController",
@@ -223,6 +315,13 @@
                 "text": "HTMLElement"
               }
             },
+            {
+              "kind": "field",
+              "name": "countdownElement",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
             {
               "kind": "field",
               "name": "open",
@@ -263,6 +362,20 @@
               "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": "field",
+              "name": "countdown",
+              "type": {
+                "text": "'rtl' | 'ltr' | undefined"
+              },
+              "privacy": "private",
+              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh."
+            },
+            {
+              "kind": "field",
+              "name": "remainingTime",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "restartAutoHide",
@@ -270,12 +383,22 @@
             },
             {
               "kind": "method",
-              "name": "handleCloseClick",
+              "name": "pauseAutoHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "resumeAutoHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCountdownChange",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleMouseMove",
+              "name": "handleCloseClick",
               "privacy": "private"
             },
             {
@@ -401,82 +524,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynBadge",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The badge's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "syn-badge",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy.style/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy.style/components/badge",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynBadge",
-            "module": "components/badge/badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/breadcrumb/breadcrumb.js",
@@ -664,7 +711,7 @@
               "kind": "field",
               "name": "renderType",
               "type": {
-                "text": "'button' | 'link' | 'drop-down'"
+                "text": "'button' | 'link' | 'dropdown'"
               },
               "privacy": "private",
               "default": "'button'"
@@ -11289,6 +11336,116 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/resize-observer/resize-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynResizeObserver",
+          "slots": [
+            {
+              "description": "One or more elements to watch for resizing.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "observedElements",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the observer.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "startObserver",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "stopObserver",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ entries: ResizeObserverEntry[] }"
+              },
+              "description": "Emitted when the element is resized.",
+              "name": "syn-resize",
+              "reactName": "onSynResize",
+              "eventName": "SynResizeEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the observer.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
+          "tagNameWithoutPrefix": "resize-observer",
+          "tagName": "syn-resize-observer",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n * @documentation https://synergy.style/components/resize-observer\n * @status stable\n * @since 2.0\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} syn-resize - Emitted when the element is resized.\n */",
+          "documentation": "https://synergy.style/components/resize-observer",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynResizeObserver",
+            "module": "components/resize-observer/resize-observer.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/select/select.js",
@@ -13366,7 +13523,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-icon-button': SynIconButton }"
+              "default": "{ 'syn-icon-button': SynIconButton, 'syn-resize-observer': SynResizeObserver }"
             },
             {
               "kind": "field",
@@ -13463,6 +13620,24 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "shouldHideScrollStartButton",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "shouldHideScrollEndButton",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "placement",
@@ -13513,6 +13688,16 @@
               "description": "Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property",
               "attribute": "sharp"
             },
+            {
+              "kind": "field",
+              "name": "fixedScrollControls",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent scroll buttons from being hidden when inactive.",
+              "attribute": "fixed-scroll-controls"
+            },
             {
               "kind": "method",
               "name": "getAllTabs",
@@ -13618,6 +13803,31 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "scrollOffset",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "1",
+              "description": "The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so\nwe add one pixel of wiggle room to our calculations."
+            },
+            {
+              "kind": "method",
+              "name": "updateScrollButtons",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "isScrolledToEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "scrollFromStart",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "updateScrollControls"
@@ -13705,6 +13915,15 @@
               "default": "false",
               "description": "Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property",
               "fieldName": "sharp"
+            },
+            {
+              "name": "fixed-scroll-controls",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent scroll buttons from being hidden when inactive.",
+              "fieldName": "fixedScrollControls"
             }
           ],
           "superclass": {
@@ -15132,7 +15351,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.10.2",
+    "version": "2.11.1",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/events/events.d.ts

@@ -18,6 +18,7 @@ export type * from './syn-move.ts';
 export type * from './syn-remove.ts';
 export type * from './syn-reposition.ts';
 export type * from './syn-request-close.ts';
+export type * from './syn-resize.ts';
 export type * from './syn-select.ts';
 export type * from './syn-show.ts';
 export type * from './syn-tab-hide.ts';

package/dist/events/syn-after-hide.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-after-show.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-blur.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynBlurEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-change.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynChangeEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-clear.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynClearEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-close.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynCloseEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-error.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynErrorEvent = CustomEvent<{
     status?: number;
 }>;

package/dist/events/syn-focus.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynFocusEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-hide.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynHideEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-initial-focus.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-input.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynInputEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-invalid.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynInvalidEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-load.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynLoadEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-remove.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-reposition.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/syn-request-close.d.ts

@@ -4,6 +4,9 @@
  * Removing this comment will prevent it from being managed by it.
  * ---------------------------------------------------------------------
  */
+/**
+ * Synergy custom event
+ */
 export type SynRequestCloseEvent = CustomEvent<{
     source: 'close-button' | 'keyboard' | 'overlay';
 }>;