@synergy-design-system/components 2.31.2 → 2.33.0

package/dist/custom-elements.json

@@ -4059,6 +4059,15 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "isVisible",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "drawer",
@@ -4180,6 +4189,18 @@
               "kind": "method",
               "name": "hide",
               "description": "Hides the drawer"
+            },
+            {
+              "kind": "method",
+              "name": "forceVisibility",
+              "parameters": [
+                {
+                  "name": "isVisible",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -5614,7 +5635,7 @@
                 "text": "'hidden' | 'open' | 'closed'"
               },
               "default": "'hidden'",
-              "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
+              "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in\nvariant=\"default\".\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
               "attribute": "burger-menu",
               "reflects": true
             },
@@ -5698,7 +5719,7 @@
                 "text": "'hidden' | 'open' | 'closed'"
               },
               "default": "'hidden'",
-              "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
+              "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in\nvariant=\"default\".\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
               "fieldName": "burgerMenu"
             }
           ],
@@ -6709,6 +6730,52 @@
               "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`.\nNote this can only be set via `property`, not as an `attribute`!",
+              "propertyOnly": true
+            },
+            {
+              "kind": "field",
+              "name": "minFractionDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimal amount of fraction digits to use for numeric values.\nUsed to format the number when the input type is `number`.",
+              "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`.",
+              "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- **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- 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",
@@ -6761,6 +6828,11 @@
               "name": "isIncrementDisabled",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleNumericStrategyAutoClamp",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleChange",
@@ -6963,6 +7035,24 @@
                 }
               ],
               "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "#formatNumber",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#isNumberFormattingEnabled",
+              "privacy": "private"
             }
           ],
           "events": [
@@ -7001,6 +7091,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": [
@@ -7251,6 +7347,31 @@
               },
               "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"
+              },
+              "description": "The minimal amount of fraction digits to use for numeric values.\nUsed to format the number when the input type is `number`.",
+              "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`.",
+              "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- **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- 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": {
@@ -7261,7 +7382,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",
@@ -12790,6 +12911,18 @@
             {
               "description": "The drawer's base wrapper",
               "name": "drawer__base"
+            },
+            {
+              "description": "The nav-item to toggle open state for variant=\"sticky\"",
+              "name": "toggle-nav-item"
+            },
+            {
+              "description": "The icon of the toggle nav-item for variant=\"sticky\"",
+              "name": "toggle-icon"
+            },
+            {
+              "description": "The label of the toggle nav-item for variant=\"sticky\".",
+              "name": "toggle-label"
             }
           ],
           "slots": [
@@ -12800,6 +12933,14 @@
             {
               "description": "The footer content of the side-nav. Used for <syn-nav-item /> elements. Please avoid having to many nav-items as it can massively influence the user experience.",
               "name": "footer"
+            },
+            {
+              "description": "The label of the toggle nav-item for variant=\"sticky\".",
+              "name": "toggle-label"
+            },
+            {
+              "description": "An icon to use in lieu of the default icon for the toggle nav-item for variant=\"sticky\".",
+              "name": "toggle-icon"
             }
           ],
           "members": [
@@ -12810,7 +12951,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-divider': SynDivider, 'syn-drawer': SynDrawer, }"
+              "default": "{ 'syn-divider': SynDivider, 'syn-drawer': SynDrawer, 'syn-icon': SynIcon, 'syn-nav-item': SynNavItem, }"
             },
             {
               "kind": "field",
@@ -12860,7 +13001,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending if the rail attribute is set or not, the behavior will differ.\n\n__Non rail__:\nWith `open` will show the side-nav.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
+              "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
               "attribute": "open",
               "reflects": true
             },
@@ -12872,9 +13013,21 @@
               },
               "default": "false",
               "description": "Use the rail attribute to only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon.\nIf this is not the case you should use a burger navigation.",
+              "deprecated": "Use the `variant` attribute with `rail` instead.\nWill be removed in synergy version 3.0",
               "attribute": "rail",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'rail' | 'sticky'"
+              },
+              "default": "'default'",
+              "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
+              "attribute": "variant",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "noFocusTrapping",
@@ -12882,7 +13035,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "By default, the side-nav traps the focus if in non-rail mode and open.\nTo disable the focus trapping, set this attribute.",
+              "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
               "attribute": "no-focus-trapping",
               "reflects": true
             },
@@ -12924,24 +13077,6 @@
               "name": "removeMouseListener",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "setDrawerVisibility",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "isVisible",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "forceDrawerVisibilityForRailMode",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "setDrawerAnimations",
@@ -12949,7 +13084,7 @@
             },
             {
               "kind": "method",
-              "name": "handleModeChange"
+              "name": "handleVariantChange"
             },
             {
               "kind": "method",
@@ -12968,6 +13103,11 @@
               "kind": "method",
               "name": "hide",
               "description": "Hides the side-nav"
+            },
+            {
+              "kind": "method",
+              "name": "toggleOpenState",
+              "privacy": "private"
             }
           ],
           "events": [
@@ -13003,7 +13143,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending if the rail attribute is set or not, the behavior will differ.\n\n__Non rail__:\nWith `open` will show the side-nav.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
+              "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending on the \"variant\" attribute, the behavior will differ.\n\n__Default__:\nWith `open` will show the side-nav with an overlay.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.\n\n__Sticky__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
               "fieldName": "open"
             },
             {
@@ -13013,15 +13153,25 @@
               },
               "default": "false",
               "description": "Use the rail attribute to only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon.\nIf this is not the case you should use a burger navigation.",
+              "deprecated": "Use the `variant` attribute with `rail` instead.\nWill be removed in synergy version 3.0",
               "fieldName": "rail"
             },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'rail' | 'sticky'"
+              },
+              "default": "'default'",
+              "description": "The variant that should be used to show the side navigation.\n\nThe following variants are supported:\n- **default** (default): Always shows the whole content and additionally an overlay.\nThis makes especially sense for applications, where you navigate to a place and stay\nthere for a longer time.\n- **rail**: Only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\nNote: The rail variant is only an option if all Navigation Items on the first level\nhave an Icon.\nIf this is not the case you should use a burger navigation.\n- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)\nand full width. This variant is only possible for non-nested navigation items.\nNote: The sticky variant is only an option if all Navigation Items on the first level\nhave an Icon and if there are only \"first level\" items.",
+              "fieldName": "variant"
+            },
             {
               "name": "no-focus-trapping",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "By default, the side-nav traps the focus if in non-rail mode and open.\nTo disable the focus trapping, set this attribute.",
+              "description": "By default, the side-nav traps the focus if in variant=\"default\" and open.\nTo disable the focus trapping, set this attribute.",
               "fieldName": "noFocusTrapping"
             }
           ],
@@ -13033,30 +13183,32 @@
           "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  (where the footer slot content is rendered)\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 * @csspart panel - The side-nav's panel (where the whole content is rendered).\n * @csspart body - The side-nav's body (where the default slot content is rendered)\n * @csspart drawer__base - The drawer's base wrapper\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 */",
+          "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 * @dependency syn-icon\n * @dependency syn-nav-item\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 * @slot toggle-label - The label of the toggle nav-item for variant=\"sticky\".\n * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item\n * for variant=\"sticky\".\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  (where the footer slot content is rendered)\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 * @csspart panel - The side-nav's panel (where the whole content is rendered).\n * @csspart body - The side-nav's body (where the default slot content is rendered)\n * @csspart drawer__base - The drawer's base wrapper\n * @csspart toggle-nav-item - The nav-item to toggle open state for variant=\"sticky\"\n * @csspart toggle-icon - The icon of the toggle nav-item for variant=\"sticky\"\n * @csspart toggle-label - The label of the toggle nav-item for variant=\"sticky\".\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\n *  in variant=\"default\".\n * @animation sideNav.showRail - The animation to use when showing the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav\n *  in variant=\"default\".\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant=\"rail\"\n *  and variant=\"sticky\".\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",
           "dependencies": [
             "syn-divider",
-            "syn-drawer"
+            "syn-drawer",
+            "syn-icon",
+            "syn-nav-item"
           ],
           "animations": [
             {
               "name": "sideNav.showNonRail",
-              "description": "The animation to use when showing the side-nav in non-rail mode."
+              "description": "The animation to use when showing the side-nav in variant=\"default\"."
             },
             {
               "name": "sideNav.showRail",
-              "description": "The animation to use when showing the side-nav in rail mode."
+              "description": "The animation to use when showing the side-nav in variant=\"rail\" and variant=\"sticky\"."
             },
             {
               "name": "sideNav.hideNonRail",
-              "description": "The animation to use when hiding the side-nav in non-rail mode."
+              "description": "The animation to use when hiding the side-nav in variant=\"default\"."
             },
             {
               "name": "sideNav.hideRail",
-              "description": "The animation to use when hiding the side-nav in rail mode."
+              "description": "The animation to use when hiding the side-nav in variant=\"rail\" and variant=\"sticky\"."
             },
             {
               "name": "sideNav.overlay.show",
@@ -16055,7 +16207,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.31.2",
+    "version": "2.33.0",
     "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.31.2
+ * @synergy-design-system/components version 2.33.0
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!

package/dist/synergy-autoloader.js

@@ -1,7 +1,7 @@
 import {
   getBasePath
 } from "./chunks/chunk.234ERFCE.js";
-import "./chunks/chunk.2GFK6XTO.js";
+import "./chunks/chunk.Z4XV3SMG.js";
 
 // src/synergy-autoloader.ts
 var observer = new MutationObserver((mutations) => {