@raylang/elements 0.4.0 → 0.5.0

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/core/host.js

@@ -64,10 +64,11 @@ const INTERACTIVE = "button, a[href], input, select, textarea, label, summary, [
 /**
  * Makes `el` drag the window when the page runs under a host's title bar
  * (titlebar() is not null): it gets data-ray-drag, the attribute the std/ui
- * shell reads. The shell looks at the event's target, which a shadow root
- * retargets to its host, so for a pointer down on anything interactive
- * inside `el` (a button in its shadow root too) the attribute steps aside
- * until the pointer is up. Returns the function that undoes it.
+ * shell reads. The shell walks the event's composed path, but only spares
+ * buttons, links and form fields; for a pointer down on anything else
+ * interactive inside `el` (a tab, a summary, a [role=button] in a shadow
+ * root) the attribute steps aside until the pointer is up. Returns the
+ * function that undoes it.
  */
 export function dragRegion(el) {
   const guard = (e) => {

package/core/raylang.js

@@ -29,9 +29,8 @@ const MAC_BUTTONS = 78;
  * long to wait for that answer; `ray` replaces window.ray (tests).
  * `windowColors` (default true) keeps the window's background in the
  * theme's background color, so a resize or a reopen never shows the other
- * theme. The title bar is tinted too only when the window has its own bar
- * (not full_content) and the theme is light or dark: with "system" it stays
- * the system's, so the page keeps following the system.
+ * theme. The title bar is tinted too when the theme is light or dark: with
+ * "system" it stays the system's, so the page keeps following the system.
  */
 export function enableRaylang({ timeout = 2000, ray = globalThis.ray, windowColors = true } = {}) {
   if (ray !== globalThis.ray) return connect(ray, timeout, windowColors);
@@ -114,22 +113,20 @@ async function connect(ray, timeout, windowColors) {
   if (windowColors && ops.has("window_colors")) {
     // A title bar color also sets the window's appearance (macOS picks light
     // or dark by its luminance), which the page's prefers-color-scheme
-    // follows, and in a full_content window it brings back the opaque bar.
-    // So the bar is tinted only in a window with its own bar and a chosen
-    // theme (light or dark), and given back to the system once after that.
+    // follows. So the bar is tinted only for a chosen theme (light or dark),
+    // and given back to the system once after that. In a full_content window
+    // the bar stays transparent either way.
     let tinted = false;
     const paint = (theme) => {
       const background = hex(theme.background);
       if (!background) return;
       const colors = { background };
-      if (!host.titlebar) {
-        if (getTheme() !== "system") {
-          colors.titlebar = background;
-          tinted = true;
-        } else if (tinted) {
-          colors.titlebar = "";
-          tinted = false;
-        }
+      if (getTheme() !== "system") {
+        colors.titlebar = background;
+        tinted = true;
+      } else if (tinted) {
+        colors.titlebar = "";
+        tinted = false;
       }
       host.setWindowColors(colors).catch(() => {});
     };

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.4.0",
+  "version": "0.5.0",
   "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",