@skf-design-system/ui-components 1.0.2-beta.20 → 1.0.2-beta.22

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

@@ -1,8 +1,8 @@
-var _ = (n) => {
-  throw TypeError(n);
+var _ = (s) => {
+  throw TypeError(s);
 };
-var w = (n, r, t) => r.has(n) || _("Cannot " + t);
-var f = (n, r, t) => (w(n, r, "read from private field"), t ? t.call(n) : r.get(n)), S = (n, r, t) => r.has(n) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, t), $ = (n, r, t, e) => (w(n, r, "write to private field"), e ? e.call(n, t) : r.set(n, t), t);
+var w = (s, r, t) => r.has(s) || _("Cannot " + t);
+var f = (s, r, t) => (w(s, r, "read from private field"), t ? t.call(s) : r.get(s)), S = (s, r, t) => r.has(s) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, t), $ = (s, r, t, e) => (w(s, r, "write to private field"), e ? e.call(s, t) : r.set(s, t), t);
 import { SkfElement as L } from "../../internal/components/skf-element.js";
 import { watch as O } from "../../internal/helpers/watch.js";
 import { Temporal as h } from "@js-temporal/polyfill";
@@ -14,9 +14,9 @@ import { repeat as y } from "lit/directives/repeat.js";
 import { styles as C } from "./datepicker-calendar.styles.js";
 import { compareDates as E } from "./datepicker-popup.helpers.js";
 import { dateFormatter as D } from "./datepicker.helpers.js";
-var F = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (n, r, t, e) => {
-  for (var a = e > 1 ? void 0 : e ? A(r, t) : r, s = n.length - 1, i; s >= 0; s--)
-    (i = n[s]) && (a = (e ? i(r, t, a) : i(a)) || a);
+var F = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (s, r, t, e) => {
+  for (var a = e > 1 ? void 0 : e ? A(r, t) : r, n = s.length - 1, i; n >= 0; n--)
+    (i = s[n]) && (a = (e ? i(r, t, a) : i(a)) || a);
   return e && a && F(r, t, a), a;
 }, u;
 const b = class b extends L {
@@ -45,12 +45,12 @@ const b = class b extends L {
         const m = Array.from(d.parentElement?.children ?? []).indexOf(d);
         d.parentElement?.children[m - 7]?.firstElementChild?.focus();
       }
-      function a(s) {
-        return s ? Array.from(s.parentElement?.children ?? []).indexOf(s) : 0;
+      function a(n) {
+        return n ? Array.from(n.parentElement?.children ?? []).indexOf(n) : 0;
       }
     }, this.dateSelectable = (t) => {
-      const e = this.invalidDates?.split(",").includes(t), a = !this.selectableTo || E(t, this.selectableTo) < 0, s = !this.selectableFrom || E(t, this.selectableFrom) > 0;
-      return { matchesInvalidDates: e, dateWithinRange: !(a && s) };
+      const e = this.invalidDates?.split(",").includes(t), a = !this.selectableTo || E(t, this.selectableTo) < 0, n = !this.selectableFrom || E(t, this.selectableFrom) > 0;
+      return { matchesInvalidDates: e, dateWithinRange: !(a && n) };
     };
   }
   firstUpdated() {
@@ -65,7 +65,7 @@ const b = class b extends L {
       months: 1
     }).daysInMonth ?? 0;
   }
-  _createDate({ year: t, month: e, day: a = 1 }, s) {
+  _createDate({ year: t, month: e, day: a = 1 }, n) {
     switch (e ??= this.date.getMonth(), t ??= this.date.getFullYear(), !0) {
       case e < 0:
         e = 11, t--;
@@ -74,7 +74,7 @@ const b = class b extends L {
         e = 0, t++;
         break;
     }
-    if (s)
+    if (n)
       try {
         return h.PlainDate.from({
           year: t,
@@ -104,8 +104,8 @@ const b = class b extends L {
   /** @internal Check if a day is between two dates */
   _isDateBetween(t, e, a) {
     if (!e || !a) return !1;
-    const s = h.PlainDate.compare(t, e) > 0, i = h.PlainDate.compare(t, a) < 0;
-    return s && i;
+    const n = h.PlainDate.compare(t, e) > 0, i = h.PlainDate.compare(t, a) < 0;
+    return n && i;
   }
   render() {
     return g`
@@ -165,7 +165,7 @@ const b = class b extends L {
   }
   /** @internal */
   returnDayClasses(t) {
-    const e = [], a = this._createDate({ day: t }).getDate(), s = this.selectedDate?.getMonth() === this.date.getMonth(), i = this.selectedDate?.getFullYear() === this.date.getFullYear();
+    const e = [], a = this._createDate({ day: t }).getDate(), n = this.selectedDate?.getMonth() === this.date.getMonth(), i = this.selectedDate?.getFullYear() === this.date.getFullYear();
     this.range && this._isDateBetween(
       this._createDate({ day: t }, !0),
       this._plainDate(this.selectedDateRange.start) ?? void 0,
@@ -176,7 +176,7 @@ const b = class b extends L {
     );
     (d || m) && e.push("invalid");
     const p = this.selectedDate?.getDate() === a;
-    return !this.range && p && s && i && (console.log("is single date selected", this.selectedDate), e.push("selected")), this._createDate({ day: t }, !0).equals(String(this._plainDate(/* @__PURE__ */ new Date()))) && e.push("today"), e.join(" ");
+    return !this.range && p && n && i && (console.log("is single date selected", this.selectedDate), e.push("selected")), this._createDate({ day: t }, !0).equals(String(this._plainDate(/* @__PURE__ */ new Date()))) && e.push("today"), e.join(" ");
   }
   /** @internal */
   handleSelectDay({
@@ -184,7 +184,7 @@ const b = class b extends L {
     month: e = this.date.getMonth(),
     day: a
   }) {
-    this.emit("selected-date-changed", {
+    this.emit("skf-datepicker-selected-date-changed", {
       detail: {
         date: new Date(t, e, a),
         id: this.eventid
@@ -209,8 +209,8 @@ const b = class b extends L {
             day: t + 1
           },
           !0
-        ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
-        return (s || i) && e.push("invalid"), g`<li class="day ">
+        ).toString(), { matchesInvalidDates: n, dateWithinRange: i } = this.dateSelectable(a);
+        return (n || i) && e.push("invalid"), g`<li class="day ">
 					<button
 						class=${e.join(" ")}
 						data-date=${a}
@@ -252,8 +252,8 @@ const b = class b extends L {
             day: t + 1
           },
           !0
-        ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
-        return (s || i) && e.push("invalid"), g`<li class="day">
+        ).toString(), { matchesInvalidDates: n, dateWithinRange: i } = this.dateSelectable(a);
+        return (n || i) && e.push("invalid"), g`<li class="day">
 					<button
 						data-date=${a}
 						class=${e.join(" ")}
@@ -352,11 +352,11 @@ let o = b;
 l([
   c({
     converter: {
-      fromAttribute(n) {
-        return console.log("value", typeof n), new Date(n);
+      fromAttribute(s) {
+        return console.log("value", typeof s), new Date(s);
       },
-      toAttribute(n) {
-        return n.toISOString();
+      toAttribute(s) {
+        return s.toISOString();
       }
     }
   })
@@ -385,7 +385,7 @@ l([
 l([
   c({
     attribute: "selected-date",
-    converter: { fromAttribute: (n) => new Date(n) },
+    converter: { fromAttribute: (s) => new Date(s) },
     reflect: !0
   })
 ], o.prototype, "selectedDate", 2);

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

@@ -72,7 +72,10 @@ const _ = class _ extends E {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("skf-update-calendar-view", this._handleCalendarView), this.addEventListener("selected-date-changed", this._handleSelectedDate);
+    super.connectedCallback(), this.addEventListener("skf-update-calendar-view", this._handleCalendarView), this.addEventListener(
+      "skf-datepicker-selected-date-changed",
+      this._handleSelectedDate
+    );
   }
   firstUpdated() {
     (this.selectedDateRange.start ?? this.selectedDate) && this._onRangeCompleteEmitEvent();

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

@@ -8,6 +8,13 @@ import { type CSSResultGroup } from 'lit';
 import type { SkfDatepickerPopup, SkfDatepickerPopupDateRange } from './datepicker-popup.component.js';
 import './datepicker-popup.js';
 /**
+ * @description A datepicker component for selecting dates.
+ *
+ * @event {CustomEvent} skf-datepicker-selected-date-changed -  Fired when the user selects a date.
+ * @event {CustomEvent} skf-datepicker-selected-date-range-changed -  Fired when the user selects a date range.
+ * @event {CustomEvent} skf-datepicker-opened -  Fired when the datepicker is opened.
+ * @event {CustomEvent} skf-datepicker-closed -  Fired when the datepicker is closed.
+ *
  * @tagname skf-datepicker
  */
 export declare class SkfDatepicker extends FormBase {

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

@@ -2,7 +2,7 @@ var P = (o) => {
   throw TypeError(o);
 };
 var S = (o, l, e) => l.has(o) || P("Cannot " + e);
-var D = (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 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);
 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,7 +15,7 @@ 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 k, query as $, queryAssignedNodes as N } from "lit/decorators.js";
+import { property as d, 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";
@@ -53,12 +53,12 @@ const w = class w extends R {
             this.$datepickerPopup.selectedDateRange = {
               start: new Date(i),
               end: new Date(h)
-            }, this.$datepickerPopup.emit("selected-date-changed", {
+            }, this.$datepickerPopup.emit("skf-datepicker-selected-date-changed", {
               detail: { date: new Date(i) }
             });
           } else {
             if (!t.value || !m(t.value).date()) return;
-            this.$datepickerPopup.emit("selected-date-changed", {
+            this.$datepickerPopup.emit("skf-datepicker-selected-date-changed", {
               detail: { date: new Date(t.value) }
             });
           }
@@ -85,7 +85,7 @@ const w = class w extends R {
             this.$input_range_end.focus();
           }, 200));
         } else
-          this.$datepickerPopup.selectedDate = new Date(t.value), this.$datepickerPopup.emit("selected-date-changed", {
+          this.$datepickerPopup.selectedDate = new Date(t.value), this.$datepickerPopup.emit("skf-datepicker-selected-date-changed", {
             detail: { date: new Date(t.value) }
           });
         this.validateOn === "input" && (this._pristine = !1, this.validateInput());
@@ -113,7 +113,10 @@ const w = class w extends R {
     return this.customError;
   }
   connectedCallback() {
-    super.connectedCallback(), this._init_date = this.value?.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
+    super.connectedCallback(), this._init_date = this.value?.split(",")[0], this.addEventListener(
+      "skf-datepicker-selected-date-changed",
+      this._handleSelectedDate
+    );
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.abortController.abort();
@@ -276,7 +279,7 @@ const w = class w extends R {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${e} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? V(D(this, g).term("required")) : f}
+						${this.required ? V(k(this, g).term("required")) : f}
 					</div>
 					<div id="input">
 						<input
@@ -326,7 +329,7 @@ const w = class w extends R {
 								` : f}
 						${this.showClearbutton ? b`
 									<button
-										aria-label=${D(this, g).term("close")}
+										aria-label=${k(this, g).term("close")}
 										class="password skf-icon-host"
 										type="button"
 										@click=${this.clear.bind(this)}
@@ -418,16 +421,16 @@ r([
   d()
 ], s.prototype, "value", 2);
 r([
-  k()
+  D()
 ], s.prototype, "_init_date", 2);
 r([
   d({ type: Boolean, reflect: !0 })
 ], s.prototype, "invalid", 2);
 r([
-  k()
+  D()
 ], s.prototype, "selectedRangeDates", 2);
 r([
-  k()
+  D()
 ], s.prototype, "showClearbutton", 2);
 r([
   $("#popover")

package/dist/components/select/select.component.js

@@ -32,11 +32,11 @@ const f = class f extends L {
   constructor() {
     super();
     g(this, d);
-    y(this, d, new F(this)), this._componentIsConnected = !1, this.selectDelay = 200, this._optionsList = [], this.hideLabel = !1, this.hideTags = !1, this.label = "", this.lang = "en", this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new M(this), this.keyboardNavController = new N(this), this.developerFeedbackController = new H(this), this.popoverController = new k(this), this._handleOptionSelected = (t) => {
+    y(this, d, new F(this)), this._componentIsConnected = !1, this.selectDelay = 200, this._optionsList = [], this.hideLabel = !1, this.hideTags = !1, this.label = "", this.lang = "en", this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new M(this), this.keyboardNavController = new N(this), this.developerFeedbackController = new H(this), this.popoverController = new k(this), this._handleOptionSelected = ((t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
-    }, this._handleReset = () => {
+    }), this._handleReset = () => {
       this.emit("reset"), this._resetSelectedOptions();
     }, this._updateWidth = () => {
       setTimeout(() => {

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

@@ -9,6 +9,8 @@ type Size = 'sm' | 'md';
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/28bdd6-tags) for design principles
  *
+ * @event {CustomEvent} skf-tag-remove - Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM.
+ *
  * @slot - The component's placeholder content
  *
  * @tagname skf-tag

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

@@ -73,7 +73,6 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     /** @internal */
     private $input?;
     firstUpdated(): void;
-    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     _invalidChanged(): void;
     _hintChanged(): void;

package/dist/components/textarea/textarea.component.js

@@ -2,24 +2,24 @@ var $ = (a) => {
   throw TypeError(a);
 };
 var _ = (a, r, t) => r.has(a) || $("Cannot " + t);
-var p = (a, r, t) => (_(a, r, "read from private field"), t ? t.call(a) : r.get(a)), c = (a, r, t) => r.has(a) ? $("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), m = (a, r, t, n) => (_(a, r, "write to private field"), n ? n.call(a, t) : r.set(a, t), t);
+var p = (a, r, t) => (_(a, r, "read from private field"), t ? t.call(a) : r.get(a)), c = (a, r, t) => r.has(a) ? $("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), v = (a, r, t, n) => (_(a, r, "write to private field"), n ? n.call(a, t) : r.set(a, t), t);
 import "../icon/icon.js";
 import { FormBase as V } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { hintSeverity as w } from "../../internal/helpers/hintSeverity.js";
+import { hintSeverity as C } from "../../internal/helpers/hintSeverity.js";
 import { watch as g } from "../../internal/helpers/watch.js";
-import { Asterisk as C } from "../../internal/templates/asterisk.js";
+import { Asterisk as w } from "../../internal/templates/asterisk.js";
 import { componentStyles as I } from "../../styles/component.styles.js";
 import { LocalizeController as x } from "../../utilities/localize.js";
 import { nothing as f, html as E } from "lit";
 import { property as s, query as L } from "lit/decorators.js";
-import { ifDefined as o } from "lit/directives/if-defined.js";
-import A from "./textarea.styles.js";
-var M = Object.defineProperty, O = Object.getOwnPropertyDescriptor, e = (a, r, t, n) => {
-  for (var l = n > 1 ? void 0 : n ? O(r, t) : r, h = a.length - 1, d; h >= 0; h--)
-    (d = a[h]) && (l = (n ? d(r, t, l) : d(l)) || l);
-  return n && l && M(r, t, l), l;
-}, y, u, v;
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import O from "./textarea.styles.js";
+var S = Object.defineProperty, F = Object.getOwnPropertyDescriptor, e = (a, r, t, n) => {
+  for (var l = n > 1 ? void 0 : n ? F(r, t) : r, o = a.length - 1, d; o >= 0; o--)
+    (d = a[o]) && (l = (n ? d(r, t, l) : d(l)) || l);
+  return n && l && S(r, t, l), l;
+}, y, u, m;
 const b = class b extends V {
   constructor() {
     super(...arguments);
@@ -27,8 +27,8 @@ const b = class b extends V {
     /** @internal */
     c(this, u);
     /** @internal */
-    c(this, v);
-    m(this, y, new x(this)), this.debug = !1, this.hideLabel = !1, this.invalid = !1, this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this._resetValue = (t) => {
+    c(this, m);
+    v(this, y, new x(this)), this.debug = !1, this.hideLabel = !1, this.invalid = !1, this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this._resetValue = (t) => {
       t.stopPropagation(), this.value = p(this, u) ?? "", this._internals.setFormValue(this.value);
     }, this._handleInput = () => {
       this.value = this.$input?.value ?? "", this.validateOn === "input" && (this.pristine = !1, this.validateInput());
@@ -47,23 +47,14 @@ const b = class b extends V {
       this.pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
-  willUpdate(t) {
-    if (t.has("invalid"))
-      if (this.invalid) {
-        this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
-        const n = this._internals.validationMessage;
-        this.hint = n !== "" ? this._internals.validationMessage : "unspecified error", this.checkValidity();
-      } else
-        this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = p(this, v) ?? "";
-  }
   attributeChangedCallback(t, n, l) {
-    if (super.attributeChangedCallback(t, n, l), t === "value" && l !== p(this, u) && m(this, u, void 0), t === "custom-invalid")
+    if (super.attributeChangedCallback(t, n, l), t === "value" && l !== p(this, u) && v(this, u, void 0), t === "custom-invalid")
       if (typeof l == "string") {
         const d = this.withFallback(l);
         this.pristine = !1, this._internals.setValidity({ customError: !0 }, d), this.invalid = !0, this.hint = d, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
-    t === "hint" && m(this, v, this.getAttribute("hint") ?? "");
+    t === "hint" && v(this, m, this.getAttribute("hint") ?? "");
   }
   _invalidChanged() {
     if (this.invalid) {
@@ -71,13 +62,13 @@ const b = class b extends V {
       const t = this._internals.validationMessage;
       this.hint = t !== "" ? this._internals.validationMessage : "", this.checkValidity();
     } else
-      !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = p(this, v) ?? "";
+      !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = p(this, m) ?? "";
   }
   _hintChanged() {
-    p(this, v) ?? m(this, v, this.hint);
+    p(this, m) ?? v(this, m, this.hint);
   }
   _valueChanged() {
-    p(this, u) ?? m(this, u, this.value), this._internals.setFormValue(this.value), this.validateInput();
+    p(this, u) ?? v(this, u, this.value), this._internals.setFormValue(this.value), this.validateInput();
   }
   /** @internal */
   validateInput() {
@@ -89,12 +80,12 @@ const b = class b extends V {
       this.invalid = !this.pristine && !n.valid;
       let l;
       for (l in n) {
-        const h = `data-${l}`;
-        if (n[l] && !this.hasAttribute(h) && this.debug && console.log(
-          `Add custom message on ${this.localName} using attribute: ${h.toUpperCase()}="Your custom message"`
+        const o = `data-${l}`;
+        if (n[l] && !this.hasAttribute(o) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${o.toUpperCase()}="Your custom message"`
         ), n[l]) {
           this.validationError = l;
-          const d = this.hasAttribute(h) ? this.getAttribute(h) : this.$input.validationMessage;
+          const d = this.hasAttribute(o) ? this.getAttribute(o) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
             this.withFallback(d)
@@ -108,7 +99,7 @@ const b = class b extends V {
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
-						<slot>${this.label}</slot> ${this.required ? C(p(this, y).term("required")) : f}
+						<slot>${this.label}</slot> ${this.required ? w(p(this, y).term("required")) : f}
 					</div>
 					<div id="input">
 						<textarea
@@ -117,15 +108,15 @@ const b = class b extends V {
 							?required=${this.required}
 							.value=${this.value}
 							@input=${this._handleInput}
-							aria-describedby=${o(this.hint?.trim() ? "hint" : f)}
-							aria-errormessage=${o(this.hint?.trim() ? "hint" : f)}
+							aria-describedby=${h(this.hint?.trim() ? "hint" : f)}
+							aria-errormessage=${h(this.hint?.trim() ? "hint" : f)}
 							aria-invalid=${!!this.invalid}
-							cols=${o(this.cols)}
-							maxlength=${o(this.maxLength)}
-							minlength=${o(this.minLength)}
-							name=${o(this.name)}
-							placeholder=${o(this.placeholder)}
-							rows=${o(this.rows)}
+							cols=${h(this.cols)}
+							maxlength=${h(this.maxLength)}
+							minlength=${h(this.minLength)}
+							name=${h(this.name)}
+							placeholder=${h(this.placeholder)}
+							rows=${h(this.rows)}
 						>
 						</textarea>
 					</div>
@@ -135,7 +126,7 @@ const b = class b extends V {
 						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${o(w(this.invalid, this.severity))}
+						severity=${h(C(this.invalid, this.severity))}
 					>
 						${this.customInvalid ?? this.hint}
 					</skf-hint>
@@ -144,7 +135,7 @@ const b = class b extends V {
 		`;
   }
 };
-y = new WeakMap(), u = new WeakMap(), v = new WeakMap(), b.styles = [I, A];
+y = new WeakMap(), u = new WeakMap(), m = new WeakMap(), b.styles = [I, O];
 let i = b;
 e([
   s({ type: Number })

package/dist/custom-elements.json

@@ -2305,6 +2305,36 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": " Fired when the user selects a date.",
+              "name": "skf-datepicker-selected-date-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": " Fired when the user selects a date range.",
+              "name": "skf-datepicker-selected-date-range-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": " Fired when the datepicker is opened.",
+              "name": "skf-datepicker-opened"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": " Fired when the datepicker is closed.",
+              "name": "skf-datepicker-closed"
+            }
+          ],
           "attributes": [
             {
               "name": "custom-invalid",
@@ -5934,6 +5964,15 @@
               "attribute": "removable"
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM.",
+              "name": "skf-tag-remove"
+            }
+          ],
           "attributes": [
             {
               "name": "size",

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -506,7 +506,14 @@ export type SkfDatepickerProps = {
   /**  */
   "focusTimeoutId"?: SkfDatepicker['focusTimeoutId'];
 
-
+  /**  Fired when the user selects a date. */
+  "onskf-datepicker-selected-date-changed"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  Fired when the user selects a date range. */
+  "onskf-datepicker-selected-date-range-changed"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  Fired when the datepicker is opened. */
+  "onskf-datepicker-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  Fired when the datepicker is closed. */
+  "onskf-datepicker-closed"?: (e: CustomEvent<CustomEvent>) => void;
 }
 
 
@@ -942,7 +949,8 @@ export type SkfTagProps = {
   /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
   "callbackOnRemove"?: SkfTag['callbackOnRemove'];
 
-
+  /** Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM. */
+  "onskf-tag-remove"?: (e: CustomEvent<CustomEvent>) => void;
 }
 
 
@@ -1596,6 +1604,15 @@ export type SkfTooltipProps = {
  * - `value`: The current value of the input field 
  * - `focusTimeoutId`: undefined (property only)
  * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-datepicker-selected-date-changed`:  Fired when the user selects a date.
+ * - `skf-datepicker-selected-date-range-changed`:  Fired when the user selects a date range.
+ * - `skf-datepicker-opened`:  Fired when the datepicker is opened.
+ * - `skf-datepicker-closed`:  Fired when the datepicker is closed.
+ * 
  * #### Methods
  * 
  * Methods that can be called to access component functionality.
@@ -2177,6 +2194,12 @@ export type SkfTooltipProps = {
  * - `clickCallback`: If defined, accepts a function that runs on click (property only)
  * - `callbackOnRemove`: If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. (property only)
  * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-tag-remove`: Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM.
+ * 
  * #### Slots
  * 
  * Areas where markup can be added to the component.

package/dist/types/vue/index.d.ts

@@ -11,7 +11,7 @@ import type { SkfButton, CustomEvent } from "../../components/button/button.comp
 import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox, Event } from "../../components/checkbox/checkbox.component.js";
 import type { SkfDatepickerCalendar } from "../../components/datepicker-calendar/datepicker-calendar.component.js";
-import type { SkfDatepicker } from "../../components/datepicker/datepicker.component.js";
+import type { SkfDatepicker, CustomEvent } from "../../components/datepicker/datepicker.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
 import type { SkfDialog, CustomEvent } from "../../components/dialog/dialog.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
@@ -34,7 +34,7 @@ import type {
 } from "../../components/segmented-button-item/segmented-button-item.component.js";
 import type { SkfSegmentedButton } from "../../components/segmented-button/segmented-button.component.js";
 import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
-import type { SkfTag } from "../../components/tag/tag.component.js";
+import type { SkfTag, CustomEvent } from "../../components/tag/tag.component.js";
 import type { SkfSelect, Event, CustomEvent } from "../../components/select/select.component.js";
 import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
 import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.component.js";
@@ -261,6 +261,14 @@ type SkfDatepickerProps = {
   value?: SkfDatepicker["value"];
   /**  */
   focusTimeoutId?: SkfDatepicker["focusTimeoutId"];
+  /**  Fired when the user selects a date. */
+  "onskf-datepicker-selected-date-changed"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  Fired when the user selects a date range. */
+  "onskf-datepicker-selected-date-range-changed"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  Fired when the datepicker is opened. */
+  "onskf-datepicker-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  Fired when the datepicker is closed. */
+  "onskf-datepicker-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfHeadingProps = {
@@ -609,6 +617,8 @@ type SkfTagProps = {
   clickCallback?: SkfTag["clickCallback"];
   /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
   callbackOnRemove?: SkfTag["callbackOnRemove"];
+  /** Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM. */
+  "onskf-tag-remove"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfSelectProps = {
@@ -1006,6 +1016,12 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-datepicker-selected-date-changed** -  Fired when the user selects a date.
+   * - **skf-datepicker-selected-date-range-changed** -  Fired when the user selects a date range.
+   * - **skf-datepicker-opened** -  Fired when the datepicker is opened.
+   * - **skf-datepicker-closed** -  Fired when the datepicker is closed.
+   *
    * ### **Methods:**
    *  - **clear()** - Clears the input field
    */
@@ -1260,6 +1276,9 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-tag-remove** - Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM.
+   *
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */

package/dist/vscode.html-custom-data.json

@@ -364,7 +364,7 @@
     },
     {
       "name": "skf-datepicker",
-      "description": "\n---\n\n\n### **Methods:**\n - **clear()** - Clears the input field",
+      "description": "\n---\n\n\n### **Events:**\n - **skf-datepicker-selected-date-changed** -  Fired when the user selects a date.\n- **skf-datepicker-selected-date-range-changed** -  Fired when the user selects a date range.\n- **skf-datepicker-opened** -  Fired when the datepicker is opened.\n- **skf-datepicker-closed** -  Fired when the datepicker is closed.\n\n### **Methods:**\n - **clear()** - Clears the input field",
       "attributes": [
         {
           "name": "custom-invalid",
@@ -1147,7 +1147,7 @@
     },
     {
       "name": "skf-tag",
-      "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+      "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **skf-tag-remove** - Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM.\n\n### **Slots:**\n - _default_ - The component's placeholder content",
       "attributes": [
         {
           "name": "size",

package/dist/web-types.json

@@ -817,7 +817,7 @@
         },
         {
           "name": "skf-datepicker",
-          "description": "\n---\n\n\n### **Methods:**\n - **clear()** - Clears the input field",
+          "description": "\n---\n\n\n### **Events:**\n - **skf-datepicker-selected-date-changed** -  Fired when the user selects a date.\n- **skf-datepicker-selected-date-range-changed** -  Fired when the user selects a date range.\n- **skf-datepicker-opened** -  Fired when the datepicker is opened.\n- **skf-datepicker-closed** -  Fired when the datepicker is closed.\n\n### **Methods:**\n - **clear()** - Clears the input field",
           "doc-url": "",
           "attributes": [
             {
@@ -908,7 +908,28 @@
               "value": { "type": "string | undefined" }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "skf-datepicker-selected-date-changed",
+              "type": "CustomEvent",
+              "description": " Fired when the user selects a date."
+            },
+            {
+              "name": "skf-datepicker-selected-date-range-changed",
+              "type": "CustomEvent",
+              "description": " Fired when the user selects a date range."
+            },
+            {
+              "name": "skf-datepicker-opened",
+              "type": "CustomEvent",
+              "description": " Fired when the datepicker is opened."
+            },
+            {
+              "name": "skf-datepicker-closed",
+              "type": "CustomEvent",
+              "description": " Fired when the datepicker is closed."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -988,7 +1009,28 @@
                 "type": "string | undefined"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "skf-datepicker-selected-date-changed",
+                "type": "CustomEvent",
+                "description": " Fired when the user selects a date."
+              },
+              {
+                "name": "skf-datepicker-selected-date-range-changed",
+                "type": "CustomEvent",
+                "description": " Fired when the user selects a date range."
+              },
+              {
+                "name": "skf-datepicker-opened",
+                "type": "CustomEvent",
+                "description": " Fired when the datepicker is opened."
+              },
+              {
+                "name": "skf-datepicker-closed",
+                "type": "CustomEvent",
+                "description": " Fired when the datepicker is closed."
+              }
+            ]
           }
         },
         {
@@ -2517,7 +2559,7 @@
         },
         {
           "name": "skf-tag",
-          "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+          "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **skf-tag-remove** - Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM.\n\n### **Slots:**\n - _default_ - The component's placeholder content",
           "doc-url": "",
           "attributes": [
             {
@@ -2554,7 +2596,13 @@
           "slots": [
             { "name": "", "description": "The component's placeholder content" }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "skf-tag-remove",
+              "type": "CustomEvent",
+              "description": "Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -2596,7 +2644,13 @@
                 "type": "boolean"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "skf-tag-remove",
+                "type": "CustomEvent",
+                "description": "Fired when the tag is removed. Convenient to use together with the `prevent-dom-updates` property to avoid bypassing internal state management/React Virtual DOM."
+              }
+            ]
           }
         },
         {

package/package.json

@@ -10,7 +10,7 @@
     "pnpm": ">=10"
   },
   "engineStrict": true,
-  "customElements": "./dist/custom-elements.json",
+  "customElements": "dist/custom-elements.json",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.20",
+  "version": "1.0.2-beta.22",
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@js-temporal/polyfill": "^0.5.1",
@@ -44,17 +44,17 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.5",
+    "@changesets/cli": "^2.29.6",
     "@chromatic-com/storybook": "^4.1.0",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@custom-elements-manifest/analyzer": "^0.10.5",
     "@eslint/js": "^9.33.0",
-    "@storybook/addon-a11y": "^9.1.1",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
-    "@storybook/web-components-vite": "^9.1.1",
-    "@types/node": "^24.2.1",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-links": "^9.1.2",
+    "@storybook/web-components-vite": "^9.1.2",
+    "@types/node": "^24.3.0",
     "@wc-toolkit/jsx-types": "^1.3.0",
     "@wc-toolkit/module-path-resolver": "^1.0.0",
     "@wc-toolkit/storybook-helpers": "^9.0.1",
@@ -66,13 +66,13 @@
     "eslint": "^9.33.0",
     "eslint-plugin-lit": "^2.1.1",
     "eslint-plugin-lit-a11y": "^5.1.1",
-    "eslint-plugin-storybook": "9.1.1",
+    "eslint-plugin-storybook": "9.1.2",
     "eslint-plugin-wc": "^3.0.1",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.5",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "3.6.2",
-    "storybook": "^9.1.1",
+    "storybook": "^9.1.2",
     "stylelint": "^16.23.1",
     "stylelint-config-standard": "^39.0.0",
     "stylelint-no-unsupported-browser-features": "^8.0.4",
@@ -80,8 +80,8 @@
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.0",
-    "vite": "^7.1.1",
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.3",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "scripts": {