@solid-design-system/components 4.6.17 → 4.6.18

package/cdn/custom-elements.json

@@ -2525,227 +2525,277 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
+      "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",
+          "declaration": {
+            "name": "AutoplayController",
+            "module": "components/carousel/autoplay-controller.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/carousel/carousel.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdCheckbox",
+          "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 component's base wrapper.",
+              "description": "The carousel's internal wrapper.",
               "name": "base"
             },
             {
-              "description": "The square container that wraps the checkbox's checked state.",
-              "name": "control"
+              "description": "The scroll container that wraps the slides.",
+              "name": "scroll-container"
             },
             {
-              "description": "Matches the control part when the checkbox is checked.",
-              "name": "control--checked"
+              "description": "A wrapper for the navigation and autoplay controller buttons.",
+              "name": "controls"
             },
             {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
+              "description": "The pagination indicator in dot format.",
+              "name": "pagination-dot"
             },
             {
-              "description": "The checked icon, an `<sd-icon>` element.",
-              "name": "checked-icon"
+              "description": "The pagination indicator in number format.",
+              "name": "pagination-number"
             },
             {
-              "description": "The indeterminate icon, an `<sd-icon>` element.",
-              "name": "indeterminate-icon"
+              "description": "The pagination indicator.",
+              "name": "pagination-item"
             },
             {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
+              "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 checkbox's label.",
+              "description": "The carousel's main content, one or more `<sd-carousel-item>` elements.",
               "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
+              "description": "Optional next icon to use instead of the default. Works best with `<sd-icon>`.",
+              "name": "next-icon"
             },
             {
-              "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"
+              "description": "Optional previous icon to use instead of the default. Works best with `<sd-icon>`.",
+              "name": "previous-icon"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox's size.",
-              "attribute": "size",
-              "reflects": true
+              "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": "disabled",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "'dot' | 'number'"
               },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "attribute": "disabled",
+              "default": "'number'",
+              "description": "Determines the counting system for the carousel.",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "visuallyDisabled",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
+              "description": "Inverts the carousel",
+              "attribute": "inverted",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "loop",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "attribute": "checked",
+              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
+              "attribute": "loop",
               "reflects": true
             },
             {
               "kind": "field",
-              "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.",
-              "attribute": "indeterminate",
+              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
+              "attribute": "autoplay",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultChecked",
+              "name": "slidesPerPage",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "default": "1",
+              "description": "Specifies how many slides should be shown at a given time.",
+              "attribute": "slides-per-page",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "slidesPerMove",
               "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": "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": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "attribute": "required",
-              "reflects": true
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "kind": "method",
+              "name": "pause",
+              "privacy": "public",
+              "description": "Pause the autoplay."
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the checkbox."
+              "name": "resume",
+              "privacy": "public",
+              "description": "Resume the autoplay"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "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",
@@ -2800,110 +2850,67 @@
           ],
           "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"
+              "type": {
+                "text": "{ index: number, slide: SdCarouselItem }"
+              },
+              "description": "Emitted when the active slide changes.",
+              "name": "sd-slide-change"
             }
           ],
           "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"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox's size.",
-              "fieldName": "size"
-            },
-            {
-              "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,34 +2939,104 @@
           ],
           "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
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sd-checkbox",
+          "name": "default",
+          "declaration": {
+            "name": "SdCarousel",
+            "module": "components/carousel/carousel.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",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "ScrollController",
+            "module": "components/carousel/scroll-controller.js"
           }
         }
       ]
@@ -3089,75 +3166,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"
+              "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": ""
             }
           ],
           "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": "'lg' | 'md' | 'sm'"
+                "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",
@@ -3209,42 +3439,112 @@
               }
             }
           ],
+          "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"
+            }
+          ],
           "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"
+            },
             {
               "name": "size",
               "type": {
-                "text": "'lg' | 'md' | 'sm'"
+                "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.",
               "fieldName": "size"
             },
             {
-              "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.",
-              "fieldName": "orientation"
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "fieldName": "disabled"
             },
             {
-              "name": "label",
+              "name": "visually-disabled",
               "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.",
-              "fieldName": "label"
+              "default": "false",
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
             },
             {
-              "name": "help-text",
+              "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": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "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",
@@ -3275,11 +3575,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,293 +3591,90 @@
           "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",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
-              "attribute": "loop",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autoplay",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'lg' | 'md' | 'sm'"
               },
-              "default": "false",
-              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
-              "attribute": "autoplay",
+              "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": "slidesPerPage",
+              "name": "orientation",
               "type": {
-                "text": "number"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "1",
-              "description": "Specifies how many slides should be shown at a given time.",
-              "attribute": "slides-per-page",
+              "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": "slidesPerMove",
+              "name": "label",
               "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 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": "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`."
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "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",
@@ -3627,69 +3727,42 @@
               }
             }
           ],
-          "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"
-              },
-              "default": "false",
-              "description": "Inverts the carousel",
-              "fieldName": "inverted"
-            },
-            {
-              "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 +3791,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 +3806,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"
           }
         }
       ]
@@ -17188,7 +17188,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.6.17",
+    "version": "4.6.18",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"