@skf-design-system/ui-components 1.0.2-beta.2 → 1.0.2-beta.4

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -1,60 +1,65 @@
-import { SkfElement as c } from "../../internal/components/skf-element.js";
-import { componentStyles as f } from "../../styles/component.styles.js";
-import "lit";
-import { property as p, state as _, queryAssignedElements as d } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { literal as h, html as b } from "lit/static-html.js";
-import { styles as g } from "./breadcrumb.styles.js";
-var v = Object.defineProperty, r = (a, t, i, n) => {
-  for (var s = void 0, l = a.length - 1, m; l >= 0; l--)
-    (m = a[l]) && (s = m(t, i, s) || s);
-  return s && v(t, i, s), s;
+var f = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends c {
+var g = (t, s, e) => s.has(t) || f("Cannot " + e);
+var p = (t, s, e) => (g(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), y = (t, s, e, i) => (g(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { stateMap as C } from "../../internal/helpers/stateMap.js";
+import { watch as D } from "../../internal/helpers/watch.js";
+import { componentStyles as v } from "../../styles/component.styles.js";
+import "lit";
+import { property as u, state as S, queryAssignedElements as O } from "lit/decorators.js";
+import { html as P } from "lit/static-html.js";
+import { styles as b } from "./breadcrumb.styles.js";
+var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (t, s, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? E(s, e) : s, h = t.length - 1, m; h >= 0; h--)
+    (m = t[h]) && (r = (i ? m(s, e, r) : m(r)) || r);
+  return i && r && w(s, e, r), r;
+}, a, l;
+const c = class c extends d {
   constructor() {
-    super(...arguments), this.label = "Breadcrumb", this.size = "md", this._isDynamic = !1, this._handleSlotChange = () => {
-      this._items.forEach((t, i) => {
-        this._isDynamic = !!t.href;
-        const n = i === this._items.length - 1;
-        this._isDynamic && n && (t._isCurrent = !0);
+    super(...arguments);
+    _(this, a);
+    _(this, l);
+    y(this, a, this.attachInternals()), y(this, l, p(this, a).states), this.label = "Breadcrumb", this.small = !1, this._isDynamic = !1, this._handleSlotChange = () => {
+      this._items.forEach((e, i) => {
+        this._isDynamic = this._isDynamic || !!e.href, this.role = this._isDynamic ? "navigation" : null;
+        const r = i === this._items.length - 1;
+        this._isDynamic && r && (e._isCurrent = !0);
       });
     };
   }
   firstUpdated() {
     this._handleSlotChange();
   }
+  _handleStateChange() {
+    C(p(this, l), "small").set(this.small);
+  }
   render() {
-    const t = this._isDynamic ? h`nav` : h`div`;
-    return b`
-			<${t}
-				aria-label=${u(this.label && this._isDynamic ? this.label : void 0)}
-				class=${y({
-      breadcrumb: !0,
-      "breadcrumb--small": this.size === "sm"
-    })}
-			>
-				<ol class="breadcrumb__list">
-					<slot @slotchange=${this._handleSlotChange}></slot>
-				</ol>
-			</{tag}>
+    return P`
+			<ol id="root">
+				<slot @slotchange=${this._handleSlotChange}></slot>
+			</ol>
 		`;
   }
 };
-o.styles = [f, g];
-let e = o;
-r([
-  p()
-], e.prototype, "label");
-r([
-  p({ reflect: !0 })
-], e.prototype, "size");
-r([
-  _()
-], e.prototype, "_isDynamic");
-r([
-  d()
-], e.prototype, "_items");
+a = new WeakMap(), l = new WeakMap(), c.styles = [v, b];
+let o = c;
+n([
+  u({ type: String })
+], o.prototype, "label", 2);
+n([
+  u({ type: Boolean })
+], o.prototype, "small", 2);
+n([
+  S()
+], o.prototype, "_isDynamic", 2);
+n([
+  O()
+], o.prototype, "_items", 2);
+n([
+  D("small")
+], o.prototype, "_handleStateChange", 1);
 export {
-  e as SkfBreadcrumb
+  o as SkfBreadcrumb
 };

package/dist/components/breadcrumb/breadcrumb.d.ts

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

package/dist/components/breadcrumb/breadcrumb.styles.js

@@ -1,19 +1,22 @@
 import { css as t } from "lit";
 const s = t`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		:host {
-			contain: layout;
-		}
+		@layer base {
+			:host {
+				contain: layout;
+			}
 
-		.breadcrumb--small {
-			font-size: var(--skf-font-size-75);
-			font-weight: var(--skf-font-weight-medium);
+			#root {
+				align-items: center;
+				display: flex;
+			}
 		}
 
-		.breadcrumb__list {
-			align-items: center;
-			display: flex;
+		@layer mods {
+			:host(:state(small)) #root {
+				font-size: var(--skf-font-size-75);
+				font-weight: var(--skf-font-weight-medium);
+			}
 		}
 	}
 `;

package/dist/components/button/button.component.js

@@ -1,8 +1,8 @@
 var u = (i) => {
   throw TypeError(i);
 };
-var _ = (i, s, t) => s.has(i) || u("Cannot " + t);
-var p = (i, s, t) => (_(i, s, "read from private field"), t ? t.call(i) : s.get(i)), v = (i, s, t) => s.has(i) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, t), $ = (i, s, t, a) => (_(i, s, "write to private field"), a ? a.call(i, t) : s.set(i, t), t);
+var _ = (i, e, t) => e.has(i) || u("Cannot " + t);
+var p = (i, e, t) => (_(i, e, "read from private field"), t ? t.call(i) : e.get(i)), v = (i, e, t) => e.has(i) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), $ = (i, e, t, a) => (_(i, e, "write to private field"), a ? a.call(i, t) : e.set(i, t), t);
 import "../icon/icon.js";
 import "../loader/loader.js";
 import { SkfElement as O } from "../../internal/components/skf-element.js";
@@ -13,10 +13,10 @@ import { property as r, state as P, query as m } from "lit/decorators.js";
 import { classMap as L } from "lit/directives/class-map.js";
 import { ifDefined as g } from "lit/directives/if-defined.js";
 import { styles as C } from "./button.styles.js";
-var F = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (i, s, t, a) => {
-  for (var n = a > 1 ? void 0 : a ? k(s, t) : s, h = i.length - 1, d; h >= 0; h--)
-    (d = i[h]) && (n = (a ? d(s, t, n) : d(n)) || n);
-  return a && n && F(s, t, n), n;
+var F = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (i, e, t, a) => {
+  for (var n = a > 1 ? void 0 : a ? q(e, t) : e, h = i.length - 1, d; h >= 0; h--)
+    (d = i[h]) && (n = (a ? d(e, t, n) : d(n)) || n);
+  return a && n && F(e, t, n), n;
 }, l;
 const c = class c extends O {
   constructor() {
@@ -34,7 +34,7 @@ const c = class c extends O {
     }, this._resetForm = () => {
       var t;
       (t = p(this, l).form) == null || t.reset();
-    }, this._renderIcon = () => y`<skf-icon class="skf-icon-host" name=${g(this.icon)}></skf-icon>`, $(this, l, this.attachInternals());
+    }, this._renderIcon = () => y`<skf-icon data-color="custom" name=${g(this.icon)}></skf-icon>`, $(this, l, this.attachInternals());
   }
   firstUpdated(t) {
     if (t.has("loading") && this.loading) {
@@ -91,52 +91,52 @@ const c = class c extends O {
   }
 };
 l = new WeakMap(), c.styles = [w, C], c.formAssociated = !0, c.shadowRootOptions = { ...z.shadowRootOptions, delegatesFocus: !0 };
-let e = c;
-o([
+let o = c;
+s([
   r({ type: Boolean })
-], e.prototype, "destructive", 2);
-o([
+], o.prototype, "destructive", 2);
+s([
   r({ type: Boolean })
-], e.prototype, "disabled", 2);
-o([
+], o.prototype, "disabled", 2);
+s([
   r()
-], e.prototype, "icon", 2);
-o([
+], o.prototype, "icon", 2);
+s([
   r({ type: Boolean, attribute: "icon-only" })
-], e.prototype, "iconOnly", 2);
-o([
+], o.prototype, "iconOnly", 2);
+s([
   r({ attribute: "icon-position" })
-], e.prototype, "iconPosition", 2);
-o([
+], o.prototype, "iconPosition", 2);
+s([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "loading", 2);
-o([
+], o.prototype, "loading", 2);
+s([
   r({ type: Boolean, attribute: "no-validate" })
-], e.prototype, "noValidate", 2);
-o([
+], o.prototype, "noValidate", 2);
+s([
   r({ reflect: !0 })
-], e.prototype, "size", 2);
-o([
+], o.prototype, "size", 2);
+s([
   r()
-], e.prototype, "type", 2);
-o([
+], o.prototype, "type", 2);
+s([
   r({ reflect: !0 })
-], e.prototype, "variant", 2);
-o([
+], o.prototype, "variant", 2);
+s([
   P()
-], e.prototype, "_loaderVisible", 2);
-o([
+], o.prototype, "_loaderVisible", 2);
+s([
   m("skf-loader")
-], e.prototype, "$loader", 2);
-o([
+], o.prototype, "$loader", 2);
+s([
   m("#body")
-], e.prototype, "$body", 2);
-o([
+], o.prototype, "$body", 2);
+s([
   m("button")
-], e.prototype, "$button", 2);
-o([
+], o.prototype, "$button", 2);
+s([
   V("loading", { afterUpdate: !0 })
-], e.prototype, "_handleLoadingChange", 1);
+], o.prototype, "_handleLoadingChange", 1);
 export {
-  e as SkfButton
+  o as SkfButton
 };

package/dist/components/button/button.styles.js

@@ -49,7 +49,8 @@ const r = o`
 
 		.btn--icon-only {
 			aspect-ratio: 1;
-			place-items: center;
+			display: inherit;
+			place-content: center;
 		}
 
 		/**

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

@@ -7,9 +7,12 @@ import { type CSSResultGroup } from 'lit';
  *
  * @slot - The card's main content
  *
+ * @cssproperty --mod-card-bg-color - Ability to set a custom background color
+ *
  * @tagname skf-card
  */
 export declare class SkfCard extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** If true, removes border */
     noBorder: boolean;
@@ -17,5 +20,7 @@ export declare class SkfCard extends SkfElement {
     noPadding: boolean;
     /** If true, the Card fills the parent element height */
     stretch: boolean;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/card/card.component.js

@@ -1,32 +1,54 @@
-import { SkfElement as f } from "../../internal/components/skf-element.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
-import { html as d } from "lit";
-import { property as o } from "lit/decorators.js";
-import { styles as u } from "./card.styles.js";
-var c = Object.defineProperty, s = (p, l, i, y) => {
-  for (var t = void 0, r = p.length - 1, a; r >= 0; r--)
-    (a = p[r]) && (t = a(l, i, t) || t);
-  return t && c(l, i, t), t;
+var g = (t) => {
+  throw TypeError(t);
 };
-const n = class n extends f {
+var u = (t, e, o) => e.has(t) || g("Cannot " + o);
+var m = (t, e, o) => (u(t, e, "read from private field"), o ? o.call(t) : e.get(t)), d = (t, e, o) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), c = (t, e, o, s) => (u(t, e, "write to private field"), s ? s.call(t, o) : e.set(t, o), o);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as v } from "../../internal/helpers/stateMap.js";
+import { watch as P } from "../../internal/helpers/watch.js";
+import { componentStyles as B } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as f } from "lit/decorators.js";
+import { styles as j } from "./card.styles.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? x(e, o) : e, h = t.length - 1, l; h >= 0; h--)
+    (l = t[h]) && (r = (s ? l(e, o, r) : l(r)) || r);
+  return s && r && w(e, o, r), r;
+};
+const _ = {
+  noBorder: "no-border",
+  noPadding: "no-padding",
+  stretch: "stretch"
+};
+var p, a;
+const y = class y extends b {
   constructor() {
-    super(...arguments), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
+    super(...arguments);
+    d(this, p);
+    d(this, a);
+    c(this, p, this.attachInternals()), c(this, a, m(this, p).states), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
+  }
+  _handleStateChange(o, s, r) {
+    v(m(this, a), _[o]).set(r);
   }
   render() {
-    return d`<slot></slot>`;
+    return O`<slot id="root"></slot>`;
   }
 };
-n.styles = [m, u];
-let e = n;
-s([
-  o({ type: Boolean, attribute: "no-border", reflect: !0 })
-], e.prototype, "noBorder");
-s([
-  o({ type: Boolean, attribute: "no-padding", reflect: !0 })
-], e.prototype, "noPadding");
-s([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "stretch");
+p = new WeakMap(), a = new WeakMap(), y.styles = [B, j];
+let n = y;
+i([
+  f({ type: Boolean, attribute: "no-border" })
+], n.prototype, "noBorder", 2);
+i([
+  f({ type: Boolean, attribute: "no-padding" })
+], n.prototype, "noPadding", 2);
+i([
+  f({ type: Boolean })
+], n.prototype, "stretch", 2);
+i([
+  P(Object.keys(_))
+], n.prototype, "_handleStateChange", 1);
 export {
-  e as SkfCard
+  n as SkfCard
 };

package/dist/components/card/card.styles.js

@@ -1,33 +1,50 @@
 import { css as r } from "lit";
-const s = r`
+const a = r`
 	@layer components {
 		@layer base {
 			:host {
-				background-color: var(--skf-bg-color-neutral-1);
-				border: var(--skf-border-width-sm) solid
-					var(--_skf-card-border-color, var(--skf-border-color-tertiary));
-				border-radius: var(--skf-border-radius-sm);
-				box-shadow: var(--skf-shadow-md);
 				contain: layout;
-				padding: var(--_skf-card-padding, var(--skf-spacing-100));
+			}
+
+			#root {
+				--_skf-card-bg-color: var(--mod-card-bg-color, var(--skf-bg-color-neutral-1));
+				--_skf-card-border-color: var(--skf-border-color-tertiary);
+				--_skf-card-padding: var(--skf-spacing-100);
+				--_skf-card-shadow: var(--skf-shadow-md);
+
+				background-color: var(--_skf-card-bg-color);
+				border: var(--skf-border-width-sm) solid var(--_skf-card-border-color);
+				border-radius: var(--skf-border-radius-sm);
+				box-shadow: var(--_skf-card-shadow);
+				display: block;
+				padding: var(--_skf-card-padding);
 			}
 		}
 
 		@layer mods {
-			:host([stretch]) {
-				block-size: 100%;
+			:host(:state(no-border)) {
+				#root {
+					--_skf-card-border-color: transparent;
+					--_skf-card-shadow: none;
+				}
 			}
 
-			:host([no-border]) {
-				--_skf-card-border-color: transparent;
+			:host(:state(no-padding)) {
+				#root {
+					--_skf-card-padding: 0;
+				}
 			}
 
-			:host([no-padding]) {
-				--_skf-card-padding: 0;
+			:host(:state(stretch)) {
+				block-size: 100%;
+
+				#root {
+					block-size: inherit;
+				}
 			}
 		}
 	}
 `;
 export {
-  s as styles
+  a as styles
 };

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

@@ -6,7 +6,10 @@ interface DateParts {
     month?: number;
     day?: number;
 }
-export declare class SkfDatePickerCalendar extends SkfElement {
+/**
+ * @tagname skf-datepicker-calendar
+ */
+export declare class SkfDatepickerCalendar extends SkfElement {
     static styles: CSSResultGroup;
     /** @internal */
     _secondCalendarOffset: number;

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

@@ -1,5 +1,3 @@
-import { dateFormatter as y } from "../date-picker-input/datepicker-input.helpers.js";
-import { compareDates as $ } from "./datepicker.helpers.js";
 import { SkfElement as O } from "../../internal/components/skf-element.js";
 import { watch as R } from "../../internal/helpers/watch.js";
 import { Temporal as m } from "@js-temporal/polyfill";
@@ -7,11 +5,13 @@ import { componentStyles as C } from "../../styles/component.styles.js";
 import { html as p } from "lit";
 import { property as g, state as M } from "lit/decorators.js";
 import { repeat as w } from "lit/directives/repeat.js";
-import { styles as F } from "./datepicker.calendar.styles.js";
-var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, d = (D, t, e, a) => {
-  for (var s = a > 1 ? void 0 : a ? P(t, e) : t, i = D.length - 1, h; i >= 0; i--)
+import { styles as F } from "./datepicker-calendar.styles.js";
+import { compareDates as $ } from "./datepicker-popup.helpers.js";
+import { dateFormatter as y } from "./datepicker.helpers.js";
+var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (D, t, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? A(t, e) : t, i = D.length - 1, h; i >= 0; i--)
     (h = D[i]) && (s = (a ? h(t, e, s) : h(s)) || s);
-  return a && s && A(t, e, s), s;
+  return a && s && P(t, e, s), s;
 };
 const E = class E extends O {
   constructor() {
@@ -411,5 +411,5 @@ d([
   R("date")
 ], o.prototype, "handleDateChange", 1);
 export {
-  o as SkfDatePickerCalendar
+  o as SkfDatepickerCalendar
 };

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

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

package/dist/components/datepicker/datepicker-calendar.js

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

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

@@ -1,27 +1,12 @@
-import '../button/button';
+import '../button/button.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup } from 'lit';
-import './datepicker';
-export interface SkfDatePickerDateRange {
+import './datepicker-calendar.js';
+export interface SkfDatepickerPopupDateRange {
     start: Date | null;
     end: Date | null;
 }
-/**
- * A date picker component that allows users to select a date or a range of dates.
- *
- * @element skf-datepicker
- * @fires selected-date-changed - When a date is selected
- * @fires selected-date-range-changed - When a range of dates is selected
- *
- * @prop {string} date - The date to display in the date picker
- * @prop {boolean} range - If true, the date picker will allow the selection of a range of dates
- * @prop {string} locale - The locale to use for formatting the date
- *
- * @slot - Default hint content placed inside the date picker
- *
- * @cssprop --max-width - The maximum width of the date picker
- */
-export declare class SkfDatePicker extends SkfElement {
+export declare class SkfDatepickerPopup extends SkfElement {
     static styles: CSSResultGroup;
     locale: string;
     date: string;
@@ -40,7 +25,7 @@ export declare class SkfDatePicker extends SkfElement {
      * Latest selectable date. (yyyy-mm-dd format)
      */
     selectableTo?: string;
-    selectedDateRange: SkfDatePickerDateRange;
+    selectedDateRange: SkfDatepickerPopupDateRange;
     /** @internal */
     private _date?;
     /** @internal */

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

@@ -1,19 +1,19 @@
 import "../button/button.js";
-import { dateFormatter as l, is as v } from "../date-picker-input/datepicker-input.helpers.js";
-import { SkfElement as R } from "../../internal/components/skf-element.js";
+import { SkfElement as v } from "../../internal/components/skf-element.js";
 import { watch as p } from "../../internal/helpers/watch.js";
-import { componentStyles as S } from "../../styles/component.styles.js";
+import { componentStyles as R } from "../../styles/component.styles.js";
 import { html as D } from "lit";
 import { property as o, state as m } from "lit/decorators.js";
-import "./datepicker.js";
-import { getDateParts as g, assertISODate as $, earliestDate as T, latestDate as C, compareDates as c, doAnimate as b } from "./datepicker.helpers.js";
-import { styles as k } from "./datepicker.styles.js";
+import "./datepicker-calendar.js";
+import { getDateParts as g, assertISODate as S, earliestDate as $, latestDate as T, compareDates as c, doAnimate as b } from "./datepicker-popup.helpers.js";
+import { styles as C } from "./datepicker-popup.styles.js";
+import { dateFormatter as l, is as k } from "./datepicker.helpers.js";
 var F = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (w, e, t, a) => {
   for (var s = a > 1 ? void 0 : a ? E(e, t) : e, r = w.length - 1, d; r >= 0; r--)
     (d = w[r]) && (s = (a ? d(e, t, s) : d(s)) || s);
   return a && s && F(e, t, s), s;
 };
-const y = class y extends R {
+const y = class y extends v {
   constructor() {
     super(...arguments), this.locale = "en-CA", this.date = (/* @__PURE__ */ new Date()).toLocaleDateString(this.locale), this.id = "", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
       start: null,
@@ -96,8 +96,8 @@ const y = class y extends R {
     this.style.setProperty("--max-width", this.range ? "43em" : "21em");
   }
   _handleDateChange() {
-    console.log("%cdate changed", "color:red", this.date), this.date = this.date && $(this.date) ? this.date : l(/* @__PURE__ */ new Date()), this.date = T(
-      C(this.date, this.selectableFrom ?? this.date),
+    console.log("%cdate changed", "color:red", this.date), this.date = this.date && S(this.date) ? this.date : l(/* @__PURE__ */ new Date()), this.date = $(
+      T(this.date, this.selectableFrom ?? this.date),
       this.selectableTo ?? this.date
     ), this._date = new Date(this.date), this._datePlusOneMonth = new Date(this._date.getFullYear(), this._date.getMonth() + 1, 1);
   }
@@ -113,7 +113,7 @@ const y = class y extends R {
   gotoDate(e) {
     if (e instanceof Date)
       this.date = l(e);
-    else if (v(e).dateISO())
+    else if (k(e).dateISO())
       this.date = e;
     else
       throw new Error("Invalid date format");
@@ -209,7 +209,7 @@ const y = class y extends R {
     )) : Promise.resolve();
   }
 };
-y.styles = [S, k];
+y.styles = [R, C];
 let i = y;
 n([
   o({ reflect: !0 })
@@ -257,5 +257,5 @@ n([
   p("selectedDate")
 ], i.prototype, "_handleSelectedDateChange", 1);
 export {
-  i as SkfDatePicker
+  i as SkfDatepickerPopup
 };

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

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

package/dist/components/{date-picker/datepicker.helpers.d.ts → datepicker/datepicker-popup.helpers.d.ts}

@@ -22,12 +22,12 @@ export declare function getDateParts(date?: undefined | string | Date | Temporal
  */
 export declare function compareDates(dateOne: Temporal.PlainDate | string, dateTwo: Temporal.PlainDate | string, granularity?: 'days' | 'months' | 'years'): 0 | 1 | -1;
 /**
- * @param dateOne - first date to compare as string
- * @param dateTwo - second date to compare as string
+ * @param dateOne - first date to compare as string (accepts Date and Temporal.PlainDate too)
+ * @param dateTwo - second date to compare as string (accepts Date and Temporal.PlainDate too)
  * @param unit - the unit to compare the dates by [days, months, years]
  * @returns the difference between the two dates in the specified unit
  */
-export declare function timeBetween(dateOne: Temporal.PlainDate | string, dateTwo: Temporal.PlainDate | string, unit?: 'days' | 'months' | 'years'): number;
+export declare function timeBetween(dateOne: Temporal.PlainDate | Date | string, dateTwo: Temporal.PlainDate | Date | string, unit?: 'days' | 'months' | 'years'): number;
 /**
  * @param dates - a list of dates to compare
  * @returns - the earliest date of the list