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

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

@@ -13,9 +13,9 @@ import { type CSSResultGroup } from 'lit';
  * @attribute {boolean} [disabled=false] - If true, sets disabled state
  * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event {CustomEvent} change - Fires when the value of the input changes
- * @event {CustomEvent} invalid - Fires when the input is invalid
- * @event {CustomEvent} cleared - Fires when the input is cleared
+ * @event {Event} change - Fires when the value of the input changes
+ * @event {Event} invalid - Fires when the input is invalid
+ * @event {CustomEvent} skf-input-cleared - Fires when the input is cleared
  *
  * @slot - The Inputs label. Alternatively, you can use the `label` attribute.
  *

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

@@ -33,7 +33,7 @@ const g = class g extends E {
     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("cleared");
+      t.stopPropagation(), this.value = d(this, f) ?? "", this._internals.setFormValue(this.value), this.emit("skf-input-cleared");
     }, this._handlePressStart = (t) => {
       this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(t);
     }, this._handlePressEnd = () => {

package/dist/custom-elements.json

@@ -4135,14 +4135,14 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent"
+                "text": "Event"
               },
               "description": "Fires when the value of the input changes",
               "name": "change"
             },
             {
               "type": {
-                "text": "CustomEvent"
+                "text": "Event"
               },
               "description": "Fires when the input is invalid",
               "name": "invalid"
@@ -4152,7 +4152,7 @@
                 "text": "CustomEvent"
               },
               "description": "Fires when the input is cleared",
-              "name": "cleared"
+              "name": "skf-input-cleared"
             }
           ],
           "attributes": [

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

@@ -736,11 +736,11 @@ export type SkfInputProps = {
   "value"?: SkfInput['value'];
 
   /** Fires when the value of the input changes */
-  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
+  "onchange"?: (e: CustomEvent<Event>) => void;
   /** Fires when the input is invalid */
-  "oninvalid"?: (e: CustomEvent<CustomEvent>) => void;
+  "oninvalid"?: (e: CustomEvent<Event>) => void;
   /** Fires when the input is cleared */
-  "oncleared"?: (e: CustomEvent<CustomEvent>) => void;
+  "onskf-input-cleared"?: (e: CustomEvent<CustomEvent>) => void;
 }
 
 
@@ -1897,7 +1897,7 @@ export type SkfTooltipProps = {
  * 
  * - `change`: Fires when the value of the input changes
  * - `invalid`: Fires when the input is invalid
- * - `cleared`: Fires when the input is cleared
+ * - `skf-input-cleared`: Fires when the input is cleared
  * 
  * #### Slots
  * 

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

@@ -21,7 +21,7 @@ import type { SkfLink, CustomEvent } from "../../components/link/link.component.
 import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfNav } from "../../components/nav/nav.component.js";
 import type { SkfHeader } from "../../components/header/header.component.js";
-import type { SkfInput, CustomEvent } from "../../components/input/input.component.js";
+import type { SkfInput, Event, CustomEvent } from "../../components/input/input.component.js";
 import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
 import type { SkfMenu, CustomEvent } from "../../components/menu/menu.component.js";
 import type { SkfPagination, CustomEvent } from "../../components/pagination/pagination.component.js";
@@ -442,11 +442,11 @@ type SkfInputProps = {
   value?: SkfInput["value"];
 
   /** Fires when the value of the input changes */
-  onchange?: (e: CustomEvent<CustomEvent>) => void;
+  onchange?: (e: CustomEvent<Event>) => void;
   /** Fires when the input is invalid */
-  oninvalid?: (e: CustomEvent<CustomEvent>) => void;
+  oninvalid?: (e: CustomEvent<Event>) => void;
   /** Fires when the input is cleared */
-  oncleared?: (e: CustomEvent<CustomEvent>) => void;
+  "onskf-input-cleared"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfMenuItemProps = {
@@ -1136,7 +1136,7 @@ export type CustomElements = {
    * ### **Events:**
    *  - **change** - Fires when the value of the input changes
    * - **invalid** - Fires when the input is invalid
-   * - **cleared** - Fires when the input is cleared
+   * - **skf-input-cleared** - Fires when the input is cleared
    *
    * ### **Slots:**
    *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.

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

@@ -698,7 +698,7 @@
     },
     {
       "name": "skf-input",
-      "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n- **cleared** - Fires when the input is cleared\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
+      "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n- **skf-input-cleared** - Fires when the input is cleared\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
       "attributes": [
         {
           "name": "disabled",

package/dist/web-types.json

@@ -1559,7 +1559,7 @@
         },
         {
           "name": "skf-input",
-          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n- **cleared** - Fires when the input is cleared\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
+          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n- **skf-input-cleared** - Fires when the input is cleared\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
@@ -1717,16 +1717,16 @@
           "events": [
             {
               "name": "change",
-              "type": "CustomEvent",
+              "type": "Event",
               "description": "Fires when the value of the input changes"
             },
             {
               "name": "invalid",
-              "type": "CustomEvent",
+              "type": "Event",
               "description": "Fires when the input is invalid"
             },
             {
-              "name": "cleared",
+              "name": "skf-input-cleared",
               "type": "CustomEvent",
               "description": "Fires when the input is cleared"
             }
@@ -1857,16 +1857,16 @@
             "events": [
               {
                 "name": "change",
-                "type": "CustomEvent",
+                "type": "Event",
                 "description": "Fires when the value of the input changes"
               },
               {
                 "name": "invalid",
-                "type": "CustomEvent",
+                "type": "Event",
                 "description": "Fires when the input is invalid"
               },
               {
-                "name": "cleared",
+                "name": "skf-input-cleared",
                 "type": "CustomEvent",
                 "description": "Fires when the input is cleared"
               }

package/package.json

@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.19",
+  "version": "1.0.2-beta.20",
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@js-temporal/polyfill": "^0.5.1",