@skf-design-system/ui-components 1.0.0-alpha.40 → 1.0.0-alpha.42

package/dist/components/datepicker/datepicker.component.js

@@ -1,8 +1,8 @@
-var P = (o) => {
-  throw TypeError(o);
+var F = (l) => {
+  throw TypeError(l);
 };
-var S = (o, l, e) => l.has(o) || P("Cannot " + e);
-var k = (o, l, e) => (S(o, l, "read from private field"), e ? e.call(o) : l.get(o)), E = (o, l, e) => l.has(o) ? P("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(o) : l.set(o, e), C = (o, l, e, t) => (S(o, l, "write to private field"), t ? t.call(o, e) : l.set(o, e), e);
+var S = (l, d, e) => d.has(l) || F("Cannot " + e);
+var k = (l, d, e) => (S(l, d, "read from private field"), e ? e.call(l) : d.get(l)), E = (l, d, e) => d.has(l) ? F("Cannot add the same private member more than once") : d instanceof WeakSet ? d.add(l) : d.set(l, e), C = (l, d, e, t) => (S(l, d, "write to private field"), t ? t.call(l, e) : d.set(l, e), e);
 import "../icon/icon.js";
 import { computePosition as T, flip as B, offset as x } from "@floating-ui/dom";
 import { FormBase as R } from "../../internal/components/formBase.js";
@@ -15,30 +15,32 @@ import { Temporal as I } from "@js-temporal/polyfill";
 import { componentStyles as q } from "../../styles/component.styles.js";
 import { LocalizeController as U } from "../../utilities/localize.js";
 import { nothing as f, html as b } from "lit";
-import { property as d, state as D, query as $, queryAssignedNodes as N } from "lit/decorators.js";
+import { property as o, state as D, query as $, queryAssignedNodes as N } from "lit/decorators.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
 import { live as O } from "lit/directives/live.js";
 import "./datepicker-popup.js";
 import { dateFormatter as v, is as m, isPopoverOpen as Y, debounce as z } from "./datepicker.helpers.js";
 import { styles as W } from "./datepicker.styles.js";
-var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, r = (o, l, e, t) => {
-  for (var i = t > 1 ? void 0 : t ? K(l, e) : l, h = o.length - 1, p; h >= 0; h--)
-    (p = o[h]) && (i = (t ? p(l, e, i) : p(i)) || i);
-  return t && i && H(l, e, i), i;
+var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, r = (l, d, e, t) => {
+  for (var i = t > 1 ? void 0 : t ? K(d, e) : d, h = l.length - 1, p; h >= 0; h--)
+    (p = l[h]) && (i = (t ? p(d, e, i) : p(i)) || i);
+  return t && i && H(d, e, i), i;
 }, g;
 const w = class w extends R {
   constructor() {
     super();
     E(this, g);
-    C(this, g, new U(this)), this.popoverController = new A(this), this.id = "skf-datepicker-input", this.lang = "en", 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 = () => {
+    C(this, g, new U(this)), this.popoverController = new A(this), this.id = "skf-datepicker-input", this.lang = "en", this.placeholder = "YYYY-MM-DD", this.placeholderEnd = "", 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, i = e.detail.date.end;
-        this.value = `${v(t)},${v(i)}`, this.selectedRangeDates = { start: t, end: i };
-      } else !this.range && e.detail.date instanceof Date && (this.value = v(e.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
+        this.value = `${v(t)},${v(i)}`, this.selectedRangeDates = { start: t, end: i }, t && i && this._handleDatepickerClose();
+      } else !this.range && e.detail.date instanceof Date && (this.value = v(e.detail.date), this._handleDatepickerClose());
+    }, this._handleDatepickerClose = () => {
+      this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
         this.$popover.hidePopover();
-      }));
+      });
     }, this._handleKeyboardEvents = (e) => {
       const t = e.target.closest("input");
       if (t) {
@@ -47,14 +49,17 @@ const w = class w extends R {
           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(), this.$popover.childNodes[1].shadowRoot?.querySelector("skf-datepicker-calendar")?.shadowRoot?.querySelector("button")?.focus()), (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) {
+          if (e.stopPropagation(), t.blur(), this.$popover.hidePopover(), this.range) {
             const i = this.$input.value, h = this.$input_range_end.value;
             if (!m(i, h).date()) return;
             this.$datepickerPopup.selectedDateRange = {
               start: new Date(i),
               end: new Date(h)
-            }, this.$datepickerPopup.emit("skf-datepicker-selected-date-changed", {
-              detail: { date: new Date(i) }
+            }, this.$datepickerPopup.emit("skf-datepicker-selected-date-range-changed", {
+              detail: {
+                ...this.$datepickerPopup.selectedDateRange,
+                id: this.id
+              }
             });
           } else {
             if (!t.value || !m(t.value).date()) return;
@@ -323,7 +328,7 @@ const w = class w extends R {
 										inputmode=${u(this.inputMode)}
 										maxlength="10"
 										name=${(this.name ?? "calendar") + "-end"}
-										placeholder=${u(this.placeholder)}
+										placeholder=${this.placeholderEnd || this.placeholder}
 										type="text"
 									/>
 								` : f}
@@ -370,61 +375,64 @@ const w = class w extends R {
 g = new WeakMap(), w.styles = [q, W];
 let s = w;
 r([
-  d({ attribute: "custom-invalid", reflect: !0 })
+  o({ attribute: "custom-invalid", reflect: !0 })
 ], s.prototype, "customInvalid", 1);
 r([
-  d({ type: String })
+  o({ type: String })
 ], s.prototype, "id", 2);
 r([
-  d()
+  o()
 ], s.prototype, "label", 2);
 r([
-  d({ type: String })
+  o({ type: String })
 ], s.prototype, "lang", 2);
 r([
-  d({ type: Boolean, attribute: "hide-label" })
+  o({ type: Boolean, attribute: "hide-label" })
 ], s.prototype, "hideLabel", 2);
 r([
-  d()
+  o()
 ], s.prototype, "hint", 2);
 r([
-  d({ attribute: "invalid-dates" })
+  o({ attribute: "invalid-dates" })
 ], s.prototype, "invalidDates", 2);
 r([
-  d({ reflect: !0 })
+  o({ reflect: !0 })
 ], s.prototype, "name", 2);
 r([
-  d()
+  o()
 ], s.prototype, "placeholder", 2);
 r([
-  d({ type: Boolean })
+  o({ attribute: "placeholder-end" })
+], s.prototype, "placeholderEnd", 2);
+r([
+  o({ type: Boolean })
 ], s.prototype, "range", 2);
 r([
-  d({ type: Boolean })
+  o({ type: Boolean })
 ], s.prototype, "readonly", 2);
 r([
-  d({ attribute: "selectable-from" })
+  o({ attribute: "selectable-from" })
 ], s.prototype, "selectableFrom", 2);
 r([
-  d({ attribute: "selectable-to" })
+  o({ attribute: "selectable-to" })
 ], s.prototype, "selectableTo", 2);
 r([
-  d({ reflect: !0 })
+  o({ reflect: !0 })
 ], s.prototype, "severity", 2);
 r([
-  d({ reflect: !0 })
+  o({ reflect: !0 })
 ], s.prototype, "size", 2);
 r([
-  d({ type: String, attribute: "validate-on" })
+  o({ type: String, attribute: "validate-on" })
 ], s.prototype, "validateOn", 2);
 r([
-  d()
+  o()
 ], s.prototype, "value", 2);
 r([
   D()
 ], s.prototype, "_init_date", 2);
 r([
-  d({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], s.prototype, "invalid", 2);
 r([
   D()

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

@@ -101,8 +101,6 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     _invalidChanged(): void;
     _valueChanged(): void;
     _hintChanged(): void;
-    /** @internal Used to check maxLength on input and paste functions */
-    _validateMaxLength: () => void;
     /** @internal */
     _handleInput: () => void;
     /** @internal */

package/dist/components/input/input.component.js

@@ -2,38 +2,35 @@ var $ = (r) => {
   throw TypeError(r);
 };
 var w = (r, n, t) => n.has(r) || $("Cannot " + t);
-var d = (r, n, t) => (w(r, n, "read from private field"), t ? t.call(r) : n.get(r)), g = (r, n, t) => n.has(r) ? $("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, t), y = (r, n, t, a) => (w(r, n, "write to private field"), a ? a.call(r, t) : n.set(r, t), t);
+var d = (r, n, t) => (w(r, n, "read from private field"), t ? t.call(r) : n.get(r)), b = (r, n, t) => n.has(r) ? $("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, t), v = (r, n, t, a) => (w(r, n, "write to private field"), a ? a.call(r, t) : n.set(r, t), t);
 import "../icon/icon.js";
 import { FormBase as E } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
 import { hintSeverity as S } from "../../internal/helpers/hintSeverity.js";
-import { watch as b } from "../../internal/helpers/watch.js";
+import { watch as _ } from "../../internal/helpers/watch.js";
 import { Asterisk as C } from "../../internal/templates/asterisk.js";
-import { componentStyles as x } from "../../styles/component.styles.js";
-import { LocalizeController as P } from "../../utilities/localize.js";
-import { html as m, nothing as c } from "lit";
-import { property as s, state as L, query as k, queryAssignedNodes as B } from "lit/decorators.js";
+import { componentStyles as P } from "../../styles/component.styles.js";
+import { LocalizeController as k } from "../../utilities/localize.js";
+import { html as c, nothing as m } from "lit";
+import { property as s, state as B, query as x, queryAssignedNodes as V } from "lit/decorators.js";
 import { ifDefined as l } from "lit/directives/if-defined.js";
-import { live as V } from "lit/directives/live.js";
-import { InputNumberController as I, InputPasswordController as D } from "./input.controllers.js";
+import { live as L } from "lit/directives/live.js";
+import { InputNumberController as D, InputPasswordController as I } from "./input.controllers.js";
 import A from "./input.styles.js";
-var M = Object.defineProperty, N = Object.getOwnPropertyDescriptor, e = (r, n, t, a) => {
-  for (var o = a > 1 ? void 0 : a ? N(n, t) : n, h = r.length - 1, p; h >= 0; h--)
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, e = (r, n, t, a) => {
+  for (var o = a > 1 ? void 0 : a ? O(n, t) : n, h = r.length - 1, p; h >= 0; h--)
     (p = r[h]) && (o = (a ? p(n, t, o) : p(o)) || o);
-  return a && o && M(n, t, o), o;
-}, u, f, v;
-const _ = class _ extends E {
+  return a && o && N(n, t, o), o;
+}, u, f, y;
+const g = class g extends E {
   constructor() {
     super(...arguments);
-    g(this, u);
+    b(this, u);
     /** @internal intermediary value for reset to function, e.g value attribute act as default value */
-    g(this, f);
+    b(this, f);
     /** @internal */
-    g(this, v);
-    y(this, u, new P(this)), this.autofocus = !1, this.debug = !1, this.hideLabel = !1, this.invalid = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this._buttonDown = !1, this._numberController = new I(this), this._passwordController = new D(this), this._validateMaxLength = () => {
-      if (!this.maxLength) return;
-      this.value.length > this.maxLength && (this.value = this.value.slice(0, this.maxLength));
-    }, this._handleInput = () => {
+    b(this, y);
+    v(this, u, new k(this)), this.autofocus = !1, this.debug = !1, this.hideLabel = !1, this.invalid = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this._buttonDown = !1, this._numberController = new D(this), this._passwordController = new I(this), this._handleInput = () => {
       this.value = this.$input?.value ?? "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (t) => {
       t.stopPropagation(), this.value = d(this, f) ?? "", this._internals.setFormValue(this.value), this.emit("skf-input-cleared");
@@ -41,7 +38,7 @@ const _ = class _ extends E {
       this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(t);
     }, this._handlePressEnd = () => {
       this._buttonDown = !1, this.type === "number" && this._numberController.handleActionBtnLongPressEnd();
-    }, this._renderNumberButton = (t) => m`
+    }, this._renderNumberButton = (t) => c`
 		<button
 			?disabled=${this.disabled}
 			@click=${(a) => {
@@ -56,7 +53,7 @@ const _ = class _ extends E {
 		>
 			<skf-icon name="${t === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
 		</button>
-	`, this._renderPasswordButton = () => m`
+	`, this._renderPasswordButton = () => c`
 		<button
 			@click=${this._passwordController.toggleVisibility}
 			aria-label=${this._passwordController._type === "password" ? d(this, u).term("showPassword") : d(this, u).term("hidePassword")}
@@ -68,7 +65,7 @@ const _ = class _ extends E {
 		>
 			<skf-icon name=${this._passwordController._icon} size="sm"></skf-icon>
 		</button>
-	`, this._renderSearchButton = () => m`
+	`, this._renderSearchButton = () => c`
 		<button
 			@click=${this._resetValue}
 			@mousedown=${this._handlePressStart}
@@ -91,7 +88,7 @@ const _ = class _ extends E {
     return this.customError;
   }
   firstUpdated() {
-    this._validateMaxLength(), this.$input?.addEventListener("change", () => {
+    this.$input?.addEventListener("change", () => {
       this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(this.$input?.value ?? ""), this.emit("change"), this.validateInput();
     }), this.addEventListener("invalid", (t) => {
       this._pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
@@ -104,7 +101,7 @@ const _ = class _ extends E {
         this._pristine = !1, this._internals.setValidity({ customError: !0 }, p), this.invalid = !0, this.hint = p, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
-    t === "hint" && y(this, v, this.getAttribute("hint") ?? "");
+    t === "hint" && v(this, y, this.getAttribute("hint") ?? "");
   }
   _invalidChanged() {
     if (this.invalid) {
@@ -112,13 +109,13 @@ const _ = class _ extends E {
       const t = this._internals.validationMessage;
       this.hint = t !== "" ? this._internals.validationMessage : "", this.checkValidity();
     } else
-      !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = d(this, v) ?? "";
+      !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = d(this, y) ?? "";
   }
   _valueChanged() {
-    this._validateMaxLength(), d(this, f) ?? y(this, f, this.value), this._internals.setFormValue(this.value), this.validateInput();
+    d(this, f) ?? v(this, f, this.value), this._internals.setFormValue(this.value), this.validateInput();
   }
   _hintChanged() {
-    d(this, v) ?? y(this, v, this.hint);
+    d(this, y) ?? v(this, y, this.hint);
   }
   focus() {
     this.$input?.focus();
@@ -155,15 +152,15 @@ const _ = class _ extends E {
   }
   render() {
     const t = (this._defaultSlot.length === 0 || !this._defaultSlot[0]?.textContent?.trim()) && !this.label;
-    return m`
+    return c`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? C(d(this, u).term("required")) : c}
+						${this.required ? C(d(this, u).term("required")) : m}
 					</div>
 					<div id="input">
-						${this.type === "search" ? m`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : c}
+						${this.type === "search" ? c`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : m}
 						<div
 							data-leading=${l(this.leading)}
 							data-trailing=${l(this.trailing)}
@@ -174,11 +171,11 @@ const _ = class _ extends E {
 								?readonly=${this.readonly}
 								?required=${this.required}
 								.autocomplete=${this.autocomplete ?? "off"}
-								.value=${V(this.value)}
+								.value=${L(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
-								aria-describedby=${l(this.hint?.trim() ? "hint" : c)}
-								aria-errormessage=${l(this.hint?.trim() ? "hint" : c)}
+								aria-describedby=${l(this.hint?.trim() ? "hint" : m)}
+								aria-errormessage=${l(this.hint?.trim() ? "hint" : m)}
 								aria-invalid=${!!this.invalid}
 								data-testid="field-input"
 								inputmode=${l(this.inputMode)}
@@ -194,16 +191,16 @@ const _ = class _ extends E {
     )}
 							/>
 						</div>
-						${this.type === "number" ? m`
+						${this.type === "number" ? c`
 									<div id="action">
 										${this._renderNumberButton("inc")} ${this._renderNumberButton("dec")}
 									</div>
-								` : c}
-						${this.type === "password" ? this._renderPasswordButton() : c}
-						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : c}
+								` : m}
+						${this.type === "password" ? this._renderPasswordButton() : m}
+						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : m}
 					</div>
 				</label>
-				${this.hint && m`
+				${this.hint && c`
 					<skf-hint
 						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
@@ -216,8 +213,8 @@ const _ = class _ extends E {
 		`;
   }
 };
-u = new WeakMap(), f = new WeakMap(), v = new WeakMap(), _.styles = [x, A];
-let i = _;
+u = new WeakMap(), f = new WeakMap(), y = new WeakMap(), g.styles = [P, A];
+let i = g;
 e([
   s()
 ], i.prototype, "autocomplete", 2);
@@ -297,22 +294,22 @@ e([
   s({ type: String, reflect: !1 })
 ], i.prototype, "value", 2);
 e([
-  L()
+  B()
 ], i.prototype, "_buttonDown", 2);
 e([
-  k("input")
+  x("input")
 ], i.prototype, "$input", 2);
 e([
-  B({ flatten: !0 })
+  V({ flatten: !0 })
 ], i.prototype, "_defaultSlot", 2);
 e([
-  b("invalid")
+  _("invalid")
 ], i.prototype, "_invalidChanged", 1);
 e([
-  b("value", { waitUntilFirstUpdate: !0 })
+  _("value", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "_valueChanged", 1);
 e([
-  b("hint")
+  _("hint")
 ], i.prototype, "_hintChanged", 1);
 export {
   i as SkfInput

package/dist/components/select/select.controllers.js

@@ -35,7 +35,7 @@ class p {
           e.preventDefault(), this._selectFocusedOption(e.target);
           break;
         case "Escape":
-          e.preventDefault(), this.host && (this.host._expanded = !1), setTimeout(() => {
+          e.stopPropagation(), e.preventDefault(), this.host && (this.host._expanded = !1), setTimeout(() => {
             this.host.focus();
           });
           break;

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

@@ -50,6 +50,8 @@ export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
     /** @internal */
     private _handleChange;
     /** @internal */
+    _handleCheckedChange(): void;
+    /** @internal */
     private _handleInvalid;
     /** @internal */
     private _resetValue;

package/dist/components/switch/switch.component.js

@@ -1,27 +1,28 @@
-var p = (t) => {
+var u = (t) => {
   throw TypeError(t);
 };
-var c = (t, i, e) => i.has(t) || p("Cannot " + e);
-var v = (t, i, e) => (c(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), m = (t, i, e, n) => (c(t, i, "write to private field"), n ? n.call(t, e) : i.set(t, e), e);
+var c = (t, i, e) => i.has(t) || u("Cannot " + e);
+var v = (t, i, e) => (c(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? u("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), m = (t, i, e, h) => (c(t, i, "write to private field"), h ? h.call(t, e) : i.set(t, e), e);
 import { FormBase as _ } from "../../internal/components/formBase.js";
-import { Asterisk as y } from "../../internal/templates/asterisk.js";
-import { componentStyles as b } from "../../styles/component.styles.js";
-import { LocalizeController as g } from "../../utilities/localize.js";
-import { nothing as k, html as $ } from "lit";
-import { property as l, state as C, query as V } from "lit/decorators.js";
-import { classMap as w } from "lit/directives/class-map.js";
-import { ifDefined as q } from "lit/directives/if-defined.js";
-import { styles as z } from "./switch.styles.js";
-var A = Object.defineProperty, a = (t, i, e, n) => {
-  for (var h = void 0, d = t.length - 1, u; d >= 0; d--)
-    (u = t[d]) && (h = u(i, e, h) || h);
-  return h && A(i, e, h), h;
-}, r;
-const o = class o extends _ {
+import { watch as y } from "../../internal/helpers/watch.js";
+import { Asterisk as b } from "../../internal/templates/asterisk.js";
+import { componentStyles as g } from "../../styles/component.styles.js";
+import { LocalizeController as k } from "../../utilities/localize.js";
+import { nothing as $, html as C } from "lit";
+import { property as l, state as w, query as V } from "lit/decorators.js";
+import { classMap as q } from "lit/directives/class-map.js";
+import { ifDefined as I } from "lit/directives/if-defined.js";
+import { styles as O } from "./switch.styles.js";
+var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (t, i, e, h) => {
+  for (var r = h > 1 ? void 0 : h ? z(i, e) : i, d = t.length - 1, o; d >= 0; d--)
+    (o = t[d]) && (r = (h ? o(i, e, r) : o(r)) || r);
+  return h && r && P(i, e, r), r;
+}, n;
+const p = class p extends _ {
   constructor() {
     super(...arguments);
-    f(this, r);
-    m(this, r, new g(this)), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.hideLabel = !1, this.lang = "en", this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
+    f(this, n);
+    m(this, n, new k(this)), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.hideLabel = !1, this.lang = "en", this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
       e.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emit("change");
     }, this._handleInvalid = (e) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && e.preventDefault();
@@ -56,10 +57,13 @@ const o = class o extends _ {
     } else
       this.setValidity({});
   }
+  _handleCheckedChange() {
+    this.setFormValue(this.checked ? this.value : null), this._validateInput(), this.$input && (this.$input.checked = this.checked);
+  }
   render() {
-    return $`
+    return C`
 			<label
-				class=${w({
+				class=${q({
       switch: !0,
       "switch--small": this.size === "sm"
     })}
@@ -73,50 +77,53 @@ const o = class o extends _ {
 					@reset=${this._resetValue}
 					aria-invalid=${!!this._invalid}
 					class="switch__input"
-					name=${q(this.name)}
+					name=${I(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
-				<div class="switch__label ${this.hideLabel ? "visually-hidden" : k}">
+				<div class="switch__label ${this.hideLabel ? "visually-hidden" : $}">
 					<slot>${this.label}</slot>
-					${this.required ? y(v(this, r).term("required"), "switch__asterisk") : null}
+					${this.required ? b(v(this, n).term("required"), "switch__asterisk") : null}
 				</div>
 			</label>
 		`;
   }
 };
-r = new WeakMap(), o.styles = [b, z];
-let s = o;
+n = new WeakMap(), p.styles = [g, O];
+let s = p;
 a([
   l({ type: Boolean })
-], s.prototype, "debug");
+], s.prototype, "debug", 2);
 a([
   l({ type: Boolean, reflect: !0 })
-], s.prototype, "checked");
+], s.prototype, "checked", 2);
 a([
   l({ type: Boolean, attribute: "hide-label", reflect: !0 })
-], s.prototype, "hideLabel");
+], s.prototype, "hideLabel", 2);
 a([
   l()
-], s.prototype, "label");
+], s.prototype, "label", 2);
 a([
   l({ type: String })
-], s.prototype, "lang");
+], s.prototype, "lang", 2);
 a([
   l()
-], s.prototype, "name");
+], s.prototype, "name", 2);
 a([
   l({ reflect: !0 })
-], s.prototype, "size");
+], s.prototype, "size", 2);
 a([
   l()
-], s.prototype, "value");
+], s.prototype, "value", 2);
 a([
-  C()
-], s.prototype, "_invalid");
+  w()
+], s.prototype, "_invalid", 2);
 a([
   V("input")
-], s.prototype, "$input");
+], s.prototype, "$input", 2);
+a([
+  y("checked")
+], s.prototype, "_handleCheckedChange", 1);
 export {
   s as SkfSwitch
 };

package/dist/components/tooltip/tooltip.component.js

@@ -12,13 +12,13 @@ const e = class e extends t {
     s.addEventListener(
       "blur",
       () => {
-        this.close("blur");
+        this.close();
       },
       { signal: this._signal }
     ), s.addEventListener("focus", this.open, { signal: this._signal }), s.addEventListener("mouseenter", this.open, { signal: this._signal }), s.addEventListener(
       "mouseleave",
       () => {
-        this.close("mouseleave");
+        this.close();
       },
       { signal: this._signal }
     );

package/dist/custom-elements.json

@@ -2181,6 +2181,16 @@
               "default": "'YYYY-MM-DD'",
               "attribute": "placeholder"
             },
+            {
+              "kind": "field",
+              "name": "placeholderEnd",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder for the end date input in range mode",
+              "attribute": "placeholder-end"
+            },
             {
               "kind": "field",
               "name": "range",
@@ -2409,6 +2419,15 @@
               "default": "'YYYY-MM-DD'",
               "fieldName": "placeholder"
             },
+            {
+              "name": "placeholder-end",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder for the end date input in range mode",
+              "fieldName": "placeholderEnd"
+            },
             {
               "name": "range",
               "type": {

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

@@ -53,7 +53,7 @@ export declare class SkfPopoverBase extends SkfElement {
     reposition: () => Promise<void>;
     handleEscapeKey: (e: KeyboardEvent) => void;
     open: (e: Event) => void;
-    close: (reason?: string) => void;
+    close: () => void;
     /** @internal eventlisteners here should implement abort signal */
     addEventListeners($element: HTMLElement | Element): void;
     /** @internal */