@oiz/stzh-components 2.2.0 → 2.3.0-alpha2

package/dist/vscode-data.json

@@ -502,6 +502,10 @@
             }
           ]
         },
+        {
+          "name": "floating",
+          "description": "Whether the button is floating"
+        },
         {
           "name": "fullwidth",
           "description": "Whether the button is full width"
@@ -546,6 +550,10 @@
           "name": "rel",
           "description": "Rel (if href is used)"
         },
+        {
+          "name": "rounded",
+          "description": "Whether the button is rounded"
+        },
         {
           "name": "size",
           "description": "Size variant",
@@ -1041,6 +1049,10 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "non-interactive",
+          "description": "Whether chip is not interactive"
+        },
         {
           "name": "removable",
           "description": "Whether remove button should be shown"
@@ -1056,6 +1068,9 @@
             {
               "name": "default"
             },
+            {
+              "name": "large"
+            },
             {
               "name": "small"
             }
@@ -1180,10 +1195,10 @@
       ]
     },
     {
-      "name": "stzh-contactaddress",
+      "name": "stzh-contact",
       "description": {
         "kind": "markdown",
-        "value": "The STZH contactaddress component.\n<mark>Beta version, do not use in production yet.</mark>"
+        "value": "The STZH contact component.\n<mark>Beta version, do not use in production yet.</mark>"
       },
       "attributes": [
         {
@@ -1266,7 +1281,12 @@
         "kind": "markdown",
         "value": "The STZH container component.\n\nSets side margins and max-width based on the current breakpoint."
       },
-      "attributes": []
+      "attributes": [
+        {
+          "name": "inverted",
+          "description": "Whether color should be inverted"
+        }
+      ]
     },
     {
       "name": "stzh-cspace",
@@ -1367,13 +1387,17 @@
             }
           ]
         },
+        {
+          "name": "disable-label-min-width",
+          "description": "Whether to disable min-width of datalist item label for the `horizontal` variant.\n\nIf `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\nIf `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n\nYou can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`."
+        },
         {
           "name": "hide-border",
           "description": "Hide border lines between items"
         },
         {
           "name": "items",
-          "description": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `label`, `meta`, `icon`, `href` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
+          "description": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `leadingIcon`, `label`, `meta`, `icon`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
         }
       ]
     },
@@ -1424,6 +1448,10 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "leading-icon",
+          "description": "Leading icon"
+        },
         {
           "name": "meta",
           "description": "Meta"
@@ -1432,6 +1460,31 @@
           "name": "rel",
           "description": "Rel (if href is used)"
         },
+        {
+          "name": "status-label",
+          "description": "Status Label"
+        },
+        {
+          "name": "status-type",
+          "description": "Status Type",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "error"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
         {
           "name": "target",
           "description": "Target (if href is used)"
@@ -1514,6 +1567,10 @@
           "name": "columns",
           "description": "Columns"
         },
+        {
+          "name": "disable-min-width",
+          "description": "Whether to disable min-width of the table.\n\nIf `false`, the default `min-width` is `700px`\nIf `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n\nYou can also overwrite the min-width via CSS with the custom property `--min-width`."
+        },
         {
           "name": "id-field",
           "description": "ID field"
@@ -1762,7 +1819,7 @@
         },
         {
           "name": "items",
-          "description": "Selected values"
+          "description": "Set selected options. Can be array set with JS or as JSON string.\nTo get the current (user) selected options, use `getItems` method."
         },
         {
           "name": "label",
@@ -1988,6 +2045,10 @@
         {
           "name": "copyright",
           "description": "Copyright"
+        },
+        {
+          "name": "fullwidth",
+          "description": "Whether to stretch slotted content to fullwidth"
         }
       ]
     },
@@ -2183,6 +2244,9 @@
             {
               "name": "left"
             },
+            {
+              "name": "left-right"
+            },
             {
               "name": "none"
             },
@@ -2221,6 +2285,27 @@
             }
           ]
         },
+        {
+          "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": "Alignment",
@@ -2686,6 +2771,14 @@
         }
       ]
     },
+    {
+      "name": "stzh-invert",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH invert component.\n<mark>Beta version, do not use in production yet.</mark>"
+      },
+      "attributes": []
+    },
     {
       "name": "stzh-langnav",
       "description": {
@@ -3376,7 +3469,7 @@
       "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):\n\n```\n{\n  \"label\": \"Step Label\"\n  \"icon\": \"clock\"\n}\n```"
+          "description": "Step data (JSON array with objects that have `label` attribute and optional:\n- `disabled`, if step should be disabled\n- `icon`, if icon instead of step number should be displayed):\n\n```\n{\n  \"label\": \"Step Label\"\n  \"icon\": \"clock\",\n  \"disabled\": true\n}\n```"
         },
         {
           "name": "index",
@@ -3415,6 +3508,10 @@
           "name": "current",
           "description": ""
         },
+        {
+          "name": "disabled",
+          "description": ""
+        },
         {
           "name": "dotted",
           "description": ""
@@ -3575,6 +3672,58 @@
         }
       ]
     },
+    {
+      "name": "stzh-ratio",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH ratio component.\n<mark>Beta version, do not use in production yet.</mark>"
+      },
+      "attributes": [
+        {
+          "name": "fit",
+          "description": "Fit mode",
+          "values": [
+            {
+              "name": "contain"
+            },
+            {
+              "name": "cover"
+            }
+          ]
+        },
+        {
+          "name": "portrait",
+          "description": "Whether aspect ratio is in portrait mode"
+        },
+        {
+          "name": "ratio",
+          "description": "Available aspect ratios",
+          "values": [
+            {
+              "name": "16:9"
+            },
+            {
+              "name": "1:1"
+            },
+            {
+              "name": "21:9"
+            },
+            {
+              "name": "2:1"
+            },
+            {
+              "name": "3:2"
+            },
+            {
+              "name": "4:3"
+            },
+            {
+              "name": "5:4"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "stzh-readspeaker",
       "description": {
@@ -3778,6 +3927,39 @@
         }
       ]
     },
+    {
+      "name": "stzh-show",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH show component."
+      },
+      "attributes": [
+        {
+          "name": "hide-from-date",
+          "description": "Hide from date"
+        },
+        {
+          "name": "large",
+          "description": "Large"
+        },
+        {
+          "name": "medium",
+          "description": "Medium"
+        },
+        {
+          "name": "mikro",
+          "description": "Mikro"
+        },
+        {
+          "name": "small",
+          "description": "Small"
+        },
+        {
+          "name": "ultra",
+          "description": "Ultra"
+        }
+      ]
+    },
     {
       "name": "stzh-sitemap",
       "description": {
@@ -3834,161 +4016,554 @@
       ]
     },
     {
-      "name": "stzh-status",
+      "name": "stzh-space",
       "description": {
         "kind": "markdown",
-        "value": "The STZH status component."
+        "value": "The STZH space component.\n\nUse predefined spacings to introduce unified spaces between components vertically and horizontally. \n\nSee the <a href=\"?path=/story/tokens-spacings--page\" target=\"_blank\">spacings docs page</a> for more information."
       },
       "attributes": [
         {
-          "name": "label",
-          "description": "Label"
-        },
-        {
-          "name": "percent",
-          "description": "Percent"
+          "name": "around",
+          "description": "Apply spacing to slotted elements"
         },
         {
-          "name": "type",
-          "description": "Type",
+          "name": "border",
+          "description": "Add border",
           "values": [
             {
-              "name": "default"
+              "name": "bottom"
             },
             {
-              "name": "error"
+              "name": "left"
             },
             {
-              "name": "info"
+              "name": "left-right"
             },
             {
-              "name": "success"
+              "name": "none"
             },
             {
-              "name": "warning"
+              "name": "right"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-bottom"
             }
           ]
         },
-        {
-          "name": "with-loadingbar",
-          "description": "Whether to hide/show loadingbar"
-        }
-      ]
-    },
-    {
-      "name": "stzh-sticky",
-      "description": {
-        "kind": "markdown",
-        "value": "The STZH sticky component.\n<mark>Beta version, do not use in production yet.</mark>\n\nMakes slotted content sticky with help of `position: sticky` and adds additional events when element gets stucked. To make it work, parent elements are not allowed to have a overflow set to `auto`, `hidden` or `scroll`.\n\nWhen element is stuck `is-stuck` attribute will be added to the host element. Additionally `is-stuck-top` or `is-stuck-bottom` will be added."
-      },
-      "attributes": [
-        {
-          "name": "disable-sticky-bottom",
-          "description": "Whether to disable sticking to bottom"
-        },
-        {
-          "name": "disable-sticky-top",
-          "description": "Whether to disable sticking to top"
-        }
-      ]
-    },
-    {
-      "name": "stzh-table",
-      "description": {
-        "kind": "markdown",
-        "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": [
-        {
-          "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.\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": [
         {
           "name": "curve",
           "description": "Type of curve",
           "values": [
             {
-              "name": "caption"
-            },
-            {
-              "name": "default"
+              "name": "big"
             },
             {
-              "name": "h1"
+              "name": "huge"
             },
             {
-              "name": "h2"
+              "name": "large"
             },
             {
-              "name": "h3"
+              "name": "medium"
             },
             {
-              "name": "h4"
+              "name": "none"
             },
             {
-              "name": "hero"
+              "name": "regular"
             },
             {
-              "name": "p1"
+              "name": "small"
             },
             {
-              "name": "p2"
+              "name": "tiny"
             }
           ]
         },
         {
-          "name": "font",
-          "description": "Font used",
+          "name": "items",
+          "description": "Control how cells items are positioned along a container's cross axis",
           "values": [
             {
-              "name": "default"
+              "name": "baseline"
             },
             {
-              "name": "heavy"
+              "name": "center"
             },
             {
-              "name": "light"
+              "name": "end"
             },
             {
-              "name": "medium"
+              "name": "start"
             },
             {
-              "name": "regular"
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "lead",
-          "description": "Whether if text is lead text"
-        },
-        {
-          "name": "size",
-          "description": "Manually overwrite font size applied by curve attribute",
+          "name": "justify",
+          "description": "Alignment",
           "values": [
             {
-              "name": "centi"
+              "name": "around"
             },
             {
-              "name": "deca"
+              "name": "between"
             },
             {
-              "name": "deci"
+              "name": "center"
             },
             {
-              "name": "giga"
+              "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-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-sticky",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH sticky component.\n<mark>Beta version, do not use in production yet.</mark>\n\nMakes slotted content sticky with help of `position: sticky` and adds additional events when element gets stucked. To make it work, parent elements are not allowed to have a overflow set to `auto`, `hidden` or `scroll`.\n\nWhen element is stuck `is-stuck` attribute will be added to the host element. Additionally `is-stuck-top` or `is-stuck-bottom` will be added."
+      },
+      "attributes": [
+        {
+          "name": "breakout",
+          "description": "Whether to breakout container"
+        },
+        {
+          "name": "disable-sticky-bottom",
+          "description": "Whether to disable sticking to bottom"
+        },
+        {
+          "name": "disable-sticky-top",
+          "description": "Whether to disable sticking to top"
+        }
+      ]
+    },
+    {
+      "name": "stzh-table",
+      "description": {
+        "kind": "markdown",
+        "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": [
+        {
+          "name": "disable-min-width",
+          "description": "Whether to disable min-width of the table.\n\nIf `false`, the default `min-width` is `700px`\nIf `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n\nYou can also overwrite the min-width via CSS with the custom property `--min-width`."
+        },
+        {
+          "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.\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": [
+        {
+          "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"
@@ -5179,6 +5754,9 @@
             },
             {
               "name": "top"
+            },
+            {
+              "name": "top-bottom"
             }
           ]
         },
@@ -5212,6 +5790,27 @@
             }
           ]
         },
+        {
+          "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": "Alignment",