@skf-design-system/ui-components 1.0.0-alpha.32 → 1.0.0-alpha.34

package/dist/components/breadcrumb/breadcrumb.component.d.ts

@@ -0,0 +1,29 @@
+import type { SkfBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item.component.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @event click - Fired when the item is clicked
+ *
+ * @slot - One or more `<skf-breadcrumb-item>`
+ *
+ * @tagname skf-breadcrumb
+ */
+export declare class SkfBreadcrumb extends SkfElement {
+    static styles: CSSResultGroup;
+    /** aria-label for the breadcrumb control  */
+    label: string;
+    /** Displays an alternative size */
+    size: 'md' | 'sm';
+    /** @internal */
+    _isDynamic: boolean;
+    /** @internal */
+    _items: NodeListOf<SkfBreadcrumbItem>;
+    firstUpdated(): void;
+    /** @internal */
+    private _handleSlotChange;
+    render(): import("lit").TemplateResult;
+}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,8 @@
+import { SkfBreadcrumb } from './breadcrumb.component';
+export * from './breadcrumb.component';
+export default SkfBreadcrumb;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-breadcrumb': SkfBreadcrumb;
+    }
+}

package/dist/components/breadcrumb/breadcrumb.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/breadcrumb-item/breadcrumb-item.component.d.ts

@@ -0,0 +1,25 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+ *
+ * @slot - Label of the breadcrumb item
+ *
+ * @tagname skf-breadcrumb-item
+ */
+export declare class SkfBreadcrumbItem extends SkfElement {
+    static styles: CSSResultGroup;
+    private _onClick?;
+    /** If defined, loads url on click */
+    href?: string;
+    /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
+    set onClick(onClickFn: ((event: Event, route: string) => void) | undefined);
+    get onClick(): ((event: Event, route: string) => void) | undefined;
+    /** @internal */
+    _isCurrent: boolean;
+    connectedCallback(): void;
+    /** @internal */
+    private _clickHandler;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/breadcrumb-item/breadcrumb-item.d.ts

@@ -0,0 +1,8 @@
+import { SkfBreadcrumbItem } from './breadcrumb-item.component';
+export * from './breadcrumb-item.component';
+export default SkfBreadcrumbItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-breadcrumb-item': SkfBreadcrumbItem;
+    }
+}

package/dist/components/breadcrumb-item/breadcrumb-item.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/dialog/dialog.component.d.ts

@@ -16,7 +16,6 @@ import { type CSSResultGroup } from 'lit';
  * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
  *
  * @slot - The dialog component's content
- * @slot heading - The dialog component's heading
  * @slot footer - The dialog component's buttons goes here
  *
  * @event skf-dialog-open - Fires when the dialog is opened (after transitioned in)

package/dist/components/dialog/dialog.component.js

@@ -119,9 +119,7 @@ const y = class y extends v {
     })}
 			>
 				<div class="dialog__head">
-					<h2 class="dialog__heading">
-						<slot name="heading"></slot>
-					</h2>
+					<h2 class="dialog__heading">${this.heading}</h2>
 					${this.noCloseButton ? k : b`
 								<button
 									@click=${this._handleClose}

package/dist/components/icon/icon.component.js

@@ -1,52 +1,51 @@
-import { SkfElement as c } from "../../internal/components/skf-element.js";
-import { ICONS as f } from "@skf-design-system/ui-assets";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { ICONS as c } from "@skf-design-system/ui-assets";
 import d from "../../styles/component.styles.js";
 import { html as h } from "lit";
-import { property as o } from "lit/decorators.js";
+import { property as t } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
-import { ifDefined as l } from "lit/directives/if-defined.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
 import v from "./icon.styles.js";
-var y = Object.defineProperty, i = (p, e, a, $) => {
-  for (var r = void 0, s = p.length - 1, n; s >= 0; s--)
-    (n = p[s]) && (r = n(e, a, r) || r);
-  return r && y(e, a, r), r;
+var y = Object.defineProperty, o = (m, p, a, $) => {
+  for (var r = void 0, i = m.length - 1, n; i >= 0; i--)
+    (n = m[i]) && (r = n(p, a, r) || r);
+  return r && y(p, a, r), r;
 };
-const m = class m extends c {
+const l = class l extends f {
   constructor() {
     super(...arguments), this.color = "primary", this.size = "md";
   }
   render() {
-    const e = f[this.name];
     return h`
 			<div
-				aria-hidden=${l(this.label ? void 0 : "true")}
-				aria-label=${l(this.label)}
+				aria-hidden=${s(this.label ? void 0 : "true")}
+				aria-label=${s(this.label)}
 				class=${u({
       icon: !0,
       [`icon--color-${this.color}`]: !0,
       [`icon--size-${this.size}`]: !0
     })}
-				role=${l(this.label ? "img" : void 0)}
+				role=${s(this.label ? "img" : void 0)}
 			>
-				${e}
+				${c[this.name]}
 			</div>
 		`;
   }
 };
-m.styles = [d, v];
-let t = m;
-i([
-  o({ reflect: !0 })
-], t.prototype, "color");
-i([
-  o()
-], t.prototype, "label");
-i([
-  o()
-], t.prototype, "name");
-i([
-  o({ reflect: !0 })
-], t.prototype, "size");
+l.styles = [d, v];
+let e = l;
+o([
+  t({ reflect: !0 })
+], e.prototype, "color");
+o([
+  t()
+], e.prototype, "label");
+o([
+  t()
+], e.prototype, "name");
+o([
+  t({ reflect: !0 })
+], e.prototype, "size");
 export {
-  t as SkfIcon
+  e as SkfIcon
 };

package/dist/custom-elements.json

@@ -281,6 +281,155 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/breadcrumb/breadcrumb.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.",
+          "name": "SkfBreadcrumb",
+          "slots": [
+            {
+              "description": "One or more `<skf-breadcrumb-item>`",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Breadcrumb'",
+              "description": "aria-label for the breadcrumb control",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "description": "Displays an alternative size",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the item is clicked",
+              "name": "click"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Breadcrumb'",
+              "description": "aria-label for the breadcrumb control",
+              "fieldName": "label"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "description": "Displays an alternative size",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-breadcrumb",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfBreadcrumb",
+          "declaration": {
+            "name": "SkfBreadcrumb",
+            "module": "src/components/breadcrumb/breadcrumb.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/breadcrumb-item/breadcrumb-item.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component",
+          "name": "SkfBreadcrumbItem",
+          "slots": [
+            {
+              "description": "Label of the breadcrumb item",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_onClick",
+              "type": {
+                "text": "(event: Event, route: string) => void | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, loads url on click",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "onClick",
+              "description": "If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, loads url on click",
+              "fieldName": "href"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-breadcrumb-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfBreadcrumbItem",
+          "declaration": {
+            "name": "SkfBreadcrumbItem",
+            "module": "src/components/breadcrumb-item/breadcrumb-item.component.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/button/button.component.ts",
@@ -1090,10 +1239,6 @@
               "description": "The dialog component's content",
               "name": ""
             },
-            {
-              "description": "The dialog component's heading",
-              "name": "heading"
-            },
             {
               "description": "The dialog component's buttons goes here",
               "name": "footer"

package/dist/react/index.d.ts

@@ -1,5 +1,7 @@
 export { default as SkfAccordion } from './skf-accordion/index.js';
 export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfBreadcrumb } from './skf-breadcrumb/index.js';
+export { default as SkfBreadcrumbItem } from './skf-breadcrumb-item/index.js';
 export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';

package/dist/react/index.js

@@ -1,5 +1,7 @@
 export { default as SkfAccordion } from './skf-accordion/index.js';
 export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfBreadcrumb } from './skf-breadcrumb/index.js';
+export { default as SkfBreadcrumbItem } from './skf-breadcrumb-item/index.js';
 export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';

package/dist/react/skf-breadcrumb/index.d.ts

@@ -0,0 +1,9 @@
+import Component from '../../components/breadcrumb/breadcrumb.js';
+import { type SkfBreadcrumb } from '../../components/breadcrumb/breadcrumb.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<Event & {
+        target: SkfBreadcrumb;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-breadcrumb/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/breadcrumb/breadcrumb.js';
+import {} from '../../components/breadcrumb/breadcrumb.js';
+import {} from '@lit/react';
+const tagName = 'skf-breadcrumb';
+Component.define('skf-breadcrumb');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+    },
+    displayName: 'SkfBreadcrumb',
+});
+export default reactWrapper;

package/dist/react/skf-breadcrumb-item/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/breadcrumb-item/breadcrumb-item.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-breadcrumb-item/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/breadcrumb-item/breadcrumb-item.js';
+const tagName = 'skf-breadcrumb-item';
+Component.define('skf-breadcrumb-item');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfBreadcrumbItem',
+});
+export default reactWrapper;

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

@@ -89,6 +89,23 @@ export type SkfAlertProps = {
   "onskf-alert-close"?: (e: CustomEvent<never>) => void;
 };
 
+export type SkfBreadcrumbProps = {
+  /** aria-label for the breadcrumb control */
+  label?: string;
+  /** Displays an alternative size */
+  size?: "md" | "sm";
+
+  /** Fired when the item is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfBreadcrumbItemProps = {
+  /** If defined, loads url on click */
+  href?: string | undefined;
+  /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
+  onClick?: string;
+};
+
 export type SkfButtonProps = {
   /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
   destructive?: boolean;
@@ -1555,6 +1572,29 @@ export type CustomElements = {
    */
   "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
 
+  /**
+   * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **click** - Fired when the item is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<skf-breadcrumb-item>`
+   */
+  "skf-breadcrumb": Partial<SkfBreadcrumbProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Label of the breadcrumb item
+   */
+  "skf-breadcrumb-item": Partial<SkfBreadcrumbItemProps & BaseProps & BaseEvents>;
+
   /**
    * Component to be used in forms or for interactivity
    * ---
@@ -1625,7 +1665,6 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - The dialog component's content
-   * - **heading** - The dialog component's heading
    * - **footer** - The dialog component's buttons goes here
    *
    * ### **CSS Properties:**

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

@@ -2,6 +2,8 @@ import type { DefineComponent } from "vue";
 
 import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
 import type { SkfAlert } from "../../components/alert/alert.component.js";
+import type { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SkfButton } from "../../components/button/button.component.js";
 import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
@@ -63,6 +65,23 @@ type SkfAlertProps = {
   "onskf-alert-close"?: (e: CustomEvent<never>) => void;
 };
 
+type SkfBreadcrumbProps = {
+  /** aria-label for the breadcrumb control */
+  label?: SkfBreadcrumb["label"];
+  /** Displays an alternative size */
+  size?: SkfBreadcrumb["size"];
+
+  /** Fired when the item is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+type SkfBreadcrumbItemProps = {
+  /** If defined, loads url on click */
+  href?: SkfBreadcrumbItem["href"];
+  /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
+  onClick?: SkfBreadcrumbItem["onClick"];
+};
+
 type SkfButtonProps = {
   /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
   destructive?: SkfButton["destructive"];
@@ -718,6 +737,29 @@ export type CustomElements = {
    */
   "skf-alert": DefineComponent<SkfAlertProps>;
 
+  /**
+   * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **click** - Fired when the item is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<skf-breadcrumb-item>`
+   */
+  "skf-breadcrumb": DefineComponent<SkfBreadcrumbProps>;
+
+  /**
+   * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Label of the breadcrumb item
+   */
+  "skf-breadcrumb-item": DefineComponent<SkfBreadcrumbItemProps>;
+
   /**
    * Component to be used in forms or for interactivity
    * ---
@@ -788,7 +830,6 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - The dialog component's content
-   * - **heading** - The dialog component's heading
    * - **footer** - The dialog component's buttons goes here
    *
    * ### **CSS Properties:**

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

@@ -77,6 +77,35 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-breadcrumb",
+      "description": "The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.\n---\n\n\n### **Events:**\n - **click** - Fired when the item is clicked\n\n### **Slots:**\n - _default_ - One or more `<skf-breadcrumb-item>`",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "aria-label for the breadcrumb control",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "Displays an alternative size",
+          "values": [{ "name": "md" }, { "name": "sm" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-breadcrumb-item",
+      "description": "The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component\n---\n\n\n### **Slots:**\n - _default_ - Label of the breadcrumb item",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "If defined, loads url on click",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-button",
       "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n\n### **Slots:**\n - _default_ - The Primary content",
@@ -424,7 +453,7 @@
     },
     {
       "name": "skf-dialog",
-      "description": "The `<skf-dialog>` is a component that open up a dialog with the content provided\n---\n\n\n### **Events:**\n - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)\n- **close** - Fires when the dialog is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **heading** - The dialog component's heading\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)_",
+      "description": "The `<skf-dialog>` is a component that open up a dialog with the content provided\n---\n\n\n### **Events:**\n - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)\n- **close** - Fires when the dialog is closed (after transitioned out)\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",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@skf-design-system/ui-components",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -160,6 +160,79 @@
             ]
           }
         },
+        {
+          "name": "skf-breadcrumb",
+          "description": "The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.\n---\n\n\n### **Events:**\n - **click** - Fired when the item is clicked\n\n### **Slots:**\n - _default_ - One or more `<skf-breadcrumb-item>`",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "aria-label for the breadcrumb control",
+              "value": { "type": "string", "default": "'Breadcrumb'" }
+            },
+            {
+              "name": "size",
+              "description": "Displays an alternative size",
+              "value": { "type": "'md' | 'sm'", "default": "'md'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "One or more `<skf-breadcrumb-item>`" }
+          ],
+          "events": [
+            { "name": "click", "description": "Fired when the item is clicked" }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "aria-label for the breadcrumb control",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "Displays an alternative size",
+                "type": "'md' | 'sm'"
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the item is clicked"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-breadcrumb-item",
+          "description": "The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component\n---\n\n\n### **Slots:**\n - _default_ - Label of the breadcrumb item",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "If defined, loads url on click",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "Label of the breadcrumb item" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "href",
+                "description": "If defined, loads url on click",
+                "type": "string | undefined"
+              },
+              {
+                "name": "onClick",
+                "description": "If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined."
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "skf-button",
           "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n\n### **Slots:**\n - _default_ - The Primary content",
@@ -573,7 +646,7 @@
         },
         {
           "name": "skf-dialog",
-          "description": "The `<skf-dialog>` is a component that open up a dialog with the content provided\n---\n\n\n### **Events:**\n - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)\n- **close** - Fires when the dialog is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **heading** - The dialog component's heading\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)_",
+          "description": "The `<skf-dialog>` is a component that open up a dialog with the content provided\n---\n\n\n### **Events:**\n - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)\n- **close** - Fires when the dialog is closed (after transitioned out)\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)_",
           "doc-url": "",
           "attributes": [
             {
@@ -608,10 +681,6 @@
           ],
           "slots": [
             { "name": "", "description": "The dialog component's content" },
-            {
-              "name": "heading",
-              "description": "The dialog component's heading"
-            },
             {
               "name": "footer",
               "description": "The dialog component's buttons goes here"

package/package.json

@@ -34,19 +34,19 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.34",
   "dependencies": {
     "@floating-ui/dom": "^1.6.12"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
-    "@commitlint/cli": "^19.6.0",
+    "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@custom-elements-manifest/analyzer": "^0.10.3",
-    "@eslint/js": "^9.16.0",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@eslint/js": "^9.17.0",
     "@lit/react": "^1.0.6",
-    "@playwright/test": "^1.49.0",
-    "@skf-design-system/ui-assets": "0.1.3-beta.9",
+    "@playwright/test": "^1.49.1",
+    "@skf-design-system/ui-assets": "0.1.3-beta.4",
     "@skf-design-system/wc-storybook-helpers": "^0.1.0",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
@@ -59,7 +59,7 @@
     "@storybook/theming": "^8.4.7",
     "@storybook/web-components": "^8.4.7",
     "@storybook/web-components-vite": "^8.4.7",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.2",
     "@types/react": "^18.3.12",
     "cem-plugin-expanded-types": "^1.3.3",
     "command-line-args": "^6.0.1",
@@ -69,27 +69,27 @@
     "custom-element-vs-code-integration": "^1.4.1",
     "custom-element-vuejs-integration": "^1.3.3",
     "del": "^8.0.0",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-wc": "^2.2.0",
     "express": "^4.21.2",
     "husky": "^9.1.7",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.2.11",
     "lit": "^3.2.1",
     "postcss-styled-syntax": "^0.7.0",
     "prettier": "3.4.2",
     "react": "^18.3.1",
     "storybook": "^8.4.7",
-    "stylelint": "^16.11.0",
+    "stylelint": "^16.12.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-no-unsupported-browser-features": "^8.0.2",
     "stylelint-order": "^6.0.4",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0",
+    "typescript-eslint": "^8.18.1",
     "vite": "^6.0.3",
     "vite-tsconfig-paths": "^5.1.4"
   },