@solid-design-system/components 4.6.17 → 4.7.0

package/dist/custom-elements.json

@@ -152,6 +152,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -340,6 +368,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -616,6 +672,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -1056,6 +1140,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -1496,6 +1608,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -1697,6 +1837,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -2127,6 +2295,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -2455,6 +2651,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -2525,227 +2749,277 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
+      "path": "components/carousel/autoplay-controller.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "SdCheckbox",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The square container that wraps the checkbox's checked state.",
-              "name": "control"
-            },
-            {
-              "description": "Matches the control part when the checkbox is checked.",
-              "name": "control--checked"
-            },
-            {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
-            },
-            {
-              "description": "The checked icon, an `<sd-icon>` element.",
-              "name": "checked-icon"
-            },
-            {
-              "description": "The indeterminate icon, an `<sd-icon>` element.",
-              "name": "indeterminate-icon"
-            },
-            {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The checkbox's label.",
-              "name": ""
-            }
-          ],
+          "description": "A controller that repeatedly calls the specified callback with the provided interval time.\nThe timer is automatically paused while the user is interacting with the component.",
+          "name": "AutoplayController",
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "paused",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "attribute": "title",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "stopped",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "name",
-              "reflects": true
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "value"
+              "name": "pause"
             },
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox's size.",
-              "attribute": "size",
-              "reflects": true
+              "name": "resume"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AutoplayController",
+          "declaration": {
+            "name": "AutoplayController",
+            "module": "components/carousel/autoplay-controller.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/carousel/carousel.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdCarousel",
+          "cssProperties": [
+            {
+              "description": "The space between each slide.",
+              "name": "--slide-gap"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
+              "name": "--scroll-hint"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The carousel's internal wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The scroll container that wraps the slides.",
+              "name": "scroll-container"
+            },
+            {
+              "description": "A wrapper for the navigation and autoplay controller buttons.",
+              "name": "controls"
+            },
+            {
+              "description": "The pagination indicator in dot format.",
+              "name": "pagination-dot"
+            },
+            {
+              "description": "The pagination indicator in number format.",
+              "name": "pagination-number"
+            },
+            {
+              "description": "The pagination indicator.",
+              "name": "pagination-item"
+            },
+            {
+              "description": "Applied when the item is active.",
+              "name": "pagination-item--active"
+            },
+            {
+              "description": "The navigation wrapper.",
+              "name": "navigation"
+            },
+            {
+              "description": "The navigation button.",
+              "name": "navigation-button"
+            },
+            {
+              "description": "Applied to the previous button.",
+              "name": "navigation-button--previous"
+            },
+            {
+              "description": "Applied to the next button.",
+              "name": "navigation-button--next"
+            },
+            {
+              "description": "A wrapper for pause/start button.",
+              "name": "autoplay-controls"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The carousel's main content, one or more `<sd-carousel-item>` elements.",
+              "name": ""
+            },
+            {
+              "description": "Optional next icon to use instead of the default. Works best with `<sd-icon>`.",
+              "name": "next-icon"
+            },
+            {
+              "description": "Optional previous icon to use instead of the default. Works best with `<sd-icon>`.",
+              "name": "previous-icon"
+            },
+            {
+              "description": "Optional start icon to use instead of the default. Works best with `<sd-icon>`.",
+              "name": "autoplay-start"
             },
+            {
+              "description": "Optional pause icon to use instead of the default. Works best with `<sd-icon>`.",
+              "name": "autoplay-pause"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "visuallyDisabled",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "'dot' | 'number'"
               },
-              "default": "false",
-              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
+              "default": "'number'",
+              "description": "Determines the counting system for the carousel.",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "attribute": "checked",
+              "description": "Inverts the carousel",
+              "attribute": "inverted",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "loop",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "attribute": "indeterminate",
+              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
+              "attribute": "loop",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultChecked",
+              "name": "autoplay",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
+              "attribute": "autoplay",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "slidesPerPage",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
+              "default": "1",
+              "description": "Specifies how many slides should be shown at a given time.",
+              "attribute": "slides-per-page",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "slidesPerMove",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "attribute": "required",
+              "default": "1",
+              "description": "Use `slides-per-move` to set how many slides the carousel advances when scrolling. This is useful when specifying a `slides-per-page` greater than one. By setting `slides-per-move` to the same value as `slides-per-page`, the carousel will advance by one page at a time.<br>\n<b>Note:</b><br>\n<li> The number of slides should be divisible by the number of `slides-per-page` to maintain consistent scroll behavior.</li>\n<li>Variations between `slides-per-move` and `slides-per-page` can lead to unexpected scrolling behavior. Keep your intended UX in mind when adjusting these values.</li>",
+              "attribute": "slides-per-move",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the checkbox."
+              "name": "pause",
+              "privacy": "public",
+              "description": "Pause the autoplay."
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "resume",
+              "privacy": "public",
+              "description": "Resume the autoplay"
+            },
+            {
+              "kind": "method",
+              "name": "previous",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "behavior",
+                  "default": "'smooth'",
                   "type": {
-                    "text": "FocusOptions"
-                  }
+                    "text": "ScrollBehavior"
+                  },
+                  "description": "The behavior used for scrolling."
                 }
               ],
-              "description": "Sets focus on the checkbox."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the checkbox."
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns true when valid and false when invalid."
+              "description": "Move the carousel backward by `slides-per-move` slides."
             },
             {
               "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
+              "name": "next",
+              "parameters": [
+                {
+                  "name": "behavior",
+                  "default": "'smooth'",
+                  "type": {
+                    "text": "ScrollBehavior"
+                  },
+                  "description": "The behavior used for scrolling."
                 }
-              },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows a validation message if the control is invalid."
+              ],
+              "description": "Move the carousel forward by `slides-per-move` slides."
             },
             {
               "kind": "method",
-              "name": "setCustomValidity",
+              "name": "goToSlide",
               "parameters": [
                 {
-                  "name": "message",
+                  "name": "index",
                   "type": {
-                    "text": "string"
-                  }
+                    "text": "number"
+                  },
+                  "description": "The slide index."
+                },
+                {
+                  "name": "behavior",
+                  "default": "'smooth'",
+                  "type": {
+                    "text": "ScrollBehavior"
+                  },
+                  "description": "The behavior used for scrolling."
                 }
               ],
-              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
+              "description": "Scrolls the carousel to the slide specified by `index`."
             },
             {
               "kind": "field",
@@ -2796,114 +3070,99 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the checkbox loses focus.",
-              "name": "sd-blur"
-            },
-            {
-              "description": "Emitted when the checked state changes.",
-              "name": "sd-change"
             },
             {
-              "description": "Emitted when the checkbox gains focus.",
-              "name": "sd-focus"
-            },
-            {
-              "description": "Emitted when the checkbox receives input.",
-              "name": "sd-input"
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "title"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "fieldName": "value"
-            },
+          "events": [
             {
-              "name": "size",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "{ index: number, slide: SdCarouselItem }"
               },
-              "default": "'lg'",
-              "description": "The checkbox's size.",
-              "fieldName": "size"
-            },
+              "description": "Emitted when the active slide changes.",
+              "name": "sd-slide-change"
+            }
+          ],
+          "attributes": [
             {
-              "name": "disabled",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "'dot' | 'number'"
               },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "fieldName": "disabled"
+              "default": "'number'",
+              "description": "Determines the counting system for the carousel.",
+              "fieldName": "variant"
             },
             {
-              "name": "visually-disabled",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
-              "fieldName": "visuallyDisabled"
+              "description": "Inverts the carousel",
+              "fieldName": "inverted"
             },
             {
-              "name": "checked",
+              "name": "loop",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "fieldName": "checked"
+              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
+              "fieldName": "loop"
             },
             {
-              "name": "indeterminate",
+              "name": "autoplay",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "fieldName": "indeterminate"
+              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
+              "fieldName": "autoplay"
             },
             {
-              "name": "form",
+              "name": "slides-per-page",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
+              "default": "1",
+              "description": "Specifies how many slides should be shown at a given time.",
+              "fieldName": "slidesPerPage"
             },
             {
-              "name": "required",
+              "name": "slides-per-move",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "fieldName": "required"
+              "default": "1",
+              "description": "Use `slides-per-move` to set how many slides the carousel advances when scrolling. This is useful when specifying a `slides-per-page` greater than one. By setting `slides-per-move` to the same value as `slides-per-page`, the carousel will advance by one page at a time.<br>\n<b>Note:</b><br>\n<li> The number of slides should be divisible by the number of `slides-per-page` to maintain consistent scroll behavior.</li>\n<li>Variations between `slides-per-move` and `slides-per-page` can lead to unexpected scrolling behavior. Keep your intended UX in mind when adjusting these values.</li>",
+              "fieldName": "slidesPerMove"
             },
             {
               "name": "dir",
@@ -2932,16 +3191,15 @@
           ],
           "superclass": {
             "name": "SolidElement",
-            "module": "/src/internal/solid-element"
+            "module": "/src/internal/solid-element.js"
           },
-          "summary": "Checkboxes allow the user to toggle an option on or off.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox",
+          "summary": "Carousels display an arbitrary number of content slides along a horizontal axis.",
+          "since": "1.18.0",
           "status": "stable",
-          "since": "1.22.0",
           "dependencies": [
             "sd-icon"
           ],
-          "tagName": "sd-checkbox",
+          "tagName": "sd-carousel",
           "customElement": true
         }
       ],
@@ -2950,16 +3208,87 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "SdCarousel",
+            "module": "components/carousel/carousel.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-checkbox",
+          "name": "sd-carousel",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "SdCarousel",
+            "module": "components/carousel/carousel.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/carousel/scroll-controller.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A controller for handling scrolling and mouse dragging.",
+          "name": "ScrollController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "dragging",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "scrolling",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "mouseDragging",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "handleScroll"
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerDown"
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerMove"
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerUp"
+            },
+            {
+              "kind": "field",
+              "name": "handleTouchEnd"
+            },
+            {
+              "kind": "field",
+              "name": "handleTouchStart"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ScrollController",
+          "declaration": {
+            "name": "ScrollController",
+            "module": "components/carousel/scroll-controller.js"
           }
         }
       ]
@@ -3028,6 +3357,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "superclass": {
@@ -3089,75 +3446,228 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox-group/checkbox-group.js",
+      "path": "components/checkbox/checkbox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdCheckboxGroup",
-          "slots": [
+          "name": "SdCheckbox",
+          "cssParts": [
             {
-              "description": "The default slot where `<sd-checkbox>` elements are placed.",
-              "name": ""
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "description": "The square container that wraps the checkbox's checked state.",
+              "name": "control"
             },
             {
-              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
-              "name": "tooltip"
+              "description": "Matches the control part when the checkbox is checked.",
+              "name": "control--checked"
             },
             {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            }
-          ],
-          "members": [
+              "description": "Matches the control part when the checkbox is indeterminate.",
+              "name": "control--indeterminate"
+            },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
+              "description": "The checked icon, an `<sd-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The indeterminate icon, an `<sd-icon>` element.",
+              "name": "indeterminate-icon"
+            },
+            {
+              "description": "The container that wraps the checkbox's label.",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The checkbox's label.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
               "default": "'lg'",
-              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+              "description": "The checkbox's size.",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "disabled",
               "type": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "boolean"
               },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "attribute": "orientation",
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "visuallyDisabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "attribute": "label",
+              "default": "false",
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultChecked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns true when valid and false when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows a validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
+            },
             {
               "kind": "field",
               "name": "dir",
@@ -3207,49 +3717,147 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
-              "fieldName": "size"
+              "description": "Emitted when the checkbox loses focus.",
+              "name": "sd-blur"
             },
             {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "fieldName": "orientation"
+              "description": "Emitted when the checked state changes.",
+              "name": "sd-change"
             },
             {
-              "name": "label",
+              "description": "Emitted when the checkbox gains focus.",
+              "name": "sd-focus"
+            },
+            {
+              "description": "Emitted when the checkbox receives input.",
+              "name": "sd-input"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "fieldName": "label"
+              "fieldName": "title"
             },
             {
-              "name": "help-text",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "name": "dir",
+              "name": "value",
               "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "'lg'",
+              "description": "The checkbox's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "visually-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "fieldName": "required"
+            },
+            {
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
               },
               "description": "The element's directionality.",
               "fieldName": "dir",
@@ -3275,11 +3883,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox-group",
+          "summary": "Checkboxes allow the user to toggle an option on or off.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox",
           "status": "stable",
           "since": "1.22.0",
-          "tagName": "sd-checkbox-group",
+          "dependencies": [
+            "sd-icon"
+          ],
+          "tagName": "sd-checkbox",
           "customElement": true
         }
       ],
@@ -3288,294 +3899,91 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdCheckboxGroup",
-            "module": "components/checkbox-group/checkbox-group.js"
+            "name": "SdCheckbox",
+            "module": "components/checkbox/checkbox.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-checkbox-group",
-          "declaration": {
-            "name": "SdCheckboxGroup",
-            "module": "components/checkbox-group/checkbox-group.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/carousel/autoplay-controller.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A controller that repeatedly calls the specified callback with the provided interval time.\nThe timer is automatically paused while the user is interacting with the component.",
-          "name": "AutoplayController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "paused",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "stopped",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "pause"
-            },
-            {
-              "kind": "field",
-              "name": "resume"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AutoplayController",
+          "name": "sd-checkbox",
           "declaration": {
-            "name": "AutoplayController",
-            "module": "components/carousel/autoplay-controller.js"
+            "name": "SdCheckbox",
+            "module": "components/checkbox/checkbox.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/carousel/carousel.js",
+      "path": "components/checkbox-group/checkbox-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdCarousel",
-          "cssProperties": [
-            {
-              "description": "The space between each slide.",
-              "name": "--slide-gap"
-            },
-            {
-              "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
-              "name": "--scroll-hint"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The carousel's internal wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The scroll container that wraps the slides.",
-              "name": "scroll-container"
-            },
-            {
-              "description": "A wrapper for the navigation and autoplay controller buttons.",
-              "name": "controls"
-            },
-            {
-              "description": "The pagination indicator in dot format.",
-              "name": "pagination-dot"
-            },
-            {
-              "description": "The pagination indicator in number format.",
-              "name": "pagination-number"
-            },
-            {
-              "description": "The pagination indicator.",
-              "name": "pagination-item"
-            },
-            {
-              "description": "Applied when the item is active.",
-              "name": "pagination-item--active"
-            },
-            {
-              "description": "The navigation wrapper.",
-              "name": "navigation"
-            },
-            {
-              "description": "The navigation button.",
-              "name": "navigation-button"
-            },
-            {
-              "description": "Applied to the previous button.",
-              "name": "navigation-button--previous"
-            },
-            {
-              "description": "Applied to the next button.",
-              "name": "navigation-button--next"
-            },
-            {
-              "description": "A wrapper for pause/start button.",
-              "name": "autoplay-controls"
-            }
-          ],
+          "name": "SdCheckboxGroup",
           "slots": [
             {
-              "description": "The carousel's main content, one or more `<sd-carousel-item>` elements.",
+              "description": "The default slot where `<sd-checkbox>` elements are placed.",
               "name": ""
             },
             {
-              "description": "Optional next icon to use instead of the default. Works best with `<sd-icon>`.",
-              "name": "next-icon"
-            },
-            {
-              "description": "Optional previous icon to use instead of the default. Works best with `<sd-icon>`.",
-              "name": "previous-icon"
+              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "Optional start icon to use instead of the default. Works best with `<sd-icon>`.",
-              "name": "autoplay-start"
+              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
+              "name": "tooltip"
             },
             {
-              "description": "Optional pause icon to use instead of the default. Works best with `<sd-icon>`.",
-              "name": "autoplay-pause"
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'dot' | 'number'"
-              },
-              "default": "'number'",
-              "description": "Determines the counting system for the carousel.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Inverts the carousel",
-              "attribute": "inverted",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "loop",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'lg' | 'md' | 'sm'"
               },
-              "default": "false",
-              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
-              "attribute": "loop",
+              "default": "'lg'",
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoplay",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "false",
-              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
-              "attribute": "autoplay",
+              "default": "'vertical'",
+              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+              "attribute": "orientation",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "slidesPerPage",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Specifies how many slides should be shown at a given time.",
-              "attribute": "slides-per-page",
+              "default": "''",
+              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "attribute": "label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "slidesPerMove",
+              "name": "helpText",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Use `slides-per-move` to set how many slides the carousel advances when scrolling. This is useful when specifying a `slides-per-page` greater than one. By setting `slides-per-move` to the same value as `slides-per-page`, the carousel will advance by one page at a time.<br>\n<b>Note:</b><br>\n<li> The number of slides should be divisible by the number of `slides-per-page` to maintain consistent scroll behavior.</li>\n<li>Variations between `slides-per-move` and `slides-per-page` can lead to unexpected scrolling behavior. Keep your intended UX in mind when adjusting these values.</li>",
-              "attribute": "slides-per-move",
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "method",
-              "name": "pause",
-              "privacy": "public",
-              "description": "Pause the autoplay."
-            },
-            {
-              "kind": "method",
-              "name": "resume",
-              "privacy": "public",
-              "description": "Resume the autoplay"
-            },
-            {
-              "kind": "method",
-              "name": "previous",
-              "parameters": [
-                {
-                  "name": "behavior",
-                  "default": "'smooth'",
-                  "type": {
-                    "text": "ScrollBehavior"
-                  },
-                  "description": "The behavior used for scrolling."
-                }
-              ],
-              "description": "Move the carousel backward by `slides-per-move` slides."
-            },
-            {
-              "kind": "method",
-              "name": "next",
-              "parameters": [
-                {
-                  "name": "behavior",
-                  "default": "'smooth'",
-                  "type": {
-                    "text": "ScrollBehavior"
-                  },
-                  "description": "The behavior used for scrolling."
-                }
-              ],
-              "description": "Move the carousel forward by `slides-per-move` slides."
-            },
-            {
-              "kind": "method",
-              "name": "goToSlide",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The slide index."
-                },
-                {
-                  "name": "behavior",
-                  "default": "'smooth'",
-                  "type": {
-                    "text": "ScrollBehavior"
-                  },
-                  "description": "The behavior used for scrolling."
-                }
-              ],
-              "description": "Scrolls the carousel to the slide specified by `index`."
-            },
             {
               "kind": "field",
               "name": "dir",
@@ -3625,71 +4033,72 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "{ index: number, slide: SdCarouselItem }"
-              },
-              "description": "Emitted when the active slide changes.",
-              "name": "sd-slide-change"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'dot' | 'number'"
-              },
-              "default": "'number'",
-              "description": "Determines the counting system for the carousel.",
-              "fieldName": "variant"
             },
             {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
               },
-              "default": "false",
-              "description": "Inverts the carousel",
-              "fieldName": "inverted"
-            },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "name": "loop",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'lg' | 'md' | 'sm'"
               },
-              "default": "false",
-              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
-              "fieldName": "loop"
+              "default": "'lg'",
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+              "fieldName": "size"
             },
             {
-              "name": "autoplay",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "false",
-              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
-              "fieldName": "autoplay"
+              "default": "'vertical'",
+              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+              "fieldName": "orientation"
             },
             {
-              "name": "slides-per-page",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Specifies how many slides should be shown at a given time.",
-              "fieldName": "slidesPerPage"
+              "default": "''",
+              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "fieldName": "label"
             },
             {
-              "name": "slides-per-move",
+              "name": "help-text",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Use `slides-per-move` to set how many slides the carousel advances when scrolling. This is useful when specifying a `slides-per-page` greater than one. By setting `slides-per-move` to the same value as `slides-per-page`, the carousel will advance by one page at a time.<br>\n<b>Note:</b><br>\n<li> The number of slides should be divisible by the number of `slides-per-page` to maintain consistent scroll behavior.</li>\n<li>Variations between `slides-per-move` and `slides-per-page` can lead to unexpected scrolling behavior. Keep your intended UX in mind when adjusting these values.</li>",
-              "fieldName": "slidesPerMove"
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
             },
             {
               "name": "dir",
@@ -3718,15 +4127,13 @@
           ],
           "superclass": {
             "name": "SolidElement",
-            "module": "/src/internal/solid-element.js"
+            "module": "/src/internal/solid-element"
           },
-          "summary": "Carousels display an arbitrary number of content slides along a horizontal axis.",
-          "since": "1.18.0",
+          "summary": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox-group",
           "status": "stable",
-          "dependencies": [
-            "sd-icon"
-          ],
-          "tagName": "sd-carousel",
+          "since": "1.22.0",
+          "tagName": "sd-checkbox-group",
           "customElement": true
         }
       ],
@@ -3735,87 +4142,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdCarousel",
-            "module": "components/carousel/carousel.js"
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-carousel",
-          "declaration": {
-            "name": "SdCarousel",
-            "module": "components/carousel/carousel.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/carousel/scroll-controller.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A controller for handling scrolling and mouse dragging.",
-          "name": "ScrollController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "dragging",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "scrolling",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "mouseDragging",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "handleScroll"
-            },
-            {
-              "kind": "field",
-              "name": "handlePointerDown"
-            },
-            {
-              "kind": "field",
-              "name": "handlePointerMove"
-            },
-            {
-              "kind": "field",
-              "name": "handlePointerUp"
-            },
-            {
-              "kind": "field",
-              "name": "handleTouchEnd"
-            },
-            {
-              "kind": "field",
-              "name": "handleTouchStart"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ScrollController",
+          "name": "sd-checkbox-group",
           "declaration": {
-            "name": "ScrollController",
-            "module": "components/carousel/scroll-controller.js"
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
           }
         }
       ]
@@ -4349,6 +4685,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -5070,6 +5434,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -5297,6 +5689,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -5557,6 +5977,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -5944,11 +6392,39 @@
                   "name": "options",
                   "optional": true,
                   "type": {
-                    "text": "CustomEventInit"
+                    "text": "CustomEventInit"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
                   }
                 }
               ],
-              "description": "Emits a custom event with more convenient defaults.",
+              "description": "Retrieves the value of a css variable token.",
               "inheritedFrom": {
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
@@ -6291,6 +6767,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -6581,6 +7085,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -6785,6 +7317,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -6962,6 +7522,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -7420,6 +8008,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -8188,6 +8804,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -8727,6 +9371,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -9003,6 +9675,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -9371,6 +10071,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -9738,6 +10466,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -9991,14 +10747,42 @@
                   }
                 },
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
                   "type": {
-                    "text": "CustomEventInit"
+                    "text": "T"
                   }
                 }
               ],
-              "description": "Emits a custom event with more convenient defaults.",
+              "description": "Retrieves the value of a css variable token.",
               "inheritedFrom": {
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
@@ -10226,6 +11010,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -10641,6 +11453,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -11130,6 +11970,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -11400,6 +12268,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -11664,6 +12560,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -12026,6 +12950,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -12383,6 +13335,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -12996,6 +13976,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -13355,6 +14363,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -13639,6 +14675,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -13924,7 +14988,36 @@
             },
             {
               "kind": "method",
-              "name": "emit",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
               "parameters": [
                 {
                   "name": "name",
@@ -13933,14 +15026,13 @@
                   }
                 },
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "fallback",
                   "type": {
-                    "text": "CustomEventInit"
+                    "text": "T"
                   }
                 }
               ],
-              "description": "Emits a custom event with more convenient defaults.",
+              "description": "Retrieves the value of a css variable token.",
               "inheritedFrom": {
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
@@ -14286,6 +15378,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -14581,6 +15701,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -14824,6 +15972,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -15009,6 +16185,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -15229,6 +16433,12 @@
               "name": "blur",
               "description": "Removes focus from the tag."
             },
+            {
+              "kind": "method",
+              "name": "hide",
+              "privacy": "public",
+              "description": "Visually hides the tag"
+            },
             {
               "kind": "field",
               "name": "dir",
@@ -15278,6 +16488,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -15292,6 +16530,14 @@
             {
               "description": "Emitted when the remove button is activated.",
               "name": "sd-remove"
+            },
+            {
+              "description": "Emitted when the hide method is triggered.",
+              "name": "sd-hide"
+            },
+            {
+              "description": "Emitted after the tag is hidden and all animations are complete.",
+              "name": "sd-after-hide"
             }
           ],
           "attributes": [
@@ -15569,6 +16815,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -15776,6 +17050,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "attributes": [
@@ -16346,6 +17648,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -16832,6 +18162,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -17099,6 +18457,34 @@
                 "name": "SolidElement",
                 "module": "internal/solid-element.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "token",
+              "return": {
+                "type": {
+                  "text": "T"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Retrieves the value of a css variable token.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
             }
           ],
           "events": [
@@ -17188,7 +18574,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.6.17",
+    "version": "4.7.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"