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

package/dist/web-types.json

@@ -24,7 +24,7 @@
             {
               "name": "name",
               "description": "Name of the icon to display",
-              "value": { "type": "Icon | undefined" }
+              "value": { "type": "Icon" }
             },
             {
               "name": "size",
@@ -48,7 +48,7 @@
               {
                 "name": "name",
                 "description": "Name of the icon to display",
-                "type": "Icon | undefined"
+                "type": "Icon"
               },
               {
                 "name": "size",
@@ -547,7 +547,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)_",
           "doc-url": "",
           "attributes": [
             {
@@ -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,6 +2807,7 @@
                 "name": "value",
                 "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text."
               },
+              { "name": "small", "type": "boolean" },
               { "name": "role", "type": "string" },
               { "name": "_parent" },
               { "name": "_shortcutUpdate", "type": "boolean" }

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/SKF-Internal/ui-components/issues"
   },
   "engines": {
-    "node": ">=20",
+    "node": ">=22",
     "pnpm": ">=10"
   },
   "engineStrict": true,
@@ -34,9 +34,9 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0-alpha.35",
+  "version": "1.0.0-alpha.36",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/dom": "^1.7.0",
     "@js-temporal/polyfill": "^0.5.1"
   },
   "devDependencies": {
@@ -44,7 +44,7 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@eslint/js": "^9.24.0",
+    "@eslint/js": "^9.26.0",
     "@skf-design-system/ui-assets": "0.1.3-beta.4",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -56,7 +56,7 @@
     "@storybook/theming": "^8.6.12",
     "@storybook/web-components": "^8.6.12",
     "@storybook/web-components-vite": "^8.6.12",
-    "@types/node": "^22.14.1",
+    "@types/node": "^22.15.12",
     "@wc-toolkit/module-path-resolver": "^1.0.0",
     "@wc-toolkit/storybook-helpers": "^1.1.2",
     "@wc-toolkit/type-parser": "^1.0.3",
@@ -65,25 +65,25 @@
     "custom-element-jsx-integration": "^1.6.0",
     "custom-element-vs-code-integration": "^1.5.0",
     "custom-element-vuejs-integration": "^1.4.0",
-    "eslint": "^9.24.0",
-    "eslint-plugin-lit": "^2.0.0",
+    "eslint": "^9.26.0",
+    "eslint-plugin-lit": "^2.1.1",
     "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-wc": "^3.0.0",
+    "eslint-plugin-wc": "^3.0.1",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.1",
     "lit": "^3.3.0",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "3.5.3",
     "storybook": "^8.6.12",
-    "stylelint": "^16.18.0",
+    "stylelint": "^16.19.1",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-no-unsupported-browser-features": "^8.0.4",
-    "stylelint-order": "^6.0.4",
+    "stylelint-order": "^7.0.0",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
-    "tsc-alias": "^1.8.15",
+    "tsc-alias": "^1.8.16",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.0",
+    "typescript-eslint": "^8.32.0",
+    "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {