@skf-design-system/ui-components 1.0.2-beta.1 → 1.0.2-beta.3

package/dist/components/{date-picker-input/datepicker-input.component.d.ts → datepicker/datepicker.component.d.ts}

@@ -4,9 +4,12 @@ import '../../internal/components/hint/hint.js';
 import { PopoverController } from '../../internal/controllers/popover.controller.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
-import '../date-picker/datepicker.js';
-import type { SkfDatePicker, SkfDatePickerDateRange } from '../date-picker/datepicker.js';
-export declare class SkfDatePickerInput extends FormBase {
+import type { SkfDatepickerPopup, SkfDatepickerPopupDateRange } from './datepicker-popup.component.js';
+import './datepicker-popup.js';
+/**
+ * @tagname skf-datepicker
+ */
+export declare class SkfDatepicker extends FormBase {
     /** @internal */
     static styles: CSSResultGroup;
     /**	@inernal */
@@ -61,7 +64,7 @@ export declare class SkfDatePickerInput extends FormBase {
     /** true if the internal state is invalid  */
     invalid: boolean;
     /** @internal */
-    selectedRangeDates: SkfDatePickerDateRange;
+    selectedRangeDates: SkfDatepickerPopupDateRange;
     /** @internal */
     private showClearbutton;
     /** @internal */
@@ -73,35 +76,37 @@ export declare class SkfDatePickerInput extends FormBase {
     /** @internal */
     $input_range_end: HTMLInputElement;
     /** @internal */
-    $datepicker: SkfDatePicker;
+    $datepickerPopup: SkfDatepickerPopup;
     /** @internal */
     _defaultSlot: Node[];
-    abortController: AbortController;
-    abortSignal: AbortSignal;
+    /** @internal */
+    private abortController;
+    /** @internal */
+    private abortSignal;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    _handleSelectedDate: () => void;
+    private _handleSelectedDate;
     protected firstUpdated(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    _handleValueChange(): void;
     private _handleDateSelected;
     /** @internal */
     _handleKeyboardEvents: (e: KeyboardEvent) => void;
     /** @internal */
     private _handleFocus;
-    showPopover: () => void;
-    hidePopover: () => void;
+    showPopover(): void;
+    hidePopover(): void;
     /** @internal */
     _handleBlur: (event: FocusEvent) => void;
     /** @internal */
     private _handleClose;
     /** @internal */
     private clearInput;
-    _handleValueChange(): void;
     /**
      * Clears the input field
      */
-    clear: () => void;
+    clear(): void;
     /** @internal although called on input its only triggered once value is valid date */
     _handleInput: (event: Event) => void;
     /** @internal */

package/dist/components/{date-picker-input/datepicker-input.component.js → datepicker/datepicker.component.js}

@@ -1,28 +1,28 @@
-import { dateFormatter as v, is as f, isPopoverOpen as S, debounce as E } from "./datepicker-input.helpers.js";
 import "../icon/icon.js";
-import { computePosition as C, flip as I, offset as O } from "@floating-ui/dom";
-import { FormBase as M } from "../../internal/components/formBase.js";
+import { computePosition as P, flip as S, offset as E } from "@floating-ui/dom";
+import { FormBase as C } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { PopoverController as P } from "../../internal/controllers/popover.controller.js";
-import { hintSeverity as T } from "../../internal/helpers/hintSeverity.js";
-import { watch as B } from "../../internal/helpers/watch.js";
-import { Asterisk as x } from "../../internal/templates/asterisk.js";
+import { PopoverController as I } from "../../internal/controllers/popover.controller.js";
+import { hintSeverity as O } from "../../internal/helpers/hintSeverity.js";
+import { watch as M } from "../../internal/helpers/watch.js";
+import { Asterisk as T } from "../../internal/templates/asterisk.js";
 import { Temporal as w } from "@js-temporal/polyfill";
-import { componentStyles as L } from "../../styles/component.styles.js";
+import { componentStyles as B } from "../../styles/component.styles.js";
 import { nothing as g, html as y } from "lit";
-import { property as h, state as $, query as b, queryAssignedNodes as R } from "lit/decorators.js";
-import { ifDefined as p } from "lit/directives/if-defined.js";
+import { property as h, state as $, query as b, queryAssignedNodes as x } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
 import { live as F } from "lit/directives/live.js";
-import "../date-picker/datepicker.js";
-import { styles as A } from "./datepicker-input.styles.js";
+import "./datepicker-popup.js";
+import { dateFormatter as v, is as f, isPopoverOpen as L, debounce as R } from "./datepicker.helpers.js";
+import { styles as A } from "./datepicker.styles.js";
 var j = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (D, e, t, a) => {
-  for (var l = a > 1 ? void 0 : a ? q(e, t) : e, n = D.length - 1, d; n >= 0; n--)
-    (d = D[n]) && (l = (a ? d(e, t, l) : d(l)) || l);
-  return a && l && j(e, t, l), l;
+  for (var o = a > 1 ? void 0 : a ? q(e, t) : e, n = D.length - 1, d; n >= 0; n--)
+    (d = D[n]) && (o = (a ? d(e, t, o) : d(o)) || o);
+  return a && o && j(e, t, o), o;
 };
-const _ = class _ extends M {
+const _ = class _ extends C {
   constructor() {
-    super(), this.popoverController = new P(this), this.id = "skf-datepicker-input", this.placeholder = "YYYY-MM-DD", this.range = !1, this.size = "md", this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this.abortController = new AbortController(), this.abortSignal = this.abortController.signal, this._handleSelectedDate = () => {
+    super(), this.popoverController = new I(this), this.id = "skf-datepicker-input", this.placeholder = "YYYY-MM-DD", this.range = !1, this.size = "md", this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this.abortController = new AbortController(), this.abortSignal = this.abortController.signal, this._handleSelectedDate = () => {
       this.pristine = !1, this._internals.setFormValue(this.value ?? ""), this.validateInput();
     }, this._handleDateSelected = (e) => {
       if (this.range && "start" in e.detail.date && "end" in e.detail.date) {
@@ -32,31 +32,31 @@ const _ = class _ extends M {
         this.$popover.hidePopover();
       }));
     }, this._handleKeyboardEvents = (e) => {
-      var a, l;
+      var a, o;
       const t = e.target.closest("input");
       if (t) {
         if ((t.selectionStart ?? 0) < t.value.length && /[[0-9-]/.test(e.key)) {
-          const n = t.selectionStart ?? 0, u = t.value.split("").slice(0, n);
-          t.value = u.join("");
+          const n = t.selectionStart ?? 0, p = t.value.split("").slice(0, n);
+          t.value = p.join("");
         }
         if (t.name.endsWith("-end") && (e.key === "Backspace" && t.value.length === 0 || t.selectionStart === 0 && e.key === "ArrowLeft") && (e.preventDefault(), this.$input.focus()), e.key === "Tab" && !e.shiftKey && t.name.endsWith("-end")) {
           e.preventDefault();
-          const d = (a = this.$popover.childNodes[1].shadowRoot) == null ? void 0 : a.querySelector("skf-datepicker-calendar"), u = (l = d == null ? void 0 : d.shadowRoot) == null ? void 0 : l.querySelector("button");
-          u == null || u.focus();
+          const d = (a = this.$popover.childNodes[1].shadowRoot) == null ? void 0 : a.querySelector("skf-datepicker-calendar"), p = (o = d == null ? void 0 : d.shadowRoot) == null ? void 0 : o.querySelector("button");
+          p == null || p.focus();
         }
         if ((t.value.length === 4 || t.value.length === 7) && /[[0-9]/.test(e.key) && (t.value = `${t.value}-${e.key}`, e.preventDefault()), e.key === "Escape")
           if (t.blur(), this.$popover.hidePopover(), this.range) {
             const n = this.$input.value, d = this.$input_range_end.value;
             if (!f(n, d).date()) return;
-            this.$datepicker.selectedDateRange = {
+            this.$datepickerPopup.selectedDateRange = {
               start: new Date(n),
               end: new Date(d)
-            }, this.$datepicker.emit("selected-date-changed", {
+            }, this.$datepickerPopup.emit("selected-date-changed", {
               detail: { date: new Date(n) }
             });
           } else {
             if (!t.value || !f(t.value).date()) return;
-            this.$datepicker.emit("selected-date-changed", {
+            this.$datepickerPopup.emit("selected-date-changed", {
               detail: { date: new Date(t.value) }
             });
           }
@@ -64,36 +64,26 @@ const _ = class _ extends M {
       }
     }, this._handleFocus = () => {
       this.showPopover();
-    }, this.showPopover = () => {
-      if (S(this.$popover)) return;
-      E(() => {
-        this.$popover.showPopover(), this._animatePopover({ show: !0 });
-      }, 200)(), this.addEventListener("focusout", this.hidePopover, { once: !0, signal: this.abortSignal });
-    }, this.hidePopover = () => {
-      var t;
-      this.removeEventListener("focusout", this.hidePopover), ((t = document.activeElement) == null ? void 0 : t.closest("skf-datepicker-input")) !== this && this.$popover.hidePopover();
     }, this._handleBlur = (e) => {
       !e.target.name.endsWith("-end") && this.range;
     }, this._handleClose = () => {
       this.$anchor.blur();
     }, this.clearInput = () => {
-      this.value = "", this.$datepicker.clearSelection();
-    }, this.clear = () => {
-      this.clearInput(), this._toggleClearButton(!1);
+      this.value = "", this.$datepickerPopup.clearSelection();
     }, this._handleInput = (e) => {
       const t = e.target, a = String(t.value).replace(/[^0-9-]/g, "");
       if (t.value = a, t.setCustomValidity(this.customError ?? ""), !!f(t.value).ISO()) {
-        if (this.focusTimeoutId && clearTimeout(this.focusTimeoutId), this.$datepicker.date = t.value, this.range) {
-          this.$datepicker.selectedDateRange = {
+        if (this.focusTimeoutId && clearTimeout(this.focusTimeoutId), this.$datepickerPopup.date = t.value, this.range) {
+          this.$datepickerPopup.selectedDateRange = {
             start: f(this.$input.value).ISO() ? new Date(this.$input.value) : null,
             end: f(this.$input_range_end.value).ISO() ? new Date(this.$input_range_end.value) : null
           };
-          const l = Object.values(this.$datepicker.selectedDateRange).filter(Boolean).map((n) => new Date(n).toLocaleDateString("en-CA")).join();
-          this.value = l, f(this.$input.value).ISO() && (this.focusTimeoutId = setTimeout(() => {
+          const o = Object.values(this.$datepickerPopup.selectedDateRange).filter(Boolean).map((n) => new Date(n).toLocaleDateString("en-CA")).join();
+          this.value = o, f(this.$input.value).ISO() && (this.focusTimeoutId = setTimeout(() => {
             this.$input_range_end.focus();
           }, 200));
         } else
-          this.$datepicker.selectedDate = new Date(t.value), this.$datepicker.emit("selected-date-changed", {
+          this.$datepickerPopup.selectedDate = new Date(t.value), this.$datepickerPopup.emit("selected-date-changed", {
             detail: { date: new Date(t.value) }
           });
         this.validateOn === "input" && (this._pristine = !1, this.validateInput());
@@ -101,9 +91,9 @@ const _ = class _ extends M {
     }, this._toggleClearButton = (e = !1) => {
       this.showClearbutton = e;
     }, this.reposition = async () => {
-      const { x: e, y: t } = await C(this.$anchor, this.$popover, {
+      const { x: e, y: t } = await P(this.$anchor, this.$popover, {
         placement: "bottom-start",
-        middleware: [I(), O(0)],
+        middleware: [S(), E(0)],
         strategy: "fixed"
       });
       Object.assign(this.$popover.style, {
@@ -129,10 +119,10 @@ const _ = class _ extends M {
   }
   firstUpdated() {
     var e;
-    this.$datepicker.date = this._init_date ? w.PlainDate.from(this._init_date).toString() : w.Now.plainDateISO().toString(), this.range ? this.$datepicker.selectedDateRange = {
+    this.$datepickerPopup.date = this._init_date ? w.PlainDate.from(this._init_date).toString() : w.Now.plainDateISO().toString(), this.range ? this.$datepickerPopup.selectedDateRange = {
       start: this._init_date ? new Date(this._init_date) : null,
       end: (e = this.value) != null && e.split(",")[1] ? new Date(this.value.split(",")[1]) : null
-    } : this.$datepicker.selectedDate = this._init_date ? new Date(this._init_date) : void 0, this.hint && !this.hasAttribute("hint") && this.setAttribute("hint", this.hint), this.validateInput();
+    } : this.$datepickerPopup.selectedDate = this._init_date ? new Date(this._init_date) : void 0, this.hint && !this.hasAttribute("hint") && this.setAttribute("hint", this.hint), this.validateInput();
   }
   attributeChangedCallback(e, t, a) {
     if (super.attributeChangedCallback(e, t, a), e === "custom-invalid")
@@ -143,19 +133,38 @@ const _ = class _ extends M {
         this._internals.setValidity({}), this.validateInput();
   }
   _handleValueChange() {
-    var e, t, a, l, n, d, u, i;
-    (e = this.value) != null && e.trim() || this.$datepicker.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v((t = this.value) == null ? void 0 : t.split(",")[0]), this.range ? (this.$datepicker.selectedDateRange = {
+    var e, t, a, o, n, d, p, i;
+    (e = this.value) != null && e.trim() || this.$datepickerPopup.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v((t = this.value) == null ? void 0 : t.split(",")[0]), this.range ? (this.$datepickerPopup.selectedDateRange = {
       start: (n = this.value) != null && n.split(",")[0] ? new Date(this.value.split(",")[0]) : null,
       end: (d = this.value) != null && d.split(",")[1] ? new Date(this.value.split(",")[1]) : null
-    }, this.$input_range_end.value = v((u = this.value) == null ? void 0 : u.split(",")[1]), this.$datepicker.date = ((i = this.value) == null ? void 0 : i.split(",")[0]) ?? "") : (this.$datepicker.selectedDate = (a = this.value) != null && a.split(",")[0] ? new Date(this.value.split(",")[0]) : void 0, this.$datepicker.date = ((l = this.value) == null ? void 0 : l.split(",")[0]) ?? ""), this.validateInput();
+    }, this.$input_range_end.value = v((p = this.value) == null ? void 0 : p.split(",")[1]), this.$datepickerPopup.date = ((i = this.value) == null ? void 0 : i.split(",")[0]) ?? "") : (this.$datepickerPopup.selectedDate = (a = this.value) != null && a.split(",")[0] ? new Date(this.value.split(",")[0]) : void 0, this.$datepickerPopup.date = ((o = this.value) == null ? void 0 : o.split(",")[0]) ?? ""), this.validateInput();
+  }
+  showPopover() {
+    if (L(this.$popover)) return;
+    R(() => {
+      this.$popover.showPopover(), this._animatePopover({ show: !0 });
+    }, 200)(), this.addEventListener("focusout", this.hidePopover.bind(this), {
+      once: !0,
+      signal: this.abortSignal
+    });
+  }
+  hidePopover() {
+    var t;
+    this.removeEventListener("focusout", this.hidePopover.bind(this)), ((t = document.activeElement) == null ? void 0 : t.closest("skf-datepicker-input")) !== this && this.$popover.hidePopover();
+  }
+  /**
+   * Clears the input field
+   */
+  clear() {
+    this.clearInput(), this._toggleClearButton(!1);
   }
   /** @internal */
   async _animatePopover({ el: e = this.$popover, show: t }) {
     return t && (e.style.opacity = "0", e.style.transform = "scaleY(0.5)"), new Promise((a) => {
-      const l = [
+      const o = [
         { opacity: 0, transform: "scaleY(0.5)" },
         { opacity: 1, transform: "scaleY(1)" }
-      ], n = t ? l : l.reverse();
+      ], n = t ? o : o.reverse();
       setTimeout(
         () => {
           e.style.transformOrigin = "top";
@@ -177,20 +186,20 @@ const _ = class _ extends M {
     if (this._internals.validity.customError) return;
     let t = JSON.parse(JSON.stringify(this._internals.validity)), a = {};
     if (this.selectableFrom) {
-      const { validityFragment: i, errorMessageFragment: o } = l(this);
-      t = { ...t, ...i }, a = { ...a, ...o };
+      const { validityFragment: i, errorMessageFragment: l } = o(this);
+      t = { ...t, ...i }, a = { ...a, ...l };
     }
     if (this.selectableTo) {
-      const { validityFragment: i, errorMessageFragment: o } = n(this);
-      t = { ...t, ...i }, a = { ...a, ...o };
+      const { validityFragment: i, errorMessageFragment: l } = n(this);
+      t = { ...t, ...i }, a = { ...a, ...l };
     }
     if (this.range) {
-      const { validityFragment: i, errorMessageFragment: o } = d(this);
-      t = { ...t, ...i }, a = { ...a, ...o };
+      const { validityFragment: i, errorMessageFragment: l } = d(this);
+      t = { ...t, ...i }, a = { ...a, ...l };
     }
     if (this.required) {
-      const { validityFragment: i, errorMessageFragment: o } = u(this);
-      t = { ...t, ...i }, a = { ...a, ...o };
+      const { validityFragment: i, errorMessageFragment: l } = p(this);
+      t = { ...t, ...i }, a = { ...a, ...l };
     }
     if (t.valid = !Object.values(t).some((i) => i), this.invalid = !1, t.valid)
       this._internals.setValidity({ customError: this._internals.validity.customError }), this.hint = this.getAttribute("hint") ?? "";
@@ -198,10 +207,10 @@ const _ = class _ extends M {
       this.invalid = !this._pristine && !t.valid;
       let i;
       for (i in t) {
-        const o = `data-${i.toString()}`;
+        const l = `data-${i.toString()}`;
         if (t[i]) {
           this.validationError = i.toString();
-          const c = this.hasAttribute(o) ? this.getAttribute(o) : a[i];
+          const c = this.hasAttribute(l) ? this.getAttribute(l) : a[i];
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
             this.withFallback(c)
@@ -209,9 +218,9 @@ const _ = class _ extends M {
         }
       }
     }
-    function l(i) {
-      const o = { validityFragment: {}, errorMessageFragment: {} };
-      if (!i.selectableFrom) return o;
+    function o(i) {
+      const l = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableFrom) return l;
       const c = new Date(i.selectableFrom);
       if (new Date(i.$input.value) < c) {
         const m = i.getAttribute("data-rangeunderflow") ?? `Date is out of range. Earliest selectable date is ${i.selectableFrom}.`;
@@ -220,11 +229,11 @@ const _ = class _ extends M {
           errorMessageFragment: { rangeUnderflow: m }
         };
       }
-      return o;
+      return l;
     }
     function n(i) {
-      const o = { validityFragment: {}, errorMessageFragment: {} };
-      if (!i.selectableTo) return o;
+      const l = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableTo) return l;
       const c = new Date(i.selectableTo);
       if (new Date(i.$input.value) > c) {
         const m = i.getAttribute("data-rangeoverflow") ?? `Date is out of range. Latest selectable date is ${i.selectableTo}.`;
@@ -233,10 +242,10 @@ const _ = class _ extends M {
           errorMessageFragment: { rangeOverflow: m }
         };
       }
-      return o;
+      return l;
     }
     function d(i) {
-      const o = { validityFragment: {}, errorMessageFragment: {} }, c = new Date(i.$input.value);
+      const l = { validityFragment: {}, errorMessageFragment: {} }, c = new Date(i.$input.value);
       if (new Date(i.$input_range_end.value) < c) {
         const m = i.getAttribute("data-rangeunderflow") ?? "End date cannot be before start date";
         return {
@@ -244,18 +253,18 @@ const _ = class _ extends M {
           errorMessageFragment: { rangeUnderflow: m }
         };
       }
-      return o;
+      return l;
     }
-    function u(i) {
-      const o = { validityFragment: {}, errorMessageFragment: {} };
+    function p(i) {
+      const l = { validityFragment: {}, errorMessageFragment: {} };
       return !i.$input.value || i.range && !i.$input_range_end.value ? {
         validityFragment: { valueMissing: !0, valid: !1 },
         errorMessageFragment: { valueMissing: "This field is required" }
-      } : o;
+      } : l;
     }
   }
   render() {
-    var t, a, l, n, d, u, i, o;
+    var t, a, o, n, d, p, i, l;
     const e = (this._defaultSlot.length === 0 || !((a = (t = this._defaultSlot[0]) == null ? void 0 : t.textContent) != null && a.trim())) && !this.label;
     return y`
 			<div
@@ -270,29 +279,29 @@ const _ = class _ extends M {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${e} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? x(this.requiredLabel) : null}
+						${this.required ? T(this.requiredLabel) : null}
 					</div>
 					<div id="input">
 						<input
 							?disabled=${this.disabled}
 							?readonly=${this.readonly}
 							.value=${F(
-      this.range ? v((l = this.value) == null ? void 0 : l.split(",")[0]) : v(this.value)
+      this.range ? v((o = this.value) == null ? void 0 : o.split(",")[0]) : v(this.value)
     )}
 							@blur=${this._handleBlur}
 							@click=${this._handleFocus}
 							@focus=${this._handleFocus}
 							@input=${this._handleInput}
 							@keydown=${this._handleKeyboardEvents}
-							aria-describedby=${p((n = this.hint) != null && n.trim() ? "hint" : g)}
-							aria-errormessage=${p((d = this.hint) != null && d.trim() ? "hint" : g)}
+							aria-describedby=${u((n = this.hint) != null && n.trim() ? "hint" : g)}
+							aria-errormessage=${u((d = this.hint) != null && d.trim() ? "hint" : g)}
 							aria-invalid=${!!this.invalid}
 							autocomplete="off"
 							data-testid="field-input"
-							inputmode=${p(this.inputMode)}
+							inputmode=${u(this.inputMode)}
 							maxlength="10"
 							name=${this.name ?? "calendar"}
-							placeholder=${p(this.placeholder)}
+							placeholder=${u(this.placeholder)}
 							type="text"
 						/>
 						${this.range ? y`
@@ -300,26 +309,30 @@ const _ = class _ extends M {
 									<input
 										?disabled=${this.disabled}
 										?readonly=${this.readonly}
-										.value=${F(v((u = this.value) == null ? void 0 : u.split(",")[1]))}
+										.value=${F(v((p = this.value) == null ? void 0 : p.split(",")[1]))}
 										@blur=${this._handleBlur}
 										@click=${this._handleFocus}
 										@focus=${this._handleFocus}
 										@input=${this._handleInput}
 										@keydown=${this._handleKeyboardEvents}
-										aria-describedby=${p((i = this.hint) != null && i.trim() ? "hint" : g)}
-										aria-errormessage=${p((o = this.hint) != null && o.trim() ? "hint" : g)}
+										aria-describedby=${u((i = this.hint) != null && i.trim() ? "hint" : g)}
+										aria-errormessage=${u((l = this.hint) != null && l.trim() ? "hint" : g)}
 										aria-invalid=${!!this.invalid}
 										autocomplete="off"
 										data-testid="field-input-range-end"
-										inputmode=${p(this.inputMode)}
+										inputmode=${u(this.inputMode)}
 										maxlength="10"
 										name=${(this.name ?? "calendar") + "-end"}
-										placeholder=${p(this.placeholder)}
+										placeholder=${u(this.placeholder)}
 										type="text"
 									/>
 								` : g}
 						${this.showClearbutton ? y`
-									<button class="password skf-icon-host" type="button" @click=${this.clear}>
+									<button
+										class="password skf-icon-host"
+										type="button"
+										@click=${this.clear.bind(this)}
+									>
 										<skf-icon name="close" size="sm"></skf-icon>
 									</button>
 								` : y`
@@ -333,25 +346,25 @@ const _ = class _ extends M {
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${p(T(this.invalid, this.severity))}
+						severity=${u(O(this.invalid, this.severity))}
 						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
 			</div>
 
 			<div id="popover" popover @close=${this._handleClose}>
-				<skf-datepicker
+				<skf-datepicker-popup
 					?range=${this.range}
 					id=${this.id}
-					invalid-dates=${p(this.invalidDates)}
-					selectable-from=${p(this.selectableFrom)}
-					selectable-to=${p(this.selectableTo)}
-				></skf-datepicker>
+					invalid-dates=${u(this.invalidDates)}
+					selectable-from=${u(this.selectableFrom)}
+					selectable-to=${u(this.selectableTo)}
+				></skf-datepicker-popup>
 			</div>
 		`;
   }
 };
-_.styles = [L, A];
+_.styles = [B, A];
 let s = _;
 r([
   h({ attribute: "custom-invalid", reflect: !0 })
@@ -429,14 +442,14 @@ r([
   b('input[data-testid="field-input-range-end"]')
 ], s.prototype, "$input_range_end", 2);
 r([
-  b("skf-datepicker")
-], s.prototype, "$datepicker", 2);
+  b("skf-datepicker-popup")
+], s.prototype, "$datepickerPopup", 2);
 r([
-  R({ flatten: !0 })
+  x({ flatten: !0 })
 ], s.prototype, "_defaultSlot", 2);
 r([
-  B("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+  M("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
 ], s.prototype, "_handleValueChange", 1);
 export {
-  s as SkfDatePickerInput
+  s as SkfDatepicker
 };

package/dist/components/datepicker/datepicker.d.ts

@@ -0,0 +1,8 @@
+import { SkfDatepicker } from './datepicker.component.js';
+export * from './datepicker.component.js';
+export default SkfDatepicker;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-datepicker': SkfDatepicker;
+    }
+}

package/dist/components/datepicker/datepicker.js

@@ -0,0 +1,6 @@
+import { SkfDatepicker as e } from "./datepicker.component.js";
+e.define("skf-datepicker");
+export {
+  e as SkfDatepicker,
+  e as default
+};

package/dist/components/dialog/dialog.component.js

@@ -103,7 +103,7 @@ const y = class y extends C {
   /** Method that opens the dialog in modal state */
   async showModal() {
     async function t(o) {
-      return o.$dialog ? (o.$dialog.showModal(), await o._transition().entry(), o.emit("skf-dialog-opened"), !0) : !1;
+      return o.$dialog ? (o.open = !0, o.$dialog.showModal(), await o._transition().entry(), o.emit("skf-dialog-opened"), !0) : !1;
     }
     return await t(this);
   }

package/dist/components/dialog/dialog.d.ts

@@ -1,5 +1,5 @@
-import { SkfDialog } from './dialog.component';
-export * from './dialog.component';
+import { SkfDialog } from './dialog.component.js';
+export * from './dialog.component.js';
 export default SkfDialog;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
-import { SkfDrawer } from './drawer.component';
-export * from './drawer.component';
+import { SkfDrawer } from './drawer.component.js';
+export * from './drawer.component.js';
 export default SkfDrawer;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/header/header.d.ts

@@ -1,5 +1,5 @@
-import { SkfHeader } from './header.component';
-export * from './header.component';
+import { SkfHeader } from './header.component.js';
+export * from './header.component.js';
 export default SkfHeader;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/heading/heading.component.js

@@ -1,35 +1,49 @@
 import { SkfElement as f } from "../../internal/components/skf-element.js";
-import { componentStyles as n } from "../../styles/component.styles.js";
+import { componentStyles as c } from "../../styles/component.styles.js";
 import "lit";
-import { property as i } from "lit/decorators.js";
-import { literal as u, html as c } from "lit/static-html.js";
-import { styles as y } from "./heading.styles.js";
-var d = Object.defineProperty, a = (l, r, p, h) => {
-  for (var t = void 0, o = l.length - 1, m; o >= 0; o--)
-    (m = l[o]) && (t = m(r, p, t) || t);
-  return t && d(r, p, t), t;
+import { property as h } from "lit/decorators.js";
+import { literal as e, html as u } from "lit/static-html.js";
+import { styles as n } from "./heading.styles.js";
+var y = Object.defineProperty, m = (l, t, i, d) => {
+  for (var r = void 0, o = l.length - 1, p; o >= 0; o--)
+    (p = l[o]) && (r = p(t, i, r) || r);
+  return r && y(t, i, r), r;
 };
-const s = class s extends f {
+const a = class a extends f {
   constructor() {
     super(...arguments), this.as = "h2";
   }
   render() {
-    const r = u`${this.as}`;
-    return c`
-			<${r} id="root">
+    let t;
+    switch (!0) {
+      case this.as === "h1":
+        t = e`h1`;
+        break;
+      case this.as === "h3":
+        t = e`h3`;
+        break;
+      case this.as === "h4":
+        t = e`h4`;
+        break;
+      default:
+        t = e`h2`;
+        break;
+    }
+    return u`
+			<${t} id="root">
 				<slot></slot>
-			</${r}>
+			</${t}>
 		`;
   }
 };
-s.styles = [n, y];
-let e = s;
-a([
-  i({ reflect: !0 })
-], e.prototype, "as");
-a([
-  i({ attribute: "styled-as", reflect: !0 })
-], e.prototype, "styledAs");
+a.styles = [c, n];
+let s = a;
+m([
+  h({ reflect: !0 })
+], s.prototype, "as");
+m([
+  h({ attribute: "styled-as", reflect: !0 })
+], s.prototype, "styledAs");
 export {
-  e as SkfHeading
+  s as SkfHeading
 };