@skf-design-system/ui-components 1.0.0-alpha.38 → 1.0.0-alpha.39

package/dist/index.d.ts

@@ -28,8 +28,8 @@ export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';
 export { default as SkfSegmentedButtonItem } from './components/segmented-button/segmented-button-item.js';
 export { default as SkfSegmentedButton } from './components/segmented-button/segmented-button.js';
-export { default as SkfOptionGroup } from './components/select/select-option-group.js';
-export { default as SkfOption } from './components/select/select-option.js';
+export { default as SkfSelectOptionGroup } from './components/select/select-option-group.js';
+export { default as SkfSelectOption } from './components/select/select-option.js';
 export { default as SkfSelect } from './components/select/select.js';
 export { default as SkfStepperItem } from './components/stepper/stepper-item.js';
 export { default as SkfStepper } from './components/stepper/stepper.js';

package/dist/index.js

@@ -56,14 +56,14 @@ import { SkfDatepickerPopup as ao } from "./components/datepicker/datepicker-pop
 import { SkfDatepicker as co } from "./components/datepicker/datepicker.component.js";
 import { SkfDialog as Io } from "./components/dialog/dialog.component.js";
 import { SkfDivider as lo } from "./components/divider/divider.component.js";
-import { SkfDrawer as go } from "./components/drawer/drawer.component.js";
+import { SkfDrawer as bo } from "./components/drawer/drawer.component.js";
 import { SkfHeader as Do } from "./components/header/header.component.js";
 import { SkfHeading as vo } from "./components/heading/heading.component.js";
-import { SkfIcon as Oo } from "./components/icon/icon.component.js";
-import { SkfInput as Co } from "./components/input/input.component.js";
-import { SkfLink as ho } from "./components/link/link.component.js";
-import { SkfLoader as Go } from "./components/loader/loader.component.js";
-import { SkfLogo as Mo } from "./components/logo/logo.component.js";
+import { SkfIcon as Po } from "./components/icon/icon.component.js";
+import { SkfInput as Lo } from "./components/input/input.component.js";
+import { SkfLink as wo } from "./components/link/link.component.js";
+import { SkfLoader as Mo } from "./components/loader/loader.component.js";
+import { SkfLogo as Oo } from "./components/logo/logo.component.js";
 import { SkfMenuItem as Ro } from "./components/menu/menu-item.component.js";
 import { SkfMenu as jo } from "./components/menu/menu.component.js";
 import { SkfNavItem as yo } from "./components/nav/nav-item.component.js";
@@ -83,11 +83,11 @@ import { SkfTabPanel as nr } from "./components/tabs/tab-panel.component.js";
 import { SkfTab as dr } from "./components/tabs/tab.component.js";
 import { SkfTabs as Ir } from "./components/tabs/tabs.component.js";
 import { SkfTag as lr } from "./components/tag/tag.component.js";
-import { SkfTextArea as gr } from "./components/textarea/textarea.component.js";
+import { SkfTextArea as br } from "./components/textarea/textarea.component.js";
 import { SkfToastItem as Dr } from "./components/toast/toast-item.component.js";
 import { SkfToastWrapper as vr } from "./components/toast/toast-wrapper.component.js";
-import { SkfToast as Or } from "./components/toast/toast.component.js";
-import { SkfTooltip as Cr } from "./components/tooltip/tooltip.component.js";
+import { SkfToast as Pr } from "./components/toast/toast.component.js";
+import { SkfTooltip as Lr } from "./components/tooltip/tooltip.component.js";
 export {
   X as SkfAccordion,
   U as SkfAccordionItem,
@@ -102,26 +102,26 @@ export {
   ao as SkfDatepickerPopup,
   Io as SkfDialog,
   lo as SkfDivider,
-  go as SkfDrawer,
+  bo as SkfDrawer,
   Do as SkfHeader,
   vo as SkfHeading,
-  Oo as SkfIcon,
-  Co as SkfInput,
-  ho as SkfLink,
-  Go as SkfLoader,
-  Mo as SkfLogo,
+  Po as SkfIcon,
+  Lo as SkfInput,
+  wo as SkfLink,
+  Mo as SkfLoader,
+  Oo as SkfLogo,
   jo as SkfMenu,
   Ro as SkfMenuItem,
   Eo as SkfNav,
   yo as SkfNavItem,
-  tr as SkfOption,
-  or as SkfOptionGroup,
   Jo as SkfPopover,
   Qo as SkfProgress,
   Vo as SkfRadio,
   _o as SkfSegmentedButton,
   Yo as SkfSegmentedButtonItem,
   mr as SkfSelect,
+  tr as SkfSelectOption,
+  or as SkfSelectOptionGroup,
   Sr as SkfStepper,
   fr as SkfStepperItem,
   xr as SkfSwitch,
@@ -129,9 +129,9 @@ export {
   nr as SkfTabPanel,
   Ir as SkfTabs,
   lr as SkfTag,
-  gr as SkfTextArea,
-  Or as SkfToast,
+  br as SkfTextArea,
+  Pr as SkfToast,
   Dr as SkfToastItem,
   vr as SkfToastWrapper,
-  Cr as SkfTooltip
+  Lr as SkfTooltip
 };

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

@@ -2,38 +2,58 @@ import { type Placement } from '@floating-ui/dom';
 import { SkfElement } from '../../components/skf-element.js';
 import { PopoverController } from '../../controllers/popover.controller.js';
 import { type CSSResultGroup } from 'lit';
+/**
+ * @description - Base class for popover components.
+ * This class provides common functionality for popovers, such as handling open/close states, positioning, and event management.
+ * It should be extended by specific popover components like `SkfPopover`, `SkfTooltip`, etc.
+ *
+ * @event {CustomEvent} skf-opened - Fired when the popover is opened
+ * @event {CustomEvent} skf-closed - Fired when the popover is closed
+ *
+ * @slot - The popover content
+ */
 export declare class SkfPopoverBase extends SkfElement {
     static styles: CSSResultGroup;
     static classMap: {};
+    _skipClosingThisTick: boolean;
+    /** @internal - The popover element, aka `this` */
     $popover: this;
+    /** Where the popover is positioned relative to the anchor element if it fits */
     placement: Placement;
+    /** The variant of the popover extending this base class */
     variant: 'menu' | 'popup' | 'tooltip';
+    /** The id of the element the popover will be anchored to */
     anchor?: string;
+    /** Whether the popover is currently open */
     isOpen: boolean;
+    /** @internal - Gap between popover and anchor */
     offset: number;
+    /** @internal - Element that triggered the popover */
     $anchor?: Element | HTMLElement | null;
+    /** If true, displays an arrow on the popover */
     arrow: boolean;
-    /** @internal */
+    /** @internal - the event that triggers the popover */
     triggerEvent: 'mouseenter' | 'click';
+    /** @internal - Reference to the arrow element */
     $arrow: HTMLElement;
+    /**
+     * Used to store the outside click listener reference for cleanup and to avoid duplicates
+     */
+    _skfPopoverOutsideClickListener?: (e: MouseEvent) => void;
     protected abortEventsController: AbortController;
     protected signal: AbortSignal;
     protected popoverController: PopoverController;
-    constructor();
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected _toggleOpen: (newValue?: boolean) => void;
     private _handleToggle;
     handleToggleOpen: () => Promise<void>;
-    handleAnchorEl(): void;
+    handleAnchorEl(): Promise<void>;
     handleAnchorChange: () => Promise<void>;
     reposition: () => Promise<void>;
     handleEscapeKey: (e: KeyboardEvent) => void;
     open: (e: Event) => void;
-    /** @internal add additional open tasks here in UI component */
-    openExtended(): void;
-    close(): void;
-    /** @internal add additional close tasks here in UI component */
-    closeExtended(): void;
+    close: (reason?: string) => void;
     /** @internal eventlisteners here should implement abort signal */
     addEventListeners($element: HTMLElement | Element): void;
     /** @internal */

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

@@ -1,95 +1,104 @@
-import { flip as O, offset as C, arrow as x, computePosition as A } from "@floating-ui/dom";
-import { SkfElement as S } from "../../components/skf-element.js";
-import { PopoverController as P } from "../../controllers/popover.controller.js";
-import { uuid as _ } from "../../helpers/uuid.js";
+import { flip as y, offset as $, arrow as E, computePosition as O } from "@floating-ui/dom";
+import { SkfElement as C } from "../../components/skf-element.js";
+import { PopoverController as T } from "../../controllers/popover.controller.js";
+import { uuid as k } from "../../helpers/uuid.js";
 import { watch as f } from "../../helpers/watch.js";
-import { componentStyles as L } from "../../../styles/component.styles.js";
-import { nothing as F, html as y } from "lit";
-import { property as u, state as c, query as T } from "lit/decorators.js";
-import { classMap as j } from "lit/directives/class-map.js";
-import { styles as M } from "./popover.styles.js";
-var k = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (m, t, o, i) => {
-  for (var e = i > 1 ? void 0 : i ? R(t, o) : t, n = m.length - 1, a; n >= 0; n--)
-    (a = m[n]) && (e = (i ? a(t, o, e) : a(e)) || e);
-  return i && e && k(t, o, e), e;
-}, p;
-const s = (p = class extends S {
+import { componentStyles as P } from "../../../styles/component.styles.js";
+import { nothing as _, html as m } from "lit";
+import { property as u, state as c, query as A } from "lit/decorators.js";
+import { classMap as S } from "lit/directives/class-map.js";
+import { styles as L } from "./popover.styles.js";
+var x = Object.defineProperty, F = Object.getOwnPropertyDescriptor, r = (g, t, s, o) => {
+  for (var e = o > 1 ? void 0 : o ? F(t, s) : t, n = g.length - 1, a; n >= 0; n--)
+    (a = g[n]) && (e = (o ? a(t, s, e) : a(e)) || e);
+  return o && e && x(t, s, e), e;
+}, h;
+const i = (h = class extends C {
   constructor() {
-    super(), this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new P(this), this._toggleOpen = (t) => {
+    super(...arguments), this._skipClosingThisTick = !1, this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new T(this), this._toggleOpen = (t) => {
       this.isOpen = t ?? !this.isOpen;
     }, this._handleToggle = (t) => {
-      const o = t.newState === "open";
-      this.isOpen = o, this.emit(o ? "skf-opened" : "skf-closed");
+      const s = t.newState === "open";
+      this.isOpen = s, this.emit(s ? "skf-opened" : "skf-closed");
     }, this.handleToggleOpen = async () => {
-      this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover.togglePopover(this.isOpen)));
+      this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover && this.$popover.togglePopover(this.isOpen)));
     }, this.handleAnchorChange = async () => {
       if (!this.anchor) return;
       await this.popoverController.stop(), this.$anchor && this.removeEventListeners();
       const t = this.getRootNode();
       this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
     }, this.reposition = async () => {
-      var n, a, h;
       if (!this.$anchor) return;
-      const t = [O(), C(this.offset)];
-      this.arrow && t.push(x({ element: this.$arrow }));
-      const { x: o, y: i, middlewareData: e } = await A(this.$anchor, this.$popover, {
+      const t = [y(), $(this.offset)];
+      this.arrow && t.push(E({ element: this.$arrow }));
+      const { x: s, y: o, middlewareData: e } = await O(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
       });
       if (Object.assign(this.$popover.style, {
-        left: `${String(o)}px`,
-        top: `${String(i)}px`
+        left: `${String(s)}px`,
+        top: `${String(o)}px`
       }), this.arrow) {
-        const d = this.placement.split("-")[0], l = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", g = (n = e.flip) == null ? void 0 : n.index, v = (a = e.arrow) == null ? void 0 : a.x, b = (h = e.arrow) == null ? void 0 : h.y, $ = typeof v == "number" ? `${String(v)}px` : "", w = typeof b == "number" ? `${String(b)}px` : "", E = {
+        const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", p = e.flip?.index, d = e.arrow?.x, l = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof l == "number" ? `${String(l)}px` : "", w = {
           bottom: 45,
           right: 135,
           top: 225,
           left: 315
         };
         Object.assign(this.$arrow.style, {
-          top: w,
-          [this.placement.includes("left") ? "right" : "left"]: $,
-          [g ? d : l]: "calc(var(--_skf-popover-arrow-size) * -1)",
-          rotate: `${(E[l] + (g ? 180 : 0)).toString()}deg`
+          top: b,
+          [this.placement.includes("left") ? "right" : "left"]: v,
+          [p ? n : a]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(w[a] + (p ? 180 : 0)).toString()}deg`
         });
       }
     }, this.handleEscapeKey = (t) => {
       t.key === "Escape" && this.close();
     }, this.open = (t) => {
-      t.stopPropagation(), this._toggleOpen(!0), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this.signal }), this.openExtended();
-    }, this.setAttribute("popover", "");
+      t.stopPropagation();
+      const o = this.tagName === "SKF-MENU" ? void 0 : !0;
+      this._toggleOpen(o), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this.signal }), this.tagName === "SKF-TOOLTIP" && this.$anchor?.setAttribute("aria-describedby", this.id);
+    }, this.close = (t = "") => {
+      console.log("Popover closing", t), this._toggleOpen(!1), this.abortEventsController.abort(), this.tagName === "SKF-TOOLTIP" && this.$anchor?.removeAttribute("aria-describedby");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("popover", ""), this.addEventListener("toggle", (t) => {
+      this._handleToggle(t);
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.abortEventsController.abort();
   }
-  handleAnchorEl() {
+  async handleAnchorEl() {
     if (!this.$anchor) return;
     const t = this._containsFocusableElement(this);
     this.$anchor.addEventListener(
       "focusout",
       (o) => {
-        const i = this.contains(o.relatedTarget);
-        t && i || this.close();
+        const e = this.contains(o.relatedTarget);
+        t && e || this._skipClosingThisTick || this.close("anchor focus out");
       },
       { signal: this.signal }
     ), this.addEventListener(
       "focusout",
       (o) => {
-        const i = this.contains(o.relatedTarget);
-        t && i || this.close();
+        const e = this.contains(o.relatedTarget);
+        t && e || this.close("popover focusout");
       },
       { signal: this.signal }
-    ), this.$popover.id = _(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open.bind(this), { signal: this.signal });
-  }
-  /** @internal add additional open tasks here in UI component */
-  openExtended() {
-  }
-  close() {
-    this.closeExtended(), this._toggleOpen(!1), this.abortEventsController.abort();
-  }
-  /** @internal add additional close tasks here in UI component */
-  closeExtended() {
+    ), this._skfPopoverOutsideClickListener ??= (o) => {
+      this.isOpen && this.$anchor && !this.contains(o.target) && !this.$anchor.contains(o.target) ? this.close("outside click") : (this._skipClosingThisTick = !0, setTimeout(() => {
+        this._skipClosingThisTick = !1;
+      }, 0));
+    }, document.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
+      signal: this.signal
+    });
+    const s = window.top && window.self !== window.top;
+    console.log("contains frames", s), s && window.top && !this._skipClosingThisTick && window.top.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
+      signal: this.signal
+    }), this.$popover.id = await k(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this.signal });
   }
   /** @internal eventlisteners here should implement abort signal */
   addEventListeners(t) {
@@ -100,15 +109,10 @@ const s = (p = class extends S {
     this.abortEventsController.abort();
   }
   render() {
-    var t;
-    return ["popup", "menu"].includes(this.variant) && ((t = this.$anchor) == null || t.setAttribute("aria-expanded", this.isOpen ? "true" : "false")), y`
-			<div
-				@toggle=${this._handleToggle}
-				class=${j({ popover: !0, ...p.classMap })}
-				id="root"
-			>
+    return ["popup", "menu"].includes(this.variant) && this.$anchor?.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), m`
+			<div class=${S({ popover: !0, ...h.classMap })} id="root">
 				<slot></slot>
-				${this.arrow ? y`<div id="arrow"></div>` : F}
+				${this.arrow ? m`<div id="arrow"></div>` : _}
 			</div>
 		`;
   }
@@ -123,54 +127,54 @@ const s = (p = class extends S {
       '[tabindex]:not([tabindex="-1"])'
     ]).length > 0;
     function e(n, a) {
-      const h = Array.from(
+      const p = Array.from(
         n.querySelectorAll(a.join(", "))
       ), d = Array.from(n.querySelectorAll("*")).map((l) => l.shadowRoot).filter((l) => l !== null);
       for (const l of d)
-        h.push(
+        p.push(
           ...e(l, a)
         );
-      return h;
+      return p;
     }
   }
-}, p.styles = [L, M], p.classMap = {}, p);
+}, h.styles = [P, L], h.classMap = {}, h);
 r([
   u()
-], s.prototype, "placement", 2);
+], i.prototype, "placement", 2);
 r([
   u()
-], s.prototype, "variant", 2);
+], i.prototype, "variant", 2);
 r([
   u()
-], s.prototype, "anchor", 2);
+], i.prototype, "anchor", 2);
 r([
   c()
-], s.prototype, "isOpen", 2);
+], i.prototype, "isOpen", 2);
 r([
   c()
-], s.prototype, "offset", 2);
+], i.prototype, "offset", 2);
 r([
   c()
-], s.prototype, "$anchor", 2);
+], i.prototype, "$anchor", 2);
 r([
   c()
-], s.prototype, "arrow", 2);
+], i.prototype, "arrow", 2);
 r([
   c()
-], s.prototype, "triggerEvent", 2);
+], i.prototype, "triggerEvent", 2);
 r([
-  T("#arrow")
-], s.prototype, "$arrow", 2);
+  A("#arrow")
+], i.prototype, "$arrow", 2);
 r([
   f("isOpen", { afterUpdate: !0 })
-], s.prototype, "handleToggleOpen", 2);
+], i.prototype, "handleToggleOpen", 2);
 r([
   f("$anchor")
-], s.prototype, "handleAnchorEl", 1);
+], i.prototype, "handleAnchorEl", 1);
 r([
   f("anchor")
-], s.prototype, "handleAnchorChange", 2);
-let G = s;
+], i.prototype, "handleAnchorChange", 2);
+let z = i;
 export {
-  G as SkfPopoverBase
+  z as SkfPopoverBase
 };

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

@@ -37,6 +37,7 @@ export declare class FormBase extends SkfElement {
     /** If true, sets disabled state */
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
+    /** If true, sets disabled state */
     set required(isRequired: boolean);
     get required(): boolean;
     set nativeValidation(nativeValidation: boolean);

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/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/stateMap.js

@@ -26,14 +26,14 @@ function w(o, u) {
     }), o.add(n);
   }
   function c(n) {
-    if (n ?? (n = r[0]), typeof n == "boolean") {
+    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 ?? (n = r[0]), i(n), o.has(n);
+    return n ??= r[0], i(n), o.has(n);
   }
   function p(n) {
     if (typeof n == "boolean")
@@ -47,7 +47,7 @@ function w(o, u) {
     i(n), o.add(n);
   }
   function g(n) {
-    n ?? (n = r[0]), i(n), o.delete(n);
+    n ??= r[0], i(n), o.delete(n);
   }
   function i(n) {
     if (!r.includes(n))

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 = (property: string, 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/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.d.ts

@@ -16,3 +16,7 @@ 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[]>;