@raylang/elements 0.5.2 → 0.7.0

package/custom-elements.json

@@ -44,9 +44,9 @@
             {
               "name": "size",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})"
               },
-              "description": "Height, padding and font size.",
+              "description": "Height, padding and font size: xs…xl or any CSS length (the padding and the font follow).",
               "fieldName": "size",
               "default": "sm"
             },
@@ -160,9 +160,9 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})"
               },
-              "description": "Height, padding and font size.",
+              "description": "Height, padding and font size: xs…xl or any CSS length (the padding and the font follow).",
               "attribute": "size",
               "reflects": true,
               "default": "sm"
@@ -462,9 +462,9 @@
             {
               "name": "size",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})"
               },
-              "description": "Width and height.",
+              "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.",
               "fieldName": "size",
               "default": "sm"
             },
@@ -588,9 +588,9 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})"
               },
-              "description": "Width and height.",
+              "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.",
               "attribute": "size",
               "reflects": true,
               "default": "sm"
@@ -787,9 +787,9 @@
             {
               "name": "size",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})"
               },
-              "description": "Height, padding and font size.",
+              "description": "Height, padding and font size: xs…xl or any CSS length (the padding and the font follow).",
               "fieldName": "size",
               "default": "sm"
             },
@@ -933,9 +933,9 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})"
               },
-              "description": "Height, padding and font size.",
+              "description": "Height, padding and font size: xs…xl or any CSS length (the padding and the font follow).",
               "attribute": "size",
               "reflects": true,
               "default": "sm"
@@ -4877,6 +4877,15 @@
               "fieldName": "clamp",
               "default": "blur"
             },
+            {
+              "name": "format",
+              "type": {
+                "text": "\"number\" | \"duration\""
+              },
+              "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.",
+              "fieldName": "format",
+              "default": "number"
+            },
             {
               "name": "hide-controls",
               "type": {
@@ -5089,6 +5098,17 @@
               "reflects": false,
               "default": "blur"
             },
+            {
+              "kind": "field",
+              "name": "format",
+              "type": {
+                "text": "\"number\" | \"duration\""
+              },
+              "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.",
+              "attribute": "format",
+              "reflects": true,
+              "default": "number"
+            },
             {
               "kind": "field",
               "name": "hideControls",
@@ -6388,7 +6408,7 @@
             {
               "kind": "field",
               "name": "radios",
-              "description": "The radios of the group."
+              "description": "The radios (and radio cards) of the group."
             }
           ],
           "events": [
@@ -6410,7 +6430,7 @@
           "slots": [
             {
               "name": "",
-              "description": "ray-radio elements (may be wrapped in layout elements)."
+              "description": "ray-radio or ray-radio-card elements (may be wrapped in layout elements: a ray-grid of cards)."
             }
           ],
           "cssParts": []
@@ -6420,7 +6440,7 @@
           "name": "RayRadio",
           "tagName": "ray-radio",
           "customElement": true,
-          "description": "One choice among options: ray-radio elements inside a ray-radio-group, which is the form control.",
+          "description": "One choice among options: ray-radio (or ray-radio-card) elements inside a ray-radio-group, which is the form control.",
           "superclass": {
             "name": "RayElement"
           },
@@ -6586,6 +6606,200 @@
               "description": "The label."
             }
           ]
+        },
+        {
+          "kind": "class",
+          "name": "RayRadioCard",
+          "tagName": "ray-radio-card",
+          "customElement": true,
+          "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.",
+          "superclass": {
+            "name": "RayRadio"
+          },
+          "attributes": [
+            {
+              "name": "hide-indicator",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "No radio circle: the card's border and background alone show the choice.",
+              "fieldName": "hideIndicator"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "Value given to the group when chosen.",
+              "fieldName": "value"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The initial value of checked. 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)."
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "Label text (or the content).",
+              "fieldName": "label"
+            },
+            {
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "description": "Help text under the label.",
+              "fieldName": "description"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Cannot be chosen.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "description": "Overrides the group color.",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+              },
+              "description": "Overrides the group size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"filled\" | \"outline\""
+              },
+              "description": "Overrides the group variant.",
+              "fieldName": "variant"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hideIndicator",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "No radio circle: the card's border and background alone show the choice.",
+              "attribute": "hide-indicator",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "Value given to the group when chosen.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "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)."
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "Label text (or the content).",
+              "attribute": "label",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "description": "Help text under the label.",
+              "attribute": "description",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Cannot be chosen.",
+              "attribute": "disabled",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "description": "Overrides the group color.",
+              "attribute": "color",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+              },
+              "description": "Overrides the group size.",
+              "attribute": "size",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"filled\" | \"outline\""
+              },
+              "description": "Overrides the group variant.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "events": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "More content under the description."
+            },
+            {
+              "name": "icon",
+              "description": "An icon before the title."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "root",
+              "description": "The card."
+            },
+            {
+              "name": "icon",
+              "description": "Around the icon slot."
+            }
+          ]
         }
       ],
       "exports": [
@@ -6620,6 +6834,22 @@
             "name": "RayRadio",
             "module": "components/radio/radio.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "RayRadioCard",
+          "declaration": {
+            "name": "RayRadioCard",
+            "module": "components/radio/radio.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ray-radio-card",
+          "declaration": {
+            "name": "RayRadioCard",
+            "module": "components/radio/radio.js"
+          }
         }
       ]
     },
@@ -8911,9 +9141,9 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
-              "description": "An icon of the registry (or put one in the icon slot).",
+              "description": "An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is).",
               "fieldName": "icon"
             },
             {
@@ -8990,9 +9220,9 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
-              "description": "An icon of the registry (or put one in the icon slot).",
+              "description": "An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is).",
               "attribute": "icon",
               "reflects": false
             },
@@ -13767,7 +13997,7 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Registry icon of the mark, or none. The icon slot replaces it.",
               "fieldName": "icon",
@@ -13853,7 +14083,7 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Registry icon of the mark, or none. The icon slot replaces it.",
               "attribute": "icon",
@@ -14614,7 +14844,7 @@
           "name": "RayIcon",
           "tagName": "ray-icon",
           "customElement": true,
-          "description": "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.",
+          "description": "setIcons({ name: '<svg…>' }) replaces or adds icons (SVG markup or an SVGElement, drawn with currentColor); iconNames() lists them. An icon may have a filled version for a state (filled; \"<name>:filled\" in setIcons; iconNames({ filled: true }) lists them). The components draw roles (\"ui.close\", \"ui.remove\", \"ui.expand\"…; iconAliases()), each its glyph until the app registers the role: setIcons({ \"ui.remove\": … }) changes only the chips' ×. Sizes follow the font unless size; --ray-icon-size and --ray-icon-stroke tune the whole system.",
           "superclass": {
             "name": "RayElement"
           },
@@ -14622,11 +14852,19 @@
             {
               "name": "name",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Registered icon name (iconNames()); \"none\" draws nothing, a blank that keeps the alignment (a menu item without its check).",
               "fieldName": "name"
             },
+            {
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle.",
+              "fieldName": "filled"
+            },
             {
               "name": "size",
               "type": {
@@ -14665,12 +14903,22 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Registered icon name (iconNames()); \"none\" draws nothing, a blank that keeps the alignment (a menu item without its check).",
               "attribute": "name",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle.",
+              "attribute": "filled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -15769,7 +16017,7 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "An icon of the registry in the bullet.",
               "fieldName": "icon"
@@ -15817,7 +16065,7 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "An icon of the registry in the bullet.",
               "attribute": "icon",
@@ -15965,7 +16213,7 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "A registered icon name, or none.",
               "fieldName": "icon"
@@ -16034,7 +16282,7 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "A registered icon name, or none.",
               "attribute": "icon",
@@ -16253,7 +16501,7 @@
             {
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Status icon from the registry (default: from the color); \"none\" for no icon.",
               "fieldName": "icon"
@@ -16316,7 +16564,7 @@
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "string"
+                "text": "IconName"
               },
               "description": "Status icon from the registry (default: from the color); \"none\" for no icon.",
               "attribute": "icon",
@@ -16849,36 +17097,243 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/skeleton/skeleton.js",
+      "path": "components/ring-progress/ring-progress.js",
       "declarations": [
         {
           "kind": "class",
-          "name": "RaySkeleton",
-          "tagName": "ray-skeleton",
+          "name": "RayRingProgress",
+          "tagName": "ray-ring-progress",
           "customElement": true,
-          "description": "aria-busy=\"true\" on the host while loading; the placeholder is aria-hidden.",
+          "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.",
           "superclass": {
             "name": "RayElement"
           },
           "attributes": [
             {
-              "name": "width",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "Width (CSS length, a number is px). Default: 100% (a circle: 2.5rem).",
-              "fieldName": "width"
+              "description": "Progress, from 0 to max. Unset: indeterminate (a spinning arc).",
+              "fieldName": "value"
             },
             {
-              "name": "height",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "Height of a block or of each line (CSS length, a number is px). Default: 1rem.",
-              "fieldName": "height"
+              "description": "The value of a full ring.",
+              "fieldName": "max",
+              "default": "100"
             },
             {
-              "name": "circle",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "description": "A palette color or any CSS color. Default: the primary color.",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})"
+              },
+              "description": "Diameter: xs…xl (3, 5, 7.5, 10, 12.5rem) or any CSS length.",
+              "fieldName": "size",
+              "default": "md"
+            },
+            {
+              "name": "thickness",
+              "type": {
+                "text": "string"
+              },
+              "description": "Width of the ring: a CSS length (a bare number is px). Default: a tenth of the diameter.",
+              "fieldName": "thickness"
+            },
+            {
+              "name": "round-caps",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Rounded ends of the arc.",
+              "fieldName": "roundCaps"
+            },
+            {
+              "name": "show-value",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Shows the percentage in the middle (when the default slot is empty).",
+              "fieldName": "showValue"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "Accessible name (default: Progress).",
+              "fieldName": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "description": "Progress, from 0 to max. Unset: indeterminate (a spinning arc).",
+              "attribute": "value",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "description": "The value of a full ring.",
+              "attribute": "max",
+              "reflects": false,
+              "default": "100"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "description": "A palette color or any CSS color. Default: the primary color.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})"
+              },
+              "description": "Diameter: xs…xl (3, 5, 7.5, 10, 12.5rem) or any CSS length.",
+              "attribute": "size",
+              "reflects": true,
+              "default": "md"
+            },
+            {
+              "kind": "field",
+              "name": "thickness",
+              "type": {
+                "text": "string"
+              },
+              "description": "Width of the ring: a CSS length (a bare number is px). Default: a tenth of the diameter.",
+              "attribute": "thickness",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "roundCaps",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Rounded ends of the arc.",
+              "attribute": "round-caps",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "showValue",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Shows the percentage in the middle (when the default slot is empty).",
+              "attribute": "show-value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "Accessible name (default: Progress).",
+              "attribute": "label",
+              "reflects": false
+            }
+          ],
+          "events": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The middle of the ring (a clock, a figure, an icon); its font scales with size."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "track",
+              "description": "The background circle."
+            },
+            {
+              "name": "bar",
+              "description": "The arc."
+            },
+            {
+              "name": "center",
+              "description": "The middle, around the default slot."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RayRingProgress",
+          "declaration": {
+            "name": "RayRingProgress",
+            "module": "components/ring-progress/ring-progress.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ray-ring-progress",
+          "declaration": {
+            "name": "RayRingProgress",
+            "module": "components/ring-progress/ring-progress.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/skeleton/skeleton.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "RaySkeleton",
+          "tagName": "ray-skeleton",
+          "customElement": true,
+          "description": "aria-busy=\"true\" on the host while loading; the placeholder is aria-hidden.",
+          "superclass": {
+            "name": "RayElement"
+          },
+          "attributes": [
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "description": "Width (CSS length, a number is px). Default: 100% (a circle: 2.5rem).",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "description": "Height of a block or of each line (CSS length, a number is px). Default: 1rem.",
+              "fieldName": "height"
+            },
+            {
+              "name": "circle",
               "type": {
                 "text": "boolean"
               },
@@ -17134,6 +17589,208 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/step-dots/step-dots.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "RayStepDots",
+          "tagName": "ray-step-dots",
+          "customElement": true,
+          "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.",
+          "superclass": {
+            "name": "RayElement"
+          },
+          "attributes": [
+            {
+              "name": "count",
+              "type": {
+                "text": "number"
+              },
+              "description": "Number of steps (dots).",
+              "fieldName": "count",
+              "default": "0"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "description": "The current step, 0-based; count means every step is done.",
+              "fieldName": "value",
+              "default": "0"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "description": "A palette color or any CSS color for done and current dots. Default: the primary color.",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+              },
+              "description": "Size of a dot.",
+              "fieldName": "size",
+              "default": "sm"
+            },
+            {
+              "name": "align",
+              "type": {
+                "text": "\"start\" | \"center\" | \"end\""
+              },
+              "description": "Where the row sits in its width.",
+              "fieldName": "align",
+              "default": "center"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "What a step is called: \"Round\" is announced \"Round 4 of 12\" and names the element. Default: Step (named Steps). In another language, use value-text.",
+              "fieldName": "label"
+            },
+            {
+              "name": "value-text",
+              "type": {
+                "text": "string"
+              },
+              "description": "The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text=\"Asalto {step} de {count}\". Default: \"<label> {step} of {count}\".",
+              "fieldName": "valueText"
+            },
+            {
+              "name": "done-text",
+              "type": {
+                "text": "string"
+              },
+              "description": "The announced text once every step is done (value = count), with {count}. Default: value-text, else \"{count} of {count}, done\".",
+              "fieldName": "doneText"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "count",
+              "type": {
+                "text": "number"
+              },
+              "description": "Number of steps (dots).",
+              "attribute": "count",
+              "reflects": false,
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "description": "The current step, 0-based; count means every step is done.",
+              "attribute": "value",
+              "reflects": false,
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "description": "A palette color or any CSS color for done and current dots. Default: the primary color.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+              },
+              "description": "Size of a dot.",
+              "attribute": "size",
+              "reflects": true,
+              "default": "sm"
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "\"start\" | \"center\" | \"end\""
+              },
+              "description": "Where the row sits in its width.",
+              "attribute": "align",
+              "reflects": true,
+              "default": "center"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "What a step is called: \"Round\" is announced \"Round 4 of 12\" and names the element. Default: Step (named Steps). In another language, use value-text.",
+              "attribute": "label",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "valueText",
+              "type": {
+                "text": "string"
+              },
+              "description": "The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text=\"Asalto {step} de {count}\". Default: \"<label> {step} of {count}\".",
+              "attribute": "value-text",
+              "reflects": false
+            },
+            {
+              "kind": "field",
+              "name": "doneText",
+              "type": {
+                "text": "string"
+              },
+              "description": "The announced text once every step is done (value = count), with {count}. Default: value-text, else \"{count} of {count}, done\".",
+              "attribute": "done-text",
+              "reflects": false
+            }
+          ],
+          "events": [],
+          "slots": [],
+          "cssParts": [
+            {
+              "name": "dots",
+              "description": "The row."
+            },
+            {
+              "name": "dot",
+              "description": "Each dot ([data-state] done, current or todo)."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RayStepDots",
+          "declaration": {
+            "name": "RayStepDots",
+            "module": "components/step-dots/step-dots.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ray-step-dots",
+          "declaration": {
+            "name": "RayStepDots",
+            "module": "components/step-dots/step-dots.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/app-bar/app-bar.js",