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

package/dist/internal/base-classes/popover/popover.base.d.ts

@@ -16,8 +16,8 @@ export declare class SkfPopoverBase extends SkfElement {
     /** @internal */
     triggerEvent: 'mouseenter' | 'click';
     $arrow: HTMLElement;
-    protected abortEventsController: AbortController;
-    protected signal: AbortSignal;
+    abortEventsController: AbortController;
+    signal: AbortSignal;
     protected popoverController: PopoverController;
     constructor();
     disconnectedCallback(): void;

package/dist/internal/base-classes/popover/popover.base.js

@@ -1,4 +1,4 @@
-import { flip as O, offset as x, arrow as A, computePosition as C } from "@floating-ui/dom";
+import { flip as O, offset as C, arrow as x, computePosition as A } from "@floating-ui/dom";
 import { SkfElement as S } from "../../components/skf-element.js";
 import { PopoverController as P } from "../../controllers/popover.controller.js";
 import { uuid as _ } from "../../helpers/uuid.js";
@@ -7,11 +7,11 @@ import { componentStyles as L } from "../../../styles/component.styles.js";
 import { nothing as F, html as y } from "lit";
 import { property as u, state as c, query as T } from "lit/decorators.js";
 import { classMap as j } from "lit/directives/class-map.js";
-import { styles as k } from "./popover.styles.js";
-var M = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (m, t, o, i) => {
+import { styles as M } from "./popover.styles.js";
+var k = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (m, t, o, i) => {
   for (var e = i > 1 ? void 0 : i ? R(t, o) : t, n = m.length - 1, a; n >= 0; n--)
     (a = m[n]) && (e = (i ? a(t, o, e) : a(e)) || e);
-  return i && e && M(t, o, e), e;
+  return i && e && k(t, o, e), e;
 }, p;
 const s = (p = class extends S {
   constructor() {
@@ -30,9 +30,9 @@ const s = (p = class extends S {
     }, this.reposition = async () => {
       var n, a, h;
       if (!this.$anchor) return;
-      const t = [O(), x(this.offset)];
-      this.arrow && t.push(A({ element: this.$arrow }));
-      const { x: o, y: i, middlewareData: e } = await C(this.$anchor, this.$popover, {
+      const t = [O(), C(this.offset)];
+      this.arrow && t.push(x({ element: this.$arrow }));
+      const { x: o, y: i, middlewareData: e } = await A(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
@@ -41,17 +41,17 @@ const s = (p = class extends S {
         left: `${String(o)}px`,
         top: `${String(i)}px`
       }), this.arrow) {
-        const d = this.placement.split("-")[0], l = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", v = (n = e.flip) == null ? void 0 : n.index, g = (a = e.arrow) == null ? void 0 : a.x, b = (h = e.arrow) == null ? void 0 : h.y, w = typeof g == "number" ? `${String(g)}px` : "", $ = typeof b == "number" ? `${String(b)}px` : "", E = {
+        const d = this.placement.split("-")[0], l = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", g = (n = e.flip) == null ? void 0 : n.index, v = (a = e.arrow) == null ? void 0 : a.x, b = (h = e.arrow) == null ? void 0 : h.y, $ = typeof v == "number" ? `${String(v)}px` : "", w = typeof b == "number" ? `${String(b)}px` : "", E = {
           bottom: 45,
           right: 135,
           top: 225,
           left: 315
         };
         Object.assign(this.$arrow.style, {
-          top: $,
-          [this.placement.includes("left") ? "right" : "left"]: w,
-          [v ? d : l]: "calc(var(--_skf-popover-arrow-size) * -1)",
-          rotate: `${(E[l] + (v ? 180 : 0)).toString()}deg`
+          top: w,
+          [this.placement.includes("left") ? "right" : "left"]: $,
+          [g ? d : l]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(E[l] + (g ? 180 : 0)).toString()}deg`
         });
       }
     }, this.handleEscapeKey = (t) => {
@@ -81,13 +81,13 @@ const s = (p = class extends S {
     ), this.$popover.id = _(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open.bind(this), { signal: this.signal });
   }
   open(t) {
-    t.stopPropagation(), this._toggleOpen(!0), document.addEventListener("keydown", this.handleEscapeKey.bind(this), { signal: this.signal }), this.openExtended();
+    t.stopPropagation(), this._toggleOpen(!0), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey.bind(this), { signal: this.signal }), this.openExtended();
   }
   /** @internal add additional open tasks here in UI component */
   openExtended() {
   }
   close() {
-    this.closeExtended(), this._toggleOpen(!1), document.removeEventListener("keydown", this.handleEscapeKey.bind(this));
+    this.closeExtended(), this._toggleOpen(!1), this.abortEventsController.abort();
   }
   /** @internal add additional close tasks here in UI component */
   closeExtended() {
@@ -106,10 +106,10 @@ const s = (p = class extends S {
 			<div
 				@toggle=${this._handleToggle}
 				class=${j({ popover: !0, ...p.classMap })}
-				id="popover"
+				id="root"
 			>
 				<slot></slot>
-				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : F}
+				${this.arrow ? y`<div id="arrow"></div>` : F}
 			</div>
 		`;
   }
@@ -134,7 +134,7 @@ const s = (p = class extends S {
       return h;
     }
   }
-}, p.styles = [L, k], p.classMap = {}, p);
+}, p.styles = [L, M], p.classMap = {}, p);
 r([
   u()
 ], s.prototype, "placement", 2);

package/dist/internal/base-classes/popover/popover.styles.js

@@ -1,9 +1,7 @@
 import { css as o } from "lit";
 const e = o`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
-			background-color: var(--skf-bg-color-neutral-1);
 			border: none;
 			border-radius: var(--skf-border-radius-sm);
 			box-shadow: var(--skf-shadow-md);
@@ -19,15 +17,16 @@ const e = o`
 			display: none;
 		}
 
-		#popover {
+		#root {
+			background-color: var(--skf-bg-color-neutral-1);
 			height: 100%;
 			width: 100%;
 		}
 
-		.popover__arrow {
+		#arrow {
 			--_skf-popover-arrow-size: calc(6px * 0.7071);
 
-			background-color: var(--skf-bg-color-neutral-1);
+			background-color: inherit;
 			block-size: calc(var(--_skf-popover-arrow-size) * 2);
 			box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 5%);
 			inline-size: calc(var(--_skf-popover-arrow-size) * 2);

package/dist/internal/components/hint/hint.component.d.ts

@@ -3,7 +3,11 @@ import { SkfElement } from '../../components/skf-element.js';
 import type { Severity } from '../../types.js';
 import { type CSSResultGroup } from 'lit';
 export declare class SkfHint extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
+    disabled: boolean;
     severity?: Severity;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/internal/components/hint/hint.component.js

@@ -1,21 +1,42 @@
+var v = (t) => {
+  throw TypeError(t);
+};
+var d = (t, e, s) => e.has(t) || v("Cannot " + s);
+var m = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), h = (t, e, s) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), c = (t, e, s, o) => (d(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
 import "../../../components/icon/icon.js";
-import { SkfElement as l } from "../skf-element.js";
-import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
-import { componentStyles as v } from "../../../styles/component.styles.js";
-import { html as f } from "lit";
-import { property as y } from "lit/decorators.js";
-import { styles as d } from "./hint.styles.js";
-var a = Object.defineProperty, c = (s, i, m, h) => {
-  for (var r = void 0, t = s.length - 1, p; t >= 0; t--)
-    (p = s[t]) && (r = p(i, m, r) || r);
-  return r && a(i, m, r), r;
+import { SkfElement as O } from "../skf-element.js";
+import { ICON_SEVERITY as g } from "../../constants/iconSeverity.js";
+import { stateMap as w } from "../../helpers/stateMap.js";
+import { watch as C } from "../../helpers/watch.js";
+import { componentStyles as P } from "../../../styles/component.styles.js";
+import { html as _ } from "lit";
+import { property as b } from "lit/decorators.js";
+import { styles as S } from "./hint.styles.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, f = (t, e, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? x(e, s) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (r = (o ? l(e, s, r) : l(r)) || r);
+  return o && r && j(e, s, r), r;
+};
+const u = {
+  disabled: "disabled",
+  severity: ["error", "info", "success", "warning"]
 };
-const o = class o extends l {
+var p, a;
+const y = class y extends O {
+  constructor() {
+    super(...arguments);
+    h(this, p);
+    h(this, a);
+    c(this, p, this.attachInternals()), c(this, a, m(this, p).states), this.disabled = !1;
+  }
+  _handleStateChange(s, o, r) {
+    w(m(this, a), u[s]).set(r);
+  }
   render() {
-    return f`
+    return _`
 			<div id="root">
-				${this.severity && f`
-					<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
+				${this.severity && _`
+					<skf-icon color=${this.severity} name="${g[this.severity]}" size="xs">
 					</skf-icon>
 				`}
 				<slot></slot>
@@ -23,11 +44,17 @@ const o = class o extends l {
 		`;
   }
 };
-o.styles = [v, d];
-let e = o;
-c([
-  y()
-], e.prototype, "severity");
+p = new WeakMap(), a = new WeakMap(), y.styles = [P, S];
+let i = y;
+f([
+  b({ type: Boolean })
+], i.prototype, "disabled", 2);
+f([
+  b({ type: String })
+], i.prototype, "severity", 2);
+f([
+  C(Object.keys(u))
+], i.prototype, "_handleStateChange", 1);
 export {
-  e as SkfHint
+  i as SkfHint
 };

package/dist/internal/components/hint/hint.styles.js

@@ -1,35 +1,39 @@
-import { css as r } from "lit";
-const s = r`
-	#root {
-		align-items: center;
-		color: var(--_skf-hint-color, var(--skf-text-color-secondary));
-		display: flex;
-		font-size: var(--skf-font-size-75);
-		font-weight: var(--skf-font-weight-medium);
-		gap: var(--skf-spacing-25);
+import { css as o } from "lit";
+const s = o`
+	@layer components {
+		@layer base {
+			#root {
+				--_skf-hint-color: var(--skf-text-color-secondary);
 
-		:host-context(:disabled) & {
-			color: inherit;
+				align-items: center;
+				color: var(--_skf-hint-color);
+				display: flex;
+				font-size: var(--skf-font-size-75);
+				font-weight: var(--skf-font-weight-medium);
+				gap: var(--skf-spacing-25);
+			}
 		}
 
-		:host([severity='alert']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-alert);
-		}
+		@layer mods {
+			:host(:state(disabled)) #root {
+				--_skf-hint-color: var(--skf-interactive-text-color-disabled);
+			}
 
-		:host([severity='error']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-error);
-		}
+			:host(:not(:state(disabled)):state(error)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-error);
+			}
 
-		:host([severity='info']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-info);
-		}
+			:host(:not(:state(disabled)):state(info)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-info);
+			}
 
-		:host([severity='success']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-success);
-		}
+			:host(:not(:state(disabled)):state(success)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-success);
+			}
 
-		:host([severity='warning']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-warning);
+			:host(:not(:state(disabled)):state(warning)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-warning);
+			}
 		}
 	}
 `;

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

@@ -15,13 +15,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";
@@ -105,7 +105,113 @@ type BaseProps = {
   translate?: "yes" | "no";
 };
 
-type BaseEvents = {};
+type BaseEvents = {
+  // Mouse Events
+
+  /** Triggered when the element is clicked by the user by mouse or keyboard. */
+  onClick?: (event: MouseEvent) => void;
+  /** Fired when the context menu is triggered, often by right-clicking. */
+  onContextMenu?: (event: MouseEvent) => void;
+  /** Fired when the element is double-clicked. */
+  onDoubleClick?: (event: MouseEvent) => void;
+  /** Fired repeatedly as the draggable element is being dragged. */
+  onDrag?: (event: DragEvent) => void;
+  /** Fired when the dragging of a draggable element is finished. */
+  onDragEnd?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection enters a valid drop target. */
+  onDragEnter?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragExit?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragLeave?: (event: DragEvent) => void;
+  /** Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). */
+  onDragOver?: (event: DragEvent) => void;
+  /** Fired when a draggable element starts being dragged. */
+  onDragStart?: (event: DragEvent) => void;
+  /** Fired when a dragged element is dropped onto a drop target. */
+  onDrop?: (event: DragEvent) => void;
+  /** Fired when a mouse button is pressed down on the element. */
+  onMouseDown?: (event: MouseEvent) => void;
+  /** Fired when the mouse cursor enters the element. */
+  onMouseEnter?: (event: MouseEvent) => void;
+  /** Triggered when the mouse cursor leaves the element. */
+  onMouseLeave?: (event: MouseEvent) => void;
+  /** Fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. */
+  onMouseMove?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. */
+  onMouseOut?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. */
+  onMouseOver?: (event: MouseEvent) => void;
+  /** Fired when a mouse button is released on the element. */
+  onMouseUp?: (event: MouseEvent) => void;
+
+  // Keyboard Events
+
+  /** Fired when a key is pressed down. */
+  onKeyDown?: (event: KeyboardEvent) => void;
+  /** Fired when a key is released.. */
+  onKeyUp?: (event: KeyboardEvent) => void;
+  /** Fired when a key is pressed down. */
+  onKeyPressed?: (event: KeyboardEvent) => void;
+
+  // Focus Events
+
+  /** Fired when the element receives focus, often triggered by tab navigation. */
+  onFocus?: (event: FocusEvent) => void;
+  /** Fired when the element loses focus. */
+  onBlur?: (event: FocusEvent) => void;
+
+  // Form Events
+
+  /** Fired when the value of an input element changes, such as with text inputs or select elements. */
+  onChange?: (event: Event) => void;
+  /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
+  onInput?: (event: Event) => void;
+  /** Fired when a form is submitted, usually on pressing Enter in a text input. */
+  onSubmit?: (event: Event) => void;
+  /** Fired when a form is reset. */
+  onReset?: (event: Event) => void;
+
+  // UI Events
+
+  /** Fired when the content of an element is scrolled. */
+  onScroll?: (event: UIEvent) => void;
+
+  // Wheel Events
+
+  /** Fired when the mouse wheel is scrolled while the element is focused. */
+  onWheel?: (event: WheelEvent) => void;
+
+  // Animation Events
+
+  /** Fired when a CSS animation starts. */
+  onAnimationStart?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes. */
+  onAnimationEnd?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes one iteration. */
+  onAnimationIteration?: (event: AnimationEvent) => void;
+
+  // Transition Events
+
+  /** Fired when a CSS transition has completed. */
+  onTransitionEnd?: (event: TransitionEvent) => void;
+
+  // Media Events
+
+  /** Fired when an element (usually an image) finishes loading */
+  onLoad?: (event: Event) => void;
+  /** Fired when an error occurs during the loading of an element, like an image not being found. */
+  onError?: (event: Event) => void;
+
+  // Clipboard Events
+
+  /** Fires when the user initiates a copy action through the browser's user interface. */
+  onCopy?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "cut" action through the browser's user interface. */
+  onCut?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "paste" action through the browser's user interface. */
+  onPaste?: (event: ClipboardEvent) => void;
+};
 
 export type SkfIconProps = {
   /** Sets the color of the icon */
@@ -389,8 +495,45 @@ export type SkfLogoProps = {
   color?: SkfLogo["color"];
 };
 
-export type SkfNavProps = {
+export 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;
+};
+
+export type SkfNavItemProps = {
   /**  */
+  href?: SkfNavItem["href"];
+  /**  */
+  icon?: SkfNavItem["icon"];
+  /**  */
+  vertical?: SkfNavItem["vertical"];
+};
+
+export type SkfNavProps = {
+  /** If true, the navigation will be displayed vertically */
   vertical?: SkfNav["vertical"];
 };
 
@@ -473,35 +616,6 @@ export type SkfInputProps = {
   oninvalid?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export 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"];
-};
-
 export type SkfMenuItemProps = {
   /** Defines the semantic element to render */
   as?: SkfMenuItem["as"];
@@ -515,22 +629,19 @@ export 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;
 };
 
 export type SkfMenuProps = {
@@ -545,13 +656,6 @@ export type SkfMenuProps = {
   "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type SkfNavItemProps = {
-  /**  */
-  href?: SkfNavItem["href"];
-  /**  */
-  icon?: SkfNavItem["icon"];
-};
-
 export type SkfPopoverProps = {
   /** The placement of the popover */
   placement?: SkfPopover["undefined"];
@@ -627,6 +731,8 @@ export type SkfSegmentedButtonProps = {
 export type SkfSelectOptionGroupProps = {
   /**  */
   label?: SkfSelectOptionGroup["label"];
+  /**  */
+  small?: SkfSelectOptionGroup["small"];
 };
 
 export type SkfTagProps = {
@@ -713,6 +819,8 @@ export type SkfSelectOptionProps = {
   /** The option's label text (equivalent to the tags textContent) */
   text?: SkfSelectOption["text"];
   /**  */
+  small?: SkfSelectOption["small"];
+  /**  */
   role?: SkfSelectOption["role"];
   /**  */
   _parent?: SkfSelectOption["_parent"];
@@ -1004,6 +1112,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>;
 
@@ -1108,6 +1219,30 @@ export type CustomElements = {
    */
   "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
 
+  /**
+   * 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": Partial<SkfLinkProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-nav>` is a component that displays a list of <nav-items>.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's main content
+   */
+  "skf-nav-item": Partial<SkfNavItemProps & BaseProps & BaseEvents>;
+
   /**
    * The `<skf-nav>` is a component that displays a list of <nav-items>.
    * ---
@@ -1144,21 +1279,14 @@ export type CustomElements = {
    */
   "skf-input": Partial<SkfInputProps & BaseProps & BaseEvents>;
 
-  /**
-   * 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": Partial<SkfLinkProps & BaseProps & BaseEvents>;
-
   /**
    * 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
    */
@@ -1180,16 +1308,6 @@ export type CustomElements = {
    */
   "skf-menu": Partial<SkfMenuProps & BaseProps & BaseEvents>;
 
-  /**
-   * The `<skf-nav>` is a component that displays a list of <nav-items>.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's main content
-   */
-  "skf-nav-item": Partial<SkfNavItemProps & BaseProps & BaseEvents>;
-
   /**
    * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
    *