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

package/dist/index.d.ts

@@ -4,8 +4,12 @@ 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 SkfDatePickerInput } from './components/date-picker-input/datepicker-input.js';
+export { default as SkfDatePicker } from './components/date-picker/datepicker.js';
 export { default as SkfDialog } from './components/dialog/dialog.js';
 export { default as SkfDivider } from './components/divider/divider.js';
+export { default as SkfDrawer } from './components/drawer/drawer.js';
+export { default as SkfHeader } from './components/header/header.js';
 export { default as SkfHeading } from './components/heading/heading.js';
 export { default as SkfIcon } from './components/icon/icon.js';
 export { default as SkfInput } from './components/input/input.js';
@@ -14,6 +18,8 @@ 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 SkfNavItem } from './components/nav-item/nav-item.js';
+export { default as SkfNav } from './components/nav/nav.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';

package/dist/index.js

@@ -4,8 +4,12 @@ import "./components/button/button.js";
 import "./components/card/card.js";
 import "./components/checkbox/checkbox.js";
 import "./components/collapse/collapse.js";
+import "./components/date-picker-input/datepicker-input.js";
+import "./components/date-picker/datepicker.js";
 import "./components/dialog/dialog.js";
 import "./components/divider/divider.js";
+import "./components/drawer/drawer.js";
+import "./components/header/header.js";
 import "./components/heading/heading.js";
 import "./components/icon/icon.js";
 import "./components/input/input.js";
@@ -14,6 +18,8 @@ import "./components/loader/loader.js";
 import "./components/logo/logo.js";
 import "./components/menu-item/menu-item.js";
 import "./components/menu/menu.js";
+import "./components/nav-item/nav-item.js";
+import "./components/nav/nav.js";
 import "./components/popover/popover.js";
 import "./components/progress/progress.js";
 import "./components/radio/radio.js";
@@ -30,71 +36,83 @@ import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
 import "./components/toast/toast.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";
+import { SkfAccordion as z } from "./components/accordion/accordion.component.js";
+import { SkfAlert as F } from "./components/alert/alert.component.js";
+import { SkfButton as K } from "./components/button/button.component.js";
+import { SkfCard as U } from "./components/card/card.component.js";
+import { SkfCheckbox as W } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as Y } from "./components/collapse/collapse.component.js";
+import { SkfDatePickerInput as _ } from "./components/date-picker-input/datepicker-input.component.js";
+import { SkfDatePicker as oo } from "./components/date-picker/datepicker.component.js";
+import { SkfDialog as to } from "./components/dialog/dialog.component.js";
+import { SkfDivider as fo } from "./components/divider/divider.component.js";
+import { SkfDrawer as eo } from "./components/drawer/drawer.component.js";
+import { SkfHeader as So } from "./components/header/header.component.js";
+import { SkfHeading as xo } from "./components/heading/heading.component.js";
+import { SkfIcon as no } from "./components/icon/icon.component.js";
+import { SkfInput as lo } from "./components/input/input.component.js";
+import { SkfLink as To } from "./components/link/link.component.js";
+import { SkfLoader as Io } from "./components/loader/loader.component.js";
+import { SkfLogo as go } from "./components/logo/logo.component.js";
+import { SkfMenuItem as Po } from "./components/menu-item/menu-item.component.js";
+import { SkfMenu as Ao } from "./components/menu/menu.component.js";
+import { SkfNavItem as Oo } from "./components/nav-item/nav-item.component.js";
+import { SkfNav as Lo } from "./components/nav/nav.component.js";
+import { SkfPopover as wo } from "./components/popover/popover.component.js";
+import { SkfProgress as Mo } from "./components/progress/progress.component.js";
+import { SkfRadio as Bo } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as jo } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as yo } from "./components/select-option/select-option.component.js";
+import { SkfSelect as Eo } from "./components/select/select.component.js";
+import { SkfStepperItem as Jo } from "./components/stepper-item/stepper-item.component.js";
+import { SkfStepper as Qo } from "./components/stepper/stepper.component.js";
+import { SkfSwitch as Vo } from "./components/switch/switch.component.js";
+import { SkfTabGroup as Xo } from "./components/tab-group/tab-group.component.js";
+import { SkfTabPanel as Zo } from "./components/tab-panel/tab-panel.component.js";
+import { SkfTab as $o } from "./components/tab/tab.component.js";
+import { SkfTag as rr } from "./components/tag/tag.component.js";
+import { SkfTextArea as pr } from "./components/textarea/textarea.component.js";
+import { SkfToast as mr } from "./components/toast/toast.component.js";
+import { SkfTooltip as ir } from "./components/tooltip/tooltip.component.js";
+import { SkfAccordionItem as kr } from "./components/accordion/accordion-item.js";
 export {
-  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
+  z as SkfAccordion,
+  kr as SkfAccordionItem,
+  F as SkfAlert,
+  K as SkfButton,
+  U as SkfCard,
+  W as SkfCheckbox,
+  Y as SkfCollapse,
+  oo as SkfDatePicker,
+  _ as SkfDatePickerInput,
+  to as SkfDialog,
+  fo as SkfDivider,
+  eo as SkfDrawer,
+  So as SkfHeader,
+  xo as SkfHeading,
+  no as SkfIcon,
+  lo as SkfInput,
+  To as SkfLink,
+  Io as SkfLoader,
+  go as SkfLogo,
+  Ao as SkfMenu,
+  Po as SkfMenuItem,
+  Lo as SkfNav,
+  Oo as SkfNavItem,
+  yo as SkfOption,
+  jo as SkfOptionGroup,
+  wo as SkfPopover,
+  Mo as SkfProgress,
+  Bo as SkfRadio,
+  Eo as SkfSelect,
+  Qo as SkfStepper,
+  Jo as SkfStepperItem,
+  Vo as SkfSwitch,
+  $o as SkfTab,
+  Xo as SkfTabGoup,
+  Zo as SkfTabPanel,
+  rr as SkfTag,
+  pr as SkfTextArea,
+  mr as SkfToast,
+  ir as SkfTooltip
 };

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

@@ -5,25 +5,35 @@ import { type CSSResultGroup } from 'lit';
 export declare class SkfPopoverBase extends SkfElement {
     static styles: CSSResultGroup;
     static classMap: {};
-    isOpen: boolean;
+    $popover: this;
     placement: Placement;
     variant: 'dropdown' | 'popup' | 'tooltip';
     anchor?: string;
+    isOpen: boolean;
     offset: number;
     $anchor?: Element | HTMLElement | null;
     arrow: boolean;
-    $popover: HTMLElement;
-    $arrow: HTMLElement;
     /** @internal */
+    triggerEvent: 'mouseenter' | 'click';
+    $arrow: HTMLElement;
+    protected abortEventsController: AbortController;
+    protected signal: AbortSignal;
     protected popoverController: PopoverController;
-    private _toggleOpen;
+    constructor();
+    disconnectedCallback(): void;
+    protected _toggleOpen: (newValue?: boolean) => void;
     private _handleToggle;
-    handleToggleOpen: () => void;
+    handleToggleOpen: () => Promise<void>;
+    handleAnchorEl(): void;
     handleAnchorChange: () => Promise<void>;
     reposition: () => Promise<void>;
-    open: () => boolean;
-    close: () => boolean;
+    open: (e: Event) => void;
+    close: () => void;
+    /** @internal */
     addEventListeners($element: HTMLElement | Element): void;
+    /** @internal */
     removeEventListeners($element: HTMLElement | Element): void;
     render(): import("lit").TemplateResult<1>;
+    /** @internal helper */
+    private _containsFocusableElement;
 }

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

@@ -1,116 +1,160 @@
-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 { flip as C, offset as S, arrow as x, computePosition as A } from "@floating-ui/dom";
+import { SkfElement as _ } from "../../components/skf-element.js";
+import { PopoverController as P } from "../../controllers/popover.controller.js";
+import { uuid as w } from "../../helpers/uuid.js";
+import { watch as f } from "../../helpers/watch.js";
+import L from "../../../styles/component.styles.js";
+import { nothing as F, html as b } from "lit";
+import { property as m, state as c, query as M } 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 {
+import { styles as T } from "./popover.styles.js";
+var R = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (u, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? q(t, s) : t, n = u.length - 1, a; n >= 0; n--)
+    (a = u[n]) && (e = (i ? a(t, s, e) : a(e)) || e);
+  return i && e && R(t, s, e), e;
+}, l;
+const o = (l = class extends _ {
   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"
-      });
+    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) => {
+      this.isOpen = t ?? !this.isOpen;
+    }, this._handleToggle = (t) => {
+      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.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;
+      var n, a, h;
       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, {
+      const t = [C(), S(this.offset)];
+      this.arrow && t.push(x({ element: this.$arrow }));
+      const { x: s, y: i, middlewareData: e } = await A(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`
+        left: `${String(s)}px`,
+        top: `${String(i)}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 = {
+        const d = this.placement.split("-")[0], p = { 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, $ = (h = e.arrow) == null ? void 0 : h.y, y = typeof v == "number" ? `${String(v)}px` : "", E = typeof $ == "number" ? `${String($)}px` : "", O = {
           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`
+          top: E,
+          [this.placement.includes("left") ? "right" : "left"]: y,
+          [g ? d : p]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(O[p] + (g ? 180 : 0)).toString()}deg`
         });
       }
-    }, this.open = () => this._toggleOpen(!0), this.close = () => this._toggleOpen(!1);
+    }, this.open = (t) => {
+      t.stopPropagation(), this._toggleOpen(!0);
+    }, this.close = () => {
+      this._toggleOpen(!1);
+    }, this.setAttribute("popover", "");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.abortEventsController.abort();
   }
+  handleAnchorEl() {
+    if (!this.$anchor) return;
+    const t = this._containsFocusableElement(this);
+    this.$anchor.addEventListener(
+      "focusout",
+      (s) => {
+        const i = this.contains(s.relatedTarget);
+        t && i || this.close();
+      },
+      { signal: this.signal }
+    ), this.addEventListener("focusout", this.close), this.$anchor.addEventListener("focusin", this.open, { signal: this.signal }), this.$anchor.setAttribute("aria-controls", w(this.$anchor.id)), this.$anchor.setAttribute("aria-has-popup", "true"), this.$popover.id = w(this.$anchor.id);
+  }
+  /** @internal */
   addEventListeners(t) {
     throw new Error(`Cannot add eventListeners for ${t.id}. Method not implemented.`);
   }
+  /** @internal */
   removeEventListeners(t) {
     throw new Error(`Cannot remove eventListeners for ${t.id}. Method not implemented.`);
   }
   render() {
-    return y`
+    var t;
+    return (t = this.$anchor) == null || t.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), b`
 			<div
 				@toggle=${this._handleToggle}
-				class=${j({ popover: !0, ...s.classMap })}
+				class=${j({ popover: !0, ...l.classMap })}
 				id="popover"
-				popover
 			>
 				<slot></slot>
-				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : T}
+				${this.arrow ? b`<div class="popover__arrow" id="arrow"></div>` : F}
 			</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;
+  /** @internal helper */
+  _containsFocusableElement(t) {
+    return e(t, [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ]).length > 0;
+    function e(n, a) {
+      const h = Array.from(
+        n.querySelectorAll(a.join(", "))
+      ), d = Array.from(n.querySelectorAll("*")).map((p) => p.shadowRoot).filter((p) => p !== null);
+      for (const p of d)
+        h.push(
+          ...e(p, a)
+        );
+      return h;
+    }
+  }
+}, l.styles = [L, T], l.classMap = {}, l);
+r([
+  m()
+], o.prototype, "placement", 2);
+r([
+  m()
+], o.prototype, "variant", 2);
+r([
+  m()
+], o.prototype, "anchor", 2);
+r([
+  c()
+], o.prototype, "isOpen", 2);
+r([
+  c()
+], o.prototype, "offset", 2);
+r([
+  c()
+], o.prototype, "$anchor", 2);
+r([
+  c()
+], o.prototype, "arrow", 2);
+r([
+  c()
+], o.prototype, "triggerEvent", 2);
+r([
+  M("#arrow")
+], o.prototype, "$arrow", 2);
+r([
+  f("isOpen", { afterUpdate: !0 })
+], o.prototype, "handleToggleOpen", 2);
+r([
+  f("$anchor")
+], o.prototype, "handleAnchorEl", 1);
+r([
+  f("anchor")
+], o.prototype, "handleAnchorChange", 2);
+let H = o;
 export {
-  X as SkfPopoverBase
+  H as SkfPopoverBase
 };

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

@@ -2,13 +2,26 @@ import { css as o } from "lit";
 const e = o`
 	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		.popover {
+		:host {
 			background-color: var(--skf-bg-color-neutral-1);
 			border: none;
 			border-radius: var(--skf-border-radius-sm);
 			box-shadow: var(--skf-shadow-md);
+			contain: layout;
+			height: fit-content;
+			margin: 0;
 			opacity: 0;
 			overflow: visible;
+			width: fit-content;
+		}
+
+		:host(:not(:popover-open)) {
+			display: none;
+		}
+
+		#popover {
+			height: 100%;
+			width: 100%;
 		}
 
 		.popover__arrow {

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

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

package/dist/internal/controllers/elementOverflowController.d.ts

@@ -0,0 +1,13 @@
+import type { SkfNav } from '../../components/nav/nav.component.js';
+type InputControllerHost = SkfNav;
+export declare class ElementOverflowController {
+    host: InputControllerHost;
+    resizeObserver?: ResizeObserver;
+    watchedContainerEl?: HTMLElement;
+    isFullyVisible: boolean;
+    constructor(host: InputControllerHost);
+    initResizeObserver(el?: HTMLElement): void;
+    _checkVisibility: () => void;
+    disconnect(): void;
+}
+export {};

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

@@ -1,13 +1,19 @@
-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;
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Workaround for storybook helper not being able to import types
+ * E.g type ControllerHost = SkfPopover;
+ */
+interface ControllerHostProps {
+    $anchor?: Element | HTMLElement | null;
+    $popover?: Element | HTMLElement | null;
+    reposition: () => Promise<void>;
+}
 export declare class PopoverController implements ReactiveController {
-    host?: ControllerHost;
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     private cleanup;
     private active;
     private autoStart;
-    constructor(host: ControllerHost, autoStart?: boolean);
+    constructor(host: ReactiveControllerHost, autoStart?: boolean);
     hostConnected(): void;
     hostDisconnected(): void;
     start(): void;

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

@@ -1,8 +1,7 @@
-import "../../components/select/select.component.js";
-import { autoUpdate as n } from "@floating-ui/dom";
-class p {
+import { autoUpdate as h } from "@floating-ui/dom";
+class c {
   constructor(t, o = !0) {
-    this.active = !1, this.autoStart = !0, this.host = t, t.addController(this), this.autoStart = o;
+    this.active = !1, this.autoStart = !0, (this.host = t).addController(this), this.autoStart = o;
   }
   hostConnected() {
     var t;
@@ -18,15 +17,11 @@ class p {
     });
   }
   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) => {
+    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);
       });
     }), this.active = !0);
@@ -40,5 +35,5 @@ class p {
   }
 }
 export {
-  p as PopoverController
+  c as PopoverController
 };

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

@@ -0,0 +1,2 @@
+/** Formats a date to SKF standard format. Can be localized, defaults to GB English */
+export declare function dateFormatter(date?: Date | null, locale?: string): string;