@otto-de/b2b-core-components 1.9.0-beta.2 → 1.10.0

package/dist/custom-elements.json

@@ -205,6 +205,21 @@
               "name": "secondary"
             }
           ]
+        },
+        {
+          "name": "width",
+          "description": "The width of the button. Per default, it will fit the content",
+          "values": [
+            {
+              "name": "custom"
+            },
+            {
+              "name": "fit-container"
+            },
+            {
+              "name": "fit-content"
+            }
+          ]
         }
       ]
     },
@@ -397,6 +412,35 @@
         }
       ]
     },
+    {
+      "name": "b2b-flyout-menu",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": []
+    },
+    {
+      "name": "b2b-flyout-menu-option",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected."
+        },
+        {
+          "name": "option",
+          "description": "The option name."
+        },
+        {
+          "name": "separator",
+          "description": "Whether the option has a separator at the bottom. Per default it is false."
+        }
+      ]
+    },
     {
       "name": "b2b-grid",
       "description": {
@@ -450,82 +494,1194 @@
           "description": "Vertical alignment of columns. This requires the row to have a defined height.",
           "values": [
             {
-              "name": "center"
+              "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": "clickable",
+          "description": "Will display a pointer cursor when hovering the icon"
+        },
+        {
+          "name": "color",
+          "description": "The color of the icon",
+          "values": [
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "inverse"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "secondary"
+            }
+          ]
+        },
+        {
+          "name": "focusable",
+          "description": "Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu."
+        },
+        {
+          "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-50"
+            },
+            {
+              "name": "b2b_icon-arrow-down"
+            },
+            {
+              "name": "b2b_icon-arrow-graph"
+            },
+            {
+              "name": "b2b_icon-arrow-left-50"
+            },
+            {
+              "name": "b2b_icon-arrow-left"
+            },
+            {
+              "name": "b2b_icon-arrow-right-50"
+            },
+            {
+              "name": "b2b_icon-arrow-right"
+            },
+            {
+              "name": "b2b_icon-arrow-up-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-hint-50"
+            },
+            {
+              "name": "b2b_icon-error-hint"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "name": "b2b_icon-info-hint-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "name": "b2b_icon-question-hint-50"
+            },
+            {
+              "name": "b2b_icon-question-hint"
+            },
+            {
+              "name": "b2b_icon-question"
+            },
+            {
+              "name": "b2b_icon-rating-empty-50"
+            },
+            {
+              "name": "b2b_icon-rating-empty"
+            },
+            {
+              "name": "b2b_icon-rating-filled-50"
+            },
+            {
+              "name": "b2b_icon-rating-filled"
+            },
+            {
+              "name": "b2b_icon-rating-half-50"
+            },
+            {
+              "name": "b2b_icon-rating-half"
+            },
+            {
+              "name": "b2b_icon-rating-order"
+            },
+            {
+              "name": "b2b_icon-rating-payment"
+            },
+            {
+              "name": "b2b_icon-refresh-50"
+            },
+            {
+              "name": "b2b_icon-remote-work"
+            },
+            {
+              "name": "b2b_icon-repair"
+            },
+            {
+              "name": "b2b_icon-reply-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "name": "b2b_icon-smiley-positive"
+            },
+            {
+              "name": "b2b_icon-sms-info"
+            },
+            {
+              "name": "b2b_icon-sneaker"
+            },
+            {
+              "name": "b2b_icon-sort-50"
+            },
+            {
+              "name": "b2b_icon-sort-ascending-50"
+            },
+            {
+              "name": "b2b_icon-sort-ascending"
+            },
+            {
+              "name": "b2b_icon-sort-descending-50"
+            },
+            {
+              "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-hint-50"
+            },
+            {
+              "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-50"
+            },
+            {
+              "name": "b2b_icon-trend-down"
+            },
+            {
+              "name": "b2b_icon-trend-left"
+            },
+            {
+              "name": "b2b_icon-trend-right"
+            },
+            {
+              "name": "b2b_icon-trend-up-50"
+            },
+            {
+              "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-hint-50"
+            },
+            {
+              "name": "b2b_icon-warning-hint"
+            },
+            {
+              "name": "b2b_icon-warning"
+            },
+            {
+              "name": "b2b_icon-warranty"
+            },
+            {
+              "name": "b2b_icon-washing-machine"
             },
             {
-              "name": "flex-end"
+              "name": "b2b_icon-whatsapp"
             },
             {
-              "name": "flex-start"
+              "name": "b2b_icon-wheat"
             },
             {
-              "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": "b2b_icon-wifi"
+            },
             {
-              "name": "center"
+              "name": "b2b_icon-wishlist-50"
             },
             {
-              "name": "end"
+              "name": "b2b_icon-wishlist-active-50"
             },
             {
-              "name": "space-around"
+              "name": "b2b_icon-wishlist-active"
             },
             {
-              "name": "space-between"
+              "name": "b2b_icon-wishlist"
             },
             {
-              "name": "space-evenly"
+              "name": "b2b_icon-work-life"
             },
             {
-              "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": "b2b_icon-workshop"
+            },
             {
-              "name": "center"
+              "name": "b2b_icon-zoom-in"
             },
             {
-              "name": "left"
+              "name": "b2b_icon-zoom-out"
             },
             {
-              "name": "right"
+              "name": "b2b_logo-carrier-dhl"
+            },
+            {
+              "name": "b2b_logo-carrier-gls"
+            },
+            {
+              "name": "b2b_logo-carrier-hermes"
+            },
+            {
+              "name": "b2b_logo-carrier-ups"
             }
           ]
         },
-        {
-          "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>`",
+          "description": "",
           "values": [
             {
               "name": "100"
@@ -534,14 +1690,14 @@
               "name": "200"
             },
             {
-              "name": "400"
+              "name": "50"
             }
           ]
         }
       ]
     },
     {
-      "name": "b2b-icon",
+      "name": "b2b-icon-100",
       "description": {
         "kind": "markdown",
         "value": ""
@@ -569,6 +1725,10 @@
             }
           ]
         },
+        {
+          "name": "focusable",
+          "description": "Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu."
+        },
         {
           "name": "icon",
           "description": "The name of the icon",
@@ -1425,6 +2585,12 @@
             {
               "name": "b2b_icon-trend-down"
             },
+            {
+              "name": "b2b_icon-trend-left"
+            },
+            {
+              "name": "b2b_icon-trend-right"
+            },
             {
               "name": "b2b_icon-trend-up"
             },
@@ -1528,18 +2694,7 @@
         },
         {
           "name": "size",
-          "description": "The size of the icon",
-          "values": [
-            {
-              "name": "100"
-            },
-            {
-              "name": "200"
-            },
-            {
-              "name": "50"
-            }
-          ]
+          "description": "The size of the icon in pixel. Minimum is 24, maximum is 96px."
         }
       ]
     },
@@ -1770,6 +2925,52 @@
         }
       ]
     },
+    {
+      "name": "b2b-multiselect-dropdown",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The input label."
+        },
+        {
+          "name": "max-options-visible",
+          "description": "The maximum amount of chips visible. Adjust this depending on available size of the dropdown."
+        },
+        {
+          "name": "placeholder",
+          "description": "The placeholder shown in the input field."
+        },
+        {
+          "name": "search-placeholder",
+          "description": "The placeholder shown in the search bar."
+        },
+        {
+          "name": "select-all-label",
+          "description": "The string displayed as the select all label."
+        }
+      ]
+    },
+    {
+      "name": "b2b-multiselect-option",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "option",
+          "description": "The label of the option."
+        },
+        {
+          "name": "selected",
+          "description": "Whether the option is currently selected."
+        }
+      ]
+    },
     {
       "name": "b2b-pagination",
       "description": {
@@ -1843,6 +3044,47 @@
         }
       ]
     },
+    {
+      "name": "b2b-progress-bar",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label of the progress bar."
+        },
+        {
+          "name": "label-position",
+          "description": "Whether the label should be displayed on the right or left of the progress bar.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "label-type",
+          "description": "Whether the label should be displayed below or on the side of the progress bar.",
+          "values": [
+            {
+              "name": "below"
+            },
+            {
+              "name": "side"
+            }
+          ]
+        },
+        {
+          "name": "progress",
+          "description": "The percentage of progress from 0 to 100."
+        }
+      ]
+    },
     {
       "name": "b2b-radio-button",
       "description": {
@@ -2111,8 +3353,11 @@
       "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.",
+          "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.\nColspan behaves same as equal, but allows you to set a colspan attribute on individual columns or cells\nto make them span more than one column.",
           "values": [
+            {
+              "name": "colspan"
+            },
             {
               "name": "equal"
             },
@@ -2161,20 +3406,12 @@
           ]
         },
         {
-          "name": "divider",
-          "description": "adds a border to the right of the cell. *"
+          "name": "colspan",
+          "description": "How many columns the cell should span. Accepts numbers greater than one."
         },
         {
-          "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": "divider",
+          "description": "adds a border to the right of the cell. *"
         },
         {
           "name": "text-wrap",
@@ -2189,6 +3426,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "colspan",
+          "description": "The width of the column. Increase it to change the size of the column relative to other columns."
+        },
         {
           "name": "content-align",
           "description": "Alignment of the content of the cell, by default is to the left. *",
@@ -2210,7 +3451,22 @@
         },
         {
           "name": "fixed",
-          "description": "sets the header position to sticky. Use it when table is inside a scrollable container. *"
+          "description": ""
+        },
+        {
+          "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": "colspan"
+            },
+            {
+              "name": "equal"
+            },
+            {
+              "name": "expand"
+            }
+          ]
         },
         {
           "name": "sort-direction",
@@ -2284,6 +3540,10 @@
           "name": "accordion",
           "description": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
         },
+        {
+          "name": "fixed",
+          "description": "Sets the header rowgroup position to sticky. Use this in a scrollable container."
+        },
         {
           "name": "opened",
           "description": "Only use when accordion property is true.\nWill render the accordion opened if set to true. By default, is false."
@@ -2413,6 +3673,47 @@
         }
       ]
     },
+    {
+      "name": "b2b-toggle-chip",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Whether or not the chip is currently active. Per default, it is false."
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the chip is currently disabled. Per default it is false."
+        },
+        {
+          "name": "label",
+          "description": "The chip's label. This is required."
+        },
+        {
+          "name": "name",
+          "description": "The name of the toggle chip. 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 associated with the toggle chip. This is emitted when the chip is interacted with."
+        },
+        {
+          "name": "variant",
+          "description": "The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey",
+          "values": [
+            {
+              "name": "grey"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "b2b-toggle-group",
       "description": {
@@ -2430,6 +3731,43 @@
         }
       ]
     },
+    {
+      "name": "b2b-toggle-switch",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether or not the toggle button is currently disabled. Per default it is false."
+        },
+        {
+          "name": "label",
+          "description": "An optional label for the toggle switch."
+        },
+        {
+          "name": "label-position",
+          "description": "The alignment of the toggle switch label.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "The toggle name. Use this if the toggle switch is used in a form group."
+        },
+        {
+          "name": "state",
+          "description": "Whether or not the toggle button is currently on or off. Per default it is off."
+        }
+      ]
+    },
     {
       "name": "b2b-tooltip",
       "description": {