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

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

@@ -0,0 +1,441 @@
+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 { 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 { Temporal as w } from "@js-temporal/polyfill";
+import L 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 { live as F } from "lit/directives/live.js";
+import "../date-picker/datepicker.js";
+import { styles as A } from "./datepicker-input.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;
+};
+const _ = class _ extends M {
+  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 = () => {
+      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) {
+        const t = e.detail.date.start, a = e.detail.date.end;
+        this.value = `${v(t)},${v(a)}`, this.selectedRangeDates = { start: t, end: a };
+      } else !this.range && e.detail.date instanceof Date && (this.value = v(e.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
+        this.$popover.hidePopover();
+      }));
+    }, this._handleKeyboardEvents = (e) => {
+      var a, l;
+      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("");
+        }
+        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();
+        }
+        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 = {
+              start: new Date(n),
+              end: new Date(d)
+            }, this.$datepicker.emit("selected-date-changed", {
+              detail: { date: new Date(n) }
+            });
+          } else {
+            if (!t.value || !f(t.value).date()) return;
+            this.$datepicker.emit("selected-date-changed", {
+              detail: { date: new Date(t.value) }
+            });
+          }
+        e.key === "Enter" && (t.blur(), this.$popover.hidePopover());
+      }
+    }, 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._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 = {
+            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(() => {
+            this.$input_range_end.focus();
+          }, 200));
+        } else
+          this.$datepicker.selectedDate = new Date(t.value), this.$datepicker.emit("selected-date-changed", {
+            detail: { date: new Date(t.value) }
+          });
+        this.validateOn === "input" && (this._pristine = !1, this.validateInput());
+      }
+    }, this._toggleClearButton = (e = !1) => {
+      this.showClearbutton = e;
+    }, this.reposition = async () => {
+      const { x: e, y: t } = await C(this.$anchor, this.$popover, {
+        placement: "bottom-start",
+        middleware: [I(), O(0)],
+        strategy: "fixed"
+      });
+      Object.assign(this.$popover.style, {
+        left: `${String(e)}px`,
+        top: `${String(t)}px`
+      });
+    }, this.addEventListener("skf-datepicker-selected", this._handleDateSelected), this.addEventListener("reset", () => {
+      this.clearInput(), this.validateInput();
+    });
+  }
+  set customInvalid(e) {
+    this.customError = e ?? "";
+  }
+  get customInvalid() {
+    return this.customError;
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), this._init_date = (e = this.value) == null ? void 0 : e.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.abortController.abort();
+  }
+  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 = {
+      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();
+  }
+  attributeChangedCallback(e, t, a) {
+    if (super.attributeChangedCallback(e, t, a), e === "custom-invalid")
+      if (typeof a == "string") {
+        const n = this.withFallback(a);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, n), this.invalid = !0, this.hint = n, this.checkValidity();
+      } else
+        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 = {
+      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();
+  }
+  /** @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 = [
+        { opacity: 0, transform: "scaleY(0.5)" },
+        { opacity: 1, transform: "scaleY(1)" }
+      ], n = t ? l : l.reverse();
+      setTimeout(
+        () => {
+          e.style.transformOrigin = "top";
+          const d = this.$popover.animate(n, {
+            duration: 100,
+            easing: "linear",
+            fill: "both"
+          });
+          d.onfinish = () => {
+            a();
+          };
+        },
+        t ? 0 : 50
+      );
+    });
+  }
+  /** @internal consider sharing this functionality with input */
+  validateInput() {
+    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 };
+    }
+    if (this.selectableTo) {
+      const { validityFragment: i, errorMessageFragment: o } = n(this);
+      t = { ...t, ...i }, a = { ...a, ...o };
+    }
+    if (this.range) {
+      const { validityFragment: i, errorMessageFragment: o } = d(this);
+      t = { ...t, ...i }, a = { ...a, ...o };
+    }
+    if (this.required) {
+      const { validityFragment: i, errorMessageFragment: o } = u(this);
+      t = { ...t, ...i }, a = { ...a, ...o };
+    }
+    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") ?? "";
+    else {
+      this.invalid = !this._pristine && !t.valid;
+      let i;
+      for (i in t) {
+        const o = `data-${i.toString()}`;
+        if (t[i]) {
+          this.validationError = i.toString();
+          const c = this.hasAttribute(o) ? this.getAttribute(o) : a[i];
+          this._internals.setValidity(
+            { [this.validationError]: !0, customError: this._internals.validity.customError },
+            this.withFallback(c)
+          ), c && !this._pristine && (this.hint = c), this.invalid && this.customErrorDisplay && this.checkValidity();
+        }
+      }
+    }
+    function l(i) {
+      const o = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableFrom) return o;
+      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}.`;
+        return {
+          validityFragment: { rangeUnderflow: !0, valid: !1 },
+          errorMessageFragment: { rangeUnderflow: m }
+        };
+      }
+      return o;
+    }
+    function n(i) {
+      const o = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableTo) return o;
+      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}.`;
+        return {
+          validityFragment: { rangeOverflow: !0, valid: !1 },
+          errorMessageFragment: { rangeOverflow: m }
+        };
+      }
+      return o;
+    }
+    function d(i) {
+      const o = { 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 {
+          validityFragment: { rangeUnderflow: !0, valid: !1 },
+          errorMessageFragment: { rangeUnderflow: m }
+        };
+      }
+      return o;
+    }
+    function u(i) {
+      const o = { 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;
+    }
+  }
+  render() {
+    var t, a, l, n, d, u, i, o;
+    const e = (this._defaultSlot.length === 0 || !((a = (t = this._defaultSlot[0]) == null ? void 0 : t.textContent) != null && a.trim())) && !this.label;
+    return y`
+			<div
+				id="root"
+				@mouseenter=${() => {
+      this.value && this._toggleClearButton(!0);
+    }}
+				@mouseleave=${() => {
+      this._toggleClearButton(!1);
+    }}
+			>
+				<label>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${e} id="label">
+						<slot>${this.label}</slot>
+						${this.required ? x(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)
+    )}
+							@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-invalid=${!!this.invalid}
+							autocomplete="off"
+							data-testid="field-input"
+							inputmode=${p(this.inputMode)}
+							maxlength="10"
+							name=${this.name ?? "calendar"}
+							placeholder=${p(this.placeholder)}
+							type="text"
+						/>
+						${this.range ? y`
+									<skf-icon name="arrowRight"></skf-icon>
+									<input
+										?disabled=${this.disabled}
+										?readonly=${this.readonly}
+										.value=${F(v((u = this.value) == null ? void 0 : u.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-invalid=${!!this.invalid}
+										autocomplete="off"
+										data-testid="field-input-range-end"
+										inputmode=${p(this.inputMode)}
+										maxlength="10"
+										name=${(this.name ?? "calendar") + "-end"}
+										placeholder=${p(this.placeholder)}
+										type="text"
+									/>
+								` : g}
+						${this.showClearbutton ? y`
+									<button class="password skf-icon-host" type="button" @click=${this.clear}>
+										<skf-icon name="close" size="sm"></skf-icon>
+									</button>
+								` : y`
+									<button class="password skf-icon-host" type="button">
+										<skf-icon name="calendarMonth" size="sm"></skf-icon>
+									</button>
+								`}
+					</div>
+				</label>
+				${this.hint && y`
+					<skf-hint
+						aria-live=${this.invalid ? "assertive" : "polite"}
+						id="hint"
+						severity=${p(T(this.severity, this.invalid))}
+						>${this.customInvalid ?? this.hint}
+					</skf-hint>
+				`}
+			</div>
+
+			<div id="popover" popover @close=${this._handleClose}>
+				<skf-datepicker
+					?range=${this.range}
+					id=${this.id}
+					invalid-dates=${p(this.invalidDates)}
+					selectable-from=${p(this.selectableFrom)}
+					selectable-to=${p(this.selectableTo)}
+				></skf-datepicker>
+			</div>
+		`;
+  }
+};
+_.styles = [L, A];
+let s = _;
+r([
+  h({ attribute: "custom-invalid", reflect: !0 })
+], s.prototype, "customInvalid", 1);
+r([
+  h({ type: String })
+], s.prototype, "id", 2);
+r([
+  h()
+], s.prototype, "label", 2);
+r([
+  h({ type: Boolean, attribute: "hide-label" })
+], s.prototype, "hideLabel", 2);
+r([
+  h()
+], s.prototype, "hint", 2);
+r([
+  h({ attribute: "invalid-dates" })
+], s.prototype, "invalidDates", 2);
+r([
+  h({ reflect: !0 })
+], s.prototype, "name", 2);
+r([
+  h()
+], s.prototype, "placeholder", 2);
+r([
+  h({ type: Boolean })
+], s.prototype, "range", 2);
+r([
+  h({ type: Boolean })
+], s.prototype, "readonly", 2);
+r([
+  h({ attribute: "required-label" })
+], s.prototype, "requiredLabel", 2);
+r([
+  h({ attribute: "selectable-from" })
+], s.prototype, "selectableFrom", 2);
+r([
+  h({ attribute: "selectable-to" })
+], s.prototype, "selectableTo", 2);
+r([
+  h({ reflect: !0 })
+], s.prototype, "severity", 2);
+r([
+  h({ reflect: !0 })
+], s.prototype, "size", 2);
+r([
+  h({ type: String, attribute: "validate-on" })
+], s.prototype, "validateOn", 2);
+r([
+  h()
+], s.prototype, "value", 2);
+r([
+  $()
+], s.prototype, "_init_date", 2);
+r([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "invalid", 2);
+r([
+  $()
+], s.prototype, "selectedRangeDates", 2);
+r([
+  $()
+], s.prototype, "showClearbutton", 2);
+r([
+  b("#popover")
+], s.prototype, "$popover", 2);
+r([
+  b("#input")
+], s.prototype, "$anchor", 2);
+r([
+  b('input[data-testid="field-input"]')
+], s.prototype, "$input", 2);
+r([
+  b('input[data-testid="field-input-range-end"]')
+], s.prototype, "$input_range_end", 2);
+r([
+  b("skf-datepicker")
+], s.prototype, "$datepicker", 2);
+r([
+  R({ flatten: !0 })
+], s.prototype, "_defaultSlot", 2);
+r([
+  B("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,38 @@
+import { Temporal } from '@js-temporal/polyfill';
+/**
+ * @param date - a date to format, defaults to yyyy-mm-dd
+ * @param locale
+ * @returns - a formatted date string
+ */
+export declare function dateFormatter(date?: string | Date | null, locale?: string): string;
+/**
+ * Questionable if this really works
+ *
+ * @param element - a popover element to check if it is open
+ * @returns - true if the popover is open, false otherwise
+ */
+export declare const isPopoverOpen: (element: HTMLElement) => boolean;
+/**
+ * @param func - a function to debounce
+ * @param delay - the delay in milliseconds to debounce the function
+ * @returns - a debounced function
+ */
+export declare function debounce<T extends (...args: unknown[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
+/**
+ * Returns true if all given dates matches a least one of the given types.
+ *
+ * @param assertDate - dates to check if they match one valid date
+ * @returns - true if the date is a valid date, false otherwise
+ *
+ * @example - is('2021-01-01', new Date(), Temporal.PlainDate.from('2021-01-01')).dateISOPlainDate; // true
+ * @example - is('2021-01-01', new Date(), Temporal.PlainDate.from('2021-01-01')).dateISO; // false
+ */
+export declare const is: (...assertDates: (Date | Temporal.PlainDate | string | null)[]) => {
+    date: () => boolean;
+    ISO: () => boolean;
+    plain: () => boolean;
+    dateISO: () => boolean;
+    datePlain: () => boolean;
+    dateISOPlain: () => boolean;
+    plainISO: () => boolean;
+};

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

@@ -0,0 +1,31 @@
+import { Temporal as u } from "@js-temporal/polyfill";
+function l(n, e = "en-CA") {
+  return n ? (typeof n == "string" && (n = new Date(n)), n.toLocaleDateString(e)) : "";
+}
+const p = (n) => n.matches(":popover-open");
+let i = null;
+function a(n, e) {
+  return (...o) => {
+    i && clearTimeout(i), i = setTimeout(() => {
+      n(...o);
+    }, e);
+  };
+}
+const f = (...n) => {
+  const e = () => n.some((t) => t instanceof Date && !isNaN(t.valueOf())), o = () => n.some((t) => typeof t == "string" && /^\d{4}-\d{2}-\d{2}$/.test(t)), r = () => n.some((t) => t instanceof u.PlainDate);
+  return {
+    date: e,
+    ISO: o,
+    plain: r,
+    dateISO: () => e() || o(),
+    datePlain: () => e() || r(),
+    dateISOPlain: () => e() || o() || r(),
+    plainISO: () => r() || o()
+  };
+};
+export {
+  l as dateFormatter,
+  a as debounce,
+  f as is,
+  p 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,18 @@
+import o from "../../styles/form-field.styles.js";
+import { visuallyHidden as r } from "../../styles/util.styles.js";
+import { css as e } from "lit";
+const m = [
+  r,
+  o,
+  e`
+		@layer components {
+			#popover {
+				border: none;
+				overflow: visible;
+			}
+		}
+	`
+];
+export {
+  m as styles
+};

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

@@ -4,23 +4,16 @@ import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import { type CSSResultGroup } from 'lit';
 /**
- * TODO: Is modal the right name? Should it be "blocking" or "blocking-dialog"?
+ * The `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)
  *
- * TBD: Should we inert the page behind the dialog? Maybe only if it is modal-dialog?
- *
- * TBD: Should we disable scrolling on the page behind the dialog? Maybe only if it is modal?
- */
-/**
- * The `<skf-dialog>` is a component that open up a dialog with the content provided
- *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/329940-dialogmodal) for design principles
  *
  * @slot - The dialog component's content
  * @slot footer - The dialog component's buttons goes here
  *
- * @event skf-dialog-open - Fires when the dialog is opened (after transitioned in)
- * @event skf-dialog-close - Fires when the dialog is closed (before transitioned out)
- * @event close - Fires when the dialog is closed (after transitioned out)
+ * @event skf-dialog-opened - Fires when the dialog is opened (after transitioned in)
+ * @event skf-dialog-closing - Fires when the dialog is closed (before transitioned out)
+ * @event skf-dialog-closed - Fires when the dialog is closed (after transitioned out)
  *
  * @cssproperty --skf-dialog-height - A custom height for the Dialog. Pass valid CSS **block-size** values
  * @cssproperty --skf-dialog-width - A custom width for the Dialog Pass valid CSS **inline-size** values
@@ -40,35 +33,32 @@ export declare class SkfDialog extends SkfElement {
     noCloseButton?: boolean | undefined;
     /** If defined, removes the inner padding */
     noPadding: boolean;
-    open?: boolean | null;
-    /** If provided, will run function on dialog close */
+    /** If true, indicates that the dialog is active and is available for interaction */
+    open: boolean;
+    /** @internal */
     onClose?: ((event: Event) => void) | null;
     /** @internal */
-    $dialog: HTMLDialogElement;
+    renderFoot: boolean;
+    /** @internal */
+    $dialog?: HTMLDialogElement;
     /** @internal */
     footerEls?: HTMLElement[];
+    handleOpenChange(): void;
+    protected firstUpdated(): void;
     /** @internal */
-    modal: boolean;
+    _handleBackdropClick: (event: MouseEvent) => void;
     /** @internal */
-    renderFoot: boolean;
-    protected firstUpdated(): void;
-    handleOpenChange(): void;
+    _handleClose: (event: Event) => void;
     /** @internal */
-    show: () => Promise<boolean>;
+    _handleKeyDown: (event: KeyboardEvent) => void;
     /** @internal */
     _transition(): {
         entry: () => Promise<unknown>;
         exit: () => Promise<unknown>;
     };
-    /** @internal */
-    _handleBackdropClick: (event: MouseEvent) => void;
-    /** @internal */
-    _handleClose: (event: Event) => void;
-    /** @internal */
-    get _isModal(): boolean;
     /** Method that opens the dialog in modal state */
-    showModal: () => Promise<boolean>;
+    showModal(): Promise<boolean>;
     /** Method that closes the dialog */
-    close: () => Promise<boolean | undefined>;
+    close(): Promise<boolean | undefined>;
     render(): import("lit").TemplateResult<1>;
 }