@oiz/stzh-components 0.0.0-pretest

package/dist/vscode-data.json

@@ -0,0 +1,4453 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "stzh-accordion",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH accordion component."
+      },
+      "attributes": [
+        {
+          "name": "collapsible",
+          "description": "Whether folds are collapsible"
+        },
+        {
+          "name": "multiselectable",
+          "description": "Whether multiple folds can be opened at once"
+        }
+      ]
+    },
+    {
+      "name": "stzh-accordion-item",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH accordion item component."
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether fold disabled"
+        },
+        {
+          "name": "heading",
+          "description": "Heading title"
+        },
+        {
+          "name": "heading-level",
+          "description": "Heading level",
+          "values": [
+            {
+              "name": "1"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "3"
+            },
+            {
+              "name": "4"
+            }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "Whether fold is open"
+        },
+        {
+          "name": "subtitle",
+          "description": "Subtitle"
+        }
+      ]
+    },
+    {
+      "name": "stzh-actions",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH actions component.\r\n\r\nAutomatically position given buttons inside a form, dialog or process. Sets `variant=\"secondary\"` to `stzh-button` elements placed in secondary slot by default if nothing else is set."
+      },
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "Variant determining what position the action buttons are",
+          "values": [
+            {
+              "name": "dialog"
+            },
+            {
+              "name": "form"
+            },
+            {
+              "name": "process"
+            }
+          ]
+        },
+        {
+          "name": "with-border",
+          "description": "With border separator"
+        }
+      ]
+    },
+    {
+      "name": "stzh-appnav",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH app navigation component which can be used inside the `<stzh-header>` element.\r\n\r\nLinks elements can be slotted into the default slot.\r\nBy default `size=\"small\"` and `variant=\"secondary\"` will be set to the `stzh-link` elements if nothing else is set."
+      },
+      "attributes": [
+        {
+          "name": "app-href",
+          "description": "Link of app title (only used if `app-title` is defined)"
+        },
+        {
+          "name": "app-status",
+          "description": "Status displayed next to app title (only displayed if `app-title` is defined)"
+        },
+        {
+          "name": "app-title",
+          "description": "App title shown on tablet/desktop"
+        }
+      ]
+    },
+    {
+      "name": "stzh-appointments",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH appointments component."
+      },
+      "attributes": [
+        {
+          "name": "appointments",
+          "description": "Initial selected values"
+        },
+        {
+          "name": "appointments-title",
+          "description": "Overwrite default appointments title"
+        },
+        {
+          "name": "calendar-title",
+          "description": "Overwrite default calendar title"
+        },
+        {
+          "name": "current-date",
+          "description": "Current selected date (if undefined, earliest appointment date in list is taken or current selected one by value)"
+        },
+        {
+          "name": "name",
+          "description": ""
+        },
+        {
+          "name": "show-items",
+          "description": "Nr of items shown"
+        },
+        {
+          "name": "sort-by",
+          "description": "Sort by",
+          "values": [
+            {
+              "name": "place"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "step-items",
+          "description": "Nr of items shown when more link is clicked"
+        },
+        {
+          "name": "value",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "stzh-badge",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH badge component."
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Text content of the badge"
+        }
+      ]
+    },
+    {
+      "name": "stzh-button",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH button component."
+      },
+      "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        {
+          "name": "a11y-label",
+          "description": "Accessible label for screen readers to replace visible text"
+        },
+        {
+          "name": "active",
+          "description": "Whether the button is active"
+        },
+        {
+          "name": "badge",
+          "description": "Display a badge aligned to button or icons"
+        },
+        {
+          "name": "badge-position",
+          "description": "Badge position",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "icon"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the button is disabled"
+        },
+        {
+          "name": "effect",
+          "description": "Effect/Animation used",
+          "values": [
+            {
+              "name": "cta"
+            },
+            {
+              "name": "default"
+            }
+          ]
+        },
+        {
+          "name": "fullwidth",
+          "description": "Whether the button is full width"
+        },
+        {
+          "name": "href",
+          "description": "`href` if the button should be used as link"
+        },
+        {
+          "name": "icon",
+          "description": "Icon (use instead of icon slot)"
+        },
+        {
+          "name": "icon-only",
+          "description": "Whether only an icon is used inside the button"
+        },
+        {
+          "name": "icon-position",
+          "description": "Icon Position",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "size",
+          "description": "Size variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "tiny"
+            }
+          ]
+        },
+        {
+          "name": "target",
+          "description": "Target if the button is used as link (if `href` used)"
+        },
+        {
+          "name": "text-align",
+          "description": "Text alignment",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "space-between"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Type of the button",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "Variant style",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "input"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "tertiary"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-calendar",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH calendar component."
+      },
+      "attributes": [
+        {
+          "name": "first-day-of-week",
+          "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\r\nDefault is Monday."
+        },
+        {
+          "name": "max",
+          "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\r\nThis setting can be used alone or together with the min property."
+        },
+        {
+          "name": "min",
+          "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\r\nThis setting can be used alone or together with the max property."
+        },
+        {
+          "name": "value",
+          "description": "Date value. Must be in IS0-8601 format: YYYY-MM-DD."
+        }
+      ]
+    },
+    {
+      "name": "stzh-cell",
+      "description": {
+        "kind": "markdown",
+        "value": "See row component for how to use."
+      },
+      "attributes": [
+        {
+          "name": "align-self",
+          "description": "Control how cells items are positioned along a container's cross axis",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "baseline"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "justify-self",
+          "description": "Controlling how cells are positioned along a container's main axis",
+          "values": [
+            {
+              "name": "around"
+            },
+            {
+              "name": "auto"
+            },
+            {
+              "name": "between"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "evenly"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "span",
+          "description": "Default span of each cell"
+        },
+        {
+          "name": "span-large",
+          "description": "Default span of each cell above large breakpoint"
+        },
+        {
+          "name": "span-medium",
+          "description": "Default span of each cell above medium breakpoint"
+        },
+        {
+          "name": "span-small",
+          "description": "Default span of each cell above small breakpoint"
+        },
+        {
+          "name": "span-ultra",
+          "description": "Default span of each cell above ultra breakpoint"
+        }
+      ]
+    },
+    {
+      "name": "stzh-checkbox",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH checkbox component."
+      },
+      "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id for element which describes the input (this will be overwritten if description prop or slot is used)"
+        },
+        {
+          "name": "checked",
+          "description": "Checked status"
+        },
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the checkbox is disabled"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "name",
+          "description": "Name of the input element"
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
+        {
+          "name": "show-marker",
+          "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        {
+          "name": "value",
+          "description": "Value of the input element"
+        }
+      ]
+    },
+    {
+      "name": "stzh-checkboxgroup",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH checkboxgroup component."
+      },
+      "attributes": [
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "direction",
+          "description": "Direction",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "hide-legend",
+          "description": "Hide legend to show only for screenreaders"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "legend",
+          "description": "The legend"
+        },
+        {
+          "name": "name",
+          "description": "The name of the input checkbox elements"
+        },
+        {
+          "name": "show-marker",
+          "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        {
+          "name": "value",
+          "description": "Select a checkbox by value"
+        }
+      ]
+    },
+    {
+      "name": "stzh-chip",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH chip component."
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Active"
+        },
+        {
+          "name": "counter",
+          "description": "Counter"
+        },
+        {
+          "name": "disabled",
+          "description": "Disabled"
+        },
+        {
+          "name": "icon",
+          "description": "Icon (use instead of icon slot)"
+        },
+        {
+          "name": "invert",
+          "description": "Invert (only available for tag variant)"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "removable",
+          "description": "Whether remove button should be shown"
+        },
+        {
+          "name": "remove-label",
+          "description": "Label of remove button for screenreaders"
+        },
+        {
+          "name": "size",
+          "description": "Size",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Type",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "important"
+            },
+            {
+              "name": "secondary"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "Variant",
+          "values": [
+            {
+              "name": "filter"
+            },
+            {
+              "name": "input"
+            },
+            {
+              "name": "tag"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-chip-select",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH figure component."
+      },
+      "attributes": [
+        {
+          "name": "data",
+          "description": "Data"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "value",
+          "description": "Value"
+        }
+      ]
+    },
+    {
+      "name": "stzh-container",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH container component.\r\n\r\nSets side margins and max-width based on the current breakpoint."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-cspace",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH cspace component.\r\n\r\nApply all the default collapsible spacings for slotted elements. See the <a href=\"?path=/story/tokens-spacings--page\" target=\"_blank\">spacings docs page</a> for more information.\r\n\r\n```html\r\n<stzh-cspace>\r\n  <stzh-heading>Heading</stzh-heading>\r\n  <stzh-text>Lorem ipsum</stzh-text>\r\n  <stzh-figure>\r\n    <img src=\"media/images/example.jpg\" loading=\"lazy\" />\r\n  </stzh-figure>\r\n  <stzh-heading level=\"2\">Heading<stzh-heading>\r\n  // note: use \"no-cspace-top\" to disable top margin\r\n  // or \"no-cspace-bottom\" to disable bottom margin if needed\r\n  <stzh-button no-cspace-top no-cspace-bottom>Test</stzh-button>\r\n  ...\r\n</stzh-cspace>\r\n```"
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-datamessagelist",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH datemessagelist component."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-datamessagelist-item",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH datamessagelist item component."
+      },
+      "attributes": [
+        {
+          "name": "actions",
+          "description": "Actions"
+        },
+        {
+          "name": "description",
+          "description": "Description"
+        },
+        {
+          "name": "external-href",
+          "description": "External href"
+        },
+        {
+          "name": "heading",
+          "description": "Heading"
+        },
+        {
+          "name": "href",
+          "description": "URL the item should link to"
+        },
+        {
+          "name": "loading-status",
+          "description": "Loading status",
+          "values": [
+            {
+              "name": "success"
+            },
+            {
+              "name": "default"
+            }
+          ]
+        },
+        {
+          "name": "meta",
+          "description": "Meta"
+        },
+        {
+          "name": "tags",
+          "description": "Tags"
+        },
+        {
+          "name": "unread",
+          "description": "Whether item should be displayed in unread state"
+        }
+      ]
+    },
+    {
+      "name": "stzh-datatable",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH datatable component.\r\n\r\nAs alternative, you can use the <a href=\"?path=/story/components-table--default\" target=\"_blank\">stzh-table</a> element if you need more control over rendering the table element, but you will have to implement filtering and sorting by yourself."
+      },
+      "attributes": [
+        {
+          "name": "columns",
+          "description": "Columns"
+        },
+        {
+          "name": "id-field",
+          "description": "ID field"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "rows",
+          "description": "Rows"
+        },
+        {
+          "name": "sort-by",
+          "description": "Sort by given column key"
+        },
+        {
+          "name": "sort-direction",
+          "description": "Sort direction",
+          "values": [
+            {
+              "name": "asc"
+            },
+            {
+              "name": "desc"
+            }
+          ]
+        },
+        {
+          "name": "tokenize",
+          "description": "Tokenize type",
+          "values": [
+            {
+              "name": "forward"
+            },
+            {
+              "name": "full"
+            },
+            {
+              "name": "reverse"
+            },
+            {
+              "name": "strict"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-datepicker",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH datepicker module.\r\n\r\nHandles the communication between internal `stzh-input`, `stzh-popover`, `stzh-button` and `stzh-calendar` element."
+      },
+      "attributes": [
+        {
+          "name": "calendar-max",
+          "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\r\nThis setting can be used alone or together with the min property."
+        },
+        {
+          "name": "calendar-min",
+          "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\r\nThis setting can be used alone or together with the max property."
+        },
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "inline",
+          "description": "Show calendar inline"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "label",
+          "description": "Label for input field and popover"
+        },
+        {
+          "name": "name",
+          "description": "Name of the hidden date picker input."
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text"
+        },
+        {
+          "name": "readonly",
+          "description": "Whether the element is readonly or not"
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
+        {
+          "name": "show-marker",
+          "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        {
+          "name": "size",
+          "description": "Size variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "Value of hidden date picker input (current selected date in ISO format)."
+        }
+      ]
+    },
+    {
+      "name": "stzh-dialog",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH dialog component."
+      },
+      "attributes": [
+        {
+          "name": "a11y-label",
+          "description": "Accessible label for dialog (use if no heading is used)"
+        },
+        {
+          "name": "a11y-role",
+          "description": "Accessibility role",
+          "values": [
+            {
+              "name": "alertdialog"
+            },
+            {
+              "name": "dialog"
+            }
+          ]
+        },
+        {
+          "name": "close-on-backdrop-click",
+          "description": "Close dialog when clicking outside of it"
+        },
+        {
+          "name": "close-on-escape-key",
+          "description": "Close dialog when pressing ESC"
+        },
+        {
+          "name": "heading",
+          "description": "Heading text"
+        },
+        {
+          "name": "hide-close",
+          "description": "Whether to hide close button"
+        },
+        {
+          "name": "open",
+          "description": "Open status"
+        },
+        {
+          "name": "size",
+          "description": "Size",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "stay",
+          "description": "Stay in original position (true) or move to body (false)"
+        }
+      ]
+    },
+    {
+      "name": "stzh-dropdown",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH dropdown component.\r\n\r\nUses the [tom-select](https://tom-select.js.org/) library internally."
+      },
+      "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        {
+          "name": "allow-empty-option",
+          "description": "If true, any options with a \"\" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder."
+        },
+        {
+          "name": "close-after-select",
+          "description": "After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made."
+        },
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the dropdown is disabled"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "icon",
+          "description": "Icon (use instead of icon slot)"
+        },
+        {
+          "name": "inline",
+          "description": "Show inline (auto width)"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "items",
+          "description": "Selected values"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "label-field",
+          "description": "The name of the property to render as an option / item label (not needed when custom rendering functions are defined)."
+        },
+        {
+          "name": "load-throttle",
+          "description": "The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression."
+        },
+        {
+          "name": "lock-optgroup-order",
+          "description": "If truthy, all optgroups will be displayed in the same order as they were added (by the `$order` property). Otherwise, it will order based on the score of the results in each."
+        },
+        {
+          "name": "max-options",
+          "description": "The max number of options to display in the dropdown. Set to `null` for an unlimited number of options."
+        },
+        {
+          "name": "min-characters",
+          "description": "Minimum of characters required to execute the `load` function"
+        },
+        {
+          "name": "multiple",
+          "description": "Whether multiple items option can be selected"
+        },
+        {
+          "name": "name",
+          "description": "Name of hidden select element"
+        },
+        {
+          "name": "no-backspace-delete",
+          "description": "Prevent backspace delete"
+        },
+        {
+          "name": "no-search",
+          "description": "Prevent option search"
+        },
+        {
+          "name": "open-on-focus",
+          "description": "Show the dropdown immediately when the control receives focus."
+        },
+        {
+          "name": "optgroup-field",
+          "description": "The name of the property to group items by."
+        },
+        {
+          "name": "optgroup-label-field",
+          "description": "The name of the property to render as an option group label (not needed when custom rendering functions are defined)."
+        },
+        {
+          "name": "optgroup-value-field",
+          "description": "The name of the option group property that serves as its unique identifier."
+        },
+        {
+          "name": "optgroups",
+          "description": "Option groups that options will be bucketed into.\r\nMake sure each object in the array has a property named whatever `optgroupValueField` is set to."
+        },
+        {
+          "name": "options",
+          "description": "Available options"
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder option"
+        },
+        {
+          "name": "popover-placement",
+          "description": "Popover placement",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "preload",
+          "description": "If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus.",
+          "values": [
+            {
+              "name": "focus"
+            }
+          ]
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
+        {
+          "name": "search-conjunction",
+          "description": "When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or'",
+          "values": [
+            {
+              "name": "and"
+            },
+            {
+              "name": "or"
+            }
+          ]
+        },
+        {
+          "name": "search-field",
+          "description": "An array of property names to analyze when filtering options.\r\nWeights can be given to each field to improve search result:\r\n`[{\"field\":\"text\",\"weight\":2},{\"field\":\"text2\",\"weight\":0.5}]`"
+        },
+        {
+          "name": "show-marker",
+          "description": "Show text in label depending if field is optional/required"
+        },
+        {
+          "name": "size",
+          "description": "Size variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "value-field",
+          "description": "The name of the property to use as the value when an item is selected."
+        },
+        {
+          "name": "variant",
+          "description": "Variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "plain"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-fieldset",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH fieldset component which can be used to group form elements."
+      },
+      "attributes": [
+        {
+          "name": "hide-legend",
+          "description": "Hide legend to show only for screenreaders"
+        },
+        {
+          "name": "legend",
+          "description": "Legend describing the field group inside the fieldset"
+        },
+        {
+          "name": "legend-curve",
+          "description": "Type of curve to overwrite the curve inherited from `level` attribute",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "caption"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "p1"
+            },
+            {
+              "name": "p2"
+            }
+          ]
+        },
+        {
+          "name": "legend-level",
+          "description": "Heading level inside legend",
+          "values": [
+            {
+              "name": "1"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "3"
+            },
+            {
+              "name": "4"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-figure",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH figure component."
+      },
+      "attributes": [
+        {
+          "name": "caption",
+          "description": "Caption"
+        },
+        {
+          "name": "copyright",
+          "description": "Copyright"
+        }
+      ]
+    },
+    {
+      "name": "stzh-flyingfocus",
+      "description": {
+        "kind": "markdown",
+        "value": "Flyingfocus component.\r\nInpsired by: https://github.com/Q42/floating-focus-a11y\r\nhttps://engineering.q42.nl/floating-focus/"
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-footer",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH footer component."
+      },
+      "attributes": [
+        {
+          "name": "copyright",
+          "description": "Copyright text (will show default copyright string if undefined)"
+        },
+        {
+          "name": "main-url",
+          "description": "Main URL for shortlinks"
+        },
+        {
+          "name": "variant",
+          "description": "Footer variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "egov"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-ghettobox",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH ghettobox component.\r\n\r\nNote: If `publish-date` attribute is used, the ghettobox will be hidden if the user has closed it before. This will be checked with a cookie (name of the cookie set by `close-time-cookie` attribute).\r\n\r\nVarious default properties are set to slotted `stzh-button` if nothing else is set:\r\n\r\n* `size=\"small\"`\r\n* `variant=\"secondary\"`\r\n* `effect=\"cta\"`\r\n* `icon=\"arrow-right-long\"`\r\n* `iconPosition=\"right\"`"
+      },
+      "attributes": [
+        {
+          "name": "close-time-key",
+          "description": "Name of cookie to compare its value with set `publishDate`\r\nto determine if ghettobox was already closed before by the user.\r\nIf empty (\"\"), no check is done and ghettobox\r\nwill always be shown again after a refresh.\r\nCookie name will be prefixed with `stzh-components-ghettobox-close-time`."
+        },
+        {
+          "name": "description",
+          "description": "Description"
+        },
+        {
+          "name": "hidden-title",
+          "description": "Overwrite hidden h1 title"
+        },
+        {
+          "name": "main-title",
+          "description": "Main title"
+        },
+        {
+          "name": "publish-date",
+          "description": "Publish date for ghettobox.\r\nIf user hasn't closed it yet or closed before this date\r\n(cookie check), it will be shown."
+        }
+      ]
+    },
+    {
+      "name": "stzh-header",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH header component."
+      },
+      "attributes": [
+        {
+          "name": "href",
+          "description": "Portal link (for logo)"
+        },
+        {
+          "name": "prevent-appnav-placeholder",
+          "description": "Prevent creating a appnav placeholder element\r\nwith the size of appnav inside header parent element.\r\nThis prevents the fixed appnav to overlap\r\ncontent at the end on mikro breakpoint,\r\nbut could lead to problems with certain layouts."
+        }
+      ]
+    },
+    {
+      "name": "stzh-heading",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH heading component.\r\n\r\nIf you want a semantic heading that automatically uses the right font curve, use the `<stzh-heading>` element:"
+      },
+      "attributes": [
+        {
+          "name": "curve",
+          "description": "Type of curve to overwrite the curve inherited from `level` attribute",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "caption"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "p1"
+            },
+            {
+              "name": "p2"
+            }
+          ]
+        },
+        {
+          "name": "level",
+          "description": "Heading level",
+          "values": [
+            {
+              "name": "1"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "3"
+            },
+            {
+              "name": "4"
+            }
+          ]
+        },
+        {
+          "name": "with-border",
+          "description": "With border bottom separator"
+        }
+      ]
+    },
+    {
+      "name": "stzh-hr",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH horizontal rule (hr) component."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-hspace",
+      "description": {
+        "kind": "markdown",
+        "value": "Use STZH horizontal space component.\r\n\r\nUse predefined spacings to introduce unified spaces between components.\r\nSee the <a href=\"?path=/story/tokens-spacings--page\" target=\"_blank\">spacings docs page</a> for more information.\r\n\r\n```html\r\n<stzh-hspace>\r\n  <stzh-button>Component 1</stzh-button>\r\n  <stzh-button>Component 2</stzh-button>\r\n  <stzh-button>Component 3</stzh-button>\r\n</stzh-hspace>\r\n\r\n<stzh-hspace curve=\"large\">\r\n  <div>Section 1</div>\r\n  <div>Section 2</div>\r\n  <div>Section 3</div>\r\n</stzh-hspace>\r\n```"
+      },
+      "attributes": [
+        {
+          "name": "around",
+          "description": "Apply spacing to slotted elements"
+        },
+        {
+          "name": "border",
+          "description": "Add border",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "curve",
+          "description": "Type of curve",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "regular"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "tiny"
+            }
+          ]
+        },
+        {
+          "name": "justify",
+          "description": "Alignment",
+          "values": [
+            {
+              "name": "around"
+            },
+            {
+              "name": "between"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "evenly"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Type of size",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        },
+        {
+          "name": "size-large",
+          "description": "Type of size above large breakpoint",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        },
+        {
+          "name": "size-medium",
+          "description": "Type of size above medium breakpoint",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        },
+        {
+          "name": "size-small",
+          "description": "Type of size above small breakpoint",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        },
+        {
+          "name": "size-ultra",
+          "description": "Type of size above ultra breakpoint",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-icon",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH icon component."
+      },
+      "attributes": [
+        {
+          "name": "a11y-title",
+          "description": "Hidden icon title for screenreader\r\n(usually not needed when e.g. inside links or buttons that have text)"
+        },
+        {
+          "name": "name",
+          "description": "Icon which should be displayed\r\nSee the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons."
+        }
+      ]
+    },
+    {
+      "name": "stzh-icon-sprite",
+      "description": {
+        "kind": "markdown",
+        "value": "The IconSprite component."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-input",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH input component."
+      },
+      "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        {
+          "name": "autocomplete",
+          "description": "Specify what the user agent has to provide as automated assistance.\r\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values"
+        },
+        {
+          "name": "clearable",
+          "description": "Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true)"
+        },
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "inputmode",
+          "description": "Specify inputmode.\r\nSee [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "maxlength",
+          "description": "Maxlength of characters"
+        },
+        {
+          "name": "minlength",
+          "description": "Minimum of characters"
+        },
+        {
+          "name": "multiline",
+          "description": "Whether the input is a textarea or an input field"
+        },
+        {
+          "name": "name",
+          "description": "The name of the input element"
+        },
+        {
+          "name": "no-autocomplete",
+          "description": "Whether autocomplete should be turned off"
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text"
+        },
+        {
+          "name": "readonly",
+          "description": "Whether the element is readonly or not"
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
+        {
+          "name": "rows",
+          "description": "Rows attribute if input element is textarea"
+        },
+        {
+          "name": "show-marker",
+          "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        {
+          "name": "size",
+          "description": "Size variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "If input field, this defines the type (if `search`, a search icon will be displayed)",
+          "values": [
+            {
+              "name": "email"
+            },
+            {
+              "name": "password"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "url"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value of the input element"
+        }
+      ]
+    },
+    {
+      "name": "stzh-link",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH link component."
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Active status"
+        },
+        {
+          "name": "badge",
+          "description": "Badge text"
+        },
+        {
+          "name": "badge-position",
+          "description": "Badge position",
+          "values": [
+            {
+              "name": "icon"
+            },
+            {
+              "name": "link"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disabled status"
+        },
+        {
+          "name": "href",
+          "description": "href attribute of the link"
+        },
+        {
+          "name": "icon",
+          "description": "Icon (use instead of icon slot)"
+        },
+        {
+          "name": "icon-only",
+          "description": "Whether only an icon is used inside the link"
+        },
+        {
+          "name": "icon-position",
+          "description": "Icon Position",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "link-accesskey",
+          "description": "Access key of link (usually a number e.g. 1)"
+        },
+        {
+          "name": "size",
+          "description": "Size variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "target",
+          "description": "target if the button is used as link (if href used)"
+        },
+        {
+          "name": "type",
+          "description": "type of the button, if used as button (if no href used)",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "Variant style",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "secondary"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-list",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH list component."
+      },
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "Variant",
+          "values": [
+            {
+              "name": "checklist"
+            },
+            {
+              "name": "ordered"
+            },
+            {
+              "name": "unordered"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-list-item",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH list-item component.\r\n\r\nSee list components for usage."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-loader",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH loader component.\r\n\r\nChange `label` prop or content dynamically to announce it to the screen reader (aria-live=\"polite\" area is used)."
+      },
+      "attributes": [
+        {
+          "name": "hide-label",
+          "description": "Hide label text visually (still anounced for screenreaders)"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "size",
+          "description": "Size",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-loadingbar",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH loadingbar component."
+      },
+      "attributes": [
+        {
+          "name": "hide-percent",
+          "description": "Whether to hide/show percent"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "percent",
+          "description": "Percent"
+        }
+      ]
+    },
+    {
+      "name": "stzh-menu",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH menu component."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-menu-item",
+      "description": {
+        "kind": "markdown",
+        "value": "See menu component for usage."
+      },
+      "attributes": [
+        {
+          "name": "a11y-label",
+          "description": "Accessible label for screen readers to replace visible text"
+        },
+        {
+          "name": "active",
+          "description": "Whether the button is active"
+        },
+        {
+          "name": "badge",
+          "description": "Badge"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the button is disabled"
+        },
+        {
+          "name": "href",
+          "description": "`href` if the button should be used as link"
+        },
+        {
+          "name": "icon",
+          "description": "Icon (use instead of icon slot)"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "target",
+          "description": "Target if the button is used as link (if `href` used)"
+        }
+      ]
+    },
+    {
+      "name": "stzh-message",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH message component."
+      },
+      "attributes": [
+        {
+          "name": "close-key",
+          "description": "Close cookie name key.\r\nComponent will check for the cookie (stzh-components-message-close-{name})\r\nand if not empty (message already closed before) will hide the message."
+        },
+        {
+          "name": "description",
+          "description": "Description (use instead of default slot)"
+        },
+        {
+          "name": "hide-close",
+          "description": "Whether to hide close button"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "type",
+          "description": "Type",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-metanav",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH metanav component which can be used inside the `<stzh-header>` element."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-overlay",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH overlay component."
+      },
+      "attributes": [
+        {
+          "name": "a11y-label",
+          "description": "Accessible label for dialog"
+        },
+        {
+          "name": "open",
+          "description": "Whether overlay is open"
+        },
+        {
+          "name": "stay",
+          "description": "Stay in original position (true) or move to body (false)"
+        }
+      ]
+    },
+    {
+      "name": "stzh-page-skiplinks",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH page skiplinks component.\r\n\r\nUse this component for implementing page wide skiplinks at the top of your `body` tag to improve accessibility of your app."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-pagetitle",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH pagetitle component.\r\n\r\nVarious default properties are set to slotted elements if nothing else is set:\r\n\r\n* `with-border` to `stzh-heading[slot=\"heading\"]`\r\n* `lead` to `stzh-text[slot=\"lead\"]`\r\n* `icon=\"web-link\"` to `stzh-link[action-right]`\r\n* `size=\"small\"` to `stzh-link[action-left]` and `stzh-link[action-right]`"
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-popover",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH popover component.\r\n\r\nFor computing the position of the popover, the library [floating-ui](https://floating-ui.com/docs/) was used."
+      },
+      "attributes": [
+        {
+          "name": "distance",
+          "description": "Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant (arrow height + 8px)."
+        },
+        {
+          "name": "label",
+          "description": "Label for mobile view (use label slot as alternative)"
+        },
+        {
+          "name": "open",
+          "description": "Whether popover should be open"
+        },
+        {
+          "name": "placement",
+          "description": "Default placement of popover relative to trigger element",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "skidding",
+          "description": "Shifting of popover content"
+        },
+        {
+          "name": "variant",
+          "description": "Variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "tooltip"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-portal-mitwirken",
+      "description": {
+        "kind": "markdown",
+        "value": "This component is only intended for the mitwirken.stadt-zuerich.ch portal.\r\nIt introduces global CSS for the page components of the Decidim tool."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-progressbar",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH progressbar component.\r\n\r\nFor events description, see <a href=\"?path=/story/components-progressbaritem--default\" target=\"_blank\">stzh-progressbar-item</a>."
+      },
+      "attributes": [
+        {
+          "name": "data",
+          "description": "Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):\r\n\r\n```\r\n{\r\n  \"label\": \"Step Label\"\r\n  \"icon\": \"clock\"\r\n}\r\n```"
+        },
+        {
+          "name": "index",
+          "description": "Index of the item that be active"
+        },
+        {
+          "name": "steps",
+          "description": "Number of steps to show below small breakpoint"
+        },
+        {
+          "name": "steps-large",
+          "description": "Number of steps to show above large breakpoint"
+        },
+        {
+          "name": "steps-medium",
+          "description": "Number of steps to show above medium breakpoint"
+        },
+        {
+          "name": "steps-small",
+          "description": "Number of steps to show above small breakpoint"
+        },
+        {
+          "name": "steps-ultra",
+          "description": "Number of steps to show above ultra breakpoint"
+        }
+      ]
+    },
+    {
+      "name": "stzh-progressbar-item",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH progressbar item component.\r\n\r\nUsed internally by <a href=\"?path=/story/components-progressbar--five-steps\" target=\"_blank\">stzh-progressbar</a>."
+      },
+      "attributes": [
+        {
+          "name": "current",
+          "description": ""
+        },
+        {
+          "name": "dotted",
+          "description": ""
+        },
+        {
+          "name": "first",
+          "description": ""
+        },
+        {
+          "name": "hide",
+          "description": ""
+        },
+        {
+          "name": "icon",
+          "description": ""
+        },
+        {
+          "name": "last",
+          "description": ""
+        },
+        {
+          "name": "passed",
+          "description": ""
+        },
+        {
+          "name": "step",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "stzh-radio",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH radio component.\r\n\r\nUse it with the `stzh-radiogroup` component if you want to use multiple radio elements and connect them easily."
+      },
+      "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        {
+          "name": "checked",
+          "description": "Checked status"
+        },
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "name",
+          "description": "The name of the input element"
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
+        {
+          "name": "show-marker",
+          "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        {
+          "name": "value",
+          "description": "The value of the input element"
+        }
+      ]
+    },
+    {
+      "name": "stzh-radiogroup",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH radiogroup component."
+      },
+      "attributes": [
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "direction",
+          "description": "Direction",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "hide-legend",
+          "description": "Hide legend to show only for screenreaders"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "legend",
+          "description": "The legend"
+        },
+        {
+          "name": "name",
+          "description": "The name of the input radio elements"
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
+        {
+          "name": "show-marker",
+          "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        {
+          "name": "value",
+          "description": "Select a radio by value"
+        }
+      ]
+    },
+    {
+      "name": "stzh-readspeaker",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH readspeaker component.\r\n\r\nUses the [ReadSpeaker](https://wrdev.readspeaker.com/) library which is located inside the `assets/vendor/readspeaker` folder. Works by using their API to create a link with a URL and ID of a container element from which text should be read to the user. The link will return an MP3 stream.\r\n\r\n- [Read here](https://wrdev.readspeaker.com/adaptation/configurations) about configuration possibilities\r\n\r\nSets `icon=volume-medium` by default if a `stzh-link` or `stzh-button` is slotted and nothing else is set."
+      },
+      "attributes": [
+        {
+          "name": "event-id",
+          "description": "RS event ID"
+        },
+        {
+          "name": "href",
+          "description": "RS url of site (e.g. https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html)"
+        }
+      ]
+    },
+    {
+      "name": "stzh-richtext",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH richtext component.\r\n\r\nThis component styles (colors, fonts, spacings) the slotted text elements `hX`, `p`, `i`, `b`, `strong`, `em`, `ul`, `ol`, `blockquote` and `a` (icon are added to external links) and adds spacings to the components `stzh-text` and `stzh-heading`.\r\n\r\nThis is especially useful when the content is coming from a WYSIWYG editor within a CMS."
+      },
+      "attributes": [
+        {
+          "name": "external-link-icon",
+          "description": "Icon used for marking external links"
+        },
+        {
+          "name": "external-link-selector",
+          "description": "Selector to recognize external link and attach an icon"
+        }
+      ]
+    },
+    {
+      "name": "stzh-row",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH row component.\r\n\r\nUse cells within the 12 column grid and set their span width.\r\n\r\n```html\r\n<stzh-row span-small=\"6\">\r\n    <stzh-cell>Cell 1</stzh-cell>\r\n    <stzh-cell>Cell 2</stzh-cell>\r\n    <stzh-cell>Cell 3</stzh-cell>\r\n    <stzh-cell>Cell 4</stzh-cell>\r\n</stzh-row>\r\n```"
+      },
+      "attributes": [
+        {
+          "name": "content",
+          "description": "Utilities for controlling how rows are positioned in multi-row flex containers.",
+          "values": [
+            {
+              "name": "around"
+            },
+            {
+              "name": "between"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "evenly"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "items",
+          "description": "Control how cells items are positioned along a container's cross axis",
+          "values": [
+            {
+              "name": "baseline"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "justify",
+          "description": "Controlling how cells are positioned along a container's main axis",
+          "values": [
+            {
+              "name": "around"
+            },
+            {
+              "name": "between"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "evenly"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "span",
+          "description": "Default span of each cell"
+        },
+        {
+          "name": "span-large",
+          "description": "Default span of each cell above large breakpoint"
+        },
+        {
+          "name": "span-medium",
+          "description": "Default span of each cell above medium breakpoint"
+        },
+        {
+          "name": "span-small",
+          "description": "Default span of each cell above small breakpoint"
+        },
+        {
+          "name": "span-ultra",
+          "description": "Default span of each cell above ultra breakpoint"
+        }
+      ]
+    },
+    {
+      "name": "stzh-saptcha",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH saptcha component."
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled or not"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "name",
+          "description": "Name of input"
+        },
+        {
+          "name": "numbers",
+          "description": "Numbers shown to user for selection"
+        },
+        {
+          "name": "value",
+          "description": "The value of the input element"
+        }
+      ]
+    },
+    {
+      "name": "stzh-section",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH section component.\r\n\r\nUse the `<stzh-section>` celement to create different region landmarks like with the native `section` element. Use `variant=\"highlight\"` for a grey bg padded variant."
+      },
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "Variant",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "highlight"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-servicecard",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH servicecard component."
+      },
+      "attributes": [
+        {
+          "name": "actions",
+          "description": "Card actions"
+        },
+        {
+          "name": "collapsed",
+          "description": "Whether card is collapsed or not"
+        },
+        {
+          "name": "collapsible",
+          "description": "Whether card is collapsible"
+        },
+        {
+          "name": "heading",
+          "description": "Heading"
+        },
+        {
+          "name": "hide-movement-actions",
+          "description": "Whether movement menu items should be shown"
+        },
+        {
+          "name": "middle-variant",
+          "description": "Middle column position variant (positioning behaviour on tablet)",
+          "values": [
+            {
+              "name": "to-left"
+            },
+            {
+              "name": "to-right"
+            }
+          ]
+        },
+        {
+          "name": "middle-vertical-spacing",
+          "description": "Set middle column vertical spacing",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "right-vertical-spacing",
+          "description": "Set right column vertical spacing",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "sortable-disabled",
+          "description": "Whether sorting should be disabled"
+        },
+        {
+          "name": "starrable",
+          "description": "Whether card star is displayed"
+        },
+        {
+          "name": "starred",
+          "description": "Whether card was starred"
+        },
+        {
+          "name": "subtitle",
+          "description": "Subtitle"
+        },
+        {
+          "name": "subtitle-interactive",
+          "description": "Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click"
+        },
+        {
+          "name": "type",
+          "description": "Type",
+          "values": [
+            {
+              "name": "alert"
+            },
+            {
+              "name": "default"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-servicecard-list",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH servicecard list component."
+      },
+      "attributes": [
+        {
+          "name": "show-toggle-link",
+          "description": "Whether collapse/expand toggle link"
+        },
+        {
+          "name": "sortable-data-id-attribute",
+          "description": "HTML attribute that is used by the `toArray()` of sortable method"
+        },
+        {
+          "name": "sortable-disabled",
+          "description": "Whether sorting should be disabled"
+        }
+      ]
+    },
+    {
+      "name": "stzh-skiplink",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH Skiplink component.\r\n\r\nUse this component implementing a skiplink to improve accessibility of your app. E.g. use when a module has a lot interactive elements and user should be able to skip over them."
+      },
+      "attributes": [
+        {
+          "name": "href",
+          "description": "href for linking to e.g. id of an element to skip to"
+        },
+        {
+          "name": "link-accesskey",
+          "description": "Access key of link (usually a number e.g. 1)"
+        },
+        {
+          "name": "link-title",
+          "description": "Link title for description e.g. how to use skiplink with access key ([ALT + 1])"
+        }
+      ]
+    },
+    {
+      "name": "stzh-sortable",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH sortable component."
+      },
+      "attributes": [
+        {
+          "name": "data-id-attribute",
+          "description": "HTML attribute that is used by the `toArray()` method"
+        },
+        {
+          "name": "disabled",
+          "description": "Wether sorting is disabled or not"
+        },
+        {
+          "name": "filter-elements",
+          "description": "Filtered elements that should prevent dragging inside the drag item elements"
+        }
+      ]
+    },
+    {
+      "name": "stzh-status",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH status component."
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "percent",
+          "description": "Percent"
+        },
+        {
+          "name": "type",
+          "description": "Type",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "with-loadingbar",
+          "description": "Whether to hide/show loadingbar"
+        }
+      ]
+    },
+    {
+      "name": "stzh-table",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH table component.\r\n\r\nUse this component instead of <a href=\"?path=/story/components-datatable--default\" target=\"_blank\">stzh-datatable</a> if you need more control over rendering the table element. You will have to implement filtering and sorting by yourself though. Following cell classes can be used within component for styling:\r\n\r\n- `align-left`: Text align to left\r\n- `align-right`: Text align to right\r\n- `align-center`: Text align to center\r\n- `valign-auto`: Vertical align to auto/baseline\r\n- `valign-middle`: Vertical align to middle\r\n- `valign-bottom`: Vertical align to bottom\r\n- `nowrap`: Prevent text from wrapping\r\n- `is-sortable`: Mark head cell as sortable (removes padding, `stzh-table__sort-button` used inside cell)\r\n- `has-sorted`: Mark head cell as ascending sorted (`stzh-table__icon` will appear)\r\n- `has-sorted-desc`: Mark head cell as descending sorted"
+      },
+      "attributes": [
+        {
+          "name": "fixed-left",
+          "description": "Columns that should be sticky on the left side (column indexes separated by comma)"
+        },
+        {
+          "name": "fixed-right",
+          "description": "Columns that should be sticky on the right side (column indexes separated by comma)"
+        }
+      ]
+    },
+    {
+      "name": "stzh-text",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH text component.\r\n\r\nStyle slotted text elements with correct font family and predefined font curves or sizes.\r\n\r\n```html\r\n<!-- use curve p2 (default curve is p1) -->\r\n<stzh-text curve=\"p2\">\r\n  <p>Laboris laborum aute id laboris</p>\r\n</stzh-text>\r\n\r\n<!-- lead text -->\r\n<stzh-text lead>\r\n  <p>Laboris laborum aute id laboris</p>\r\n</stzh-text>\r\n\r\n<!-- heavy text -->\r\n<stzh-text font=\"heavy\">\r\n  <p>Laboris laborum aute id laboris</p>\r\n</stzh-text>\r\n```"
+      },
+      "attributes": [
+        {
+          "name": "curve",
+          "description": "Type of curve",
+          "values": [
+            {
+              "name": "caption"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "p1"
+            },
+            {
+              "name": "p2"
+            }
+          ]
+        },
+        {
+          "name": "font",
+          "description": "Font used",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "heavy"
+            },
+            {
+              "name": "light"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "regular"
+            }
+          ]
+        },
+        {
+          "name": "lead",
+          "description": "Whether if text is lead text"
+        },
+        {
+          "name": "size",
+          "description": "Manually overwrite font size applied by curve attribute",
+          "values": [
+            {
+              "name": "centi"
+            },
+            {
+              "name": "deca"
+            },
+            {
+              "name": "deci"
+            },
+            {
+              "name": "giga"
+            },
+            {
+              "name": "hecto"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "kilo"
+            },
+            {
+              "name": "mega"
+            },
+            {
+              "name": "micro"
+            },
+            {
+              "name": "milli"
+            },
+            {
+              "name": "nano"
+            },
+            {
+              "name": "pico"
+            },
+            {
+              "name": "regular"
+            }
+          ]
+        },
+        {
+          "name": "size-large",
+          "description": "Manually overwrite font size applied by curve attribute above large breakpoint",
+          "values": [
+            {
+              "name": "centi"
+            },
+            {
+              "name": "deca"
+            },
+            {
+              "name": "deci"
+            },
+            {
+              "name": "giga"
+            },
+            {
+              "name": "hecto"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "kilo"
+            },
+            {
+              "name": "mega"
+            },
+            {
+              "name": "micro"
+            },
+            {
+              "name": "milli"
+            },
+            {
+              "name": "nano"
+            },
+            {
+              "name": "pico"
+            },
+            {
+              "name": "regular"
+            }
+          ]
+        },
+        {
+          "name": "size-medium",
+          "description": "Manually overwrite font size applied by curve attribute above medium breakpoint",
+          "values": [
+            {
+              "name": "centi"
+            },
+            {
+              "name": "deca"
+            },
+            {
+              "name": "deci"
+            },
+            {
+              "name": "giga"
+            },
+            {
+              "name": "hecto"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "kilo"
+            },
+            {
+              "name": "mega"
+            },
+            {
+              "name": "micro"
+            },
+            {
+              "name": "milli"
+            },
+            {
+              "name": "nano"
+            },
+            {
+              "name": "pico"
+            },
+            {
+              "name": "regular"
+            }
+          ]
+        },
+        {
+          "name": "size-small",
+          "description": "Manually overwrite font size applied by curve attribute above small breakpoint",
+          "values": [
+            {
+              "name": "centi"
+            },
+            {
+              "name": "deca"
+            },
+            {
+              "name": "deci"
+            },
+            {
+              "name": "giga"
+            },
+            {
+              "name": "hecto"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "kilo"
+            },
+            {
+              "name": "mega"
+            },
+            {
+              "name": "micro"
+            },
+            {
+              "name": "milli"
+            },
+            {
+              "name": "nano"
+            },
+            {
+              "name": "pico"
+            },
+            {
+              "name": "regular"
+            }
+          ]
+        },
+        {
+          "name": "size-ultra",
+          "description": "Manually overwrite font size applied by curve attribute above ultra breakpoint",
+          "values": [
+            {
+              "name": "centi"
+            },
+            {
+              "name": "deca"
+            },
+            {
+              "name": "deci"
+            },
+            {
+              "name": "giga"
+            },
+            {
+              "name": "hecto"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "kilo"
+            },
+            {
+              "name": "mega"
+            },
+            {
+              "name": "micro"
+            },
+            {
+              "name": "milli"
+            },
+            {
+              "name": "nano"
+            },
+            {
+              "name": "pico"
+            },
+            {
+              "name": "regular"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-toggle",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH toggle component."
+      },
+      "attributes": [
+        {
+          "name": "a11y-describedby",
+          "description": "Id for element which describes the input (this will be overwritten if description prop or slot is used)"
+        },
+        {
+          "name": "checked",
+          "description": "Checked status"
+        },
+        {
+          "name": "description",
+          "description": "Description message (use description slot as alternative)"
+        },
+        {
+          "name": "description-long",
+          "description": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the toggle is disabled"
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "invalid",
+          "description": "Invalid status"
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "label-position",
+          "description": "Position of label",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "Name of the input element"
+        },
+        {
+          "name": "required",
+          "description": "Required status"
+        },
+        {
+          "name": "show-marker",
+          "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        {
+          "name": "value",
+          "description": "Value of the input element"
+        }
+      ]
+    },
+    {
+      "name": "stzh-tooltip",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH tooltip component.\r\n\r\nFor computing the position of the tooltip, the library [floating-ui](https://floating-ui.com/docs/) was used."
+      },
+      "attributes": [
+        {
+          "name": "content",
+          "description": "Content of tooltip (use instead of content slot)"
+        },
+        {
+          "name": "distance",
+          "description": "Distance from tooltip content to trigger (default: arrow height + 8px = 16)"
+        },
+        {
+          "name": "interactive",
+          "description": "Whether tooltip is interactive"
+        },
+        {
+          "name": "label",
+          "description": "Label of tooltip (used for screenreaders)"
+        },
+        {
+          "name": "open",
+          "description": "Whether tooltip should be open"
+        },
+        {
+          "name": "placement",
+          "description": "Default placement of tooltip relative to trigger element",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "skidding",
+          "description": "Shifting of tooltip content"
+        },
+        {
+          "name": "trigger",
+          "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\r\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\r\nprogrammatically."
+        }
+      ]
+    },
+    {
+      "name": "stzh-upload",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH upload component.\r\n\r\nUses the [dropzone](https://www.dropzonejs.com/) library internally."
+      },
+      "attributes": [
+        {
+          "name": "accepted-files",
+          "description": "The default implementation of `accept` checks the file's mime type or\r\nextension against this list. This is a comma separated list of mime\r\ntypes or file extensions.\r\n\r\nEg.: `image/*,application/pdf,.psd`\r\n\r\nThis option will also be used as\r\n[`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)\r\nparameter on the hidden file input as well."
+        },
+        {
+          "name": "auto-process-queue",
+          "description": "If false, files will be added to the queue but the queue will not be\r\nprocessed automatically.\r\nThis can be useful if you need some additional user input before sending\r\nfiles (or if you want want all files sent at once).\r\nIf you're ready to send the file simply call `element.processQueue()`."
+        },
+        {
+          "name": "button",
+          "description": "Button text"
+        },
+        {
+          "name": "chunk-size",
+          "description": "If `chunking` is `true`, then this defines the chunk size in bytes."
+        },
+        {
+          "name": "chunking",
+          "description": "Whether you want files to be uploaded in chunks to your server. This can't be\r\nused in combination with `uploadMultiple`.\r\n\r\nSee `chunksUploaded` prop for the callback to finalise an upload."
+        },
+        {
+          "name": "default-headers",
+          "description": "Should the default headers be set or not?\r\nAccept: application/json <- for requesting json response\r\nCache-Control: no-cache <- Request shouldnt be cached\r\nX-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest"
+        },
+        {
+          "name": "description",
+          "description": "Description"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the upload is disabled or not."
+        },
+        {
+          "name": "error",
+          "description": "One or multiple error message (use error slot as alternative)"
+        },
+        {
+          "name": "existing-files",
+          "description": ""
+        },
+        {
+          "name": "filesize-base",
+          "description": "The base that is used to calculate the **displayed** filesize. You can\r\nchange this to 1024 if you would rather display kibibytes, mebibytes,\r\netc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`\r\nnot `1 kilobyte`. You can change this to `1024` if you don't care about\r\nvalidity."
+        },
+        {
+          "name": "force-chunking",
+          "description": "If `chunking` is enabled, this defines whether **every** file should be chunked,\r\neven if the file size is below chunkSize. This means, that the additional chunk\r\nform data will be submitted and the `chunksUploaded` callback will be invoked."
+        },
+        {
+          "name": "hidden-input-container",
+          "description": "This is the element the hidden input field (which is used when clicking on the\r\ndropzone to trigger file selection) will be appended to. This might\r\nbe important in case you use frameworks to switch the content of your page.\r\n\r\nCan be a selector string, or an element directly."
+        },
+        {
+          "name": "invalid",
+          "description": "Whether the upload is marked as invalid."
+        },
+        {
+          "name": "label",
+          "description": "Label"
+        },
+        {
+          "name": "max-files",
+          "description": "If not `null` defines how many files this dropzone handles. If it exceeds,\r\nthe event `stzhMaxfilesexceeded` will be called."
+        },
+        {
+          "name": "max-filesize",
+          "description": "The maximum filesize (in MiB) that is allowed to be uploaded."
+        },
+        {
+          "name": "method",
+          "description": "Can be changed to `\"put\"` if necessary. You can also provide a function\r\nthat will be called with `files` and must return the method.",
+          "values": [
+            {
+              "name": "post"
+            },
+            {
+              "name": "put"
+            }
+          ]
+        },
+        {
+          "name": "parallel-chunk-uploads",
+          "description": "If `true`, the individual chunks of a file are being uploaded simultaneously."
+        },
+        {
+          "name": "parallel-uploads",
+          "description": "How many file uploads to process in parallel."
+        },
+        {
+          "name": "retry-chunks",
+          "description": "Whether a chunk should be retried if it fails."
+        },
+        {
+          "name": "retry-chunks-limit",
+          "description": "If `retryChunks` is true, how many times should it be retried."
+        },
+        {
+          "name": "upload-multiple",
+          "description": "Whether to send multiple files in one request. If\r\nthis it set to true, then the fallback file input element will\r\nhave the `multiple` attribute as well. This option will\r\nalso trigger additional events (like `stzhSuccessMultiple`). See the events\r\ndocumentation section for more information."
+        },
+        {
+          "name": "url",
+          "description": "URL the files are processed to.\r\n\r\nYou can also provide a function that will be called with `files` and\r\n`dataBlocks`  and must return the url as string."
+        },
+        {
+          "name": "with-credentials",
+          "description": "Will be set on the XHRequest."
+        }
+      ]
+    },
+    {
+      "name": "stzh-vbz-linechip",
+      "description": {
+        "kind": "markdown",
+        "value": "The VBZ linechip component."
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Active"
+        },
+        {
+          "name": "alert",
+          "description": "Show alert icon"
+        },
+        {
+          "name": "global",
+          "description": "Whether it is a global disturbance"
+        },
+        {
+          "name": "line",
+          "description": "Line",
+          "values": [
+            {
+              "name": "2"
+            },
+            {
+              "name": "3"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "5"
+            },
+            {
+              "name": "6"
+            },
+            {
+              "name": "7"
+            },
+            {
+              "name": "8"
+            },
+            {
+              "name": "9"
+            },
+            {
+              "name": "10"
+            },
+            {
+              "name": "11"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "13"
+            },
+            {
+              "name": "14"
+            },
+            {
+              "name": "15"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "17"
+            },
+            {
+              "name": "19"
+            },
+            {
+              "name": "21"
+            },
+            {
+              "name": "23"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "25"
+            },
+            {
+              "name": "29"
+            },
+            {
+              "name": "31"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "33"
+            },
+            {
+              "name": "34"
+            },
+            {
+              "name": "35"
+            },
+            {
+              "name": "36"
+            },
+            {
+              "name": "37"
+            },
+            {
+              "name": "38"
+            },
+            {
+              "name": "39"
+            },
+            {
+              "name": "40"
+            },
+            {
+              "name": "45"
+            },
+            {
+              "name": "46"
+            },
+            {
+              "name": "54"
+            },
+            {
+              "name": "61"
+            },
+            {
+              "name": "62"
+            },
+            {
+              "name": "63"
+            },
+            {
+              "name": "64"
+            },
+            {
+              "name": "66"
+            },
+            {
+              "name": "67"
+            },
+            {
+              "name": "69"
+            },
+            {
+              "name": "70"
+            },
+            {
+              "name": "72"
+            },
+            {
+              "name": "73"
+            },
+            {
+              "name": "75"
+            },
+            {
+              "name": "76"
+            },
+            {
+              "name": "77"
+            },
+            {
+              "name": "78"
+            },
+            {
+              "name": "79"
+            },
+            {
+              "name": "80"
+            },
+            {
+              "name": "83"
+            },
+            {
+              "name": "89"
+            },
+            {
+              "name": "91"
+            },
+            {
+              "name": "94"
+            },
+            {
+              "name": "95"
+            },
+            {
+              "name": "99"
+            },
+            {
+              "name": "151"
+            },
+            {
+              "name": "152"
+            },
+            {
+              "name": "153"
+            },
+            {
+              "name": "156"
+            },
+            {
+              "name": "161"
+            },
+            {
+              "name": "162"
+            },
+            {
+              "name": "163"
+            },
+            {
+              "name": "165"
+            },
+            {
+              "name": "184"
+            },
+            {
+              "name": "185"
+            },
+            {
+              "name": "200"
+            },
+            {
+              "name": "201"
+            },
+            {
+              "name": "215"
+            },
+            {
+              "name": "220"
+            },
+            {
+              "name": "235"
+            },
+            {
+              "name": "236"
+            },
+            {
+              "name": "245"
+            },
+            {
+              "name": "301"
+            },
+            {
+              "name": "302"
+            },
+            {
+              "name": "303"
+            },
+            {
+              "name": "304"
+            },
+            {
+              "name": "305"
+            },
+            {
+              "name": "306"
+            },
+            {
+              "name": "307"
+            },
+            {
+              "name": "308"
+            },
+            {
+              "name": "309"
+            },
+            {
+              "name": "311"
+            },
+            {
+              "name": "314"
+            },
+            {
+              "name": "315"
+            },
+            {
+              "name": "321"
+            },
+            {
+              "name": "323"
+            },
+            {
+              "name": "325"
+            },
+            {
+              "name": "350"
+            },
+            {
+              "name": "444"
+            },
+            {
+              "name": "445"
+            },
+            {
+              "name": "701"
+            },
+            {
+              "name": "702"
+            },
+            {
+              "name": "703"
+            },
+            {
+              "name": "704"
+            },
+            {
+              "name": "705"
+            },
+            {
+              "name": "720"
+            },
+            {
+              "name": "721"
+            },
+            {
+              "name": "725"
+            },
+            {
+              "name": "726"
+            },
+            {
+              "name": "727"
+            },
+            {
+              "name": "742"
+            },
+            {
+              "name": "743"
+            },
+            {
+              "name": "744"
+            },
+            {
+              "name": "745"
+            },
+            {
+              "name": "747"
+            },
+            {
+              "name": "748"
+            },
+            {
+              "name": "751"
+            },
+            {
+              "name": "752"
+            },
+            {
+              "name": "753"
+            },
+            {
+              "name": "754"
+            },
+            {
+              "name": "759"
+            },
+            {
+              "name": "760"
+            },
+            {
+              "name": "765"
+            },
+            {
+              "name": "768"
+            },
+            {
+              "name": "781"
+            },
+            {
+              "name": "786"
+            },
+            {
+              "name": "787"
+            },
+            {
+              "name": "910"
+            },
+            {
+              "name": "912"
+            },
+            {
+              "name": "916"
+            },
+            {
+              "name": "917"
+            },
+            {
+              "name": "918"
+            },
+            {
+              "name": "919"
+            },
+            {
+              "name": "E"
+            },
+            {
+              "name": "N"
+            },
+            {
+              "name": "N1"
+            },
+            {
+              "name": "N2"
+            },
+            {
+              "name": "N4"
+            },
+            {
+              "name": "N5"
+            },
+            {
+              "name": "N6"
+            },
+            {
+              "name": "N7"
+            },
+            {
+              "name": "N8"
+            },
+            {
+              "name": "N9"
+            },
+            {
+              "name": "N10"
+            },
+            {
+              "name": "N11"
+            },
+            {
+              "name": "N12"
+            },
+            {
+              "name": "N13"
+            },
+            {
+              "name": "N14"
+            },
+            {
+              "name": "N15"
+            },
+            {
+              "name": "N16"
+            },
+            {
+              "name": "N17"
+            },
+            {
+              "name": "N18"
+            },
+            {
+              "name": "N19"
+            },
+            {
+              "name": "N30"
+            },
+            {
+              "name": "N31"
+            },
+            {
+              "name": "N32"
+            },
+            {
+              "name": "N33"
+            },
+            {
+              "name": "N34"
+            },
+            {
+              "name": "N45"
+            },
+            {
+              "name": "N72"
+            },
+            {
+              "name": "N78"
+            },
+            {
+              "name": "SN1"
+            },
+            {
+              "name": "SN4"
+            },
+            {
+              "name": "SN5"
+            },
+            {
+              "name": "SN6"
+            },
+            {
+              "name": "SN7"
+            },
+            {
+              "name": "SN8"
+            },
+            {
+              "name": "SN9"
+            },
+            {
+              "name": "S2"
+            },
+            {
+              "name": "S3"
+            },
+            {
+              "name": "S4"
+            },
+            {
+              "name": "S5"
+            },
+            {
+              "name": "S6"
+            },
+            {
+              "name": "S7"
+            },
+            {
+              "name": "S8"
+            },
+            {
+              "name": "S9"
+            },
+            {
+              "name": "S10"
+            },
+            {
+              "name": "S11"
+            },
+            {
+              "name": "S14"
+            },
+            {
+              "name": "S15"
+            },
+            {
+              "name": "S16"
+            },
+            {
+              "name": "S18"
+            },
+            {
+              "name": "S19"
+            },
+            {
+              "name": "S20"
+            },
+            {
+              "name": "S21"
+            },
+            {
+              "name": "S23"
+            },
+            {
+              "name": "S24"
+            },
+            {
+              "name": "S25"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "stzh-vbz-majorticker",
+      "description": {
+        "kind": "markdown",
+        "value": "The VBZ majorticker component."
+      },
+      "attributes": [
+        {
+          "name": "api",
+          "description": "API URL(`{lang}` are replaced in the URL)"
+        },
+        {
+          "name": "data",
+          "description": "Data to pass in directly (alternative for API call)"
+        },
+        {
+          "name": "ghettobox-close-time-key",
+          "description": "Overwrite ghettobox close time cookie option if needed"
+        },
+        {
+          "name": "more-info-link",
+          "description": "More info link (`{lang}` and `{id}` are replaced in the URL)"
+        }
+      ]
+    },
+    {
+      "name": "stzh-vbz-ticker",
+      "description": {
+        "kind": "markdown",
+        "value": "The VBZ ticker component."
+      },
+      "attributes": [
+        {
+          "name": "api",
+          "description": "API URL(`{lang}` are replaced in the URL)"
+        },
+        {
+          "name": "data",
+          "description": "Data to pass in directly (alternative for API call)"
+        },
+        {
+          "name": "more-info-link",
+          "description": "More info link (`{lang}` and `{id}` are replaced in the URL)"
+        }
+      ]
+    },
+    {
+      "name": "stzh-visuallyhidden",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH visuallyhidden component.\r\n\r\nUse to visually hide content, but still readable by screenreaders or focusable. Focusable content will show if focused."
+      },
+      "attributes": []
+    },
+    {
+      "name": "stzh-vspace",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH vertical space component.\r\n\r\nUse predefined spacings to introduce unified spaces between components. \r\nSee the <a href=\"?path=/story/tokens-spacings--page\" target=\"_blank\">spacings docs page</a> for more information."
+      },
+      "attributes": [
+        {
+          "name": "around",
+          "description": "Apply spacing to slotted elements"
+        },
+        {
+          "name": "border",
+          "description": "Add border",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "curve",
+          "description": "Type of curve",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "regular"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "tiny"
+            }
+          ]
+        },
+        {
+          "name": "justify",
+          "description": "Alignment",
+          "values": [
+            {
+              "name": "around"
+            },
+            {
+              "name": "between"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "evenly"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Type of size",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        },
+        {
+          "name": "size-large",
+          "description": "Type of size above large breakpoint",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        },
+        {
+          "name": "size-medium",
+          "description": "Type of size above medium breakpoint",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        },
+        {
+          "name": "size-small",
+          "description": "Type of size above small breakpoint",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        },
+        {
+          "name": "size-ultra",
+          "description": "Type of size above ultra breakpoint",
+          "values": [
+            {
+              "name": "big"
+            },
+            {
+              "name": "huge"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xbig"
+            },
+            {
+              "name": "xhuge"
+            },
+            {
+              "name": "xlarge"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxlarge"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "xxxlarge"
+            },
+            {
+              "name": "xxxsmall"
+            },
+            {
+              "name": "xxxxlarge"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}