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

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

@@ -0,0 +1,397 @@
+import { dateFormatter as v, isPopoverOpen as S, debounce as E, isDate as $ } from "./datepicker-input.helpers.js";
+import { computePosition as C, flip as I, offset as M } from "@floating-ui/dom";
+import { FormBase as O } from "../../internal/components/formBase.js";
+import { PopoverController as T } from "../../internal/controllers/popover.controller.js";
+import { hintSeverity as B } from "../../internal/helpers/hintSeverity.js";
+import { watch as P } from "../../internal/helpers/watch.js";
+import { Asterisk as x } from "../../internal/templates/asterisk.js";
+import { Temporal as F } from "@js-temporal/polyfill";
+import q from "../../styles/component.styles.js";
+import { html as m, nothing as g } from "lit";
+import { property as d, state as b, query as y, queryAssignedNodes as R } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { live as k } from "lit/directives/live.js";
+import "../date-picker/datepicker.js";
+import { styles as j } from "./datepicker-input.styles.js";
+var L = Object.defineProperty, V = Object.getOwnPropertyDescriptor, n = (D, t, e, a) => {
+  for (var l = a > 1 ? void 0 : a ? V(t, e) : t, o = D.length - 1, h; o >= 0; o--)
+    (h = D[o]) && (l = (a ? h(t, e, l) : h(l)) || l);
+  return a && l && L(t, e, l), l;
+};
+const _ = class _ extends O {
+  constructor() {
+    super(), this.popoverController = new T(this), this.id = "skf-datepicker-input", this.placeholder = "Select date", this.range = !1, this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this._handleSelectedDate = (t) => {
+      console.log("selected-date-changed event fired", this.value || "no value", t.detail), this.pristine = !1, this._internals.setFormValue(this.value ?? ""), this.validateInput();
+    }, this._handleDateSelected = (t) => {
+      if (this.range && "start" in t.detail.date && "end" in t.detail.date) {
+        const e = t.detail.date.start, a = t.detail.date.end;
+        this.value = `${v(e)},${v(a)}`, this.selectedRangeDates = { start: e, end: a };
+      } else !this.range && t.detail.date instanceof Date && (this.value = v(t.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
+        this.$popover.hidePopover();
+      }));
+    }, this._handleFocus = () => {
+      if (S(this.$popover)) return;
+      E(() => {
+        this.$popover.showPopover(), this._animatePopover({ show: !0 });
+      }, 200)();
+    }, this._handleBlur = (t) => {
+      const e = t.target;
+      if (!e.name.endsWith("-end") && !this.range) return;
+      if ($(e.value) && this.$datepicker.emit("selected-date-changed", {
+        detail: { date: new Date(e.value) }
+      }), e.name.endsWith("-end") || !this.range) {
+        const l = t.relatedTarget;
+        a(this, l);
+      }
+      function a(l, o) {
+        var h, c;
+        if (o && !l.contains(o)) {
+          console.log("Tab out detected");
+          const r = (h = l.$popover.childNodes[1].shadowRoot) == null ? void 0 : h.querySelector("skf-datepicker-calendar"), p = (c = r == null ? void 0 : r.shadowRoot) == null ? void 0 : c.querySelector("button");
+          p == null || p.focus();
+        }
+      }
+    }, this._handleClose = () => {
+      this.$anchor.blur();
+    }, this.clearInput = () => {
+      this.value = "", this.$datepicker.clearSelection();
+    }, this.clear = () => {
+      this.clearInput(), this._toggleClearButton(!1);
+    }, this._handleInput = (t) => {
+      const e = t.target;
+      e.setCustomValidity(this.customError ?? ""), this.focusTomeoutId && clearTimeout(this.focusTomeoutId), this.$datepicker.date = e.value, this.range ? (this.$datepicker.selectedDateRange = {
+        start: $(this.$input.value) ? new Date(this.$input.value) : null,
+        end: $(this.$input_range_end.value) ? new Date(this.$input_range_end.value) : null
+      }, $(this.$input.value) && (this.focusTomeoutId = setTimeout(() => {
+        this.$input_range_end.focus();
+      }, 2e3))) : this.$datepicker.selectedDate = new Date(e.value), this.validateOn === "input" && (this._pristine = !1, this.validateInput());
+    }, this._toggleClearButton = (t = !1) => {
+      this.showClearbutton = t;
+    }, this.reposition = async () => {
+      const { x: t, y: e } = await C(this.$anchor, this.$popover, {
+        placement: "bottom-start",
+        middleware: [I(), M(0)],
+        strategy: "fixed"
+      });
+      Object.assign(this.$popover.style, {
+        left: `${String(t)}px`,
+        top: `${String(e)}px`
+      });
+    }, this.addEventListener("skf-datepicker-selected", this._handleDateSelected), this.addEventListener("reset", () => {
+      this.clearInput(), this.validateInput();
+    });
+  }
+  set customInvalid(t) {
+    this.customError = t || "";
+  }
+  get customInvalid() {
+    return this.customError;
+  }
+  connectedCallback() {
+    var t;
+    super.connectedCallback(), this._init_date = (t = this.value) == null ? void 0 : t.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
+  }
+  firstUpdated() {
+    var t;
+    this.$datepicker.date = this._init_date ? F.PlainDate.from(this._init_date).toString() : F.Now.plainDateISO().toString(), this.range ? this.$datepicker.selectedDateRange = {
+      start: this._init_date ? new Date(this._init_date) : null,
+      end: (t = this.value) != null && t.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    } : this.$datepicker.selectedDate = this._init_date ? new Date(this._init_date) : void 0, this.validateInput();
+  }
+  attributeChangedCallback(t, e, a) {
+    if (super.attributeChangedCallback(t, e, a), t === "custom-invalid")
+      if (typeof a == "string") {
+        const o = this.withFallback(a);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, o), this.invalid = !0, this.hint = o, this.checkValidity();
+      } else
+        this._internals.setValidity({}), this.validateInput();
+  }
+  _handleValueChange() {
+    var t, e, a, l, o, h, c, i;
+    (t = this.value) != null && t.trim() || this.$datepicker.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v((e = this.value) == null ? void 0 : e.split(",")[0]), this.range ? (this.$datepicker.selectedDateRange = {
+      start: (o = this.value) != null && o.split(",")[0] ? new Date(this.value.split(",")[0]) : null,
+      end: (h = this.value) != null && h.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    }, this.$input_range_end.value = v((c = this.value) == null ? void 0 : c.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();
+  }
+  /** @internal */
+  async _animatePopover({ el: t = this.$popover, show: e }) {
+    return e && (t.style.opacity = "0", t.style.transform = "scaleY(0.5)"), new Promise((a) => {
+      const l = [
+        { opacity: 0, transform: "scaleY(0.5)" },
+        { opacity: 1, transform: "scaleY(1)" }
+      ], o = e ? l : l.reverse();
+      setTimeout(
+        () => {
+          t.style.transformOrigin = "top";
+          const h = this.$popover.animate(o, {
+            duration: 100,
+            easing: "linear",
+            fill: "both"
+          });
+          h.onfinish = () => {
+            a();
+          };
+        },
+        e ? 0 : 50
+      );
+    });
+  }
+  /** @internal consider sharing this functionality with input */
+  validateInput() {
+    if (this._internals.validity.customError) return;
+    let e = JSON.parse(JSON.stringify(this._internals.validity)), a = {};
+    if (this.selectableFrom) {
+      const { validityFragment: i, errorMessageFragment: r } = l(this);
+      e = { ...e, ...i }, a = { ...a, ...r };
+    }
+    if (this.selectableTo) {
+      const { validityFragment: i, errorMessageFragment: r } = o(this);
+      e = { ...e, ...i }, a = { ...a, ...r };
+    }
+    if (this.range) {
+      const { validityFragment: i, errorMessageFragment: r } = h(this);
+      e = { ...e, ...i }, a = { ...a, ...r };
+    }
+    if (this.required) {
+      const { validityFragment: i, errorMessageFragment: r } = c(this);
+      e = { ...e, ...i }, a = { ...a, ...r };
+    }
+    if (e.valid = !Object.values(e).some((i) => i), this.invalid = !1, e.valid)
+      this._internals.setValidity({ customError: this._internals.validity.customError });
+    else {
+      this.invalid = !this._pristine && !e.valid;
+      let i;
+      for (i in e) {
+        const r = `data-${i.toString()}`;
+        if (e[i]) {
+          this.validationError = i.toString();
+          const p = this.hasAttribute(r) ? this.getAttribute(r) : a[i];
+          this._internals.setValidity(
+            { [this.validationError]: !0, customError: this._internals.validity.customError },
+            this.withFallback(p)
+          ), this.invalid && this.customErrorDisplay && this.checkValidity();
+        }
+      }
+    }
+    function l(i) {
+      const r = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableFrom) return r;
+      const p = new Date(i.selectableFrom);
+      if (new Date(i.$input.value) < p) {
+        const f = i.getAttribute("data-rangeunderflow") ?? "Date is out of range";
+        return {
+          validityFragment: { rangeUnderflow: !0, valid: !1 },
+          errorMessageFragment: { rangeUnderflow: f }
+        };
+      }
+      return r;
+    }
+    function o(i) {
+      const r = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableTo) return r;
+      const p = new Date(i.selectableTo);
+      if (new Date(i.$input.value) > p) {
+        const f = i.getAttribute("data-rangeoverflow") ?? "Date is out of range";
+        return {
+          validityFragment: { rangeOverflow: !0, valid: !1 },
+          errorMessageFragment: { rangeOverflow: f }
+        };
+      }
+      return r;
+    }
+    function h(i) {
+      const r = { validityFragment: {}, errorMessageFragment: {} }, p = new Date(i.$input.value);
+      if (new Date(i.$input_range_end.value) < p) {
+        const f = i.getAttribute("data-rangeunderflow") ?? "Date is out of range";
+        return {
+          validityFragment: { rangeUnderflow: !0, valid: !1 },
+          errorMessageFragment: { rangeUnderflow: f }
+        };
+      }
+      return r;
+    }
+    function c(i) {
+      const r = { validityFragment: {}, errorMessageFragment: {} };
+      return !i.$input.value || i.range && !i.$input_range_end.value ? {
+        validityFragment: { valueMissing: !0, valid: !1 },
+        errorMessageFragment: { valueMissing: "This field is required" }
+      } : r;
+    }
+  }
+  render() {
+    var e, a, l, o, h, c, i, r;
+    const t = (this._defaultSlot.length === 0 || !((a = (e = this._defaultSlot[0]) == null ? void 0 : e.textContent) != null && a.trim())) && !this.label;
+    return m`
+			<div
+				id="root"
+				@mouseenter=${() => {
+      this.value && this._toggleClearButton(!0);
+    }}
+				@mouseleave=${() => {
+      this._toggleClearButton(!1);
+    }}
+			>
+				<label>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
+						<slot>${this.label}</slot>
+						${this.required ? x(this.requiredLabel) : null}
+					</div>
+					<div id="input">
+						<div id="affix">
+							<input
+								?disabled=${this.disabled}
+								?readonly=${this.readonly}
+								.value=${k(
+      this.range ? v((l = this.value) == null ? void 0 : l.split(",")[0]) : v(this.value)
+    )}
+								@blur=${this._handleBlur}
+								@click=${this._handleFocus}
+								@focus=${this._handleFocus}
+								@input=${this._handleInput}
+								aria-describedby=${u((o = this.hint) != null && o.trim() ? "hint" : g)}
+								aria-errormessage=${u((h = this.hint) != null && h.trim() ? "hint" : g)}
+								aria-invalid=${!!this.invalid}
+								autocomplete="off"
+								data-testid="field-input"
+								inputmode=${u(this.inputMode)}
+								name=${u(this.name)}
+								placeholder=${u(this.placeholder)}
+								type="date"
+							/>
+						</div>
+						${this.range ? m`<div style="align-content:center">→</div>
+									<input
+										?disabled=${this.disabled}
+										?readonly=${this.readonly}
+										.value=${k(v((c = this.value) == null ? void 0 : c.split(",")[1]))}
+										@blur=${this._handleBlur}
+										@click=${this._handleFocus}
+										@focus=${this._handleFocus}
+										@input=${this._handleInput}
+										aria-describedby=${u((i = this.hint) != null && i.trim() ? "hint" : g)}
+										aria-errormessage=${u((r = this.hint) != null && r.trim() ? "hint" : g)}
+										aria-invalid=${!!this.invalid}
+										autocomplete="off"
+										data-testid="field-input-range-end"
+										inputmode=${u(this.inputMode)}
+										name=${u(String(this.name) + "-end")}
+										placeholder=${u(this.placeholder)}
+										type="date"
+									/>` : g}
+						${this.showClearbutton ? m`<button class="password skf-icon-host" type="button" @click=${this.clear}>
+									<skf-icon name="close" size="sm"></skf-icon>
+								</button>` : m`
+									<button class="password skf-icon-host" type="button">
+										<skf-icon name="calendarMonth" size="sm"></skf-icon>
+									</button>
+								`}
+					</div>
+				</label>
+				${this.hint && m`
+					<skf-hint
+						aria-live=${this.invalid ? "assertive" : "polite"}
+						id="hint"
+						severity=${u(B(this.severity, this.invalid))}
+						>${this.customInvalid ? this.customInvalid : this.hint}
+					</skf-hint>
+				`}
+			</div>
+
+			<div id="popover" popover @close=${this._handleClose}>
+				<skf-datepicker
+					?range=${this.range}
+					id=${this.id}
+					invalid-dates=${u(this.invalidDates)}
+					selectable-from=${u(this.selectableFrom)}
+					selectable-to=${u(this.selectableTo)}
+				></skf-datepicker>
+			</div>
+		`;
+  }
+};
+_.styles = [q, j];
+let s = _;
+n([
+  d({ attribute: "custom-invalid", reflect: !0 })
+], s.prototype, "customInvalid", 1);
+n([
+  d({ type: String })
+], s.prototype, "id", 2);
+n([
+  d()
+], s.prototype, "label", 2);
+n([
+  d({ type: Boolean, attribute: "hide-label" })
+], s.prototype, "hideLabel", 2);
+n([
+  d()
+], s.prototype, "hint", 2);
+n([
+  d({ attribute: "invalid-dates" })
+], s.prototype, "invalidDates", 2);
+n([
+  d({ reflect: !0 })
+], s.prototype, "name", 2);
+n([
+  d()
+], s.prototype, "placeholder", 2);
+n([
+  d({ type: Boolean })
+], s.prototype, "range", 2);
+n([
+  d({ type: Boolean })
+], s.prototype, "readonly", 2);
+n([
+  d({ attribute: "required-label" })
+], s.prototype, "requiredLabel", 2);
+n([
+  d({ attribute: "selectable-from" })
+], s.prototype, "selectableFrom", 2);
+n([
+  d({ attribute: "selectable-to" })
+], s.prototype, "selectableTo", 2);
+n([
+  d({ reflect: !0 })
+], s.prototype, "severity", 2);
+n([
+  d({ type: String, attribute: "validate-on" })
+], s.prototype, "validateOn", 2);
+n([
+  d()
+], s.prototype, "value", 2);
+n([
+  b()
+], s.prototype, "_init_date", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "invalid", 2);
+n([
+  b()
+], s.prototype, "selectedRangeDates", 2);
+n([
+  b()
+], s.prototype, "showClearbutton", 2);
+n([
+  y("#popover")
+], s.prototype, "$popover", 2);
+n([
+  y("#input")
+], s.prototype, "$anchor", 2);
+n([
+  y('input[data-testid="field-input"]')
+], s.prototype, "$input", 2);
+n([
+  y('input[data-testid="field-input-range-end"]')
+], s.prototype, "$input_range_end", 2);
+n([
+  y("skf-datepicker")
+], s.prototype, "$datepicker", 2);
+n([
+  R({ flatten: !0 })
+], s.prototype, "_defaultSlot", 2);
+n([
+  P("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+], s.prototype, "_handleValueChange", 1);
+export {
+  s as SkfDatePickerInput
+};

package/dist/components/date-picker-input/datepicker-input.d.ts

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

package/dist/components/date-picker-input/datepicker-input.helpers.d.ts

@@ -0,0 +1,4 @@
+export declare function dateFormatter(date?: string | Date | null, locale?: string): string;
+export declare function isPopoverOpen(element: HTMLElement): boolean;
+export declare function debounce<T extends (...args: unknown[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
+export declare const isDate: (date?: Date | string | null) => boolean;

package/dist/components/date-picker-input/datepicker-input.helpers.js

@@ -0,0 +1,29 @@
+function r(e, n = "en-CA") {
+  return e ? (typeof e == "string" && (e = new Date(e)), e.toLocaleDateString(n)) : "";
+}
+function i(e) {
+  return console.dir("element", e), e.matches(":popover-open");
+}
+let o = null;
+function c(e, n) {
+  return (...t) => {
+    console.log("Debounced function called"), o && (clearTimeout(o), console.log("Existing timer cleared")), o = setTimeout(() => {
+      console.log("Function executed after delay"), e(...t);
+    }, n);
+  };
+}
+const l = (e) => {
+  if (!e) return !1;
+  if (typeof e != "string")
+    return e instanceof Date && !isNaN(e.valueOf());
+  {
+    const n = new Date(e);
+    return !isNaN(n);
+  }
+};
+export {
+  r as dateFormatter,
+  c as debounce,
+  l as isDate,
+  i as isPopoverOpen
+};

package/dist/components/date-picker-input/datepicker-input.js

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

package/dist/components/date-picker-input/datepicker-input.styles.d.ts

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

package/dist/components/date-picker-input/datepicker-input.styles.js

@@ -0,0 +1,22 @@
+import o from "../../styles/form-field.styles.js";
+import { visuallyHidden as e } from "../../styles/util.styles.js";
+import { css as r } from "lit";
+const l = [
+  e,
+  o,
+  r`
+		@layer components {
+			#popover {
+				border: none;
+				overflow: visible;
+			}
+		}
+
+		input::-webkit-calendar-picker-indicator {
+			display: none;
+		}
+	`
+];
+export {
+  l as styles
+};

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

@@ -1,8 +1,8 @@
-var _ = (o) => {
-  throw TypeError(o);
+var _ = (t) => {
+  throw TypeError(t);
 };
-var w = (o, e, t) => e.has(o) || _("Cannot " + t);
-var f = (o, e, t) => (w(o, e, "read from private field"), t ? t.call(o) : e.get(o)), g = (o, e, t) => e.has(o) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(o) : e.set(o, t), h = (o, e, t, a) => (w(o, e, "write to private field"), a ? a.call(o, t) : e.set(o, t), t);
+var w = (t, e, o) => e.has(t) || _("Cannot " + o);
+var f = (t, e, o) => (w(t, e, "read from private field"), o ? o.call(t) : e.get(t)), g = (t, e, o) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), h = (t, e, o, a) => (w(t, e, "write to private field"), a ? a.call(t, o) : e.set(t, o), o);
 import "../button/button.js";
 import "../heading/heading.js";
 import "../icon/icon.js";
@@ -13,10 +13,10 @@ import { html as b, nothing as k } from "lit";
 import { property as c, state as m, query as P, queryAssignedElements as M } from "lit/decorators.js";
 import { classMap as $ } from "lit/directives/class-map.js";
 import { styles as O } from "./dialog.styles.js";
-var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (o, e, t, a) => {
-  for (var n = a > 1 ? void 0 : a ? E(e, t) : e, l = o.length - 1, r; l >= 0; l--)
-    (r = o[l]) && (n = (a ? r(e, t, n) : r(n)) || n);
-  return a && n && A(e, t, n), n;
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (t, e, o, a) => {
+  for (var n = a > 1 ? void 0 : a ? E(e, o) : e, l = t.length - 1, r; l >= 0; l--)
+    (r = t[l]) && (n = (a ? r(e, o, n) : r(n)) || n);
+  return a && n && A(e, o, n), n;
 }, p, u, d;
 const y = class y extends v {
   constructor() {
@@ -24,19 +24,19 @@ const y = class y extends v {
     g(this, p);
     g(this, u);
     g(this, d);
-    h(this, p, 0), h(this, u, 20), h(this, d, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.onClose = null, this.modal = !0, this.renderFoot = !1, this.show = async () => await this.showModal(), this._handleBackdropClick = (t) => {
-      this._isModal || t.target !== this.$dialog || this.close();
-    }, this._handleClose = (t) => {
-      console.log("Handle close reached"), this.onClose && this.onClose(t), this.close();
+    h(this, p, 0), h(this, u, 20), h(this, d, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.onClose = null, this.modal = !0, this.renderFoot = !1, this.show = async () => await this.showModal(), this._handleBackdropClick = (o) => {
+      this._isModal || o.target !== this.$dialog || this.close();
+    }, this._handleClose = (o) => {
+      console.log("Handle close reached"), this.onClose && this.onClose(o), this.close();
     }, this.showModal = async () => await (async () => (console.log("%cmodal ->", "color: red", this.modal), this.$dialog.showModal(), await this._transition().entry(), this.emit("skf-dialog-open"), !0))(), this.close = async () => (console.log("close reached"), f(this, d) ? void 0 : (h(this, d, !0), await (async () => (this.emit("skf-dialog-close"), await this._transition().exit(), this.$dialog.close(), this.open = !1, h(this, d, !1), !0))()));
   }
   firstUpdated() {
-    this.$dialog.addEventListener("close", (t) => {
-      t.stopPropagation(), console.log("close event detected 1", t), this.emit("close");
+    this.$dialog.addEventListener("close", (o) => {
+      o.stopPropagation(), console.log("close event detected 1", o), this.emit("close");
     });
   }
   handleOpenChange() {
-    var t;
+    var o;
     switch (!0) {
       case (this.open === !0 && !!this.modal):
         this.showModal();
@@ -48,11 +48,11 @@ const y = class y extends v {
         this.close();
         break;
     }
-    this.open && (this.renderFoot = !!((t = this.footerEls) != null && t.length));
+    this.open && (this.renderFoot = !!((o = this.footerEls) != null && o.length));
   }
   /** @internal */
   _transition() {
-    const t = this.fullscreen ? {} : {
+    const o = this.fullscreen ? {} : {
       translate: `${String(f(this, p))} ${String(f(this, u))}px`
     };
     return { entry: () => new Promise((l) => {
@@ -60,7 +60,7 @@ const y = class y extends v {
         [
           {
             opacity: 0,
-            ...t
+            ...o
           },
           { opacity: 1, translate: "0 0" }
         ],
@@ -83,7 +83,7 @@ const y = class y extends v {
           { opacity: 1, translate: "0 0" },
           {
             opacity: 0,
-            ...t
+            ...o
           }
         ],
         {

package/dist/components/divider/divider.component.js

@@ -1,20 +1,20 @@
-var v = (r) => {
+var h = (r) => {
   throw TypeError(r);
 };
-var m = (r, e, t) => e.has(r) || v("Cannot " + t);
-var c = (r, e, t) => (m(r, e, "read from private field"), t ? t.call(r) : e.get(r)), f = (r, e, t) => e.has(r) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), y = (r, e, t, a) => (m(r, e, "write to private field"), a ? a.call(r, t) : e.set(r, t), t);
+var m = (r, e, t) => e.has(r) || h("Cannot " + t);
+var c = (r, e, t) => (m(r, e, "read from private field"), t ? t.call(r) : e.get(r)), f = (r, e, t) => e.has(r) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), y = (r, e, t, a) => (m(r, e, "write to private field"), a ? a.call(r, t) : e.set(r, t), t);
 import { SkfElement as u } from "../../internal/components/skf-element.js";
 import b from "../../styles/component.styles.js";
 import { html as C } from "lit";
 import { property as n } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import { styles as x } from "./divider.styles.js";
-var B = Object.defineProperty, d = (r, e, t, a) => {
-  for (var o = void 0, l = r.length - 1, h; l >= 0; l--)
-    (h = r[l]) && (o = h(e, t, o) || o);
+var B = Object.defineProperty, p = (r, e, t, a) => {
+  for (var o = void 0, l = r.length - 1, v; l >= 0; l--)
+    (v = r[l]) && (o = v(e, t, o) || o);
   return o && B(e, t, o), o;
 }, i;
-const p = class p extends u {
+const d = class d extends u {
   constructor() {
     super();
     f(this, i);
@@ -38,15 +38,15 @@ const p = class p extends u {
 		`;
   }
 };
-i = new WeakMap(), p.styles = [b, x];
-let s = p;
-d([
+i = new WeakMap(), d.styles = [b, x];
+let s = d;
+p([
   n({ reflect: !0 })
 ], s.prototype, "color");
-d([
+p([
   n({ type: Boolean })
 ], s.prototype, "decorative");
-d([
+p([
   n({ type: Boolean, reflect: !0 })
 ], s.prototype, "vertical");
 export {

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

@@ -1,15 +1,15 @@
-import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { SkfElement as n } from "../../internal/components/skf-element.js";
 import u from "../../styles/component.styles.js";
 import "lit";
-import { property as n } from "lit/decorators.js";
+import { property as a } from "lit/decorators.js";
 import { html as y, unsafeStatic as l } from "lit/static-html.js";
 import c from "./heading.styles.js";
-var d = Object.defineProperty, a = (o, p, i, h) => {
-  for (var t = void 0, e = o.length - 1, m; e >= 0; e--)
-    (m = o[e]) && (t = m(p, i, t) || t);
-  return t && d(p, i, t), t;
+var h = Object.defineProperty, f = (o, p, i, d) => {
+  for (var t = void 0, s = o.length - 1, m; s >= 0; s--)
+    (m = o[s]) && (t = m(p, i, t) || t);
+  return t && h(p, i, t), t;
 };
-const s = class s extends f {
+const e = class e extends n {
   constructor() {
     super(...arguments), this.as = "h1";
   }
@@ -21,13 +21,13 @@ const s = class s extends f {
 		`;
   }
 };
-s.styles = [u, c];
-let r = s;
-a([
-  n({ reflect: !0 })
+e.styles = [u, c];
+let r = e;
+f([
+  a({ reflect: !0 })
 ], r.prototype, "as");
-a([
-  n({ attribute: "styled-as" })
+f([
+  a({ attribute: "styled-as" })
 ], r.prototype, "styledAs");
 export {
   r as SkfHeading