@vonage/vivid 4.14.2 → 4.14.4

package/custom-elements.json

@@ -10,9 +10,9 @@
           "kind": "variable",
           "name": "AccordionExpandMode",
           "type": {
-            "text": "{\n\t/**\n\t * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.\n\t */\n\tsingle: 'single',\n\n\t/**\n\t * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.\n\t */\n\tmulti: 'multi',\n}"
+            "text": "{\n\t/**\n\t * Designates only a single AccordionItem can be open a time.\n\t */\n\tsingle: 'single',\n\n\t/**\n\t * Designates multiple AccordionItems can be open simultaneously.\n\t */\n\tmulti: 'multi',\n}"
           },
-          "default": "{\n\t/**\n\t * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.\n\t */\n\tsingle: 'single',\n\n\t/**\n\t * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.\n\t */\n\tmulti: 'multi',\n}",
+          "default": "{\n\t/**\n\t * Designates only a single AccordionItem can be open a time.\n\t */\n\tsingle: 'single',\n\n\t/**\n\t * Designates multiple AccordionItems can be open simultaneously.\n\t */\n\tmulti: 'multi',\n}",
           "description": "Expand mode for Accordion",
           "privacy": "public"
         },
@@ -227,6 +227,14 @@
       "kind": "javascript-module",
       "path": "libs/components/src/lib/accordion/definition.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "AccordionExpandMode",
+          "type": {
+            "text": "{\n\tsingle: 'single',\n\tmulti: 'multi',\n}"
+          },
+          "default": "{\n\tsingle: 'single',\n\tmulti: 'multi',\n}"
+        },
         {
           "kind": "variable",
           "name": "registerAccordion",
@@ -245,7 +253,7 @@
           "name": "AccordionExpandMode",
           "declaration": {
             "name": "AccordionExpandMode",
-            "package": "@microsoft/fast-foundation"
+            "module": "libs/components/src/lib/accordion/definition.ts"
           }
         },
         {
@@ -4653,6 +4661,24 @@
               "description": "The appearance attribute.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "ComboboxShape | undefined"
+              },
+              "description": "The shape attribute.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "scale",
+              "type": {
+                "text": "ComboboxSize | undefined"
+              },
+              "description": "The size the combobox should have.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "placement",
@@ -4903,6 +4929,22 @@
               "description": "The appearance attribute.",
               "fieldName": "appearance"
             },
+            {
+              "name": "shape",
+              "type": {
+                "text": "ComboboxShape | undefined"
+              },
+              "description": "The shape attribute.",
+              "fieldName": "shape"
+            },
+            {
+              "name": "scale",
+              "type": {
+                "text": "ComboboxSize | undefined"
+              },
+              "description": "The size the combobox should have.",
+              "fieldName": "scale"
+            },
             {
               "name": "placement",
               "type": {
@@ -9376,6 +9418,16 @@
               "default": "'vwc-button'",
               "description": "Used internally to hold the tag that button is registered at."
             },
+            {
+              "kind": "field",
+              "name": "iconTag",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "'vwc-icon'",
+              "description": "Used internally to hold the tag that icon is registered at."
+            },
             {
               "kind": "field",
               "name": "#localizeErrorMessage",
@@ -9390,10 +9442,6 @@
               "kind": "method",
               "name": "#addRemoveButtonToFilesPreview"
             },
-            {
-              "kind": "method",
-              "name": "#setRemoveButtonConnotationOnError"
-            },
             {
               "kind": "method",
               "name": "#chooseFile",
@@ -10535,34 +10583,50 @@
       "exports": [
         {
           "kind": "js",
-          "name": "MenuItemRole",
+          "name": "registerMenuItem",
           "declaration": {
-            "name": "MenuItemRole",
-            "module": "./menu-item"
+            "name": "registerMenuItem",
+            "module": "libs/components/src/lib/menu-item/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerMenuItem",
+          "name": "MenuItemRole",
           "declaration": {
-            "name": "registerMenuItem",
-            "module": "libs/components/src/lib/menu-item/definition.ts"
+            "name": "MenuItemRole",
+            "module": "./menu-item-role"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/menu-item/menu-item.ts",
+      "path": "libs/components/src/lib/menu-item/menu-item-role.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "MenuItemRole",
           "type": {
-            "text": "{\n\t...FastMenuItemRole,\n\tpresentation: 'presentation',\n}"
+            "text": "{\n\tmenuitem: 'menuitem',\n\tmenuitemcheckbox: 'menuitemcheckbox',\n\tmenuitemradio: 'menuitemradio',\n\tpresentation: 'presentation',\n}"
           },
-          "default": "{\n\t...FastMenuItemRole,\n\tpresentation: 'presentation',\n}"
-        },
+          "default": "{\n\tmenuitem: 'menuitem',\n\tmenuitemcheckbox: 'menuitemcheckbox',\n\tmenuitemradio: 'menuitemradio',\n\tpresentation: 'presentation',\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MenuItemRole",
+          "declaration": {
+            "name": "MenuItemRole",
+            "module": "libs/components/src/lib/menu-item/menu-item-role.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/menu-item/menu-item.ts",
+      "declarations": [
         {
           "kind": "class",
           "description": "",
@@ -10892,14 +10956,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "MenuItemRole",
-          "declaration": {
-            "name": "MenuItemRole",
-            "module": "libs/components/src/lib/menu-item/menu-item.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "MenuItem",
@@ -14781,8 +14837,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           }
         }
       ],
@@ -15551,7 +15607,7 @@
           "mixins": [
             {
               "name": "FormAssociated",
-              "package": "@microsoft/fast-foundation"
+              "module": "/libs/components/src/shared/foundation/form-associated/form-associated"
             }
           ],
           "superclass": {
@@ -16489,12 +16545,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/slider/definition.ts",
+      "path": "libs/components/src/lib/split-button/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerSlider",
-          "description": "Registers the slider elements with the design system.",
+          "name": "registerSplitButton",
+          "description": "Registers the button elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -16506,403 +16562,366 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SliderConnotation",
+          "name": "SplitButtonAppearance",
           "declaration": {
-            "name": "SliderConnotation",
-            "module": "./slider"
+            "name": "SplitButtonAppearance",
+            "module": "./split-button"
           }
         },
         {
           "kind": "js",
-          "name": "registerSlider",
+          "name": "SplitButtonConnotation",
           "declaration": {
-            "name": "registerSlider",
-            "module": "libs/components/src/lib/slider/definition.ts"
+            "name": "SplitButtonConnotation",
+            "module": "./split-button"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/slider/slider.form-associated.ts",
-      "declarations": [
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "FormAssociatedSlider",
-          "members": [
-            {
-              "kind": "field",
-              "name": "proxy"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormAssociated",
-              "module": "/libs/components/src/shared/foundation/form-associated/form-associated"
-            }
-          ],
-          "superclass": {
-            "name": "_Slider",
-            "module": "libs/components/src/lib/slider/slider.form-associated.ts"
+          "kind": "js",
+          "name": "SplitButtonShape",
+          "declaration": {
+            "name": "SplitButtonShape",
+            "module": "./split-button"
           }
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "FormAssociatedSlider",
+          "name": "SplitButtonSize",
           "declaration": {
-            "name": "FormAssociatedSlider",
-            "module": "libs/components/src/lib/slider/slider.form-associated.ts"
+            "name": "SplitButtonSize",
+            "module": "./split-button"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerSplitButton",
+          "declaration": {
+            "name": "registerSplitButton",
+            "module": "libs/components/src/lib/split-button/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/slider/slider.ts",
+      "path": "libs/components/src/lib/split-button/locale.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/split-button/split-button.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "SliderMode",
-          "type": {
-            "text": "{\n\tsingleValue: 'single-value',\n}"
-          },
-          "default": "{\n\tsingleValue: 'single-value',\n}",
-          "description": "The selection modes of a @microsoft/fast-foundation#(Slider:class).",
-          "privacy": "public"
-        },
         {
           "kind": "class",
           "description": "",
-          "name": "Slider",
+          "name": "SplitButton",
           "cssProperties": [
             {
-              "name": "--vvd-slider-cta-primary",
+              "name": "--vvd-split-button-cta-primary",
               "default": "var(--vvd-color-cta-500)"
             },
             {
-              "name": "--vvd-slider-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
-            }
-          ],
-          "members": [
+              "name": "--vvd-split-button-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
             {
-              "kind": "field",
-              "name": "readOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
-              "privacy": "public"
+              "name": "--vvd-split-button-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
             },
             {
-              "kind": "field",
-              "name": "valueAsNumber",
-              "type": {
-                "text": "number"
-              },
-              "description": "The value property, typed as a number.",
-              "privacy": "public"
+              "name": "--vvd-split-button-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
             },
             {
-              "kind": "field",
-              "name": "valueTextFormatter",
-              "type": {
-                "text": "(value: string) => string"
-              },
-              "description": "Custom function that generates a string for the component's \"aria-valuetext\" attribute based on the current value.",
-              "privacy": "public"
+              "name": "--vvd-split-button-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
             },
             {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The minimum allowed value.",
-              "privacy": "public"
+              "name": "--vvd-split-button-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
             },
             {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "10",
-              "description": "The maximum allowed value.",
-              "privacy": "public"
+              "name": "--vvd-split-button-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
             },
             {
-              "kind": "field",
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
-              "privacy": "public"
+              "name": "--vvd-split-button-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
             },
             {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "Orientation"
-              },
-              "description": "The orientation of the slider.",
-              "privacy": "public"
+              "name": "--vvd-split-button-success-primary",
+              "default": "var(--vvd-color-success-500)"
             },
             {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "SliderMode"
-              },
-              "description": "The selection mode.",
-              "privacy": "public"
+              "name": "--vvd-split-button-success-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
-              "kind": "method",
-              "name": "increment",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Increment the value by the step",
-              "privacy": "public"
+              "name": "--vvd-split-button-success-primary-increment",
+              "default": "var(--vvd-color-success-600)"
             },
             {
-              "kind": "method",
-              "name": "decrement",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Decrement the value by the step",
-              "privacy": "public"
+              "name": "--vvd-split-button-success-contrast",
+              "default": "var(--vvd-color-success-800)"
             },
             {
-              "kind": "field",
-              "name": "keypressHandler",
-              "privacy": "protected"
+              "name": "--vvd-split-button-success-fierce",
+              "default": "var(--vvd-color-success-700)"
             },
             {
-              "kind": "method",
-              "name": "setThumbPositionForOrientation",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_",
-                  "type": {
-                    "text": "Direction"
-                  }
-                },
-                {
-                  "description": "writing mode",
-                  "name": "direction"
-                }
-              ],
-              "description": "Places the thumb based on the current value"
+              "name": "--vvd-split-button-success-firm",
+              "default": "var(--vvd-color-success-600)"
             },
             {
-              "kind": "method",
-              "name": "#thumbTrackEndOffset",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "name": "--vvd-split-button-success-soft",
+              "default": "var(--vvd-color-success-100)"
             },
             {
-              "kind": "method",
-              "name": "updateStepMultiplier",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update the step multiplier used to ensure rounding errors from steps that\nare not whole numbers"
+              "name": "--vvd-split-button-success-faint",
+              "default": "var(--vvd-color-success-50)"
             },
             {
-              "kind": "field",
-              "name": "setupTrackConstraints",
-              "privacy": "private"
+              "name": "--vvd-split-button-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
             },
             {
-              "kind": "field",
-              "name": "setupListeners",
-              "privacy": "private"
+              "name": "--vvd-split-button-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
-              "kind": "field",
-              "name": "midpoint",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "readonly": true
+              "name": "--vvd-split-button-alert-primary-increment",
+              "default": "var(--vvd-color-alert-600)"
             },
             {
-              "kind": "method",
-              "name": "setupDefaultValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "--vvd-split-button-alert-contrast",
+              "default": "var(--vvd-color-alert-800)"
             },
             {
-              "kind": "field",
-              "name": "handleThumbMouseDown",
-              "privacy": "private",
-              "description": "Handle mouse moves during a thumb drag operation\nIf the event handler is null it removes the events"
+              "name": "--vvd-split-button-alert-fierce",
+              "default": "var(--vvd-color-alert-700)"
             },
             {
-              "kind": "field",
-              "name": "handleMouseMove",
-              "privacy": "private",
-              "description": "Handle mouse moves during a thumb drag operation"
+              "name": "--vvd-split-button-alert-firm",
+              "default": "var(--vvd-color-alert-600)"
             },
             {
-              "kind": "method",
-              "name": "#calculateValueFromMouseEvent",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Pick<MouseEvent, 'pageX' | 'pageY'>"
-                  }
-                }
-              ]
+              "name": "--vvd-split-button-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
             },
             {
-              "kind": "field",
-              "name": "handleWindowMouseUp",
-              "privacy": "private",
-              "description": "Handle a window mouse up during a drag operation"
+              "name": "--vvd-split-button-alert-faint",
+              "default": "var(--vvd-color-alert-50)"
             },
             {
-              "kind": "field",
-              "name": "stopDragging",
-              "privacy": "private"
+              "name": "--vvd-split-button-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
             },
             {
-              "kind": "field",
-              "name": "handleMouseDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "description": "MouseEvent or null. If there is no event handler it will remove the events",
-                  "name": "e"
-                }
-              ],
-              "description": ""
+              "name": "--vvd-split-button-announcement-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
-              "kind": "method",
-              "name": "#roundToNearestStep",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "name": "--vvd-split-button-announcement-primary-increment",
+              "default": "var(--vvd-color-announcement-600)"
+            },
+            {
+              "name": "--vvd-split-button-announcement-contrast",
+              "default": "var(--vvd-color-announcement-800)"
+            },
+            {
+              "name": "--vvd-split-button-announcement-fierce",
+              "default": "var(--vvd-color-announcement-700)"
+            },
+            {
+              "name": "--vvd-split-button-announcement-firm",
+              "default": "var(--vvd-color-announcement-600)"
+            },
+            {
+              "name": "--vvd-split-button-announcement-soft",
+              "default": "var(--vvd-color-announcement-100)"
+            },
+            {
+              "name": "--vvd-split-button-announcement-faint",
+              "default": "var(--vvd-color-announcement-50)"
+            },
+            {
+              "name": "--vvd-split-button-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-split-button-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-split-button-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
             },
+            {
+              "name": "--vvd-split-button-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-split-button-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            },
+            {
+              "name": "--vvd-split-button-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-split-button-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-split-button-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "_action",
               "type": {
-                "text": "string | null"
+                "text": "HTMLButtonElement"
               },
-              "default": "null"
+              "description": "Action HTML button element",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "ariaValuetext",
+              "name": "action",
               "type": {
-                "text": "string | null"
+                "text": "HTMLButtonElement"
               },
-              "default": "null"
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "markers",
+              "name": "_indicator",
               "type": {
-                "text": "boolean"
+                "text": "HTMLButtonElement"
               },
-              "default": "false",
-              "description": "Display markers on/off",
+              "description": "Indicator HTML button element",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "pin",
+              "name": "indicator",
               "type": {
-                "text": "boolean"
+                "text": "HTMLButtonElement"
               },
-              "default": "false",
-              "description": "Show current value on the thumb.",
-              "privacy": "public"
+              "readonly": true
             },
             {
               "kind": "field",
               "name": "connotation",
               "type": {
-                "text": "SliderConnotation | undefined"
+                "text": "SplitButtonConnotation | undefined"
               },
-              "description": "slider connotation",
+              "description": "The connotation the split button should have.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "#isNonVisibleFocus",
-              "privacy": "private",
+              "name": "shape",
               "type": {
-                "text": "boolean"
+                "text": "SplitButtonShape | undefined"
               },
-              "default": "false"
+              "description": "The shape the split button should have.",
+              "privacy": "public"
             },
             {
-              "kind": "method",
-              "name": "#registerThumbListeners"
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "SplitButtonAppearance | undefined"
+              },
+              "description": "The appearance the split button should have.",
+              "privacy": "public"
             },
             {
-              "kind": "method",
-              "name": "#unregisterThumbListeners"
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SplitButtonSize | undefined"
+              },
+              "description": "The size the split button should have.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "#onMouseOver",
-              "privacy": "private"
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the split button's label.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "#onMouseOut",
-              "privacy": "private"
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the split button's icon.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "proxy",
-              "inheritedFrom": {
-                "name": "FormAssociatedSlider",
-                "module": "libs/components/src/lib/slider/slider.form-associated.ts"
-              }
+              "name": "splitIndicator",
+              "type": {
+                "text": "string"
+              },
+              "default": "'chevron-down-line'",
+              "description": "Indicates the split button's icon indicator.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates if the button is disabled.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "ariaExpanded",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "indicatorAriaLabel",
+              "type": {
+                "text": "| string\n\t\t| null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
+              "privacy": "public"
             }
           ],
           "events": [
@@ -16910,147 +16929,139 @@
               "type": {
                 "text": "CustomEvent<undefined>"
               },
-              "description": "Fires a custom 'change' event when the slider value changes",
-              "name": "change"
+              "description": "Event emitted when the action button is clicked",
+              "name": "action-click"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Event emitted when the indicator button is clicked",
+              "name": "indicator-click"
             }
           ],
           "attributes": [
             {
-              "name": "readonly",
+              "name": "connotation",
               "type": {
-                "text": "boolean"
+                "text": "SplitButtonConnotation | undefined"
               },
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
-              "fieldName": "readOnly"
+              "description": "The connotation the split button should have.",
+              "fieldName": "connotation"
             },
             {
+              "name": "shape",
               "type": {
-                "text": "number"
+                "text": "SplitButtonShape | undefined"
               },
-              "default": "0",
-              "description": "The minimum allowed value.",
-              "fieldName": "min"
+              "description": "The shape the split button should have.",
+              "fieldName": "shape"
             },
             {
+              "name": "appearance",
               "type": {
-                "text": "number"
+                "text": "SplitButtonAppearance | undefined"
               },
-              "default": "10",
-              "description": "The maximum allowed value.",
-              "fieldName": "max"
+              "description": "The appearance the split button should have.",
+              "fieldName": "appearance"
             },
             {
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "SplitButtonSize | undefined"
               },
-              "default": "1",
-              "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
-              "fieldName": "step"
+              "description": "The size the split button should have.",
+              "fieldName": "size"
             },
             {
-              "name": "orientation",
+              "name": "label",
               "type": {
-                "text": "Orientation"
+                "text": "string | undefined"
               },
-              "description": "The orientation of the slider.",
-              "fieldName": "orientation"
+              "description": "Indicates the split button's label.",
+              "fieldName": "label"
             },
             {
-              "name": "mode",
+              "name": "icon",
               "type": {
-                "text": "SliderMode"
+                "text": "string | undefined"
               },
-              "description": "The selection mode.",
-              "fieldName": "mode"
+              "description": "Indicates the split button's icon.",
+              "fieldName": "icon"
             },
             {
-              "name": "aria-label",
+              "name": "split-indicator",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "fieldName": "ariaLabel"
+              "default": "'chevron-down-line'",
+              "description": "Indicates the split button's icon indicator.",
+              "fieldName": "splitIndicator"
             },
             {
-              "name": "aria-valuetext",
+              "name": "disabled",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "fieldName": "ariaValuetext"
+              "default": "false",
+              "description": "Indicates if the button is disabled.",
+              "fieldName": "disabled"
             },
             {
+              "name": "aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "Display markers on/off",
-              "fieldName": "markers"
+              "default": "null",
+              "fieldName": "ariaLabel"
             },
             {
+              "name": "aria-expanded",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "Show current value on the thumb.",
-              "fieldName": "pin"
+              "default": "null",
+              "fieldName": "ariaExpanded"
             },
             {
-              "name": "connotation",
+              "name": "indicator-aria-label",
               "type": {
-                "text": "SliderConnotation | undefined"
+                "text": "| string\n\t\t| null"
               },
-              "description": "slider connotation",
-              "fieldName": "connotation"
+              "default": "null",
+              "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
+              "fieldName": "indicatorAriaLabel"
             }
           ],
           "superclass": {
-            "name": "FormAssociatedSlider",
-            "module": "/libs/components/src/lib/slider/slider.form-associated"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           },
           "vividComponent": {
             "public": true,
-            "name": "slider",
-            "vueModels": [
-              {
-                "name": "modelValue",
-                "attributeName": "value",
-                "eventNames": [
-                  "change"
-                ],
-                "valueMapping": "(event.target as HTMLInputElement).value"
-              }
-            ]
+            "name": "split-button"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SliderMode",
-          "declaration": {
-            "name": "SliderMode",
-            "module": "libs/components/src/lib/slider/slider.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Slider",
+          "name": "SplitButton",
           "declaration": {
-            "name": "Slider",
-            "module": "libs/components/src/lib/slider/slider.ts"
+            "name": "SplitButton",
+            "module": "libs/components/src/lib/split-button/split-button.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/split-button/definition.ts",
+      "path": "libs/components/src/lib/slider/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerSplitButton",
-          "description": "Registers the button elements with the design system.",
+          "name": "registerSlider",
+          "description": "Registers the slider elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -17062,450 +17073,462 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SplitButtonAppearance",
-          "declaration": {
-            "name": "SplitButtonAppearance",
-            "module": "./split-button"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SplitButtonConnotation",
+          "name": "SliderConnotation",
           "declaration": {
-            "name": "SplitButtonConnotation",
-            "module": "./split-button"
+            "name": "SliderConnotation",
+            "module": "./slider"
           }
         },
         {
           "kind": "js",
-          "name": "SplitButtonShape",
+          "name": "registerSlider",
           "declaration": {
-            "name": "SplitButtonShape",
-            "module": "./split-button"
+            "name": "registerSlider",
+            "module": "libs/components/src/lib/slider/definition.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/slider/slider.form-associated.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "SplitButtonSize",
-          "declaration": {
-            "name": "SplitButtonSize",
-            "module": "./split-button"
+          "kind": "class",
+          "description": "",
+          "name": "FormAssociatedSlider",
+          "members": [
+            {
+              "kind": "field",
+              "name": "proxy"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/libs/components/src/shared/foundation/form-associated/form-associated"
+            }
+          ],
+          "superclass": {
+            "name": "_Slider",
+            "module": "libs/components/src/lib/slider/slider.form-associated.ts"
           }
-        },
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "registerSplitButton",
+          "name": "FormAssociatedSlider",
           "declaration": {
-            "name": "registerSplitButton",
-            "module": "libs/components/src/lib/split-button/definition.ts"
+            "name": "FormAssociatedSlider",
+            "module": "libs/components/src/lib/slider/slider.form-associated.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/split-button/locale.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/split-button/split-button.ts",
+      "path": "libs/components/src/lib/slider/slider.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "SliderMode",
+          "type": {
+            "text": "{\n\tsingleValue: 'single-value',\n}"
+          },
+          "default": "{\n\tsingleValue: 'single-value',\n}",
+          "description": "The selection modes of a Slider.",
+          "privacy": "public"
+        },
         {
           "kind": "class",
           "description": "",
-          "name": "SplitButton",
+          "name": "Slider",
           "cssProperties": [
             {
-              "name": "--vvd-split-button-cta-primary",
+              "name": "--vvd-slider-cta-primary",
               "default": "var(--vvd-color-cta-500)"
             },
             {
-              "name": "--vvd-split-button-cta-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-split-button-cta-primary-increment",
-              "default": "var(--vvd-color-cta-600)"
-            },
-            {
-              "name": "--vvd-split-button-cta-contrast",
-              "default": "var(--vvd-color-cta-800)"
-            },
-            {
-              "name": "--vvd-split-button-cta-fierce",
-              "default": "var(--vvd-color-cta-700)"
-            },
-            {
-              "name": "--vvd-split-button-cta-firm",
-              "default": "var(--vvd-color-cta-600)"
-            },
-            {
-              "name": "--vvd-split-button-cta-soft",
-              "default": "var(--vvd-color-cta-100)"
-            },
-            {
-              "name": "--vvd-split-button-cta-faint",
-              "default": "var(--vvd-color-cta-50)"
-            },
-            {
-              "name": "--vvd-split-button-success-primary",
-              "default": "var(--vvd-color-success-500)"
-            },
-            {
-              "name": "--vvd-split-button-success-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-split-button-success-primary-increment",
-              "default": "var(--vvd-color-success-600)"
-            },
-            {
-              "name": "--vvd-split-button-success-contrast",
-              "default": "var(--vvd-color-success-800)"
-            },
-            {
-              "name": "--vvd-split-button-success-fierce",
-              "default": "var(--vvd-color-success-700)"
-            },
-            {
-              "name": "--vvd-split-button-success-firm",
-              "default": "var(--vvd-color-success-600)"
-            },
-            {
-              "name": "--vvd-split-button-success-soft",
-              "default": "var(--vvd-color-success-100)"
-            },
-            {
-              "name": "--vvd-split-button-success-faint",
-              "default": "var(--vvd-color-success-50)"
-            },
-            {
-              "name": "--vvd-split-button-alert-primary",
-              "default": "var(--vvd-color-alert-500)"
-            },
-            {
-              "name": "--vvd-split-button-alert-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-split-button-alert-primary-increment",
-              "default": "var(--vvd-color-alert-600)"
-            },
+              "name": "--vvd-slider-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            }
+          ],
+          "members": [
             {
-              "name": "--vvd-split-button-alert-contrast",
-              "default": "var(--vvd-color-alert-800)"
+              "kind": "field",
+              "name": "readOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-alert-fierce",
-              "default": "var(--vvd-color-alert-700)"
+              "kind": "field",
+              "name": "valueAsNumber",
+              "type": {
+                "text": "number"
+              },
+              "description": "The value property, typed as a number.",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-alert-firm",
-              "default": "var(--vvd-color-alert-600)"
+              "kind": "field",
+              "name": "valueTextFormatter",
+              "type": {
+                "text": "(value: string) => string"
+              },
+              "description": "Custom function that generates a string for the component's \"aria-valuetext\" attribute based on the current value.",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-alert-soft",
-              "default": "var(--vvd-color-alert-100)"
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimum allowed value.",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-alert-faint",
-              "default": "var(--vvd-color-alert-50)"
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The maximum allowed value.",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-announcement-primary",
-              "default": "var(--vvd-color-announcement-500)"
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-announcement-primary-text",
-              "default": "var(--vvd-color-canvas)"
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "Orientation"
+              },
+              "description": "The orientation of the slider.",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-announcement-primary-increment",
-              "default": "var(--vvd-color-announcement-600)"
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "SliderMode"
+              },
+              "description": "The selection mode.",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-announcement-contrast",
-              "default": "var(--vvd-color-announcement-800)"
+              "kind": "method",
+              "name": "increment",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Increment the value by the step",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-announcement-fierce",
-              "default": "var(--vvd-color-announcement-700)"
+              "kind": "method",
+              "name": "decrement",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Decrement the value by the step",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-split-button-announcement-firm",
-              "default": "var(--vvd-color-announcement-600)"
+              "kind": "field",
+              "name": "keypressHandler",
+              "privacy": "protected"
             },
             {
-              "name": "--vvd-split-button-announcement-soft",
-              "default": "var(--vvd-color-announcement-100)"
+              "kind": "method",
+              "name": "setThumbPositionForOrientation",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_",
+                  "type": {
+                    "text": "Direction"
+                  }
+                },
+                {
+                  "description": "writing mode",
+                  "name": "direction"
+                }
+              ],
+              "description": "Places the thumb based on the current value"
             },
             {
-              "name": "--vvd-split-button-announcement-faint",
-              "default": "var(--vvd-color-announcement-50)"
+              "kind": "method",
+              "name": "#thumbTrackEndOffset",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "name": "--vvd-split-button-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
+              "kind": "method",
+              "name": "updateStepMultiplier",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update the step multiplier used to ensure rounding errors from steps that\nare not whole numbers"
             },
             {
-              "name": "--vvd-split-button-accent-primary-text",
-              "default": "var(--vvd-color-canvas)"
+              "kind": "field",
+              "name": "setupTrackConstraints",
+              "privacy": "private"
             },
             {
-              "name": "--vvd-split-button-accent-primary-increment",
-              "default": "var(--vvd-color-neutral-800)"
+              "kind": "field",
+              "name": "setupListeners",
+              "privacy": "private"
             },
             {
-              "name": "--vvd-split-button-accent-contrast",
-              "default": "var(--vvd-color-neutral-800)"
+              "kind": "field",
+              "name": "midpoint",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "name": "--vvd-split-button-accent-fierce",
-              "default": "var(--vvd-color-neutral-700)"
+              "kind": "method",
+              "name": "setupDefaultValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
-              "name": "--vvd-split-button-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
+              "kind": "field",
+              "name": "handleThumbMouseDown",
+              "privacy": "private",
+              "description": "Handle mouse moves during a thumb drag operation\nIf the event handler is null it removes the events"
             },
             {
-              "name": "--vvd-split-button-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
+              "kind": "field",
+              "name": "handleMouseMove",
+              "privacy": "private",
+              "description": "Handle mouse moves during a thumb drag operation"
             },
             {
-              "name": "--vvd-split-button-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot.",
-              "name": ""
+              "kind": "method",
+              "name": "#calculateValueFromMouseEvent",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Pick<MouseEvent, 'pageX' | 'pageY'>"
+                  }
+                }
+              ]
             },
-            {
-              "description": "Add an icon to the component.",
-              "name": "icon"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "_action",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "description": "Action HTML button element",
-              "privacy": "public"
+              "name": "handleWindowMouseUp",
+              "privacy": "private",
+              "description": "Handle a window mouse up during a drag operation"
             },
             {
               "kind": "field",
-              "name": "action",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "readonly": true
+              "name": "stopDragging",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_indicator",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "description": "Indicator HTML button element",
-              "privacy": "public"
+              "name": "handleMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "description": "MouseEvent or null. If there is no event handler it will remove the events",
+                  "name": "e"
+                }
+              ],
+              "description": ""
             },
             {
-              "kind": "field",
-              "name": "indicator",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "readonly": true
+              "kind": "method",
+              "name": "#roundToNearestStep",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "connotation",
+              "name": "ariaLabel",
               "type": {
-                "text": "SplitButtonConnotation | undefined"
+                "text": "string | null"
               },
-              "description": "The connotation the split button should have.",
-              "privacy": "public"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "shape",
+              "name": "ariaValuetext",
               "type": {
-                "text": "SplitButtonShape | undefined"
+                "text": "string | null"
               },
-              "description": "The shape the split button should have.",
-              "privacy": "public"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "appearance",
+              "name": "markers",
               "type": {
-                "text": "SplitButtonAppearance | undefined"
+                "text": "boolean"
               },
-              "description": "The appearance the split button should have.",
+              "default": "false",
+              "description": "Display markers on/off",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "pin",
               "type": {
-                "text": "SplitButtonSize | undefined"
+                "text": "boolean"
               },
-              "description": "The size the split button should have.",
+              "default": "false",
+              "description": "Show current value on the thumb.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "connotation",
               "type": {
-                "text": "string | undefined"
+                "text": "SliderConnotation | undefined"
               },
-              "description": "Indicates the split button's label.",
+              "description": "slider connotation",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "#isNonVisibleFocus",
+              "privacy": "private",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates the split button's icon.",
-              "privacy": "public"
+              "default": "false"
             },
             {
-              "kind": "field",
-              "name": "splitIndicator",
-              "type": {
-                "text": "string"
-              },
-              "default": "'chevron-down-line'",
-              "description": "Indicates the split button's icon indicator.",
-              "privacy": "public"
+              "kind": "method",
+              "name": "#registerThumbListeners"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates if the button is disabled.",
-              "privacy": "public"
+              "kind": "method",
+              "name": "#unregisterThumbListeners"
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null"
+              "name": "#onMouseOver",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "ariaExpanded",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null"
+              "name": "#onMouseOut",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "indicatorAriaLabel",
-              "type": {
-                "text": "| string\n\t\t| null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
-              "privacy": "public"
+              "name": "proxy",
+              "inheritedFrom": {
+                "name": "FormAssociatedSlider",
+                "module": "libs/components/src/lib/slider/slider.form-associated.ts"
+              }
             }
           ],
           "events": [
             {
               "type": {
-                "text": "CustomEvent<undefined>"
-              },
-              "description": "Event emitted when the action button is clicked",
-              "name": "action-click"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<undefined>"
-              },
-              "description": "Event emitted when the indicator button is clicked",
-              "name": "indicator-click"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "connotation",
-              "type": {
-                "text": "SplitButtonConnotation | undefined"
-              },
-              "description": "The connotation the split button should have.",
-              "fieldName": "connotation"
-            },
-            {
-              "name": "shape",
-              "type": {
-                "text": "SplitButtonShape | undefined"
+                "text": "CustomEvent<undefined>"
               },
-              "description": "The shape the split button should have.",
-              "fieldName": "shape"
-            },
+              "description": "Fires a custom 'change' event when the slider value changes",
+              "name": "change"
+            }
+          ],
+          "attributes": [
             {
-              "name": "appearance",
+              "name": "readonly",
               "type": {
-                "text": "SplitButtonAppearance | undefined"
+                "text": "boolean"
               },
-              "description": "The appearance the split button should have.",
-              "fieldName": "appearance"
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
+              "fieldName": "readOnly"
             },
             {
-              "name": "size",
               "type": {
-                "text": "SplitButtonSize | undefined"
+                "text": "number"
               },
-              "description": "The size the split button should have.",
-              "fieldName": "size"
+              "default": "0",
+              "description": "The minimum allowed value.",
+              "fieldName": "min"
             },
             {
-              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Indicates the split button's label.",
-              "fieldName": "label"
+              "default": "10",
+              "description": "The maximum allowed value.",
+              "fieldName": "max"
             },
             {
-              "name": "icon",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Indicates the split button's icon.",
-              "fieldName": "icon"
+              "default": "1",
+              "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
+              "fieldName": "step"
             },
             {
-              "name": "split-indicator",
+              "name": "orientation",
               "type": {
-                "text": "string"
+                "text": "Orientation"
               },
-              "default": "'chevron-down-line'",
-              "description": "Indicates the split button's icon indicator.",
-              "fieldName": "splitIndicator"
+              "description": "The orientation of the slider.",
+              "fieldName": "orientation"
             },
             {
-              "name": "disabled",
+              "name": "mode",
               "type": {
-                "text": "boolean"
+                "text": "SliderMode"
               },
-              "default": "false",
-              "description": "Indicates if the button is disabled.",
-              "fieldName": "disabled"
+              "description": "The selection mode.",
+              "fieldName": "mode"
             },
             {
               "name": "aria-label",
@@ -17516,52 +17539,85 @@
               "fieldName": "ariaLabel"
             },
             {
-              "name": "aria-expanded",
+              "name": "aria-valuetext",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "fieldName": "ariaExpanded"
+              "fieldName": "ariaValuetext"
             },
             {
-              "name": "indicator-aria-label",
               "type": {
-                "text": "| string\n\t\t| null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
-              "fieldName": "indicatorAriaLabel"
+              "default": "false",
+              "description": "Display markers on/off",
+              "fieldName": "markers"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current value on the thumb.",
+              "fieldName": "pin"
+            },
+            {
+              "name": "connotation",
+              "type": {
+                "text": "SliderConnotation | undefined"
+              },
+              "description": "slider connotation",
+              "fieldName": "connotation"
             }
           ],
           "superclass": {
-            "name": "VividElement",
-            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+            "name": "FormAssociatedSlider",
+            "module": "/libs/components/src/lib/slider/slider.form-associated"
           },
           "vividComponent": {
             "public": true,
-            "name": "split-button"
+            "name": "slider",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "value",
+                "eventNames": [
+                  "change"
+                ],
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SplitButton",
+          "name": "SliderMode",
           "declaration": {
-            "name": "SplitButton",
-            "module": "libs/components/src/lib/split-button/split-button.ts"
+            "name": "SliderMode",
+            "module": "libs/components/src/lib/slider/slider.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Slider",
+          "declaration": {
+            "name": "Slider",
+            "module": "libs/components/src/lib/slider/slider.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/switch/definition.ts",
+      "path": "libs/components/src/lib/tab/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerSwitch",
-          "description": "Registers the switch elements with the design system.",
+          "name": "registerTab",
+          "description": "Registers the tab elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -17573,322 +17629,273 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SwitchConnotation",
+          "name": "TabConnotation",
           "declaration": {
-            "name": "SwitchConnotation",
-            "module": "./switch"
+            "name": "TabConnotation",
+            "module": "./tab"
           }
         },
         {
           "kind": "js",
-          "name": "registerSwitch",
+          "name": "TabShape",
           "declaration": {
-            "name": "registerSwitch",
-            "module": "libs/components/src/lib/switch/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/switch/switch.form-associated.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FormAssociatedSwitch",
-          "members": [
-            {
-              "kind": "field",
-              "name": "proxy"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "CheckableFormAssociated",
-              "module": "/libs/components/src/shared/foundation/form-associated/form-associated"
-            }
-          ],
-          "superclass": {
-            "name": "_Switch",
-            "module": "libs/components/src/lib/switch/switch.form-associated.ts"
+            "name": "TabShape",
+            "module": "./tab"
           }
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "FormAssociatedSwitch",
+          "name": "registerTab",
           "declaration": {
-            "name": "FormAssociatedSwitch",
-            "module": "libs/components/src/lib/switch/switch.form-associated.ts"
+            "name": "registerTab",
+            "module": "libs/components/src/lib/tab/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/switch/switch.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Switch",
-          "cssProperties": [
-            {
-              "name": "--vvd-switch-cta-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-switch-cta-primary",
-              "default": "var(--vvd-color-cta-500)"
-            },
-            {
-              "name": "--vvd-switch-cta-primary-increment",
-              "default": "var(--vvd-color-cta-600)"
-            },
-            {
-              "name": "--vvd-switch-cta-firm",
-              "default": "var(--vvd-color-cta-600)"
-            },
-            {
-              "name": "--vvd-switch-cta-intermediate",
-              "default": "var(--vvd-color-cta-500)"
-            },
-            {
-              "name": "--vvd-switch-cta-fierce",
-              "default": "var(--vvd-color-cta-700)"
-            },
-            {
-              "name": "--vvd-switch-alert-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-switch-alert-primary",
-              "default": "var(--vvd-color-alert-500)"
-            },
-            {
-              "name": "--vvd-switch-alert-primary-increment",
-              "default": "var(--vvd-color-alert-600)"
-            },
-            {
-              "name": "--vvd-switch-alert-firm",
-              "default": "var(--vvd-color-alert-600)"
-            },
-            {
-              "name": "--vvd-switch-alert-intermediate",
-              "default": "var(--vvd-color-alert-500)"
-            },
-            {
-              "name": "--vvd-switch-alert-fierce",
-              "default": "var(--vvd-color-alert-700)"
-            },
-            {
-              "name": "--vvd-switch-success-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-switch-success-primary",
-              "default": "var(--vvd-color-success-500)"
-            },
-            {
-              "name": "--vvd-switch-success-primary-increment",
-              "default": "var(--vvd-color-success-600)"
-            },
-            {
-              "name": "--vvd-switch-success-firm",
-              "default": "var(--vvd-color-success-600)"
-            },
-            {
-              "name": "--vvd-switch-success-intermediate",
-              "default": "var(--vvd-color-success-500)"
-            },
-            {
-              "name": "--vvd-switch-success-fierce",
-              "default": "var(--vvd-color-success-700)"
-            },
+      "path": "libs/components/src/lib/tab/locale.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/tab/tab.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Tab",
+          "cssProperties": [
             {
-              "name": "--vvd-switch-announcement-primary-text",
+              "name": "--vvd-tab-cta-primary-text",
               "default": "var(--vvd-color-canvas)"
             },
             {
-              "name": "--vvd-switch-announcement-primary",
-              "default": "var(--vvd-color-announcement-500)"
+              "name": "--vvd-tab-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
             },
             {
-              "name": "--vvd-switch-announcement-primary-increment",
-              "default": "var(--vvd-color-announcement-600)"
+              "name": "--vvd-tab-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
             },
             {
-              "name": "--vvd-switch-announcement-firm",
-              "default": "var(--vvd-color-announcement-600)"
+              "name": "--vvd-tab-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
             },
             {
-              "name": "--vvd-switch-announcement-intermediate",
-              "default": "var(--vvd-color-announcement-500)"
+              "name": "--vvd-tab-cta-pale",
+              "default": "var(--vvd-color-cta-300)"
             },
             {
-              "name": "--vvd-switch-announcement-fierce",
-              "default": "var(--vvd-color-announcement-700)"
+              "name": "--vvd-tab-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
             },
             {
-              "name": "--vvd-switch-accent-primary-text",
+              "name": "--vvd-tab-accent-primary-text",
               "default": "var(--vvd-color-canvas)"
             },
             {
-              "name": "--vvd-switch-accent-primary",
+              "name": "--vvd-tab-accent-firm",
               "default": "var(--vvd-color-canvas-text)"
             },
             {
-              "name": "--vvd-switch-accent-primary-increment",
-              "default": "var(--vvd-color-neutral-800)"
+              "name": "--vvd-tab-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
             },
             {
-              "name": "--vvd-switch-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
+              "name": "--vvd-tab-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
             },
             {
-              "name": "--vvd-switch-accent-intermediate",
-              "default": "var(--vvd-color-neutral-500)"
+              "name": "--vvd-tab-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
             },
             {
-              "name": "--vvd-switch-accent-fierce",
-              "default": "var(--vvd-color-neutral-700)"
+              "name": "--vvd-tab-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot to add an icon to tab.",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "label",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates the switch's label.",
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
               "privacy": "public"
             },
             {
               "kind": "field",
               "name": "connotation",
               "type": {
-                "text": "SwitchConnotation | undefined"
+                "text": "TabConnotation | undefined"
               },
-              "description": "Indicates the switch's connotation.",
+              "description": "The connotation the tab should have.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "readOnly",
+              "name": "shape",
               "type": {
-                "text": "boolean"
+                "text": "TabShape | undefined"
               },
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
+              "description": "The shape the tab should have.",
               "privacy": "public"
             },
             {
-              "kind": "method",
-              "name": "updateForm",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the tab's label.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "defaultChecked",
+              "name": "removable",
               "type": {
                 "text": "boolean"
               },
-              "default": "!!this.checkedAttribute"
+              "default": "false",
+              "description": "Indicates the tab's label.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "checked"
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "'-1' as unknown"
             },
             {
               "kind": "field",
-              "name": "proxy",
-              "inheritedFrom": {
-                "name": "FormAssociatedSwitch",
-                "module": "libs/components/src/lib/switch/switch.form-associated.ts"
-              }
-            }
-          ],
-          "events": [
-            {
+              "name": "ariaSelected",
               "type": {
-                "text": "CustomEvent<undefined>"
+                "text": "string | null"
               },
-              "description": "Emits a custom change event when the checked state changes",
-              "name": "change"
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "_handleCloseClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onKeyDown",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ],
           "attributes": [
             {
-              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates the switch's label.",
-              "fieldName": "label"
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
+              "fieldName": "disabled"
             },
             {
               "name": "connotation",
               "type": {
-                "text": "SwitchConnotation | undefined"
+                "text": "TabConnotation | undefined"
               },
-              "description": "Indicates the switch's connotation.",
+              "description": "The connotation the tab should have.",
               "fieldName": "connotation"
             },
             {
-              "name": "readonly",
+              "name": "shape",
+              "type": {
+                "text": "TabShape | undefined"
+              },
+              "description": "The shape the tab should have.",
+              "fieldName": "shape"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the tab's label.",
+              "fieldName": "label"
+            },
+            {
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
-              "fieldName": "readOnly"
+              "default": "false",
+              "description": "Indicates the tab's label.",
+              "fieldName": "removable"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "default": "'-1' as unknown",
+              "fieldName": "tabIndex"
+            },
+            {
+              "name": "aria-selected",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaSelected"
             }
           ],
           "superclass": {
-            "name": "FormAssociatedSwitch",
-            "module": "/libs/components/src/lib/switch/switch.form-associated"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           },
           "vividComponent": {
             "public": true,
-            "name": "switch",
-            "vueModels": [
-              {
-                "name": "modelValue",
-                "attributeName": "checked",
-                "eventNames": [
-                  "change"
-                ],
-                "valueMapping": "(event.target as HTMLInputElement).checked"
-              }
-            ]
+            "name": "tab"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Switch",
+          "name": "Tab",
           "declaration": {
-            "name": "Switch",
-            "module": "libs/components/src/lib/switch/switch.ts"
+            "name": "Tab",
+            "module": "libs/components/src/lib/tab/tab.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/tab/definition.ts",
+      "path": "libs/components/src/lib/switch/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerTab",
-          "description": "Registers the tab elements with the design system.",
+          "name": "registerSwitch",
+          "description": "Registers the switch elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -17900,261 +17907,326 @@
       "exports": [
         {
           "kind": "js",
-          "name": "TabConnotation",
+          "name": "SwitchConnotation",
           "declaration": {
-            "name": "TabConnotation",
-            "module": "./tab"
+            "name": "SwitchConnotation",
+            "module": "./switch"
           }
         },
         {
           "kind": "js",
-          "name": "TabShape",
+          "name": "registerSwitch",
           "declaration": {
-            "name": "TabShape",
-            "module": "./tab"
+            "name": "registerSwitch",
+            "module": "libs/components/src/lib/switch/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/switch/switch.form-associated.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FormAssociatedSwitch",
+          "members": [
+            {
+              "kind": "field",
+              "name": "proxy"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "CheckableFormAssociated",
+              "module": "/libs/components/src/shared/foundation/form-associated/form-associated"
+            }
+          ],
+          "superclass": {
+            "name": "_Switch",
+            "module": "libs/components/src/lib/switch/switch.form-associated.ts"
           }
-        },
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "registerTab",
+          "name": "FormAssociatedSwitch",
           "declaration": {
-            "name": "registerTab",
-            "module": "libs/components/src/lib/tab/definition.ts"
+            "name": "FormAssociatedSwitch",
+            "module": "libs/components/src/lib/switch/switch.form-associated.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/tab/locale.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/tab/tab.ts",
+      "path": "libs/components/src/lib/switch/switch.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "Tab",
+          "name": "Switch",
           "cssProperties": [
             {
-              "name": "--vvd-tab-cta-primary-text",
+              "name": "--vvd-switch-cta-primary-text",
               "default": "var(--vvd-color-canvas)"
             },
             {
-              "name": "--vvd-tab-cta-firm",
+              "name": "--vvd-switch-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-switch-cta-primary-increment",
               "default": "var(--vvd-color-cta-600)"
             },
             {
-              "name": "--vvd-tab-cta-faint",
-              "default": "var(--vvd-color-cta-50)"
+              "name": "--vvd-switch-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
             },
             {
-              "name": "--vvd-tab-cta-fierce",
+              "name": "--vvd-switch-cta-intermediate",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-switch-cta-fierce",
               "default": "var(--vvd-color-cta-700)"
             },
             {
-              "name": "--vvd-tab-cta-pale",
-              "default": "var(--vvd-color-cta-300)"
+              "name": "--vvd-switch-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
-              "name": "--vvd-tab-cta-soft",
-              "default": "var(--vvd-color-cta-100)"
+              "name": "--vvd-switch-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
             },
             {
-              "name": "--vvd-tab-accent-primary-text",
+              "name": "--vvd-switch-alert-primary-increment",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-switch-alert-firm",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-switch-alert-intermediate",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-switch-alert-fierce",
+              "default": "var(--vvd-color-alert-700)"
+            },
+            {
+              "name": "--vvd-switch-success-primary-text",
               "default": "var(--vvd-color-canvas)"
             },
             {
-              "name": "--vvd-tab-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
+              "name": "--vvd-switch-success-primary",
+              "default": "var(--vvd-color-success-500)"
             },
             {
-              "name": "--vvd-tab-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
+              "name": "--vvd-switch-success-primary-increment",
+              "default": "var(--vvd-color-success-600)"
             },
             {
-              "name": "--vvd-tab-accent-fierce",
-              "default": "var(--vvd-color-neutral-700)"
+              "name": "--vvd-switch-success-firm",
+              "default": "var(--vvd-color-success-600)"
             },
             {
-              "name": "--vvd-tab-accent-pale",
-              "default": "var(--vvd-color-neutral-300)"
+              "name": "--vvd-switch-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
             },
             {
-              "name": "--vvd-tab-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
-            }
-          ],
-          "slots": [
+              "name": "--vvd-switch-success-fierce",
+              "default": "var(--vvd-color-success-700)"
+            },
             {
-              "description": "Slot to add an icon to tab.",
-              "name": "icon"
+              "name": "--vvd-switch-announcement-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-switch-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
+            },
+            {
+              "name": "--vvd-switch-announcement-primary-increment",
+              "default": "var(--vvd-color-announcement-600)"
+            },
+            {
+              "name": "--vvd-switch-announcement-firm",
+              "default": "var(--vvd-color-announcement-600)"
+            },
+            {
+              "name": "--vvd-switch-announcement-intermediate",
+              "default": "var(--vvd-color-announcement-500)"
+            },
+            {
+              "name": "--vvd-switch-announcement-fierce",
+              "default": "var(--vvd-color-announcement-700)"
+            },
+            {
+              "name": "--vvd-switch-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-switch-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-switch-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-switch-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-switch-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-switch-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "connotation",
+              "name": "ariaLabel",
               "type": {
-                "text": "TabConnotation | undefined"
+                "text": "string | null"
               },
-              "description": "The connotation the tab should have.",
-              "privacy": "public"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "shape",
+              "name": "label",
               "type": {
-                "text": "TabShape | undefined"
+                "text": "string | undefined"
               },
-              "description": "The shape the tab should have.",
+              "description": "Indicates the switch's label.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "connotation",
               "type": {
-                "text": "string | undefined"
+                "text": "SwitchConnotation | undefined"
               },
-              "description": "Indicates the tab's label.",
+              "description": "Indicates the switch's connotation.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "removable",
+              "name": "readOnly",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Indicates the tab's label.",
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
               "privacy": "public"
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "'-1' as unknown"
+              "kind": "method",
+              "name": "updateForm",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "field",
-              "name": "ariaSelected",
+              "name": "defaultChecked",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null"
+              "default": "!!this.checkedAttribute"
             },
             {
-              "kind": "method",
-              "name": "_handleCloseClick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "checked"
             },
             {
-              "kind": "method",
-              "name": "_onKeyDown",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "proxy",
+              "inheritedFrom": {
+                "name": "FormAssociatedSwitch",
+                "module": "libs/components/src/lib/switch/switch.form-associated.ts"
+              }
             }
           ],
-          "attributes": [
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
-              "fieldName": "disabled"
-            },
+          "events": [
             {
-              "name": "connotation",
               "type": {
-                "text": "TabConnotation | undefined"
+                "text": "CustomEvent<undefined>"
               },
-              "description": "The connotation the tab should have.",
-              "fieldName": "connotation"
-            },
+              "description": "Emits a custom change event when the checked state changes",
+              "name": "change"
+            }
+          ],
+          "attributes": [
             {
-              "name": "shape",
+              "name": "aria-label",
               "type": {
-                "text": "TabShape | undefined"
+                "text": "string | null"
               },
-              "description": "The shape the tab should have.",
-              "fieldName": "shape"
+              "default": "null",
+              "fieldName": "ariaLabel"
             },
             {
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Indicates the tab's label.",
+              "description": "Indicates the switch's label.",
               "fieldName": "label"
             },
             {
+              "name": "connotation",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates the tab's label.",
-              "fieldName": "removable"
-            },
-            {
-              "type": {
-                "text": "number"
+                "text": "SwitchConnotation | undefined"
               },
-              "default": "'-1' as unknown",
-              "fieldName": "tabIndex"
+              "description": "Indicates the switch's connotation.",
+              "fieldName": "connotation"
             },
             {
-              "name": "aria-selected",
+              "name": "readonly",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "fieldName": "ariaSelected"
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
+              "fieldName": "readOnly"
             }
           ],
           "superclass": {
-            "name": "VividElement",
-            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+            "name": "FormAssociatedSwitch",
+            "module": "/libs/components/src/lib/switch/switch.form-associated"
           },
           "vividComponent": {
             "public": true,
-            "name": "tab"
+            "name": "switch",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "checked",
+                "eventNames": [
+                  "change"
+                ],
+                "valueMapping": "(event.target as HTMLInputElement).checked"
+              }
+            ]
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Tab",
+          "name": "Switch",
           "declaration": {
-            "name": "Tab",
-            "module": "libs/components/src/lib/tab/tab.ts"
+            "name": "Switch",
+            "module": "libs/components/src/lib/switch/switch.ts"
           }
         }
       ]
@@ -18268,6 +18340,14 @@
           },
           "default": "'--_tabs-tablist-column'"
         },
+        {
+          "kind": "variable",
+          "name": "TabsOrientation",
+          "type": {
+            "text": "{\n\tvertical: 'vertical',\n\thorizontal: 'horizontal',\n}"
+          },
+          "default": "{\n\tvertical: 'vertical',\n\thorizontal: 'horizontal',\n}"
+        },
         {
           "kind": "class",
           "description": "",
@@ -18722,6 +18802,14 @@
             "module": "libs/components/src/lib/tabs/tabs.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "TabsOrientation",
+          "declaration": {
+            "name": "TabsOrientation",
+            "module": "libs/components/src/lib/tabs/tabs.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "Tabs",
@@ -21552,7 +21640,7 @@
           ],
           "superclass": {
             "name": "VividElement",
-            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element.js"
           },
           "vividComponent": {
             "public": true,
@@ -21974,6 +22062,226 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/time-picker/inline-time-picker/columns.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "HoursColumn",
+          "type": {
+            "text": "Column"
+          },
+          "default": "{\n\tid: 'hours',\n\tgetLabel: (x: InlineTimePicker) => x.locale.timePicker.hoursLabel,\n\tgetOptions: (x: InlineTimePicker) =>\n\t\tgetHoursOptions(\n\t\t\tx.min,\n\t\t\tx.max,\n\t\t\tx.clock === '12h'\n\t\t\t\t? MeridiesColumn.getSelectedOptionValue(x) ??\n\t\t\t\t\t\tMeridiesColumn.getOptions(x)[0].value\n\t\t\t\t: undefined\n\t\t),\n\tgetSelectedOptionValue: (x: InlineTimePicker) =>\n\t\tx.value ? parseTimeStr(x.value).hourStr : undefined,\n\tupdatedValue: (x: InlineTimePicker, optionValue: string) => {\n\t\tif (x.value) {\n\t\t\tconst { minuteStr, secondStr } = parseTimeStr(x.value);\n\t\t\treturn `${optionValue}:${minuteStr}:${secondStr}`;\n\t\t} else {\n\t\t\treturn `${optionValue}:00:00`;\n\t\t}\n\t},\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "MinutesColumn",
+          "type": {
+            "text": "Column"
+          },
+          "default": "{\n\tid: 'minutes',\n\tgetLabel: (x: InlineTimePicker) => x.locale.timePicker.minutesLabel,\n\tgetOptions: (x: InlineTimePicker) =>\n\t\tgetMinutesOptions(x.minutesStep, x.value, x.min, x.max),\n\tgetSelectedOptionValue: (x: InlineTimePicker) =>\n\t\tx.value ? parseTimeStr(x.value).minuteStr : undefined,\n\tupdatedValue: (x: InlineTimePicker, optionValue: string) => {\n\t\tif (x.value) {\n\t\t\tconst { hourStr, secondStr } = parseTimeStr(x.value);\n\t\t\treturn `${hourStr}:${optionValue}:${secondStr}`;\n\t\t} else {\n\t\t\treturn `00:${optionValue}:00`;\n\t\t}\n\t},\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "SecondsColumn",
+          "type": {
+            "text": "Column"
+          },
+          "default": "{\n\tid: 'seconds',\n\tgetLabel: (x: InlineTimePicker) => x.locale.timePicker.secondsLabel,\n\tgetOptions: (x: InlineTimePicker) =>\n\t\tgetSecondsOptions(x.secondsStep!, x.value, x.min, x.max),\n\tgetSelectedOptionValue: (x: InlineTimePicker) =>\n\t\tx.value ? parseTimeStr(x.value).secondStr : undefined,\n\tupdatedValue: (x: InlineTimePicker, optionValue: string) => {\n\t\tif (x.value) {\n\t\t\tconst { hourStr, minuteStr } = parseTimeStr(x.value);\n\t\t\treturn `${hourStr}:${minuteStr}:${optionValue}`;\n\t\t} else {\n\t\t\treturn `00:00:${optionValue}`;\n\t\t}\n\t},\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "MeridiesColumn",
+          "type": {
+            "text": "Column"
+          },
+          "default": "{\n\tid: 'meridies',\n\tgetLabel: (x: InlineTimePicker) => x.locale.timePicker.meridiesLabel,\n\tgetOptions: (x: InlineTimePicker) => getMeridiesOptions(x.min, x.max),\n\tgetSelectedOptionValue: (x: InlineTimePicker) =>\n\t\tx.value ? parseTimeStr(x.value).meridiem : undefined,\n\tupdatedValue: (x: InlineTimePicker, optionValue: string) => {\n\t\tif (x.value) {\n\t\t\tconst { hours, minuteStr, secondStr } = parseTimeStr(x.value);\n\t\t\tlet adjustedHours = hours;\n\t\t\tif (optionValue === 'AM' && hours >= 12) {\n\t\t\t\tadjustedHours -= 12;\n\t\t\t} else if (optionValue === 'PM' && hours < 12) {\n\t\t\t\tadjustedHours += 12;\n\t\t\t}\n\t\t\treturn `${formatTimePart(adjustedHours)}:${minuteStr}:${secondStr}`;\n\t\t} else {\n\t\t\tif (optionValue === 'AM') {\n\t\t\t\treturn '00:00:00';\n\t\t\t} else {\n\t\t\t\treturn '12:00:00';\n\t\t\t}\n\t\t}\n\t},\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HoursColumn",
+          "declaration": {
+            "name": "HoursColumn",
+            "module": "libs/components/src/lib/time-picker/inline-time-picker/columns.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MinutesColumn",
+          "declaration": {
+            "name": "MinutesColumn",
+            "module": "libs/components/src/lib/time-picker/inline-time-picker/columns.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SecondsColumn",
+          "declaration": {
+            "name": "SecondsColumn",
+            "module": "libs/components/src/lib/time-picker/inline-time-picker/columns.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MeridiesColumn",
+          "declaration": {
+            "name": "MeridiesColumn",
+            "module": "libs/components/src/lib/time-picker/inline-time-picker/columns.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/time-picker/inline-time-picker/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "registerInlineTimePicker",
+          "description": "Registers the inline-time-picker element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerInlineTimePicker",
+          "declaration": {
+            "name": "registerInlineTimePicker",
+            "module": "libs/components/src/lib/time-picker/inline-time-picker/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/time-picker/inline-time-picker/inline-time-picker.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "InlineTimePicker",
+          "cssProperties": [
+            {
+              "name": "--vvd-time-picker-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-time-picker-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-time-picker-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-time-picker-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-time-picker-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            },
+            {
+              "name": "--vvd-time-picker-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "valueChanged",
+              "parameters": [
+                {
+                  "name": "_",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "minutesStep",
+              "type": {
+                "text": "number"
+              },
+              "default": "1"
+            },
+            {
+              "kind": "field",
+              "name": "secondsStep",
+              "type": {
+                "text": "number | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "clock",
+              "type": {
+                "text": "'12h' | '24h'"
+              },
+              "default": "'24h'"
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "scrollSelectedOptionsToTop"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InlineTimePicker",
+          "declaration": {
+            "name": "InlineTimePicker",
+            "module": "libs/components/src/lib/time-picker/inline-time-picker/inline-time-picker.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/time-picker/time/picker.ts",
@@ -23665,6 +23973,42 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/shared/foundation/utilities/direction.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getDirection",
+          "return": {
+            "type": {
+              "text": "Direction"
+            }
+          },
+          "parameters": [
+            {
+              "name": "rootNode",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "the HTMLElement to begin the query from, usually \"this\" when used in a component controller"
+            }
+          ],
+          "description": "a method to determine the current localization direction of the view",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getDirection",
+          "declaration": {
+            "name": "getDirection",
+            "module": "libs/components/src/shared/foundation/utilities/direction.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/shared/foundation/vivid-element/vivid-element.ts",