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

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -1,7 +1,7 @@
 import type { SkfIcon } from "../../components/icon/icon.component.js";
 import type { SkfAccordionItem, CustomEvent } from "../../components/accordion-item/accordion-item.component.js";
 import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
-import type { SkfAlert } from "../../components/alert/alert.component.js";
+import type { SkfAlert, CustomEvent } from "../../components/alert/alert.component.js";
 import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SkfLoader } from "../../components/loader/loader.component.js";
@@ -162,7 +162,7 @@ export type SkfAlertProps = {
   severity?: SkfAlert["severity"];
 
   /** Fires when the close button is clicked */
-  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+  "onskf-alert-close"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfBreadcrumbItemProps = {
@@ -175,8 +175,8 @@ export type SkfBreadcrumbItemProps = {
 export type SkfBreadcrumbProps = {
   /** aria-label for the breadcrumb control */
   label?: SkfBreadcrumb["label"];
-  /** Displays an alternative size */
-  size?: SkfBreadcrumb["size"];
+  /** If true, renders a smaller version */
+  small?: SkfBreadcrumb["small"];
 
   /** Fired when the item is clicked */
   onclick?: (e: CustomEvent<never>) => void;
@@ -1004,6 +1004,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": Partial<SkfCardProps & BaseProps & BaseEvents>;
 
@@ -1104,7 +1107,7 @@ export type CustomElements = {
    *
    *
    * ### **CSS Properties:**
-   *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
+   *  - **--mod-logo-height** - The height of the logo _(default: undefined)_
    */
   "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
 

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

@@ -3,7 +3,7 @@ import type { DefineComponent } from "vue";
 import type { SkfIcon } from "../../components/icon/icon.component.js";
 import type { SkfAccordionItem, CustomEvent } from "../../components/accordion-item/accordion-item.component.js";
 import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
-import type { SkfAlert } from "../../components/alert/alert.component.js";
+import type { SkfAlert, CustomEvent } from "../../components/alert/alert.component.js";
 import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SkfLoader } from "../../components/loader/loader.component.js";
@@ -102,7 +102,7 @@ type SkfAlertProps = {
   severity?: SkfAlert["severity"];
 
   /** Fires when the close button is clicked */
-  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+  "onskf-alert-close"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfBreadcrumbItemProps = {
@@ -115,8 +115,8 @@ type SkfBreadcrumbItemProps = {
 type SkfBreadcrumbProps = {
   /** aria-label for the breadcrumb control */
   label?: SkfBreadcrumb["label"];
-  /** Displays an alternative size */
-  size?: SkfBreadcrumb["size"];
+  /** If true, renders a smaller version */
+  small?: SkfBreadcrumb["small"];
 
   /** Fired when the item is clicked */
   onclick?: (e: CustomEvent<never>) => void;
@@ -944,6 +944,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>;
 
@@ -1044,7 +1047,7 @@ export type CustomElements = {
    *
    *
    * ### **CSS Properties:**
-   *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
+   *  - **--mod-logo-height** - The height of the logo _(default: undefined)_
    */
   "skf-logo": DefineComponent<SkfLogoProps>;
 

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

@@ -152,9 +152,9 @@
           "values": []
         },
         {
-          "name": "size",
-          "description": "Displays an alternative size",
-          "values": [{ "name": "md" }, { "name": "sm" }]
+          "name": "small",
+          "description": "If true, renders a smaller version",
+          "values": []
         }
       ],
       "references": []
@@ -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",
@@ -566,7 +566,7 @@
     },
     {
       "name": "skf-logo",
-      "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--skf-logo-height** - The height of the logo _(default: undefined)_",
+      "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--mod-logo-height** - The height of the logo _(default: undefined)_",
       "attributes": [
         {
           "name": "title",
@@ -1133,7 +1133,7 @@
         {
           "name": "size",
           "description": "Specifies Tag size",
-          "values": [{ "name": "sm" }, { "name": "md" }]
+          "values": [{ "name": "Size" }]
         },
         {
           "name": "icon",

package/dist/web-types.json

@@ -266,6 +266,7 @@
           "events": [
             {
               "name": "skf-alert-close",
+              "type": "CustomEvent",
               "description": "Fires when the close button is clicked"
             }
           ],
@@ -295,6 +296,7 @@
             "events": [
               {
                 "name": "skf-alert-close",
+                "type": "CustomEvent",
                 "description": "Fires when the close button is clicked"
               }
             ]
@@ -341,9 +343,9 @@
               "value": { "type": "string", "default": "'Breadcrumb'" }
             },
             {
-              "name": "size",
-              "description": "Displays an alternative size",
-              "value": { "type": "'md' | 'sm'", "default": "'md'" }
+              "name": "small",
+              "description": "If true, renders a smaller version",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -360,9 +362,9 @@
                 "type": "string"
               },
               {
-                "name": "size",
-                "description": "Displays an alternative size",
-                "type": "'md' | 'sm'"
+                "name": "small",
+                "description": "If true, renders a smaller version",
+                "type": "boolean"
               }
             ],
             "events": [
@@ -545,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": [
             {
@@ -1279,7 +1281,7 @@
         },
         {
           "name": "skf-logo",
-          "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--skf-logo-height** - The height of the logo _(default: undefined)_",
+          "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--mod-logo-height** - The height of the logo _(default: undefined)_",
           "doc-url": "",
           "attributes": [
             {
@@ -2434,7 +2436,7 @@
             {
               "name": "size",
               "description": "Specifies Tag size",
-              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+              "value": { "type": "Size", "default": "'md'" }
             },
             {
               "name": "icon",
@@ -2461,7 +2463,7 @@
               {
                 "name": "size",
                 "description": "Specifies Tag size",
-                "type": "'sm' | 'md'"
+                "type": "Size"
               },
               {
                 "name": "icon",

package/package.json

@@ -34,7 +34,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.3",
+  "version": "1.0.2-beta.4",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@js-temporal/polyfill": "^0.5.1"
@@ -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.0",
+    "@types/node": "^22.14.1",
     "@wc-toolkit/module-path-resolver": "^1.0.0",
     "@wc-toolkit/storybook-helpers": "^1.1.2",
     "@wc-toolkit/type-parser": "^1.0.3",
@@ -70,8 +70,8 @@
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-wc": "^3.0.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.0",
-    "lit": "^3.2.1",
+    "lint-staged": "^15.5.1",
+    "lit": "^3.3.0",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "3.5.3",
     "storybook": "^8.6.12",
@@ -80,10 +80,10 @@
     "stylelint-no-unsupported-browser-features": "^8.0.4",
     "stylelint-order": "^6.0.4",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
-    "tsc-alias": "^1.8.13",
+    "tsc-alias": "^1.8.15",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.29.0",
-    "vite": "^6.2.5",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.0",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {