@skf-design-system/ui-components 1.0.0-alpha.35 → 1.0.0-alpha.36

package/dist/types/vue/index.d.ts

@@ -17,13 +17,13 @@ import type { SkfDialog, CustomEvent } from "../../components/dialog/dialog.comp
 import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfDrawer, CustomEvent } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
+import type { SkfLink, CustomEvent } from "../../components/link/link.component.js";
+import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfNav } from "../../components/nav/nav.component.js";
 import type { SkfHeader } from "../../components/header/header.component.js";
 import type { SkfInput, CustomEvent } from "../../components/input/input.component.js";
-import type { SkfLink } from "../../components/link/link.component.js";
-import type { SkfMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
 import type { SkfMenu, CustomEvent } from "../../components/menu/menu.component.js";
-import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfPopover, CustomEvent } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio, Event } from "../../components/radio/radio.component.js";
@@ -329,8 +329,45 @@ type SkfLogoProps = {
   color?: SkfLogo["color"];
 };
 
-type SkfNavProps = {
+type SkfLinkProps = {
+  /** Defines the semantic element to render */
+  as?: SkfLink["as"];
+  /** Defines the text-color */
+  color?: SkfLink["color"];
+  /** If true, disables the link */
+  disabled?: SkfLink["disabled"];
+  /** If defined, downloads the url */
+  download?: SkfLink["download"];
+  /** If defined, loads url on click */
+  href?: SkfLink["href"];
+  /** If defined, renders an icon before or after the text */
+  icon?: SkfLink["icon"];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfLink["iconRight"];
+  /** If defined, describes the relationship between a linked resource and the current document */
+  rel?: SkfLink["rel"];
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
+  route?: SkfLink["route"];
+  /** If true, fills the parents horizontal axis */
+  stretch?: SkfLink["stretch"];
+  /** If defined, specifies where to open the linked document */
+  target?: SkfLink["target"];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type SkfNavItemProps = {
+  /**  */
+  href?: SkfNavItem["href"];
+  /**  */
+  icon?: SkfNavItem["icon"];
   /**  */
+  vertical?: SkfNavItem["vertical"];
+};
+
+type SkfNavProps = {
+  /** If true, the navigation will be displayed vertically */
   vertical?: SkfNav["vertical"];
 };
 
@@ -413,35 +450,6 @@ type SkfInputProps = {
   oninvalid?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SkfLinkProps = {
-  /** Defines the semantic element to render */
-  as?: SkfLink["as"];
-  /** Defines the text-color */
-  color?: SkfLink["color"];
-  /** If true, disables the link */
-  disabled?: SkfLink["disabled"];
-  /** If defined, downloads the url */
-  download?: SkfLink["download"];
-  /** If defined, loads url on click */
-  href?: SkfLink["href"];
-  /** If defined, renders an icon before or after the text */
-  icon?: SkfLink["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfLink["iconPlacement"];
-  /** If defined, describes the relationship between a linked resource and the current document */
-  rel?: SkfLink["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
-  route?: SkfLink["route"];
-  /** If true, fills the parents horizontal axis */
-  stretch?: SkfLink["stretch"];
-  /** If defined, specifies where to open the linked document */
-  target?: SkfLink["target"];
-  /** Defines the type of button */
-  type?: SkfLink["type"];
-  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-  onClick?: SkfLink["onClick"];
-};
-
 type SkfMenuItemProps = {
   /** Defines the semantic element to render */
   as?: SkfMenuItem["as"];
@@ -455,22 +463,19 @@ type SkfMenuItemProps = {
   href?: SkfMenuItem["href"];
   /** If defined, renders an icon before or after the text */
   icon?: SkfMenuItem["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfMenuItem["iconPlacement"];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfMenuItem["iconRight"];
   /** If defined, describes the relationship between a linked resource and the current document */
   rel?: SkfMenuItem["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
   route?: SkfMenuItem["route"];
   /** If true, fills the parents horizontal axis */
   stretch?: SkfMenuItem["stretch"];
   /** If defined, specifies where to open the linked document */
   target?: SkfMenuItem["target"];
-  /** Defines the type of button */
-  type?: SkfMenuItem["type"];
-  /**  */
-  role?: SkfMenuItem["role"];
-  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-  onClick?: SkfMenuItem["onClick"];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfMenuProps = {
@@ -485,13 +490,6 @@ type SkfMenuProps = {
   "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SkfNavItemProps = {
-  /**  */
-  href?: SkfNavItem["href"];
-  /**  */
-  icon?: SkfNavItem["icon"];
-};
-
 type SkfPopoverProps = {
   /** The placement of the popover */
   placement?: SkfPopover["undefined"];
@@ -567,6 +565,8 @@ type SkfSegmentedButtonProps = {
 type SkfSelectOptionGroupProps = {
   /**  */
   label?: SkfSelectOptionGroup["label"];
+  /**  */
+  small?: SkfSelectOptionGroup["small"];
 };
 
 type SkfTagProps = {
@@ -653,6 +653,8 @@ type SkfSelectOptionProps = {
   /** The option's label text (equivalent to the tags textContent) */
   text?: SkfSelectOption["text"];
   /**  */
+  small?: SkfSelectOption["small"];
+  /**  */
   role?: SkfSelectOption["role"];
   /**  */
   _parent?: SkfSelectOption["_parent"];
@@ -944,6 +946,9 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - The card's main content
+   *
+   * ### **CSS Properties:**
+   *  - **--mod-card-bg-color** - Ability to set a custom background color _(default: undefined)_
    */
   "skf-card": DefineComponent<SkfCardProps>;
 
@@ -1048,6 +1053,30 @@ export type CustomElements = {
    */
   "skf-logo": DefineComponent<SkfLogoProps>;
 
+  /**
+   * The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is
+   * intended to be used for triggering javascript functions, not handling forms.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-link-click** - Fired when the link is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - The links' main content
+   */
+  "skf-link": DefineComponent<SkfLinkProps>;
+
+  /**
+   * The `<skf-nav>` is a component that displays a list of <nav-items>.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's main content
+   */
+  "skf-nav-item": DefineComponent<SkfNavItemProps>;
+
   /**
    * The `<skf-nav>` is a component that displays a list of <nav-items>.
    * ---
@@ -1084,21 +1113,14 @@ export type CustomElements = {
    */
   "skf-input": DefineComponent<SkfInputProps>;
 
-  /**
-   * The `<skf-link>` can be used as either a regular link or a link styled semantic button
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The links' main content
-   */
-  "skf-link": DefineComponent<SkfLinkProps>;
-
   /**
    * The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-link-click** - Fired when the link is clicked
+   *
    * ### **Slots:**
    *  - _default_ - The component's main content
    */
@@ -1120,16 +1142,6 @@ export type CustomElements = {
    */
   "skf-menu": DefineComponent<SkfMenuProps>;
 
-  /**
-   * The `<skf-nav>` is a component that displays a list of <nav-items>.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's main content
-   */
-  "skf-nav-item": DefineComponent<SkfNavItemProps>;
-
   /**
    * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
    *

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

@@ -240,7 +240,7 @@
     },
     {
       "name": "skf-card",
-      "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles\n---\n\n\n### **Slots:**\n - _default_ - The card's main content",
+      "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles\n---\n\n\n### **Slots:**\n - _default_ - The card's main content\n\n### **CSS Properties:**\n - **--mod-card-bg-color** - Ability to set a custom background color _(default: undefined)_",
       "attributes": [
         {
           "name": "no-border",
@@ -581,10 +581,92 @@
       ],
       "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": "vertical",
+          "description": "If true, the navigation will be displayed vertically",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -778,91 +860,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 +895,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 +906,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,11 +923,6 @@
             { "name": "_self" },
             { "name": "_top" }
           ]
-        },
-        {
-          "name": "type",
-          "description": "Defines the type of button",
-          "values": [{ "name": "SkfLinkType" }]
         }
       ],
       "references": []
@@ -952,15 +957,6 @@
       ],
       "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",