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

package/docs/html.html-data.json

@@ -0,0 +1,4894 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "ds-accordion",
+      "description": {
+        "kind": "markdown",
+        "value": "Accordion displays collapsible content sections with open/close toggle buttons and optional animations.\nPerfect for organizing large amounts of content into logical, expandable groups."
+      },
+      "attributes": [
+        {
+          "name": "button",
+          "description": "Displays the summary as a button and hides the default marker."
+        },
+        {
+          "name": "button-color",
+          "description": "The color of the button. Only applies if `button` is `true`.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "button-icon-close",
+          "description": "BalIcon of the close trigger button"
+        },
+        {
+          "name": "button-icon-open",
+          "description": "BalIcon of the open trigger button"
+        },
+        {
+          "name": "button-label-close",
+          "description": "Label of the close trigger button"
+        },
+        {
+          "name": "button-label-open",
+          "description": "Label of the open trigger button"
+        },
+        {
+          "name": "button-size",
+          "description": "The size of the button. Only applies if `button` is `true`.",
+          "values": [
+            {
+              "name": "lg"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "xl"
+            }
+          ]
+        },
+        {
+          "name": "button-wide",
+          "description": "If `true` the button is expanded to full width. Only applies if `button` is `true`."
+        },
+        {
+          "name": "group",
+          "description": "The name of the group the accordion belongs to. Accordions with the same group name will automatically\nclose when another accordion in the same group is opened."
+        },
+        {
+          "name": "marker",
+          "description": "The marker variant. Only applies if `button` is `false`.\nIf `''` the default marker is used, if `plus` a plus icon is used and if `plus-minus`\na plus icon for closed and a minus icon for open state is used.",
+          "values": [
+            {
+              "name": "none"
+            },
+            {
+              "name": "plus"
+            },
+            {
+              "name": "plus-minus"
+            }
+          ]
+        },
+        {
+          "name": "marker-position",
+          "description": "The position of the marker. Only applies if `button` is `false`.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "If `true` the accordion is open."
+        },
+        {
+          "name": "summary-level",
+          "description": "The heading level of the summary",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            }
+          ]
+        },
+        {
+          "name": "summary-title",
+          "description": "If `true` the summary is styled as a title."
+        },
+        {
+          "name": "summary-visual-level",
+          "description": "The visual heading level of the summary.",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/accordion/accordion.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-alert-container",
+      "description": {
+        "kind": "markdown",
+        "value": "Alert Container manages and displays a queue of toast or snackbar notifications with automatic dismissal and deduplication."
+      },
+      "attributes": [
+        {
+          "name": "animated",
+          "description": "If `true`, alerts animate in and out."
+        },
+        {
+          "name": "container",
+          "description": "Defines the container size constraint for the alert layout.",
+          "values": [
+            {
+              "name": "blog-page"
+            },
+            {
+              "name": "compact"
+            },
+            {
+              "name": "detail-page"
+            },
+            {
+              "name": "fluid"
+            },
+            {
+              "name": "wide"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Defines the display type: `toast` (top-right overlay) or `snackbar` (bottom banner).",
+          "values": [
+            {
+              "name": "snackbar"
+            },
+            {
+              "name": "toast"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/alert/alert-container.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-app",
+      "description": {
+        "kind": "markdown",
+        "value": "App is a root wrapper component that provides global configuration, focus management, and responsive behavior context for all design system components."
+      },
+      "attributes": [
+        {
+          "name": "animated",
+          "description": "Disables all animation inside the ds-app. Can be used for simplify e2e testing."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/app/app.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-badge",
+      "description": {
+        "kind": "markdown",
+        "value": "Badge displays a small indicator or counter on a child component to highlight notifications, counts, or status information."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Define the color for the badge.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "green"
+            },
+            {
+              "name": "grey"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "icon",
+          "description": "Name of the icon to show. If an icon is present, text should be hidden."
+        },
+        {
+          "name": "position",
+          "description": "If `true` the badge is added to the top right corner of the card.",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "card"
+            },
+            {
+              "name": "tabs"
+            }
+          ]
+        },
+        {
+          "name": "pulse",
+          "description": "If `true` the badge is added to the top right corner of the card."
+        },
+        {
+          "name": "size",
+          "description": "Define the size of badge. Small is recommended for tabs.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/badge/badge.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-button",
+      "description": {
+        "kind": "markdown",
+        "value": "Button provides a clickable element for triggering actions, submitting forms, or navigating — supporting text, icons, or both."
+      },
+      "attributes": [
+        {
+          "name": "a-1-1y-controls",
+          "description": "A11y attributes for the native button element."
+        },
+        {
+          "name": "a-1-1y-haspopup",
+          "description": "A11y attributes for the native button element."
+        },
+        {
+          "name": "a-1-1y-label",
+          "description": "A11y attributes for the native button element."
+        },
+        {
+          "name": "a-1-1y-title",
+          "description": "A11y attributes for the native button element."
+        },
+        {
+          "name": "circle",
+          "description": "If `true` the button is circular and width of the buttons is limited"
+        },
+        {
+          "name": "color",
+          "description": "The color to use from your application's color palette.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "info-light"
+            },
+            {
+              "name": "light"
+            },
+            {
+              "name": "link"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "primary-light"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "tertiary-green"
+            },
+            {
+              "name": "tertiary-purple"
+            },
+            {
+              "name": "tertiary-red"
+            },
+            {
+              "name": "tertiary-yellow"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "dashed",
+          "description": "If `true` the button has a dashed border."
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the user cannot interact with the button."
+        },
+        {
+          "name": "download",
+          "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
+        },
+        {
+          "name": "element-type",
+          "description": "The type of button.",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
+        },
+        {
+          "name": "flat",
+          "description": "If `true` the button has no padding and a reduced height"
+        },
+        {
+          "name": "href",
+          "description": "Specifies the URL of the page the link goes to"
+        },
+        {
+          "name": "icon",
+          "description": "Name of the left button icon"
+        },
+        {
+          "name": "icon-right",
+          "description": "Name of the right button icon"
+        },
+        {
+          "name": "icon-turn",
+          "description": "If `true` the icon turns"
+        },
+        {
+          "name": "inverted",
+          "description": "If `true` the button is inverted"
+        },
+        {
+          "name": "loading",
+          "description": "If `true` the label is hidden and a loading spinner is shown instead."
+        },
+        {
+          "name": "name",
+          "description": "The name of the button, which is submitted with the form data."
+        },
+        {
+          "name": "no-wrap",
+          "description": "The label of the button will not break"
+        },
+        {
+          "name": "outlined",
+          "description": "If `true` the button is outlined"
+        },
+        {
+          "name": "rel",
+          "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
+        },
+        {
+          "name": "rounded",
+          "description": "If `true` the button is rounded."
+        },
+        {
+          "name": "shadow",
+          "description": "If `true` adds a box shadow to improve readability on image background"
+        },
+        {
+          "name": "size",
+          "description": "Size of the button",
+          "values": [
+            {
+              "name": "lg"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xl"
+            }
+          ]
+        },
+        {
+          "name": "square",
+          "description": "If `true` the width of the buttons is limited"
+        },
+        {
+          "name": "target",
+          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.",
+          "values": [
+            {
+              "name": "_blank"
+            },
+            {
+              "name": "_parent"
+            },
+            {
+              "name": "_self"
+            },
+            {
+              "name": "_top"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the button, which is submitted with the form data."
+        },
+        {
+          "name": "wide",
+          "description": "If `true` the button has a full width"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/button/button.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-button-group",
+      "description": {
+        "kind": "markdown",
+        "value": "Button group groups multiple buttons together with layout control for alignment and direction."
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "The value of the button, which is submitted with the form data.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "direction",
+          "description": "`auto` will position the button items vertical and full width.\n`row` will force that the buttons are also horizontal on mobile.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "column"
+            },
+            {
+              "name": "row"
+            }
+          ]
+        },
+        {
+          "name": "reverse",
+          "description": "If `true` the flex direction is used in reverse on mobile."
+        },
+        {
+          "name": "wide",
+          "description": "If `true` the buttons will expand to fill the available space on mobile."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/button/button-group/button-group.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-card",
+      "description": {
+        "kind": "markdown",
+        "value": "Card groups related content together in a contained, visually distinct container with optional header and footer."
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "Defines the text alignment of the card content.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "clickable",
+          "description": "If `true` the card has a hover effect."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the card.",
+          "values": [
+            {
+              "name": "blue"
+            },
+            {
+              "name": "blue-light"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "danger-dark"
+            },
+            {
+              "name": "danger-darker"
+            },
+            {
+              "name": "danger-light"
+            },
+            {
+              "name": "green"
+            },
+            {
+              "name": "green-1"
+            },
+            {
+              "name": "green-2"
+            },
+            {
+              "name": "green-3"
+            },
+            {
+              "name": "green-light"
+            },
+            {
+              "name": "grey"
+            },
+            {
+              "name": "grey-dark"
+            },
+            {
+              "name": "grey-light"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "light-blue"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "primary-dark"
+            },
+            {
+              "name": "primary-light"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "purple-1"
+            },
+            {
+              "name": "purple-2"
+            },
+            {
+              "name": "purple-3"
+            },
+            {
+              "name": "purple-light"
+            },
+            {
+              "name": "purple-lighter"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "red-1"
+            },
+            {
+              "name": "red-2"
+            },
+            {
+              "name": "red-3"
+            },
+            {
+              "name": "red-light"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "success-dark"
+            },
+            {
+              "name": "success-darker"
+            },
+            {
+              "name": "success-light"
+            },
+            {
+              "name": "warning"
+            },
+            {
+              "name": "warning-dark"
+            },
+            {
+              "name": "warning-darker"
+            },
+            {
+              "name": "warning-light"
+            },
+            {
+              "name": "white"
+            },
+            {
+              "name": "yellow"
+            },
+            {
+              "name": "yellow-1"
+            },
+            {
+              "name": "yellow-2"
+            },
+            {
+              "name": "yellow-3"
+            },
+            {
+              "name": "yellow-light"
+            }
+          ]
+        },
+        {
+          "name": "dense",
+          "description": "If `true` the card gets a smaller padding."
+        },
+        {
+          "name": "flat",
+          "description": "If `true` the card loses its shadow."
+        },
+        {
+          "name": "fullheight",
+          "description": "If `true` the card uses 100% of the available height."
+        },
+        {
+          "name": "image-teaser",
+          "description": "If `true` the card image is displayed as a teaser, which means\nit is displayed with a large image.",
+          "values": [
+            {
+              "name": "wide-center"
+            },
+            {
+              "name": "wide-left"
+            },
+            {
+              "name": "wide-right"
+            }
+          ]
+        },
+        {
+          "name": "inverted",
+          "description": "If `true` the card background color becomes blue."
+        },
+        {
+          "name": "outlined",
+          "description": "If `true` the cards gets a light border and loses its shadow."
+        },
+        {
+          "name": "selected",
+          "description": "If `true` the card gets a light background to indicate a selection."
+        },
+        {
+          "name": "space",
+          "description": "Defines the space of the card content.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "square",
+          "description": "If `true` the card loses its border radius."
+        },
+        {
+          "name": "tile",
+          "description": "If `true` the card gets a tile look, it has a brand icon on the left"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/card/card.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-card-actions",
+      "description": {
+        "kind": "markdown",
+        "value": "Card actions renders a container for action buttons or controls at the end of a card."
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "The value of the button, which is submitted with the form data.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/card/card-actions/card-actions.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-card-content",
+      "description": {
+        "kind": "markdown",
+        "value": "Card content renders the main content area of a card for grouping body text and media."
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/card/card-content/card-content.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-card-header",
+      "description": {
+        "kind": "markdown",
+        "value": "Card header renders the header section of a card with optional layout direction for title and image/icon."
+      },
+      "attributes": [
+        {
+          "name": "direction",
+          "description": "",
+          "values": [
+            {
+              "name": "column"
+            },
+            {
+              "name": "row"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/card/card-header/card-header.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-card-subtitle",
+      "description": {
+        "kind": "markdown",
+        "value": "Card subtitle renders a subtitle heading for cards with customizable color and styling."
+      },
+      "attributes": [
+        {
+          "name": "bold",
+          "description": "If `true` the card text color is bold."
+        },
+        {
+          "name": "color",
+          "description": "If `true` the card text color becomes white.",
+          "values": [
+            {
+              "name": "blue"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        },
+        {
+          "name": "inverted",
+          "description": "If `true` the card text color becomes white."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/card/card-subtitle/card-subtitle.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-card-title",
+      "description": {
+        "kind": "markdown",
+        "value": "Card title renders a semantic heading for card titles with flexible visual styling independent of heading level."
+      },
+      "attributes": [
+        {
+          "name": "inverted",
+          "description": "If `true` the card text color becomes white."
+        },
+        {
+          "name": "level",
+          "description": "The actual heading level used in the HTML markup.",
+          "values": [
+            {
+              "name": "display"
+            },
+            {
+              "name": "display-2"
+            },
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "p"
+            },
+            {
+              "name": "span"
+            }
+          ]
+        },
+        {
+          "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/card/card-title/card-title.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-checkbox",
+      "description": {
+        "kind": "markdown",
+        "value": "Checkbox renders a checkbox form control for selecting multiple options from a group with optional label and help text."
+      },
+      "attributes": [
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid"
+        },
+        {
+          "name": "checked",
+          "description": "If `true`, the checkbox is selected."
+        },
+        {
+          "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 a invalid style."
+        },
+        {
+          "name": "label",
+          "description": "Label of the radio item."
+        },
+        {
+          "name": "label-position",
+          "description": "Defines the position of the label, either before or after the radio input. Default is after.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not 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": "tile",
+          "description": "Defines the layout of the input"
+        },
+        {
+          "name": "tile-color",
+          "description": "Defines the color of the tile checkbox.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "A DOMString representing the value of the checkbox. This is not displayed on the\nclient-side, but on the server this is the value given to the data\nsubmitted with the checkbox's name."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/checkbox/checkbox.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-checkbox-group",
+      "description": {
+        "kind": "markdown",
+        "value": "Checkbox Group groups multiple checkboxes so multiple options can be selected within a form field."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Defines the color of the input. The default value is `primary`.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "cols",
+          "description": "Defines the column size like the grid."
+        },
+        {
+          "name": "cols-mobile",
+          "description": "Defines the column size for mobile and bigger like the grid."
+        },
+        {
+          "name": "cols-tablet",
+          "description": "Defines the column size for tablet and bigger like the grid."
+        },
+        {
+          "name": "control",
+          "description": "If `true` it acts as the main form control"
+        },
+        {
+          "name": "description",
+          "description": "The description of the input, which is displayed below the input field."
+        },
+        {
+          "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 a 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 input, which is displayed above the input field."
+        },
+        {
+          "name": "label-position",
+          "description": "Defines the position of the label, either before or after the checkbox input. Default is after.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "loading",
+          "description": "Shows a loading indicator at the end of the input and replaces the end slot content."
+        },
+        {
+          "name": "name",
+          "description": "The name of the checkboxes in the group. Child checkboxes will inherit the name."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not 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": "tile",
+          "description": "Defines the layout of the input"
+        },
+        {
+          "name": "tile-color",
+          "description": "Defines the color of the tile checkbox.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "vertical",
+          "description": "Displays the checkboxes vertically"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/checkbox/checkbox-group/checkbox-group.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-close",
+      "description": {
+        "kind": "markdown",
+        "value": "Close renders a button element for closing or dismissing UI components with customizable size and color."
+      },
+      "attributes": [
+        {
+          "name": "button",
+          "description": "If `true` the close component will be rendered as a button element.\nThis is useful when you want to use the close component outside of a notification or alert, for example as a standalone button."
+        },
+        {
+          "name": "button-color",
+          "description": "Defines the color of the button variant. Only applicable if `button` is `true`.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "info-light"
+            },
+            {
+              "name": "light"
+            },
+            {
+              "name": "link"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "primary-light"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "tertiary-green"
+            },
+            {
+              "name": "tertiary-purple"
+            },
+            {
+              "name": "tertiary-red"
+            },
+            {
+              "name": "tertiary-yellow"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "If `true` the close component will be disabled and not interactive."
+        },
+        {
+          "name": "inverted",
+          "description": "If `true` it supports dark backgrounds."
+        },
+        {
+          "name": "size",
+          "description": "Define the size of badge. Small is recommended for tabs.",
+          "values": [
+            {
+              "name": "md"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/close/close.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-content",
+      "description": {
+        "kind": "markdown",
+        "value": "Content arranges content with flexible layout, alignment, and spacing options for structural layouts."
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "Defines the positioning like center, end or\ndefault to start.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "direction",
+          "description": "Defines the direction of the child elements. Default is column.",
+          "values": [
+            {
+              "name": "column"
+            },
+            {
+              "name": "column-reverse"
+            },
+            {
+              "name": "row"
+            },
+            {
+              "name": "row-reverse"
+            }
+          ]
+        },
+        {
+          "name": "layout",
+          "description": "**Deprecated:** Use direction instead.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "horizontal-reverse"
+            },
+            {
+              "name": "vertical"
+            },
+            {
+              "name": "vertical-reverse"
+            }
+          ]
+        },
+        {
+          "name": "space",
+          "description": "Defines the space between the child elements. Default is xx-small.",
+          "values": [
+            {
+              "name": "2xs"
+            },
+            {
+              "name": "3xs"
+            },
+            {
+              "name": "base"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-small"
+            },
+            {
+              "name": "xs"
+            },
+            {
+              "name": "xx-small"
+            },
+            {
+              "name": "xxx-small"
+            }
+          ]
+        },
+        {
+          "name": "text-align",
+          "description": "Defines the text positioning like center, right or\ndefault to left.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/content/content.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"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/divider/divider.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-heading",
+      "description": {
+        "kind": "markdown",
+        "value": "Heading renders semantic HTML heading elements (h1–h6) with flexible styling options for visual hierarchy independent of markup level."
+      },
+      "attributes": [
+        {
+          "name": "auto-level",
+          "description": "The actual heading level used in the HTML 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"
+            }
+          ]
+        },
+        {
+          "name": "color",
+          "description": "The theme type of the toast.",
+          "values": [
+            {
+              "name": "blue"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        },
+        {
+          "name": "inverted",
+          "description": "If `true` the color gets inverted for dark backgrounds"
+        },
+        {
+          "name": "level",
+          "description": "The actual heading level used in the HTML markup.",
+          "values": [
+            {
+              "name": "display"
+            },
+            {
+              "name": "display-2"
+            },
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "p"
+            },
+            {
+              "name": "span"
+            }
+          ]
+        },
+        {
+          "name": "no-wrap",
+          "description": "When true, the text will be truncated with a text overflow ellipsis instead of wrapping.\nPlease note that text overflow can only occur in block or inline-block level elements,\nas these elements require a width to overflow."
+        },
+        {
+          "name": "shadow",
+          "description": "If `true` adds a text shadow to improve readability on image background"
+        },
+        {
+          "name": "space",
+          "description": "Defines at which position the heading has spacing.",
+          "values": [
+            {
+              "name": "all"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "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-icon",
+      "description": {
+        "kind": "markdown",
+        "value": "Icon displays SVG icons with customizable color, size, rotation, and optional tile background."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The theme type of the button."
+        },
+        {
+          "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": "inline",
+          "description": "If `true` the icon has display inline style"
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets a invalid red style."
+        },
+        {
+          "name": "inverted",
+          "description": "If `true` the icon is inverted"
+        },
+        {
+          "name": "name",
+          "description": "Name of the baloise icon."
+        },
+        {
+          "name": "shadow",
+          "description": "If `true` adds a box shadow to improve readability on image background"
+        },
+        {
+          "name": "shape",
+          "description": "If `true` the icon is displayed in a circle with a background color.",
+          "values": [
+            {
+              "name": "circle"
+            },
+            {
+              "name": "triangle"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Defines the size of the icon.",
+          "values": [
+            {
+              "name": "2xl"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "x-small"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "xs"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xx-large"
+            }
+          ]
+        },
+        {
+          "name": "svg",
+          "description": "Svg content."
+        },
+        {
+          "name": "tile",
+          "description": "If `true` the icon acts as a tile with a background color."
+        },
+        {
+          "name": "tile-color",
+          "description": "If `true` the icon acts as a tile with a background color. Default is purple",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "turn",
+          "description": "If `true` the icon is rotated 180deg"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/icon/icon.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-input",
+      "description": {
+        "kind": "markdown",
+        "value": "Input renders a text input field with validation, masking, autocomplete, and optional help/error messaging."
+      },
+      "attributes": [
+        {
+          "name": "accept",
+          "description": "If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers."
+        },
+        {
+          "name": "allowed-key-press",
+          "description": "A regular expression that the key of the key press event is checked against and if not matching the expression the event will be prevented."
+        },
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid"
+        },
+        {
+          "name": "autocapitalize",
+          "description": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
+        },
+        {
+          "name": "autocomplete",
+          "description": "Indicates whether the value of the control can be automatically completed by the browser.",
+          "values": [
+            {
+              "name": "additional-name"
+            },
+            {
+              "name": "address-level1"
+            },
+            {
+              "name": "address-level2"
+            },
+            {
+              "name": "address-level3"
+            },
+            {
+              "name": "address-level4"
+            },
+            {
+              "name": "address-line1"
+            },
+            {
+              "name": "address-line2"
+            },
+            {
+              "name": "address-line3"
+            },
+            {
+              "name": "bday"
+            },
+            {
+              "name": "bday-day"
+            },
+            {
+              "name": "bday-month"
+            },
+            {
+              "name": "bday-year"
+            },
+            {
+              "name": "cc-additional-name"
+            },
+            {
+              "name": "cc-csc"
+            },
+            {
+              "name": "cc-exp"
+            },
+            {
+              "name": "cc-exp-month"
+            },
+            {
+              "name": "cc-exp-year"
+            },
+            {
+              "name": "cc-family-name"
+            },
+            {
+              "name": "cc-given-name"
+            },
+            {
+              "name": "cc-name"
+            },
+            {
+              "name": "cc-number"
+            },
+            {
+              "name": "cc-type"
+            },
+            {
+              "name": "country"
+            },
+            {
+              "name": "country-name"
+            },
+            {
+              "name": "current-password"
+            },
+            {
+              "name": "email"
+            },
+            {
+              "name": "family-name"
+            },
+            {
+              "name": "given-name"
+            },
+            {
+              "name": "honorific-prefix"
+            },
+            {
+              "name": "honorific-suffix"
+            },
+            {
+              "name": "impp"
+            },
+            {
+              "name": "language"
+            },
+            {
+              "name": "name"
+            },
+            {
+              "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": "autocorrect",
+          "description": "Whether auto correction should be enabled when the user is entering/editing the text value.",
+          "values": [
+            {
+              "name": "off"
+            },
+            {
+              "name": "on"
+            }
+          ]
+        },
+        {
+          "name": "autofocus",
+          "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the 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. This also impacts form bindings such as `ngModel` or `v-model`."
+        },
+        {
+          "name": "description",
+          "description": "The description of the input, which is displayed below the input field."
+        },
+        {
+          "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": "inputmode",
+          "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
+          "values": [
+            {
+              "name": "decimal"
+            },
+            {
+              "name": "email"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "numeric"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "url"
+            }
+          ]
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets a 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 input, which is displayed above the input field."
+        },
+        {
+          "name": "loading",
+          "description": "Shows a loading indicator at the end of the input and replaces the end slot content."
+        },
+        {
+          "name": "mask",
+          "description": "Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted with addition of Belgian enterprisenumber and IBAN.\nFormatting for 'contract-number': '99/1.234.567-1'\nFormatting for 'basic-contract-number': '99/1.234.567'\nFormatting for 'claim-number': ('73/001217/16.9')\nFormatting for 'offer-number': ('98/7.654.321')\nFormatting for 'be-enterprise-number': ('1234.567.890')\nFormatting for 'be-iban': ('BE68 5390 0754 7034')",
+          "values": [
+            {
+              "name": "basic-contract-number"
+            },
+            {
+              "name": "be-enterprise-number"
+            },
+            {
+              "name": "be-iban"
+            },
+            {
+              "name": "claim-number"
+            },
+            {
+              "name": "contract-number"
+            },
+            {
+              "name": "offer-number"
+            },
+            {
+              "name": "vehicle-registration-number"
+            }
+          ]
+        },
+        {
+          "name": "max",
+          "description": "The maximum value, which must not be less than its minimum (min attribute) value."
+        },
+        {
+          "name": "max-length",
+          "description": "Defines the max length of the value."
+        },
+        {
+          "name": "min",
+          "description": "The minimum value, which must not be greater than its maximum (max attribute) value."
+        },
+        {
+          "name": "min-length",
+          "description": "Defines the min length of the value."
+        },
+        {
+          "name": "multiple",
+          "description": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored."
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "pattern",
+          "description": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information."
+        },
+        {
+          "name": "placeholder",
+          "description": "Instructional text that shows before the input has a value."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not 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": "spellcheck",
+          "description": "If `true`, the element will have its spelling and grammar checked."
+        },
+        {
+          "name": "suffix",
+          "description": "Adds a suffix the the input-value after blur."
+        },
+        {
+          "name": "type",
+          "description": "Defines the type of the input (text, number, email ...).",
+          "values": [
+            {
+              "name": "color"
+            },
+            {
+              "name": "date"
+            },
+            {
+              "name": "datetime-local"
+            },
+            {
+              "name": "email"
+            },
+            {
+              "name": "file"
+            },
+            {
+              "name": "image"
+            },
+            {
+              "name": "month"
+            },
+            {
+              "name": "number"
+            },
+            {
+              "name": "password"
+            },
+            {
+              "name": "range"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "url"
+            },
+            {
+              "name": "week"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the input."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/input/input.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-item",
+      "description": {
+        "kind": "markdown",
+        "value": "Item displays a list entry that supports plain content, accordion, link, and button variants with optional icon, label, and description slots."
+      },
+      "attributes": [
+        {
+          "name": "accordion-group",
+          "description": "The name of the group the accordion belongs to. Accordions with the same group name will automatically\nclose when another accordion in the same group is opened."
+        },
+        {
+          "name": "accordion-marker",
+          "description": "The marker variant. Only applies if `variant` is set to `accordion`.\nIf `''` the default marker is used, if `plus` a plus icon is used and if `plus-minus`\na plus icon for closed and a minus icon for open state is used.",
+          "values": [
+            {
+              "name": "none"
+            },
+            {
+              "name": "plus"
+            },
+            {
+              "name": "plus-minus"
+            }
+          ]
+        },
+        {
+          "name": "accordion-marker-position",
+          "description": "The position of the marker. Only applies if `variant` is set to `accordion`.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "accordion-open",
+          "description": "If `true` the accordion is open."
+        },
+        {
+          "name": "action-icon",
+          "description": "The action icon variant. Controls which icon is displayed for `link` and `button` variants.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "download"
+            },
+            {
+              "name": "link"
+            },
+            {
+              "name": "link-external"
+            }
+          ]
+        },
+        {
+          "name": "description",
+          "description": "The description text displayed below the label."
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the user cannot interact with the item."
+        },
+        {
+          "name": "download",
+          "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
+        },
+        {
+          "name": "href",
+          "description": "Specifies the URL of the page the link goes to."
+        },
+        {
+          "name": "label",
+          "description": "The label text displayed as a heading inside the item."
+        },
+        {
+          "name": "label-level",
+          "description": "The semantic heading level of the label element.",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            }
+          ]
+        },
+        {
+          "name": "label-size",
+          "description": "The visual size of the label. Defaults to `labelLevel` if not set.",
+          "values": [
+            {
+              "name": "2xl"
+            },
+            {
+              "name": "3xl"
+            },
+            {
+              "name": "base"
+            },
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            }
+          ]
+        },
+        {
+          "name": "rel",
+          "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
+        },
+        {
+          "name": "target",
+          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.",
+          "values": [
+            {
+              "name": "_blank"
+            },
+            {
+              "name": "_parent"
+            },
+            {
+              "name": "_self"
+            },
+            {
+              "name": "_top"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The visual and functional variant of the item.",
+          "values": [
+            {
+              "name": "accordion"
+            },
+            {
+              "name": "button"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "link"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/list/item/item.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-label",
+      "description": {
+        "kind": "markdown",
+        "value": "Label renders a semantic HTML label element for form inputs with optional required indicator and customizable styling."
+      },
+      "attributes": [
+        {
+          "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": "html-for",
+          "description": "The value of the for attribute must be a single id for a labeled\nform-related element in the same document as the <label> element.\nSo, any given label element can be associated with only one form control."
+        },
+        {
+          "name": "html-id",
+          "description": "Define the id of the native label element"
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets a invalid red style."
+        },
+        {
+          "name": "no-wrap",
+          "description": "When true, the text will be truncated with a text overflow ellipsis instead of wrapping.\nPlease note that text overflow can only occur in block or inline-block level elements,\nas these elements require a width to overflow."
+        },
+        {
+          "name": "required",
+          "description": "If `true` the form control needs to be filled. If it is set to\n`false` an optional label is added to the label.."
+        },
+        {
+          "name": "size",
+          "description": "Defines the size of the font. Default is like a heading 5 and small is used\nwith the form fields.",
+          "values": [
+            {
+              "name": "2xl"
+            },
+            {
+              "name": "3xl"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "x-large"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "xx-large"
+            },
+            {
+              "name": "xxx-large"
+            }
+          ]
+        },
+        {
+          "name": "valid",
+          "description": "If `true` the component gets a valid green style."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/label/label.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-list",
+      "description": {
+        "kind": "markdown",
+        "value": "List renders semantic HTML list elements (ordered or unordered) for grouping related items."
+      },
+      "attributes": [
+        {
+          "name": "ordered",
+          "description": "If `true`, renders an ordered list (`<ol>`); otherwise renders an unordered list (`<ul>`)."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "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-notification",
+      "description": {
+        "kind": "markdown",
+        "value": "Notification presents inline feedback messages for success, warning, error, or informational states with optional close action."
+      },
+      "attributes": [
+        {
+          "name": "alert",
+          "description": "If `true` the notification will be displayed as an alert, otherwise as a status message."
+        },
+        {
+          "name": "closable",
+          "description": "If `true` the notification can be closed by the user."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the element\nColor type primary is deprecated, please use info instead.",
+          "values": [
+            {
+              "name": "base"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "outline-base"
+            },
+            {
+              "name": "outline-green"
+            },
+            {
+              "name": "outline-purple"
+            },
+            {
+              "name": "outline-red"
+            },
+            {
+              "name": "outline-yellow"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "heading",
+          "description": "Defines the heading of the notification."
+        },
+        {
+          "name": "no-icon",
+          "description": "If `true` there will be no icon provided"
+        },
+        {
+          "name": "size",
+          "description": "Defines the size of the notification, small, medium or large.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/notification/notification.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-number-input",
+      "description": {
+        "kind": "markdown",
+        "value": "Number input renders a specialized text input for numeric values with increment/decrement buttons, formatting, and validation."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Defines the color state of the input.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "debounce",
+          "description": "Milliseconds to wait before triggering `dsChange` after each keystroke."
+        },
+        {
+          "name": "decimal",
+          "description": "Number of allowed decimal places. `0` means integers only."
+        },
+        {
+          "name": "description",
+          "description": "The description displayed below the field."
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the element is not mutable, focusable, or submitted with the form."
+        },
+        {
+          "name": "exact-number",
+          "description": "When `true`, displays `0` instead of an empty field when value is null."
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets an invalid style."
+        },
+        {
+          "name": "invalid-text",
+          "description": "Text shown in the description area when `invalid` is true."
+        },
+        {
+          "name": "label",
+          "description": "The label displayed above the field."
+        },
+        {
+          "name": "max",
+          "description": "The maximum value."
+        },
+        {
+          "name": "min",
+          "description": "The minimum value."
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "only-positive",
+          "description": "When `true`, only positive numbers are accepted (blocks the minus sign)."
+        },
+        {
+          "name": "pattern",
+          "description": "Overrides the auto-generated input validation pattern."
+        },
+        {
+          "name": "placeholder",
+          "description": "Instructional text shown when the input has no value."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true`, the element cannot be edited by the user."
+        },
+        {
+          "name": "required",
+          "description": "If `true`, the user must fill in a value before submitting a form."
+        },
+        {
+          "name": "suffix",
+          "description": "Text appended to the formatted value after blur (e.g. `\"CHF\"`)."
+        },
+        {
+          "name": "value",
+          "description": "The numeric value of the input. `null` means no value."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/number-input/number-input.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-pagination",
+      "description": {
+        "kind": "markdown",
+        "value": "Pagination provides navigation controls for moving between pages of content with customizable size, alignment, and layout."
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "Align the buttons to start, center or end",
+          "values": [
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables component"
+        },
+        {
+          "name": "label",
+          "description": "The label for the navigation landmark"
+        },
+        {
+          "name": "page-range",
+          "description": "Specify the max visible pages before and after the selected page"
+        },
+        {
+          "name": "size",
+          "description": "Size of the buttons",
+          "values": [
+            {
+              "name": "sm"
+            }
+          ]
+        },
+        {
+          "name": "sticky",
+          "description": "If 'true, the pagination will be sticky to the top"
+        },
+        {
+          "name": "text-next",
+          "description": "The label for the next page button"
+        },
+        {
+          "name": "text-previous",
+          "description": "The label for the previous page button"
+        },
+        {
+          "name": "top",
+          "description": "If sticky, the top position will be determined by this value"
+        },
+        {
+          "name": "total-pages",
+          "description": "The total amount of pages"
+        },
+        {
+          "name": "value",
+          "description": "Current selected page"
+        },
+        {
+          "name": "variant",
+          "description": "Defines the layout of the pagination",
+          "values": [
+            {
+              "name": "dots"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/pagination/pagination.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-progress-bar",
+      "description": {
+        "kind": "markdown",
+        "value": "Progress bar displays a visual indicator of progress or completion for a task or operation with percentage and label."
+      },
+      "attributes": [
+        {
+          "name": "background",
+          "description": "The background color",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "color",
+          "description": "The progress bar color",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the bar in percentage. So min is 0 and 100 would be the max value."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/progress-bar/progress-bar.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-radio",
+      "description": {
+        "kind": "markdown",
+        "value": "Radio renders a radio button form control for selecting one option from a group with optional label and help text."
+      },
+      "attributes": [
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid"
+        },
+        {
+          "name": "checked",
+          "description": "If `true`, the checkbox is selected."
+        },
+        {
+          "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 a invalid style."
+        },
+        {
+          "name": "label",
+          "description": "Label of the radio item."
+        },
+        {
+          "name": "label-position",
+          "description": "Defines the position of the label, either before or after the radio input. Default is after.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not 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": "tile",
+          "description": "Defines the layout of the input"
+        },
+        {
+          "name": "tile-color",
+          "description": "Defines the color of the tile radio.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "A DOMString representing the value of the radio. This is not displayed on the\nclient-side, but on the server this is the value given to the data\nsubmitted with the radio's name."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/radio/radio.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-radio-group",
+      "description": {
+        "kind": "markdown",
+        "value": "Radio Group groups multiple radio inputs so only one option can be selected at a time within a form field."
+      },
+      "attributes": [
+        {
+          "name": "allow-empty-selection",
+          "description": "If `true`, the radios can be deselected."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the input. The default value is `primary`.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "cols",
+          "description": "Defines the column size like the grid."
+        },
+        {
+          "name": "cols-mobile",
+          "description": "Defines the column size for mobile and bigger like the grid."
+        },
+        {
+          "name": "cols-tablet",
+          "description": "Defines the column size for tablet and bigger like the grid."
+        },
+        {
+          "name": "description",
+          "description": "The description of the input, which is displayed below the input field."
+        },
+        {
+          "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 a 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 input, which is displayed above the input field."
+        },
+        {
+          "name": "label-position",
+          "description": "Defines the position of the label, either before or after the radio input. Default is after.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "loading",
+          "description": "Shows a loading indicator at the end of the input and replaces the end slot content."
+        },
+        {
+          "name": "name",
+          "description": "The name of the radios in the group. Child radios will inherit the name."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not 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": "tile",
+          "description": "Defines the layout of the input"
+        },
+        {
+          "name": "tile-color",
+          "description": "Defines the color of the tile checkbox.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the radio group."
+        },
+        {
+          "name": "vertical",
+          "description": "Displays the radios vertically."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/radio/radio-group/radio-group.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-segment",
+      "description": {
+        "kind": "markdown",
+        "value": "Segment renders a group of button-like controls for selecting a single option from multiple choices with toggle behavior."
+      },
+      "attributes": [
+        {
+          "name": "allow-empty-selection",
+          "description": "If `true`, the segment items can be deselected."
+        },
+        {
+          "name": "description",
+          "description": "The description of the input, which is displayed below the input field."
+        },
+        {
+          "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": "icon-only",
+          "description": "If `true`, the segment only shows icons without labels."
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets a 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 input, which is displayed above the input field."
+        },
+        {
+          "name": "loading",
+          "description": "Shows a loading indicator at the end of the input and replaces the end slot content."
+        },
+        {
+          "name": "name",
+          "description": "The name of the segment items in the group. Child items will inherit the name."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not 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 segment group."
+        },
+        {
+          "name": "vertical",
+          "description": "Displays the segment items vertically"
+        },
+        {
+          "name": "vertical-on-mobile",
+          "description": "Displays the segment items vertically on mobile"
+        },
+        {
+          "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-shape",
+      "description": {
+        "kind": "markdown",
+        "value": "Shape renders decorative geometric shapes with customizable color, size, rotation, and variation."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The shape color",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "green-light"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "purple-light"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "red-light"
+            },
+            {
+              "name": "yellow"
+            },
+            {
+              "name": "yellow-light"
+            }
+          ]
+        },
+        {
+          "name": "rotation",
+          "description": "The shape rotation",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "180"
+            },
+            {
+              "name": "270"
+            },
+            {
+              "name": "90"
+            }
+          ]
+        },
+        {
+          "name": "variation",
+          "description": "The shape variation",
+          "values": [
+            {
+              "name": "1"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "3"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/shape/shape.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-snackbar",
+      "description": {
+        "kind": "markdown",
+        "value": "Snackbar displays brief feedback messages at the bottom of the screen with optional action buttons and dismissal control."
+      },
+      "attributes": [
+        {
+          "name": "action",
+          "description": "Defines the icon of the notification, if not provided it will be derived from the color property"
+        },
+        {
+          "name": "action-href",
+          "description": "Specifies the URL of the page the link goes to"
+        },
+        {
+          "name": "action-icon",
+          "description": "Defines the icon of the action button."
+        },
+        {
+          "name": "action-target",
+          "description": "Specifies where to open the linked document.",
+          "values": [
+            {
+              "name": "_blank"
+            },
+            {
+              "name": "_parent"
+            },
+            {
+              "name": "_self"
+            },
+            {
+              "name": "_top"
+            }
+          ]
+        },
+        {
+          "name": "closable",
+          "description": "If `true` the notification can be closed by the user."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the element\nColor type primary is deprecated, please use info instead.",
+          "values": [
+            {
+              "name": "base"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "heading",
+          "description": "Defines the heading of the notification."
+        },
+        {
+          "name": "icon",
+          "description": "Defines the icon of the notification."
+        },
+        {
+          "name": "message",
+          "description": "Defines the message of the notification as html content"
+        },
+        {
+          "name": "svg",
+          "description": "Defines the svg content of the icon"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/alert/snackbar/snackbar.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-spinner",
+      "description": {
+        "kind": "markdown",
+        "value": "Spinner displays an animated loading indicator with customizable color, size, and variation."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "**Deprecated:** Use inverted=\"true\" for white spinner instead.",
+          "values": [
+            {
+              "name": "blue"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        },
+        {
+          "name": "deactivated",
+          "description": "If `true` the component will not add the spinner animation svg"
+        },
+        {
+          "name": "inverted",
+          "description": "If `true` the component can be used on dark background"
+        },
+        {
+          "name": "label",
+          "description": "Visible label rendered next to the spinner. When omitted a translated aria-label is applied automatically."
+        },
+        {
+          "name": "label-position",
+          "description": "Position of the visible label relative to the spinner animation.",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Defines the size of the spinner. If `sm` the spinner is smaller.",
+          "values": [
+            {
+              "name": "sm"
+            }
+          ]
+        },
+        {
+          "name": "small",
+          "description": "**Deprecated:** Use size=\"sm\" instead."
+        },
+        {
+          "name": "variation",
+          "description": "Defines the look of the spinner",
+          "values": [
+            {
+              "name": "circle"
+            },
+            {
+              "name": "logo"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/spinner/spinner.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-stack",
+      "description": {
+        "kind": "markdown",
+        "value": "Stack arranges child elements in a vertical or horizontal layout with customizable spacing and alignment options."
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "Defines the text positioning like center, right or default to start.",
+          "values": [
+            {
+              "name": "bottom center"
+            },
+            {
+              "name": "bottom end"
+            },
+            {
+              "name": "bottom start"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            },
+            {
+              "name": "top center"
+            },
+            {
+              "name": "top end"
+            },
+            {
+              "name": "top start"
+            }
+          ]
+        },
+        {
+          "name": "direction",
+          "description": "Defines the direction of the child elements. Default is column.",
+          "values": [
+            {
+              "name": "column"
+            },
+            {
+              "name": "column-reverse"
+            },
+            {
+              "name": "row"
+            },
+            {
+              "name": "row-reverse"
+            }
+          ]
+        },
+        {
+          "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.",
+          "values": [
+            {
+              "name": "2xs"
+            },
+            {
+              "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": "xxl"
+            }
+          ]
+        },
+        {
+          "name": "px",
+          "description": "Defines the horizontal padding left and right of the stack element.",
+          "values": [
+            {
+              "name": "2xs"
+            },
+            {
+              "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": "xxl"
+            }
+          ]
+        },
+        {
+          "name": "py",
+          "description": "Defines the vertical padding top and bottom of the stack element.",
+          "values": [
+            {
+              "name": "2xs"
+            },
+            {
+              "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": "xxl"
+            }
+          ]
+        },
+        {
+          "name": "space",
+          "description": "Defines the space between the child elements.",
+          "values": [
+            {
+              "name": "2xs"
+            },
+            {
+              "name": "auto"
+            },
+            {
+              "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": "xxl"
+            }
+          ]
+        },
+        {
+          "name": "space-column",
+          "description": "Defines the column space between the child elements.",
+          "values": [
+            {
+              "name": "2xs"
+            },
+            {
+              "name": "auto"
+            },
+            {
+              "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": "xxl"
+            }
+          ]
+        },
+        {
+          "name": "space-row",
+          "description": "Defines the row space between the child elements.",
+          "values": [
+            {
+              "name": "2xs"
+            },
+            {
+              "name": "auto"
+            },
+            {
+              "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": "xxl"
+            }
+          ]
+        },
+        {
+          "name": "use-wrap",
+          "description": "Defines if the child elements will wrap to the next line if there is not enough space left."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/stack/stack.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-tag",
+      "description": {
+        "kind": "markdown",
+        "value": "Tag renders a compact label element for categorizing, filtering, or marking content with optional close button."
+      },
+      "attributes": [
+        {
+          "name": "closable",
+          "description": "The theme type of the tag."
+        },
+        {
+          "name": "color",
+          "description": "The theme type of the tag.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "green"
+            },
+            {
+              "name": "green-dark"
+            },
+            {
+              "name": "green-light"
+            },
+            {
+              "name": "grey"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "purple-dark"
+            },
+            {
+              "name": "purple-light"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "red-dark"
+            },
+            {
+              "name": "red-light"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            },
+            {
+              "name": "yellow"
+            },
+            {
+              "name": "yellow-dark"
+            },
+            {
+              "name": "yellow-light"
+            }
+          ]
+        },
+        {
+          "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": "Overwrites the default color to invalid style"
+        },
+        {
+          "name": "position",
+          "description": "Choosing left or center the tag is aligned to that side in the ds-card.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "shape",
+          "description": "The shape of the tag element like square or pill",
+          "values": [
+            {
+              "name": "pill"
+            },
+            {
+              "name": "square"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The size of the tag element",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/tag/tag.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-tag-group",
+      "description": {
+        "kind": "markdown",
+        "value": "Tag Group arranges multiple tag elements in a horizontal or wrapping layout."
+      },
+      "attributes": [],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/tag/tag-group/tag-group.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-text",
+      "description": {
+        "kind": "markdown",
+        "value": "Text renders paragraph and article content with flexible sizing, styling, and semantic emphasis options."
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "If `true` the component gets a invalid style.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "justify"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "bold",
+          "description": "If `true` the text is bold"
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the text.",
+          "values": [
+            {
+              "name": "black"
+            },
+            {
+              "name": "blue"
+            },
+            {
+              "name": "blue-dark"
+            },
+            {
+              "name": "blue-light"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "grey"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "light-blue"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "primary-light"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        },
+        {
+          "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": "heading",
+          "description": "If `true` the text has heading font family"
+        },
+        {
+          "name": "inline",
+          "description": "If `true` the text is shown as a display inline"
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets a invalid style."
+        },
+        {
+          "name": "inverted",
+          "description": "If `true` the color gets inverted for dark backgrounds"
+        },
+        {
+          "name": "no-wrap",
+          "description": "When true, the text will be truncated with a text overflow ellipsis instead of wrapping.\nPlease note that text overflow can only occur in block or inline-block level elements,\nas these elements require a width to overflow."
+        },
+        {
+          "name": "shadow",
+          "description": "If `true` adds a text shadow to improve readability on image background"
+        },
+        {
+          "name": "size",
+          "description": "Defines the size of the paragraph",
+          "values": [
+            {
+              "name": "2xl"
+            },
+            {
+              "name": "3xl"
+            },
+            {
+              "name": "4xl"
+            },
+            {
+              "name": "5xl"
+            },
+            {
+              "name": "base"
+            },
+            {
+              "name": "block"
+            },
+            {
+              "name": "lead"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "xs"
+            }
+          ]
+        },
+        {
+          "name": "space",
+          "description": "Defines at which position the heading has spacing.",
+          "values": [
+            {
+              "name": "all"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "subtitle",
+          "description": "If `true` the text has subtitle font family"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/text/text.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-textarea",
+      "description": {
+        "kind": "markdown",
+        "value": "Textarea renders a multi-line text input field with validation, resizing, and optional help/error messaging."
+      },
+      "attributes": [
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid."
+        },
+        {
+          "name": "autocapitalize",
+          "description": "Indicates whether and how the text value should be automatically capitalized."
+        },
+        {
+          "name": "autocomplete",
+          "description": "Indicates whether the value of the control can be automatically completed by the browser.",
+          "values": [
+            {
+              "name": "additional-name"
+            },
+            {
+              "name": "address-level1"
+            },
+            {
+              "name": "address-level2"
+            },
+            {
+              "name": "address-level3"
+            },
+            {
+              "name": "address-level4"
+            },
+            {
+              "name": "address-line1"
+            },
+            {
+              "name": "address-line2"
+            },
+            {
+              "name": "address-line3"
+            },
+            {
+              "name": "bday"
+            },
+            {
+              "name": "bday-day"
+            },
+            {
+              "name": "bday-month"
+            },
+            {
+              "name": "bday-year"
+            },
+            {
+              "name": "cc-additional-name"
+            },
+            {
+              "name": "cc-csc"
+            },
+            {
+              "name": "cc-exp"
+            },
+            {
+              "name": "cc-exp-month"
+            },
+            {
+              "name": "cc-exp-year"
+            },
+            {
+              "name": "cc-family-name"
+            },
+            {
+              "name": "cc-given-name"
+            },
+            {
+              "name": "cc-name"
+            },
+            {
+              "name": "cc-number"
+            },
+            {
+              "name": "cc-type"
+            },
+            {
+              "name": "country"
+            },
+            {
+              "name": "country-name"
+            },
+            {
+              "name": "current-password"
+            },
+            {
+              "name": "email"
+            },
+            {
+              "name": "family-name"
+            },
+            {
+              "name": "given-name"
+            },
+            {
+              "name": "honorific-prefix"
+            },
+            {
+              "name": "honorific-suffix"
+            },
+            {
+              "name": "impp"
+            },
+            {
+              "name": "language"
+            },
+            {
+              "name": "name"
+            },
+            {
+              "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 a form control should have input focus when the page loads."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color state of the textarea.",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "cols",
+          "description": "The visible width of the text control, in average character widths."
+        },
+        {
+          "name": "debounce",
+          "description": "Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke."
+        },
+        {
+          "name": "description",
+          "description": "The description displayed below the textarea field."
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the element is not mutable, focusable, or even submitted with the form."
+        },
+        {
+          "name": "inputmode",
+          "description": "A hint to the browser for which keyboard to display.",
+          "values": [
+            {
+              "name": "decimal"
+            },
+            {
+              "name": "email"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "numeric"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "url"
+            }
+          ]
+        },
+        {
+          "name": "invalid",
+          "description": "If `true` the component gets an invalid style."
+        },
+        {
+          "name": "invalid-text",
+          "description": "Text shown in the description area when `invalid` is true."
+        },
+        {
+          "name": "label",
+          "description": "The label displayed above the textarea field."
+        },
+        {
+          "name": "max-length",
+          "description": "Specifies the maximum number of characters that the user can enter."
+        },
+        {
+          "name": "min-length",
+          "description": "Specifies the minimum number of characters that the user can enter."
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "placeholder",
+          "description": "Instructional text that shows before the textarea 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": "rows",
+          "description": "The number of visible text lines for the control."
+        },
+        {
+          "name": "value",
+          "description": "The value of the textarea."
+        },
+        {
+          "name": "wrap",
+          "description": "Indicates how the control wraps text.",
+          "values": [
+            {
+              "name": "hard"
+            },
+            {
+              "name": "off"
+            },
+            {
+              "name": "soft"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/textarea/textarea.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-toast",
+      "description": {
+        "kind": "markdown",
+        "value": "Toast displays temporary notification messages that appear at the top of the page and auto-dismiss with optional action buttons and close control."
+      },
+      "attributes": [
+        {
+          "name": "action",
+          "description": "Defines the icon of the notification, if not provided it will be derived from the color property"
+        },
+        {
+          "name": "action-href",
+          "description": "Specifies the URL of the page the link goes to"
+        },
+        {
+          "name": "action-icon",
+          "description": "Defines the icon of the action button."
+        },
+        {
+          "name": "action-target",
+          "description": "Specifies where to open the linked document.",
+          "values": [
+            {
+              "name": "_blank"
+            },
+            {
+              "name": "_parent"
+            },
+            {
+              "name": "_self"
+            },
+            {
+              "name": "_top"
+            }
+          ]
+        },
+        {
+          "name": "closable",
+          "description": "If `true` the notification can be closed by the user."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the element\nColor type primary is deprecated, please use info instead.",
+          "values": [
+            {
+              "name": "base"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "heading",
+          "description": "Defines the heading of the notification."
+        },
+        {
+          "name": "icon",
+          "description": "Defines the icon of the notification."
+        },
+        {
+          "name": "message",
+          "description": "Defines the message of the notification as html content"
+        },
+        {
+          "name": "svg",
+          "description": "Defines the svg content of the icon"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/alert/toast/toast.tsx"
+        }
+      ]
+    },
+    {
+      "name": "ds-toggle",
+      "description": {
+        "kind": "markdown",
+        "value": "Toggle renders a switch-like form control for toggling between on/off states with optional label and help text."
+      },
+      "attributes": [
+        {
+          "name": "auto-invalid-off",
+          "description": "If `true`, in Angular reactive forms the control will not be set invalid"
+        },
+        {
+          "name": "checked",
+          "description": "If `true`, the toggle is selected."
+        },
+        {
+          "name": "color",
+          "description": "Defines the color of the tile toggle.",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "dense",
+          "description": "If `true`, the toggle is dense and has less size."
+        },
+        {
+          "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 a invalid style."
+        },
+        {
+          "name": "label",
+          "description": "Label of the toggle item."
+        },
+        {
+          "name": "label-position",
+          "description": "Defines the position of the label, either before or after the toggle input. Default is after.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "The name of the control, which is submitted with the form data."
+        },
+        {
+          "name": "readonly",
+          "description": "If `true` the element can not 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": "tile",
+          "description": "Defines the layout of the input"
+        },
+        {
+          "name": "value",
+          "description": "A DOMString representing the value of the toggle. This is not displayed on the\nclient-side, but on the server this is the value given to the data\nsubmitted with the toggle's name."
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "https:/github.com/baloise/design-system/src/components/toggle/toggle.tsx"
+        }
+      ]
+    }
+  ]
+}