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

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

@@ -5964,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

@@ -949,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;
 }
 
 
@@ -2193,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

@@ -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";
@@ -617,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 = {
@@ -1274,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

@@ -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

@@ -2559,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": [
             {
@@ -2596,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": [
               {
@@ -2638,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.21",
+  "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": {