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

package/dist/index.d.ts

@@ -12,6 +12,9 @@ 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 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 SkfTag } from './components/tag/tag.js';
 export { default as SkfTextArea } from './components/textarea/textarea.js';

package/dist/index.js

@@ -12,44 +12,53 @@ import "./components/link/link.js";
 import "./components/loader/loader.js";
 import "./components/logo/logo.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/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 { 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";
 export {
   I as SkfAccordion,
-  $ as SkfAccordionItem,
+  So 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
+  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
 };

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:
  *
@@ -46,5 +51,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,12 +1,12 @@
 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, s) => {
+  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 = () => {
       this.dispatchEvent(new Event("reset", { bubbles: !0, composed: !0, cancelable: !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, s) {
+    this._internals.setValidity(t, e, s);
   }
   setFormValue(t) {
     this._internals.setFormValue(t);
@@ -76,14 +76,26 @@ 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 s = { 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 }));
   }
 };
-s.formAssociated = !0, s.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
-let r = s;
+a.formAssociated = !0, a.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
+let r = a;
 h([
   d({ type: Boolean })
 ], r.prototype, "required");

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/storybook/shadowRootTraverser.d.ts

@@ -5,4 +5,6 @@ type WithinShadowRootPromise = Promise<ReturnType<typeof within<typeof queries>>
  * @see {@link https://github.com/storybookjs/testing-library/issues/24#issuecomment-1593709872|GitHub}
  */
 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 {};

package/dist/react/index.d.ts

@@ -1,17 +1,20 @@
-export { default as SkfAccordion } from './skf-accordion/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
-export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
+export { default as SkfAccordion } from './skf-accordion/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/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 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 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 SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';

package/dist/react/index.js

@@ -1,17 +1,20 @@
-export { default as SkfAccordion } from './skf-accordion/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
-export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
+export { default as SkfAccordion } from './skf-accordion/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/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 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 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 SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';

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

@@ -0,0 +1,21 @@
+import Component from '../../components/select/select.js';
+import { type SkfSelect } from '../../components/select/select.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<Event & {
+        target: SkfSelect;
+    }>;
+    onInvalid: EventName<Event & {
+        target: SkfSelect;
+    }>;
+    onReset: EventName<Event & {
+        target: SkfSelect;
+    }>;
+    onSkfSelectDropdown: EventName<Event & {
+        target: SkfSelect;
+    }>;
+    onSkfSelectOptionSelect: EventName<Event & {
+        target: SkfSelect;
+    }>;
+}>;
+export default reactWrapper;

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/select/select.js';
+import {} from '../../components/select/select.js';
+import {} from '@lit/react';
+const tagName = 'skf-select';
+Component.define('skf-select');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onInvalid: 'invalid',
+        onReset: 'reset',
+        onSkfSelectDropdown: 'skf-select:dropdown',
+        onSkfSelectOptionSelect: 'skf-select-option:select',
+    },
+    displayName: 'SkfSelect',
+});
+export default reactWrapper;

package/dist/react/skf-select-option/index.d.ts

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

package/dist/react/skf-select-option/index.js

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

package/dist/react/skf-select-option-group/index.d.ts

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

package/dist/react/skf-select-option-group/index.js

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

package/dist/styles/form-field.styles.js

@@ -31,8 +31,8 @@ const i = e`
 		}
 
 		/**
-	* Wwrapper for the input-element that controls the appearance
-	*/
+		 * Wwrapper for the input-element that controls the appearance
+		 */
 		#input {
 			background-color: var(--_skf-field-input-bg-color, var(--skf-bg-color-neutral-1));
 			border: var(--skf-border-width-sm) solid
@@ -91,8 +91,8 @@ const i = e`
 		}
 
 		/**
-	* Wrapper element for handling layout of the leading and trailing content
-	*/
+		 * Wrapper element for handling layout of the leading and trailing content
+		 */
 		#affix {
 			align-items: center;
 			display: flex;
@@ -144,8 +144,8 @@ const i = e`
 		}
 
 		/**
-	* Action related styles
-	*/
+		 * Action related styles
+		 */
 		#action {
 			display: flex;
 			flex-direction: column;