@raylang/elements 0.5.1 → 0.6.0

package/vscode.html-custom-data.json

@@ -45,24 +45,7 @@
         },
         {
           "name": "size",
-          "description": "Height, padding and font size.",
-          "values": [
-            {
-              "name": "xs"
-            },
-            {
-              "name": "sm"
-            },
-            {
-              "name": "md"
-            },
-            {
-              "name": "lg"
-            },
-            {
-              "name": "xl"
-            }
-          ]
+          "description": "Height, padding and font size: xs…xl or any CSS length (the padding and the font follow)."
         },
         {
           "name": "radius",
@@ -211,24 +194,7 @@
         },
         {
           "name": "size",
-          "description": "Width and height.",
-          "values": [
-            {
-              "name": "xs"
-            },
-            {
-              "name": "sm"
-            },
-            {
-              "name": "md"
-            },
-            {
-              "name": "lg"
-            },
-            {
-              "name": "xl"
-            }
-          ]
+          "description": "Width and height: xs…xl or any CSS length (\"5.5rem\": a big main action, round with radius=full); the icon scales with it."
         },
         {
           "name": "disabled",
@@ -351,24 +317,7 @@
         },
         {
           "name": "size",
-          "description": "Height, padding and font size.",
-          "values": [
-            {
-              "name": "xs"
-            },
-            {
-              "name": "sm"
-            },
-            {
-              "name": "md"
-            },
-            {
-              "name": "lg"
-            },
-            {
-              "name": "xl"
-            }
-          ]
+          "description": "Height, padding and font size: xs…xl or any CSS length (the padding and the font follow)."
         },
         {
           "name": "radius",
@@ -563,6 +512,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 +600,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 +643,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 +912,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 +951,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"
+            }
+          ]
         }
       ]
     },
@@ -1507,6 +1603,18 @@
             }
           ]
         },
+        {
+          "name": "format",
+          "description": "duration: the value is seconds, shown and typed as m:ss (h:mm:ss when min or max reaches an hour; a plain number is seconds); aria-valuetext says \"3 minutes, 15 seconds\" in the page's language. decimals, prefix, suffix and the separators do not apply.",
+          "values": [
+            {
+              "name": "number"
+            },
+            {
+              "name": "duration"
+            }
+          ]
+        },
         {
           "name": "hide-controls",
           "description": "No + and − buttons (the keys still step).",
@@ -1520,6 +1628,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"
+            }
+          ]
         }
       ]
     },
@@ -2018,13 +2224,78 @@
             }
           ]
         },
-        {
-          "name": "color",
-          "description": "Checked color of every radio."
-        },
+        {
+          "name": "color",
+          "description": "Checked color of every radio."
+        },
+        {
+          "name": "variant",
+          "description": "Checked look of every radio: filled circle, or colored ring and dot.",
+          "values": [
+            {
+              "name": "filled"
+            },
+            {
+              "name": "outline"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "ray-radio",
+      "description": "One choice among options: ray-radio (or ray-radio-card) elements inside a ray-radio-group, which is the form control.",
+      "attributes": [
+        {
+          "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)."
+        },
+        {
+          "name": "description",
+          "description": "Help text under the label."
+        },
+        {
+          "name": "disabled",
+          "description": "Cannot be chosen.",
+          "valueSet": "v"
+        },
+        {
+          "name": "color",
+          "description": "Overrides the group color."
+        },
+        {
+          "name": "size",
+          "description": "Overrides the group size.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            }
+          ]
+        },
         {
           "name": "variant",
-          "description": "Checked look of every radio: filled circle, or colored ring and dot.",
+          "description": "Overrides the group variant.",
           "values": [
             {
               "name": "filled"
@@ -2037,13 +2308,23 @@
       ]
     },
     {
-      "name": "ray-radio",
-      "description": "One choice among options: ray-radio elements inside a ray-radio-group, which is the form control.",
+      "name": "ray-radio-card",
+      "description": "A radio drawn as a card: a title (label), a detail (description), an icon, more content; checked, it takes the color's border and light background. Inside a ray-radio-group like a ray-radio (arrow keys, the form, required, disabled); put the cards in a ray-grid for columns.",
       "attributes": [
+        {
+          "name": "hide-indicator",
+          "description": "No radio circle: the card's border and background alone show the choice.",
+          "valueSet": "v"
+        },
         {
           "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 +2469,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 +2672,30 @@
               "name": "unstyled"
             }
           ]
+        },
+        {
+          "name": "radius",
+          "description": "Corner radius.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            },
+            {
+              "name": "full"
+            }
+          ]
         }
       ]
     },
@@ -2455,6 +2785,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 +2836,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 +2924,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 +3063,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 +3903,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 +4085,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 +4632,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",
@@ -4768,6 +5220,46 @@
         }
       ]
     },
+    {
+      "name": "ray-ring-progress",
+      "description": "The arc starts at 12 o'clock and runs clockwise; a countdown is a value that goes down. Without value it spins (indeterminate). The middle holds the default slot (a clock), or the percentage with show-value.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "Progress, from 0 to max. Unset: indeterminate (a spinning arc)."
+        },
+        {
+          "name": "max",
+          "description": "The value of a full ring."
+        },
+        {
+          "name": "color",
+          "description": "A palette color or any CSS color. Default: the primary color."
+        },
+        {
+          "name": "size",
+          "description": "Diameter: xs…xl (3, 5, 7.5, 10, 12.5rem) or any CSS length."
+        },
+        {
+          "name": "thickness",
+          "description": "Width of the ring: a CSS length (a bare number is px). Default: a tenth of the diameter."
+        },
+        {
+          "name": "round-caps",
+          "description": "Rounded ends of the arc.",
+          "valueSet": "v"
+        },
+        {
+          "name": "show-value",
+          "description": "Shows the percentage in the middle (when the default slot is empty).",
+          "valueSet": "v"
+        },
+        {
+          "name": "label",
+          "description": "Accessible name (default: Progress)."
+        }
+      ]
+    },
     {
       "name": "ray-skeleton",
       "description": "aria-busy=\"true\" on the host while loading; the placeholder is aria-hidden.",
@@ -4850,6 +5342,64 @@
         }
       ]
     },
+    {
+      "name": "ray-step-dots",
+      "description": "Dots before value are done (filled), the one at value is current (a filled pill), the rest are to do (empty). Not interactive: for steps the user picks, use ray-stepper (or the dots of ray-carousel). Many dots wrap onto more lines.",
+      "attributes": [
+        {
+          "name": "count",
+          "description": "Number of steps (dots)."
+        },
+        {
+          "name": "value",
+          "description": "The current step, 0-based; count means every step is done."
+        },
+        {
+          "name": "color",
+          "description": "A palette color or any CSS color for done and current dots. Default: the primary color."
+        },
+        {
+          "name": "size",
+          "description": "Size of a dot.",
+          "values": [
+            {
+              "name": "xs"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            },
+            {
+              "name": "xl"
+            }
+          ]
+        },
+        {
+          "name": "align",
+          "description": "Where the row sits in its width.",
+          "values": [
+            {
+              "name": "start"
+            },
+            {
+              "name": "center"
+            },
+            {
+              "name": "end"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "What a step is called: \"Round\" is announced \"Round 4 of 12\" and names the element. Default: Step (named Steps)."
+        }
+      ]
+    },
     {
       "name": "ray-app-bar",
       "description": "It follows the scroller of its ray-app-shell, else scroll-target, else the window; clear of the notch (safe-area inset). The title is plain text: put a heading in the default slot when the page needs one.",