@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/vscode-data.json

@@ -65,7 +65,7 @@
       "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."
+        "value": "The STZH actions component.\n\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": [
         {
@@ -93,7 +93,7 @@
       "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."
+        "value": "The STZH app navigation component which can be used inside the `<stzh-header>` element.\n\nLinks elements can be slotted into the default slot.\nBy default `size=\"small\"` and `variant=\"secondary\"` will be set to the `stzh-link` elements if nothing else is set."
       },
       "attributes": [
         {
@@ -343,15 +343,15 @@
       "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."
+          "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\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."
+          "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\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."
+          "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property."
         },
         {
           "name": "value",
@@ -665,7 +665,7 @@
       "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."
+        "value": "The STZH container component.\n\nSets side margins and max-width based on the current breakpoint."
       },
       "attributes": []
     },
@@ -673,7 +673,7 @@
       "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```"
+        "value": "The STZH cspace component.\n\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.\n\n```html\n<stzh-cspace>\n  <stzh-heading>Heading</stzh-heading>\n  <stzh-text>Lorem ipsum</stzh-text>\n  <stzh-figure>\n    <img src=\"media/images/example.jpg\" loading=\"lazy\" />\n  </stzh-figure>\n  <stzh-heading level=\"2\">Heading<stzh-heading>\n  // note: use \"no-cspace-top\" to disable top margin\n  // or \"no-cspace-bottom\" to disable bottom margin if needed\n  <stzh-button no-cspace-top no-cspace-bottom>Test</stzh-button>\n  ...\n</stzh-cspace>\n```"
       },
       "attributes": []
     },
@@ -720,7 +720,7 @@
               "name": "success"
             },
             {
-              "name": "default"
+              "name": "warning"
             }
           ]
         },
@@ -742,7 +742,7 @@
       "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."
+        "value": "The STZH datatable component.\n\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": [
         {
@@ -801,16 +801,16 @@
       "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."
+        "value": "The STZH datepicker module.\n\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."
+          "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\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."
+          "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property."
         },
         {
           "name": "description",
@@ -943,7 +943,7 @@
       "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."
+        "value": "The STZH dropdown component.\n\nUses the [tom-select](https://tom-select.js.org/) library internally."
       },
       "attributes": [
         {
@@ -1048,7 +1048,7 @@
         },
         {
           "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."
+          "description": "Option groups that options will be bucketed into.\nMake sure each object in the array has a property named whatever `optgroupValueField` is set to."
         },
         {
           "name": "options",
@@ -1097,7 +1097,7 @@
         },
         {
           "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}]`"
+          "description": "An array of property names to analyze when filtering options.\nWeights can be given to each field to improve search result:\n`[{\"field\":\"text\",\"weight\":2},{\"field\":\"text2\",\"weight\":0.5}]`"
         },
         {
           "name": "show-marker",
@@ -1225,7 +1225,7 @@
       "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/"
+        "value": "Flyingfocus component.\nInpsired by: https://github.com/Q42/floating-focus-a11y\nhttps://engineering.q42.nl/floating-focus/"
       },
       "attributes": []
     },
@@ -1262,12 +1262,12 @@
       "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\"`"
+        "value": "The STZH ghettobox component.\n\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).\n\nVarious default properties are set to slotted `stzh-button` if nothing else is set:\n\n* `size=\"small\"`\n* `variant=\"secondary\"`\n* `effect=\"cta\"`\n* `icon=\"arrow-right-long\"`\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`."
+          "description": "Name of cookie to compare its value with set `publishDate`\nto determine if ghettobox was already closed before by the user.\nIf empty (\"\"), no check is done and ghettobox\nwill always be shown again after a refresh.\nCookie name will be prefixed with `stzh-components-ghettobox-close-time`."
         },
         {
           "name": "description",
@@ -1283,7 +1283,7 @@
         },
         {
           "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."
+          "description": "Publish date for ghettobox.\nIf user hasn't closed it yet or closed before this date\n(cookie check), it will be shown."
         }
       ]
     },
@@ -1300,7 +1300,7 @@
         },
         {
           "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."
+          "description": "Prevent creating a appnav placeholder element\nwith the size of appnav inside header parent element.\nThis prevents the fixed appnav to overlap\ncontent at the end on mikro breakpoint,\nbut could lead to problems with certain layouts."
         }
       ]
     },
@@ -1308,7 +1308,7 @@
       "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:"
+        "value": "The STZH heading component.\n\nIf you want a semantic heading that automatically uses the right font curve, use the `<stzh-heading>` element:"
       },
       "attributes": [
         {
@@ -1383,7 +1383,7 @@
       "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```"
+        "value": "Use STZH horizontal space component.\n\nUse predefined spacings to introduce unified spaces between components.\nSee the <a href=\"?path=/story/tokens-spacings--page\" target=\"_blank\">spacings docs page</a> for more information.\n\n```html\n<stzh-hspace>\n  <stzh-button>Component 1</stzh-button>\n  <stzh-button>Component 2</stzh-button>\n  <stzh-button>Component 3</stzh-button>\n</stzh-hspace>\n\n<stzh-hspace curve=\"large\">\n  <div>Section 1</div>\n  <div>Section 2</div>\n  <div>Section 3</div>\n</stzh-hspace>\n```"
       },
       "attributes": [
         {
@@ -1740,11 +1740,11 @@
       "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)"
+          "description": "Hidden icon title for screenreader\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."
+          "description": "Icon which should be displayed\nSee the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons."
         }
       ]
     },
@@ -1769,7 +1769,7 @@
         },
         {
           "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"
+          "description": "Specify what the user agent has to provide as automated assistance.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values"
         },
         {
           "name": "clearable",
@@ -1793,7 +1793,7 @@
         },
         {
           "name": "inputmode",
-          "description": "Specify inputmode.\r\nSee [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values"
+          "description": "Specify inputmode.\nSee [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values"
         },
         {
           "name": "invalid",
@@ -1803,10 +1803,18 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "max",
+          "description": "If input type is number, this will be the maximum step number"
+        },
         {
           "name": "maxlength",
           "description": "Maxlength of characters"
         },
+        {
+          "name": "min",
+          "description": "If input type is number, this will be the minimum step number"
+        },
         {
           "name": "minlength",
           "description": "Minimum of characters"
@@ -1843,6 +1851,10 @@
           "name": "show-marker",
           "description": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
         },
+        {
+          "name": "show-spin",
+          "description": "If input type is number and this property is true, this will show the spin buttons on hover/focus"
+        },
         {
           "name": "size",
           "description": "Size variant",
@@ -1855,6 +1867,10 @@
             }
           ]
         },
+        {
+          "name": "step",
+          "description": "If input type is number, this will be the step size"
+        },
         {
           "name": "type",
           "description": "If input field, this defines the type (if `search`, a search icon will be displayed)",
@@ -1862,6 +1878,9 @@
             {
               "name": "email"
             },
+            {
+              "name": "number"
+            },
             {
               "name": "password"
             },
@@ -2021,7 +2040,7 @@
       "name": "stzh-list-item",
       "description": {
         "kind": "markdown",
-        "value": "The STZH list-item component.\r\n\r\nSee list components for usage."
+        "value": "The STZH list-item component.\n\nSee list components for usage."
       },
       "attributes": []
     },
@@ -2029,7 +2048,7 @@
       "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)."
+        "value": "The STZH loader component.\n\nChange `label` prop or content dynamically to announce it to the screen reader (aria-live=\"polite\" area is used)."
       },
       "attributes": [
         {
@@ -2133,7 +2152,7 @@
       "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."
+          "description": "Close cookie name key.\nComponent will check for the cookie (stzh-components-message-close-{name})\nand if not empty (message already closed before) will hide the message."
         },
         {
           "name": "description",
@@ -2200,7 +2219,7 @@
       "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."
+        "value": "The STZH page skiplinks component.\n\nUse this component for implementing page wide skiplinks at the top of your `body` tag to improve accessibility of your app."
       },
       "attributes": []
     },
@@ -2208,7 +2227,7 @@
       "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]`"
+        "value": "The STZH pagetitle component.\n\nVarious default properties are set to slotted elements if nothing else is set:\n\n* `with-border` to `stzh-heading[slot=\"heading\"]`\n* `lead` to `stzh-text[slot=\"lead\"]`\n* `icon=\"web-link\"` to `stzh-link[action-right]`\n* `size=\"small\"` to `stzh-link[action-left]` and `stzh-link[action-right]`"
       },
       "attributes": []
     },
@@ -2216,7 +2235,7 @@
       "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."
+        "value": "The STZH popover component.\n\nFor computing the position of the popover, the library [floating-ui](https://floating-ui.com/docs/) was used."
       },
       "attributes": [
         {
@@ -2295,7 +2314,7 @@
       "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."
+        "value": "This component is only intended for the mitwirken.stadt-zuerich.ch portal.\nIt introduces global CSS for the page components of the Decidim tool."
       },
       "attributes": []
     },
@@ -2303,12 +2322,12 @@
       "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>."
+        "value": "The STZH progressbar component.\n\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```"
+          "description": "Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):\n\n```\n{\n  \"label\": \"Step Label\"\n  \"icon\": \"clock\"\n}\n```"
         },
         {
           "name": "index",
@@ -2340,7 +2359,7 @@
       "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>."
+        "value": "The STZH progressbar item component.\n\nUsed internally by <a href=\"?path=/story/components-progressbar--five-steps\" target=\"_blank\">stzh-progressbar</a>."
       },
       "attributes": [
         {
@@ -2381,7 +2400,7 @@
       "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."
+        "value": "The STZH radio component.\n\nUse it with the `stzh-radiogroup` component if you want to use multiple radio elements and connect them easily."
       },
       "attributes": [
         {
@@ -2441,6 +2460,10 @@
         "value": "The STZH radiogroup component."
       },
       "attributes": [
+        {
+          "name": "checked-radio",
+          "description": "Current checked radio element (readonly)"
+        },
         {
           "name": "description",
           "description": "Description message (use description slot as alternative)"
@@ -2503,7 +2526,7 @@
       "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."
+        "value": "The STZH readspeaker component.\n\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.\n\n- [Read here](https://wrdev.readspeaker.com/adaptation/configurations) about configuration possibilities\n\nSets `icon=volume-medium` by default if a `stzh-link` or `stzh-button` is slotted and nothing else is set."
       },
       "attributes": [
         {
@@ -2520,7 +2543,7 @@
       "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."
+        "value": "The STZH richtext component.\n\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`.\n\nThis is especially useful when the content is coming from a WYSIWYG editor within a CMS."
       },
       "attributes": [
         {
@@ -2537,7 +2560,7 @@
       "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```"
+        "value": "The STZH row component.\n\nUse cells within the 12 column grid and set their span width.\n\n```html\n<stzh-row span-small=\"6\">\n    <stzh-cell>Cell 1</stzh-cell>\n    <stzh-cell>Cell 2</stzh-cell>\n    <stzh-cell>Cell 3</stzh-cell>\n    <stzh-cell>Cell 4</stzh-cell>\n</stzh-row>\n```"
       },
       "attributes": [
         {
@@ -2668,7 +2691,7 @@
       "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."
+        "value": "The STZH section component.\n\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": [
         {
@@ -2807,7 +2830,7 @@
       "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."
+        "value": "The STZH Skiplink component.\n\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": [
         {
@@ -2891,7 +2914,7 @@
       "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"
+        "value": "The STZH table component.\n\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:\n\n- `align-left`: Text align to left\n- `align-right`: Text align to right\n- `align-center`: Text align to center\n- `valign-auto`: Vertical align to auto/baseline\n- `valign-middle`: Vertical align to middle\n- `valign-bottom`: Vertical align to bottom\n- `nowrap`: Prevent text from wrapping\n- `is-sortable`: Mark head cell as sortable (removes padding, `stzh-table__sort-button` used inside cell)\n- `has-sorted`: Mark head cell as ascending sorted (`stzh-table__icon` will appear)\n- `has-sorted-desc`: Mark head cell as descending sorted"
       },
       "attributes": [
         {
@@ -2908,7 +2931,7 @@
       "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```"
+        "value": "The STZH text component.\n\nStyle slotted text elements with correct font family and predefined font curves or sizes.\n\n```html\n<!-- use curve p2 (default curve is p1) -->\n<stzh-text curve=\"p2\">\n  <p>Laboris laborum aute id laboris</p>\n</stzh-text>\n\n<!-- lead text -->\n<stzh-text lead>\n  <p>Laboris laborum aute id laboris</p>\n</stzh-text>\n\n<!-- heavy text -->\n<stzh-text font=\"heavy\">\n  <p>Laboris laborum aute id laboris</p>\n</stzh-text>\n```"
       },
       "attributes": [
         {
@@ -3284,7 +3307,7 @@
       "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."
+        "value": "The STZH tooltip component.\n\nFor computing the position of the tooltip, the library [floating-ui](https://floating-ui.com/docs/) was used."
       },
       "attributes": [
         {
@@ -3355,7 +3378,7 @@
         },
         {
           "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."
+          "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically."
         }
       ]
     },
@@ -3363,16 +3386,16 @@
       "name": "stzh-upload",
       "description": {
         "kind": "markdown",
-        "value": "The STZH upload component.\r\n\r\nUses the [dropzone](https://www.dropzonejs.com/) library internally."
+        "value": "The STZH upload component.\n\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."
+          "description": "The default implementation of `accept` checks the file's mime type or\nextension against this list. This is a comma separated list of mime\ntypes or file extensions.\n\nEg.: `image/*,application/pdf,.psd`\n\nThis option will also be used as\n[`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)\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()`."
+          "description": "If false, files will be added to the queue but the queue will not be\nprocessed automatically.\nThis can be useful if you need some additional user input before sending\nfiles (or if you want want all files sent at once).\nIf you're ready to send the file simply call `element.processQueue()`."
         },
         {
           "name": "button",
@@ -3384,11 +3407,11 @@
         },
         {
           "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."
+          "description": "Whether you want files to be uploaded in chunks to your server. This can't be\nused in combination with `uploadMultiple`.\n\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"
+          "description": "Should the default headers be set or not?\nAccept: application/json <- for requesting json response\nCache-Control: no-cache <- Request shouldnt be cached\nX-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest"
         },
         {
           "name": "description",
@@ -3404,19 +3427,19 @@
         },
         {
           "name": "existing-files",
-          "description": ""
+          "description": "Initially pre existing files (e.g. already uploaded by the user).\nArray of objects that must at least include `name` and `size` attribute:\n`[{\"name\":\"file1.txt\", \"size\": 12345}, {\"name\":\"file2.txt\", \"size\": 12345}]`"
         },
         {
           "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."
+          "description": "The base that is used to calculate the **displayed** filesize. You can\nchange this to 1024 if you would rather display kibibytes, mebibytes,\netc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`\nnot `1 kilobyte`. You can change this to `1024` if you don't care about\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."
+          "description": "If `chunking` is enabled, this defines whether **every** file should be chunked,\neven if the file size is below chunkSize. This means, that the additional chunk\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."
+          "description": "This is the element the hidden input field (which is used when clicking on the\ndropzone to trigger file selection) will be appended to. This might\nbe important in case you use frameworks to switch the content of your page.\n\nCan be a selector string, or an element directly."
         },
         {
           "name": "invalid",
@@ -3428,7 +3451,7 @@
         },
         {
           "name": "max-files",
-          "description": "If not `null` defines how many files this dropzone handles. If it exceeds,\r\nthe event `stzhMaxfilesexceeded` will be called."
+          "description": "If not `null` defines how many files this dropzone handles. If it exceeds,\nthe event `stzhMaxfilesexceeded` will be called."
         },
         {
           "name": "max-filesize",
@@ -3436,7 +3459,7 @@
         },
         {
           "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.",
+          "description": "Can be changed to `\"put\"` if necessary. You can also provide a function\nthat will be called with `files` and must return the method.",
           "values": [
             {
               "name": "post"
@@ -3464,11 +3487,11 @@
         },
         {
           "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."
+          "description": "Whether to send multiple files in one request. If\nthis it set to true, then the fallback file input element will\nhave the `multiple` attribute as well. This option will\nalso trigger additional events (like `stzhSuccessMultiple`). See the events\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."
+          "description": "URL the files are processed to.\n\nYou can also provide a function that will be called with `files` and\n`dataBlocks`  and must return the url as string."
         },
         {
           "name": "with-credentials",
@@ -4093,7 +4116,7 @@
       "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."
+        "value": "The STZH visuallyhidden component.\n\nUse to visually hide content, but still readable by screenreaders or focusable. Focusable content will show if focused."
       },
       "attributes": []
     },
@@ -4101,7 +4124,7 @@
       "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."
+        "value": "The STZH vertical space component.\n\nUse predefined spacings to introduce unified spaces between components. \nSee the <a href=\"?path=/story/tokens-spacings--page\" target=\"_blank\">spacings docs page</a> for more information."
       },
       "attributes": [
         {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oiz/stzh-components",
-    "version": "0.0.1-pretest",
+    "version": "1.5.0-alpha",
     "description": "STZH Web Components Library",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/cjs/utils-e84f4a8d.js

@@ -1,36 +0,0 @@
-'use strict';
-
-// IMPORTANT: Don't use this to check for a default slot when shadow DOM is not used
-// https://github.com/shoelace-style/shoelace/blob/9f7bc29b5f13eda1beb1d4f9c952894a21e13322/src/components/card/card.tsx
-// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named
-// slot, otherwise it will look for a "default" slot (e.g. a non-empty text node or an element with no slot attribute).
-//
-function hasSlot(el, name) {
-  // Look for a named slot
-  if (name) {
-    return el.querySelector(`[slot="${name}"]`) !== null;
-  }
-  // Look for a default slot
-  return Array.from(el.childNodes).some(node => {
-    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
-      return true;
-    }
-    if (node.nodeType === node.ELEMENT_NODE) {
-      const el = node;
-      if (!el.hasAttribute('slot')) {
-        return true;
-      }
-    }
-    return false;
-  });
-}
-function setPropsIfNull(element, attributes) {
-  Object.keys(attributes).forEach(attribute => {
-    if (element.getAttribute(attribute) === null) {
-      element[attribute] = attributes[attribute];
-    }
-  });
-}
-
-exports.hasSlot = hasSlot;
-exports.setPropsIfNull = setPropsIfNull;