@raylang/elements 0.5.1 → 0.5.2

package/llms-full.txt

@@ -1,6 +1,6 @@
 # ray-elements
 
-> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.5.1.
+> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.5.2.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
@@ -238,6 +238,16 @@ system dialog, `<ray-menu native>` opens a native context menu,
 components that use it have an "In a raylang app" section. Without the
 bridge every component keeps its web behavior.
 
+## Check your markup
+
+The package checks markup against this version:
+`npx ray-elements check src/` (with npm), or
+`node node_modules/@raylang/elements/check/cli.js check assets/` (a raylang
+app). It reports unknown elements, attributes, slots and `ray-*` events,
+invalid values, unregistered icons and literal colors, with the line and a
+suggestion, and exits with 1 on an error. Run it after writing a page and fix
+what it reports; `--format json` gives the diagnostics as JSON.
+
 ## Your own components
 
 Extend `RayElement`, `FormControl`, `FieldControl` or `Floating` (or any
@@ -434,7 +444,7 @@ Import: `import "@raylang/elements/checkbox";` · Category: Inputs
 
 Properties:
 
-- `checked` (property only): boolean. Current state. The checked attribute is the initial state (restored on reset).
+- `checked` (attribute `checked`: the initial value only): boolean. Current state. The checked attribute is the initial state (restored on reset).
 - `indeterminate`: boolean, reflects. Mixed state; cleared on the next user change.
 - `value`: string, default `on`, reflects. Submitted value when checked.
 - `name`: string. Form field name.
@@ -478,7 +488,7 @@ The group is the form control: one entry per checked value under name (like chec
 
 Properties:
 
-- `value` (property only): `string[]`. The checked values. The value attribute: "a,b".
+- `value` (attribute `value`: the initial value only): `string[]`. The checked values. The value attribute: "a,b".
 - `name`: string, reflects. Form field name.
 - `label`: string. Group label (also its accessible name).
 - `description`: string. Help text.
@@ -615,7 +625,7 @@ The WAI-ARIA combobox pattern (a text field with a listbox popup; the active opt
 
 Properties:
 
-- `value` (property only): `string | string[]`. The chosen value; an array with multiple. The value attribute: "a,b" with multiple.
+- `value` (attribute `value`: the initial value only): `string | string[]`. The chosen value; an array with multiple. The value attribute: "a,b" with multiple.
 - `data` (property only): `Array<string | { value: string; label?: string; disabled?: boolean; group?: string }>`. Options instead of child <option>/<optgroup> elements.
 - `multiple`: boolean, reflects. Several values, shown as chips.
 - `placeholder`: string. Shown while empty.
@@ -1085,6 +1095,7 @@ Vue `v-model`: `value` (updated on change).
 Properties:
 
 - `value`: string, reflects. Value given to the group when chosen.
+- `checked` (attribute `checked`: the initial value only): boolean. Whether this radio is the group's value; setting it sets the group's value. The checked attribute marks the group's initial value (when the group has no value attribute).
 - `label`: string. Label text (or the content).
 - `description`: string. Help text under the label.
 - `disabled`: boolean. Cannot be chosen.
@@ -1101,10 +1112,6 @@ Parts (`::part()`):
 - `indicator`: The circle.
 - `label`: The label.
 
-Methods and properties:
-
-- `readonly checked: boolean`: Whether this radio is the group's value.
-
 ### Search
 
 A search box: icon, clear button, an optional shortcut that focuses it, and a debounced ray-search event. A RayInput, so it has a label and takes part in forms.
@@ -1293,7 +1300,7 @@ Same properties and events as ray-checkbox (indeterminate does not apply).
 
 Properties:
 
-- `checked` (property only): boolean. Current state. The checked attribute is the initial state.
+- `checked` (attribute `checked`: the initial value only): boolean. Current state. The checked attribute is the initial state.
 - `value`: string, default `on`. Submitted value when on.
 - `name`: string. Form field name.
 - `label`: string. Label text (or the content).
@@ -2437,7 +2444,7 @@ setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGEleme
 
 Properties:
 
-- `name`: string, reflects. Registered icon name (iconNames()).
+- `name`: string, reflects. Registered icon name (iconNames()); "none" draws nothing, a blank that keeps the alignment (a menu item without its check).
 - `size`: string, reflects. xs…xl or any CSS length. Default: 1em.
 - `label`: string. Accessible name; without it the icon is decorative (hidden from screen readers).
 - `color`: string, reflects. A palette color or any CSS color. Default: the text color.

package/llms.txt

@@ -1,6 +1,6 @@
 # ray-elements
 
-> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.5.1.
+> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.5.2.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
@@ -238,6 +238,16 @@ system dialog, `<ray-menu native>` opens a native context menu,
 components that use it have an "In a raylang app" section. Without the
 bridge every component keeps its web behavior.
 
+## Check your markup
+
+The package checks markup against this version:
+`npx ray-elements check src/` (with npm), or
+`node node_modules/@raylang/elements/check/cli.js check assets/` (a raylang
+app). It reports unknown elements, attributes, slots and `ray-*` events,
+invalid values, unregistered icons and literal colors, with the line and a
+suggestion, and exits with 1 on an error. Run it after writing a page and fix
+what it reports; `--format json` gives the diagnostics as JSON.
+
 ## Your own components
 
 Extend `RayElement`, `FormControl`, `FieldControl` or `Floating` (or any

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/elements",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "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"],
@@ -20,6 +20,9 @@
   "main": "./index.js",
   "module": "./index.js",
   "types": "./ray-elements.d.ts",
+  "bin": {
+    "ray-elements": "./check/cli.js"
+  },
   "exports": {
     ".": {
       "types": "./ray-elements.d.ts",
@@ -29,6 +32,10 @@
       "types": "./ray-elements.d.ts",
       "default": "./core.js"
     },
+    "./check": {
+      "types": "./check/check.d.ts",
+      "default": "./check/check.js"
+    },
     "./button": {
       "types": "./ray-elements.d.ts",
       "default": "./components/button/button.js"

package/ray-elements.d.ts

@@ -957,6 +957,8 @@ export declare class RayRadioGroup extends FormControl {
 export declare class RayRadio extends RayElement {
   /** Value given to the group when chosen. */
   value: string | undefined;
+  /** Whether this radio is the group's value; setting it sets the group's value. The checked attribute marks the group's initial value (when the group has no value attribute). */
+  checked: boolean | undefined;
   /** Label text (or the content). */
   label: string | undefined;
   /** Help text under the label. */
@@ -969,8 +971,6 @@ export declare class RayRadio extends RayElement {
   size: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
   /** Overrides the group variant. */
   variant: "filled" | "outline" | undefined;
-  /** Whether this radio is the group's value. */
-  readonly checked: boolean;
 }
 
 // --- Search (search)
@@ -1923,7 +1923,7 @@ export interface RayCodeEventMap extends HTMLElementEventMap {
 // --- Icon (icon)
 /** <ray-icon> setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system. */
 export declare class RayIcon extends RayElement {
-  /** Registered icon name (iconNames()). */
+  /** Registered icon name (iconNames()); "none" draws nothing, a blank that keeps the alignment (a menu item without its check). */
   name: string | undefined;
   /** xs…xl or any CSS length. Default: 1em. */
   size: string | undefined;

package/vscode.html-custom-data.json

@@ -563,6 +563,11 @@
       "name": "ray-checkbox",
       "description": "A checkbox with label, description and error. Submits value when checked.",
       "attributes": [
+        {
+          "name": "checked",
+          "description": "Current state. The checked attribute is the initial state (restored on reset).",
+          "valueSet": "v"
+        },
         {
           "name": "indeterminate",
           "description": "Mixed state; cleared on the next user change.",
@@ -646,6 +651,42 @@
               "name": "left"
             }
           ]
+        },
+        {
+          "name": "radius",
+          "description": "Corner radius.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "full"
+            }
+          ]
+        },
+        {
+          "name": "description-position",
+          "description": "Description before or after the control.",
+          "values": [
+            {
+              "name": "above"
+            },
+            {
+              "name": "below"
+            }
+          ]
         }
       ]
     },
@@ -653,6 +694,10 @@
       "name": "ray-checkbox-group",
       "description": "The group is the form control: one entry per checked value under name (like checkboxes sharing a name); the checkboxes inside lose their own name. It stops their change events and fires its own. role=\"group\" named by its label.",
       "attributes": [
+        {
+          "name": "value",
+          "description": "The checked values. The value attribute: \"a,b\"."
+        },
         {
           "name": "name",
           "description": "Form field name."
@@ -918,6 +963,10 @@
       "name": "ray-combobox",
       "description": "The WAI-ARIA combobox pattern (a text field with a listbox popup; the active option is aria-activedescendant). Arrows move, Enter picks, Escape closes (then clears with clearable), Backspace in an empty field removes the last chip. The form gets one entry per value.",
       "attributes": [
+        {
+          "name": "value",
+          "description": "The chosen value; an array with multiple. The value attribute: \"a,b\" with multiple."
+        },
         {
           "name": "multiple",
           "description": "Several values, shown as chips.",
@@ -953,6 +1002,104 @@
           "name": "open",
           "description": "The dropdown is shown.",
           "valueSet": "v"
+        },
+        {
+          "name": "name",
+          "description": "Form field name."
+        },
+        {
+          "name": "label",
+          "description": "Visible label (also the accessible name)."
+        },
+        {
+          "name": "description",
+          "description": "Help text."
+        },
+        {
+          "name": "error",
+          "description": "Error text; marks the field invalid."
+        },
+        {
+          "name": "required",
+          "description": "Required for form submission.",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "Not interactive nor submitted.",
+          "valueSet": "v"
+        },
+        {
+          "name": "size",
+          "description": "Size.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            }
+          ]
+        },
+        {
+          "name": "radius",
+          "description": "Corner radius.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "full"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "Box style.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "filled"
+            },
+            {
+              "name": "unstyled"
+            }
+          ]
+        },
+        {
+          "name": "description-position",
+          "description": "Description before or after the control.",
+          "values": [
+            {
+              "name": "above"
+            },
+            {
+              "name": "below"
+            }
+          ]
         }
       ]
     },
@@ -1520,6 +1667,104 @@
           "name": "readonly",
           "description": "Not editable, still submitted.",
           "valueSet": "v"
+        },
+        {
+          "name": "name",
+          "description": "Form field name."
+        },
+        {
+          "name": "label",
+          "description": "Visible label (also the accessible name)."
+        },
+        {
+          "name": "description",
+          "description": "Help text."
+        },
+        {
+          "name": "error",
+          "description": "Error text; marks the field invalid."
+        },
+        {
+          "name": "required",
+          "description": "Required for form submission.",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "Not interactive nor submitted.",
+          "valueSet": "v"
+        },
+        {
+          "name": "size",
+          "description": "Size.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            }
+          ]
+        },
+        {
+          "name": "radius",
+          "description": "Corner radius.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "full"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "Box style.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "filled"
+            },
+            {
+              "name": "unstyled"
+            }
+          ]
+        },
+        {
+          "name": "description-position",
+          "description": "Description before or after the control.",
+          "values": [
+            {
+              "name": "above"
+            },
+            {
+              "name": "below"
+            }
+          ]
         }
       ]
     },
@@ -2044,6 +2289,11 @@
           "name": "value",
           "description": "Value given to the group when chosen."
         },
+        {
+          "name": "checked",
+          "description": "Whether this radio is the group's value; setting it sets the group's value. The checked attribute marks the group's initial value (when the group has no value attribute).",
+          "valueSet": "v"
+        },
         {
           "name": "label",
           "description": "Label text (or the content)."
@@ -2188,6 +2438,31 @@
               "name": "unstyled"
             }
           ]
+        },
+        {
+          "name": "description",
+          "description": "Help text."
+        },
+        {
+          "name": "error",
+          "description": "Error text; marks the field invalid."
+        },
+        {
+          "name": "required",
+          "description": "Required for form submission.",
+          "valueSet": "v"
+        },
+        {
+          "name": "description-position",
+          "description": "Description before or after the control.",
+          "values": [
+            {
+              "name": "above"
+            },
+            {
+              "name": "below"
+            }
+          ]
         }
       ]
     },
@@ -2366,6 +2641,30 @@
               "name": "unstyled"
             }
           ]
+        },
+        {
+          "name": "radius",
+          "description": "Corner radius.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "full"
+            }
+          ]
         }
       ]
     },
@@ -2455,6 +2754,50 @@
         {
           "name": "unit",
           "description": "Appended to the shown value and its spoken text (%, px, ms…)."
+        },
+        {
+          "name": "required",
+          "description": "Required for form submission.",
+          "valueSet": "v"
+        },
+        {
+          "name": "radius",
+          "description": "Corner radius.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "full"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "Box style.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "filled"
+            },
+            {
+              "name": "unstyled"
+            }
+          ]
         }
       ]
     },
@@ -2462,6 +2805,11 @@
       "name": "ray-switch",
       "description": "Same properties and events as ray-checkbox (indeterminate does not apply).",
       "attributes": [
+        {
+          "name": "checked",
+          "description": "Current state. The checked attribute is the initial state.",
+          "valueSet": "v"
+        },
         {
           "name": "value",
           "description": "Submitted value when on."
@@ -2545,6 +2893,42 @@
               "name": "outline"
             }
           ]
+        },
+        {
+          "name": "radius",
+          "description": "Corner radius.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "full"
+            }
+          ]
+        },
+        {
+          "name": "description-position",
+          "description": "Description before or after the control.",
+          "values": [
+            {
+              "name": "above"
+            },
+            {
+              "name": "below"
+            }
+          ]
         }
       ]
     },
@@ -2648,6 +3032,30 @@
             }
           ]
         },
+        {
+          "name": "radius",
+          "description": "Corner radius.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "full"
+            }
+          ]
+        },
         {
           "name": "placeholder",
           "description": "Placeholder text."
@@ -3464,6 +3872,10 @@
           "name": "native",
           "description": "With a native host (ray-elements/core/raylang.js in a std/ui window), opens as the system's context menu at the pointer: items and dividers, same ray-select.",
           "valueSet": "v"
+        },
+        {
+          "name": "offset",
+          "description": "Gap to the anchor in px."
         }
       ]
     },
@@ -3642,6 +4054,15 @@
           "name": "disabled",
           "description": "Never shows.",
           "valueSet": "v"
+        },
+        {
+          "name": "open",
+          "description": "Shown.",
+          "valueSet": "v"
+        },
+        {
+          "name": "offset",
+          "description": "Gap to the anchor in px."
         }
       ]
     },
@@ -4180,7 +4601,7 @@
       "attributes": [
         {
           "name": "name",
-          "description": "Registered icon name (iconNames())."
+          "description": "Registered icon name (iconNames()); \"none\" draws nothing, a blank that keeps the alignment (a menu item without its check)."
         },
         {
           "name": "size",