@skf-design-system/ui-components 0.0.1-beta.4 → 1.0.0-alpha.28

package/dist/index.d.ts

@@ -11,7 +11,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

@@ -11,45 +11,69 @@ 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 s } from "./components/card/card.component.js";
-import { SkfCheckbox as w } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as D } from "./components/collapse/collapse.component.js";
-import { SkfDivider as R } from "./components/divider/divider.component.js";
-import { SkfHeading as q } from "./components/heading/heading.component.js";
-import { SkfIcon as z } from "./components/icon/icon.component.js";
-import { SkfInput as F } from "./components/input/input.component.js";
-import { SkfLink as J } from "./components/link/link.component.js";
-import { SkfLoader as M } from "./components/loader/loader.component.js";
-import { SkfLogo as O } from "./components/logo/logo.component.js";
-import { SkfRadio as Q } from "./components/radio/radio.component.js";
-import { SkfSwitch as V } from "./components/switch/switch.component.js";
-import { SkfTag as X } from "./components/tag/tag.component.js";
-import { SkfTextArea as Z } from "./components/textarea/textarea.component.js";
-import { SkfAccordionItem as $ } from "./components/accordion/accordion-item.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";
 export {
-  I as SkfAccordion,
-  $ as SkfAccordionItem,
-  h as SkfAlert,
-  T as SkfButton,
-  s as SkfCard,
-  w as SkfCheckbox,
-  D as SkfCollapse,
-  R as SkfDivider,
-  q as SkfHeading,
-  z as SkfIcon,
-  F as SkfInput,
-  J as SkfLink,
-  M as SkfLoader,
-  O as SkfLogo,
-  Q as SkfRadio,
-  V as SkfSwitch,
-  X as SkfTag,
-  Z as SkfTextArea
+  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
 };

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

@@ -1,4 +1,9 @@
 import { SkfElement } from './skf-element.js';
+interface OptionsOverride {
+    bubbles?: boolean;
+    composed?: boolean;
+    cancelable?: boolean;
+}
 /**
  * Then in your form component:
  *
@@ -17,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;
@@ -46,5 +52,17 @@ export declare class FormBase extends SkfElement {
     /** emits a change event, triggers native UI popup and returns false if the form is invalid */
     reportValidity(): boolean;
     formDisabledCallback(disabled: boolean): void;
-    emitEvent(event: 'change' | 'input' | 'invalid' | 'reset'): boolean;
+    /**
+     * Dispatches a synthetic/custom event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
+     *
+     * Options object:
+     *   bubbles: true: This option allows the event to bubble up through the DOM.
+     *   composed: true: This option allows the event to pierce the shadow DOM boundary.
+     *   cancelable: false: This option indicates that the event cannot be canceled.
+     *
+     * @param event
+     * @returns
+     */
+    emitEvent(event: string, optionsOverride?: OptionsOverride): boolean;
 }
+export {};

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 = (n, t, i, l) => {
-  for (var e = _(t, i), a = n.length - 1, o; a >= 0; a--)
-    (o = n[a]) && (e = o(t, i, e) || e);
-  return e && p(t, i, e), e;
+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 s = class s extends u {
+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 s = class s extends u {
   get willValidate() {
     return this._internals.willValidate;
   }
-  setValidity(t, i, l) {
-    this._internals.setValidity(t, i, l);
+  setValidity(t, e, r) {
+    this._internals.setValidity(t, e, r);
   }
   setFormValue(t) {
     this._internals.setFormValue(t);
@@ -76,20 +76,32 @@ const s = class s extends u {
   formDisabledCallback(t) {
     this.disabled = t;
   }
-  emitEvent(t) {
-    return this.dispatchEvent(
-      new Event(t, { bubbles: !0, composed: !0, cancelable: !1 })
-    );
+  /**
+   * Dispatches a synthetic/custom event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
+   *
+   * Options object:
+   *   bubbles: true: This option allows the event to bubble up through the DOM.
+   *   composed: true: This option allows the event to pierce the shadow DOM boundary.
+   *   cancelable: false: This option indicates that the event cannot be canceled.
+   *
+   * @param event
+   * @returns
+   */
+  emitEvent(t, e = {}) {
+    const r = { bubbles: !0, composed: !0, cancelable: !0 };
+    return t.startsWith("skf-") ? this.dispatchEvent(
+      new CustomEvent(t, { detail: null, ...r, ...e })
+    ) : this.dispatchEvent(new Event(t, { ...r, ...e }));
   }
 };
-s.formAssociated = !0, s.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
-let r = s;
+a.formAssociated = !0, a.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
+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.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.d.ts

@@ -1,10 +1,10 @@
-import { LitElement } from 'lit';
+import { CSSResult, LitElement } from 'lit';
 export declare class SkfElement extends LitElement {
     static define(name: string, elementConstructor?: CustomElementConstructor, options?: ElementDefinitionOptions): void;
     static dependencies: Record<string, typeof SkfElement>;
     constructor();
-    /** Custom event emitter helper function. Transmits user actions or component state change. */
+    /** Custom event emitter helper function. Transmits user actions or component state change. Use composed=false for event that should not pierce shadowDom. */
     emit(name: string, options?: CustomEventInit): Event;
-    /** Slot change listener helper function. Listens for change in a slot emitted by the component. */
-    _initiateSlotChangeObserver(callback?: () => void, name?: string): void;
+    /** This let's a component set styles in the light DOM. Scope css selectors with custom tag name to just target the slot. */
+    protected _setSlotStyles(slottedStyles: CSSResult): void;
 }

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

@@ -1,9 +1,9 @@
 import { LitElement as d } from "lit";
-const n = class n extends d {
-  static define(e, t = this, o = {}) {
+const s = class s extends d {
+  static define(e, t = this, n = {}) {
     if (!customElements.get(e)) {
       customElements.define(e, class extends t {
-      }, o);
+      }, n);
       return;
     }
   }
@@ -14,7 +14,7 @@ const n = class n extends d {
       }
     );
   }
-  /** Custom event emitter helper function. Transmits user actions or component state change. */
+  /** 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",
@@ -55,35 +55,31 @@ const n = class n extends d {
       "progress",
       "error"
     ].includes(e)) {
-      const i = {
+      const u = {
         bubbles: !0,
-        cancelable: !1,
+        cancelable: !0,
         composed: !0,
         ...t
       };
-      return this.dispatchEvent(new Event(e, i)), new Event(e, t);
+      return this.dispatchEvent(new Event(e, u)), new Event(e, t);
     }
     const r = new CustomEvent(e, {
       bubbles: !0,
-      cancelable: !1,
+      cancelable: !0,
       composed: !0,
       detail: {},
       ...t
     });
     return this.dispatchEvent(r), r;
   }
-  /** Slot change listener helper function. Listens for change in a slot emitted by the component. */
-  _initiateSlotChangeObserver(e, t = "") {
-    if (!this.shadowRoot) return;
-    e ?? (e = () => {
-      console.log("slot updated");
-    });
-    const o = t ? `slot[name="${t}"]` : "slot", s = this.shadowRoot.querySelector(o);
-    s == null || s.addEventListener("slotchange", e);
+  /** This let's a component set styles in the light DOM. Scope css selectors with custom tag name to just target the slot. */
+  _setSlotStyles(e) {
+    const t = new CSSStyleSheet();
+    t.replaceSync(e.cssText), document.adoptedStyleSheets = [...document.adoptedStyleSheets, t];
   }
 };
-n.dependencies = {};
-let c = n;
+s.dependencies = {};
+let o = s;
 export {
-  c as SkfElement
+  o as SkfElement
 };

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

@@ -0,0 +1,4 @@
+export declare const arrayDiff: <T>(a: T[], b: T[]) => T[];
+export declare const arrayIntersect: <T>(a: T[], b: T[]) => T[];
+export declare const arraySymDiff: <T>(a: T[], b: T[]) => T[];
+export declare const arrayUnion: <T>(a: T[], b: T[]) => T[];

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

@@ -0,0 +1,2 @@
+/** Recursively traverses a DOM tree starting from a given node, collecting all elements that match a specified tag name returning the result in an array. */
+export declare function findMatchingTags(node: Node, tagName: string): unknown[];

package/dist/internal/helpers/findMatchingTags.js

@@ -0,0 +1,12 @@
+function s(o, n) {
+  const t = [];
+  function a(e) {
+    e.nodeType === Node.ELEMENT_NODE && e.tagName.toLowerCase() === n.toLowerCase() && t.push(e), e.childNodes.forEach((r) => {
+      a(r);
+    });
+  }
+  return a(o), t;
+}
+export {
+  s as findMatchingTags
+};

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

@@ -0,0 +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;

package/dist/internal/helpers/hintSeverity.js

@@ -0,0 +1,6 @@
+function t(r, e) {
+  return e ? "error" : r;
+}
+export {
+  t as hintSeverity
+};

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

@@ -0,0 +1,28 @@
+interface ErrorMapBase {
+    assert?: unknown;
+    type?: 'error' | 'warning' | 'info';
+}
+interface ErrorMapWithReason extends ErrorMapBase {
+    reason: keyof typeof errorMap;
+    replaceStrings: string[];
+    customMessage?: never;
+}
+interface ErrorMapWithCustomMessage extends ErrorMapBase {
+    customMessage: string;
+    reason?: never;
+    replaceStrings?: never;
+}
+type ErrorMap = ErrorMapWithReason | ErrorMapWithCustomMessage;
+declare const errorMap: {
+    'no-parent': string;
+    'no-children': string;
+    'attribute-mismatch': string;
+};
+/**
+ * assert = check something exist/is truish. Also send in !this.debug to only run in debug mode.
+ * reason = key of error map,
+ * type = console warning, stopping error or info,
+ * replaceString = dynamic text parts
+ */
+export declare const raiseError: ({ assert, reason, type, replaceStrings, customMessage, }: ErrorMap) => void | never;
+export {};

package/dist/internal/helpers/raiseError.js

@@ -0,0 +1,29 @@
+const a = {
+  "no-parent": "{0} tag needs to be a nested child of a skf-select tag.",
+  "no-children": "{0} tag needs to have {1} tags as children.",
+  "attribute-mismatch": "{0} tag needs to have {1} attribute set {2}."
+}, f = ({
+  assert: n = !1,
+  reason: e,
+  type: o = "error",
+  replaceStrings: c,
+  customMessage: r
+}) => {
+  if (n) return;
+  switch (o) {
+    case "error":
+      throw new Error(r ?? t(a[e], c));
+    case "warning":
+      console.warn(r ?? t(a[e]));
+      break;
+    case "info":
+      console.info(r ?? t(a[e]));
+      break;
+  }
+  function t(i, s = []) {
+    return s.reduce((l, d, h) => l.replace(`{${String(h)}}`, d), i);
+  }
+};
+export {
+  f as raiseError
+};

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,8 +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 {};
+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/react/index.d.ts

@@ -11,7 +11,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 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

@@ -11,7 +11,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 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;