@solid-design-system/components 4.6.16 → 4.6.17

package/dist/custom-elements.json

@@ -2525,277 +2525,227 @@
     },
     {
       "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",
-          "declaration": {
-            "name": "AutoplayController",
-            "module": "components/carousel/autoplay-controller.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/carousel/carousel.js",
+      "path": "components/checkbox/checkbox.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"
-            }
-          ],
+          "name": "SdCheckbox",
           "cssParts": [
             {
-              "description": "The carousel's internal wrapper.",
+              "description": "The component's base 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 square container that wraps the checkbox's checked state.",
+              "name": "control"
             },
             {
-              "description": "The navigation wrapper.",
-              "name": "navigation"
+              "description": "Matches the control part when the checkbox is checked.",
+              "name": "control--checked"
             },
             {
-              "description": "The navigation button.",
-              "name": "navigation-button"
+              "description": "Matches the control part when the checkbox is indeterminate.",
+              "name": "control--indeterminate"
             },
             {
-              "description": "Applied to the previous button.",
-              "name": "navigation-button--previous"
+              "description": "The checked icon, an `<sd-icon>` element.",
+              "name": "checked-icon"
             },
             {
-              "description": "Applied to the next button.",
-              "name": "navigation-button--next"
+              "description": "The indeterminate icon, an `<sd-icon>` element.",
+              "name": "indeterminate-icon"
             },
             {
-              "description": "A wrapper for pause/start button.",
-              "name": "autoplay-controls"
+              "description": "The container that wraps the checkbox's label.",
+              "name": "label"
             }
           ],
           "slots": [
             {
-              "description": "The carousel's main content, one or more `<sd-carousel-item>` elements.",
+              "description": "The checkbox's label.",
               "name": ""
-            },
+            }
+          ],
+          "members": [
             {
-              "description": "Optional next icon to use instead of the default. Works best with `<sd-icon>`.",
-              "name": "next-icon"
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title",
+              "reflects": true
             },
             {
-              "description": "Optional previous icon to use instead of the default. Works best with `<sd-icon>`.",
-              "name": "previous-icon"
+              "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 start icon to use instead of the default. Works best with `<sd-icon>`.",
-              "name": "autoplay-start"
+              "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 pause icon to use instead of the default. Works best with `<sd-icon>`.",
-              "name": "autoplay-pause"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "'dot' | 'number'"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "default": "'number'",
-              "description": "Determines the counting system for the carousel.",
-              "attribute": "variant",
+              "default": "'lg'",
+              "description": "The checkbox's size.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Inverts the carousel",
-              "attribute": "inverted",
+              "description": "Disables the checkbox.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loop",
+              "name": "visuallyDisabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
-              "attribute": "loop",
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoplay",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
-              "attribute": "autoplay",
+              "description": "Draws the checkbox in a checked state.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "slidesPerPage",
+              "name": "indeterminate",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1",
-              "description": "Specifies how many slides should be shown at a given time.",
-              "attribute": "slides-per-page",
+              "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": "slidesPerMove",
+              "name": "defaultChecked",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "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
+              "default": "false",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
+              "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.",
+              "attribute": "form",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "pause",
-              "privacy": "public",
-              "description": "Pause the autoplay."
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "attribute": "required",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "resume",
-              "privacy": "public",
-              "description": "Resume the autoplay"
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "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."
+              "name": "click",
+              "description": "Simulates a click on the checkbox."
             },
             {
               "kind": "method",
-              "name": "next",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "behavior",
-                  "default": "'smooth'",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "ScrollBehavior"
-                  },
-                  "description": "The behavior used for scrolling."
+                    "text": "FocusOptions"
+                  }
                 }
               ],
-              "description": "Move the carousel forward by `slides-per-move` slides."
+              "description": "Sets focus on the checkbox."
             },
             {
               "kind": "method",
-              "name": "goToSlide",
+              "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": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The slide index."
-                },
-                {
-                  "name": "behavior",
-                  "default": "'smooth'",
+                  "name": "message",
                   "type": {
-                    "text": "ScrollBehavior"
-                  },
-                  "description": "The behavior used for scrolling."
+                    "text": "string"
+                  }
                 }
               ],
-              "description": "Scrolls the carousel to the slide specified by `index`."
+              "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",
@@ -2850,67 +2800,110 @@
           ],
           "events": [
             {
-              "type": {
-                "text": "{ index: number, slide: SdCarouselItem }"
-              },
-              "description": "Emitted when the active slide changes.",
-              "name": "sd-slide-change"
+              "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": "variant",
+              "name": "title",
               "type": {
-                "text": "'dot' | 'number'"
+                "text": "string"
               },
-              "default": "'number'",
-              "description": "Determines the counting system for the carousel.",
-              "fieldName": "variant"
+              "default": "''",
+              "fieldName": "title"
             },
             {
-              "name": "inverted",
+              "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",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Inverts the carousel",
-              "fieldName": "inverted"
+              "description": "Disables the checkbox.",
+              "fieldName": "disabled"
             },
             {
-              "name": "loop",
+              "name": "visually-disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
-              "fieldName": "loop"
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
             },
             {
-              "name": "autoplay",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
-              "fieldName": "autoplay"
+              "description": "Draws the checkbox in a checked state.",
+              "fieldName": "checked"
             },
             {
-              "name": "slides-per-page",
+              "name": "indeterminate",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1",
-              "description": "Specifies how many slides should be shown at a given time.",
-              "fieldName": "slidesPerPage"
+              "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": "slides-per-move",
+              "name": "form",
               "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": "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",
@@ -2939,15 +2932,16 @@
           ],
           "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": "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",
           "dependencies": [
             "sd-icon"
           ],
-          "tagName": "sd-carousel",
+          "tagName": "sd-checkbox",
           "customElement": true
         }
       ],
@@ -2956,87 +2950,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdCarousel",
-            "module": "components/carousel/carousel.js"
+            "name": "SdCheckbox",
+            "module": "components/checkbox/checkbox.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",
           "declaration": {
-            "name": "ScrollController",
-            "module": "components/carousel/scroll-controller.js"
+            "name": "SdCheckbox",
+            "module": "components/checkbox/checkbox.js"
           }
         }
       ]
@@ -3166,228 +3089,75 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
+      "path": "components/checkbox-group/checkbox-group.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"
-            },
+          "name": "SdCheckboxGroup",
+          "slots": [
             {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
+              "description": "The default slot where `<sd-checkbox>` elements are placed.",
+              "name": ""
             },
             {
-              "description": "The checked icon, an `<sd-icon>` element.",
-              "name": "checked-icon"
+              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "The indeterminate icon, an `<sd-icon>` element.",
-              "name": "indeterminate-icon"
+              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
+              "name": "tooltip"
             },
             {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The checkbox's label.",
-              "name": ""
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "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'"
+                "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The checkbox's size.",
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "visuallyDisabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
-              "attribute": "visually-disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "indeterminate",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "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",
+              "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": "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",
+              "name": "label",
               "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.",
-              "attribute": "form",
+              "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": "required",
+              "name": "helpText",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "attribute": "required",
+              "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": "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",
@@ -3431,120 +3201,50 @@
                     "text": "CustomEventInit"
                   }
                 }
-              ],
-              "description": "Emits a custom event with more convenient defaults.",
-              "inheritedFrom": {
-                "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"
-            }
-          ],
-          "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"
-            },
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            }
+          ],
+          "attributes": [
             {
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "The checkbox's size.",
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
               "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",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "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"
+              "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": "form",
+              "name": "label",
               "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"
+              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "fieldName": "label"
             },
             {
-              "name": "required",
+              "name": "help-text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "fieldName": "required"
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
             },
             {
               "name": "dir",
@@ -3575,14 +3275,11 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Checkboxes allow the user to toggle an option on or off.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox",
+          "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",
           "since": "1.22.0",
-          "dependencies": [
-            "sd-icon"
-          ],
-          "tagName": "sd-checkbox",
+          "tagName": "sd-checkbox-group",
           "customElement": true
         }
       ],
@@ -3591,90 +3288,293 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-checkbox",
+          "name": "sd-checkbox-group",
           "declaration": {
-            "name": "SdCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox-group/checkbox-group.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": "SdCheckboxGroup",
+          "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"
+            }
+          ],
           "slots": [
             {
-              "description": "The default slot where `<sd-checkbox>` elements are placed.",
+              "description": "The carousel's main content, one or more `<sd-carousel-item>` elements.",
               "name": ""
             },
             {
-              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "description": "Optional next icon to use instead of the default. Works best with `<sd-icon>`.",
+              "name": "next-icon"
             },
             {
-              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
-              "name": "tooltip"
+              "description": "Optional previous icon to use instead of the default. Works best with `<sd-icon>`.",
+              "name": "previous-icon"
             },
             {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
+              "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": "size",
+              "name": "variant",
               "type": {
-                "text": "'lg' | 'md' | 'sm'"
+                "text": "'dot' | 'number'"
               },
-              "default": "'lg'",
-              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
-              "attribute": "size",
+              "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",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
+              "attribute": "autoplay",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "slidesPerPage",
               "type": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "number"
               },
-              "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": "1",
+              "description": "Specifies how many slides should be shown at a given time.",
+              "attribute": "slides-per-page",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "slidesPerMove",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "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": "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": "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
+              "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",
@@ -3727,42 +3627,69 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "{ index: number, slide: SdCarouselItem }"
+              },
+              "description": "Emitted when the active slide changes.",
+              "name": "sd-slide-change"
+            }
+          ],
           "attributes": [
             {
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "'lg' | 'md' | 'sm'"
+                "text": "'dot' | 'number'"
               },
-              "default": "'lg'",
-              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
-              "fieldName": "size"
+              "default": "'number'",
+              "description": "Determines the counting system for the carousel.",
+              "fieldName": "variant"
             },
             {
-              "name": "orientation",
+              "name": "inverted",
               "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": "Inverts the carousel",
+              "fieldName": "inverted"
             },
             {
-              "name": "label",
+              "name": "loop",
               "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": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
+              "fieldName": "loop"
             },
             {
-              "name": "help-text",
+              "name": "autoplay",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "default": "false",
+              "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
+              "fieldName": "autoplay"
+            },
+            {
+              "name": "slides-per-page",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Specifies how many slides should be shown at a given time.",
+              "fieldName": "slidesPerPage"
+            },
+            {
+              "name": "slides-per-move",
+              "type": {
+                "text": "number"
+              },
+              "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",
@@ -3791,13 +3718,15 @@
           ],
           "superclass": {
             "name": "SolidElement",
-            "module": "/src/internal/solid-element"
+            "module": "/src/internal/solid-element.js"
           },
-          "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": "Carousels display an arbitrary number of content slides along a horizontal axis.",
+          "since": "1.18.0",
           "status": "stable",
-          "since": "1.22.0",
-          "tagName": "sd-checkbox-group",
+          "dependencies": [
+            "sd-icon"
+          ],
+          "tagName": "sd-carousel",
           "customElement": true
         }
       ],
@@ -3806,16 +3735,87 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdCheckboxGroup",
-            "module": "components/checkbox-group/checkbox-group.js"
+            "name": "SdCarousel",
+            "module": "components/carousel/carousel.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-checkbox-group",
+          "name": "sd-carousel",
           "declaration": {
-            "name": "SdCheckboxGroup",
-            "module": "components/checkbox-group/checkbox-group.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"
           }
         }
       ]
@@ -17188,7 +17188,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.6.16",
+    "version": "4.6.17",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"