@skf-design-system/ui-components 1.0.0-beta.4 → 1.0.0-beta.7

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,10 +12,15 @@ 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 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 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';
+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';

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,54 +12,71 @@ import "./components/input/input.js";
 import "./components/link/link.js";
 import "./components/loader/loader.js";
 import "./components/logo/logo.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/switch/switch.js";
+import "./components/tab-group/tab-group.js";
+import "./components/tab-panel/tab-panel.js";
+import "./components/tab/tab.js";
 import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
-import { SkfAccordion as I } from "./components/accordion/accordion.component.js";
-import { SkfAlert as h } from "./components/alert/alert.component.js";
-import { SkfButton as T } from "./components/button/button.component.js";
-import { SkfCard as v } from "./components/card/card.component.js";
-import { SkfCheckbox as B } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as H } from "./components/collapse/collapse.component.js";
-import { SkfDivider as j } from "./components/divider/divider.component.js";
-import { SkfHeading as y } from "./components/heading/heading.component.js";
-import { SkfIcon as E } from "./components/icon/icon.component.js";
-import { SkfInput as J } from "./components/input/input.component.js";
-import { SkfLink as M } from "./components/link/link.component.js";
-import { SkfLoader as P } from "./components/loader/loader.component.js";
-import { SkfLogo as U } from "./components/logo/logo.component.js";
-import { SkfRadio as W } from "./components/radio/radio.component.js";
-import { SkfSelectOptionGroup as Y } from "./components/select-option-group/select-option-group.component.js";
-import { SkfSelectOption as _ } from "./components/select-option/select-option.component.js";
-import { SkfSelect as oo } from "./components/select/select.component.js";
-import { SkfSwitch as to } from "./components/switch/switch.component.js";
-import { SkfTag as fo } from "./components/tag/tag.component.js";
-import { SkfTextArea as eo } from "./components/textarea/textarea.component.js";
-import { SkfAccordionItem as So } from "./components/accordion/accordion-item.js";
+import "./components/toast/toast.js";
+import { SkfAccordion as D } 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 R } from "./components/card/card.component.js";
+import { SkfCheckbox as q } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as z } from "./components/collapse/collapse.component.js";
+import { SkfDialog as F } from "./components/dialog/dialog.component.js";
+import { SkfDivider as K } from "./components/divider/divider.component.js";
+import { SkfHeading as N } from "./components/heading/heading.component.js";
+import { SkfIcon as U } from "./components/icon/icon.component.js";
+import { SkfInput as W } from "./components/input/input.component.js";
+import { SkfLink as Y } from "./components/link/link.component.js";
+import { SkfLoader as _ } from "./components/loader/loader.component.js";
+import { SkfLogo as oo } from "./components/logo/logo.component.js";
+import { SkfProgress as to } from "./components/progress/progress.component.js";
+import { SkfRadio as fo } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as eo } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as So } from "./components/select-option/select-option.component.js";
+import { SkfSelect as xo } from "./components/select/select.component.js";
+import { SkfSwitch as no } from "./components/switch/switch.component.js";
+import { SkfTabGroup as lo } from "./components/tab-group/tab-group.component.js";
+import { SkfTabPanel as To } from "./components/tab-panel/tab-panel.component.js";
+import { SkfTab as bo } from "./components/tab/tab.component.js";
+import { SkfTag as Ao } from "./components/tag/tag.component.js";
+import { SkfTextArea as Oo } from "./components/textarea/textarea.component.js";
+import { SkfToast as Io } from "./components/toast/toast.component.js";
+import { SkfAccordionItem as ho } from "./components/accordion/accordion-item.js";
 export {
-  I as SkfAccordion,
-  So as SkfAccordionItem,
-  h as SkfAlert,
-  T as SkfButton,
-  v as SkfCard,
-  B as SkfCheckbox,
-  H as SkfCollapse,
-  j as SkfDivider,
-  y as SkfHeading,
-  E as SkfIcon,
-  J as SkfInput,
-  M as SkfLink,
-  P as SkfLoader,
-  U as SkfLogo,
-  _ as SkfOption,
-  Y as SkfOptionGroup,
-  W as SkfRadio,
-  oo as SkfSelect,
-  to as SkfSwitch,
-  fo as SkfTag,
-  eo as SkfTextArea
+  D as SkfAccordion,
+  ho as SkfAccordionItem,
+  v as SkfAlert,
+  B as SkfButton,
+  R as SkfCard,
+  q as SkfCheckbox,
+  z as SkfCollapse,
+  F as SkfDialog,
+  K as SkfDivider,
+  N as SkfHeading,
+  U as SkfIcon,
+  W as SkfInput,
+  Y as SkfLink,
+  _ as SkfLoader,
+  oo as SkfLogo,
+  So as SkfOption,
+  eo as SkfOptionGroup,
+  to as SkfProgress,
+  fo as SkfRadio,
+  xo as SkfSelect,
+  no as SkfSwitch,
+  bo as SkfTab,
+  lo as SkfTabGoup,
+  To as SkfTabPanel,
+  Ao as SkfTag,
+  Oo as SkfTextArea,
+  Io as SkfToast
 };

package/dist/internal/components/formBase.d.ts

@@ -22,6 +22,7 @@ export declare class FormBase extends SkfElement {
     protected customErrorDisplay: boolean;
     protected pristine: boolean;
     protected validateOnChange: boolean;
+    protected withFallback: (message?: string | null) => string;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;

package/dist/internal/components/formBase.js

@@ -1,14 +1,14 @@
 import { LitElement as c } from "lit";
 import { property as d } from "lit/decorators.js";
 import { SkfElement as u } from "./skf-element.js";
-var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, h = (l, t, e, s) => {
+var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, h = (l, t, e, r) => {
   for (var i = _(t, e), n = l.length - 1, o; n >= 0; n--)
     (o = l[n]) && (i = o(t, e, i) || i);
   return i && p(t, e, i), i;
 };
 const a = class a extends u {
   constructor() {
-    super(), this._disabled = !1, this._pristine = !0, this.validationError = "", this.customErrorDisplay = !1, this.pristine = !0, this.validateOnChange = !0, this._dispatchResetEvent = () => {
+    super(), this._disabled = !1, this._pristine = !0, this.validationError = "", this.customErrorDisplay = !1, this.pristine = !0, this.validateOnChange = !0, this.withFallback = (t) => String(t).trim() || "A unspecified form validation error occured.", this._dispatchResetEvent = () => {
       this.dispatchEvent(new Event("reset", { bubbles: !0, composed: !0, cancelable: !1 }));
     }, this._internals = this.attachInternals(), this._required = !1;
   }
@@ -59,8 +59,8 @@ const a = class a extends u {
   get willValidate() {
     return this._internals.willValidate;
   }
-  setValidity(t, e, s) {
-    this._internals.setValidity(t, e, s);
+  setValidity(t, e, r) {
+    this._internals.setValidity(t, e, r);
   }
   setFormValue(t) {
     this._internals.setFormValue(t);
@@ -88,20 +88,20 @@ const a = class a extends u {
    * @returns
    */
   emitEvent(t, e = {}) {
-    const s = { bubbles: !0, composed: !0, cancelable: !0 };
+    const r = { bubbles: !0, composed: !0, cancelable: !0 };
     return t.startsWith("skf-") ? this.dispatchEvent(
-      new CustomEvent(t, { detail: null, ...s, ...e })
-    ) : this.dispatchEvent(new Event(t, { ...s, ...e }));
+      new CustomEvent(t, { detail: null, ...r, ...e })
+    ) : this.dispatchEvent(new Event(t, { ...r, ...e }));
   }
 };
 a.formAssociated = !0, a.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
-let r = a;
+let s = a;
 h([
   d({ type: Boolean })
-], r.prototype, "required");
+], s.prototype, "required");
 h([
   d({ type: Boolean, attribute: "native-validation" })
-], r.prototype, "nativeValidation");
+], s.prototype, "nativeValidation");
 export {
-  r as FormBase
+  s as FormBase
 };

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/hint/hint.component.js

@@ -4,26 +4,28 @@ import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
 import v from "../../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as y } from "lit/decorators.js";
-import a from "./hint.styles.js";
-var c = Object.defineProperty, h = (s, i, m, d) => {
+import 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 && c(i, m, r), r;
+  return r && a(i, m, r), r;
 };
 const o = class o extends l {
   render() {
     return f`
-			${this.severity && f`
-				<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
-				</skf-icon>
-			`}
-			<slot></slot>
+			<div id="root">
+				${this.severity && f`
+					<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
+					</skf-icon>
+				`}
+				<slot></slot>
+			</div>
 		`;
   }
 };
-o.styles = [v, a];
+o.styles = [v, d];
 let e = o;
-h([
+c([
   y()
 ], e.prototype, "severity");
 export {

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

@@ -1,22 +1,38 @@
-import { css as s } from "lit";
-const o = s`
-	:host {
+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);
-	}
 
-	:host([severity='error']) {
-		--_skf-hint-color: var(--skf-severity-fg-color-error);
-	}
+		:host-context(:disabled) & {
+			color: inherit;
+		}
+
+		:host([severity='alert']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-alert);
+		}
+
+		:host([severity='error']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-error);
+		}
+
+		:host([severity='info']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-info);
+		}
+
+		:host([severity='success']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-success);
+		}
 
-	:host([severity='success']) {
-		--_skf-hint-color: var(--skf-severity-fg-color-success);
+		:host([severity='warning']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-warning);
+		}
 	}
 `;
 export {
-  o as default
+  s as default
 };

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/helpers/hintSeverity.d.ts

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

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

@@ -0,0 +1,27 @@
+import type { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+    afterUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/dist/internal/helpers/watch.js

@@ -0,0 +1,28 @@
+function o(f, U) {
+  const e = {
+    waitUntilFirstUpdate: !1,
+    afterUpdate: !1,
+    ...U
+  };
+  return (l, c) => {
+    const { update: d } = l, h = Array.isArray(f) ? f : [f];
+    l.update = function(i) {
+      e.afterUpdate || h.forEach((n) => {
+        const t = n;
+        if (i.has(t)) {
+          const a = i.get(t), s = this[t];
+          a !== s && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s);
+        }
+      }), d.call(this, i), e.afterUpdate && h.forEach((n) => {
+        const t = n;
+        if (i.has(t)) {
+          const a = i.get(t), s = this[t];
+          a !== s && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s);
+        }
+      });
+    };
+  };
+}
+export {
+  o as watch
+};

package/dist/internal/storybook/shadowRootTraverser.d.ts

@@ -1,10 +1,18 @@
-import { queries, within } from '@storybook/test';
-type WithinShadowRootPromise = Promise<ReturnType<typeof within<typeof queries>>>;
 /**
- * Workaround solution for testing shadow DOM elements
- * @see {@link https://github.com/storybookjs/testing-library/issues/24#issuecomment-1593709872|GitHub}
+ * Workaround solution to get shadow DOM elements. Throws an error if the element is not found.
+ *
+ * @usage getWithinShadowRoot(canvasElement, 'my-custom-element', 'button')
  */
-export declare function withinShadowRoot(customElement: HTMLElement, selector: string): WithinShadowRootPromise;
-export declare const getElementWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => Element;
-export declare const findElementWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => Element | undefined;
-export {};
+export declare const getWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => {
+    element: HTMLElement;
+    shadowRoot: HTMLElement;
+};
+/**
+ * Workaround solution to get shadow DOM elements. Returns undefined if the element is not found.
+ *
+ * @usage findWithinShadowRoot(canvasElement, 'my-custom-element', 'button')
+ */
+export declare const findWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => {
+    element: HTMLElement;
+    shadowRoot: HTMLElement;
+} | 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

@@ -1,20 +1,27 @@
-export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfAccordion } from './skf-accordion/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 SkfAlert } from './skf-alert/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
-export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfButton } from './skf-button/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
 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 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 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';
+export { default as SkfTabPanel } from './skf-tab-panel/index.js';
 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';

package/dist/react/index.js

@@ -1,20 +1,27 @@
-export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfAccordion } from './skf-accordion/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 SkfAlert } from './skf-alert/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
-export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfButton } from './skf-button/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
 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 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 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';
+export { default as SkfTabPanel } from './skf-tab-panel/index.js';
 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';

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

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

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

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

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-progress/index.d.ts

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