@skf-design-system/ui-components 1.0.2-beta.4 → 1.0.2-beta.6

package/dist/web-types.json

@@ -393,7 +393,7 @@
             {
               "name": "size",
               "description": "Defines the size of the loader",
-              "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" }
+              "value": { "type": "Size", "default": "'md'" }
             }
           ],
           "events": [],
@@ -412,7 +412,7 @@
               {
                 "name": "size",
                 "description": "Defines the size of the loader",
-                "type": "'md' | 'sm' | undefined"
+                "type": "Size"
               }
             ],
             "events": []
@@ -1201,7 +1201,7 @@
             {
               "name": "size",
               "description": "Sets the max-width",
-              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
+              "value": { "type": "Size", "default": "'md'" }
             },
             {
               "name": "open",
@@ -1211,7 +1211,7 @@
             {
               "name": "placement",
               "description": "Placement of the Drawer",
-              "value": { "type": "'left' | 'right'", "default": "'right'" }
+              "value": { "type": "Placement", "default": "'right'" }
             }
           ],
           "slots": [{ "name": "", "description": "The Drawer's main content" }],
@@ -1247,7 +1247,7 @@
               {
                 "name": "size",
                 "description": "Sets the max-width",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "Size"
               },
               {
                 "name": "open",
@@ -1257,7 +1257,7 @@
               {
                 "name": "placement",
                 "description": "Placement of the Drawer",
-                "type": "'left' | 'right'"
+                "type": "Placement"
               }
             ],
             "events": [
@@ -1312,6 +1312,165 @@
             "events": []
           }
         },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "as",
+              "description": "Defines the semantic element to render",
+              "value": { "type": "'button' | 'link'", "default": "'link'" }
+            },
+            {
+              "name": "color",
+              "description": "Defines the text-color",
+              "value": { "type": "Color", "default": "'primary'" }
+            },
+            {
+              "name": "disabled",
+              "description": "If true, disables the link",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "download",
+              "description": "If defined, downloads the url",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "href",
+              "description": "If defined, loads url on click",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "icon",
+              "description": "If defined, renders an icon before or after the text",
+              "value": { "type": "Icon | undefined" }
+            },
+            {
+              "name": "icon-right",
+              "description": "If true, the icon is placed to the right in relation to the text",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "rel",
+              "description": "If defined, describes the relationship between a linked resource and the current document",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "route",
+              "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "stretch",
+              "description": "If true, fills the parents horizontal axis",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "target",
+              "description": "If defined, specifies where to open the linked document",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The links' main content" }],
+          "events": [
+            {
+              "name": "skf-link-click",
+              "type": "CustomEvent",
+              "description": "Fired when the link is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "as",
+                "description": "Defines the semantic element to render",
+                "type": "'button' | 'link'"
+              },
+              {
+                "name": "color",
+                "description": "Defines the text-color",
+                "type": "Color"
+              },
+              {
+                "name": "disabled",
+                "description": "If true, disables the link",
+                "type": "boolean"
+              },
+              {
+                "name": "download",
+                "description": "If defined, downloads the url",
+                "type": "boolean"
+              },
+              {
+                "name": "href",
+                "description": "If defined, loads url on click",
+                "type": "string | undefined"
+              },
+              {
+                "name": "icon",
+                "description": "If defined, renders an icon before or after the text",
+                "type": "Icon | undefined"
+              },
+              {
+                "name": "iconRight",
+                "description": "If true, the icon is placed to the right in relation to the text",
+                "type": "boolean"
+              },
+              {
+                "name": "rel",
+                "description": "If defined, describes the relationship between a linked resource and the current document",
+                "type": "string | undefined"
+              },
+              {
+                "name": "route",
+                "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "stretch",
+                "description": "If true, fills the parents horizontal axis",
+                "type": "boolean"
+              },
+              {
+                "name": "target",
+                "description": "If defined, specifies where to open the linked document",
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-link-click",
+                "type": "CustomEvent",
+                "description": "Fired when the link is clicked"
+              }
+            ]
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            { "name": "href", "value": { "type": "string", "default": "''" } },
+            { "name": "icon", "value": { "type": "Icon | undefined" } }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's main content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "href", "type": "string" },
+              { "name": "icon", "type": "Icon | undefined" },
+              { "name": "vertical", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "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",
@@ -1319,6 +1478,7 @@
           "attributes": [
             {
               "name": "vertical",
+              "description": "If true, the navigation will be displayed vertically",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -1327,7 +1487,13 @@
           ],
           "events": [],
           "js": {
-            "properties": [{ "name": "vertical", "type": "boolean" }],
+            "properties": [
+              {
+                "name": "vertical",
+                "description": "If true, the navigation will be displayed vertically",
+                "type": "boolean"
+              }
+            ],
             "events": []
           }
         },
@@ -1714,166 +1880,20 @@
             ]
           }
         },
-        {
-          "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",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "as",
-              "description": "Defines the semantic element to render",
-              "value": { "type": "'button' | 'a'", "default": "'a'" }
-            },
-            {
-              "name": "color",
-              "description": "Defines the text-color",
-              "value": {
-                "type": "'primary' | 'inverse'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "disabled",
-              "description": "If true, disables the link",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "download",
-              "description": "If defined, downloads the url",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "href",
-              "description": "If defined, loads url on click",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "icon",
-              "description": "If defined, renders an icon before or after the text",
-              "value": { "type": "Icon | undefined" }
-            },
-            {
-              "name": "icon-placement",
-              "description": "Defines the position of the icon in relation to the text",
-              "value": { "type": "'left' | 'right'", "default": "'left'" }
-            },
-            {
-              "name": "rel",
-              "description": "If defined, describes the relationship between a linked resource and the current document",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "route",
-              "description": "If defined, used on conjunction with onClick property, second argument",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "stretch",
-              "description": "If true, fills the parents horizontal axis",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "target",
-              "description": "If defined, specifies where to open the linked document",
-              "value": {
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              }
-            },
-            {
-              "name": "type",
-              "description": "Defines the type of button",
-              "value": { "type": "SkfLinkType", "default": "'button'" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The links' main content" }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "as",
-                "description": "Defines the semantic element to render",
-                "type": "'button' | 'a'"
-              },
-              {
-                "name": "color",
-                "description": "Defines the text-color",
-                "type": "'primary' | 'inverse'"
-              },
-              {
-                "name": "disabled",
-                "description": "If true, disables the link",
-                "type": "boolean"
-              },
-              {
-                "name": "download",
-                "description": "If defined, downloads the url",
-                "type": "string | undefined"
-              },
-              {
-                "name": "href",
-                "description": "If defined, loads url on click",
-                "type": "string | undefined"
-              },
-              {
-                "name": "icon",
-                "description": "If defined, renders an icon before or after the text",
-                "type": "Icon | undefined"
-              },
-              {
-                "name": "iconPlacement",
-                "description": "Defines the position of the icon in relation to the text",
-                "type": "'left' | 'right'"
-              },
-              {
-                "name": "onClick",
-                "description": "If defined, accepts a function that runs on click. Forwards optional route as second argument."
-              },
-              {
-                "name": "rel",
-                "description": "If defined, describes the relationship between a linked resource and the current document",
-                "type": "string | undefined"
-              },
-              {
-                "name": "route",
-                "description": "If defined, used on conjunction with onClick property, second argument",
-                "type": "string | undefined"
-              },
-              {
-                "name": "stretch",
-                "description": "If true, fills the parents horizontal axis",
-                "type": "boolean"
-              },
-              {
-                "name": "target",
-                "description": "If defined, specifies where to open the linked document",
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              {
-                "name": "type",
-                "description": "Defines the type of button",
-                "type": "SkfLinkType"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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",
           "doc-url": "",
           "attributes": [
             {
               "name": "as",
               "description": "Defines the semantic element to render",
-              "value": { "type": "'button' | 'a'", "default": "'a'" }
+              "value": { "type": "'button' | 'link'", "default": "'link'" }
             },
             {
               "name": "color",
               "description": "Defines the text-color",
-              "value": {
-                "type": "'primary' | 'inverse'",
-                "default": "'primary'"
-              }
+              "value": { "type": "Color", "default": "'primary'" }
             },
             {
               "name": "disabled",
@@ -1883,7 +1903,7 @@
             {
               "name": "download",
               "description": "If defined, downloads the url",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "href",
@@ -1896,9 +1916,9 @@
               "value": { "type": "Icon | undefined" }
             },
             {
-              "name": "icon-placement",
-              "description": "Defines the position of the icon in relation to the text",
-              "value": { "type": "'left' | 'right'", "default": "'left'" }
+              "name": "icon-right",
+              "description": "If true, the icon is placed to the right in relation to the text",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "rel",
@@ -1907,7 +1927,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.",
               "value": { "type": "string | undefined" }
             },
             {
@@ -1921,29 +1941,29 @@
               "value": {
                 "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
               }
-            },
-            {
-              "name": "type",
-              "description": "Defines the type of button",
-              "value": { "type": "SkfLinkType", "default": "'button'" }
             }
           ],
           "slots": [
             { "name": "", "description": "The component's main content" }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "skf-link-click",
+              "type": "CustomEvent",
+              "description": "Fired when the link is clicked"
+            }
+          ],
           "js": {
             "properties": [
-              { "name": "role", "type": "string" },
               {
                 "name": "as",
                 "description": "Defines the semantic element to render",
-                "type": "'button' | 'a'"
+                "type": "'button' | 'link'"
               },
               {
                 "name": "color",
                 "description": "Defines the text-color",
-                "type": "'primary' | 'inverse'"
+                "type": "Color"
               },
               {
                 "name": "disabled",
@@ -1953,7 +1973,7 @@
               {
                 "name": "download",
                 "description": "If defined, downloads the url",
-                "type": "string | undefined"
+                "type": "boolean"
               },
               {
                 "name": "href",
@@ -1966,13 +1986,9 @@
                 "type": "Icon | undefined"
               },
               {
-                "name": "iconPlacement",
-                "description": "Defines the position of the icon in relation to the text",
-                "type": "'left' | 'right'"
-              },
-              {
-                "name": "onClick",
-                "description": "If defined, accepts a function that runs on click. Forwards optional route as second argument."
+                "name": "iconRight",
+                "description": "If true, the icon is placed to the right in relation to the text",
+                "type": "boolean"
               },
               {
                 "name": "rel",
@@ -1981,7 +1997,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.",
                 "type": "string | undefined"
               },
               {
@@ -1993,14 +2009,15 @@
                 "name": "target",
                 "description": "If defined, specifies where to open the linked document",
                 "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              {
-                "name": "type",
-                "description": "Defines the type of button",
-                "type": "SkfLinkType"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "skf-link-click",
+                "type": "CustomEvent",
+                "description": "Fired when the link is clicked"
+              }
+            ]
           }
         },
         {
@@ -2051,26 +2068,6 @@
             ]
           }
         },
-        {
-          "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",
-          "doc-url": "",
-          "attributes": [
-            { "name": "href", "value": { "type": "string", "default": "'#'" } },
-            { "name": "icon", "value": { "type": "Icon | undefined" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The component's main content" }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "href", "type": "string" },
-              { "name": "icon", "type": "Icon | undefined" }
-            ],
-            "events": []
-          }
-        },
         {
           "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",
@@ -2424,7 +2421,10 @@
           ],
           "events": [],
           "js": {
-            "properties": [{ "name": "label", "type": "string" }],
+            "properties": [
+              { "name": "label", "type": "string" },
+              { "name": "small", "type": "boolean" }
+            ],
             "events": []
           }
         },
@@ -2807,8 +2807,7 @@
                 "name": "value",
                 "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text."
               },
-              { "name": "role", "type": "string" },
-              { "name": "_parent" },
+              { "name": "small", "type": "boolean" },
               { "name": "_shortcutUpdate", "type": "boolean" }
             ],
             "events": [
@@ -2856,8 +2855,7 @@
                 "description": "If true, item marked as completed",
                 "type": "boolean"
               },
-              { "name": "_setInternalState" },
-              { "name": "role", "type": "string" }
+              { "name": "_setInternalState" }
             ],
             "events": [
               {
@@ -3044,8 +3042,7 @@
                 "description": "The tab panel's name.",
                 "type": "string"
               },
-              { "name": "active", "type": "boolean" },
-              { "name": "role", "type": "string" }
+              { "name": "active", "type": "boolean" }
             ],
             "events": []
           }
@@ -3157,8 +3154,7 @@
                 "type": "string"
               },
               { "name": "selected", "type": "boolean" },
-              { "name": "variant", "type": "SkfTabs['variant']" },
-              { "name": "role", "type": "string" }
+              { "name": "variant", "type": "SkfTabs['variant']" }
             ],
             "events": [
               {
@@ -3529,7 +3525,6 @@
           ],
           "js": {
             "properties": [
-              { "name": "role", "type": "string" },
               { "name": "offset", "type": "number" },
               { "name": "placement", "type": "string" },
               { "name": "variant", "type": "string" }