@otto-de/b2b-core-components 1.0.0

package/dist/custom-elements.json

@@ -0,0 +1,2299 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "b2b-alert",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "custom-icon",
+          "description": "Whether or not you want to use a custom icon. Per default, it is false."
+        },
+        {
+          "name": "has-close-button",
+          "description": "Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed."
+        },
+        {
+          "name": "opened",
+          "description": "Whether the alert is currently open. Set to true to display the alert."
+        },
+        {
+          "name": "size",
+          "description": "The size of the alert. Per default it is large. If set to small, the alert will only have an icon.",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "The type of alert. Per default it is info.",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-anchor",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "download",
+          "description": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\ndefaults to the URL string, but can be changed by the user."
+        },
+        {
+          "name": "href",
+          "description": "The URL or URL fragment the anchor points to. This is required."
+        },
+        {
+          "name": "size",
+          "description": "The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px.",
+          "values": [
+            {
+              "name": "100"
+            },
+            {
+              "name": "inherit"
+            }
+          ]
+        },
+        {
+          "name": "target",
+          "description": "The target the URL will be opened into. The default is self.",
+          "values": [
+            {
+              "name": "blank"
+            },
+            {
+              "name": "parent"
+            },
+            {
+              "name": "self"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-button",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Whether the button is currently active. Set to true when using the button to signify a permanent active state"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the button is disabled."
+        },
+        {
+          "name": "download",
+          "description": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\ndefaults to the URL string, but can be changed by the user."
+        },
+        {
+          "name": "href",
+          "description": "An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files"
+        },
+        {
+          "name": "loading",
+          "description": "Whether the button is currently loading. Set to true to hide text and display loading spinner instead"
+        },
+        {
+          "name": "size",
+          "description": "The size of the button, 100 is the default state",
+          "values": [
+            {
+              "name": "100"
+            },
+            {
+              "name": "50"
+            }
+          ]
+        },
+        {
+          "name": "target",
+          "description": "The target of the button if it should behave like an anchor. Per default it is self.",
+          "values": [
+            {
+              "name": "blank"
+            },
+            {
+              "name": "self"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "The button type. Matches native HTML types. The default type is 'button'.",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The button variant. If not specified, the button will be the secondary variant.",
+          "values": [
+            {
+              "name": "primary"
+            },
+            {
+              "name": "secondary"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-checkbox",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked."
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the checkbox is disabled. The default value is false."
+        },
+        {
+          "name": "error",
+          "description": "The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles."
+        },
+        {
+          "name": "hint",
+          "description": "The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether or not the checkbox is rendered with error styles. Defaults to false."
+        },
+        {
+          "name": "label",
+          "description": "The checkbox label. This attribute is required."
+        },
+        {
+          "name": "name",
+          "description": "The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        },
+        {
+          "name": "value",
+          "description": "The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group"
+        }
+      ]
+    },
+    {
+      "name": "b2b-checkbox-group",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "alignment",
+          "description": "The alignment of the checkbox group. Per default it is vertical",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the checkbox group as a whole is disabled. Default state is false."
+        },
+        {
+          "name": "error",
+          "description": "The checkbox group error message. Is displayed when invalid is set to true."
+        },
+        {
+          "name": "hint",
+          "description": "The checkbox group hint text."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether or not the checkbox group as a whole is invalid. Set to true to display a group error."
+        },
+        {
+          "name": "label",
+          "description": "The label for the checkbox group. This is optional."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        }
+      ]
+    },
+    {
+      "name": "b2b-dropdown",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether the select as a whole is disabled. Per default it is false."
+        },
+        {
+          "name": "error",
+          "description": "An optional error message for the dropdown. This will only appear if invalid is set to true."
+        },
+        {
+          "name": "hint",
+          "description": "An optional hint text for the dropdown."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether the select is currently invalid. Per default it is false."
+        },
+        {
+          "name": "label",
+          "description": "The dropdown label."
+        },
+        {
+          "name": "name",
+          "description": "The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        }
+      ]
+    },
+    {
+      "name": "b2b-grid",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "margin",
+          "description": "The inner padding of the grid container measured in px."
+        }
+      ]
+    },
+    {
+      "name": "b2b-grid-col",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "span",
+          "description": "How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row."
+        },
+        {
+          "name": "text-align",
+          "description": "The alignment of text placed inside of a column. Note that this will apply to all children.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-grid-row",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "align-items",
+          "description": "Vertical alignment of columns. This requires the row to have a defined height.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "flex-end"
+            },
+            {
+              "name": "flex-start"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "column-gap",
+          "description": "The spacing in between individual columns in px. The higher the gap, the smaller the columns will be."
+        },
+        {
+          "name": "justify",
+          "description": "Horizontal alignment of columns.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "space-around"
+            },
+            {
+              "name": "space-between"
+            },
+            {
+              "name": "space-evenly"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "row-gap",
+          "description": "The spacing between individual rows in px."
+        }
+      ]
+    },
+    {
+      "name": "b2b-headline",
+      "description": {
+        "kind": "markdown",
+        "value": "Headline component to render hading tags content.\nInitial story: https://otto-eg.atlassian.net/browse/B2BDS-46"
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "The alignment of the headline.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "no-margin",
+          "description": "Whether the headline should have a margin. Per default, margins are enabled."
+        },
+        {
+          "name": "size",
+          "description": "Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `<h1>`, 200 to `<h2>` and 100 to `<h3>`",
+          "values": [
+            {
+              "name": "100"
+            },
+            {
+              "name": "200"
+            },
+            {
+              "name": "400"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-icon",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The color of the icon",
+          "values": [
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "inverse"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "secondary"
+            }
+          ]
+        },
+        {
+          "name": "icon",
+          "description": "The name of the icon",
+          "values": [
+            {
+              "name": "b2b_icon-360-degree"
+            },
+            {
+              "name": "b2b_icon-advice"
+            },
+            {
+              "name": "b2b_icon-allergen-sulfur-dioxide-sulfite"
+            },
+            {
+              "name": "b2b_icon-almond"
+            },
+            {
+              "name": "b2b_icon-archive"
+            },
+            {
+              "name": "b2b_icon-armchair"
+            },
+            {
+              "name": "b2b_icon-arrow-down"
+            },
+            {
+              "name": "b2b_icon-arrow-graph"
+            },
+            {
+              "name": "b2b_icon-arrow-left"
+            },
+            {
+              "name": "b2b_icon-arrow-right"
+            },
+            {
+              "name": "b2b_icon-arrow-up"
+            },
+            {
+              "name": "b2b_icon-assembly"
+            },
+            {
+              "name": "b2b_icon-assortment"
+            },
+            {
+              "name": "b2b_icon-attachment"
+            },
+            {
+              "name": "b2b_icon-augmented-reality"
+            },
+            {
+              "name": "b2b_icon-autonomous-team"
+            },
+            {
+              "name": "b2b_icon-bank-details"
+            },
+            {
+              "name": "b2b_icon-bar-graph-ascending"
+            },
+            {
+              "name": "b2b_icon-bar-graph-axis"
+            },
+            {
+              "name": "b2b_icon-barley"
+            },
+            {
+              "name": "b2b_icon-basket-sale"
+            },
+            {
+              "name": "b2b_icon-basket"
+            },
+            {
+              "name": "b2b_icon-basketball"
+            },
+            {
+              "name": "b2b_icon-bikini"
+            },
+            {
+              "name": "b2b_icon-blogs"
+            },
+            {
+              "name": "b2b_icon-brandshop"
+            },
+            {
+              "name": "b2b_icon-brazil-nut"
+            },
+            {
+              "name": "b2b_icon-browser-click"
+            },
+            {
+              "name": "b2b_icon-browser-content"
+            },
+            {
+              "name": "b2b_icon-browser-psm"
+            },
+            {
+              "name": "b2b_icon-burger"
+            },
+            {
+              "name": "b2b_icon-bus"
+            },
+            {
+              "name": "b2b_icon-callback"
+            },
+            {
+              "name": "b2b_icon-camera"
+            },
+            {
+              "name": "b2b_icon-cashback"
+            },
+            {
+              "name": "b2b_icon-cashew-nut"
+            },
+            {
+              "name": "b2b_icon-catalogue"
+            },
+            {
+              "name": "b2b_icon-categories"
+            },
+            {
+              "name": "b2b_icon-celery"
+            },
+            {
+              "name": "b2b_icon-certificate"
+            },
+            {
+              "name": "b2b_icon-chair"
+            },
+            {
+              "name": "b2b_icon-chat"
+            },
+            {
+              "name": "b2b_icon-check-bold"
+            },
+            {
+              "name": "b2b_icon-check"
+            },
+            {
+              "name": "b2b_icon-chicken"
+            },
+            {
+              "name": "b2b_icon-city"
+            },
+            {
+              "name": "b2b_icon-clear"
+            },
+            {
+              "name": "b2b_icon-close-bold"
+            },
+            {
+              "name": "b2b_icon-close"
+            },
+            {
+              "name": "b2b_icon-code-management"
+            },
+            {
+              "name": "b2b_icon-contact-mail"
+            },
+            {
+              "name": "b2b_icon-copy"
+            },
+            {
+              "name": "b2b_icon-cow"
+            },
+            {
+              "name": "b2b_icon-crab"
+            },
+            {
+              "name": "b2b_icon-critique"
+            },
+            {
+              "name": "b2b_icon-curtain"
+            },
+            {
+              "name": "b2b_icon-cut-out"
+            },
+            {
+              "name": "b2b_icon-dashboard"
+            },
+            {
+              "name": "b2b_icon-deer"
+            },
+            {
+              "name": "b2b_icon-delete"
+            },
+            {
+              "name": "b2b_icon-delivery-24h"
+            },
+            {
+              "name": "b2b_icon-delivery-desired-date-selection"
+            },
+            {
+              "name": "b2b_icon-delivery-desired-date"
+            },
+            {
+              "name": "b2b_icon-delivery-express"
+            },
+            {
+              "name": "b2b_icon-delivery-flat"
+            },
+            {
+              "name": "b2b_icon-delivery-on-hangers"
+            },
+            {
+              "name": "b2b_icon-delivery-preferred-place"
+            },
+            {
+              "name": "b2b_icon-desktop-phone-ads-click"
+            },
+            {
+              "name": "b2b_icon-desktop-phone-ads"
+            },
+            {
+              "name": "b2b_icon-desktop-phone"
+            },
+            {
+              "name": "b2b_icon-desktop"
+            },
+            {
+              "name": "b2b_icon-devices-monitor-laptop-tablet"
+            },
+            {
+              "name": "b2b_icon-dish-feature-lactose-free"
+            },
+            {
+              "name": "b2b_icon-dislike"
+            },
+            {
+              "name": "b2b_icon-disposal"
+            },
+            {
+              "name": "b2b_icon-document-sign"
+            },
+            {
+              "name": "b2b_icon-downloads"
+            },
+            {
+              "name": "b2b_icon-dress"
+            },
+            {
+              "name": "b2b_icon-dungarees"
+            },
+            {
+              "name": "b2b_icon-duration"
+            },
+            {
+              "name": "b2b_icon-e-invoice"
+            },
+            {
+              "name": "b2b_icon-edit-pad"
+            },
+            {
+              "name": "b2b_icon-edit"
+            },
+            {
+              "name": "b2b_icon-egg"
+            },
+            {
+              "name": "b2b_icon-ellipsis"
+            },
+            {
+              "name": "b2b_icon-email-verification-confirmed-safe"
+            },
+            {
+              "name": "b2b_icon-email-verification-confirmed"
+            },
+            {
+              "name": "b2b_icon-email-verification-sent-safe"
+            },
+            {
+              "name": "b2b_icon-email-verification-sent"
+            },
+            {
+              "name": "b2b_icon-empty-hint"
+            },
+            {
+              "name": "b2b_icon-end-to-end"
+            },
+            {
+              "name": "b2b_icon-error-article-image"
+            },
+            {
+              "name": "b2b_icon-error"
+            },
+            {
+              "name": "b2b_icon-euro"
+            },
+            {
+              "name": "b2b_icon-event"
+            },
+            {
+              "name": "b2b_icon-events"
+            },
+            {
+              "name": "b2b_icon-expand"
+            },
+            {
+              "name": "b2b_icon-faq"
+            },
+            {
+              "name": "b2b_icon-feedback"
+            },
+            {
+              "name": "b2b_icon-filter"
+            },
+            {
+              "name": "b2b_icon-fish"
+            },
+            {
+              "name": "b2b_icon-fitness"
+            },
+            {
+              "name": "b2b_icon-flag-chequered"
+            },
+            {
+              "name": "b2b_icon-flexible-work"
+            },
+            {
+              "name": "b2b_icon-flip"
+            },
+            {
+              "name": "b2b_icon-food-processor"
+            },
+            {
+              "name": "b2b_icon-fullscreen"
+            },
+            {
+              "name": "b2b_icon-gallery-view"
+            },
+            {
+              "name": "b2b_icon-gamepad"
+            },
+            {
+              "name": "b2b_icon-garlic"
+            },
+            {
+              "name": "b2b_icon-gender-intersex"
+            },
+            {
+              "name": "b2b_icon-globe"
+            },
+            {
+              "name": "b2b_icon-gluten"
+            },
+            {
+              "name": "b2b_icon-glutenfree"
+            },
+            {
+              "name": "b2b_icon-handshake"
+            },
+            {
+              "name": "b2b_icon-hashtag"
+            },
+            {
+              "name": "b2b_icon-hazelnut"
+            },
+            {
+              "name": "b2b_icon-hide"
+            },
+            {
+              "name": "b2b_icon-high-heels"
+            },
+            {
+              "name": "b2b_icon-home"
+            },
+            {
+              "name": "b2b_icon-info-small"
+            },
+            {
+              "name": "b2b_icon-info"
+            },
+            {
+              "name": "b2b_icon-inplace-zoom-reverse"
+            },
+            {
+              "name": "b2b_icon-inplace-zoom"
+            },
+            {
+              "name": "b2b_icon-insurance"
+            },
+            {
+              "name": "b2b_icon-kamut"
+            },
+            {
+              "name": "b2b_icon-laptop-os"
+            },
+            {
+              "name": "b2b_icon-laptop"
+            },
+            {
+              "name": "b2b_icon-leaving-page"
+            },
+            {
+              "name": "b2b_icon-light-bulb"
+            },
+            {
+              "name": "b2b_icon-like-fingers"
+            },
+            {
+              "name": "b2b_icon-like-product"
+            },
+            {
+              "name": "b2b_icon-like"
+            },
+            {
+              "name": "b2b_icon-line-graph"
+            },
+            {
+              "name": "b2b_icon-list-view"
+            },
+            {
+              "name": "b2b_icon-location"
+            },
+            {
+              "name": "b2b_icon-lupine"
+            },
+            {
+              "name": "b2b_icon-macadamia"
+            },
+            {
+              "name": "b2b_icon-material-samples"
+            },
+            {
+              "name": "b2b_icon-measurement"
+            },
+            {
+              "name": "b2b_icon-megaphone"
+            },
+            {
+              "name": "b2b_icon-menu"
+            },
+            {
+              "name": "b2b_icon-mic"
+            },
+            {
+              "name": "b2b_icon-milk"
+            },
+            {
+              "name": "b2b_icon-minus"
+            },
+            {
+              "name": "b2b_icon-module-operations"
+            },
+            {
+              "name": "b2b_icon-money-coins"
+            },
+            {
+              "name": "b2b_icon-money-document"
+            },
+            {
+              "name": "b2b_icon-money-plus"
+            },
+            {
+              "name": "b2b_icon-money-stack"
+            },
+            {
+              "name": "b2b_icon-money"
+            },
+            {
+              "name": "b2b_icon-move"
+            },
+            {
+              "name": "b2b_icon-mustard"
+            },
+            {
+              "name": "b2b_icon-nav"
+            },
+            {
+              "name": "b2b_icon-new"
+            },
+            {
+              "name": "b2b_icon-newsletter-sign-up"
+            },
+            {
+              "name": "b2b_icon-notification"
+            },
+            {
+              "name": "b2b_icon-nuts"
+            },
+            {
+              "name": "b2b_icon-oat"
+            },
+            {
+              "name": "b2b_icon-order-cancelled"
+            },
+            {
+              "name": "b2b_icon-order-delivered"
+            },
+            {
+              "name": "b2b_icon-order-form"
+            },
+            {
+              "name": "b2b_icon-order-management"
+            },
+            {
+              "name": "b2b_icon-order-misdirected"
+            },
+            {
+              "name": "b2b_icon-order-on-road"
+            },
+            {
+              "name": "b2b_icon-order-packed"
+            },
+            {
+              "name": "b2b_icon-order-payment"
+            },
+            {
+              "name": "b2b_icon-order-received"
+            },
+            {
+              "name": "b2b_icon-order-return"
+            },
+            {
+              "name": "b2b_icon-order-shipped"
+            },
+            {
+              "name": "b2b_icon-order-state-unknown"
+            },
+            {
+              "name": "b2b_icon-order-stored"
+            },
+            {
+              "name": "b2b_icon-order"
+            },
+            {
+              "name": "b2b_icon-otto-app"
+            },
+            {
+              "name": "b2b_icon-otto-campus"
+            },
+            {
+              "name": "b2b_icon-otto-company"
+            },
+            {
+              "name": "b2b_icon-otto-laptop"
+            },
+            {
+              "name": "b2b_icon-otto-logo"
+            },
+            {
+              "name": "b2b_icon-otto-up-points"
+            },
+            {
+              "name": "b2b_icon-otto-up"
+            },
+            {
+              "name": "b2b_icon-paper-plane"
+            },
+            {
+              "name": "b2b_icon-pause"
+            },
+            {
+              "name": "b2b_icon-payment-credit-card"
+            },
+            {
+              "name": "b2b_icon-payment-invoice"
+            },
+            {
+              "name": "b2b_icon-payment-pause"
+            },
+            {
+              "name": "b2b_icon-payment-plan-protection"
+            },
+            {
+              "name": "b2b_icon-payment-plan"
+            },
+            {
+              "name": "b2b_icon-pdf"
+            },
+            {
+              "name": "b2b_icon-peanut"
+            },
+            {
+              "name": "b2b_icon-pecan-nut"
+            },
+            {
+              "name": "b2b_icon-pending"
+            },
+            {
+              "name": "b2b_icon-person-access"
+            },
+            {
+              "name": "b2b_icon-person-callcenter"
+            },
+            {
+              "name": "b2b_icon-person-check"
+            },
+            {
+              "name": "b2b_icon-person-colleagues"
+            },
+            {
+              "name": "b2b_icon-person-community"
+            },
+            {
+              "name": "b2b_icon-person-development"
+            },
+            {
+              "name": "b2b_icon-person-female"
+            },
+            {
+              "name": "b2b_icon-person-info"
+            },
+            {
+              "name": "b2b_icon-person-male"
+            },
+            {
+              "name": "b2b_icon-person-rating"
+            },
+            {
+              "name": "b2b_icon-person-support"
+            },
+            {
+              "name": "b2b_icon-person-switch"
+            },
+            {
+              "name": "b2b_icon-person-workshop"
+            },
+            {
+              "name": "b2b_icon-person"
+            },
+            {
+              "name": "b2b_icon-phone-permission"
+            },
+            {
+              "name": "b2b_icon-phone"
+            },
+            {
+              "name": "b2b_icon-pig"
+            },
+            {
+              "name": "b2b_icon-pin"
+            },
+            {
+              "name": "b2b_icon-pinch-gesture"
+            },
+            {
+              "name": "b2b_icon-pinch"
+            },
+            {
+              "name": "b2b_icon-pistachio"
+            },
+            {
+              "name": "b2b_icon-plant"
+            },
+            {
+              "name": "b2b_icon-play-1"
+            },
+            {
+              "name": "b2b_icon-play"
+            },
+            {
+              "name": "b2b_icon-plus"
+            },
+            {
+              "name": "b2b_icon-price-alert"
+            },
+            {
+              "name": "b2b_icon-price-tag"
+            },
+            {
+              "name": "b2b_icon-print"
+            },
+            {
+              "name": "b2b_icon-puzzle"
+            },
+            {
+              "name": "b2b_icon-qr-code"
+            },
+            {
+              "name": "b2b_icon-question-hint"
+            },
+            {
+              "name": "b2b_icon-question"
+            },
+            {
+              "name": "b2b_icon-rating-empty"
+            },
+            {
+              "name": "b2b_icon-rating-filled"
+            },
+            {
+              "name": "b2b_icon-rating-half"
+            },
+            {
+              "name": "b2b_icon-rating-order"
+            },
+            {
+              "name": "b2b_icon-rating-payment"
+            },
+            {
+              "name": "b2b_icon-remote-work"
+            },
+            {
+              "name": "b2b_icon-repair"
+            },
+            {
+              "name": "b2b_icon-reply"
+            },
+            {
+              "name": "b2b_icon-retirement-provision"
+            },
+            {
+              "name": "b2b_icon-rocket"
+            },
+            {
+              "name": "b2b_icon-rye"
+            },
+            {
+              "name": "b2b_icon-sabbatical"
+            },
+            {
+              "name": "b2b_icon-sale"
+            },
+            {
+              "name": "b2b_icon-save"
+            },
+            {
+              "name": "b2b_icon-sea"
+            },
+            {
+              "name": "b2b_icon-search-enter"
+            },
+            {
+              "name": "b2b_icon-search"
+            },
+            {
+              "name": "b2b_icon-seo"
+            },
+            {
+              "name": "b2b_icon-service-info"
+            },
+            {
+              "name": "b2b_icon-sesame"
+            },
+            {
+              "name": "b2b_icon-settings"
+            },
+            {
+              "name": "b2b_icon-share-ios"
+            },
+            {
+              "name": "b2b_icon-share"
+            },
+            {
+              "name": "b2b_icon-sheep"
+            },
+            {
+              "name": "b2b_icon-shell"
+            },
+            {
+              "name": "b2b_icon-shirt"
+            },
+            {
+              "name": "b2b_icon-shopping-cart-euro"
+            },
+            {
+              "name": "b2b_icon-shopping-cart"
+            },
+            {
+              "name": "b2b_icon-show"
+            },
+            {
+              "name": "b2b_icon-smiley-angry"
+            },
+            {
+              "name": "b2b_icon-smiley-happy"
+            },
+            {
+              "name": "b2b_icon-smiley-negative"
+            },
+            {
+              "name": "b2b_icon-smiley-neutral"
+            },
+            {
+              "name": "b2b_icon-smiley-positive"
+            },
+            {
+              "name": "b2b_icon-sms-info"
+            },
+            {
+              "name": "b2b_icon-sneaker"
+            },
+            {
+              "name": "b2b_icon-sort-ascending"
+            },
+            {
+              "name": "b2b_icon-sort-descending"
+            },
+            {
+              "name": "b2b_icon-sort"
+            },
+            {
+              "name": "b2b_icon-soy"
+            },
+            {
+              "name": "b2b_icon-spelt"
+            },
+            {
+              "name": "b2b_icon-stationary"
+            },
+            {
+              "name": "b2b_icon-studies"
+            },
+            {
+              "name": "b2b_icon-success"
+            },
+            {
+              "name": "b2b_icon-sustainable-delivery"
+            },
+            {
+              "name": "b2b_icon-sustainable-energy-efficient"
+            },
+            {
+              "name": "b2b_icon-sustainable-production"
+            },
+            {
+              "name": "b2b_icon-sustainable-recycling"
+            },
+            {
+              "name": "b2b_icon-sustainable-resource"
+            },
+            {
+              "name": "b2b_icon-swipe-gesture"
+            },
+            {
+              "name": "b2b_icon-sync-device"
+            },
+            {
+              "name": "b2b_icon-t-shirt"
+            },
+            {
+              "name": "b2b_icon-tablet"
+            },
+            {
+              "name": "b2b_icon-tableware"
+            },
+            {
+              "name": "b2b_icon-target-group"
+            },
+            {
+              "name": "b2b_icon-teddy"
+            },
+            {
+              "name": "b2b_icon-test-result"
+            },
+            {
+              "name": "b2b_icon-town"
+            },
+            {
+              "name": "b2b_icon-trash"
+            },
+            {
+              "name": "b2b_icon-trend-down"
+            },
+            {
+              "name": "b2b_icon-trend-up"
+            },
+            {
+              "name": "b2b_icon-trousers"
+            },
+            {
+              "name": "b2b_icon-trusted"
+            },
+            {
+              "name": "b2b_icon-unpin"
+            },
+            {
+              "name": "b2b_icon-upload"
+            },
+            {
+              "name": "b2b_icon-user-management"
+            },
+            {
+              "name": "b2b_icon-vacation"
+            },
+            {
+              "name": "b2b_icon-variant-content"
+            },
+            {
+              "name": "b2b_icon-vegan"
+            },
+            {
+              "name": "b2b_icon-vegetarian"
+            },
+            {
+              "name": "b2b_icon-viewtoggle-tiles"
+            },
+            {
+              "name": "b2b_icon-village"
+            },
+            {
+              "name": "b2b_icon-volume-off"
+            },
+            {
+              "name": "b2b_icon-volume-on"
+            },
+            {
+              "name": "b2b_icon-voucher"
+            },
+            {
+              "name": "b2b_icon-walnut"
+            },
+            {
+              "name": "b2b_icon-warning"
+            },
+            {
+              "name": "b2b_icon-warranty"
+            },
+            {
+              "name": "b2b_icon-washing-machine"
+            },
+            {
+              "name": "b2b_icon-whatsapp"
+            },
+            {
+              "name": "b2b_icon-wheat"
+            },
+            {
+              "name": "b2b_icon-wifi"
+            },
+            {
+              "name": "b2b_icon-wishlist-active"
+            },
+            {
+              "name": "b2b_icon-wishlist"
+            },
+            {
+              "name": "b2b_icon-work-life"
+            },
+            {
+              "name": "b2b_icon-workshop"
+            },
+            {
+              "name": "b2b_icon-zoom-in"
+            },
+            {
+              "name": "b2b_icon-zoom-out"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The size of the icon",
+          "values": [
+            {
+              "name": "100"
+            },
+            {
+              "name": "200"
+            },
+            {
+              "name": "50"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-input",
+      "description": {
+        "kind": "markdown",
+        "value": "Input component\nInitial story: https://otto-eg.atlassian.net/browse/B2BDS-53"
+      },
+      "attributes": [
+        {
+          "name": "autofocus",
+          "description": "When setting the autofocus to true, the input element will be focused when the page loads."
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the input is disabled. Default is false."
+        },
+        {
+          "name": "error",
+          "description": "The error message that is shown if the input is invalid."
+        },
+        {
+          "name": "hint",
+          "description": "The hint text that appears underneath the input field."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false."
+        },
+        {
+          "name": "label",
+          "description": "The input label."
+        },
+        {
+          "name": "name",
+          "description": "The name of the input. Use it to group label and input together and make it more accessible."
+        },
+        {
+          "name": "placeholder",
+          "description": "A placeholder for the input field. Per default, it is null."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        },
+        {
+          "name": "type",
+          "description": "The type of the input. All native HTML types except date or month are supported. Default is text.",
+          "values": [
+            {
+              "name": "email"
+            },
+            {
+              "name": "number"
+            },
+            {
+              "name": "password"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "url"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The default value of the input field. If defined, it will prefill the input."
+        }
+      ]
+    },
+    {
+      "name": "b2b-input-group",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether or not the input group is disabled as a whole. Per default it is false."
+        },
+        {
+          "name": "error",
+          "description": "A group error text. It will only show if invalid is set to true."
+        },
+        {
+          "name": "hint",
+          "description": "The hint text that appears underneath the input group."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false."
+        }
+      ]
+    },
+    {
+      "name": "b2b-input-label",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Will render the label with a disabled style. The default value is false."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        }
+      ]
+    },
+    {
+      "name": "b2b-input-list",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The input label."
+        },
+        {
+          "name": "placeholder",
+          "description": "The placeholder shown in the input field."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        },
+        {
+          "name": "value",
+          "description": "The default value of the input field. If defined, it will prefill the input."
+        }
+      ]
+    },
+    {
+      "name": "b2b-input-list-option",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "option",
+          "description": "The option name."
+        }
+      ]
+    },
+    {
+      "name": "b2b-label",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "type",
+          "description": "The type of the label. Per default it is neutral.",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-modal",
+      "description": {
+        "kind": "markdown",
+        "value": "Modal component\nInitial story: https://otto-eg.atlassian.net/browse/B2BDS-53"
+      },
+      "attributes": [
+        {
+          "name": "backdrop-dismiss",
+          "description": "A boolean that indicates whether the modal can be dismissed by clicking\nin the backdrop outside the modal."
+        },
+        {
+          "name": "esc-dismiss",
+          "description": "A boolean to indicate whether the modal can be dismissed by pressing\nthe escape key on the keyboard"
+        },
+        {
+          "name": "heading",
+          "description": "The title for the modal. This is required."
+        },
+        {
+          "name": "opened",
+          "description": "Whether the modal is shown or not. Default is false"
+        },
+        {
+          "name": "variant",
+          "description": "The size of the modal. If not specified, will assume the default size",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "large"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-pagination",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "active-page",
+          "description": "Use this property to set programmatically the active page"
+        },
+        {
+          "name": "aria-label-next-page",
+          "description": "(optional) translation to 'Go to next page'"
+        },
+        {
+          "name": "aria-label-previous-page",
+          "description": "(optional) translation to 'Go to previous page'"
+        },
+        {
+          "name": "total-pages",
+          "description": "The total number of pages to calculate the length of pagination component"
+        }
+      ]
+    },
+    {
+      "name": "b2b-paragraph",
+      "description": {
+        "kind": "markdown",
+        "value": "Paragraph component to render text content.\nInitial story: https://otto-eg.atlassian.net/browse/B2BDS-45"
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "The alignment of the text.",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The size of the text.",
+          "values": [
+            {
+              "name": "100"
+            },
+            {
+              "name": "50"
+            }
+          ]
+        },
+        {
+          "name": "weight",
+          "description": "The weight of the text.",
+          "values": [
+            {
+              "name": "bold"
+            },
+            {
+              "name": "normal"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-radio-button",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Whether or not the radio button is currently checked. Per default it is false."
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the radio button is currently disabled. Per default it is false."
+        },
+        {
+          "name": "error",
+          "description": "An error text. It will only show if invalid is set to true."
+        },
+        {
+          "name": "hint",
+          "description": "A hint to give additional information on the radio button."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether or not the radio button should be rendered with error styles. Per default it is false."
+        },
+        {
+          "name": "label",
+          "description": "The label of the radio button. This is required"
+        },
+        {
+          "name": "name",
+          "description": "The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        },
+        {
+          "name": "value",
+          "description": "The value of the radio button. This will be emitted when the radio button is clicked."
+        }
+      ]
+    },
+    {
+      "name": "b2b-radio-group",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "alignment",
+          "description": "The alignment of the radio group. Can be vertical or horizontal, per default it is vertical.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the radio group is disabled as a whole. Per default it is false."
+        },
+        {
+          "name": "error",
+          "description": "A group error text. It will only show if invalid is set to true."
+        },
+        {
+          "name": "hint",
+          "description": "A group hint text."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false."
+        },
+        {
+          "name": "label",
+          "description": "The radio group label. This is optional."
+        },
+        {
+          "name": "name",
+          "description": "The radio group name used to group them together programmatically. This is required."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        }
+      ]
+    },
+    {
+      "name": "b2b-required-separator",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The required label. Per default it is the german 'Pflichtfeld', but can be altered."
+        }
+      ]
+    },
+    {
+      "name": "b2b-scrollable-container",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": []
+    },
+    {
+      "name": "b2b-search",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "placeholder",
+          "description": "The placeholder shown in the input field."
+        },
+        {
+          "name": "value",
+          "description": "The default value of the search input field. If defined, it will prefill the input."
+        }
+      ]
+    },
+    {
+      "name": "b2b-separator",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "alignment",
+          "description": "The alignment of the separator. Per default it is horizontal.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-spinner",
+      "description": {
+        "kind": "markdown",
+        "value": "Spinner component to display loading indicator.\nInitial story: https://otto-eg.atlassian.net/browse/B2BDS-70"
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The color of the spinner.",
+          "values": [
+            {
+              "name": "inverse"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "secondary"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The size of the spinner.",
+          "values": [
+            {
+              "name": "100"
+            },
+            {
+              "name": "200"
+            },
+            {
+              "name": "50"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-tab",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether or not the tab is currently disabled. Per default it is false."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether or not the tab has an error. Per default, it is false."
+        },
+        {
+          "name": "selected",
+          "description": "Whether or not the tab is currently selected. Per default it is false."
+        }
+      ]
+    },
+    {
+      "name": "b2b-tab-group",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "use-router",
+          "description": "Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation.\nSet it to true if you want to use external, route-based navigation."
+        }
+      ]
+    },
+    {
+      "name": "b2b-tab-panel",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": []
+    },
+    {
+      "name": "b2b-table",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The size of the table. Both will expand to 100% of parent size.\nExpand cells will use as much space as content needs and text will wrap.\nEqual will keep all column sizes proportional to the number of columns.",
+          "values": [
+            {
+              "name": "equal"
+            },
+            {
+              "name": "expand"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-table-cell",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "align",
+          "description": "Alignment of the content of the cell, by default is to the left. *",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "color",
+          "description": "Background color of the cell. This color selection does not have hover states, as it is handled from the row*",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "group"
+            },
+            {
+              "name": "selected"
+            }
+          ]
+        },
+        {
+          "name": "divider",
+          "description": "adds a border to the right of the cell. *"
+        },
+        {
+          "name": "size",
+          "description": "The size of the cell. Follows table size.\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\nOther sizes won't affect cell current implementation.",
+          "values": [
+            {
+              "name": "equal"
+            },
+            {
+              "name": "expand"
+            }
+          ]
+        },
+        {
+          "name": "text-wrap",
+          "description": "Weather text should wrap or truncate.\nIt will only truncate when table size is equal\n*"
+        }
+      ]
+    },
+    {
+      "name": "b2b-table-header",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "divider",
+          "description": "adds a border to the right of the header. *"
+        },
+        {
+          "name": "fixed",
+          "description": "sets the header position to sticky. Use it when table is inside a scrollable container. *"
+        },
+        {
+          "name": "sort-direction",
+          "description": "The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this.",
+          "values": [
+            {
+              "name": "ascending"
+            },
+            {
+              "name": "descending"
+            },
+            {
+              "name": "not-sorted"
+            }
+          ]
+        },
+        {
+          "name": "sort-id",
+          "description": "Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent."
+        }
+      ]
+    },
+    {
+      "name": "b2b-table-row",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Background color of the row. Use it semantically. This color selection have hover states *",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "group"
+            },
+            {
+              "name": "selected"
+            }
+          ]
+        },
+        {
+          "name": "highlight",
+          "description": "Whether the row will be highlighted on mouse over *"
+        }
+      ]
+    },
+    {
+      "name": "b2b-table-rowgroup",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "type",
+          "description": "Rowgroup allows grouping rows by context: header, body or footer.\nHeader rows are by default not highlightable on mouse over.",
+          "values": [
+            {
+              "name": "body"
+            },
+            {
+              "name": "footer"
+            },
+            {
+              "name": "header"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "b2b-textarea",
+      "description": {
+        "kind": "markdown",
+        "value": "Text Area Component\nInitial story: https://otto-eg.atlassian.net/browse/B2BDS-96"
+      },
+      "attributes": [
+        {
+          "name": "autofocus",
+          "description": "Whether or not the textarea should be automatically focused on page load. Per default it is false."
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the textarea is disabled. Per default it is false."
+        },
+        {
+          "name": "error",
+          "description": "An optional error message that is displayed when the textarea is invalid. Per default it is undefined."
+        },
+        {
+          "name": "hint",
+          "description": "An optional hint for the textarea. Per default it is undefined."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether or not the textarea should be displayed with error styles. Per default it is false."
+        },
+        {
+          "name": "label",
+          "description": "The textarea label. This is optional."
+        },
+        {
+          "name": "max-length",
+          "description": "The maximum input length. Characters entered after that will not be appended to the input value."
+        },
+        {
+          "name": "name",
+          "description": "The name of the textarea. This is used to programmatically group it into a form."
+        },
+        {
+          "name": "placeholder",
+          "description": "The textarea placeholder. It is optional and undefined by default."
+        },
+        {
+          "name": "required",
+          "description": "Adds an asterisk at the end of the label to signify that the field is required."
+        },
+        {
+          "name": "resize",
+          "description": "If and how the textarea is resizable. Per default it is resizable in both directions.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "unset"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the textarea. Per default it is null."
+        }
+      ]
+    },
+    {
+      "name": "b2b-toggle-button",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Whether or not the toggle button is currently checked. Per default it is false."
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the toggle button is currently disabled. Per default it is false."
+        },
+        {
+          "name": "label",
+          "description": "The label of the toggle button. This is required"
+        },
+        {
+          "name": "name",
+          "description": "The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required."
+        },
+        {
+          "name": "value",
+          "description": "The value of the toggle button. This will be emitted when the toggle button is clicked. This is required"
+        }
+      ]
+    },
+    {
+      "name": "b2b-toggle-group",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether or not the toggle group is disabled as a whole. Per default it is false."
+        },
+        {
+          "name": "name",
+          "description": "The toggle group name used to group them together programmatically. This is required."
+        }
+      ]
+    },
+    {
+      "name": "b2b-tooltip",
+      "description": {
+        "kind": "markdown",
+        "value": "The tooltip can display additional information, and will be visible based on\na specific trigger."
+      },
+      "attributes": [
+        {
+          "name": "content",
+          "description": "The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content."
+        },
+        {
+          "name": "opened",
+          "description": "Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility."
+        },
+        {
+          "name": "position",
+          "description": "Position of the tooltip.",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "trigger",
+          "description": "The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover.",
+          "values": [
+            {
+              "name": "custom"
+            },
+            {
+              "name": "focus"
+            },
+            {
+              "name": "hover"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}