@synergy-design-system/components 2.30.5 → 2.31.0-numeric.2

package/dist/components/validate/validate.component.js

@@ -1,18 +1,17 @@
 import {
   SynValidate
-} from "../../chunks/chunk.5I5NDOSG.js";
+} from "../../chunks/chunk.PR66KI74.js";
+import "../../chunks/chunk.HX7JLYDF.js";
 import "../../chunks/chunk.MVM3NN6Y.js";
-import "../../chunks/chunk.JOP6PHFJ.js";
-import "../../chunks/chunk.ZY2JORYK.js";
+import "../../chunks/chunk.EK2I2ETM.js";
 import "../../chunks/chunk.WXVOTRW5.js";
-import "../../chunks/chunk.3W5WLB2W.js";
+import "../../chunks/chunk.IKCNW223.js";
 import "../../chunks/chunk.6QYKWCSO.js";
 import "../../chunks/chunk.DZ7YIR5N.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.A3OYJILJ.js";
-import "../../chunks/chunk.HQ6QUSK7.js";
-import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.UEBLSO7C.js";
+import "../../chunks/chunk.G6ITZTTW.js";
+import "../../chunks/chunk.7JGKUB4A.js";
+import "../../chunks/chunk.4WTEYK2Y.js";
 import "../../chunks/chunk.CITWLSAM.js";
 import "../../chunks/chunk.YTEJW7IF.js";
 import "../../chunks/chunk.NH4JQFOM.js";
@@ -20,16 +19,18 @@ import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
 import "../../chunks/chunk.GIU3H3J3.js";
 import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.WVVQK5TE.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.NUIJATJY.js";
-import "../../chunks/chunk.JTSBAJHO.js";
-import "../../chunks/chunk.OH3PPVV4.js";
-import "../../chunks/chunk.74IOULXM.js";
-import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.B7AUFQGQ.js";
 import "../../chunks/chunk.QBHZAR4C.js";
 import "../../chunks/chunk.BXY667C7.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.V4H475OR.js";
+import "../../chunks/chunk.QAQINAAG.js";
+import "../../chunks/chunk.CEQYPACD.js";
+import "../../chunks/chunk.RDYAIG65.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
+import "../../chunks/chunk.NLYVOJGK.js";
+import "../../chunks/chunk.NUQBPC6D.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   SynValidate as default
 };

package/dist/components/validate/validate.js

@@ -1,19 +1,18 @@
 import {
   validate_default
-} from "../../chunks/chunk.BVCKGARW.js";
-import "../../chunks/chunk.5I5NDOSG.js";
+} from "../../chunks/chunk.BPD4SAWW.js";
+import "../../chunks/chunk.PR66KI74.js";
+import "../../chunks/chunk.HX7JLYDF.js";
 import "../../chunks/chunk.MVM3NN6Y.js";
-import "../../chunks/chunk.JOP6PHFJ.js";
-import "../../chunks/chunk.ZY2JORYK.js";
+import "../../chunks/chunk.EK2I2ETM.js";
 import "../../chunks/chunk.WXVOTRW5.js";
-import "../../chunks/chunk.3W5WLB2W.js";
+import "../../chunks/chunk.IKCNW223.js";
 import "../../chunks/chunk.6QYKWCSO.js";
 import "../../chunks/chunk.DZ7YIR5N.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.A3OYJILJ.js";
-import "../../chunks/chunk.HQ6QUSK7.js";
-import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.UEBLSO7C.js";
+import "../../chunks/chunk.G6ITZTTW.js";
+import "../../chunks/chunk.7JGKUB4A.js";
+import "../../chunks/chunk.4WTEYK2Y.js";
 import "../../chunks/chunk.CITWLSAM.js";
 import "../../chunks/chunk.YTEJW7IF.js";
 import "../../chunks/chunk.NH4JQFOM.js";
@@ -21,16 +20,18 @@ import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
 import "../../chunks/chunk.GIU3H3J3.js";
 import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.WVVQK5TE.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.NUIJATJY.js";
-import "../../chunks/chunk.JTSBAJHO.js";
-import "../../chunks/chunk.OH3PPVV4.js";
-import "../../chunks/chunk.74IOULXM.js";
-import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.B7AUFQGQ.js";
 import "../../chunks/chunk.QBHZAR4C.js";
 import "../../chunks/chunk.BXY667C7.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.V4H475OR.js";
+import "../../chunks/chunk.QAQINAAG.js";
+import "../../chunks/chunk.CEQYPACD.js";
+import "../../chunks/chunk.RDYAIG65.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
+import "../../chunks/chunk.NLYVOJGK.js";
+import "../../chunks/chunk.NUQBPC6D.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   validate_default as default
 };

package/dist/components/validate/validate.styles.js

@@ -1,7 +1,7 @@
 import {
   validate_styles_default
 } from "../../chunks/chunk.MVM3NN6Y.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   validate_styles_default as default
 };

package/dist/custom-elements.json

@@ -660,172 +660,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb-item/breadcrumb-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynBreadcrumbItem",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The breadcrumb item's label.",
-              "name": "label"
-            },
-            {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
-            },
-            {
-              "description": "The container that wraps the separator.",
-              "name": "separator"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The breadcrumb item's label.",
-              "name": ""
-            },
-            {
-              "description": "An optional prefix, usually an icon or icon button.",
-              "name": "prefix"
-            },
-            {
-              "description": "An optional suffix, usually an icon or icon button.",
-              "name": "suffix"
-            },
-            {
-              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.",
-              "name": "separator"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'prefix', 'suffix')"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "renderType",
-              "type": {
-                "text": "'button' | 'link' | 'dropdown'"
-              },
-              "privacy": "private",
-              "default": "'button'"
-            },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "attribute": "href"
-            },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "attribute": "target"
-            },
-            {
-              "kind": "field",
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "attribute": "rel"
-            },
-            {
-              "kind": "method",
-              "name": "setRenderType",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hrefChanged"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "fieldName": "href"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "fieldName": "target"
-            },
-            {
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "fieldName": "rel"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
-          "tagNameWithoutPrefix": "breadcrumb-item",
-          "tagName": "syn-breadcrumb-item",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynBreadcrumbItem",
-            "module": "components/breadcrumb-item/breadcrumb-item.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.js",
@@ -1724,6 +1558,172 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb-item/breadcrumb-item.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynBreadcrumbItem",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The breadcrumb item's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The container that wraps the separator.",
+              "name": "separator"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The breadcrumb item's label.",
+              "name": ""
+            },
+            {
+              "description": "An optional prefix, usually an icon or icon button.",
+              "name": "prefix"
+            },
+            {
+              "description": "An optional suffix, usually an icon or icon button.",
+              "name": "suffix"
+            },
+            {
+              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'prefix', 'suffix')"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "renderType",
+              "type": {
+                "text": "'button' | 'link' | 'dropdown'"
+              },
+              "privacy": "private",
+              "default": "'button'"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "attribute": "rel"
+            },
+            {
+              "kind": "method",
+              "name": "setRenderType",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hrefChanged"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "fieldName": "rel"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
+          "tagNameWithoutPrefix": "breadcrumb-item",
+          "tagName": "syn-breadcrumb-item",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynBreadcrumbItem",
+            "module": "components/breadcrumb-item/breadcrumb-item.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/checkbox/checkbox.js",
@@ -6696,6 +6696,53 @@
               "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
               "attribute": "inputmode"
             },
+            {
+              "kind": "field",
+              "name": "numberFormatterOptions",
+              "type": {
+                "text": "Intl.NumberFormatOptions"
+              },
+              "description": "Optional options that should be passed to the `NumberFormatter` when formatting the value.\nThis is used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.\nNote this can only be set via `property`, not as an `attribute`!",
+              "propertyOnly": true
+            },
+            {
+              "kind": "field",
+              "name": "minFractionDigits",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimal amount of fraction digits to use for numeric values.\nUsed to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.",
+              "attribute": "min-fraction-digits"
+            },
+            {
+              "kind": "field",
+              "name": "maxFractionDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximal amount of fraction digits to use for numeric values.\nUsed to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.",
+              "attribute": "max-fraction-digits"
+            },
+            {
+              "kind": "field",
+              "name": "#numericStrategy",
+              "privacy": "private",
+              "type": {
+                "text": "NumericStrategy"
+              },
+              "default": "nativeNumericStrategy"
+            },
+            {
+              "kind": "field",
+              "name": "numericStrategy",
+              "description": "Defines the strategy for handling numbers in the numeric input.\nThis is used to determine how the input behaves when the user interacts with it.\n\nIncludes the following configuration options:\n\n- **autoClamp**: If true, the input will clamp the value to the min and max attributes.\n- **enableNumberFormat**: If true, the input will format the value using a `NumberFormatter`.\n- **noStepAlign**: If true, the input will not align the value to the step attribute.\n- **noStepValidation**: If true, the input will not validate the value against the step attribute.\n\nYou may provide this as one of the following values:\n\n- 'native': Uses the native browser implementation.\n- 'modern': Uses a more intuitive implementation:\n  - Values are clamped to the nearest min or max value.\n  - Stepping is inclusive to the provided min and max values.\n  - Provided stepping is no longer used in validation.\n  - Advanced number formatting is enabled.\n- An object that matches the `NumericStrategy` type. Note this can only be set via `property`, not as an `attribute`!",
+              "type": {
+                "text": "'native' | 'modern' | Partial<NumericStrategy>"
+              },
+              "default": "nativeNumericStrategy",
+              "attribute": "numeric-strategy"
+            },
             {
               "kind": "field",
               "name": "valueAsDate",
@@ -6748,6 +6795,11 @@
               "name": "isIncrementDisabled",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleNumericStrategyAutoClamp",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleChange",
@@ -6950,6 +7002,19 @@
                 }
               ],
               "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "#format",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -6988,6 +7053,12 @@
               "name": "syn-invalid",
               "reactName": "onSynInvalid",
               "eventName": "SynInvalidEvent"
+            },
+            {
+              "description": "Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.",
+              "name": "syn-clamp",
+              "reactName": "onSynClamp",
+              "eventName": "SynClampEvent"
             }
           ],
           "attributes": [
@@ -7238,6 +7309,32 @@
               },
               "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
               "fieldName": "inputmode"
+            },
+            {
+              "name": "min-fraction-digits",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimal amount of fraction digits to use for numeric values.\nUsed to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.",
+              "fieldName": "minFractionDigits"
+            },
+            {
+              "name": "max-fraction-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximal amount of fraction digits to use for numeric values.\nUsed to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.",
+              "fieldName": "maxFractionDigits"
+            },
+            {
+              "name": "numeric-strategy",
+              "description": "Defines the strategy for handling numbers in the numeric input.\nThis is used to determine how the input behaves when the user interacts with it.\n\nIncludes the following configuration options:\n\n- **autoClamp**: If true, the input will clamp the value to the min and max attributes.\n- **enableNumberFormat**: If true, the input will format the value using a `NumberFormatter`.\n- **noStepAlign**: If true, the input will not align the value to the step attribute.\n- **noStepValidation**: If true, the input will not validate the value against the step attribute.\n\nYou may provide this as one of the following values:\n\n- 'native': Uses the native browser implementation.\n- 'modern': Uses a more intuitive implementation:\n  - Values are clamped to the nearest min or max value.\n  - Stepping is inclusive to the provided min and max values.\n  - Provided stepping is no longer used in validation.\n  - Advanced number formatting is enabled.\n- An object that matches the `NumericStrategy` type. Note this can only be set via `property`, not as an `attribute`!",
+              "type": {
+                "text": "'native' | 'modern' | Partial<NumericStrategy>"
+              },
+              "default": "nativeNumericStrategy",
+              "fieldName": "numericStrategy"
             }
           ],
           "superclass": {
@@ -7248,7 +7345,7 @@
           "tagNameWithoutPrefix": "input",
           "tagName": "syn-input",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Inputs collect data from the user.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-divider\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.\n * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-clear - Emitted when the clear button is activated.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart stepper - The container that wraps the number stepper.\n * @csspart decrement-number-stepper - The decrement number stepper button.\n * @csspart increment-number-stepper - The increment number stepper button.\n * @csspart divider - The divider between the increment and decrement number stepper buttons.\n *\n * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.\n * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.\n */",
+          "jsDoc": "/**\n * @summary Inputs collect data from the user.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-divider\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.\n * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-clear - Emitted when the clear button is activated.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart stepper - The container that wraps the number stepper.\n * @csspart decrement-number-stepper - The decrement number stepper button.\n * @csspart increment-number-stepper - The increment number stepper button.\n * @csspart divider - The divider between the increment and decrement number stepper buttons.\n *\n * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.\n * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.\n */",
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs",
           "status": "stable",
           "since": "2.0",
@@ -16038,7 +16135,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.30.5",
+    "version": "2.31.0-numeric.2",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/events/events.d.ts

@@ -6,6 +6,7 @@ export type * from './syn-burger-menu-closed.ts';
 export type * from './syn-burger-menu-hidden.ts';
 export type * from './syn-burger-menu-open.ts';
 export type * from './syn-change.ts';
+export type * from './syn-clamp.ts';
 export type * from './syn-clear.ts';
 export type * from './syn-close.ts';
 export type * from './syn-default-settings-changed.ts';

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

@@ -0,0 +1,16 @@
+export type SynClampDetails = {
+    /**
+     * The "direction" the value was clamped to
+     */
+    clampedTo: 'min' | 'max';
+    /**
+     * The last value the user has input before clamping.
+     */
+    lastUserValue: number;
+};
+export type SynClampEvent = CustomEvent<SynClampDetails>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-clamp': SynClampEvent;
+    }
+}

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 2.30.5
+ * @synergy-design-system/components version 2.31.0-numeric.2
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!