@baloise/ds-core 20.0.0-next.6 → 20.0.0-next.7

package/docs/components.json

@@ -2548,16 +2548,16 @@
         {
           "name": "🧩 Component / Badge / Color / Grey / Text",
           "cssVarName": "--ds-badge-color-grey-text",
-          "value": "{🔗 Alias.🔤 Text.Color.GreyDark}",
-          "nativeValue": "#313131",
+          "value": "{🔗 Alias.🔤 Text.Color.Grey}",
+          "nativeValue": "#747474",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-6",
-              "figmaName": "Global / Color / Grey / 6"
+              "cssVar": "--ds-color-grey-5",
+              "figmaName": "Global / Color / Grey / 5"
             },
             {
-              "cssVar": "--ds-text-color-greydark",
-              "figmaName": "Alias / Text / Color / GreyDark"
+              "cssVar": "--ds-text-color-grey",
+              "figmaName": "Alias / Text / Color / Grey"
             },
             {
               "cssVar": "--ds-badge-color-grey-text",
@@ -2575,16 +2575,16 @@
         {
           "name": "🧩 Component / Badge / Color / Grey / Background",
           "cssVarName": "--ds-badge-color-grey-background",
-          "value": "{🔗 Alias.🎨 Background.Color.Grey}",
-          "nativeValue": "#D0D0D0",
+          "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
-              "cssVar": "--ds-background-color-grey",
-              "figmaName": "Alias / Background / Color / Grey"
+              "cssVar": "--ds-background-color-greylight",
+              "figmaName": "Alias / Background / Color / GreyLight"
             },
             {
               "cssVar": "--ds-badge-color-grey-background",
@@ -7918,11 +7918,11 @@
           "name": "🧩 Component / Button / Color / InvertedTertiary / Base / Background",
           "cssVarName": "--ds-button-color-invertedtertiary-base-background",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -7946,11 +7946,11 @@
           "name": "🧩 Component / Button / Color / InvertedTertiary / Base / Border",
           "cssVarName": "--ds-button-color-invertedtertiary-base-border",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -10300,10 +10300,10 @@
         },
         {
           "name": "imageTeaser",
-          "type": "\"\" | \"wide-center\" | \"wide-left\" | \"wide-right\"",
+          "type": "\"\" | \"wide-center\" | \"wide-left\" | \"wide-right\" | undefined",
           "complexType": {
             "original": "CardImageTeaser",
-            "resolved": "\"\" | \"wide-center\" | \"wide-left\" | \"wide-right\"",
+            "resolved": "\"\" | \"wide-center\" | \"wide-left\" | \"wide-right\" | undefined",
             "references": {
               "CardImageTeaser": {
                 "location": "import",
@@ -10320,10 +10320,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "''"
+              "text": "undefined"
             }
           ],
-          "default": "''",
+          "default": "undefined",
           "values": [
             {
               "type": "\"\""
@@ -10339,9 +10339,12 @@
             {
               "value": "wide-right",
               "type": "string"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -10936,11 +10939,11 @@
           "name": "🧩 Component / Card / Color / Base / Outline",
           "cssVarName": "--ds-card-color-base-outline",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -11009,11 +11012,11 @@
           "name": "🧩 Component / Card / Color / White / Outline",
           "cssVarName": "--ds-card-color-white-outline",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -11293,11 +11296,11 @@
           "name": "🧩 Component / Card / Color / GreyLight / Background",
           "cssVarName": "--ds-card-color-greylight-background",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -11366,11 +11369,11 @@
           "name": "🧩 Component / Card / Color / Grey / Background",
           "cssVarName": "--ds-card-color-grey-background",
           "value": "{🔗 Alias.🎨 Background.Color.Grey}",
-          "nativeValue": "#D0D0D0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-background-color-grey",
@@ -13625,6 +13628,31 @@
         }
       ],
       "tokens": [
+        {
+          "name": "🧩 Component / Carousel / Gap",
+          "cssVarName": "--ds-carousel-gap",
+          "value": "{🔗 Alias.↔️ Space.Base.Mobile}",
+          "nativeValue": "16",
+          "inheritance": [
+            {
+              "cssVar": "--ds-size-space-16",
+              "figmaName": "Global / Size / Space / 16"
+            },
+            {
+              "cssVar": "--ds-space-base-mobile",
+              "figmaName": "Alias / Space / Base / Mobile"
+            },
+            {
+              "cssVar": "--ds-carousel-gap",
+              "figmaName": "Component / Carousel / Gap"
+            }
+          ],
+          "path": [
+            "🧩 Component",
+            "Carousel",
+            "Gap"
+          ]
+        },
         {
           "name": "🧩 Component / Carousel / ScrollFadeBg",
           "cssVarName": "--ds-carousel-scrollfadebg",
@@ -13690,11 +13718,11 @@
           "name": "🧩 Component / Carousel / Dot / Color",
           "cssVarName": "--ds-carousel-dot-color",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -14245,6 +14273,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hideTrigger",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-trigger",
+          "reflectToAttr": false,
+          "docs": "If `true` and `tile` is set, the checkbox box is visually hidden. The tile remains fully clickable and keyboard-accessible.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "invalid",
           "type": "boolean",
@@ -14945,11 +15002,11 @@
           "name": "🧩 Component / Checkbox / Tile / Color / Base / Border",
           "cssVarName": "--ds-checkbox-tile-color-base-border",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -15771,6 +15828,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hideTrigger",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-trigger",
+          "reflectToAttr": false,
+          "docs": "If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "invalid",
           "type": "boolean",
@@ -16800,11 +16886,11 @@
           "name": "🧩 Component / Close / Color / Background / Disabled",
           "cssVarName": "--ds-close-color-background-disabled",
           "value": "{🔗 Alias.🎨 Background.Color.Grey}",
-          "nativeValue": "#D0D0D0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-background-color-grey",
@@ -19388,11 +19474,11 @@
           "name": "🧩 Component / Date / Calendar / Color / InnerBorder",
           "cssVarName": "--ds-date-calendar-color-innerborder",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -20496,11 +20582,11 @@
           "name": "🧩 Component / Divider / Color / Base",
           "cssVarName": "--ds-divider-color-base",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -20626,11 +20712,11 @@
           "name": "🧩 Component / Divider / Color / GreyLight",
           "cssVarName": "--ds-divider-color-greylight",
           "value": "{🔗 Alias.▭ Border.Color.GreyLight}",
-          "nativeValue": "#F0F0F0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-1",
-              "figmaName": "Global / Color / Grey / 1"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-border-color-greylight",
@@ -20652,11 +20738,11 @@
           "name": "🧩 Component / Divider / Color / Grey",
           "cssVarName": "--ds-divider-color-grey",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -22515,11 +22601,11 @@
           "name": "🧩 Component / FileUpload / DropZone / Border / Color / Base",
           "cssVarName": "--ds-fileupload-dropzone-border-color-base",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -22911,11 +22997,11 @@
           "name": "🧩 Component / FileUpload / FileList / Background / Color",
           "cssVarName": "--ds-fileupload-filelist-background-color",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -26575,6 +26661,7 @@
         "ds-footer",
         "ds-hint",
         "ds-input",
+        "ds-input-slider",
         "ds-item",
         "ds-navbar",
         "ds-number-input",
@@ -26620,6 +26707,9 @@
         "ds-input": [
           "ds-icon"
         ],
+        "ds-input-slider": [
+          "ds-icon"
+        ],
         "ds-item": [
           "ds-icon"
         ],
@@ -29061,36 +29151,1041 @@
           "setter": false
         },
         {
-          "name": "spellcheck",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "spellcheck",
-          "reflectToAttr": false,
-          "docs": "If `true`, the element will have its spelling and grammar checked.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "false"
-            }
-          ],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "suffix",
+          "name": "spellcheck",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "spellcheck",
+          "reflectToAttr": false,
+          "docs": "If `true`, the element will have its spelling and grammar checked.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "suffix",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "suffix",
+          "reflectToAttr": false,
+          "docs": "Adds a suffix the the input-value after blur.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "type",
+          "type": "\"\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+          "complexType": {
+            "original": "InputInputType",
+            "resolved": "\"\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+            "references": {
+              "InputInputType": {
+                "location": "import",
+                "path": "./input.interfaces",
+                "id": "src/components/input/input.interfaces.ts::InputInputType",
+                "referenceLocation": "InputInputType"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "type",
+          "reflectToAttr": false,
+          "docs": "Defines the type of the input (text, number, email ...).",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'text'"
+            }
+          ],
+          "default": "'text'",
+          "values": [
+            {
+              "type": "\"\""
+            },
+            {
+              "value": "color",
+              "type": "string"
+            },
+            {
+              "value": "date",
+              "type": "string"
+            },
+            {
+              "value": "datetime-local",
+              "type": "string"
+            },
+            {
+              "value": "email",
+              "type": "string"
+            },
+            {
+              "value": "file",
+              "type": "string"
+            },
+            {
+              "value": "image",
+              "type": "string"
+            },
+            {
+              "value": "month",
+              "type": "string"
+            },
+            {
+              "value": "number",
+              "type": "string"
+            },
+            {
+              "value": "password",
+              "type": "string"
+            },
+            {
+              "value": "range",
+              "type": "string"
+            },
+            {
+              "value": "search",
+              "type": "string"
+            },
+            {
+              "value": "tel",
+              "type": "string"
+            },
+            {
+              "value": "text",
+              "type": "string"
+            },
+            {
+              "value": "time",
+              "type": "string"
+            },
+            {
+              "value": "url",
+              "type": "string"
+            },
+            {
+              "value": "week",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "null | string",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "The value of the input.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "null"
+            }
+          ],
+          "default": "null",
+          "values": [
+            {
+              "type": "null"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "getInputElement",
+          "returns": {
+            "type": "Promise<HTMLInputElement>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<HTMLInputElement>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              },
+              "HTMLInputElement": {
+                "location": "global",
+                "id": "global::HTMLInputElement"
+              }
+            },
+            "return": "Promise<HTMLInputElement>"
+          },
+          "signature": "getInputElement() => Promise<HTMLInputElement>",
+          "parameters": [],
+          "docs": "Returns the native `<input>` element used under the hood.",
+          "docsTags": []
+        },
+        {
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "setFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the native `input` in `ds-input`. Use this method instead of the global\n`input.focus()`.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "dsBlur",
+          "detail": "FocusEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputBlurDetail",
+            "resolved": "FocusEvent",
+            "references": {
+              "InputBlurDetail": {
+                "location": "import",
+                "path": "./input.interfaces",
+                "id": "src/components/input/input.interfaces.ts::InputBlurDetail",
+                "referenceLocation": "InputBlurDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when a keyboard input occurred.",
+          "docsTags": []
+        },
+        {
+          "event": "dsChange",
+          "detail": "null | string",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputChangeDetail",
+            "resolved": "null | string",
+            "references": {
+              "InputChangeDetail": {
+                "location": "import",
+                "path": "./input.interfaces",
+                "id": "src/components/input/input.interfaces.ts::InputChangeDetail",
+                "referenceLocation": "InputChangeDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input value has changed.",
+          "docsTags": []
+        },
+        {
+          "event": "dsClick",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputClickDetail",
+            "resolved": "MouseEvent",
+            "references": {
+              "InputClickDetail": {
+                "location": "import",
+                "path": "./input.interfaces",
+                "id": "src/components/input/input.interfaces.ts::InputClickDetail",
+                "referenceLocation": "InputClickDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input has clicked",
+          "docsTags": []
+        },
+        {
+          "event": "dsFocus",
+          "detail": "FocusEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputFocusDetail",
+            "resolved": "FocusEvent",
+            "references": {
+              "InputFocusDetail": {
+                "location": "import",
+                "path": "./input.interfaces",
+                "id": "src/components/input/input.interfaces.ts::InputFocusDetail",
+                "referenceLocation": "InputFocusDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input has focus.",
+          "docsTags": []
+        },
+        {
+          "event": "dsInput",
+          "detail": "null | string",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputInputDetail",
+            "resolved": "null | string",
+            "references": {
+              "InputInputDetail": {
+                "location": "import",
+                "path": "./input.interfaces",
+                "id": "src/components/input/input.interfaces.ts::InputInputDetail",
+                "referenceLocation": "InputInputDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when a keyboard input occurred.",
+          "docsTags": []
+        },
+        {
+          "event": "dsKeyPress",
+          "detail": "KeyboardEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputKeyPressDetail",
+            "resolved": "KeyboardEvent",
+            "references": {
+              "InputKeyPressDetail": {
+                "location": "import",
+                "path": "./input.interfaces",
+                "id": "src/components/input/input.interfaces.ts::InputKeyPressDetail",
+                "referenceLocation": "InputKeyPressDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when a keyboard key has pressed.",
+          "docsTags": []
+        }
+      ],
+      "styles": [
+        {
+          "name": "--input-color",
+          "docs": "Text color inside the input field."
+        },
+        {
+          "name": "--input-placeholder",
+          "docs": "Placeholder text color."
+        },
+        {
+          "name": "--input-family",
+          "docs": "Font family of the input text."
+        },
+        {
+          "name": "--input-weight",
+          "docs": "Font weight of the input text."
+        },
+        {
+          "name": "--input-size",
+          "docs": "Font size of the input text."
+        },
+        {
+          "name": "--input-line-height",
+          "docs": "Line height of the input text."
+        },
+        {
+          "name": "--form-container-background",
+          "docs": "Background color of the input container."
+        },
+        {
+          "name": "--form-container-border-color",
+          "docs": "Border color of the input container."
+        },
+        {
+          "name": "--form-container-border-width",
+          "docs": "Border width of the input container."
+        },
+        {
+          "name": "--form-container-radius",
+          "docs": "Border radius of the input container."
+        },
+        {
+          "name": "--form-container-hover-background",
+          "docs": "Container background color on hover."
+        },
+        {
+          "name": "--form-container-active-background",
+          "docs": "Container background color when active."
+        },
+        {
+          "name": "--form-container-focus-background",
+          "docs": "Container background color when focused."
+        },
+        {
+          "name": "--form-container-hover-border",
+          "docs": "Container border color on hover."
+        },
+        {
+          "name": "--form-container-active-border",
+          "docs": "Container border color when active."
+        },
+        {
+          "name": "--form-container-focus-border",
+          "docs": "Container border color when focused."
+        },
+        {
+          "name": "--form-label-color",
+          "docs": "Text color of the label."
+        },
+        {
+          "name": "--form-label-family",
+          "docs": "Font family of the label."
+        },
+        {
+          "name": "--form-label-weight",
+          "docs": "Font weight of the label."
+        },
+        {
+          "name": "--form-label-size",
+          "docs": "Font size of the label."
+        },
+        {
+          "name": "--form-label-line-height",
+          "docs": "Line height of the label."
+        },
+        {
+          "name": "--form-description-color",
+          "docs": "Text color of the description."
+        },
+        {
+          "name": "--form-description-family",
+          "docs": "Font family of the description."
+        },
+        {
+          "name": "--form-description-weight",
+          "docs": "Font weight of the description."
+        },
+        {
+          "name": "--form-description-size",
+          "docs": "Font size of the description."
+        },
+        {
+          "name": "--form-description-line-height",
+          "docs": "Line height of the description."
+        }
+      ],
+      "slots": [],
+      "parts": [
+        {
+          "name": "input",
+          "docs": "The native HTML input element."
+        },
+        {
+          "name": "prefix",
+          "docs": "The prefix wrapper (if used)."
+        },
+        {
+          "name": "suffix",
+          "docs": "The suffix wrapper (if used)."
+        }
+      ],
+      "customStates": [],
+      "listeners": [
+        {
+          "event": "click",
+          "target": "document",
+          "capture": true,
+          "passive": false
+        },
+        {
+          "event": "reset",
+          "target": "document",
+          "capture": true,
+          "passive": false
+        }
+      ],
+      "pageObject": {
+        "class": "DsInput",
+        "import": "@baloise/ds-playwright",
+        "locators": [
+          {
+            "name": "nativeInput",
+            "type": "Locator",
+            "docs": ""
+          }
+        ],
+        "actions": [
+          {
+            "name": "clear",
+            "params": [],
+            "docs": ""
+          },
+          {
+            "name": "fill",
+            "params": [
+              {
+                "name": "value",
+                "type": "string"
+              }
+            ],
+            "docs": ""
+          },
+          {
+            "name": "blur",
+            "params": [],
+            "docs": ""
+          }
+        ],
+        "assertions": [
+          {
+            "name": "assertValue",
+            "params": [
+              {
+                "name": "value",
+                "type": "string"
+              }
+            ],
+            "docs": ""
+          },
+          {
+            "name": "assertToBeDisabled",
+            "params": [],
+            "docs": ""
+          }
+        ]
+      },
+      "type": "web-component"
+    },
+    {
+      "fileName": "input-slider.tsx",
+      "tag": "ds-input-slider",
+      "overview": "Input slider renders a noUiSlider-backed slider with validation and label/description messaging.",
+      "usage": {},
+      "docs": "Input slider renders a noUiSlider-backed slider with validation and label/description messaging.",
+      "docsTags": [
+        {
+          "name": "part",
+          "text": "slider - The noUiSlider target element."
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [
+        "ds-spinner",
+        "ds-icon"
+      ],
+      "dependencyGraph": {
+        "ds-input-slider": [
+          "ds-spinner",
+          "ds-icon"
+        ]
+      },
+      "props": [
+        {
+          "name": "autoInvalidOff",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "auto-invalid-off",
+          "reflectToAttr": true,
+          "docs": "If `true`, in Angular reactive forms the control will not be set invalid",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "brandColor",
+          "type": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
+          "complexType": {
+            "original": "InputSliderBrandColor",
+            "resolved": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
+            "references": {
+              "InputSliderBrandColor": {
+                "location": "import",
+                "path": "./input-slider.interfaces",
+                "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderBrandColor",
+                "referenceLocation": "InputSliderBrandColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "brand-color",
+          "reflectToAttr": false,
+          "docs": "Recolors the connect (the filled progress track) with a brand color instead of the default\ngrey/primary style. Left of the handle uses the darker `-4` shade, right of it the lighter\n`-2` shade. Empty (default) keeps the current grey/primary look.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "\"\""
+            },
+            {
+              "value": "green",
+              "type": "string"
+            },
+            {
+              "value": "purple",
+              "type": "string"
+            },
+            {
+              "value": "red",
+              "type": "string"
+            },
+            {
+              "value": "yellow",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "color",
+          "type": "\"\" | \"danger\" | \"primary\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "InputColor",
+            "resolved": "\"\" | \"danger\" | \"primary\" | \"success\" | \"warning\"",
+            "references": {
+              "InputColor": {
+                "location": "import",
+                "path": "../input/input.interfaces",
+                "id": "src/components/input/input.interfaces.ts::InputColor",
+                "referenceLocation": "InputColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "Defines the color of the slider. The default value is `primary`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'primary'"
+            }
+          ],
+          "default": "'primary'",
+          "values": [
+            {
+              "type": "\"\""
+            },
+            {
+              "value": "danger",
+              "type": "string"
+            },
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "debounce",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "debounce",
+          "reflectToAttr": false,
+          "docs": "Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "0"
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "description",
+          "reflectToAttr": false,
+          "docs": "The description of the slider, which is displayed below the control.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "invalid",
+          "reflectToAttr": true,
+          "docs": "If `true` the component gets an invalid style.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "invalidText",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "invalid-text",
+          "reflectToAttr": false,
+          "docs": "The text to display when the slider is in an invalid state.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "The label of the slider, which is displayed above the control.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "The maximum value of the slider.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "100"
+            }
+          ],
+          "default": "100",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value of the slider.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "0"
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": true,
+          "docs": "The name of the control, which is submitted with the form data.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "this.inputSliderId"
+            }
+          ],
+          "default": "this.inputSliderId",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "readonly",
+          "reflectToAttr": false,
+          "docs": "If `true` the element can not be mutated. noUiSlider has no native concept of\n`readonly`, so this is treated as equivalent to `disabled`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "required",
+          "reflectToAttr": false,
+          "docs": "If `true`, the user must fill in a value before submitting a form.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "step",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -29098,118 +30193,18 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "suffix",
-          "reflectToAttr": false,
-          "docs": "Adds a suffix the the input-value after blur.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "''"
-            }
-          ],
-          "default": "''",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "type",
-          "type": "\"\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
-          "complexType": {
-            "original": "InputInputType",
-            "resolved": "\"\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
-            "references": {
-              "InputInputType": {
-                "location": "import",
-                "path": "./input.interfaces",
-                "id": "src/components/input/input.interfaces.ts::InputInputType",
-                "referenceLocation": "InputInputType"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "type",
+          "attr": "step",
           "reflectToAttr": false,
-          "docs": "Defines the type of the input (text, number, email ...).",
+          "docs": "The granularity the value must adhere to, as a string so `\"any\"` (free,\ncontinuous dragging with no step snapping) can be expressed alongside\nnumeric step sizes.",
           "docsTags": [
             {
               "name": "default",
-              "text": "'text'"
+              "text": "'1'"
             }
           ],
-          "default": "'text'",
+          "default": "'1'",
           "values": [
             {
-              "type": "\"\""
-            },
-            {
-              "value": "color",
-              "type": "string"
-            },
-            {
-              "value": "date",
-              "type": "string"
-            },
-            {
-              "value": "datetime-local",
-              "type": "string"
-            },
-            {
-              "value": "email",
-              "type": "string"
-            },
-            {
-              "value": "file",
-              "type": "string"
-            },
-            {
-              "value": "image",
-              "type": "string"
-            },
-            {
-              "value": "month",
-              "type": "string"
-            },
-            {
-              "value": "number",
-              "type": "string"
-            },
-            {
-              "value": "password",
-              "type": "string"
-            },
-            {
-              "value": "range",
-              "type": "string"
-            },
-            {
-              "value": "search",
-              "type": "string"
-            },
-            {
-              "value": "tel",
-              "type": "string"
-            },
-            {
-              "value": "text",
-              "type": "string"
-            },
-            {
-              "value": "time",
-              "type": "string"
-            },
-            {
-              "value": "url",
-              "type": "string"
-            },
-            {
-              "value": "week",
               "type": "string"
             }
           ],
@@ -29220,29 +30215,26 @@
         },
         {
           "name": "value",
-          "type": "null | string",
+          "type": "number",
           "complexType": {
-            "original": "string | null",
-            "resolved": "null | string",
+            "original": "number",
+            "resolved": "number",
             "references": {}
           },
           "mutable": true,
           "attr": "value",
           "reflectToAttr": true,
-          "docs": "The value of the input.",
+          "docs": "The value of the slider. Unlike a text input, a slider can never be\nempty; when unset it defaults to `min`. Internally starts as `NaN` (this\ncodebase's established \"empty number\" sentinel, see `isValueEmpty`) until\n`connectedCallback` resolves it — never actually rendered or emitted.",
           "docsTags": [
             {
               "name": "default",
-              "text": "null"
+              "text": "NaN"
             }
           ],
-          "default": "null",
+          "default": "NaN",
           "values": [
             {
-              "type": "null"
-            },
-            {
-              "type": "string"
+              "type": "number"
             }
           ],
           "optional": false,
@@ -29255,27 +30247,27 @@
         {
           "name": "getInputElement",
           "returns": {
-            "type": "Promise<HTMLInputElement>",
+            "type": "Promise<HTMLElement | undefined>",
             "docs": ""
           },
           "complexType": {
-            "signature": "() => Promise<HTMLInputElement>",
+            "signature": "() => Promise<HTMLElement | undefined>",
             "parameters": [],
             "references": {
               "Promise": {
                 "location": "global",
                 "id": "global::Promise"
               },
-              "HTMLInputElement": {
+              "HTMLElement": {
                 "location": "global",
-                "id": "global::HTMLInputElement"
+                "id": "global::HTMLElement"
               }
             },
-            "return": "Promise<HTMLInputElement>"
+            "return": "Promise<HTMLElement | undefined>"
           },
-          "signature": "getInputElement() => Promise<HTMLInputElement>",
+          "signature": "getInputElement() => Promise<HTMLElement | undefined>",
           "parameters": [],
-          "docs": "Returns the native `<input>` element used under the hood.",
+          "docs": "Returns the noUiSlider handle element used under the hood.",
           "docsTags": []
         },
         {
@@ -29297,7 +30289,7 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the native `input` in `ds-input`. Use this method instead of the global\n`input.focus()`.",
+          "docs": "Sets focus on `ds-input-slider`'s slider handle. Use this method instead of the global\n`element.focus()`.",
           "docsTags": []
         }
       ],
@@ -29307,41 +30299,41 @@
           "detail": "FocusEvent",
           "bubbles": true,
           "complexType": {
-            "original": "InputBlurDetail",
+            "original": "InputSliderBlurDetail",
             "resolved": "FocusEvent",
             "references": {
-              "InputBlurDetail": {
+              "InputSliderBlurDetail": {
                 "location": "import",
-                "path": "./input.interfaces",
-                "id": "src/components/input/input.interfaces.ts::InputBlurDetail",
-                "referenceLocation": "InputBlurDetail"
+                "path": "./input-slider.interfaces",
+                "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderBlurDetail",
+                "referenceLocation": "InputSliderBlurDetail"
               }
             }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.",
+          "docs": "Emitted when the input loses focus.",
           "docsTags": []
         },
         {
           "event": "dsChange",
-          "detail": "null | string",
+          "detail": "number",
           "bubbles": true,
           "complexType": {
-            "original": "InputChangeDetail",
-            "resolved": "null | string",
+            "original": "InputSliderChangeDetail",
+            "resolved": "number",
             "references": {
-              "InputChangeDetail": {
+              "InputSliderChangeDetail": {
                 "location": "import",
-                "path": "./input.interfaces",
-                "id": "src/components/input/input.interfaces.ts::InputChangeDetail",
-                "referenceLocation": "InputChangeDetail"
+                "path": "./input-slider.interfaces",
+                "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderChangeDetail",
+                "referenceLocation": "InputSliderChangeDetail"
               }
             }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input value has changed.",
+          "docs": "Emitted when the value is committed (noUiSlider `change`, not `blur` — see\nADR-0006/ADR-0007). Fires once per discrete drag/step, independent of focus.",
           "docsTags": []
         },
         {
@@ -29349,20 +30341,20 @@
           "detail": "MouseEvent",
           "bubbles": true,
           "complexType": {
-            "original": "InputClickDetail",
+            "original": "InputSliderClickDetail",
             "resolved": "MouseEvent",
             "references": {
-              "InputClickDetail": {
+              "InputSliderClickDetail": {
                 "location": "import",
-                "path": "./input.interfaces",
-                "id": "src/components/input/input.interfaces.ts::InputClickDetail",
-                "referenceLocation": "InputClickDetail"
+                "path": "./input-slider.interfaces",
+                "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderClickDetail",
+                "referenceLocation": "InputSliderClickDetail"
               }
             }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input has clicked",
+          "docs": "Emitted when the input is clicked.",
           "docsTags": []
         },
         {
@@ -29370,14 +30362,14 @@
           "detail": "FocusEvent",
           "bubbles": true,
           "complexType": {
-            "original": "InputFocusDetail",
+            "original": "InputSliderFocusDetail",
             "resolved": "FocusEvent",
             "references": {
-              "InputFocusDetail": {
+              "InputSliderFocusDetail": {
                 "location": "import",
-                "path": "./input.interfaces",
-                "id": "src/components/input/input.interfaces.ts::InputFocusDetail",
-                "referenceLocation": "InputFocusDetail"
+                "path": "./input-slider.interfaces",
+                "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderFocusDetail",
+                "referenceLocation": "InputSliderFocusDetail"
               }
             }
           },
@@ -29388,111 +30380,58 @@
         },
         {
           "event": "dsInput",
-          "detail": "null | string",
-          "bubbles": true,
-          "complexType": {
-            "original": "InputInputDetail",
-            "resolved": "null | string",
-            "references": {
-              "InputInputDetail": {
-                "location": "import",
-                "path": "./input.interfaces",
-                "id": "src/components/input/input.interfaces.ts::InputInputDetail",
-                "referenceLocation": "InputInputDetail"
-              }
-            }
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when a keyboard input occurred.",
-          "docsTags": []
-        },
-        {
-          "event": "dsKeyPress",
-          "detail": "KeyboardEvent",
+          "detail": "number",
           "bubbles": true,
           "complexType": {
-            "original": "InputKeyPressDetail",
-            "resolved": "KeyboardEvent",
+            "original": "InputSliderInputDetail",
+            "resolved": "number",
             "references": {
-              "InputKeyPressDetail": {
+              "InputSliderInputDetail": {
                 "location": "import",
-                "path": "./input.interfaces",
-                "id": "src/components/input/input.interfaces.ts::InputKeyPressDetail",
-                "referenceLocation": "InputKeyPressDetail"
+                "path": "./input-slider.interfaces",
+                "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderInputDetail",
+                "referenceLocation": "InputSliderInputDetail"
               }
             }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard key has pressed.",
+          "docs": "Emitted on each keyboard/pointer movement, before the value is committed.",
           "docsTags": []
         }
       ],
       "styles": [
         {
-          "name": "--input-color",
-          "docs": "Text color inside the input field."
+          "name": "--input-slider-track-height",
+          "docs": "Height of the slider track."
         },
         {
-          "name": "--input-placeholder",
-          "docs": "Placeholder text color."
+          "name": "--input-slider-track-radius",
+          "docs": "Border radius of the slider track."
         },
         {
-          "name": "--input-family",
-          "docs": "Font family of the input text."
-        },
-        {
-          "name": "--input-weight",
-          "docs": "Font weight of the input text."
+          "name": "--input-slider-track-color",
+          "docs": "Background color of the inactive (unfilled) track."
         },
         {
-          "name": "--input-size",
-          "docs": "Font size of the input text."
-        },
-        {
-          "name": "--input-line-height",
-          "docs": "Line height of the input text."
+          "name": "--input-slider-connect-color",
+          "docs": "Background color of the active (filled) track segment."
         },
         {
-          "name": "--form-container-background",
-          "docs": "Background color of the input container."
+          "name": "--input-slider-thumb-size",
+          "docs": "Diameter of the slider thumb/handle."
         },
         {
-          "name": "--form-container-border-color",
-          "docs": "Border color of the input container."
+          "name": "--input-slider-thumb-color",
+          "docs": "Background color of the thumb."
         },
         {
-          "name": "--form-container-border-width",
-          "docs": "Border width of the input container."
+          "name": "--input-slider-thumb-hover-color",
+          "docs": "Thumb color on hover."
         },
         {
-          "name": "--form-container-radius",
-          "docs": "Border radius of the input container."
-        },
-        {
-          "name": "--form-container-hover-background",
-          "docs": "Container background color on hover."
-        },
-        {
-          "name": "--form-container-active-background",
-          "docs": "Container background color when active."
-        },
-        {
-          "name": "--form-container-focus-background",
-          "docs": "Container background color when focused."
-        },
-        {
-          "name": "--form-container-hover-border",
-          "docs": "Container border color on hover."
-        },
-        {
-          "name": "--form-container-active-border",
-          "docs": "Container border color when active."
-        },
-        {
-          "name": "--form-container-focus-border",
-          "docs": "Container border color when focused."
+          "name": "--input-slider-thumb-active-color",
+          "docs": "Thumb color while dragging/pressed."
         },
         {
           "name": "--form-label-color",
@@ -29538,16 +30477,8 @@
       "slots": [],
       "parts": [
         {
-          "name": "input",
-          "docs": "The native HTML input element."
-        },
-        {
-          "name": "prefix",
-          "docs": "The prefix wrapper (if used)."
-        },
-        {
-          "name": "suffix",
-          "docs": "The suffix wrapper (if used)."
+          "name": "slider",
+          "docs": "The noUiSlider target element."
         }
       ],
       "customStates": [],
@@ -29566,21 +30497,21 @@
         }
       ],
       "pageObject": {
-        "class": "DsInput",
+        "class": "DsInputSlider",
         "import": "@baloise/ds-playwright",
         "locators": [
           {
-            "name": "nativeInput",
+            "name": "slider",
+            "type": "Locator",
+            "docs": ""
+          },
+          {
+            "name": "handle",
             "type": "Locator",
             "docs": ""
           }
         ],
         "actions": [
-          {
-            "name": "clear",
-            "params": [],
-            "docs": ""
-          },
           {
             "name": "fill",
             "params": [
@@ -29589,7 +30520,7 @@
                 "type": "string"
               }
             ],
-            "docs": ""
+            "docs": "Sets the value the way a \"one-shot\" user commit would: drives noUiSlider's own .set() API directly, which fires a single update + set (see input-slider.picker.ts). Waits out a macrotask tick in-browser so `dsChange`'s debounced (setTimeout(0)) emit has actually run before this resolves — a raw evaluate() round-trip can otherwise return before it fires."
           },
           {
             "name": "blur",
@@ -32166,11 +33097,11 @@
           "name": "🧩 Component / List / Item / Border / Color",
           "cssVarName": "--ds-list-item-border-color",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -34762,11 +35693,11 @@
           "name": "🧩 Component / Navbar / Base / Sidebar / Item / Divider / Color",
           "cssVarName": "--ds-navbar-base-sidebar-item-divider-color",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -36517,11 +37448,11 @@
           "name": "🧩 Component / Notification / Color / Base / Background",
           "cssVarName": "--ds-notification-color-base-background",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -36544,11 +37475,11 @@
           "name": "🧩 Component / Notification / Color / Base / Border",
           "cssVarName": "--ds-notification-color-base-border",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -39133,11 +40064,11 @@
           "name": "🧩 Component / Pagination / Dots / Background",
           "cssVarName": "--ds-pagination-dots-background",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -40543,11 +41474,11 @@
           "name": "🧩 Component / ProgressBar / Background / Dark",
           "cssVarName": "--ds-progressbar-background-dark",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -40921,6 +41852,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hideTrigger",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-trigger",
+          "reflectToAttr": false,
+          "docs": "If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "invalid",
           "type": "boolean",
@@ -41631,11 +42591,11 @@
           "name": "🧩 Component / Radio / Tile / Color / Base / Border",
           "cssVarName": "--ds-radio-tile-color-base-border",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -42452,6 +43412,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hideTrigger",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-trigger",
+          "reflectToAttr": false,
+          "docs": "If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "invalid",
           "type": "boolean",
@@ -43640,11 +44629,11 @@
           "name": "🧩 Component / Segment / Background",
           "cssVarName": "--ds-segment-background",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -43715,11 +44704,11 @@
           "name": "🧩 Component / Segment / Divider / Color",
           "cssVarName": "--ds-segment-divider-color",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -45485,11 +46474,11 @@
           "name": "🧩 Component / Select / Container / Color / Base / Border",
           "cssVarName": "--ds-select-container-color-base-border",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -45541,11 +46530,11 @@
           "name": "🧩 Component / Select / Container / Color / Hover / Border",
           "cssVarName": "--ds-select-container-color-hover-border",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -46790,11 +47779,11 @@
           "name": "🧩 Component / Select / Chip / Color / Base / Background",
           "cssVarName": "--ds-select-chip-color-base-background",
           "value": "{🔗 Alias.🎨 Background.Color.Grey}",
-          "nativeValue": "#D0D0D0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-background-color-grey",
@@ -47032,11 +48021,11 @@
           "name": "🧩 Component / Select / Color / Border / Base",
           "cssVarName": "--ds-select-color-border-base",
           "value": "{🔗 Alias.▭ Border.Color.GreyLight}",
-          "nativeValue": "#F0F0F0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-1",
-              "figmaName": "Global / Color / Grey / 1"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-border-color-greylight",
@@ -47360,11 +48349,11 @@
           "name": "🧩 Component / Select / Option / Color / Border / Base",
           "cssVarName": "--ds-select-option-color-border-base",
           "value": "{🔗 Alias.▭ Border.Color.GreyLight}",
-          "nativeValue": "#F0F0F0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-1",
-              "figmaName": "Global / Color / Grey / 1"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-border-color-greylight",
@@ -47609,11 +48598,11 @@
           "name": "🧩 Component / Select / Optgroup / Color / Background / Base",
           "cssVarName": "--ds-select-optgroup-color-background-base",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -49179,11 +50168,11 @@
           "name": "🧩 Component / Snackbar / Default / Color / Bg / Base",
           "cssVarName": "--ds-snackbar-default-color-bg-base",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -49207,11 +50196,11 @@
           "name": "🧩 Component / Snackbar / Default / Color / Border / Base",
           "cssVarName": "--ds-snackbar-default-color-border-base",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -49922,6 +50911,7 @@
         "ds-date",
         "ds-file-upload",
         "ds-input",
+        "ds-input-slider",
         "ds-number-input",
         "ds-radio-group",
         "ds-segment",
@@ -49945,6 +50935,9 @@
         "ds-input": [
           "ds-spinner"
         ],
+        "ds-input-slider": [
+          "ds-spinner"
+        ],
         "ds-number-input": [
           "ds-spinner"
         ],
@@ -50369,11 +51362,11 @@
           "name": "🧩 Component / Spinner / Circle / Color / Background",
           "cssVarName": "--ds-spinner-circle-color-background",
           "value": "{🔗 Alias.🎨 Background.Color.Grey}",
-          "nativeValue": "#D0D0D0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-background-color-grey",
@@ -52014,11 +53007,11 @@
           "name": "🧩 Component / Steps / Connector / Color",
           "cssVarName": "--ds-steps-connector-color",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -52128,11 +53121,11 @@
           "name": "🧩 Component / Steps / Circle / Color / BG",
           "cssVarName": "--ds-steps-circle-color-bg",
           "value": "{🔗 Alias.🎨 Background.Color.Grey}",
-          "nativeValue": "#D0D0D0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-background-color-grey",
@@ -52236,11 +53229,11 @@
           "name": "🧩 Component / Steps / Circle / Color / BGDisabled",
           "cssVarName": "--ds-steps-circle-color-bgdisabled",
           "value": "{🔗 Alias.🎨 Background.Color.Grey}",
-          "nativeValue": "#D0D0D0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-background-color-grey",
@@ -53408,11 +54401,11 @@
           "name": "🧩 Component / Tabs / Border / Color",
           "cssVarName": "--ds-tabs-border-color",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -55007,11 +56000,11 @@
           "name": "🧩 Component / Tag / Grey / Color / Bg / Base",
           "cssVarName": "--ds-tag-grey-color-bg-base",
           "value": "{🔗 Alias.🎨 Background.Color.GreyDark}",
-          "nativeValue": "#B6B6B6",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-4",
-              "figmaName": "Global / Color / Grey / 4"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-background-color-greydark",
@@ -55943,11 +56936,11 @@
           "name": "🧩 Component / Tag / Default / Color / Bg / Base",
           "cssVarName": "--ds-tag-default-color-bg-base",
           "value": "{🔗 Alias.🎨 Background.Color.Grey}",
-          "nativeValue": "#D0D0D0",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
               "cssVar": "--ds-background-color-grey",
@@ -58552,11 +59545,11 @@
           "name": "🧩 Component / Toast / Default / Color / Bg / Base",
           "cssVarName": "--ds-toast-default-color-bg-base",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -58580,11 +59573,11 @@
           "name": "🧩 Component / Toast / Default / Color / Border / Base",
           "cssVarName": "--ds-toast-default-color-border-base",
           "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
               "cssVar": "--ds-background-color-greylight",
@@ -60665,11 +61658,11 @@
           "name": "🧩 Component / Form / Container / Color / Base / Border",
           "cssVarName": "--ds-form-container-color-base-border",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -60721,11 +61714,11 @@
           "name": "🧩 Component / Form / Container / Color / Hover / Border",
           "cssVarName": "--ds-form-container-color-hover-border",
           "value": "{🔗 Alias.▭ Border.Color.Grey}",
-          "nativeValue": "#E0E0E0",
+          "nativeValue": "#D0D0D0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-2",
-              "figmaName": "Global / Color / Grey / 2"
+              "cssVar": "--ds-color-grey-3",
+              "figmaName": "Global / Color / Grey / 3"
             },
             {
               "cssVar": "--ds-border-color-grey",
@@ -62720,16 +63713,16 @@
         {
           "name": "🧩 Component / Table / Cell / Border / Color",
           "cssVarName": "--ds-table-cell-border-color",
-          "value": "{🔗 Alias.▭ Border.Color.Base}",
-          "nativeValue": "#D0D0D0",
+          "value": "{🔗 Alias.▭ Border.Color.GreyLight}",
+          "nativeValue": "#E0E0E0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-3",
-              "figmaName": "Global / Color / Grey / 3"
+              "cssVar": "--ds-color-grey-2",
+              "figmaName": "Global / Color / Grey / 2"
             },
             {
-              "cssVar": "--ds-border-color-base",
-              "figmaName": "Alias / Border / Color / Base"
+              "cssVar": "--ds-border-color-greylight",
+              "figmaName": "Alias / Border / Color / GreyLight"
             },
             {
               "cssVar": "--ds-table-cell-border-color",
@@ -63023,16 +64016,16 @@
         {
           "name": "🧩 Component / Table / Row / Background / Color / Hover",
           "cssVarName": "--ds-table-row-background-color-hover",
-          "value": "{🔗 Alias.🎨 Background.Color.Hover}",
-          "nativeValue": "#FAFAFA",
+          "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-0",
-              "figmaName": "Global / Color / Grey / 0"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
-              "cssVar": "--ds-background-color-hover",
-              "figmaName": "Alias / Background / Color / Hover"
+              "cssVar": "--ds-background-color-greylight",
+              "figmaName": "Alias / Background / Color / GreyLight"
             },
             {
               "cssVar": "--ds-table-row-background-color-hover",
@@ -63051,16 +64044,16 @@
         {
           "name": "🧩 Component / Table / Row / Background / Color / Active",
           "cssVarName": "--ds-table-row-background-color-active",
-          "value": "{🔗 Alias.🎨 Background.Color.Selected}",
-          "nativeValue": "#B3B6D4",
+          "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-primary-2",
-              "figmaName": "Global / Color / Primary / 2"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
-              "cssVar": "--ds-background-color-selected",
-              "figmaName": "Alias / Background / Color / Selected"
+              "cssVar": "--ds-background-color-greylight",
+              "figmaName": "Alias / Background / Color / GreyLight"
             },
             {
               "cssVar": "--ds-table-row-background-color-active",
@@ -63106,16 +64099,16 @@
         {
           "name": "🧩 Component / Table / Striped / Row / Even / Background / Color / Base",
           "cssVarName": "--ds-table-striped-row-even-background-color-base",
-          "value": "{🔗 Alias.🎨 Background.Color.Highlight}",
-          "nativeValue": "#E5E7F0",
+          "value": "{🔗 Alias.🎨 Background.Color.GreyLighter}",
+          "nativeValue": "#FAFAFA",
           "inheritance": [
             {
-              "cssVar": "--ds-color-primary-1",
-              "figmaName": "Global / Color / Primary / 1"
+              "cssVar": "--ds-color-grey-0",
+              "figmaName": "Global / Color / Grey / 0"
             },
             {
-              "cssVar": "--ds-background-color-highlight",
-              "figmaName": "Alias / Background / Color / Highlight"
+              "cssVar": "--ds-background-color-greylighter",
+              "figmaName": "Alias / Background / Color / GreyLighter"
             },
             {
               "cssVar": "--ds-table-striped-row-even-background-color-base",
@@ -63136,16 +64129,16 @@
         {
           "name": "🧩 Component / Table / Striped / Row / Even / Background / Color / Hover",
           "cssVarName": "--ds-table-striped-row-even-background-color-hover",
-          "value": "{🔗 Alias.🎨 Background.Color.Hover}",
-          "nativeValue": "#FAFAFA",
+          "value": "{🔗 Alias.🎨 Background.Color.GreyLight}",
+          "nativeValue": "#F0F0F0",
           "inheritance": [
             {
-              "cssVar": "--ds-color-grey-0",
-              "figmaName": "Global / Color / Grey / 0"
+              "cssVar": "--ds-color-grey-1",
+              "figmaName": "Global / Color / Grey / 1"
             },
             {
-              "cssVar": "--ds-background-color-hover",
-              "figmaName": "Alias / Background / Color / Hover"
+              "cssVar": "--ds-background-color-greylight",
+              "figmaName": "Alias / Background / Color / GreyLight"
             },
             {
               "cssVar": "--ds-table-striped-row-even-background-color-hover",
@@ -63709,6 +64702,36 @@
       "docstring": "",
       "path": "src/components/input/input.interfaces.ts"
     },
+    "src/components/input-slider/input-slider.interfaces.ts::InputSliderBrandColor": {
+      "declaration": "\"\" | \"red\" | \"yellow\" | \"green\" | \"purple\"",
+      "docstring": "",
+      "path": "src/components/input-slider/input-slider.interfaces.ts"
+    },
+    "src/components/input-slider/input-slider.interfaces.ts::InputSliderInputDetail": {
+      "declaration": "number",
+      "docstring": "",
+      "path": "src/components/input-slider/input-slider.interfaces.ts"
+    },
+    "src/components/input-slider/input-slider.interfaces.ts::InputSliderFocusDetail": {
+      "declaration": "interface FocusEvent extends UIEvent {\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/FocusEvent/relatedTarget) */\n    readonly relatedTarget: EventTarget | null;\n}",
+      "docstring": "Focus-related events like focus, blur, focusin, or focusout.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/FocusEvent)",
+      "path": "src/components/input-slider/input-slider.interfaces.ts"
+    },
+    "src/components/input-slider/input-slider.interfaces.ts::InputSliderBlurDetail": {
+      "declaration": "interface FocusEvent extends UIEvent {\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/FocusEvent/relatedTarget) */\n    readonly relatedTarget: EventTarget | null;\n}",
+      "docstring": "Focus-related events like focus, blur, focusin, or focusout.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/FocusEvent)",
+      "path": "src/components/input-slider/input-slider.interfaces.ts"
+    },
+    "src/components/input-slider/input-slider.interfaces.ts::InputSliderClickDetail": {
+      "declaration": "interface MouseEvent extends UIEvent {\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/altKey) */\n    readonly altKey: boolean;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/button) */\n    readonly button: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/buttons) */\n    readonly buttons: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/clientX) */\n    readonly clientX: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/clientY) */\n    readonly clientY: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/ctrlKey) */\n    readonly ctrlKey: boolean;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/layerX) */\n    readonly layerX: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/layerY) */\n    readonly layerY: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/metaKey) */\n    readonly metaKey: boolean;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/movementX) */\n    readonly movementX: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/movementY) */\n    readonly movementY: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/offsetX) */\n    readonly offsetX: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/offsetY) */\n    readonly offsetY: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/pageX) */\n    readonly pageX: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/pageY) */\n    readonly pageY: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/relatedTarget) */\n    readonly relatedTarget: EventTarget | null;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/screenX) */\n    readonly screenX: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/screenY) */\n    readonly screenY: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/shiftKey) */\n    readonly shiftKey: boolean;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/x) */\n    readonly x: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/y) */\n    readonly y: number;\n    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/getModifierState) */\n    getModifierState(keyArg: string): boolean;\n    /**\n     * @deprecated\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/initMouseEvent)\n     */\n    initMouseEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, viewArg: Window, detailArg: number, screenXArg: number, screenYArg: number, clientXArg: number, clientYArg: number, ctrlKeyArg: boolean, altKeyArg: boolean, shiftKeyArg: boolean, metaKeyArg: boolean, buttonArg: number, relatedTargetArg: EventTarget | null): void;\n}",
+      "docstring": "Events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent)",
+      "path": "src/components/input-slider/input-slider.interfaces.ts"
+    },
+    "src/components/input-slider/input-slider.interfaces.ts::InputSliderChangeDetail": {
+      "declaration": "number",
+      "docstring": "",
+      "path": "src/components/input-slider/input-slider.interfaces.ts"
+    },
     "src/components/label/label.interfaces.ts::LabelSize": {
       "declaration": "\"\" | \"sm\" | \"lg\" | \"xl\" | \"small\" | \"large\" | \"x-large\" | \"xx-large\" | \"xxx-large\" | \"2xl\" | \"3xl\"",
       "docstring": "",