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

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

@@ -15,6 +15,7 @@ import { type CSSResultGroup } from 'lit';
  *
  * @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
  *
  * @slot - The Inputs label. Alternatively, you can use the `label` attribute.
  *

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

@@ -1,35 +1,35 @@
-var y = (a) => {
+var f = (a) => {
   throw TypeError(a);
 };
-var b = (a, o, t) => o.has(a) || y("Cannot " + t);
-var c = (a, o, t) => (b(a, o, "read from private field"), t ? t.call(a) : o.get(a)), _ = (a, o, t) => o.has(a) ? y("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, t), $ = (a, o, t, r) => (b(a, o, "write to private field"), r ? r.call(a, t) : o.set(a, t), t);
+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);
 import "../icon/icon.js";
-import { FormBase as g } from "../../internal/components/formBase.js";
+import { FormBase as $ } 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";
-import { Asterisk as P } from "../../internal/templates/asterisk.js";
-import { componentStyles as C } from "../../styles/component.styles.js";
-import { LocalizeController as k } from "../../utilities/localize.js";
+import { Asterisk as S } from "../../internal/templates/asterisk.js";
+import { componentStyles as P } from "../../styles/component.styles.js";
+import { LocalizeController as C } from "../../utilities/localize.js";
 import { html as p, nothing as m } from "lit";
-import { state as v, property as s, query as B, queryAssignedNodes as S } from "lit/decorators.js";
+import { state as v, property as s, query as k, queryAssignedNodes as B } from "lit/decorators.js";
 import { ifDefined as l } from "lit/directives/if-defined.js";
 import { live as x } from "lit/directives/live.js";
 import { InputNumberController as A, InputPasswordController as V } from "./input.controllers.js";
 import I from "./input.styles.js";
-var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (a, o, t, r) => {
-  for (var n = r > 1 ? void 0 : r ? D(o, t) : o, h = a.length - 1, u; h >= 0; h--)
-    (u = a[h]) && (n = (r ? u(o, t, n) : u(n)) || n);
-  return r && n && L(o, t, n), n;
+var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (a, n, t, r) => {
+  for (var o = r > 1 ? void 0 : r ? D(n, t) : n, h = a.length - 1, u; h >= 0; h--)
+    (u = a[h]) && (o = (r ? u(n, t, o) : u(o)) || o);
+  return r && o && L(n, t, o), o;
 }, d;
-const f = class f extends g {
+const y = class y extends $ {
   constructor() {
     super(...arguments);
     _(this, d);
-    $(this, d, new k(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 = () => {
+    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._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();
+      t.stopPropagation(), this.value = this.getAttribute("value")?.trim() ?? "", this._value = this.value, this._internals.setFormValue(this.value), this.$input?.focus(), this.emitEvent("cleared");
     }, this._handlePressStart = (t) => {
       this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(t);
     }, this._handlePressEnd = () => {
@@ -108,10 +108,10 @@ const f = class f extends g {
   valueChanged() {
     this._internals.setFormValue(this.value), this.validateInput();
   }
-  attributeChangedCallback(t, r, n) {
-    if (super.attributeChangedCallback(t, r, n), t === "value" && this._internals.setFormValue(n), t === "custom-invalid")
-      if (typeof n == "string") {
-        const u = this.withFallback(n);
+  attributeChangedCallback(t, r, o) {
+    if (super.attributeChangedCallback(t, r, o), t === "value" && this._internals.setFormValue(o), t === "custom-invalid")
+      if (typeof o == "string") {
+        const u = this.withFallback(o);
         this._pristine = !1, this._internals.setValidity({ customError: !0 }, u), this.invalid = !0, this.hint = u, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
@@ -133,13 +133,13 @@ const f = class f extends g {
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
       this.invalid = !this._pristine && !r.valid;
-      let n;
-      for (n in r) {
-        const h = `data-${n.toString()}`;
-        if (r[n] && !this.hasAttribute(h) && this.debug && console.log(
+      let o;
+      for (o in r) {
+        const h = `data-${o.toString()}`;
+        if (r[o] && !this.hasAttribute(h) && this.debug && console.log(
           `Add custom message on ${this.localName} using attribute: ${h.toUpperCase()}="Your custom message"`
-        ), r[n]) {
-          this.validationError = n.toString();
+        ), r[o]) {
+          this.validationError = o.toString();
           const u = this.hasAttribute(h) ? this.getAttribute(h) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
@@ -156,7 +156,7 @@ const f = class f extends g {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? P(c(this, d).term("required")) : m}
+						${this.required ? S(c(this, d).term("required")) : m}
 					</div>
 					<div id="input">
 						${this.type === "search" ? p`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : m}
@@ -212,8 +212,8 @@ const f = class f extends g {
 		`;
   }
 };
-d = new WeakMap(), f.styles = [C, I];
-let i = f;
+d = new WeakMap(), y.styles = [P, I];
+let i = y;
 e([
   v()
 ], i.prototype, "_value", 2);
@@ -233,64 +233,64 @@ e([
   s({ type: Boolean, attribute: "hide-label" })
 ], i.prototype, "hideLabel", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "hint", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "inputmode", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "label", 2);
 e([
   s({ type: String })
 ], i.prototype, "lang", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "leading", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "max", 2);
 e([
   s({ type: Number, attribute: "maxlength" })
 ], i.prototype, "maxLength", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "min", 2);
 e([
   s({ type: Number, attribute: "minlength" })
 ], i.prototype, "minLength", 2);
 e([
-  s({ reflect: !0 })
+  s({ type: String, reflect: !0 })
 ], i.prototype, "name", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "pattern", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "placeholder", 2);
 e([
   s({ type: Boolean })
 ], i.prototype, "readonly", 2);
 e([
-  s({ reflect: !0 })
+  s({ type: String, reflect: !0 })
 ], i.prototype, "severity", 2);
 e([
   s({ type: Boolean, attribute: "show-valid" })
 ], i.prototype, "showValid", 2);
 e([
-  s({ reflect: !0 })
+  s({ type: String, reflect: !0 })
 ], i.prototype, "size", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "trailing", 2);
 e([
-  s()
+  s({ type: String })
 ], i.prototype, "type", 2);
 e([
-  s({ attribute: "validate-on" })
+  s({ type: String, attribute: "validate-on" })
 ], i.prototype, "validateOn", 2);
 e([
-  s({})
+  s({ type: String })
 ], i.prototype, "value", 1);
 e([
   v()
@@ -299,10 +299,10 @@ e([
   v()
 ], i.prototype, "_buttonDown", 2);
 e([
-  B("input")
+  k("input")
 ], i.prototype, "$input", 2);
 e([
-  S({ flatten: !0 })
+  B({ flatten: !0 })
 ], i.prototype, "_defaultSlot", 2);
 e([
   E("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })

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

@@ -17,9 +17,9 @@ export declare class SkfTag extends SkfElement {
     #private;
     static styles: CSSResultGroup;
     /** @internal */
-    private _onClick?;
+    private _clickCallback?;
     /** @internal */
-    private _onRemove?;
+    private _preRemoveCallback?;
     /** Specifies Tag size */
     size: Size;
     /** If defined, displays leading/provided icon */
@@ -29,11 +29,11 @@ export declare class SkfTag extends SkfElement {
     /** Sets the internal language of the component */
     lang: Language;
     /** If defined, accepts a function that runs on click */
-    set onClick(onClickFn: ((event: Event) => void) | undefined);
-    get onClick(): ((event: Event) => void) | undefined;
+    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 onRemove(onRemoveFn: ((event: Event) => void) | undefined);
-    get onRemove(): ((event: Event) => void) | undefined;
+    set preRemoveCallback(preRemoveCallbackFn: ((event: Event) => void) | undefined);
+    get preRemoveCallback(): ((event: Event) => void) | undefined;
     /** If true, adds trailing button to remove tag */
     removable: boolean;
     /** @internal */

package/dist/components/tag/tag.component.js

@@ -1,53 +1,53 @@
-var k = (e) => {
-  throw TypeError(e);
+var v = (t) => {
+  throw TypeError(t);
 };
-var C = (e, o, t) => o.has(e) || k("Cannot " + t);
-var p = (e, o, t) => (C(e, o, "read from private field"), t ? t.call(e) : o.get(e)), m = (e, o, t) => o.has(e) ? k("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), d = (e, o, t, s) => (C(e, o, "write to private field"), s ? s.call(e, t) : o.set(e, t), t);
+var u = (t, o, e) => o.has(t) || v("Cannot " + e);
+var h = (t, o, e) => (u(t, o, "read from private field"), e ? e.call(t) : o.get(t)), m = (t, o, e) => o.has(t) ? v("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, e), k = (t, o, e, s) => (u(t, o, "write to private field"), s ? s.call(t, e) : o.set(t, e), e);
 import "../icon/icon.js";
 import { SkfElement as g } from "../../internal/components/skf-element.js";
 import { stateMap as w } from "../../internal/helpers/stateMap.js";
 import { watch as $ } from "../../internal/helpers/watch.js";
 import { componentStyles as R } from "../../styles/component.styles.js";
 import { LocalizeController as z } from "../../utilities/localize.js";
-import { nothing as b, html as u } from "lit";
-import { property as l, query as D } from "lit/decorators.js";
+import { nothing as y, html as C } from "lit";
+import { property as a, query as D } from "lit/decorators.js";
 import { ifDefined as E } from "lit/directives/if-defined.js";
 import { styles as P } from "./tag.styles.js";
-var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (e, o, t, s) => {
-  for (var i = s > 1 ? void 0 : s ? B(o, t) : o, f = e.length - 1, v; f >= 0; f--)
-    (v = e[f]) && (i = (s ? v(o, t, i) : v(i)) || i);
-  return s && i && S(o, t, i), i;
+var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, l = (t, o, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? B(o, e) : o, b = t.length - 1, d; b >= 0; b--)
+    (d = t[b]) && (i = (s ? d(o, e, i) : d(i)) || i);
+  return s && i && S(o, e, i), i;
 };
 const _ = {
   size: ["sm", "md"],
   color: ["error", "info", "success", "warning"]
 };
-var a, c, h;
-const y = class y extends g {
+var n, c, p;
+const f = class f extends g {
   constructor() {
     super(...arguments);
-    m(this, a);
+    m(this, n);
     m(this, c);
-    m(this, h);
-    d(this, a, new z(this)), d(this, c, this.attachInternals()), d(this, h, p(this, c).states), this.size = "md", this.lang = "en", this.removable = !1, this._handleKeyDown = (t) => {
-      (t.key === "Enter" || t.key === " ") && this.$removeButton.click();
-    }, this._handleRemove = (t) => {
-      this._onRemove && this._onRemove(t);
-    }, this._handleClick = (t) => {
-      t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : this.onClick?.(t);
+    m(this, p);
+    k(this, n, new z(this)), k(this, c, this.attachInternals()), k(this, p, h(this, c).states), this.size = "md", this.lang = "en", this.removable = !1, this._handleKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && this.$removeButton.click();
+    }, this._handleRemove = (e) => {
+      this._preRemoveCallback && this._preRemoveCallback(e);
+    }, this._handleClick = (e) => {
+      e.stopPropagation(), e.composedPath()[0].localName === "button" ? this.remove() : this.clickCallback?.(e);
     };
   }
-  set onClick(t) {
-    t && (this._onClick = t);
+  set clickCallback(e) {
+    e && (this._clickCallback = e);
   }
-  get onClick() {
-    return this._onClick;
+  get clickCallback() {
+    return this._clickCallback;
   }
-  set onRemove(t) {
-    t && (this._onRemove = t);
+  set preRemoveCallback(e) {
+    e && (this._preRemoveCallback = e);
   }
-  get onRemove() {
-    return this._onRemove;
+  get preRemoveCallback() {
+    return this._preRemoveCallback;
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("click", this._handleClick);
@@ -55,59 +55,59 @@ const y = class y extends g {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
   }
-  attributeChangedCallback(t, s, i) {
-    super.attributeChangedCallback(t, s, i), t === "removable" && i !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
+  attributeChangedCallback(e, s, i) {
+    super.attributeChangedCallback(e, s, i), e === "removable" && i !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
   }
-  _handleStateChange(t, s, i) {
-    w(p(this, h), _[t]).set(i);
+  _handleStateChange(e, s, i) {
+    w(h(this, p), _[e]).set(i);
   }
   render() {
-    return u`
+    return C`
 			<div id="root">
-				${this.icon ? u`<skf-icon color=${E(this.color)} name=${this.icon} size="sm"></skf-icon>` : b}
+				${this.icon ? C`<skf-icon color=${E(this.color)} name=${this.icon} size="sm"></skf-icon>` : y}
 				<slot></slot>
-				${this.removable ? u`
+				${this.removable ? C`
 							<button
 								@click=${this._handleRemove}
-								aria-label=${p(this, a).term("close")}
+								aria-label=${h(this, n).term("close")}
 								type="button"
 							>
 								<skf-icon name="close" size="xs"></skf-icon>
 							</button>
-						` : b}
+						` : y}
 			</div>
 		`;
   }
 };
-a = new WeakMap(), c = new WeakMap(), h = new WeakMap(), y.styles = [R, P];
-let n = y;
-r([
-  l({ type: String })
-], n.prototype, "size", 2);
-r([
-  l({ type: String })
-], n.prototype, "icon", 2);
-r([
-  l({ type: String })
-], n.prototype, "color", 2);
-r([
-  l({ type: String })
-], n.prototype, "lang", 2);
-r([
-  l({ attribute: !1 })
-], n.prototype, "onClick", 1);
-r([
-  l({ attribute: !1 })
-], n.prototype, "onRemove", 1);
-r([
-  l({ type: Boolean })
-], n.prototype, "removable", 2);
-r([
+n = new WeakMap(), c = new WeakMap(), p = new WeakMap(), f.styles = [R, P];
+let r = f;
+l([
+  a({ type: String })
+], r.prototype, "size", 2);
+l([
+  a({ type: String })
+], r.prototype, "icon", 2);
+l([
+  a({ type: String })
+], r.prototype, "color", 2);
+l([
+  a({ type: String })
+], r.prototype, "lang", 2);
+l([
+  a({ attribute: !1 })
+], r.prototype, "clickCallback", 1);
+l([
+  a({ attribute: !1 })
+], r.prototype, "preRemoveCallback", 1);
+l([
+  a({ type: Boolean })
+], r.prototype, "removable", 2);
+l([
   D("button")
-], n.prototype, "$removeButton", 2);
-r([
+], r.prototype, "$removeButton", 2);
+l([
   $(Object.keys(_))
-], n.prototype, "_handleStateChange", 1);
+], r.prototype, "_handleStateChange", 1);
 export {
-  n as SkfTag
+  r as SkfTag
 };

package/dist/components/tag/tag.styles.js

@@ -41,6 +41,11 @@ const s = r`
 					border-radius: var(--skf-border-radius-sm);
 					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
 				}
+
+				/* let button be first item in composedPath array */
+				& > * {
+					pointer-events: none;
+				}
 			}
 		}
 

package/dist/custom-elements.json

@@ -2461,6 +2461,128 @@
       ],
       "typeDefinitionPath": "components/datepicker/datepicker.d.ts"
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/divider/divider.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information",
+          "name": "SkfDivider",
+          "cssProperties": [
+            {
+              "description": "The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical",
+              "name": "--skf-divider-spacing"
+            },
+            {
+              "description": "The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical",
+              "name": "--skf-divider-inset"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "SkfDividerColor"
+              },
+              "default": "'primary'",
+              "description": "Defines the Divider color",
+              "attribute": "color",
+              "expandedType": {
+                "text": "'primary' | 'inverse' | 'emphasized' | 'secondary' | 'tertiary'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "decorative",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "attribute": "decorative"
+            },
+            {
+              "kind": "field",
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, renders the divider vertically",
+              "attribute": "vertical"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "SkfDividerColor"
+              },
+              "default": "'primary'",
+              "description": "Defines the Divider color",
+              "fieldName": "color",
+              "expandedType": {
+                "text": "'primary' | 'inverse' | 'emphasized' | 'secondary' | 'tertiary'"
+              }
+            },
+            {
+              "name": "decorative",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "fieldName": "decorative"
+            },
+            {
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, renders the divider vertically",
+              "fieldName": "vertical"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element.js"
+          },
+          "tagName": "skf-divider",
+          "customElement": true,
+          "modulePath": "src/components/divider/divider.component.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfDivider",
+          "declaration": {
+            "name": "SkfDivider",
+            "module": "src/components/divider/divider.component.ts"
+          }
+        }
+      ],
+      "typeDefinitionPath": "components/divider/divider.d.ts"
+    },
     {
       "kind": "javascript-module",
       "path": "components/heading/heading.js",
@@ -2783,128 +2905,6 @@
       ],
       "typeDefinitionPath": "components/dialog/dialog.d.ts"
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/divider/divider.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information",
-          "name": "SkfDivider",
-          "cssProperties": [
-            {
-              "description": "The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical",
-              "name": "--skf-divider-spacing"
-            },
-            {
-              "description": "The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical",
-              "name": "--skf-divider-inset"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "#internals",
-              "privacy": "private",
-              "type": {
-                "text": "ElementInternals"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#states",
-              "privacy": "private",
-              "type": {
-                "text": "CustomStateSet"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "SkfDividerColor"
-              },
-              "default": "'primary'",
-              "description": "Defines the Divider color",
-              "attribute": "color",
-              "expandedType": {
-                "text": "'primary' | 'inverse' | 'emphasized' | 'secondary' | 'tertiary'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "decorative",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "attribute": "decorative"
-            },
-            {
-              "kind": "field",
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, renders the divider vertically",
-              "attribute": "vertical"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "SkfDividerColor"
-              },
-              "default": "'primary'",
-              "description": "Defines the Divider color",
-              "fieldName": "color",
-              "expandedType": {
-                "text": "'primary' | 'inverse' | 'emphasized' | 'secondary' | 'tertiary'"
-              }
-            },
-            {
-              "name": "decorative",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "fieldName": "decorative"
-            },
-            {
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, renders the divider vertically",
-              "fieldName": "vertical"
-            }
-          ],
-          "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element.js"
-          },
-          "tagName": "skf-divider",
-          "customElement": true,
-          "modulePath": "src/components/divider/divider.component.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfDivider",
-          "declaration": {
-            "name": "SkfDivider",
-            "module": "src/components/divider/divider.component.ts"
-          }
-        }
-      ],
-      "typeDefinitionPath": "components/divider/divider.d.ts"
-    },
     {
       "kind": "javascript-module",
       "path": "components/drawer/drawer.js",
@@ -4115,6 +4115,13 @@
               },
               "description": "Fires when the input is invalid",
               "name": "invalid"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires when the input is cleared",
+              "name": "cleared"
             }
           ],
           "attributes": [
@@ -5697,12 +5704,12 @@
             },
             {
               "kind": "field",
-              "name": "onClick",
+              "name": "clickCallback",
               "description": "If defined, accepts a function that runs on click"
             },
             {
               "kind": "field",
-              "name": "onRemove",
+              "name": "preRemoveCallback",
               "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`."
             },
             {

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

@@ -11,9 +11,9 @@ import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox } 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 { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
 import type { SkfDialog } from "../../components/dialog/dialog.component.js";
-import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfDrawer } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
 import type { SkfLink } from "../../components/link/link.component.js";
@@ -509,6 +509,18 @@ export type SkfDatepickerProps = {
 }
 
 
+export type SkfDividerProps = {
+  /** Defines the Divider color */
+  "color"?: SkfDivider['color'];
+  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
+  "decorative"?: SkfDivider['decorative'];
+  /** If true, renders the divider vertically */
+  "vertical"?: SkfDivider['vertical'];
+
+
+}
+
+
 export type SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
   "as"?: SkfHeading['as'];
@@ -548,18 +560,6 @@ export type SkfDialogProps = {
 }
 
 
-export type SkfDividerProps = {
-  /** Defines the Divider color */
-  "color"?: SkfDivider['color'];
-  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-  "decorative"?: SkfDivider['decorative'];
-  /** If true, renders the divider vertically */
-  "vertical"?: SkfDivider['vertical'];
-
-
-}
-
-
 export type SkfDrawerProps = {
   /** Heading for the Drawer */
   "heading"?: SkfDrawer['heading'];
@@ -738,6 +738,8 @@ export type SkfInputProps = {
   "onchange"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the input is invalid */
   "oninvalid"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the input is cleared */
+  "oncleared"?: (e: CustomEvent<CustomEvent>) => void;
 }
 
 
@@ -906,9 +908,9 @@ export type SkfTagProps = {
   /** If true, adds trailing button to remove tag */
   "removable"?: SkfTag['removable'];
   /** If defined, accepts a function that runs on click */
-  "onClick"?: SkfTag['onClick'];
+  "clickCallback"?: SkfTag['clickCallback'];
   /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
-  "onRemove"?: SkfTag['onRemove'];
+  "preRemoveCallback"?: SkfTag['preRemoveCallback'];
 
 
 }
@@ -1571,6 +1573,27 @@ export type SkfTooltipProps = {
     "skf-datepicker": Partial<SkfDatepickerProps & BaseProps<SkfDatepicker> & BaseEvents>;
 
 
+  /**
+     * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `color`: Defines the Divider color 
+ * - `decorative`: If true, renders a div for presentational purpose instead of the semantic hr-element 
+ * - `vertical`: If true, renders the divider vertically 
+ * 
+ * #### CSS Custom Properties
+ * 
+ * CSS variables available for styling the component.
+ * 
+ * - `--skf-divider-spacing`: The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical (default: `undefined`)
+ * - `--skf-divider-inset`: The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical (default: `undefined`)
+  */
+    "skf-divider": Partial<SkfDividerProps & BaseProps<SkfDivider> & BaseEvents>;
+
+
   /**
      * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
  * It extends the interface of native html `<h1>` to `<h4>` elements.
@@ -1637,27 +1660,6 @@ export type SkfTooltipProps = {
     "skf-dialog": Partial<SkfDialogProps & BaseProps<SkfDialog> & BaseEvents>;
 
 
-  /**
-     * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
- * 
- * #### Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `color`: Defines the Divider color 
- * - `decorative`: If true, renders a div for presentational purpose instead of the semantic hr-element 
- * - `vertical`: If true, renders the divider vertically 
- * 
- * #### CSS Custom Properties
- * 
- * CSS variables available for styling the component.
- * 
- * - `--skf-divider-spacing`: The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical (default: `undefined`)
- * - `--skf-divider-inset`: The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical (default: `undefined`)
-  */
-    "skf-divider": Partial<SkfDividerProps & BaseProps<SkfDivider> & BaseEvents>;
-
-
   /**
      * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
  * 
@@ -1860,6 +1862,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
  * 
  * #### Slots
  * 
@@ -2109,8 +2112,8 @@ export type SkfTooltipProps = {
  * - `color`: If defined, gives the supplied appearance 
  * - `lang`: Sets the internal language of the component 
  * - `removable`: If true, adds trailing button to remove tag 
- * - `onClick`: If defined, accepts a function that runs on click (property only)
- * - `onRemove`: If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. (property only)
+ * - `clickCallback`: If defined, accepts a function that runs on click (property only)
+ * - `preRemoveCallback`: If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. (property only)
  * 
  * #### Slots
  * 

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

@@ -12,9 +12,9 @@ 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 { SkfDivider } from "../../components/divider/divider.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";
 import type { SkfDrawer, CustomEvent } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
 import type { SkfLink, CustomEvent } from "../../components/link/link.component.js";
@@ -262,6 +262,15 @@ type SkfDatepickerProps = {
   focusTimeoutId?: SkfDatepicker["focusTimeoutId"];
 };
 
+type SkfDividerProps = {
+  /** Defines the Divider color */
+  color?: SkfDivider["color"];
+  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
+  decorative?: SkfDivider["decorative"];
+  /** If true, renders the divider vertically */
+  vertical?: SkfDivider["vertical"];
+};
+
 type SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
   as?: SkfHeading["as"];
@@ -291,15 +300,6 @@ type SkfDialogProps = {
   "onskf-dialog-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SkfDividerProps = {
-  /** Defines the Divider color */
-  color?: SkfDivider["color"];
-  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-  decorative?: SkfDivider["decorative"];
-  /** If true, renders the divider vertically */
-  vertical?: SkfDivider["vertical"];
-};
-
 type SkfDrawerProps = {
   /** Heading for the Drawer */
   heading?: SkfDrawer["heading"];
@@ -444,6 +444,8 @@ type SkfInputProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the input is invalid */
   oninvalid?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the input is cleared */
+  oncleared?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfMenuItemProps = {
@@ -583,9 +585,9 @@ type SkfTagProps = {
   /** If true, adds trailing button to remove tag */
   removable?: SkfTag["removable"];
   /** If defined, accepts a function that runs on click */
-  onClick?: SkfTag["onClick"];
+  clickCallback?: SkfTag["clickCallback"];
   /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
-  onRemove?: SkfTag["onRemove"];
+  preRemoveCallback?: SkfTag["preRemoveCallback"];
 };
 
 type SkfSelectProps = {
@@ -982,6 +984,17 @@ export type CustomElements = {
    */
   "skf-datepicker": DefineComponent<SkfDatepickerProps>;
 
+  /**
+   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
+   * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
+   */
+  "skf-divider": DefineComponent<SkfDividerProps>;
+
   /**
    * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
    * It extends the interface of native html `<h1>` to `<h4>` elements.
@@ -1017,17 +1030,6 @@ export type CustomElements = {
    */
   "skf-dialog": DefineComponent<SkfDialogProps>;
 
-  /**
-   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
-   * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
-   */
-  "skf-divider": DefineComponent<SkfDividerProps>;
-
   /**
    * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
    * ---
@@ -1107,6 +1109,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
    *
    * ### **Slots:**
    *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.

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

@@ -451,6 +451,28 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-divider",
+      "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Defines the Divider color",
+          "values": [{ "name": "SkfDividerColor" }]
+        },
+        {
+          "name": "decorative",
+          "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+          "values": []
+        },
+        {
+          "name": "vertical",
+          "description": "If true, renders the divider vertically",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-heading",
       "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",
@@ -505,28 +527,6 @@
       ],
       "references": []
     },
-    {
-      "name": "skf-divider",
-      "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
-      "attributes": [
-        {
-          "name": "color",
-          "description": "Defines the Divider color",
-          "values": [{ "name": "SkfDividerColor" }]
-        },
-        {
-          "name": "decorative",
-          "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-          "values": []
-        },
-        {
-          "name": "vertical",
-          "description": "If true, renders the divider vertically",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "skf-drawer",
       "description": "The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge\n---\n\n\n### **Events:**\n - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)\n- **skf-drawer-closing** - Fires when the drawer is closing (before transitioned out)\n- **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The Drawer's main content",
@@ -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\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- **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

@@ -985,6 +985,49 @@
             "events": []
           }
         },
+        {
+          "name": "skf-divider",
+          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "Defines the Divider color",
+              "value": { "type": "SkfDividerColor", "default": "'primary'" }
+            },
+            {
+              "name": "decorative",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "vertical",
+              "description": "If true, renders the divider vertically",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "Defines the Divider color",
+                "type": "SkfDividerColor"
+              },
+              {
+                "name": "decorative",
+                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+                "type": "boolean"
+              },
+              {
+                "name": "vertical",
+                "description": "If true, renders the divider vertically",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "skf-heading",
           "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",
@@ -1131,49 +1174,6 @@
             ]
           }
         },
-        {
-          "name": "skf-divider",
-          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "Defines the Divider color",
-              "value": { "type": "SkfDividerColor", "default": "'primary'" }
-            },
-            {
-              "name": "decorative",
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "vertical",
-              "description": "If true, renders the divider vertically",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "color",
-                "description": "Defines the Divider color",
-                "type": "SkfDividerColor"
-              },
-              {
-                "name": "decorative",
-                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-                "type": "boolean"
-              },
-              {
-                "name": "vertical",
-                "description": "If true, renders the divider vertically",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "skf-drawer",
           "description": "The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge\n---\n\n\n### **Events:**\n - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)\n- **skf-drawer-closing** - Fires when the drawer is closing (before transitioned out)\n- **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The Drawer's main content",
@@ -1553,7 +1553,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\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- **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": [
             {
@@ -1718,6 +1718,11 @@
               "name": "invalid",
               "type": "CustomEvent",
               "description": "Fires when the input is invalid"
+            },
+            {
+              "name": "cleared",
+              "type": "CustomEvent",
+              "description": "Fires when the input is cleared"
             }
           ],
           "js": {
@@ -1852,6 +1857,11 @@
                 "name": "invalid",
                 "type": "CustomEvent",
                 "description": "Fires when the input is invalid"
+              },
+              {
+                "name": "cleared",
+                "type": "CustomEvent",
+                "description": "Fires when the input is cleared"
               }
             ]
           }
@@ -2483,11 +2493,11 @@
                 "type": "Language"
               },
               {
-                "name": "onClick",
+                "name": "clickCallback",
                 "description": "If defined, accepts a function that runs on click"
               },
               {
-                "name": "onRemove",
+                "name": "preRemoveCallback",
                 "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`."
               },
               {

package/package.json

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