@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.10

package/dist/internal/components/formBase.js

@@ -1,9 +1,9 @@
 import { LitElement as c } from "lit";
-import { property as d } from "lit/decorators.js";
+import { property as l } from "lit/decorators.js";
 import { SkfElement as u } from "./skf-element.js";
-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);
+var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (d, t, e, r) => {
+  for (var i = _(t, e), n = d.length - 1, h; n >= 0; n--)
+    (h = d[n]) && (i = h(t, e, i) || i);
   return i && p(t, e, i), i;
 };
 const a = class a extends u {
@@ -18,17 +18,6 @@ const a = class a extends u {
   disconnectedCallback() {
     super.disconnectedCallback(), this._internals.form && this._internals.form.removeEventListener("reset", this._dispatchResetEvent);
   }
-  // @property()
-  // set autocomplete(value: string) {
-  // 	if (value) {
-  // 		this.autocomplete = value;
-  // 		this._internals.ariaAutoComplete = value;
-  // 	}
-  // }
-  // get autocomplete() {
-  // 	return this.autocomplete;
-  // }
-  /** If true, sets disabled state */
   set disabled(t) {
     this._disabled = t, this._internals.ariaDisabled = String(t);
   }
@@ -96,11 +85,14 @@ const a = class a extends u {
 };
 a.formAssociated = !0, a.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
 let s = a;
-h([
-  d({ type: Boolean })
+o([
+  l({ type: Boolean })
+], s.prototype, "disabled");
+o([
+  l({ type: Boolean })
 ], s.prototype, "required");
-h([
-  d({ type: Boolean, attribute: "native-validation" })
+o([
+  l({ type: Boolean, attribute: "native-validation" })
 ], s.prototype, "nativeValidation");
 export {
   s as FormBase

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

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

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

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

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

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

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

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

package/dist/internal/components/skf-element.d.ts

@@ -1,10 +1,8 @@
-import { CSSResult, LitElement } from 'lit';
+import { 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. Use composed=false for event that should not pierce shadowDom. */
     emit(name: string, options?: CustomEventInit): Event;
-    /** 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 s = class s extends d {
-  static define(e, t = this, n = {}) {
+  static define(e, t = this, r = {}) {
     if (!customElements.get(e)) {
       customElements.define(e, class extends t {
-      }, n);
+      }, r);
       return;
     }
   }
@@ -64,19 +64,14 @@ const s = class s extends d {
       };
       return this.dispatchEvent(new Event(e, u)), new Event(e, t);
     }
-    const r = new CustomEvent(e, {
+    const n = new CustomEvent(e, {
       bubbles: !0,
       cancelable: !0,
       composed: !0,
       detail: {},
       ...t
     });
-    return this.dispatchEvent(r), r;
-  }
-  /** 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];
+    return this.dispatchEvent(n), n;
   }
 };
 s.dependencies = {};

package/dist/internal/constants/iconSeverity.d.ts

@@ -1,4 +1,5 @@
-import type { Icon, SeverityFgColor } from '@skf-design-system/ui-assets';
-type IconSeverity = Readonly<Record<SeverityFgColor, Icon>>;
+import type { Severity } from '../types.js';
+import type { Icon } from '@skf-design-system/ui-assets';
+type IconSeverity = Readonly<Record<Severity, Icon>>;
 export declare const ICON_SEVERITY: IconSeverity;
 export {};

package/dist/internal/constants/iconSeverity.js

@@ -1,10 +1,9 @@
-const n = Object.freeze({
-  alert: "warningDiamond",
+const n = {
   error: "danger",
   info: "info",
   success: "checkCircle",
   warning: "warningDiamond"
-});
+};
 export {
   n as ICON_SEVERITY
 };

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

@@ -7,9 +7,11 @@ interface ControllerHostProps {
     $anchor?: Element | HTMLElement | null;
     $popover?: Element | HTMLElement | null;
     reposition: () => Promise<void>;
+    _toggleOpen: (open: boolean) => void;
 }
 export declare class PopoverController implements ReactiveController {
     host?: ReactiveControllerHost & Partial<ControllerHostProps>;
+    intersectionObserver: IntersectionObserver | undefined;
     private cleanup;
     private active;
     private autoStart;

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

@@ -1,15 +1,14 @@
-import { autoUpdate as h } from "@floating-ui/dom";
-class c {
+import { autoUpdate as e } from "@floating-ui/dom";
+class h {
   constructor(t, o = !0) {
     this.active = !1, this.autoStart = !0, (this.host = t).addController(this), this.autoStart = o;
   }
   hostConnected() {
-    var t;
-    this.autoStart && ((t = this.host) == null || t.updateComplete.then(() => {
+    this.autoStart && this.host?.updateComplete.then(() => {
       this.start();
-    }).catch((o) => {
-      console.error(o);
-    }));
+    }).catch((t) => {
+      console.error(t);
+    });
   }
   hostDisconnected() {
     this.stop().catch((t) => {
@@ -17,12 +16,10 @@ class c {
     });
   }
   start() {
-    var s, e;
-    const t = (s = this.host) == null ? void 0 : s.$anchor, o = (e = this.host) == null ? void 0 : e.$popover;
-    !t || !o || this.active || (o.popover = "manual", this.cleanup = h(t, o, () => {
-      var r;
-      (r = this.host) != null && r.reposition && this.host.reposition().catch((i) => {
-        console.error(i);
+    const t = this.host?.$anchor, o = this.host?.$popover;
+    !t || !o || this.active || (o.popover = "manual", this.cleanup = e(t, o, () => {
+      this.host?.reposition && this.host.reposition().catch((s) => {
+        console.error(s);
       });
     }), this.active = !0);
   }
@@ -35,5 +32,5 @@ class c {
   }
 }
 export {
-  c as PopoverController
+  h as PopoverController
 };

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

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

package/dist/internal/helpers/hintSeverity.js

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

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

@@ -0,0 +1,14 @@
+/**
+ * CSS pseudo class state helper, handles state management within scope of set states (stateOptions),
+ * allowing for easy state manipulation and retrieval within one or multiple state scopes.
+ * Helper currently assumes only one state within scope is allowed at a time.
+ */
+export declare function stateMap<T extends string>(states: CustomStateSet, options: T | T[]): {
+    clear: () => void;
+    get: () => T | undefined;
+    set: (state?: T | boolean) => void;
+    has: (state?: T) => boolean;
+    add: (state: T) => void;
+    remove: (state?: T) => void;
+    toggle: (state?: T | boolean) => void;
+};

package/dist/internal/helpers/stateMap.js

@@ -0,0 +1,68 @@
+function w(o, u) {
+  const r = Array.isArray(u) ? u : [u];
+  function f() {
+    r.forEach((n) => {
+      o.delete(n);
+    });
+  }
+  function l() {
+    const n = [];
+    if (r.forEach((e) => {
+      o.has(e) && n.push(e);
+    }), n.length !== 0)
+      return n.length > 1 && (console.warn("Multiple states found, returning first state"), console.warn(n)), n[0];
+  }
+  function d(n) {
+    if (typeof n == "boolean" || !n)
+      if (n)
+        n = r[0];
+      else {
+        f();
+        return;
+      }
+    if (typeof n == "boolean") throw new Error("State must be a string from here on out");
+    r.forEach((e) => {
+      o.has(e) && o.delete(e);
+    }), o.add(n);
+  }
+  function c(n) {
+    if (n ??= r[0], typeof n == "boolean") {
+      n ? o.add(r[0]) : f();
+      return;
+    }
+    i(n), o.has(n) ? o.delete(n) : o.add(n);
+  }
+  function h(n) {
+    return n ??= r[0], i(n), o.has(n);
+  }
+  function p(n) {
+    if (typeof n == "boolean")
+      if (n === !0)
+        n = r[0];
+      else {
+        f();
+        return;
+      }
+    if (typeof n == "boolean") throw new Error("State must be a string from here on out");
+    i(n), o.add(n);
+  }
+  function g(n) {
+    n ??= r[0], i(n), o.delete(n);
+  }
+  function i(n) {
+    if (!r.includes(n))
+      throw new Error(`State "${n}" is not a valid state option.`);
+  }
+  return {
+    clear: f,
+    get: l,
+    set: d,
+    has: h,
+    add: p,
+    remove: g,
+    toggle: c
+  };
+}
+export {
+  w as stateMap
+};

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

@@ -1,15 +1,13 @@
 /**
- * Generate a unique id based on a string
+ * Generate a unique id based on a string using the Crypto API
  *
  * @param str - string to base hash on
- * @returns string - a unique prefixed id
- */
-export declare function uuid(str: string): string;
-/**
- * @describe - cyrb53 - A simple hash function for strings
+ * @returns Promise<string> - a unique prefixed id
  *
- * @param str - string to hash
- * @param seed
- * @returns - a 12 digit number
+ * @usage
+ * ```typescript
+ * const uniqueId = await uuid('my-element-id');
+ * console.log(uniqueId); // skf-uuid-123456789abc
+ * ```
  */
-export declare const hash: (str: string, seed?: number) => number;
+export declare function uuid(str: string): Promise<string>;

package/dist/internal/helpers/uuid.js

@@ -1,14 +1,7 @@
-function r(u) {
-  const i = n(u);
-  return `skf-uuid-${String(i)}`;
+async function c(r) {
+  const t = new TextEncoder().encode(r), e = await crypto.subtle.digest("SHA-256", t);
+  return `skf-uuid-${Array.from(new Uint8Array(e)).map((n) => n.toString(16).padStart(2, "0")).join("").slice(0, 12)}`;
 }
-const n = (u, i = 0) => {
-  let t = 3735928559 ^ i, h = 1103547991 ^ i;
-  for (let l = 0, a; l < u.length; l++)
-    a = u.charCodeAt(l), t = Math.imul(t ^ a, 2654435761), h = Math.imul(h ^ a, 1597334677);
-  return t = Math.imul(t ^ t >>> 16, 2246822507), t ^= Math.imul(h ^ h >>> 13, 3266489909), h = Math.imul(h ^ h >>> 16, 2246822507), h ^= Math.imul(t ^ t >>> 13, 3266489909), 4294967296 * (2097151 & h) + (t >>> 0);
-};
 export {
-  n as hash,
-  r as uuid
+  c as uuid
 };

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

@@ -1,5 +1,5 @@
 import type { LitElement } from 'lit';
-type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type UpdateHandler = (property: string, prev?: unknown, next?: unknown) => void | Promise<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;

package/dist/internal/helpers/watch.js

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

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

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

package/dist/internal/templates/asterisk.js

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

package/dist/internal/types/formField.d.ts

@@ -1,6 +1,6 @@
 import type { SeverityFgColor } from '@skf-design-system/ui-assets';
 type HTMLInputTypeAttribute = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
-type FormFieldSeverity = Exclude<SeverityFgColor, 'error'>;
+export type FormFieldSeverity = Exclude<SeverityFgColor, 'alert' | 'error'>;
 export interface FormFieldBaseProps {
     customInvalid?: unknown;
     disabled?: boolean;

package/dist/internal/types.d.ts

@@ -0,0 +1,22 @@
+import type { SeverityFgColor, Icon as UIAssetsIcon, IconColor as UIAssetsIconColor } from '@skf-design-system/ui-assets';
+/**
+ * Alias
+ *
+ * Enables type-mapping for the `@wc-toolkit/storybook-helpers` plugin
+ * It can't translate types from external packages
+ */
+export type Icon = UIAssetsIcon;
+export type IconColor = UIAssetsIconColor | Severity;
+export type Severity = Exclude<SeverityFgColor, 'alert'>;
+/**
+ * Generic
+ */
+export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4';
+/**
+ * Forms
+ */
+export type FormFieldSeverity = Exclude<Severity, 'error'>;
+/**
+ * States
+ */
+export type States<T extends string> = Record<string, T | T[]>;

package/dist/styles/component.styles.d.ts

@@ -1,2 +1 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+export declare const componentStyles: import("lit").CSSResult;