@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.7

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

@@ -107,16 +107,16 @@
       "name": "skf-alert",
       "description": "The `<skf-alert>` is a type of notification that appears in-line\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles\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": "button-label",
-          "description": "Close button aria-label",
-          "values": []
-        },
         {
           "name": "icon",
           "description": "If defined, displays leading icon",
           "values": [{ "name": "Icon" }]
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "persistent",
           "description": "If true, renders with an close button and sets aria-role to `status`",
@@ -163,11 +163,6 @@
       "name": "skf-loader",
       "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities\n---\n",
       "attributes": [
-        {
-          "name": "aria-label",
-          "description": "Defines the aria-label",
-          "values": []
-        },
         {
           "name": "invert",
           "description": "If true, inverts the color (to be used on colored backgrounds)",
@@ -176,7 +171,7 @@
         {
           "name": "size",
           "description": "Defines the size of the loader",
-          "values": [{ "name": "md" }, { "name": "sm" }]
+          "values": [{ "name": "Size" }]
         }
       ],
       "references": []
@@ -300,13 +295,13 @@
           "values": []
         },
         {
-          "name": "name",
-          "description": "If defined, adds name to the input-element",
-          "values": []
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
@@ -343,6 +338,11 @@
           "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         { "name": "locale", "values": [] },
         { "name": "range", "values": [] },
         {
@@ -382,6 +382,11 @@
           "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "hide-label",
           "description": "If true, hides the label visually",
@@ -409,11 +414,6 @@
           "description": "If true, makes the element not mutable, meaning the user can not edit the control",
           "values": []
         },
-        {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
-          "values": []
-        },
         {
           "name": "selectable-from",
           "description": "Earliest selectable date. (yyyy-mm-dd format)",
@@ -477,11 +477,6 @@
       "name": "skf-dialog",
       "description": "The `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)\n---\n\n\n### **Events:**\n - **skf-dialog-opened** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-closing** - Fires when the dialog is closing (before transitioned out)\n- **skf-dialog-closed** - Fires when the dialog is closed (after transitioned out)\n\n### **Methods:**\n - **showModal()** - Method that opens the dialog in modal state\n- **close()** - Method that closes the dialog\n\n### **Slots:**\n - _default_ - The dialog component's content\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",
@@ -492,6 +487,11 @@
           "description": "If true, makes the dialog stretch edge to edge on screen",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "no-close-button",
           "description": "If true, removes the close button",
@@ -536,20 +536,20 @@
       "name": "skf-drawer",
       "description": "The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge\n---\n\n\n### **Events:**\n - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)\n- **skf-drawer-closing** - Fires when the drawer is closing (before transitioned out)\n- **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The Drawer's main content",
       "attributes": [
-        {
-          "name": "close-button-aria-label",
-          "description": "If defined, sets the aria-label for the close button",
-          "values": []
-        },
         {
           "name": "heading",
           "description": "Heading for the Drawer",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "size",
           "description": "Sets the max-width",
-          "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
+          "values": [{ "name": "Size" }]
         },
         {
           "name": "open",
@@ -559,7 +559,7 @@
         {
           "name": "placement",
           "description": "Placement of the Drawer",
-          "values": [{ "name": "left" }, { "name": "right" }]
+          "values": [{ "name": "Placement" }]
         }
       ],
       "references": []
@@ -581,10 +581,97 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-link",
+      "description": "The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is\nintended to be used for triggering javascript functions, not handling forms.\n---\n\n\n### **Events:**\n - **skf-link-click** - Fired when the link is clicked\n\n### **Slots:**\n - _default_ - The links' main content",
+      "attributes": [
+        {
+          "name": "as",
+          "description": "Defines the semantic element to render",
+          "values": [{ "name": "button" }, { "name": "link" }]
+        },
+        {
+          "name": "color",
+          "description": "Defines the text-color",
+          "values": [{ "name": "Color" }]
+        },
+        {
+          "name": "disabled",
+          "description": "If true, disables the link",
+          "values": []
+        },
+        {
+          "name": "download",
+          "description": "If defined, downloads the url",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "If defined, loads url on click",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "If defined, renders an icon before or after the text",
+          "values": [{ "name": "Icon" }]
+        },
+        {
+          "name": "icon-right",
+          "description": "If true, the icon is placed to the right in relation to the text",
+          "values": []
+        },
+        {
+          "name": "rel",
+          "description": "If defined, describes the relationship between a linked resource and the current document",
+          "values": []
+        },
+        {
+          "name": "route",
+          "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
+          "values": []
+        },
+        {
+          "name": "stretch",
+          "description": "If true, fills the parents horizontal axis",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "If defined, specifies where to open the linked document",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-nav-item",
+      "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
+      "attributes": [
+        { "name": "href", "values": [] },
+        { "name": "icon", "values": [{ "name": "Icon" }] }
+      ],
+      "references": []
+    },
     {
       "name": "skf-nav",
       "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
-      "attributes": [{ "name": "vertical", "values": [] }],
+      "attributes": [
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
+        {
+          "name": "vertical",
+          "description": "If true, the navigation will be displayed vertically",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -597,9 +684,9 @@
           "values": []
         },
         {
-          "name": "hamburger-aria-label",
-          "description": "If defined, sets the aria-label for the hamburger button",
-          "values": []
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
           "name": "site-name",
@@ -633,21 +720,6 @@
           "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
           "values": [{ "name": "HTMLInputElement['autocomplete']" }]
         },
-        {
-          "name": "button-aria-label-clear",
-          "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
-          "values": []
-        },
-        {
-          "name": "button-aria-label-hide",
-          "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
-          "values": []
-        },
-        {
-          "name": "button-aria-label-show",
-          "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
-          "values": []
-        },
         {
           "name": "custom-invalid",
           "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -678,6 +750,11 @@
           "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "leading",
           "description": "If defined, displays a prefix/adornment before the input-element",
@@ -723,11 +800,6 @@
           "description": "If true, makes the element not mutable, meaning the user can not edit the control",
           "values": []
         },
-        {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
-          "values": []
-        },
         {
           "name": "severity",
           "description": "If defined, displays provided severity state",
@@ -778,91 +850,19 @@
       ],
       "references": []
     },
-    {
-      "name": "skf-link",
-      "description": "The `<skf-link>` can be used as either a regular link or a link styled semantic button\n---\n\n\n### **Slots:**\n - _default_ - The links' main content",
-      "attributes": [
-        {
-          "name": "as",
-          "description": "Defines the semantic element to render",
-          "values": [{ "name": "button" }, { "name": "a" }]
-        },
-        {
-          "name": "color",
-          "description": "Defines the text-color",
-          "values": [{ "name": "primary" }, { "name": "inverse" }]
-        },
-        {
-          "name": "disabled",
-          "description": "If true, disables the link",
-          "values": []
-        },
-        {
-          "name": "download",
-          "description": "If defined, downloads the url",
-          "values": []
-        },
-        {
-          "name": "href",
-          "description": "If defined, loads url on click",
-          "values": []
-        },
-        {
-          "name": "icon",
-          "description": "If defined, renders an icon before or after the text",
-          "values": [{ "name": "Icon" }]
-        },
-        {
-          "name": "icon-placement",
-          "description": "Defines the position of the icon in relation to the text",
-          "values": [{ "name": "left" }, { "name": "right" }]
-        },
-        {
-          "name": "rel",
-          "description": "If defined, describes the relationship between a linked resource and the current document",
-          "values": []
-        },
-        {
-          "name": "route",
-          "description": "If defined, used on conjunction with onClick property, second argument",
-          "values": []
-        },
-        {
-          "name": "stretch",
-          "description": "If true, fills the parents horizontal axis",
-          "values": []
-        },
-        {
-          "name": "target",
-          "description": "If defined, specifies where to open the linked document",
-          "values": [
-            { "name": "_blank" },
-            { "name": "_parent" },
-            { "name": "_self" },
-            { "name": "_top" }
-          ]
-        },
-        {
-          "name": "type",
-          "description": "Defines the type of button",
-          "values": [{ "name": "SkfLinkType" }]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "skf-menu-item",
-      "description": "The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
+      "description": "The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component\n---\n\n\n### **Events:**\n - **skf-link-click** - Fired when the link is clicked\n\n### **Slots:**\n - _default_ - The component's main content",
       "attributes": [
         {
           "name": "as",
           "description": "Defines the semantic element to render",
-          "values": [{ "name": "button" }, { "name": "a" }]
+          "values": [{ "name": "button" }, { "name": "link" }]
         },
         {
           "name": "color",
           "description": "Defines the text-color",
-          "values": [{ "name": "primary" }, { "name": "inverse" }]
+          "values": [{ "name": "Color" }]
         },
         {
           "name": "disabled",
@@ -885,9 +885,9 @@
           "values": [{ "name": "Icon" }]
         },
         {
-          "name": "icon-placement",
-          "description": "Defines the position of the icon in relation to the text",
-          "values": [{ "name": "left" }, { "name": "right" }]
+          "name": "icon-right",
+          "description": "If true, the icon is placed to the right in relation to the text",
+          "values": []
         },
         {
           "name": "rel",
@@ -896,7 +896,7 @@
         },
         {
           "name": "route",
-          "description": "If defined, used on conjunction with onClick property, second argument",
+          "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
           "values": []
         },
         {
@@ -913,18 +913,13 @@
             { "name": "_self" },
             { "name": "_top" }
           ]
-        },
-        {
-          "name": "type",
-          "description": "Defines the type of button",
-          "values": [{ "name": "SkfLinkType" }]
         }
       ],
       "references": []
     },
     {
       "name": "skf-menu",
-      "description": "The `<skf-menu>` is a component that displays a list of actions or options\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the menu is opened\n- **skf-closed** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The menu popover content",
+      "description": "The `<skf-menu>` is a component that displays a list of actions or options\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the menu is opened\n- **skf-closed** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The menu content",
       "attributes": [
         {
           "name": "placement",
@@ -952,18 +947,9 @@
       ],
       "references": []
     },
-    {
-      "name": "skf-nav-item",
-      "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
-      "attributes": [
-        { "name": "href", "values": [] },
-        { "name": "icon", "values": [{ "name": "Icon" }] }
-      ],
-      "references": []
-    },
     {
       "name": "skf-popover",
-      "description": "The `<skf-popover>` is a general purpose component that displays the slot content in a popover.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the menu is opened\n- **skf-closed** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The popover content",
+      "description": "The `<skf-popover>` is a general purpose component that displays the slot content in a popover.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the popover is opened\n- **skf-closed** - Fired when the popover is closed\n\n### **Slots:**\n - _default_ - The popover content",
       "attributes": [
         {
           "name": "placement",
@@ -985,7 +971,7 @@
         },
         {
           "name": "anchor",
-          "description": "The id of the element the menu will be anchored to",
+          "description": "The id of the element the popover will be anchored to",
           "values": []
         },
         {
@@ -1058,13 +1044,13 @@
           "values": []
         },
         {
-          "name": "name",
-          "description": "If defined, adds name to the input-element",
-          "values": []
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
@@ -1145,6 +1131,11 @@
           "description": "If defined, gives the supplied appearance",
           "values": [{ "name": "Severity" }]
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "removable",
           "description": "If true, adds trailing button to remove tag",
@@ -1155,7 +1146,7 @@
     },
     {
       "name": "skf-select",
-      "description": "The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option(s) changes\n- **invalid** - Fired when the select is invalid\n- **reset** - Fired when the form is reset\n- **skf-select-dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled\n- **skf-select-option-select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled\n\n### **Slots:**\n - _default_ - The select's placeholder content",
+      "description": "The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option(s) changes\n- **invalid** - Fired when the select is invalid\n- **reset** - Fired when the form is reset\n- **skf-select-dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled\n- **skf-select-option-select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled\n- **skf-update-calendar-view** - Fires when the calendar view is updated\n\n### **Slots:**\n - _default_ - The select's placeholder content",
       "attributes": [
         {
           "name": "disabled",
@@ -1197,6 +1188,11 @@
           "description": "If defined, displays provided label",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "max",
           "description": "If defined, limits the number of selectable options",
@@ -1217,11 +1213,6 @@
           "description": "If defined, set name of the component",
           "values": []
         },
-        {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
-          "values": []
-        },
         {
           "name": "severity",
           "description": "If defined, displays provided severity state",
@@ -1242,7 +1233,7 @@
     },
     {
       "name": "skf-select-option",
-      "description": "The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.\n---\n\n\n### **Events:**\n - **skf-select-option-select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.\n\n### **Slots:**\n - _default_ - The option's text content\n- **icon** - The option's slot for icon or custom meta information (svg).",
+      "description": "The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.\nIt represents an individual option in a select dropdown.\n---\n\n\n### **Events:**\n - **skf-select-option-select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.\n\n### **Slots:**\n - _default_ - The option's text content\n- **icon** - The option's slot for icon or custom meta information (svg).",
       "attributes": [
         {
           "name": "disabled",
@@ -1271,7 +1262,7 @@
         },
         {
           "name": "value",
-          "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.",
+          "description": "Returns or sets the option value. If value is omitted, defaults to the tags slotted text.",
           "values": []
         }
       ],
@@ -1349,13 +1340,13 @@
           "values": []
         },
         {
-          "name": "name",
-          "description": "If defined, adds name to the input-element",
-          "values": []
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
@@ -1467,6 +1458,11 @@
           "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "name",
           "description": "If defined, adds name to the input-element",
@@ -1492,11 +1488,6 @@
           "description": "If true, makes the element not mutable, meaning the user can not edit the control",
           "values": []
         },
-        {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
-          "values": []
-        },
         {
           "name": "rows",
           "description": "If defined, sets the rows of the textarea",
@@ -1575,7 +1566,7 @@
     },
     {
       "name": "skf-tooltip",
-      "description": "The `<skf-tooltip>` is a component that displays a tooltip.\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the dropdown is opened\n- **skf-closed** - Fired when the dropdown is closed\n\n### **Slots:**\n - _default_ - The tooltip popover content",
+      "description": "The `<skf-tooltip>` is a component that displays a tooltip.\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the tooltip is opened\n- **skf-closed** - Fired when the tooltip is closed\n\n### **Slots:**\n - _default_ - The tooltip popover content",
       "attributes": [
         {
           "name": "placement",