@skf-design-system/ui-components 1.0.0-beta.5 → 1.0.1-beta.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as SkfButton } from './components/button/button.js';
 export { default as SkfCard } from './components/card/card.js';
 export { default as SkfCheckbox } from './components/checkbox/checkbox.js';
 export { default as SkfCollapse } from './components/collapse/collapse.js';
+export { default as SkfDialog } from './components/dialog/dialog.js';
 export { default as SkfDivider } from './components/divider/divider.js';
 export { default as SkfHeading } from './components/heading/heading.js';
 export { default as SkfIcon } from './components/icon/icon.js';
@@ -11,11 +12,21 @@ 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 SkfMenuItem } from './components/menu-item/menu-item.js';
+export { default as SkfMenu } from './components/menu/menu.js';
+export { default as SkfPopover } from './components/popover/popover.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 SkfStepperItem } from './components/stepper-item/stepper-item.js';
+export { default as SkfStepper } from './components/stepper/stepper.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';
+export { default as SkfTooltip } from './components/tooltip/tooltip.js';

package/dist/index.js

@@ -4,6 +4,7 @@ import "./components/button/button.js";
 import "./components/card/card.js";
 import "./components/checkbox/checkbox.js";
 import "./components/collapse/collapse.js";
+import "./components/dialog/dialog.js";
 import "./components/divider/divider.js";
 import "./components/heading/heading.js";
 import "./components/icon/icon.js";
@@ -11,57 +12,89 @@ import "./components/input/input.js";
 import "./components/link/link.js";
 import "./components/loader/loader.js";
 import "./components/logo/logo.js";
+import "./components/menu-item/menu-item.js";
+import "./components/menu/menu.js";
+import "./components/popover/popover.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/stepper-item/stepper-item.js";
+import "./components/stepper/stepper.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 "./components/toast/toast.js";
-import { SkfAccordion as L } from "./components/accordion/accordion.component.js";
-import { SkfAlert as h } from "./components/alert/alert.component.js";
-import { SkfButton as b } from "./components/button/button.component.js";
-import { SkfCard as w } from "./components/card/card.component.js";
-import { SkfCheckbox as D } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as R } from "./components/collapse/collapse.component.js";
-import { SkfDivider as q } from "./components/divider/divider.component.js";
-import { SkfHeading as z } from "./components/heading/heading.component.js";
-import { SkfIcon as F } from "./components/icon/icon.component.js";
-import { SkfInput as K } from "./components/input/input.component.js";
-import { SkfLink as N } from "./components/link/link.component.js";
-import { SkfLoader as Q } from "./components/loader/loader.component.js";
-import { SkfLogo as V } from "./components/logo/logo.component.js";
-import { SkfRadio as X } from "./components/radio/radio.component.js";
-import { SkfSelectOptionGroup as Z } from "./components/select-option-group/select-option-group.component.js";
-import { SkfSelectOption as $ } from "./components/select-option/select-option.component.js";
-import { SkfSelect as ro } from "./components/select/select.component.js";
-import { SkfSwitch as po } from "./components/switch/switch.component.js";
-import { SkfTag as mo } from "./components/tag/tag.component.js";
-import { SkfTextArea as io } from "./components/textarea/textarea.component.js";
-import { SkfToast as ko } from "./components/toast/toast.component.js";
-import { SkfAccordionItem as no } from "./components/accordion/accordion-item.js";
+import "./components/tooltip/tooltip.js";
+import { SkfAccordion as H } from "./components/accordion/accordion.component.js";
+import { SkfAlert as j } from "./components/alert/alert.component.js";
+import { SkfButton as y } from "./components/button/button.component.js";
+import { SkfCard as E } from "./components/card/card.component.js";
+import { SkfCheckbox as J } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as N } from "./components/collapse/collapse.component.js";
+import { SkfDialog as U } from "./components/dialog/dialog.component.js";
+import { SkfDivider as W } from "./components/divider/divider.component.js";
+import { SkfHeading as Y } from "./components/heading/heading.component.js";
+import { SkfIcon as _ } from "./components/icon/icon.component.js";
+import { SkfInput as oo } from "./components/input/input.component.js";
+import { SkfLink as to } from "./components/link/link.component.js";
+import { SkfLoader as fo } from "./components/loader/loader.component.js";
+import { SkfLogo as eo } from "./components/logo/logo.component.js";
+import { SkfMenuItem as So } from "./components/menu-item/menu-item.component.js";
+import { SkfMenu as xo } from "./components/menu/menu.component.js";
+import { SkfPopover as no } from "./components/popover/popover.component.js";
+import { SkfProgress as lo } from "./components/progress/progress.component.js";
+import { SkfRadio as To } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as bo } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as Io } from "./components/select-option/select-option.component.js";
+import { SkfSelect as Go } from "./components/select/select.component.js";
+import { SkfStepperItem as Co } from "./components/stepper-item/stepper-item.component.js";
+import { SkfStepper as Po } from "./components/stepper/stepper.component.js";
+import { SkfSwitch as vo } from "./components/switch/switch.component.js";
+import { SkfTabGroup as Mo } from "./components/tab-group/tab-group.component.js";
+import { SkfTabPanel as Bo } from "./components/tab-panel/tab-panel.component.js";
+import { SkfTab as Ro } from "./components/tab/tab.component.js";
+import { SkfTag as qo } from "./components/tag/tag.component.js";
+import { SkfTextArea as zo } from "./components/textarea/textarea.component.js";
+import { SkfToast as Fo } from "./components/toast/toast.component.js";
+import { SkfTooltip as Ko } from "./components/tooltip/tooltip.component.js";
+import { SkfAccordionItem as Qo } from "./components/accordion/accordion-item.js";
 export {
-  L as SkfAccordion,
-  no as SkfAccordionItem,
-  h as SkfAlert,
-  b as SkfButton,
-  w as SkfCard,
-  D as SkfCheckbox,
-  R as SkfCollapse,
-  q as SkfDivider,
-  z as SkfHeading,
-  F as SkfIcon,
-  K as SkfInput,
-  N as SkfLink,
-  Q as SkfLoader,
-  V as SkfLogo,
-  $ as SkfOption,
-  Z as SkfOptionGroup,
-  X as SkfRadio,
-  ro as SkfSelect,
-  po as SkfSwitch,
-  mo as SkfTag,
-  io as SkfTextArea,
-  ko as SkfToast
+  H as SkfAccordion,
+  Qo as SkfAccordionItem,
+  j as SkfAlert,
+  y as SkfButton,
+  E as SkfCard,
+  J as SkfCheckbox,
+  N as SkfCollapse,
+  U as SkfDialog,
+  W as SkfDivider,
+  Y as SkfHeading,
+  _ as SkfIcon,
+  oo as SkfInput,
+  to as SkfLink,
+  fo as SkfLoader,
+  eo as SkfLogo,
+  xo as SkfMenu,
+  So as SkfMenuItem,
+  Io as SkfOption,
+  bo as SkfOptionGroup,
+  no as SkfPopover,
+  lo as SkfProgress,
+  To as SkfRadio,
+  Go as SkfSelect,
+  Po as SkfStepper,
+  Co as SkfStepperItem,
+  vo as SkfSwitch,
+  Ro as SkfTab,
+  Mo as SkfTabGoup,
+  Bo as SkfTabPanel,
+  qo as SkfTag,
+  zo as SkfTextArea,
+  Fo as SkfToast,
+  Ko as SkfTooltip
 };

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

@@ -0,0 +1,29 @@
+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';
+export declare class SkfPopoverBase extends SkfElement {
+    static styles: CSSResultGroup;
+    static classMap: {};
+    isOpen: boolean;
+    placement: Placement;
+    variant: 'dropdown' | 'popup' | 'tooltip';
+    anchor?: string;
+    offset: number;
+    $anchor?: Element | HTMLElement | null;
+    arrow: boolean;
+    $popover: HTMLElement;
+    $arrow: HTMLElement;
+    /** @internal */
+    protected popoverController: PopoverController;
+    private _toggleOpen;
+    private _handleToggle;
+    handleToggleOpen: () => void;
+    handleAnchorChange: () => Promise<void>;
+    reposition: () => Promise<void>;
+    open: () => boolean;
+    close: () => boolean;
+    addEventListeners($element: HTMLElement | Element): void;
+    removeEventListeners($element: HTMLElement | Element): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,116 @@
+import { flip as b, offset as C, arrow as _, computePosition as E } from "@floating-ui/dom";
+import { SkfElement as P } from "../../components/skf-element.js";
+import { PopoverController as L } from "../../controllers/popover.controller.js";
+import { watch as $ } from "../../helpers/watch.js";
+import M from "../../../styles/component.styles.js";
+import { html as y, nothing as T } from "lit";
+import { property as a, state as h, query as u } from "lit/decorators.js";
+import { classMap as j } from "lit/directives/class-map.js";
+import { styles as k } from "./popover.styles.js";
+var B = Object.defineProperty, o = (l, t, i, c) => {
+  for (var r = void 0, n = l.length - 1, p; n >= 0; n--)
+    (p = l[n]) && (r = p(t, i, r) || r);
+  return r && B(t, i, r), r;
+}, s;
+const e = (s = class extends P {
+  constructor() {
+    super(...arguments), this.isOpen = !1, this.placement = "top", this.variant = "popup", this.offset = 0, this.arrow = !1, this.popoverController = new L(this), this._toggleOpen = (t) => this.isOpen = t ?? !this.isOpen, this._handleToggle = (t) => {
+      const i = t.newState === "open";
+      this.isOpen = i, this.emit(i ? "open" : "close");
+    }, this.handleToggleOpen = () => {
+      this.$popover.togglePopover(this.isOpen), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 150,
+        easing: "ease-out",
+        fill: "forwards"
+      });
+    }, this.handleAnchorChange = async () => {
+      if (!this.anchor) return;
+      await this.popoverController.stop(), this.$anchor && this.removeEventListeners(this.$anchor);
+      const t = this.getRootNode();
+      this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
+    }, this.reposition = async () => {
+      var n, p, f;
+      if (!this.$anchor) return;
+      const t = [b(), C(this.offset)];
+      this.arrow && t.push(_({ element: this.$arrow }));
+      const { x: i, y: c, middlewareData: r } = await E(this.$anchor, this.$popover, {
+        placement: this.placement,
+        middleware: t,
+        strategy: "fixed"
+      });
+      if (Object.assign(this.$popover.style, {
+        left: `${String(i)}px`,
+        top: `${String(c)}px`
+      }), this.arrow) {
+        const m = this.placement.split("-")[0], d = { top: "bottom", right: "left", bottom: "top", left: "right" }[m] ?? "", g = (n = r.flip) == null ? void 0 : n.index, v = (p = r.arrow) == null ? void 0 : p.x, w = (f = r.arrow) == null ? void 0 : f.y, O = typeof v == "number" ? `${String(v)}px` : "", S = typeof w == "number" ? `${String(w)}px` : "", x = {
+          bottom: 45,
+          right: 135,
+          top: 225,
+          left: 315
+        };
+        Object.assign(this.$arrow.style, {
+          top: S,
+          [this.placement.includes("left") ? "right" : "left"]: O,
+          [g ? m : d]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(x[d] + (g ? 180 : 0)).toString()}deg`
+        });
+      }
+    }, this.open = () => this._toggleOpen(!0), this.close = () => this._toggleOpen(!1);
+  }
+  addEventListeners(t) {
+    throw new Error(`Cannot add eventListeners for ${t.id}. Method not implemented.`);
+  }
+  removeEventListeners(t) {
+    throw new Error(`Cannot remove eventListeners for ${t.id}. Method not implemented.`);
+  }
+  render() {
+    return y`
+			<div
+				@toggle=${this._handleToggle}
+				class=${j({ popover: !0, ...s.classMap })}
+				id="popover"
+				popover
+			>
+				<slot></slot>
+				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : T}
+			</div>
+		`;
+  }
+}, s.styles = [M, k], s.classMap = {}, s);
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "isOpen");
+o([
+  a()
+], e.prototype, "placement");
+o([
+  a()
+], e.prototype, "variant");
+o([
+  a()
+], e.prototype, "anchor");
+o([
+  h()
+], e.prototype, "offset");
+o([
+  h()
+], e.prototype, "$anchor");
+o([
+  h()
+], e.prototype, "arrow");
+o([
+  u("#popover")
+], e.prototype, "$popover");
+o([
+  u("#arrow")
+], e.prototype, "$arrow");
+o([
+  $("isOpen", { afterUpdate: !0 })
+], e.prototype, "handleToggleOpen");
+o([
+  $("anchor")
+], e.prototype, "handleAnchorChange");
+let X = e;
+export {
+  X as SkfPopoverBase
+};

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

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

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

@@ -0,0 +1,29 @@
+import { css as o } from "lit";
+const e = o`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.popover {
+			background-color: var(--skf-bg-color-neutral-1);
+			border: none;
+			border-radius: var(--skf-border-radius-sm);
+			box-shadow: var(--skf-shadow-md);
+			opacity: 0;
+			overflow: visible;
+		}
+
+		.popover__arrow {
+			--_skf-popover-arrow-size: calc(6px * 0.7071);
+
+			background-color: var(--skf-bg-color-neutral-1);
+			block-size: calc(var(--_skf-popover-arrow-size) * 2);
+			box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 5%);
+			inline-size: calc(var(--_skf-popover-arrow-size) * 2);
+			position: absolute;
+			rotate: 45deg;
+			z-index: -1;
+		}
+	}
+`;
+export {
+  e as styles
+};

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

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

package/dist/internal/components/formBase.js

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

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

@@ -1,5 +1,5 @@
-import '@components/icon/icon.js';
-import { SkfElement } from '@internal/components/skf-element.js';
+import '../../../components/icon/icon.js';
+import { SkfElement } from '../../components/skf-element.js';
 import type { SeverityFgColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 export declare class SkfHint extends SkfElement {

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

@@ -1,21 +1,21 @@
 import "../../../components/icon/icon.js";
-import { SkfElement as l } from "../skf-element.js";
-import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
+import { SkfElement as n } from "../skf-element.js";
+import { ICON_SEVERITY as l } 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";
+import { property as d } from "lit/decorators.js";
+import y 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);
+  for (var r = void 0, e = s.length - 1, p; e >= 0; e--)
+    (p = s[e]) && (r = p(i, m, r) || r);
   return r && a(i, m, r), r;
 };
-const o = class o extends l {
+const o = class o extends n {
   render() {
     return f`
 			<div id="root">
 				${this.severity && f`
-					<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
+					<skf-icon color=${this.severity} name="${l[this.severity]}" size="xs">
 					</skf-icon>
 				`}
 				<slot></slot>
@@ -23,11 +23,11 @@ const o = class o extends l {
 		`;
   }
 };
-o.styles = [v, d];
-let e = o;
+o.styles = [v, y];
+let t = o;
 c([
-  y()
-], e.prototype, "severity");
+  d()
+], t.prototype, "severity");
 export {
-  e as SkfHint
+  t as SkfHint
 };

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

@@ -17,43 +17,44 @@ const s = class s extends d {
   /** Custom event emitter helper function. Transmits user actions or component state change. Use composed=false for event that should not pierce shadowDom. */
   emit(e, t = {}) {
     if ([
-      "click",
-      "dblclick",
-      "mousedown",
-      "mouseup",
-      "mouseover",
-      "mouseout",
-      "mousemove",
-      "keydown",
-      "keyup",
-      "keypress",
-      "submit",
-      "focus",
       "blur",
-      "load",
-      "unload",
-      "resize",
-      "scroll",
+      "canplay",
       "change",
-      "input",
+      "click",
+      "close",
       "contextmenu",
+      "dblclick",
       "drag",
-      "dragstart",
       "dragend",
       "dragenter",
       "dragleave",
       "dragover",
+      "dragstart",
       "drop",
-      "touchstart",
-      "touchend",
-      "touchmove",
-      "play",
-      "pause",
       "ended",
-      "canplay",
+      "error",
+      "focus",
+      "input",
+      "keydown",
+      "keypress",
+      "keyup",
+      "load",
       "loadeddata",
+      "mousedown",
+      "mousemove",
+      "mouseout",
+      "mouseover",
+      "mouseup",
+      "pause",
+      "play",
       "progress",
-      "error"
+      "resize",
+      "scroll",
+      "submit",
+      "touchend",
+      "touchmove",
+      "touchstart",
+      "unload"
     ].includes(e)) {
       const u = {
         bubbles: !0,

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

@@ -0,0 +1,16 @@
+import { SkfSelect } from '../../components/select/select.component.js';
+import type { SkfPopoverBase } from '../base-classes/popover/popover.base.js';
+import type { ReactiveController } from 'lit';
+type ControllerHost = SkfPopoverBase | SkfSelect;
+export declare class PopoverController implements ReactiveController {
+    host?: ControllerHost;
+    private cleanup;
+    private active;
+    private autoStart;
+    constructor(host: ControllerHost, autoStart?: boolean);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    start(): void;
+    stop(): Promise<void>;
+}
+export {};

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

@@ -0,0 +1,44 @@
+import "../../components/select/select.component.js";
+import { autoUpdate as n } from "@floating-ui/dom";
+class p {
+  constructor(t, o = !0) {
+    this.active = !1, this.autoStart = !0, this.host = t, t.addController(this), this.autoStart = o;
+  }
+  hostConnected() {
+    var t;
+    this.autoStart && ((t = this.host) == null || t.updateComplete.then(() => {
+      this.start();
+    }).catch((o) => {
+      console.error(o);
+    }));
+  }
+  hostDisconnected() {
+    this.stop().catch((t) => {
+      console.error(t);
+    });
+  }
+  start() {
+    var e, r;
+    const t = (e = this.host) == null ? void 0 : e.$anchor, o = (r = this.host) == null ? void 0 : r.$popover;
+    if (!t || !o) {
+      console.warn("PopoverController: anchor or popup not found");
+      return;
+    }
+    this.active || (this.cleanup = n(t, o, () => {
+      var s;
+      (s = this.host) == null || s.reposition().catch((i) => {
+        console.error(i);
+      });
+    }), this.active = !0);
+  }
+  async stop() {
+    return new Promise((t) => {
+      this.cleanup ? (this.cleanup(), this.cleanup = void 0, requestAnimationFrame(() => {
+        t();
+      })) : t(), this.active = !1;
+    });
+  }
+}
+export {
+  p as PopoverController
+};

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

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

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

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