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

package/docs/html.html-data.json

@@ -295,6 +295,12 @@
             {
               "name": "large"
             },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "sm"
+            },
             {
               "name": "small"
             }
@@ -1044,6 +1050,118 @@
         }
       ]
     },
+    {
+      "name": "ds-carousel",
+      "description": {
+        "kind": "markdown",
+        "value": "Carousel coordinates ds-carousel-item children into a scrollable, accessible slide interface. Supports an image slider and a product tile strip."
+      },
+      "attributes": [
+        {
+          "name": "controls",
+          "description": "Control style. `dots` shows dot pagination with prev/next arrows (image variant). `large` shows large side arrows (product variant). `none` hides all controls.",
+          "values": [
+            {
+              "name": "dots"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "items-per-view",
+          "description": "Number of items visible at once. `auto` sizes items by content. A number divides the container width equally.",
+          "values": [
+            {
+              "name": "auto"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "Accessible label for the carousel region."
+        },
+        {
+          "name": "steps",
+          "description": "Number of items to advance per arrow click."
+        },
+        {
+          "name": "value",
+          "description": "Name of the currently selected ds-carousel-item."
+        },
+        {
+          "name": "variant",
+          "description": "Visual variant. `slide` uses scroll-snap and shows one slide at a time. `tile` shows multiple items with free scrolling.",
+          "values": [
+            {
+              "name": "slide"
+            },
+            {
+              "name": "tile"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/carousel/carousel/carousel.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-carousel-item",
+      "description": {
+        "kind": "markdown",
+        "value": "Carousel Item is a single slide or product tile inside a ds-carousel."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Background color for product tiles.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Unique identifier for this item, matched by the parent ds-carousel `value` prop."
+        },
+        {
+          "name": "navigation",
+          "description": "When `true`, the item renders in navigation mode: the consumer provides an `<a>` in the slot,\nwhich is stretched to cover the full tile and acts as the interactive element."
+        },
+        {
+          "name": "selected",
+          "description": "If `true`, this item is the currently active slide/tile. Set by the parent ds-carousel."
+        },
+        {
+          "name": "src",
+          "description": "Image URL displayed in image-variant slides, or brand icon source for product tiles."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/carousel/carousel-item/carousel-item.tsx"
+        }
+      ]
+    },
     {
       "name": "ds-checkbox",
       "description": {
@@ -1063,6 +1181,10 @@
           "name": "disabled",
           "description": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
         },
+        {
+          "name": "hide-trigger",
+          "description": "If `true` and `tile` is set, the checkbox box is visually hidden. The tile remains fully clickable and keyboard-accessible."
+        },
         {
           "name": "invalid",
           "description": "If `true` the component gets a invalid style."
@@ -1181,6 +1303,10 @@
           "name": "disabled",
           "description": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
         },
+        {
+          "name": "hide-trigger",
+          "description": "If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group."
+        },
         {
           "name": "invalid",
           "description": "If `true` the component gets a invalid style."
@@ -1478,133 +1604,497 @@
       ]
     },
     {
-      "name": "ds-divider",
+      "name": "ds-data",
       "description": {
         "kind": "markdown",
-        "value": "Divider renders a visual separator line for grouping or distinguishing content sections."
+        "value": "Data displays a list of label-value pairs in a organized, accessible format.\nSupports vertical and horizontal layouts with dividers always shown in vertical layout."
       },
       "attributes": [
         {
-          "name": "color",
-          "description": "Defines the color of the separator line.",
+          "name": "horizontal",
+          "description": "If `true` the data list is horizontal instead of vertical."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/data/data.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-data-item",
+      "description": {
+        "kind": "markdown",
+        "value": "DataItem is a container for label-value pairs within ds-data.\nProvides separate slots for label and value for semantic linking."
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "If `true` the item gets a lighter font color."
+        },
+        {
+          "name": "edit-label",
+          "description": "Label for the edit button.\nWhen omitted the label is localised from the language config."
+        },
+        {
+          "name": "editable",
+          "description": "If `true` a small button with an edit icon is shown on the right."
+        },
+        {
+          "name": "multiline",
+          "description": "If `true` the text will break and the height of the item increases."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/data/data-item.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-data-label",
+      "description": {
+        "kind": "markdown",
+        "value": "DataLabel is a label element for use within ds-data-item.\nIt displays a label with optional required indicator."
+      },
+      "attributes": [
+        {
+          "name": "required",
+          "description": "If `true` an asterisk is added after the label."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/data/data-label.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-data-value",
+      "description": {
+        "kind": "markdown",
+        "value": "DataValue is a value element for use within ds-data-item.\nPass-through slot container for value content."
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/data/data-value.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-date",
+      "description": {
+        "kind": "markdown",
+        "value": "Date renders a masked date input field with an interactive calendar popup for date selection."
+      },
+      "attributes": [
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid."
+        },
+        {
+          "name": "autocomplete",
+          "description": "Indicates whether the value of the control can be automatically completed by the browser.",
           "values": [
             {
-              "name": "danger"
+              "name": "additional-name"
             },
             {
-              "name": "danger-dark"
+              "name": "address-level1"
             },
             {
-              "name": "danger-darker"
+              "name": "address-level2"
             },
             {
-              "name": "grey"
+              "name": "address-level3"
             },
             {
-              "name": "grey-dark"
+              "name": "address-level4"
             },
             {
-              "name": "grey-light"
+              "name": "address-line1"
             },
             {
-              "name": "light-blue"
+              "name": "address-line2"
             },
             {
-              "name": "primary"
+              "name": "address-line3"
             },
             {
-              "name": "primary-dark"
+              "name": "bday"
             },
             {
-              "name": "primary-light"
+              "name": "bday-day"
             },
             {
-              "name": "success"
+              "name": "bday-month"
             },
             {
-              "name": "warning"
+              "name": "bday-year"
             },
             {
-              "name": "white"
-            }
-          ]
-        },
-        {
-          "name": "dashed",
-          "description": "Defines if the separator line is dashed or solid. Default is solid."
-        },
-        {
-          "name": "layout",
-          "description": "Defines the position of the child elements if they\nare showed verticaly or horizontally. Default is verticaly.",
-          "values": [
+              "name": "cc-additional-name"
+            },
             {
-              "name": "horizontal"
+              "name": "cc-csc"
             },
             {
-              "name": "vertical"
-            }
-          ]
-        },
-        {
-          "name": "space",
-          "description": "Defines the space between the child elements. Default is xx-small.",
-          "values": [
+              "name": "cc-exp"
+            },
             {
-              "name": "2xl"
+              "name": "cc-exp-month"
             },
             {
-              "name": "2xs"
+              "name": "cc-exp-year"
             },
             {
-              "name": "3xl"
+              "name": "cc-family-name"
             },
             {
-              "name": "base"
+              "name": "cc-given-name"
             },
             {
-              "name": "large"
+              "name": "cc-name"
             },
             {
-              "name": "lg"
+              "name": "cc-number"
             },
             {
-              "name": "md"
+              "name": "cc-type"
             },
             {
-              "name": "medium"
+              "name": "country"
             },
             {
-              "name": "none"
+              "name": "country-name"
             },
             {
-              "name": "normal"
+              "name": "current-password"
             },
             {
-              "name": "sm"
+              "name": "email"
             },
             {
-              "name": "small"
+              "name": "family-name"
             },
             {
-              "name": "x-large"
+              "name": "given-name"
             },
             {
-              "name": "x-small"
+              "name": "honorific-prefix"
             },
             {
-              "name": "xl"
+              "name": "honorific-suffix"
             },
             {
-              "name": "xs"
+              "name": "impp"
             },
             {
-              "name": "xx-large"
+              "name": "language"
             },
             {
-              "name": "xx-small"
+              "name": "name"
             },
             {
-              "name": "xxx-large"
+              "name": "new-password"
+            },
+            {
+              "name": "nickname"
+            },
+            {
+              "name": "off"
+            },
+            {
+              "name": "on"
+            },
+            {
+              "name": "one-time-code"
+            },
+            {
+              "name": "organization"
+            },
+            {
+              "name": "organization-title"
+            },
+            {
+              "name": "photo"
+            },
+            {
+              "name": "postal-code"
+            },
+            {
+              "name": "sex"
+            },
+            {
+              "name": "street-address"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "tel-area-code"
+            },
+            {
+              "name": "tel-country-code"
+            },
+            {
+              "name": "tel-extension"
+            },
+            {
+              "name": "tel-local"
+            },
+            {
+              "name": "tel-national"
+            },
+            {
+              "name": "transaction-amount"
+            },
+            {
+              "name": "transaction-currency"
+            },
+            {
+              "name": "url"
+            },
+            {
+              "name": "username"
+            }
+          ]
+        },
+        {
+          "name": "autofocus",
+          "description": "This Boolean attribute lets you specify that the control should have input focus when the page loads."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the date input. The default value is `primary`.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "debounce",
+          "description": "Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke."
+        },
+        {
+          "name": "default-date",
+          "description": "The ISO date string (YYYY-MM-DD) where the calendar opens when no value is set.\nThe date is not selected — only the view navigates to it."
+        },
+        {
+          "name": "description",
+          "description": "The description of the date input, which is displayed below the field."
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the element is not mutable, focusable, or even submitted with the form."
+        },
+        {
+          "name": "free-solo",
+          "description": "If `true`, the calendar trigger icon and popup are hidden. The component behaves as a plain masked text input with no date picker UX."
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets an invalid style."
+        },
+        {
+          "name": "invalid-text",
+          "description": "The text to display when the input is in an invalid state."
+        },
+        {
+          "name": "label",
+          "description": "The label of the date input, which is displayed above the field."
+        },
+        {
+          "name": "loading",
+          "description": "Shows a loading indicator at the end of the input and replaces the trigger button."
+        },
+        {
+          "name": "max",
+          "description": "The maximum ISO date string allowed (YYYY-MM-DD). Dates after this are disabled in the calendar and rejected from typed input."
+        },
+        {
+          "name": "max-year",
+          "description": "Latest year available for selection. Takes precedence over `max` when both are set."
+        },
+        {
+          "name": "min",
+          "description": "The minimum ISO date string allowed (YYYY-MM-DD). Dates before this are disabled in the calendar and rejected from typed input."
+        },
+        {
+          "name": "min-year",
+          "description": "Earliest year available for selection. Takes precedence over `min` when both are set."
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "placeholder",
+          "description": "Instructional text that shows before the input has a value."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not be mutated, meaning the user can not edit the control."
+        },
+        {
+          "name": "required",
+          "description": "If `true`, the user must fill in a value before submitting a form."
+        },
+        {
+          "name": "value",
+          "description": "The value of the date input in ISO format (YYYY-MM-DD)."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/date/date.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-divider",
+      "description": {
+        "kind": "markdown",
+        "value": "Divider renders a visual separator line for grouping or distinguishing content sections."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Defines the color of the separator line.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "danger-dark"
+            },
+            {
+              "name": "danger-darker"
+            },
+            {
+              "name": "grey"
+            },
+            {
+              "name": "grey-dark"
+            },
+            {
+              "name": "grey-light"
+            },
+            {
+              "name": "light-blue"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "primary-dark"
+            },
+            {
+              "name": "primary-light"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        },
+        {
+          "name": "dashed",
+          "description": "Defines if the separator line is dashed or solid. Default is solid."
+        },
+        {
+          "name": "layout",
+          "description": "Defines the position of the child elements if they\nare showed verticaly or horizontally. Default is verticaly.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "space",
+          "description": "Defines the space between the child elements. Default is xx-small.",
+          "values": [
+            {
+              "name": "2xl"
+            },
+            {
+              "name": "2xs"
+            },
+            {
+              "name": "3xl"
+            },
+            {
+              "name": "base"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "x-small"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "xs"
+            },
+            {
+              "name": "xx-large"
+            },
+            {
+              "name": "xx-small"
+            },
+            {
+              "name": "xxx-large"
             }
           ]
         }
@@ -1616,6 +2106,199 @@
         }
       ]
     },
+    {
+      "name": "ds-drawer",
+      "description": {
+        "kind": "markdown",
+        "value": "Drawer displays a panel that slides up from the bottom of the screen.\nUses the native dialog element for accessible top-layer rendering, built-in focus management,\nand Escape-key handling."
+      },
+      "attributes": [
+        {
+          "name": "backdrop-dismiss",
+          "description": "If `true`, clicking the backdrop (outside the panel) dismisses the drawer."
+        },
+        {
+          "name": "closable",
+          "description": "If `true`, the drawer can be dismissed via the Escape key and shows a close button."
+        },
+        {
+          "name": "container",
+          "description": "Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.\nMatches the `ds-container` sizing variants.",
+          "values": [
+            {
+              "name": "compact"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "fluid"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "Accessible label for the drawer dialog (sets aria-label on the dialog element)."
+        },
+        {
+          "name": "open",
+          "description": "If `true` the drawer is open."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/drawer/drawer.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-file-upload",
+      "description": {
+        "kind": "markdown",
+        "value": "FileUpload renders a drag-drop file upload area with optional file list, validation, and form field integration."
+      },
+      "attributes": [
+        {
+          "name": "accept",
+          "description": "Accepted MIME-Types like `image/png,image/jpeg`."
+        },
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the file upload. The default value is `primary`.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "description",
+          "description": "The description of the file upload, displayed below the drop zone."
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the element is not mutable, focusable, or even submitted with the form."
+        },
+        {
+          "name": "drop-zone-label",
+          "description": "The text displayed inside the drop zone. Defaults to localized \"Drag and drop or choose file(s) to upload\"."
+        },
+        {
+          "name": "has-file-list",
+          "description": "If `true` below the drop-zone area it generates a file list."
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets an invalid style."
+        },
+        {
+          "name": "invalid-text",
+          "description": "The text to display when the file upload is in an invalid state."
+        },
+        {
+          "name": "label",
+          "description": "The label of the file upload, displayed in the drop zone area."
+        },
+        {
+          "name": "loading",
+          "description": "If `true` the file upload is disabled and shows a spinner."
+        },
+        {
+          "name": "max-bundle-size",
+          "description": "Allowed max bundle size in bytes."
+        },
+        {
+          "name": "max-file-size",
+          "description": "Allowed max file size in bytes."
+        },
+        {
+          "name": "max-files",
+          "description": "Allowed number of files in the bundle."
+        },
+        {
+          "name": "multiple",
+          "description": "If `true` multiple file upload is possible."
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not be mutated, meaning the user can not edit the control."
+        },
+        {
+          "name": "required",
+          "description": "If `true`, the user must fill in a value before submitting a form."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/file-upload/file-upload.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-footer",
+      "description": {
+        "kind": "markdown",
+        "value": "Footer renders application level legal links, language selection, and social links.\nLink content is slot first to keep links crawlable and SEO friendly.\nLinks and social media are shown by default unless disabled."
+      },
+      "attributes": [
+        {
+          "name": "container",
+          "description": "Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.\nMatches the `ds-container` sizing variants.",
+          "values": [
+            {
+              "name": "compact"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "fluid"
+            }
+          ]
+        },
+        {
+          "name": "disable-default-links",
+          "description": "If `true` the default legal links from config will not be rendered.\nUser must provide links via the `links` slot."
+        },
+        {
+          "name": "disable-default-social-links",
+          "description": "If `true` the default social links from config will not be rendered.\nUser must provide social links via the `social-links` slot."
+        },
+        {
+          "name": "hide-language-selection",
+          "description": "If `true` the language selection will be hidden."
+        },
+        {
+          "name": "legal-text",
+          "description": "Copyright and address text below the divider.\nIf not provided, uses the text from config based on region and language."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/footer/footer.tsx"
+        }
+      ]
+    },
     {
       "name": "ds-heading",
       "description": {
@@ -1765,65 +2448,162 @@
           ]
         },
         {
-          "name": "subtitle",
-          "description": "If `true` the heading gets displayed slimmer."
+          "name": "subtitle",
+          "description": "If `true` the heading gets displayed slimmer."
+        },
+        {
+          "name": "visual-level",
+          "description": "Make the visual style mimic a specific heading level.\nThis option allows you to make e.g. h1 visually look like h3,\nbut still keep it h1 in the markup.",
+          "values": [
+            {
+              "name": "2xl"
+            },
+            {
+              "name": "3xl"
+            },
+            {
+              "name": "4xl"
+            },
+            {
+              "name": "5xl"
+            },
+            {
+              "name": "base"
+            },
+            {
+              "name": "display"
+            },
+            {
+              "name": "display-2"
+            },
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "xl"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/heading/heading.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-hint",
+      "description": {
+        "kind": "markdown",
+        "value": "Hint displays contextual help via an info-circle trigger button.\nOn touch viewports (< 1024 px) it opens a ds-drawer (bottom sheet);\non desktop it opens a ds-popup (floating panel)."
+      },
+      "attributes": [
+        {
+          "name": "close-label",
+          "description": "Label for the close button shown in the drawer on touch viewports.\nWhen omitted the label is localised from the language config."
+        },
+        {
+          "name": "label",
+          "description": "Title text displayed in the hint panel.\nWhen provided, renders in the title section without needing a named slot."
         },
         {
-          "name": "visual-level",
-          "description": "Make the visual style mimic a specific heading level.\nThis option allows you to make e.g. h1 visually look like h3,\nbut still keep it h1 in the markup.",
+          "name": "placement",
+          "description": "Preferred placement of the popup panel on desktop viewports.",
           "values": [
             {
-              "name": "2xl"
-            },
-            {
-              "name": "3xl"
-            },
-            {
-              "name": "4xl"
-            },
-            {
-              "name": "5xl"
+              "name": "bottom"
             },
             {
-              "name": "base"
+              "name": "bottom-end"
             },
             {
-              "name": "display"
+              "name": "bottom-start"
             },
             {
-              "name": "display-2"
+              "name": "left"
             },
             {
-              "name": "h1"
+              "name": "left-end"
             },
             {
-              "name": "h2"
+              "name": "left-start"
             },
             {
-              "name": "h3"
+              "name": "right"
             },
             {
-              "name": "h4"
+              "name": "right-end"
             },
             {
-              "name": "h5"
+              "name": "right-start"
             },
             {
-              "name": "lg"
+              "name": "top"
             },
             {
-              "name": "md"
+              "name": "top-end"
             },
             {
-              "name": "xl"
+              "name": "top-start"
             }
           ]
+        },
+        {
+          "name": "trigger-label",
+          "description": "Accessible label for the trigger button.\nWhen omitted the label is localised from the language config."
         }
       ],
       "references": [
         {
           "name": "Source code",
-          "url": "https:/github.com/baloise/design-system/src/components/heading/heading.tsx"
+          "url": "https:/github.com/baloise/design-system/src/components/hint/hint.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-hint-text",
+      "description": {
+        "kind": "markdown",
+        "value": "Hint Text renders the body content inside a ds-hint panel. Place it as a direct child of ds-hint.\nProjects into the default slot of ds-hint."
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/hint/hint-text/hint-text.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-hint-title",
+      "description": {
+        "kind": "markdown",
+        "value": "Hint Title renders the heading inside a ds-hint panel. Place it as a direct child of ds-hint.\nUses light DOM (no shadow) so ds-hint's named slot projects the content correctly."
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/hint/hint-title/hint-title.tsx"
         }
       ]
     },
@@ -1881,6 +2661,9 @@
             {
               "name": "2xl"
             },
+            {
+              "name": "3xl"
+            },
             {
               "name": "large"
             },
@@ -1919,6 +2702,10 @@
             }
           ]
         },
+        {
+          "name": "src",
+          "description": "URL of an SVG file to fetch and display."
+        },
         {
           "name": "svg",
           "description": "Svg content."
@@ -2381,6 +3168,113 @@
         }
       ]
     },
+    {
+      "name": "ds-input-slider",
+      "description": {
+        "kind": "markdown",
+        "value": "Input slider renders a noUiSlider-backed slider with validation and label/description messaging."
+      },
+      "attributes": [
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid"
+        },
+        {
+          "name": "brand-color",
+          "description": "Recolors the connect (the filled progress track) with a brand color instead of the default\ngrey/primary style. Left of the handle uses the darker `-4` shade, right of it the lighter\n`-2` shade. Empty (default) keeps the current grey/primary look.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the slider. The default value is `primary`.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "debounce",
+          "description": "Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
+        },
+        {
+          "name": "description",
+          "description": "The description of the slider, which is displayed below the control."
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets an invalid style."
+        },
+        {
+          "name": "invalid-text",
+          "description": "The text to display when the slider is in an invalid state."
+        },
+        {
+          "name": "label",
+          "description": "The label of the slider, which is displayed above the control."
+        },
+        {
+          "name": "max",
+          "description": "The maximum value of the slider."
+        },
+        {
+          "name": "min",
+          "description": "The minimum value of the slider."
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not be mutated. noUiSlider has no native concept of\n`readonly`, so this is treated as equivalent to `disabled`."
+        },
+        {
+          "name": "required",
+          "description": "If `true`, the user must fill in a value before submitting a form."
+        },
+        {
+          "name": "step",
+          "description": "The granularity the value must adhere to, as a string so `\"any\"` (free,\ncontinuous dragging with no step snapping) can be expressed alongside\nnumeric step sizes."
+        },
+        {
+          "name": "value",
+          "description": "The value of the slider. Unlike a text input, a slider can never be\nempty; when unset it defaults to `min`. Internally starts as `NaN` (this\ncodebase's established \"empty number\" sentinel, see `isValueEmpty`) until\n`connectedCallback` resolves it — never actually rendered or emitted."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/input-slider/input-slider.tsx"
+        }
+      ]
+    },
     {
       "name": "ds-item",
       "description": {
@@ -2660,68 +3554,165 @@
       "references": [
         {
           "name": "Source code",
-          "url": "https:/github.com/baloise/design-system/src/components/list/list.tsx"
+          "url": "https:/github.com/baloise/design-system/src/components/list/list.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-logo",
+      "description": {
+        "kind": "markdown",
+        "value": "Logo displays animated Baloise or Helvetia brand logos with customizable color, size, and responsive sizing."
+      },
+      "attributes": [
+        {
+          "name": "animated",
+          "description": "Defines if the animation should be active"
+        },
+        {
+          "name": "brand",
+          "description": "Defines the brand of the logo. Default is 'baloise'.",
+          "values": [
+            {
+              "name": "baloise"
+            },
+            {
+              "name": "helvetia"
+            }
+          ]
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the logo.",
+          "values": [
+            {
+              "name": "primary"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Size of the logo svg",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/logo/logo.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-modal",
+      "description": {
+        "kind": "markdown",
+        "value": "Modal displays content in a dialog overlay using the native dialog element.\nSupports both slot-based sub-components (ds-modal-header, ds-modal-body) and\ndirect named slots (slot=\"header\", slot=\"body\")."
+      },
+      "attributes": [
+        {
+          "name": "closable",
+          "description": "If `true`, the modal can be dismissed via Escape key, close button, and backdrop click."
+        },
+        {
+          "name": "fullscreen",
+          "description": "If `true`, the modal covers the full viewport."
+        },
+        {
+          "name": "modal-width",
+          "description": "Width of the modal in pixels."
+        },
+        {
+          "name": "open",
+          "description": "If `true` the modal is open."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/modal/modal.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-modal-body",
+      "description": {
+        "kind": "markdown",
+        "value": "Modal Body renders the content area of a ds-modal. Place it as a direct child of ds-modal."
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/modal/modal-body/modal-body.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-modal-header",
+      "description": {
+        "kind": "markdown",
+        "value": "Modal Header renders the title area of a ds-modal. Place it as a direct child of ds-modal.\nIntentionally uses light DOM (no shadow) so that ds-modal's aria-labelledby can resolve\nthe heading text through the slot chain without crossing shadow boundaries."
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/modal/modal-header/modal-header.tsx"
         }
       ]
     },
     {
-      "name": "ds-logo",
+      "name": "ds-navbar",
       "description": {
         "kind": "markdown",
-        "value": "Logo displays animated Baloise or Helvetia brand logos with customizable color, size, and responsive sizing."
+        "value": "Navbar provides semantic navigation with responsive sidebar menu and keyboard support."
       },
       "attributes": [
         {
-          "name": "animated",
-          "description": "Defines if the animation should be active"
-        },
-        {
-          "name": "brand",
-          "description": "Defines the brand of the logo. Default is 'baloise'.",
+          "name": "container",
+          "description": "Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.\nMatches the `ds-container` sizing variants.",
           "values": [
             {
-              "name": "baloise"
+              "name": "compact"
             },
             {
-              "name": "helvetia"
-            }
-          ]
-        },
-        {
-          "name": "color",
-          "description": "Defines the color of the logo.",
-          "values": [
-            {
-              "name": "primary"
+              "name": "default"
             },
             {
-              "name": "white"
+              "name": "fluid"
             }
           ]
         },
         {
-          "name": "size",
-          "description": "Size of the logo svg",
-          "values": [
-            {
-              "name": "large"
-            },
-            {
-              "name": "lg"
-            },
-            {
-              "name": "sm"
-            },
-            {
-              "name": "small"
-            }
-          ]
+          "name": "light",
+          "description": "If `true` the navbar will use a light color scheme."
+        },
+        {
+          "name": "open",
+          "description": "If `true` the navbar will open the sidebar menu."
         }
       ],
       "references": [
         {
           "name": "Source code",
-          "url": "https:/github.com/baloise/design-system/src/components/logo/logo.tsx"
+          "url": "https:/github.com/baloise/design-system/src/components/navbar/navbar.tsx"
         }
       ]
     },
@@ -3002,6 +3993,120 @@
         }
       ]
     },
+    {
+      "name": "ds-popup",
+      "description": {
+        "kind": "markdown",
+        "value": "Popup displays anchored overlay content positioned relative to a trigger element.\nServes as a primitive for dropdowns, hints, menus, datepickers, and autocompletes.\n\nTrigger wiring:\n  Programmatic — set the `trigger` property to an HTMLElement; call `present()` / `dismiss()`.\n  Declarative  — add `data-popup=\"<id>\"` to any trigger element and set matching `id` on popup."
+      },
+      "attributes": [
+        {
+          "name": "arrow",
+          "description": "If `true`, renders a small arrow indicator pointing from the panel toward the trigger."
+        },
+        {
+          "name": "backdrop",
+          "description": "If `true`, a full-screen backdrop overlay is rendered behind the popup panel."
+        },
+        {
+          "name": "backdrop-dismiss",
+          "description": "If `true`, clicking outside the popup panel dismisses it."
+        },
+        {
+          "name": "closable",
+          "description": "If `true`, the popup can be dismissed via the Escape key and shows a close button."
+        },
+        {
+          "name": "group",
+          "description": "Group name for mutual-exclusion. Only one popup within the same group is open at a time."
+        },
+        {
+          "name": "label",
+          "description": "Accessible label for the popup panel (sets aria-label on the panel element)."
+        },
+        {
+          "name": "offset",
+          "description": "Offset in pixels between the trigger element and the popup panel."
+        },
+        {
+          "name": "open",
+          "description": "If `true` the popup is open."
+        },
+        {
+          "name": "placement",
+          "description": "Preferred placement of the popup relative to the trigger.",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "role",
+          "description": "ARIA role applied to the panel.\nControls focus-trap behaviour and the aria-haspopup value set on the trigger.\nUse \"dialog\" for rich content, \"listbox\" or \"menu\" for interactive option lists.",
+          "values": [
+            {
+              "name": "dialog"
+            },
+            {
+              "name": "grid"
+            },
+            {
+              "name": "listbox"
+            },
+            {
+              "name": "menu"
+            },
+            {
+              "name": "tree"
+            }
+          ]
+        },
+        {
+          "name": "trap-focus",
+          "description": "Override the automatic focus-trap behaviour.\nWhen undefined, trapping is enabled when `backdrop` is `true` and disabled otherwise."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/popup/popup.tsx"
+        }
+      ]
+    },
     {
       "name": "ds-progress-bar",
       "description": {
@@ -3073,6 +4178,10 @@
           "name": "disabled",
           "description": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
         },
+        {
+          "name": "hide-trigger",
+          "description": "If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible."
+        },
         {
           "name": "invalid",
           "description": "If `true` the component gets a invalid style."
@@ -3191,6 +4300,10 @@
           "name": "disabled",
           "description": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
         },
+        {
+          "name": "hide-trigger",
+          "description": "If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group."
+        },
         {
           "name": "invalid",
           "description": "If `true` the component gets a invalid style."
@@ -3336,49 +4449,180 @@
           "description": "Displays the segment items vertically on mobile"
         },
         {
-          "name": "wide",
-          "description": "If `true`, segment items expand to fill the available width equally."
+          "name": "wide",
+          "description": "If `true`, segment items expand to fill the available width equally."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/segment/segment/segment.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-segment-item",
+      "description": {
+        "kind": "markdown",
+        "value": "Segment item represents an individual selectable option within a segment group control with radio-like toggle behavior."
+      },
+      "attributes": [
+        {
+          "name": "description",
+          "description": "Description text to display in the segment item."
+        },
+        {
+          "name": "icon",
+          "description": "Name of the icon to display in the segment item."
+        },
+        {
+          "name": "label",
+          "description": "Label text to display in the segment item."
+        },
+        {
+          "name": "svg",
+          "description": "Svg content for the icon."
+        },
+        {
+          "name": "value",
+          "description": "A DOMString representing the value of the segment item. This is not displayed on the\nclient-side, but on the server this is the value given to the data\nsubmitted with the item's name."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/segment/segment-item.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-select",
+      "description": {
+        "kind": "markdown",
+        "value": "Select renders an accessible single- or multi-select dropdown backed by Slim Select,\nwith full form association and the standard DS field wrapper (label, description, validation)."
+      },
+      "attributes": [
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid automatically."
+        },
+        {
+          "name": "clearable",
+          "description": "If `true`, a clear button is shown inside the trigger that resets the value to `null` (single mode only)."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color state of the select field.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "description",
+          "description": "The description displayed below the select field."
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the select is non-interactive and excluded from form submission."
+        },
+        {
+          "name": "invalid",
+          "description": "If `true`, the component renders in an invalid state."
+        },
+        {
+          "name": "invalid-text",
+          "description": "Validation message shown when `invalid` is true."
+        },
+        {
+          "name": "label",
+          "description": "The label displayed above the select field."
+        },
+        {
+          "name": "multiple",
+          "description": "If `true`, the user can select multiple options.\nThe `value` prop and `dsChange` event will carry a `string[]` instead of `string | null`."
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text shown when no option is selected."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true`, the value cannot be changed by the user."
+        },
+        {
+          "name": "required",
+          "description": "If `true`, the user must select a value before submitting the form."
+        },
+        {
+          "name": "searchable",
+          "description": "If `true`, a search input is shown inside the dropdown to filter options."
+        },
+        {
+          "name": "value",
+          "description": "The current value of the select.\nIn single mode: `string | null`.\nIn multiple mode: `string[]` (array of selected values). As an HTML attribute, multiple\nvalues can also be passed as a comma-separated string, e.g. `value=\"it,ch\"`."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/select/select.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-select-optgroup",
+      "description": {
+        "kind": "markdown",
+        "value": "Select optgroup groups `ds-select-option` elements under a label, as HTML markup — the\ngrouped counterpart to `ds-select-option`. The element itself renders nothing visible;\n`ds-select` reads its `label` and its `ds-select-option` children."
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label displayed above this group of options."
         }
       ],
       "references": [
         {
           "name": "Source code",
-          "url": "https:/github.com/baloise/design-system/src/components/segment/segment/segment.tsx"
+          "url": "https:/github.com/baloise/design-system/src/components/select/select-optgroup.tsx"
         }
       ]
     },
     {
-      "name": "ds-segment-item",
+      "name": "ds-select-option",
       "description": {
         "kind": "markdown",
-        "value": "Segment item represents an individual selectable option within a segment group control with radio-like toggle behavior."
+        "value": "Select option declares a single selectable option as HTML markup, as an alternative to the\n`options` / `optionGroups` props on `ds-select` — useful for backend-only apps and easier\nmigration, where the consumer would rather render option markup than write JavaScript.\nThe element itself renders nothing visible; `ds-select` reads its `value`, `disabled`, and\ntext content and renders the actual dropdown option itself."
       },
       "attributes": [
         {
-          "name": "description",
-          "description": "Description text to display in the segment item."
-        },
-        {
-          "name": "icon",
-          "description": "Name of the icon to display in the segment item."
-        },
-        {
-          "name": "label",
-          "description": "Label text to display in the segment item."
-        },
-        {
-          "name": "svg",
-          "description": "Svg content for the icon."
+          "name": "disabled",
+          "description": "If `true`, the option cannot be selected."
         },
         {
           "name": "value",
-          "description": "A DOMString representing the value of the segment item. This is not displayed on the\nclient-side, but on the server this is the value given to the data\nsubmitted with the item's name."
+          "description": "The value submitted when this option is selected."
         }
       ],
       "references": [
         {
           "name": "Source code",
-          "url": "https:/github.com/baloise/design-system/src/components/segment/segment-item.tsx"
+          "url": "https:/github.com/baloise/design-system/src/components/select/select-option.tsx"
         }
       ]
     },
@@ -3684,24 +4928,6 @@
           "name": "fit-content",
           "description": "Defines the width of the stack to be exactly the width of the content."
         },
-        {
-          "name": "layout",
-          "description": "**Deprecated:** Use direction instead.",
-          "values": [
-            {
-              "name": "horizontal"
-            },
-            {
-              "name": "horizontal-reverse"
-            },
-            {
-              "name": "vertical"
-            },
-            {
-              "name": "vertical-reverse"
-            }
-          ]
-        },
         {
           "name": "p",
           "description": "Defines the padding of the stack element.",
@@ -4065,6 +5291,236 @@
         }
       ]
     },
+    {
+      "name": "ds-step",
+      "description": {
+        "kind": "markdown",
+        "value": "Step renders a single step button inside a ds-steps group, showing a numbered circle, label, and connector line."
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "If `true`, the step cannot be selected."
+        },
+        {
+          "name": "done",
+          "description": "If `true`, the step is completed. Shows a checkmark icon in the circle."
+        },
+        {
+          "name": "hidden",
+          "description": "If `true`, the step is hidden from the layout."
+        },
+        {
+          "name": "invalid",
+          "description": "If `true`, the step has an error. Shows an exclamation mark in the circle."
+        },
+        {
+          "name": "label",
+          "description": "Visible text label displayed below the circle."
+        },
+        {
+          "name": "name",
+          "description": "Unique name that links this step to a ds-step-panel[for] of the same value."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/steps/step/step.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-step-panel",
+      "description": {
+        "kind": "markdown",
+        "value": "Step Panel displays the content area associated with a ds-step, visible when its controlling step is selected."
+      },
+      "attributes": [
+        {
+          "name": "for",
+          "description": "Matches the `name` of the ds-step that controls this panel."
+        },
+        {
+          "name": "selected",
+          "description": "If `true`, the panel is visible. Managed by the parent ds-steps."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/steps/step-panel/step-panel.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-steps",
+      "description": {
+        "kind": "markdown",
+        "value": "Steps coordinates ds-step and ds-step-panel children into an accessible stepped interface, supporting panels and navigation variants."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Accent color applied to inactive circles and connector lines.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "Accessible label for the navigation landmark (navigation variant only)."
+        },
+        {
+          "name": "value",
+          "description": "The `name` of the currently selected ds-step (panels variant)."
+        },
+        {
+          "name": "vertical",
+          "description": "If `true`, the steplist is displayed vertically."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/steps/steps/steps.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-tab",
+      "description": {
+        "kind": "markdown",
+        "value": "Tab renders a single tab button inside a ds-tabs group, supporting both the panels and navigation variants."
+      },
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Unique name that links this tab to a ds-tab-panel[for] of the same value in panels mode."
+        },
+        {
+          "name": "selected",
+          "description": "If `true`, this tab is currently selected. Set by the parent ds-tabs."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/tabs/tab/tab.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-tab-panel",
+      "description": {
+        "kind": "markdown",
+        "value": "Tab Panel displays the content area associated with a ds-tab, visible when its controlling tab is selected."
+      },
+      "attributes": [
+        {
+          "name": "for",
+          "description": "Matches the `name` of the ds-tab that controls this panel."
+        },
+        {
+          "name": "selected",
+          "description": "If `true`, the panel is visible. Managed by the parent ds-tabs."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/tabs/tab-panel/tab-panel.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-tabs",
+      "description": {
+        "kind": "markdown",
+        "value": "Tabs coordinates ds-tab and ds-tab-panel children into an accessible tabbed interface, supporting panels and navigation variants."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Accent color applied to the bottom border track and selected indicator.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "fullwidth",
+          "description": "If `true`, tab buttons expand to fill the available width equally."
+        },
+        {
+          "name": "inverted",
+          "description": "If `true`, the component adapts for use on a dark (primary) background — all labels and the indicator become white."
+        },
+        {
+          "name": "label",
+          "description": "Accessible label for the navigation landmark (navigation variant only)."
+        },
+        {
+          "name": "value",
+          "description": "The `name` of the currently selected ds-tab (panels variant)."
+        },
+        {
+          "name": "vertical",
+          "description": "If `true`, the tablist is displayed vertically on the left side."
+        },
+        {
+          "name": "vertical-col-size",
+          "description": "The col size of the tablist in vertical mode.",
+          "values": [
+            {
+              "name": "full"
+            },
+            {
+              "name": "half"
+            },
+            {
+              "name": "one-quarter"
+            },
+            {
+              "name": "one-third"
+            },
+            {
+              "name": "three-quarters"
+            },
+            {
+              "name": "two-thirds"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/tabs/tabs/tabs.tsx"
+        }
+      ]
+    },
     {
       "name": "ds-tag",
       "description": {
@@ -4889,6 +6345,55 @@
           "url": "https:/github.com/baloise/design-system/src/components/toggle/toggle.tsx"
         }
       ]
+    },
+    {
+      "name": "ds-tooltip",
+      "description": {
+        "kind": "markdown",
+        "value": "Tooltip displays contextual information when users hover over, focus on, or tap a trigger element."
+      },
+      "attributes": [
+        {
+          "name": "content-width",
+          "description": "Defines the maximum width of the tooltip content in pixels."
+        },
+        {
+          "name": "offset",
+          "description": "Offset in pixels from the trigger element to the tooltip."
+        },
+        {
+          "name": "open",
+          "description": "When true, the tooltip is shown immediately on load without user interaction."
+        },
+        {
+          "name": "placement",
+          "description": "Preferred placement of the tooltip relative to the trigger.",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "reference",
+          "description": "Id of the reference element. Defaults to the trigger element."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/tooltip/tooltip.tsx"
+        }
+      ]
     }
   ]
 }