@timmo001/groundwork-ui 0.9.1 → 0.9.3

package/custom-elements.json

@@ -3613,7 +3613,7 @@
               "type": {
                 "text": "\"button\"|\"submit\"|\"reset\""
               },
-              "description": "The native button type. Defaults to `button`.",
+              "description": "What a click does: nothing more, or submit or reset the form the button is in. Defaults to `button`.",
               "name": "type"
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "Groundwork's framework-free web components, styled by the --gw-* tokens",
   "license": "Apache-2.0",
   "type": "module",

package/src/gw-button.ts

@@ -32,7 +32,7 @@ import { base, controlSizes, createIcon, setIconPath } from "./styles.js";
  * @attr {"brand"|"neutral"|"info"|"success"|"warning"|"danger"} variant - The color. Defaults to `brand`.
  * @attr {"accent"|"filled"|"outlined"|"plain"} appearance - How the color is applied. Defaults to `accent`.
  * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The size, 24 to 56px tall. Defaults to `medium`.
- * @attr {"button"|"submit"|"reset"} type - The native button type. Defaults to `button`.
+ * @attr {"button"|"submit"|"reset"} type - What a click does: nothing more, or submit or reset the form the button is in. Defaults to `button`.
  * @attr {string} href - Renders a link to this address instead of a button.
  * @attr {string} label - The accessible name, when the text alone isn't enough.
  * @attr {boolean} disabled - Disables the button.
@@ -423,6 +423,25 @@ export class GwButton extends GwElement {
       if (link !== null && !event.composedPath().includes(link)) {
         link.click();
       }
+
+      // The native button is in the shadow root, so it has no form of its
+      // own; submit and reset act on the form around the element instead
+      const form = this.closest("form");
+
+      if (
+        form === null ||
+        this.disabled ||
+        event.defaultPrevented ||
+        !(this.#control instanceof HTMLButtonElement)
+      ) {
+        return;
+      }
+
+      if (this.type === "submit") {
+        form.requestSubmit();
+      } else if (this.type === "reset") {
+        form.reset();
+      }
     });
 
     const focus = () => {

package/src/on.ts

@@ -12,12 +12,26 @@ export type { GwEventMap } from "./events.js";
 
 type EventTag = keyof GwEventMap;
 
+/**
+ * Each event-firing element's class, by tag. An app only declares the tags it
+ * imports, so the ones it doesn't load are `never` rather than an error.
+ */
+type Loaded = {
+  [T in EventTag]: T extends keyof HTMLElementTagNameMap
+    ? HTMLElementTagNameMap[T]
+    : never;
+};
+
 /** A `gw-` element that fires events of its own. */
-export type GwEventTarget = HTMLElementTagNameMap[EventTag];
+export type GwEventTarget = Loaded[EventTag];
 
 /** The events an element fires, found from the tag its class is defined for. */
 export type GwEventsOf<E extends GwEventTarget> = {
-  [T in EventTag]: E extends HTMLElementTagNameMap[T] ? GwEventMap[T] : never;
+  [T in EventTag]: [Loaded[T]] extends [never]
+    ? never
+    : E extends Loaded[T]
+      ? GwEventMap[T]
+      : never;
 }[EventTag];
 
 /**