@oiz/stzh-components 2.2.0-beta → 2.3.0-alpha

package/dist/vscode-data.json

@@ -739,6 +739,10 @@
         {
           "name": "value",
           "description": "The value of the input element (if card is selectable)"
+        },
+        {
+          "name": "with-arrow",
+          "description": "Whether card arrow is shown in footer area"
         }
       ]
     },
@@ -1003,12 +1007,16 @@
       "attributes": [
         {
           "name": "a11y-describedby",
-          "description": "Id for element which describes the button"
+          "description": "Id for element which describes the link/button"
         },
         {
           "name": "a11y-label",
           "description": "Accessible label for screen readers to replace visible text"
         },
+        {
+          "name": "a11y-tabindex",
+          "description": "Tabindex of link/button"
+        },
         {
           "name": "active",
           "description": "Active"
@@ -1033,6 +1041,10 @@
           "name": "label",
           "description": "Label"
         },
+        {
+          "name": "non-interactive",
+          "description": "Whether chip is not interactive"
+        },
         {
           "name": "removable",
           "description": "Whether remove button should be shown"
@@ -1172,10 +1184,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": [
         {
@@ -1258,7 +1270,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",
@@ -1359,6 +1376,10 @@
             }
           ]
         },
+        {
+          "name": "disable-min-width",
+          "description": "Whether to disable min-width of datalist item"
+        },
         {
           "name": "hide-border",
           "description": "Hide border lines between items"
@@ -1506,6 +1527,10 @@
           "name": "columns",
           "description": "Columns"
         },
+        {
+          "name": "disable-min-width",
+          "description": "Whether to disable min-width of table"
+        },
         {
           "name": "id-field",
           "description": "ID field"
@@ -1980,6 +2005,10 @@
         {
           "name": "copyright",
           "description": "Copyright"
+        },
+        {
+          "name": "fullwidth",
+          "description": "Whether to stretch slotted content to fullwidth"
         }
       ]
     },
@@ -2175,6 +2204,9 @@
             {
               "name": "left"
             },
+            {
+              "name": "left-right"
+            },
             {
               "name": "none"
             },
@@ -2213,6 +2245,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",
@@ -2678,6 +2731,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": {
@@ -3368,7 +3429,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",
@@ -3407,6 +3468,10 @@
           "name": "current",
           "description": ""
         },
+        {
+          "name": "disabled",
+          "description": ""
+        },
         {
           "name": "dotted",
           "description": ""
@@ -3567,6 +3632,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": {
@@ -3770,6 +3887,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": {
@@ -3826,188 +3976,581 @@
       ]
     },
     {
-      "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": "hecto"
+              "name": "evenly"
             },
             {
-              "name": "hero"
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Type of size",
+          "values": [
+            {
+              "name": "big"
             },
             {
-              "name": "inherit"
+              "name": "huge"
             },
             {
-              "name": "kilo"
+              "name": "inherit"
             },
             {
-              "name": "mega"
+              "name": "large"
             },
             {
-              "name": "micro"
+              "name": "medium"
             },
             {
-              "name": "milli"
+              "name": "none"
             },
             {
-              "name": "nano"
+              "name": "small"
             },
             {
-              "name": "pico"
+              "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 table"
+        },
+        {
+          "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"
+            },
+            {
+              "name": "hero"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "kilo"
+            },
+            {
+              "name": "mega"
+            },
+            {
+              "name": "micro"
+            },
+            {
+              "name": "milli"
+            },
+            {
+              "name": "nano"
+            },
+            {
+              "name": "pico"
             },
             {
               "name": "regular"
@@ -4219,6 +4762,10 @@
           "name": "floating",
           "description": "Whether to float left content"
         },
+        {
+          "name": "fullwidth",
+          "description": "Whether display columns fullwidth on every breakpoint (not just mobile)"
+        },
         {
           "name": "size",
           "description": "Size variant",
@@ -5167,6 +5714,9 @@
             },
             {
               "name": "top"
+            },
+            {
+              "name": "top-bottom"
             }
           ]
         },
@@ -5200,6 +5750,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",