@skf-design-system/ui-components 1.0.2-beta.14 → 1.0.2-beta.16

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

@@ -21,6 +21,8 @@ export declare class SkfButton extends SkfElement {
     static formAssociated: boolean;
     static shadowRootOptions: {
         delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;

package/dist/components/checkbox/checkbox.component.js

@@ -11,8 +11,8 @@ import { componentStyles as k } from "../../styles/component.styles.js";
 import { LocalizeController as $ } from "../../utilities/localize.js";
 import { html as g, nothing as I } from "lit";
 import { property as r, state as V, query as C } from "lit/decorators.js";
-import { ifDefined as E } from "lit/directives/if-defined.js";
-import { styles as w } from "./checkbox.styles.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { styles as E } from "./checkbox.styles.js";
 var A = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (i, s, t, l) => {
   for (var h = l > 1 ? void 0 : l ? D(s, t) : s, d = i.length - 1, u; d >= 0; d--)
     (u = i[d]) && (h = (l ? u(s, t, h) : u(h)) || h);
@@ -23,13 +23,13 @@ const p = class p extends _ {
     super(...arguments);
     f(this, o);
     this._initiallyChecked = !1, y(this, o, new $(this)), this.debug = !1, this.checked = !1, this.customInvalid = !1, this.indeterminate = !1, this.lang = "en", this.showValid = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
-      t.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = !!this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
+      t.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
     }, this._renderIcon = (t) => g`
 		<skf-icon color="inverse" name=${t} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
 	`;
   }
   _handleCheckedChange() {
-    this.setFormValue(this.checked ? this.value : null), this._validateInput(), this.$input && (this.$input.checked = !!this.checked);
+    this.setFormValue(this.checked ? this.value : null), this._validateInput(), this.$input && (this.$input.checked = this.checked);
   }
   handleInvalidChange() {
     this._invalid ? (this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"));
@@ -49,7 +49,7 @@ const p = class p extends _ {
   }
   firstUpdated() {
     this.$input?.addEventListener("change", (t) => {
-      t.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
+      t.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emit("change");
     }), this.addEventListener("invalid", (t) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this._initiallyChecked = this.checked, this.addEventListener("reset", this._resetValue), this._validateInput();
@@ -77,7 +77,7 @@ const p = class p extends _ {
 					?required=${this.required}
 					.indeterminate=${this.indeterminate}
 					aria-invalid=${!!this._invalid}
-					name=${E(this.name)}
+					name=${w(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
@@ -90,7 +90,7 @@ const p = class p extends _ {
 		`;
   }
 };
-o = new WeakMap(), p.styles = [k, w];
+o = new WeakMap(), p.styles = [k, E];
 let e = p;
 a([
   r({ type: Boolean })

package/dist/components/checkbox/checkbox.styles.js

@@ -12,7 +12,7 @@ const i = [
 				align-items: center;
 				color: var(--_skf-checkbox-color, var(--skf-text-color-primary));
 				display: grid;
-				grid-gap: var(--skf-spacing-50);
+				gap: var(--skf-spacing-50);
 				grid-template: 'input label' / auto minmax(0, 1fr);
 
 				:host([disabled]) & {

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

@@ -1,8 +1,8 @@
-var S = (o) => {
+var P = (o) => {
   throw TypeError(o);
 };
-var P = (o, l, e) => l.has(o) || S("Cannot " + e);
-var D = (o, l, e) => (P(o, l, "read from private field"), e ? e.call(o) : l.get(o)), E = (o, l, e) => l.has(o) ? S("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(o) : l.set(o, e), C = (o, l, e, t) => (P(o, l, "write to private field"), t ? t.call(o, e) : l.set(o, e), e);
+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);
 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";
@@ -73,7 +73,7 @@ const w = class w extends R {
     }, this.clearInput = () => {
       this.value = "", this.$datepickerPopup.clearSelection();
     }, this._handleInput = (e) => {
-      const t = e.target, i = String(t.value).replace(/[^0-9-]/g, "");
+      const t = e.target, i = t.value.replace(/[^0-9-]/g, "");
       if (t.value = i, t.setCustomValidity(this.customError ?? ""), !!m(t.value).ISO()) {
         if (this.focusTimeoutId && clearTimeout(this.focusTimeoutId), this.$datepickerPopup.date = t.value, this.range) {
           this.$datepickerPopup.selectedDateRange = {
@@ -205,9 +205,9 @@ const w = class w extends R {
       this.invalid = !this._pristine && !t.valid;
       let a;
       for (a in t) {
-        const n = `data-${a.toString()}`;
+        const n = `data-${a}`;
         if (t[a]) {
-          this.validationError = a.toString();
+          this.validationError = a;
           const c = this.hasAttribute(n) ? this.getAttribute(n) : i[a];
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },

package/dist/components/icon/icon.styles.js

@@ -4,6 +4,8 @@ const r = o`
 		@layer base {
 			:host {
 				display: inline-flex;
+				pointer-events: none;
+				user-select: none;
 			}
 
 			#root {
@@ -13,8 +15,6 @@ const r = o`
 				block-size: var(--_skf-icon-size);
 				flex-shrink: 0; /* Prevents shrink when flex-child */
 				inline-size: var(--_skf-icon-size);
-				pointer-events: none;
-				user-select: none;
 
 				:host(:not([data-color='custom'])) & {
 					color: var(--_skf-icon-color);

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

@@ -2,9 +2,9 @@ var f = (a) => {
   throw TypeError(a);
 };
 var b = (a, n, t) => n.has(a) || f("Cannot " + t);
-var c = (a, n, t) => (b(a, n, "read from private field"), t ? t.call(a) : n.get(a)), _ = (a, n, t) => n.has(a) ? f("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, t), g = (a, n, t, r) => (b(a, n, "write to private field"), r ? r.call(a, t) : n.set(a, t), t);
+var c = (a, n, t) => (b(a, n, "read from private field"), t ? t.call(a) : n.get(a)), _ = (a, n, t) => n.has(a) ? f("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, t), $ = (a, n, t, r) => (b(a, n, "write to private field"), r ? r.call(a, t) : n.set(a, t), t);
 import "../icon/icon.js";
-import { FormBase as $ } from "../../internal/components/formBase.js";
+import { FormBase as g } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
 import { hintSeverity as w } from "../../internal/helpers/hintSeverity.js";
 import { watch as E } from "../../internal/helpers/watch.js";
@@ -22,14 +22,14 @@ var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (a, n, t
     (u = a[h]) && (o = (r ? u(n, t, o) : u(o)) || o);
   return r && o && L(n, t, o), o;
 }, d;
-const y = class y extends $ {
+const y = class y extends g {
   constructor() {
     super(...arguments);
     _(this, d);
-    g(this, d, new C(this)), this._value = "", this.autofocus = !1, this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.invalid = !1, this._buttonDown = !1, this._numberController = new A(this), this._passwordController = new V(this), this._handleInput = () => {
+    $(this, d, new C(this)), this._value = "", this.autofocus = !1, this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.invalid = !1, this._buttonDown = !1, this._numberController = new A(this), this._passwordController = new V(this), this._handleInput = () => {
       this._value = this.$input?.value ?? "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (t) => {
-      t.stopPropagation(), this.value = this.getAttribute("value")?.trim() ?? "", this._value = this.value, this._internals.setFormValue(this.value), this.$input?.focus(), this.emitEvent("cleared");
+      t.stopPropagation(), this.value = this.getAttribute("value")?.trim() ?? "", this._value = this.value, this._internals.setFormValue(this.value), this.$input?.focus(), this.emit("cleared");
     }, this._handlePressStart = (t) => {
       this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(t);
     }, this._handlePressEnd = () => {
@@ -91,7 +91,7 @@ const y = class y extends $ {
   }
   firstUpdated() {
     this.$input?.addEventListener("change", () => {
-      this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(this.$input?.value ?? ""), this.emitEvent("change"), this.validateInput();
+      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();
     }), this.value = this.getAttribute("value")?.trim() ?? "", this.autofocus && this.$input?.focus(), this.addEventListener("reset", this._resetValue), this.validateInput();
@@ -135,11 +135,11 @@ const y = class y extends $ {
       this.invalid = !this._pristine && !r.valid;
       let o;
       for (o in r) {
-        const h = `data-${o.toString()}`;
+        const h = `data-${o}`;
         if (r[o] && !this.hasAttribute(h) && this.debug && console.log(
           `Add custom message on ${this.localName} using attribute: ${h.toUpperCase()}="Your custom message"`
         ), r[o]) {
-          this.validationError = o.toString();
+          this.validationError = o;
           const u = this.hasAttribute(h) ? this.getAttribute(h) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },

package/dist/components/radio/radio.component.js

@@ -24,7 +24,7 @@ const u = class u extends _ {
     super(...arguments);
     f(this, d);
     y(this, d, new C(this)), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.customInvalid = !1, this.lang = "en", this.size = "md", this.showValid = !1, this.value = "", this._invalid = !1, this._resetValue = (t) => {
-      t.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
+      t.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = this._initialChecked), this.setFormValue(this.checked ? this.value : "");
     };
   }
   connectedCallback() {
@@ -32,7 +32,7 @@ const u = class u extends _ {
   }
   firstUpdated() {
     this.$input?.addEventListener("change", (t) => {
-      t.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
+      t.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emit("change");
     }), this.addEventListener("invalid", (t) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);

package/dist/components/radio/radio.styles.js

@@ -12,7 +12,7 @@ const e = [
 				align-items: center;
 				color: var(--_skf-radio-color, var(--skf-text-color-primary));
 				display: flex;
-				grid-gap: var(--skf-spacing-50);
+				gap: var(--skf-spacing-50);
 
 				:host([disabled]) & {
 					--_skf-radio-color: var(--skf-interactive-text-color-disabled);

package/dist/components/segmented-button/segmented-button-item.component.d.ts

@@ -17,6 +17,8 @@ export declare class SkfSegmentedButtonItem extends SkfElement {
     static styles: CSSResultGroup;
     static shadowRootOptions: {
         delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;

package/dist/components/select/select-option.component.d.ts

@@ -25,6 +25,8 @@ export declare class SkfSelectOption extends SkfElement {
     static styles: CSSResultGroup;
     static shadowRootOptions: {
         delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;

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

@@ -30,7 +30,7 @@ const c = class c extends C {
     this.textContent = t.trim();
   }
   get text() {
-    return this.textContent?.trim() ?? "";
+    return this.textContent.trim();
   }
   set value(t) {
     this._value = t.trim();
@@ -69,7 +69,7 @@ const c = class c extends C {
   /** @internal */
   get _slotContainsOnlyText() {
     return this._assignedNodes ? [...this._assignedNodes].every(
-      (i) => i.nodeType === Node.TEXT_NODE && i.textContent?.trim() !== ""
+      (i) => i.nodeType === Node.TEXT_NODE && i.textContent.trim() !== ""
     ) : "";
   }
   render() {

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

@@ -146,7 +146,7 @@ export declare class SkfSelect extends FormBase {
     /** @internal - on slot update, if value is set, select the corresponding option */
     _ifValueIsSetSelectOption: () => void;
     /** @internal - Computes the visible value of the select component - if multiple options are selected, shows a visually dimmed summary (meta info) */
-    _computeVisibleValue: () => string | null;
+    _computeVisibleValue: () => string;
     /** @internal */
     private _validateInput;
     render(): import("lit").TemplateResult<1>;

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

@@ -3,41 +3,41 @@ var _ = (l) => {
 };
 var v = (l, r, t) => r.has(l) || _("Cannot " + t);
 var u = (l, r, t) => (v(l, r, "read from private field"), t ? t.call(l) : r.get(l)), g = (l, r, t) => r.has(l) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(l) : r.set(l, t), b = (l, r, t, e) => (v(l, r, "write to private field"), e ? e.call(l, t) : r.set(l, t), t);
-import { SkfSelectOptionGroup as w } from "./select-option-group.component.js";
+import { SkfSelectOptionGroup as S } from "./select-option-group.component.js";
 import "../tag/tag.js";
 import { computePosition as x, flip as C, shift as V, offset as $ } from "@floating-ui/dom";
 import { FormBase as L } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { PopoverController as E } from "../../internal/controllers/popover.controller.js";
-import { findMatchingTags as k } from "../../internal/helpers/findMatchingTags.js";
+import { PopoverController as k } from "../../internal/controllers/popover.controller.js";
+import { findMatchingTags as E } from "../../internal/helpers/findMatchingTags.js";
 import { hintSeverity as A } from "../../internal/helpers/hintSeverity.js";
 import { raiseError as I } from "../../internal/helpers/raiseError.js";
-import { watch as S } from "../../internal/helpers/watch.js";
+import { watch as w } from "../../internal/helpers/watch.js";
 import { Asterisk as D } from "../../internal/templates/asterisk.js";
 import { componentStyles as P } from "../../styles/component.styles.js";
 import { LocalizeController as F } from "../../utilities/localize.js";
 import { nothing as y, html as p } from "lit";
-import { property as n, state as c, query as m, queryAssignedElements as T } from "lit/decorators.js";
+import { property as a, state as c, query as m, queryAssignedElements as T } from "lit/decorators.js";
 import { classMap as z } from "lit/directives/class-map.js";
 import { ifDefined as O } from "lit/directives/if-defined.js";
 import { SkfSelectOption as U } from "./select-option.component.js";
 import { GlobalClickController as M, KeyboardNavigationController as B, DeveloperFeedbackController as N } from "./select.controllers.js";
 import { styles as H } from "./select.styles.js";
 var q = Object.defineProperty, R = Object.getOwnPropertyDescriptor, s = (l, r, t, e) => {
-  for (var o = e > 1 ? void 0 : e ? R(r, t) : r, a = l.length - 1, h; a >= 0; a--)
-    (h = l[a]) && (o = (e ? h(r, t, o) : h(o)) || o);
+  for (var o = e > 1 ? void 0 : e ? R(r, t) : r, n = l.length - 1, h; n >= 0; n--)
+    (h = l[n]) && (o = (e ? h(r, t, o) : h(o)) || o);
   return e && o && q(r, t, o), o;
 }, d;
 const f = class f extends L {
   constructor() {
     super();
     g(this, d);
-    b(this, d, new F(this)), this._componentIsConnected = !1, this._defaultButtonLabel = "Select an option", this.selectDelay = 200, this._optionsList = [], this.buttonLabel = this._defaultButtonLabel, this.hideLabel = !1, this.hideTags = !1, 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 B(this), this.developerFeedbackController = new N(this), this.popoverController = new E(this), this._handleOptionSelected = (t) => {
+    b(this, d, new F(this)), this._componentIsConnected = !1, this._defaultButtonLabel = "Select an option", this.selectDelay = 200, this._optionsList = [], this.buttonLabel = this._defaultButtonLabel, this.hideLabel = !1, this.hideTags = !1, 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 B(this), this.developerFeedbackController = new N(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.emitEvent("reset"), this._resetSelectedOptions();
+      this.emit("reset"), this._resetSelectedOptions();
     }, this._updateWidth = () => {
       setTimeout(() => {
         this.$popover.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
@@ -69,7 +69,7 @@ const f = class f extends L {
         default:
           throw new Error("Something went wrong");
       }
-      this._componentIsConnected && this.emitEvent("change"), this._validateInput(), this.$selectedValue && (this.$selectedValue.animate([{ opacity: 0.5 }, { opacity: 1 }], this.selectDelay).onfinish = () => {
+      this._componentIsConnected && this.emit("change"), this._validateInput(), this.$selectedValue && (this.$selectedValue.animate([{ opacity: 0.5 }, { opacity: 1 }], this.selectDelay).onfinish = () => {
         this.multiple || (this._expanded = !1), t("done");
       });
     }), this._resetSelectedOptions = (t) => {
@@ -78,11 +78,11 @@ const f = class f extends L {
         (e || o !== t) && o.removeAttribute("selected");
       }), this._optionsList = [];
     }, this._handleSlotChange = () => {
-      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._ifValueIsSetSelectOption(), this._validateInput(), this._componentIsConnected = !0, this.emitEvent("skf-select-connected");
+      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._ifValueIsSetSelectOption(), this._validateInput(), this._componentIsConnected = !0, this.emit("skf-select-connected");
     }, this._ifValueIsSetSelectOption = () => {
       if (this.value)
         if (this.multiple) {
-          const t = String(this.value).split(",").map((e) => e.toLowerCase().trim());
+          const t = this.value.split(",").map((e) => e.toLowerCase().trim());
           this._optionsList.forEach((e) => {
             t.includes(e.value.toLowerCase().trim()) ? (e.setSelectedDiscrete = !0, this.selectedOptions = [...this.selectedOptions, e]) : (e.setSelectedDiscrete = !1, this._selectedOptions = this._selectedOptions.filter(
               (o) => o.value.toLowerCase().trim() !== e.value.toLowerCase().trim()
@@ -110,15 +110,15 @@ const f = class f extends L {
     );
   }
   get selectedOptionsText() {
-    return this._selectedOptions.map((t) => t.textContent ?? "");
+    return this._selectedOptions.map((t) => t.textContent);
   }
   set value(t) {
     let e = [];
-    this._componentIsConnected && (this.multiple ? e = String(t).split(",").map((a) => a.toLowerCase().trim()) : e = [String(t).toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
-      (a) => e.includes(a.value.toLowerCase().trim())
-    ), this._optionsList.forEach((a) => {
-      a.selected && (a.setSelectedDiscrete = !1);
-    }), this._selectedOptions.forEach((a) => a.setSelectedDiscrete = !0)), this._setValue();
+    this._componentIsConnected && (this.multiple ? e = t.split(",").map((n) => n.toLowerCase().trim()) : e = [t.toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
+      (n) => e.includes(n.value.toLowerCase().trim())
+    ), this._optionsList.forEach((n) => {
+      n.selected && (n.setSelectedDiscrete = !1);
+    }), this._selectedOptions.forEach((n) => n.setSelectedDiscrete = !0)), this._setValue();
   }
   get value() {
     return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
@@ -143,7 +143,7 @@ const f = class f extends L {
       if (this._invalid) {
         this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid");
         const e = this._internals.validationMessage;
-        this.hint = e !== "" ? this._internals.validationMessage : "", this.checkValidity(), this.emitEvent("invalid");
+        this.hint = e !== "" ? this._internals.validationMessage : "", this.checkValidity(), this.emit("invalid");
       } else
         this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
@@ -152,7 +152,7 @@ const f = class f extends L {
   }
   _handleSizeUpdate() {
     this._slottedItems.forEach((t) => {
-      (t instanceof U || t instanceof w) && (t.small = this.size === "sm");
+      (t instanceof U || t instanceof S) && (t.small = this.size === "sm");
     });
   }
   _handleExpandedChange() {
@@ -198,7 +198,7 @@ const f = class f extends L {
   /** @internal */
   /** Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = k(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), I({
+    this._optionsList = E(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), I({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -258,9 +258,9 @@ const f = class f extends L {
 									${this.selectedOptions.map(
       (t) => p`
 											<skf-tag
-												style="${`view-transition-name: tag-${String(t.textContent).replace(/[^a-zA-Z]/g, "").toLowerCase()}`}"
+												style="${`view-transition-name: tag-${t.textContent.replace(/[^a-zA-Z]/g, "").toLowerCase()}`}"
 												removable
-												.onRemove=${(e) => (e.stopPropagation(), e.preventDefault(), document.startViewTransition || t.removeAttribute("selected"), document.startViewTransition(() => {
+												.callbackOnRemove=${(e) => (e.stopPropagation(), e.preventDefault(), document.startViewTransition || t.removeAttribute("selected"), document.startViewTransition(() => {
         t.removeAttribute("selected");
       }), !1)}
 											>
@@ -288,58 +288,58 @@ const f = class f extends L {
 d = new WeakMap(), f.styles = [P, H];
 let i = f;
 s([
-  n({ type: String, reflect: !0, attribute: "button-label" })
+  a({ type: String, reflect: !0, attribute: "button-label" })
 ], i.prototype, "buttonLabel", 2);
 s([
-  n({ type: String, attribute: "custom-invalid" })
+  a({ type: String, attribute: "custom-invalid" })
 ], i.prototype, "customInvalid", 2);
 s([
-  n({ type: Boolean, attribute: "hide-label" })
+  a({ type: Boolean, attribute: "hide-label" })
 ], i.prototype, "hideLabel", 2);
 s([
-  n({ type: Boolean, reflect: !0, attribute: "hide-tags" })
+  a({ type: Boolean, reflect: !0, attribute: "hide-tags" })
 ], i.prototype, "hideTags", 2);
 s([
-  n({ type: String })
+  a({ type: String })
 ], i.prototype, "hint", 2);
 s([
-  n({ type: Array, attribute: !1 })
+  a({ type: Array, attribute: !1 })
 ], i.prototype, "selectedValues", 1);
 s([
-  n({ type: Array, attribute: !1 })
+  a({ type: Array, attribute: !1 })
 ], i.prototype, "selectedOptionsText", 1);
 s([
-  n({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], i.prototype, "label", 2);
 s([
-  n({ type: String })
+  a({ type: String })
 ], i.prototype, "lang", 2);
 s([
-  n({ type: Number })
+  a({ type: Number })
 ], i.prototype, "max", 2);
 s([
-  n({ type: Number, attribute: "max-visible-items" })
+  a({ type: Number, attribute: "max-visible-items" })
 ], i.prototype, "maxVisibleItems", 2);
 s([
-  n({ type: Number })
+  a({ type: Number })
 ], i.prototype, "min", 2);
 s([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], i.prototype, "multiple", 2);
 s([
-  n({ type: String })
+  a({ type: String })
 ], i.prototype, "name", 2);
 s([
-  n()
+  a()
 ], i.prototype, "severity", 2);
 s([
-  n({ type: Boolean, attribute: "show-valid" })
+  a({ type: Boolean, attribute: "show-valid" })
 ], i.prototype, "showValid", 2);
 s([
-  n({ reflect: !0 })
+  a({ reflect: !0 })
 ], i.prototype, "size", 2);
 s([
-  n({ type: String, attribute: !1 })
+  a({ type: String, attribute: !1 })
 ], i.prototype, "value", 1);
 s([
   c()
@@ -366,10 +366,10 @@ s([
   T()
 ], i.prototype, "_slottedItems", 2);
 s([
-  S("size", { waitUntilFirstUpdate: !0 })
+  w("size", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "_handleSizeUpdate", 1);
 s([
-  S("_expanded", { afterUpdate: !0 })
+  w("_expanded", { afterUpdate: !0 })
 ], i.prototype, "_handleExpandedChange", 1);
 export {
   i as SkfSelect

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

@@ -22,11 +22,11 @@ const o = class o extends _ {
     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) => {
-      e.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emitEvent("change");
+      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();
     }, this._resetValue = (e) => {
-      e.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : null);
+      e.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = this._initialChecked), this.setFormValue(this.checked ? this.value : null);
     };
   }
   connectedCallback() {

package/dist/components/switch/switch.styles.js

@@ -13,7 +13,7 @@ const o = [
 				align-items: center;
 				color: var(--_skf-switch-color, var(--skf-text-color-primary));
 				display: flex;
-				grid-gap: var(--skf-spacing-50);
+				gap: var(--skf-spacing-50);
 
 				&:has(:disabled) {
 					--_skf-switch-color: var(--skf-interactive-text-color-disabled);

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

@@ -19,9 +19,11 @@ export declare class SkfTag extends SkfElement {
     /** @internal */
     private _clickCallback?;
     /** @internal */
-    private _preRemoveCallback?;
+    private _callbackOnRemove?;
     /** Specifies Tag size */
     size: Size;
+    /** If defined, prevents DOM updates. I.e in React, Preact handle self removal externally in virtual DOM. */
+    preventDomUpdates: boolean;
     /** If defined, displays leading/provided icon */
     icon?: Icon;
     /** If defined, gives the supplied appearance */
@@ -32,8 +34,8 @@ export declare class SkfTag extends SkfElement {
     set clickCallback(clickCallbackFn: ((event: Event) => void) | undefined);
     get clickCallback(): ((event: Event) => void) | undefined;
     /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
-    set preRemoveCallback(preRemoveCallbackFn: ((event: Event) => void) | undefined);
-    get preRemoveCallback(): ((event: Event) => void) | undefined;
+    set callbackOnRemove(callbackOnRemoveFn: ((event: Event) => void) | undefined);
+    get callbackOnRemove(): ((event: Event) => void) | undefined;
     /** If true, adds trailing button to remove tag */
     removable: boolean;
     /** @internal */