feat: reset and submit support for <utrecht-button>

components/button/stencil.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from "@stencil/core";
+import { Component, Element, Event, EventEmitter, Prop, h } from "@stencil/core";
 import clsx from "clsx";
 
 @Component({
@@ -8,14 +8,40 @@ import clsx from "clsx";
 })
 export class Button {
   @Prop() disabled: boolean;
+  @Event({ cancelable: true }) utrechtRequestReset: EventEmitter;
+  @Event({ cancelable: true }) utrechtRequestSubmit: EventEmitter;
+  @Element() host: HTMLElement;
   @Prop() type: string;
 
   render() {
+    const handleReset = () => {
+      const event = this.utrechtRequestReset.emit();
+      if (!event.defaultPrevented) {
+        this.host?.closest("form")?.reset();
+      }
+    };
+
+    const handleSubmit = () => {
+      const event = this.utrechtRequestSubmit.emit();
+      if (!event.defaultPrevented) {
+        this.host?.closest("form")?.requestSubmit();
+      }
+    };
+
+    const handleClick = () => {
+      if (this.type === "reset") {
+        handleReset();
+      } else if (this.type === "submit") {
+        handleSubmit();
+      }
+    };
+
     return (
       <button
         class={clsx("utrecht-button", this.disabled && "utrecht-button--disabled")}
         disabled={this.disabled}
         type={this.type || "button"}
+        onClick={handleClick}
       >
         <slot></slot>
       </button>