@skf-design-system/ui-components 1.0.0-alpha.29 → 1.0.0-alpha.31

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as SkfButton } from './components/button/button.js';
 export { default as SkfCard } from './components/card/card.js';
 export { default as SkfCheckbox } from './components/checkbox/checkbox.js';
 export { default as SkfCollapse } from './components/collapse/collapse.js';
+export { default as SkfDialog } from './components/dialog/dialog.js';
 export { default as SkfDivider } from './components/divider/divider.js';
 export { default as SkfHeading } from './components/heading/heading.js';
 export { default as SkfIcon } from './components/icon/icon.js';
@@ -11,11 +12,16 @@ export { default as SkfInput } from './components/input/input.js';
 export { default as SkfLink } from './components/link/link.js';
 export { default as SkfLoader } from './components/loader/loader.js';
 export { default as SkfLogo } from './components/logo/logo.js';
+export { default as SkfMenuItem } from './components/menu-item/menu-item.js';
+export { default as SkfMenu } from './components/menu/menu.js';
+export { default as SkfPopover } from './components/popover/popover.js';
 export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';
 export { default as SkfOptionGroup } from './components/select-option-group/select-option-group.js';
 export { default as SkfOption } from './components/select-option/select-option.js';
 export { default as SkfSelect } from './components/select/select.js';
+export { default as SkfStepperItem } from './components/stepper-item/stepper-item.js';
+export { default as SkfStepper } from './components/stepper/stepper.js';
 export { default as SkfSwitch } from './components/switch/switch.js';
 export { default as SkfTabGoup } from './components/tab-group/tab-group.js';
 export { default as SkfTabPanel } from './components/tab-panel/tab-panel.js';
@@ -23,3 +29,4 @@ export { default as SkfTab } from './components/tab/tab.js';
 export { default as SkfTag } from './components/tag/tag.js';
 export { default as SkfTextArea } from './components/textarea/textarea.js';
 export { default as SkfToast } from './components/toast/toast.js';
+export { default as SkfTooltip } from './components/tooltip/tooltip.js';

package/dist/index.js

@@ -4,6 +4,7 @@ import "./components/button/button.js";
 import "./components/card/card.js";
 import "./components/checkbox/checkbox.js";
 import "./components/collapse/collapse.js";
+import "./components/dialog/dialog.js";
 import "./components/divider/divider.js";
 import "./components/heading/heading.js";
 import "./components/icon/icon.js";
@@ -11,11 +12,16 @@ import "./components/input/input.js";
 import "./components/link/link.js";
 import "./components/loader/loader.js";
 import "./components/logo/logo.js";
+import "./components/menu-item/menu-item.js";
+import "./components/menu/menu.js";
+import "./components/popover/popover.js";
 import "./components/progress/progress.js";
 import "./components/radio/radio.js";
 import "./components/select-option-group/select-option-group.js";
 import "./components/select-option/select-option.js";
 import "./components/select/select.js";
+import "./components/stepper-item/stepper-item.js";
+import "./components/stepper/stepper.js";
 import "./components/switch/switch.js";
 import "./components/tab-group/tab-group.js";
 import "./components/tab-panel/tab-panel.js";
@@ -23,57 +29,72 @@ import "./components/tab/tab.js";
 import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
 import "./components/toast/toast.js";
-import { SkfAccordion as h } from "./components/accordion/accordion.component.js";
-import { SkfAlert as v } from "./components/alert/alert.component.js";
-import { SkfButton as B } from "./components/button/button.component.js";
-import { SkfCard as H } from "./components/card/card.component.js";
-import { SkfCheckbox as j } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as y } from "./components/collapse/collapse.component.js";
-import { SkfDivider as E } from "./components/divider/divider.component.js";
-import { SkfHeading as J } from "./components/heading/heading.component.js";
-import { SkfIcon as M } from "./components/icon/icon.component.js";
-import { SkfInput as Q } from "./components/input/input.component.js";
-import { SkfLink as V } from "./components/link/link.component.js";
-import { SkfLoader as X } from "./components/loader/loader.component.js";
-import { SkfLogo as Z } from "./components/logo/logo.component.js";
-import { SkfProgress as $ } from "./components/progress/progress.component.js";
-import { SkfRadio as ro } from "./components/radio/radio.component.js";
-import { SkfSelectOptionGroup as po } from "./components/select-option-group/select-option-group.component.js";
-import { SkfSelectOption as mo } from "./components/select-option/select-option.component.js";
-import { SkfSelect as io } from "./components/select/select.component.js";
-import { SkfSwitch as ko } from "./components/switch/switch.component.js";
-import { SkfTabGroup as ao } from "./components/tab-group/tab-group.component.js";
-import { SkfTabPanel as co } from "./components/tab-panel/tab-panel.component.js";
-import { SkfTab as so } from "./components/tab/tab.component.js";
-import { SkfTag as uo } from "./components/tag/tag.component.js";
-import { SkfTextArea as go } from "./components/textarea/textarea.component.js";
-import { SkfToast as Go } from "./components/toast/toast.component.js";
-import { SkfAccordionItem as Co } from "./components/accordion/accordion-item.js";
+import "./components/tooltip/tooltip.js";
+import { SkfAccordion as H } from "./components/accordion/accordion.component.js";
+import { SkfAlert as j } from "./components/alert/alert.component.js";
+import { SkfButton as y } from "./components/button/button.component.js";
+import { SkfCard as E } from "./components/card/card.component.js";
+import { SkfCheckbox as J } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as N } from "./components/collapse/collapse.component.js";
+import { SkfDialog as U } from "./components/dialog/dialog.component.js";
+import { SkfDivider as W } from "./components/divider/divider.component.js";
+import { SkfHeading as Y } from "./components/heading/heading.component.js";
+import { SkfIcon as _ } from "./components/icon/icon.component.js";
+import { SkfInput as oo } from "./components/input/input.component.js";
+import { SkfLink as to } from "./components/link/link.component.js";
+import { SkfLoader as fo } from "./components/loader/loader.component.js";
+import { SkfLogo as eo } from "./components/logo/logo.component.js";
+import { SkfMenuItem as So } from "./components/menu-item/menu-item.component.js";
+import { SkfMenu as xo } from "./components/menu/menu.component.js";
+import { SkfPopover as no } from "./components/popover/popover.component.js";
+import { SkfProgress as lo } from "./components/progress/progress.component.js";
+import { SkfRadio as To } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as bo } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as Io } from "./components/select-option/select-option.component.js";
+import { SkfSelect as Go } from "./components/select/select.component.js";
+import { SkfStepperItem as Co } from "./components/stepper-item/stepper-item.component.js";
+import { SkfStepper as Po } from "./components/stepper/stepper.component.js";
+import { SkfSwitch as vo } from "./components/switch/switch.component.js";
+import { SkfTabGroup as Mo } from "./components/tab-group/tab-group.component.js";
+import { SkfTabPanel as Bo } from "./components/tab-panel/tab-panel.component.js";
+import { SkfTab as Ro } from "./components/tab/tab.component.js";
+import { SkfTag as qo } from "./components/tag/tag.component.js";
+import { SkfTextArea as zo } from "./components/textarea/textarea.component.js";
+import { SkfToast as Fo } from "./components/toast/toast.component.js";
+import { SkfTooltip as Ko } from "./components/tooltip/tooltip.component.js";
+import { SkfAccordionItem as Qo } from "./components/accordion/accordion-item.js";
 export {
-  h as SkfAccordion,
-  Co as SkfAccordionItem,
-  v as SkfAlert,
-  B as SkfButton,
-  H as SkfCard,
-  j as SkfCheckbox,
-  y as SkfCollapse,
-  E as SkfDivider,
-  J as SkfHeading,
-  M as SkfIcon,
-  Q as SkfInput,
-  V as SkfLink,
-  X as SkfLoader,
-  Z as SkfLogo,
-  mo as SkfOption,
-  po as SkfOptionGroup,
-  $ as SkfProgress,
-  ro as SkfRadio,
-  io as SkfSelect,
-  ko as SkfSwitch,
-  so as SkfTab,
-  ao as SkfTabGoup,
-  co as SkfTabPanel,
-  uo as SkfTag,
-  go as SkfTextArea,
-  Go as SkfToast
+  H as SkfAccordion,
+  Qo as SkfAccordionItem,
+  j as SkfAlert,
+  y as SkfButton,
+  E as SkfCard,
+  J as SkfCheckbox,
+  N as SkfCollapse,
+  U as SkfDialog,
+  W as SkfDivider,
+  Y as SkfHeading,
+  _ as SkfIcon,
+  oo as SkfInput,
+  to as SkfLink,
+  fo as SkfLoader,
+  eo as SkfLogo,
+  xo as SkfMenu,
+  So as SkfMenuItem,
+  Io as SkfOption,
+  bo as SkfOptionGroup,
+  no as SkfPopover,
+  lo as SkfProgress,
+  To as SkfRadio,
+  Go as SkfSelect,
+  Po as SkfStepper,
+  Co as SkfStepperItem,
+  vo as SkfSwitch,
+  Ro as SkfTab,
+  Mo as SkfTabGoup,
+  Bo as SkfTabPanel,
+  qo as SkfTag,
+  zo as SkfTextArea,
+  Fo as SkfToast,
+  Ko as SkfTooltip
 };

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

@@ -0,0 +1,29 @@
+import { type Placement } from '@floating-ui/dom';
+import { SkfElement } from '../../components/skf-element.js';
+import { PopoverController } from '../../controllers/popover.controller.js';
+import { type CSSResultGroup } from 'lit';
+export declare class SkfPopoverBase extends SkfElement {
+    static styles: CSSResultGroup;
+    static classMap: {};
+    isOpen: boolean;
+    placement: Placement;
+    variant: 'dropdown' | 'popup' | 'tooltip';
+    anchor?: string;
+    offset: number;
+    $anchor?: Element | HTMLElement | null;
+    arrow: boolean;
+    $popover: HTMLElement;
+    $arrow: HTMLElement;
+    /** @internal */
+    protected popoverController: PopoverController;
+    private _toggleOpen;
+    private _handleToggle;
+    handleToggleOpen: () => void;
+    handleAnchorChange: () => Promise<void>;
+    reposition: () => Promise<void>;
+    open: () => boolean;
+    close: () => boolean;
+    addEventListeners($element: HTMLElement | Element): void;
+    removeEventListeners($element: HTMLElement | Element): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,116 @@
+import { flip as b, offset as C, arrow as _, computePosition as E } from "@floating-ui/dom";
+import { SkfElement as P } from "../../components/skf-element.js";
+import { PopoverController as L } from "../../controllers/popover.controller.js";
+import { watch as $ } from "../../helpers/watch.js";
+import M from "../../../styles/component.styles.js";
+import { html as y, nothing as T } from "lit";
+import { property as a, state as h, query as u } from "lit/decorators.js";
+import { classMap as j } from "lit/directives/class-map.js";
+import { styles as k } from "./popover.styles.js";
+var B = Object.defineProperty, o = (l, t, i, c) => {
+  for (var r = void 0, n = l.length - 1, p; n >= 0; n--)
+    (p = l[n]) && (r = p(t, i, r) || r);
+  return r && B(t, i, r), r;
+}, s;
+const e = (s = class extends P {
+  constructor() {
+    super(...arguments), this.isOpen = !1, this.placement = "top", this.variant = "popup", this.offset = 0, this.arrow = !1, this.popoverController = new L(this), this._toggleOpen = (t) => this.isOpen = t ?? !this.isOpen, this._handleToggle = (t) => {
+      const i = t.newState === "open";
+      this.isOpen = i, this.emit(i ? "open" : "close");
+    }, this.handleToggleOpen = () => {
+      this.$popover.togglePopover(this.isOpen), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 150,
+        easing: "ease-out",
+        fill: "forwards"
+      });
+    }, this.handleAnchorChange = async () => {
+      if (!this.anchor) return;
+      await this.popoverController.stop(), this.$anchor && this.removeEventListeners(this.$anchor);
+      const t = this.getRootNode();
+      this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
+    }, this.reposition = async () => {
+      var n, p, f;
+      if (!this.$anchor) return;
+      const t = [b(), C(this.offset)];
+      this.arrow && t.push(_({ element: this.$arrow }));
+      const { x: i, y: c, middlewareData: r } = await E(this.$anchor, this.$popover, {
+        placement: this.placement,
+        middleware: t,
+        strategy: "fixed"
+      });
+      if (Object.assign(this.$popover.style, {
+        left: `${String(i)}px`,
+        top: `${String(c)}px`
+      }), this.arrow) {
+        const m = this.placement.split("-")[0], d = { top: "bottom", right: "left", bottom: "top", left: "right" }[m] ?? "", g = (n = r.flip) == null ? void 0 : n.index, v = (p = r.arrow) == null ? void 0 : p.x, w = (f = r.arrow) == null ? void 0 : f.y, O = typeof v == "number" ? `${String(v)}px` : "", S = typeof w == "number" ? `${String(w)}px` : "", x = {
+          bottom: 45,
+          right: 135,
+          top: 225,
+          left: 315
+        };
+        Object.assign(this.$arrow.style, {
+          top: S,
+          [this.placement.includes("left") ? "right" : "left"]: O,
+          [g ? m : d]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(x[d] + (g ? 180 : 0)).toString()}deg`
+        });
+      }
+    }, this.open = () => this._toggleOpen(!0), this.close = () => this._toggleOpen(!1);
+  }
+  addEventListeners(t) {
+    throw new Error(`Cannot add eventListeners for ${t.id}. Method not implemented.`);
+  }
+  removeEventListeners(t) {
+    throw new Error(`Cannot remove eventListeners for ${t.id}. Method not implemented.`);
+  }
+  render() {
+    return y`
+			<div
+				@toggle=${this._handleToggle}
+				class=${j({ popover: !0, ...s.classMap })}
+				id="popover"
+				popover
+			>
+				<slot></slot>
+				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : T}
+			</div>
+		`;
+  }
+}, s.styles = [M, k], s.classMap = {}, s);
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "isOpen");
+o([
+  a()
+], e.prototype, "placement");
+o([
+  a()
+], e.prototype, "variant");
+o([
+  a()
+], e.prototype, "anchor");
+o([
+  h()
+], e.prototype, "offset");
+o([
+  h()
+], e.prototype, "$anchor");
+o([
+  h()
+], e.prototype, "arrow");
+o([
+  u("#popover")
+], e.prototype, "$popover");
+o([
+  u("#arrow")
+], e.prototype, "$arrow");
+o([
+  $("isOpen", { afterUpdate: !0 })
+], e.prototype, "handleToggleOpen");
+o([
+  $("anchor")
+], e.prototype, "handleAnchorChange");
+let X = e;
+export {
+  X as SkfPopoverBase
+};

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

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

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

@@ -0,0 +1,29 @@
+import { css as o } from "lit";
+const e = o`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.popover {
+			background-color: var(--skf-bg-color-neutral-1);
+			border: none;
+			border-radius: var(--skf-border-radius-sm);
+			box-shadow: var(--skf-shadow-md);
+			opacity: 0;
+			overflow: visible;
+		}
+
+		.popover__arrow {
+			--_skf-popover-arrow-size: calc(6px * 0.7071);
+
+			background-color: var(--skf-bg-color-neutral-1);
+			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);
+			position: absolute;
+			rotate: 45deg;
+			z-index: -1;
+		}
+	}
+`;
+export {
+  e as styles
+};

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

@@ -1,5 +1,5 @@
-import '@components/icon/icon.js';
-import { SkfElement } from '@internal/components/skf-element.js';
+import '../../../components/icon/icon.js';
+import { SkfElement } from '../../components/skf-element.js';
 import type { SeverityFgColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 export declare class SkfHint extends SkfElement {

package/dist/internal/components/skf-element.js

@@ -17,43 +17,44 @@ const s = class s extends d {
   /** Custom event emitter helper function. Transmits user actions or component state change. Use composed=false for event that should not pierce shadowDom. */
   emit(e, t = {}) {
     if ([
-      "click",
-      "dblclick",
-      "mousedown",
-      "mouseup",
-      "mouseover",
-      "mouseout",
-      "mousemove",
-      "keydown",
-      "keyup",
-      "keypress",
-      "submit",
-      "focus",
       "blur",
-      "load",
-      "unload",
-      "resize",
-      "scroll",
+      "canplay",
       "change",
-      "input",
+      "click",
+      "close",
       "contextmenu",
+      "dblclick",
       "drag",
-      "dragstart",
       "dragend",
       "dragenter",
       "dragleave",
       "dragover",
+      "dragstart",
       "drop",
-      "touchstart",
-      "touchend",
-      "touchmove",
-      "play",
-      "pause",
       "ended",
-      "canplay",
+      "error",
+      "focus",
+      "input",
+      "keydown",
+      "keypress",
+      "keyup",
+      "load",
       "loadeddata",
+      "mousedown",
+      "mousemove",
+      "mouseout",
+      "mouseover",
+      "mouseup",
+      "pause",
+      "play",
       "progress",
-      "error"
+      "resize",
+      "scroll",
+      "submit",
+      "touchend",
+      "touchmove",
+      "touchstart",
+      "unload"
     ].includes(e)) {
       const u = {
         bubbles: !0,

package/dist/internal/controllers/popover.controller.d.ts

@@ -0,0 +1,16 @@
+import { SkfSelect } from '../../components/select/select.component.js';
+import type { SkfPopoverBase } from '../base-classes/popover/popover.base.js';
+import type { ReactiveController } from 'lit';
+type ControllerHost = SkfPopoverBase | SkfSelect;
+export declare class PopoverController implements ReactiveController {
+    host?: ControllerHost;
+    private cleanup;
+    private active;
+    private autoStart;
+    constructor(host: ControllerHost, autoStart?: boolean);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    start(): void;
+    stop(): Promise<void>;
+}
+export {};

package/dist/internal/controllers/popover.controller.js

@@ -0,0 +1,44 @@
+import "../../components/select/select.component.js";
+import { autoUpdate as n } from "@floating-ui/dom";
+class p {
+  constructor(t, o = !0) {
+    this.active = !1, this.autoStart = !0, this.host = t, t.addController(this), this.autoStart = o;
+  }
+  hostConnected() {
+    var t;
+    this.autoStart && ((t = this.host) == null || t.updateComplete.then(() => {
+      this.start();
+    }).catch((o) => {
+      console.error(o);
+    }));
+  }
+  hostDisconnected() {
+    this.stop().catch((t) => {
+      console.error(t);
+    });
+  }
+  start() {
+    var r, e;
+    const t = (r = this.host) == null ? void 0 : r.$anchor, o = (e = this.host) == null ? void 0 : e.$popover;
+    if (!t || !o) {
+      console.warn("PopoverController: anchor or popup not found");
+      return;
+    }
+    this.active || (this.cleanup = n(t, o, () => {
+      var s;
+      (s = this.host) == null || s.reposition().catch((i) => {
+        console.error(i);
+      });
+    }), this.active = !0);
+  }
+  async stop() {
+    return new Promise((t) => {
+      this.cleanup ? (this.cleanup(), this.cleanup = void 0, requestAnimationFrame(() => {
+        t();
+      })) : t(), this.active = !1;
+    });
+  }
+}
+export {
+  p as PopoverController
+};

package/dist/internal/helpers/hintSeverity.d.ts

@@ -1,2 +1,2 @@
-import type { FormFieldBaseProps } from '@internal/types/formField.js';
-export declare function hintSeverity(hostSeverity: FormFieldBaseProps['severity'], invalid: boolean): "error" | ("info" | "warning" | "success" | "alert") | undefined;
+import type { FormFieldBaseProps } from '../types/formField.js';
+export declare function hintSeverity(hostSeverity: FormFieldBaseProps['severity'], invalid: boolean): "error" | ("success" | "info" | "warning" | "alert") | undefined;

package/dist/internal/templates/asterisk.d.ts

@@ -1 +1 @@
-export declare function Asterisk(label?: string): import("lit").TemplateResult<1>;
+export declare function Asterisk(label?: string, className?: string): import("lit").TemplateResult<1>;

package/dist/internal/templates/asterisk.js

@@ -1,10 +1,11 @@
-import { html as i } from "lit";
-function a(s) {
-  return i`
-		<span class="visually-hidden">(${s ?? "Required"})</span>
-		<span aria-hidden="true" id="asterisk">*</span>
+import { html as r } from "lit";
+import { ifDefined as e } from "lit/directives/if-defined.js";
+function t(i, s) {
+  return r`
+		<span class="visually-hidden">(${i ?? "Required"})</span>
+		<span aria-hidden="true" class=${e(s)} id="asterisk">*</span>
 	`;
 }
 export {
-  a as Asterisk
+  t as Asterisk
 };

package/dist/react/index.d.ts

@@ -4,6 +4,7 @@ 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';
 export { default as SkfCollapse } from './skf-collapse/index.js';
+export { default as SkfDialog } from './skf-dialog/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
@@ -11,11 +12,16 @@ export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';
 export { default as SkfLoader } from './skf-loader/index.js';
 export { default as SkfLogo } from './skf-logo/index.js';
+export { default as SkfMenu } from './skf-menu/index.js';
+export { default as SkfMenuItem } from './skf-menu-item/index.js';
+export { default as SkfPopover } from './skf-popover/index.js';
 export { default as SkfProgress } from './skf-progress/index.js';
 export { default as SkfRadio } from './skf-radio/index.js';
 export { default as SkfSelect } from './skf-select/index.js';
 export { default as SkfSelectOption } from './skf-select-option/index.js';
 export { default as SkfSelectOptionGroup } from './skf-select-option-group/index.js';
+export { default as SkfStepper } from './skf-stepper/index.js';
+export { default as SkfStepperItem } from './skf-stepper-item/index.js';
 export { default as SkfSwitch } from './skf-switch/index.js';
 export { default as SkfTab } from './skf-tab/index.js';
 export { default as SkfTabGroup } from './skf-tab-group/index.js';
@@ -24,3 +30,4 @@ export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
 export { default as SkfToast } from './skf-toast/index.js';
 export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';
+export { default as SkfTooltip } from './skf-tooltip/index.js';

package/dist/react/index.js

@@ -4,6 +4,7 @@ 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';
 export { default as SkfCollapse } from './skf-collapse/index.js';
+export { default as SkfDialog } from './skf-dialog/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
@@ -11,11 +12,16 @@ export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';
 export { default as SkfLoader } from './skf-loader/index.js';
 export { default as SkfLogo } from './skf-logo/index.js';
+export { default as SkfMenu } from './skf-menu/index.js';
+export { default as SkfMenuItem } from './skf-menu-item/index.js';
+export { default as SkfPopover } from './skf-popover/index.js';
 export { default as SkfProgress } from './skf-progress/index.js';
 export { default as SkfRadio } from './skf-radio/index.js';
 export { default as SkfSelect } from './skf-select/index.js';
 export { default as SkfSelectOption } from './skf-select-option/index.js';
 export { default as SkfSelectOptionGroup } from './skf-select-option-group/index.js';
+export { default as SkfStepper } from './skf-stepper/index.js';
+export { default as SkfStepperItem } from './skf-stepper-item/index.js';
 export { default as SkfSwitch } from './skf-switch/index.js';
 export { default as SkfTab } from './skf-tab/index.js';
 export { default as SkfTabGroup } from './skf-tab-group/index.js';
@@ -24,3 +30,4 @@ export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
 export { default as SkfToast } from './skf-toast/index.js';
 export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';
+export { default as SkfTooltip } from './skf-tooltip/index.js';

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

@@ -0,0 +1,15 @@
+import Component from '../../components/dialog/dialog.js';
+import { type SkfDialog } from '../../components/dialog/dialog.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSkfDialogOpen: EventName<Event & {
+        target: SkfDialog;
+    }>;
+    onSkfDialogClose: EventName<Event & {
+        target: SkfDialog;
+    }>;
+    onClose: EventName<Event & {
+        target: SkfDialog;
+    }>;
+}>;
+export default reactWrapper;

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/dialog/dialog.js';
+import {} from '../../components/dialog/dialog.js';
+import {} from '@lit/react';
+const tagName = 'skf-dialog';
+Component.define('skf-dialog');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSkfDialogOpen: 'skf-dialog-open',
+        onSkfDialogClose: 'skf-dialog-close',
+        onClose: 'close',
+    },
+    displayName: 'SkfDialog',
+});
+export default reactWrapper;

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

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