@raylang/elements 0.3.0 → 0.4.1

package/base.css

@@ -108,4 +108,9 @@
   :where(.ray-table-bordered) :where(tbody tr:last-child td) {
     border-bottom: 0;
   }
+
+  /* Secondary text (hints, metadata): <span class="ray-muted">. */
+  :where(.ray-muted) {
+    color: var(--ray-muted-foreground);
+  }
 }

package/components/input/input.js

@@ -14,6 +14,8 @@ const styles = css`
 const PASSTHROUGH = ["placeholder", "autocomplete", "inputmode", "pattern", "min", "max", "step", "minlength", "maxlength", "spellcheck", "autocapitalize", "enterkeyhint", "list"];
 
 export class RayInput extends FieldControl {
+  /** Enter submits the form (core/form.js). */
+  static implicitSubmission = true;
   static properties = {
     ...FieldControl.fieldProperties,
     type: { type: String, reflect: true, default: "text" },
@@ -50,6 +52,7 @@ export class RayInput extends FieldControl {
       this._commit();
     });
     this.control.addEventListener("change", (e) => this.forward(e));
+    this.submitOnEnter(this.control);
     if (this.autofocus) queueMicrotask(() => this.control.focus());
   }
 

package/components/number-input/number-input.js

@@ -61,6 +61,8 @@ export function formatNumber(n, { decimals, thousands = "", decimal = "." } = {}
 }
 
 export class RayNumberInput extends FieldControl {
+  /** Enter submits the form (core/form.js). */
+  static implicitSubmission = true;
   static properties = {
     ...FieldControl.fieldProperties,
     value: { type: Number },
@@ -104,6 +106,7 @@ export class RayNumberInput extends FieldControl {
     });
     c.addEventListener("change", (e) => this.forward(e));
     c.addEventListener("keydown", (e) => this._key(e));
+    this.submitOnEnter(c);
     // + and −: a press steps once; held, it repeats faster and faster.
     for (const [sel, dir] of [[".up", 1], [".down", -1]]) {
       const b = this.$(sel);

package/core/form.js

@@ -44,6 +44,52 @@ export class FormControl extends RayElement {
   forward(event) {
     this.dispatchEvent(new Event(event.type, { bubbles: true, cancelable: event.cancelable }));
   }
+
+  /**
+   * Enter in `control` submits the form, as in a native text field. The
+   * native control in a shadow root has no form owner, so the browser's own
+   * implicit submission never reaches the <form>: this does it the way HTML
+   * does (see implicitSubmit).
+   */
+  submitOnEnter(control) {
+    control.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" || e.isComposing || e.defaultPrevented) return;
+      const form = this.form;
+      if (!form) return;
+      e.preventDefault();
+      implicitSubmit(form);
+    });
+  }
+}
+
+// Native controls whose Enter submits (HTML's "fields that block implicit
+// submission").
+const TEXT_TYPES = ["text", "search", "url", "tel", "email", "password", "date", "month", "week", "time", "datetime-local", "number"];
+
+// A native submit button, or a form-associated custom element with
+// type="submit" (ray-button, or an app's own).
+const isSubmitButton = (el) =>
+  (el.localName === "button" && (el.getAttribute("type") ?? "submit") === "submit") ||
+  (el.localName === "input" && ["submit", "image"].includes(el.type)) ||
+  (el.constructor.formAssociated === true && el.type === "submit");
+
+const blocksImplicitSubmission = (el) =>
+  el.constructor.implicitSubmission === true || (el.localName === "input" && TEXT_TYPES.includes(el.type));
+
+/**
+ * HTML's implicit submission of `form`: a click on its first submit button
+ * (nothing when that button is disabled), or, without one, a submit when the
+ * form has a single text field.
+ * @param {HTMLFormElement} form
+ */
+export function implicitSubmit(form) {
+  const elements = [...form.elements];
+  const button = elements.find(isSubmitButton);
+  if (button) {
+    if (!button.matches(":disabled")) button.click();
+    return;
+  }
+  if (elements.filter(blocksImplicitSubmission).length <= 1) form.requestSubmit();
 }
 
 /** The field wrapper around a control: label, description, box, error. */

package/custom-elements.json

@@ -4116,7 +4116,7 @@
           "name": "RayInput",
           "tagName": "ray-input",
           "customElement": true,
-          "description": "Also forwards placeholder, autocomplete, inputmode, pattern, min, max, step, minlength, maxlength, spellcheck, autocapitalize, enterkeyhint and list to the inner input.",
+          "description": "Also forwards placeholder, autocomplete, inputmode, pattern, min, max, step, minlength, maxlength, spellcheck, autocapitalize, enterkeyhint and list to the inner input. Enter submits its form as a native field does: through the first submit button (ray-button type=\"submit\" included; nothing when it is disabled), or, without one, only when the form has a single text field.",
           "superclass": {
             "name": "FieldControl"
           },
@@ -4544,7 +4544,7 @@
           "name": "RayNumberInput",
           "tagName": "ray-number-input",
           "customElement": true,
-          "description": "Arrow Up/Down step (Shift: ×10), Page Up/Down ×10, Home/End go to min/max. The value is a number (undefined when empty); the form gets its plain digits; min and max are checked (rangeUnderflow, rangeOverflow).",
+          "description": "Arrow Up/Down step (Shift: ×10), Page Up/Down ×10, Home/End go to min/max. The value is a number (undefined when empty); the form gets its plain digits; min and max are checked (rangeUnderflow, rangeOverflow). Enter submits its form, as in ray-input.",
           "superclass": {
             "name": "FieldControl"
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/elements",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Web components for any app, with raylang extras (shadcn/ui + Mantine inspired)",
   "license": "Apache-2.0",
   "keywords": ["web-components", "custom-elements", "design-system", "ui", "raylang"],

package/ray-elements.d.ts

@@ -804,7 +804,7 @@ export interface RayFileUploadEventMap extends HTMLElementEventMap {
 }
 
 // --- Input (input)
-/** <ray-input> Also forwards placeholder, autocomplete, inputmode, pattern, min, max, step, minlength, maxlength, spellcheck, autocapitalize, enterkeyhint and list to the inner input. */
+/** <ray-input> Also forwards placeholder, autocomplete, inputmode, pattern, min, max, step, minlength, maxlength, spellcheck, autocapitalize, enterkeyhint and list to the inner input. Enter submits its form as a native field does: through the first submit button (ray-button type="submit" included; nothing when it is disabled), or, without one, only when the form has a single text field. */
 export declare class RayInput extends FieldControl {
   /** Current value. The value attribute is the initial value (restored on form reset). */
   value: string | undefined;
@@ -843,7 +843,7 @@ export declare class RayInput extends FieldControl {
 export declare function parseNumber(text: string, options?: { decimal?: string; thousands?: string }): number;
 /** A number as text with fixed decimals and separators. */
 export declare function formatNumber(n: number, options?: { decimals?: number; thousands?: string; decimal?: string }): string;
-/** <ray-number-input> Arrow Up/Down step (Shift: ×10), Page Up/Down ×10, Home/End go to min/max. The value is a number (undefined when empty); the form gets its plain digits; min and max are checked (rangeUnderflow, rangeOverflow). */
+/** <ray-number-input> Arrow Up/Down step (Shift: ×10), Page Up/Down ×10, Home/End go to min/max. The value is a number (undefined when empty); the form gets its plain digits; min and max are checked (rangeUnderflow, rangeOverflow). Enter submits its form, as in ray-input. */
 export declare class RayNumberInput extends FieldControl {
   /** The number (undefined when empty). */
   value: number | undefined;

package/vscode.html-custom-data.json

@@ -1266,7 +1266,7 @@
     },
     {
       "name": "ray-input",
-      "description": "Also forwards placeholder, autocomplete, inputmode, pattern, min, max, step, minlength, maxlength, spellcheck, autocapitalize, enterkeyhint and list to the inner input.",
+      "description": "Also forwards placeholder, autocomplete, inputmode, pattern, min, max, step, minlength, maxlength, spellcheck, autocapitalize, enterkeyhint and list to the inner input. Enter submits its form as a native field does: through the first submit button (ray-button type=\"submit\" included; nothing when it is disabled), or, without one, only when the form has a single text field.",
       "attributes": [
         {
           "name": "value",
@@ -1454,7 +1454,7 @@
     },
     {
       "name": "ray-number-input",
-      "description": "Arrow Up/Down step (Shift: ×10), Page Up/Down ×10, Home/End go to min/max. The value is a number (undefined when empty); the form gets its plain digits; min and max are checked (rangeUnderflow, rangeOverflow).",
+      "description": "Arrow Up/Down step (Shift: ×10), Page Up/Down ×10, Home/End go to min/max. The value is a number (undefined when empty); the form gets its plain digits; min and max are checked (rangeUnderflow, rangeOverflow). Enter submits its form, as in ray-input.",
       "attributes": [
         {
           "name": "value",