@skf-design-system/ui-components 1.0.0-beta.4 → 1.0.0-beta.7

package/dist/vscode.html-custom-data.json

@@ -44,9 +44,239 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-card",
+      "description": "The `<skf-card>` can be used to group related subjects in a container\n---\n\n\n### **Slots:**\n - _default_ - The card's main content",
+      "attributes": [
+        {
+          "name": "no-border",
+          "description": "If true, removes border",
+          "values": []
+        },
+        {
+          "name": "no-padding",
+          "description": "If true, removes padding",
+          "values": []
+        },
+        {
+          "name": "stretch",
+          "description": "If true, the Card fills the parent element height",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-checkbox",
+      "description": "The `<skf-checkbox>` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The Radios label. Alternatively, you can use the `label` attribute.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "If true, sets disabled state",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "If true, value is required or must be checked for the form to be submittable",
+          "values": []
+        },
+        {
+          "name": "debug",
+          "description": "If defined, outputs helping hints in console",
+          "values": []
+        },
+        {
+          "name": "checked",
+          "description": "If true, outputs helping hints in console",
+          "values": []
+        },
+        {
+          "name": "custom-invalid",
+          "description": "If true, forces component to invalid state until removed",
+          "values": []
+        },
+        {
+          "name": "indeterminate",
+          "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
+          "values": []
+        },
+        {
+          "name": "required-label",
+          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "values": []
+        },
+        {
+          "name": "severity",
+          "description": "If defined, styles checkbox using provided severity",
+          "values": [
+            { "name": "alert" },
+            { "name": "success" },
+            { "name": "info" },
+            { "name": "warning" }
+          ]
+        },
+        {
+          "name": "show-valid",
+          "description": "If true, displays valid state after interaction",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "Size of the checkbox",
+          "values": [{ "name": "sm" }, { "name": "md" }]
+        },
+        {
+          "name": "value",
+          "description": "The current value of the input field",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-collapse",
+      "description": "The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Events:**\n - **skf-collapse-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content",
+      "attributes": [
+        {
+          "name": "animated",
+          "description": "If true, will animate the expand/collapse state",
+          "values": []
+        },
+        {
+          "name": "expanded",
+          "description": "If true, will set the collapse to be expanded by default",
+          "values": []
+        },
+        {
+          "name": "heading",
+          "description": "Heading for the collapse",
+          "values": []
+        },
+        {
+          "name": "heading-as",
+          "description": "Defines which heading element will be rendered",
+          "values": [{ "name": "h2" }, { "name": "h3" }, { "name": "h4" }]
+        },
+        {
+          "name": "small",
+          "description": "If true, renders the small version",
+          "values": []
+        },
+        {
+          "name": "truncate",
+          "description": "If true, will truncate the heading in collapsed state",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-dialog",
+      "description": "The `<skf-dialog>` is a component that open up a dialog with the content provided\n---\n\n\n### **Events:**\n - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)\n- **close** - Fires when the dialog is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **heading** - The dialog component's heading\n- **footer** - The dialog component's buttons goes here\n\n### **CSS Properties:**\n - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_\n- **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "close-button-aria-label",
+          "description": "If defined, sets the aria-label for the close button",
+          "values": []
+        },
+        {
+          "name": "heading",
+          "description": "Title for the modal/dialog",
+          "values": []
+        },
+        {
+          "name": "fullscreen",
+          "description": "If true, makes the dialog stretch edge to edge on screen",
+          "values": []
+        },
+        {
+          "name": "no-close-button",
+          "description": "If true, removes the close button",
+          "values": []
+        },
+        {
+          "name": "no-padding",
+          "description": "If defined, removes the inner padding",
+          "values": []
+        },
+        { "name": "open", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-alert",
+      "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link",
+      "attributes": [
+        {
+          "name": "closeable",
+          "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+          "values": []
+        },
+        {
+          "name": "button-label",
+          "description": "Close button aria-label",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "If defined, displays leading icon",
+          "values": [{ "name": "SkfIcon['name']" }]
+        },
+        {
+          "name": "severity",
+          "description": "If defined, gives the supplied appearance",
+          "values": [
+            { "name": "error" },
+            { "name": "info" },
+            { "name": "warning" },
+            { "name": "success" },
+            { "name": "alert" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-divider",
+      "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Defines the Divider color",
+          "values": [
+            { "name": "emphasised" },
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "tertiary" },
+            { "name": "inverse" }
+          ]
+        },
+        {
+          "name": "decorative",
+          "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+          "values": []
+        },
+        {
+          "name": "vertical",
+          "description": "If true, renders the divider vertically",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-button",
-      "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content",
+      "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n\n### **Slots:**\n - _default_ - The Primary content",
       "attributes": [
         {
           "name": "destructive",
@@ -225,6 +455,7 @@
           "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
           "values": []
         },
+        { "name": "no-validate", "values": [] },
         {
           "name": "size",
           "description": "If provided, displays an alternative size",
@@ -247,213 +478,6 @@
       ],
       "references": []
     },
-    {
-      "name": "skf-card",
-      "description": "The `<skf-card>` can be used to group related subjects in a container\n---\n\n\n### **Slots:**\n - _default_ - The card's main content",
-      "attributes": [
-        {
-          "name": "no-border",
-          "description": "If true, removes border",
-          "values": []
-        },
-        {
-          "name": "no-padding",
-          "description": "If true, removes padding",
-          "values": []
-        },
-        {
-          "name": "stretch",
-          "description": "If true, the Card fills the parent element height",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "skf-alert",
-      "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link",
-      "attributes": [
-        {
-          "name": "closeable",
-          "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-          "values": []
-        },
-        {
-          "name": "button-label",
-          "description": "Close button aria-label",
-          "values": []
-        },
-        {
-          "name": "icon",
-          "description": "If defined, displays leading icon",
-          "values": [{ "name": "SkfIcon['name']" }]
-        },
-        {
-          "name": "severity",
-          "description": "If defined, gives the supplied appearance",
-          "values": [
-            { "name": "error" },
-            { "name": "info" },
-            { "name": "warning" },
-            { "name": "success" },
-            { "name": "alert" }
-          ]
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "skf-checkbox",
-      "description": "The `<skf-checkbox>` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The Radios label. Alternatively, you can use the `label` attribute.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "If true, sets disabled state",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "If true, value is required or must be checked for the form to be submittable",
-          "values": []
-        },
-        {
-          "name": "debug",
-          "description": "If defined, outputs helping hints in console",
-          "values": []
-        },
-        {
-          "name": "checked",
-          "description": "If true, outputs helping hints in console",
-          "values": []
-        },
-        {
-          "name": "custom-invalid",
-          "description": "If true, forces component to invalid state until removed",
-          "values": []
-        },
-        {
-          "name": "hide-label",
-          "description": "If true, hides the label visually",
-          "values": []
-        },
-        {
-          "name": "indeterminate",
-          "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
-          "values": []
-        },
-        {
-          "name": "name",
-          "description": "If defined, adds name to the input-element",
-          "values": []
-        },
-        {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
-          "values": []
-        },
-        {
-          "name": "severity",
-          "description": "If defined, styles checkbox using provided severity",
-          "values": [
-            { "name": "alert" },
-            { "name": "success" },
-            { "name": "info" },
-            { "name": "warning" }
-          ]
-        },
-        {
-          "name": "show-valid",
-          "description": "If true, displays valid state after interaction",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "Size of the checkbox",
-          "values": [{ "name": "sm" }, { "name": "md" }]
-        },
-        {
-          "name": "value",
-          "description": "The current value of the input field",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "skf-divider",
-      "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
-      "attributes": [
-        {
-          "name": "color",
-          "description": "Defines the Divider color",
-          "values": [
-            { "name": "emphasised" },
-            { "name": "primary" },
-            { "name": "secondary" },
-            { "name": "tertiary" },
-            { "name": "inverse" }
-          ]
-        },
-        {
-          "name": "decorative",
-          "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-          "values": []
-        },
-        {
-          "name": "vertical",
-          "description": "If true, renders the divider vertically",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "skf-collapse",
-      "description": "The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Events:**\n - **skf-collapse-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content",
-      "attributes": [
-        {
-          "name": "animated",
-          "description": "If true, will animate the expand/collapse state",
-          "values": []
-        },
-        {
-          "name": "expanded",
-          "description": "If true, will set the collapse to be expanded by default",
-          "values": []
-        },
-        {
-          "name": "heading",
-          "description": "Heading for the collapse",
-          "values": []
-        },
-        {
-          "name": "heading-as",
-          "description": "Defines which heading element will be rendered",
-          "values": [
-            { "name": "h1" },
-            { "name": "h2" },
-            { "name": "h3" },
-            { "name": "h4" }
-          ]
-        },
-        {
-          "name": "small",
-          "description": "If true, renders the small version",
-          "values": []
-        },
-        {
-          "name": "truncate",
-          "description": "If true, will truncate the heading in collapsed state",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "skf-heading",
       "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",
@@ -689,6 +713,7 @@
           "description": "If true, value is required or must be checked for the form to be submittable",
           "values": []
         },
+        { "name": "autocomplete", "description": "-m  }", "values": [] },
         {
           "name": "button-aria-label-clear",
           "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
@@ -1054,7 +1079,7 @@
         },
         {
           "name": "rel",
-          "description": "Defines the relationship of the target object to the link object",
+          "description": "If defined, describes the relationship between a linked resource and the current document",
           "values": []
         },
         {
@@ -1122,7 +1147,7 @@
         },
         {
           "name": "color",
-          "description": "If defined, sets color of the logo",
+          "description": "Defines the color of the logo",
           "values": [
             { "name": "primary" },
             { "name": "secondary" },
@@ -1132,6 +1157,28 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-progress",
+      "description": "The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar\n---\n",
+      "attributes": [
+        {
+          "name": "animated",
+          "description": "If true, the progress-bar's fill value is animated",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "Describes how much work the task indicated by the progress element requires",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "Specifies how much of the task that has been completed",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-radio",
       "description": "The `<skf-radio>` component is used to create a radio input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The radios label. Alternatively, you can use the `label` attribute.",
@@ -1161,11 +1208,6 @@
           "description": "If true, forces component to invalid state until removed",
           "values": []
         },
-        {
-          "name": "hide-label",
-          "description": "If true, hides the label visually",
-          "values": []
-        },
         {
           "name": "label",
           "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
@@ -1308,7 +1350,7 @@
         {
           "name": "icon-color",
           "description": "If defined, sets provided color on the icon",
-          "values": [{ "name": "IconColor" }]
+          "values": [{ "name": "SeverityFgColor" }]
         },
         {
           "name": "selected",
@@ -1391,6 +1433,58 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-tab",
+      "description": "The `<skf-tab>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected\n- **click** - Fired when the component is clicked\n\n### **Slots:**\n - _default_ - The tab's label",
+      "attributes": [
+        {
+          "name": "panel",
+          "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-tab-group",
+      "description": "The `<skf-tab-group>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
+      "attributes": [
+        {
+          "name": "default-selected",
+          "description": "Sets the default selected tab",
+          "values": []
+        },
+        {
+          "name": "no-border",
+          "description": "If true, removes border",
+          "values": []
+        },
+        {
+          "name": "no-padding",
+          "description": "If true, removes padding",
+          "values": []
+        },
+        {
+          "name": "stretch",
+          "description": "If true, component fills the parent element height",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Sets the appearance of the tabs",
+          "values": [{ "name": "compressed" }, { "name": "expanded" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-tab-panel",
+      "description": "The `<skf-tab-panel>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content",
+      "attributes": [
+        { "name": "name", "description": "The tab panel's name.", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "skf-tag",
       "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
@@ -1691,6 +1785,45 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "skf-toast",
+      "description": "A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+      "attributes": [
+        {
+          "name": "closeable",
+          "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+          "values": []
+        },
+        { "name": "debug", "values": [] },
+        {
+          "name": "severity",
+          "description": "Severity of the toast.",
+          "values": [
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" },
+            { "name": "error" }
+          ]
+        },
+        {
+          "name": "timer",
+          "description": "Time in seconds before the toast disappears.",
+          "values": []
+        },
+        {
+          "name": "topOffset",
+          "description": "offsets where toasts emerge vertically",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-toast-wrapper",
+      "description": "The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.\n---\n\n\n### **Slots:**\n - _default_ - The alert components that the toast creates will render here.",
+      "attributes": [{ "name": "debug", "values": [] }],
+      "references": []
     }
   ]
 }