@raylang/elements 0.5.2 → 0.6.0

package/index.js

@@ -19,7 +19,7 @@ export { RayInput } from "./components/input/input.js";
 export { RayNumberInput, parseNumber, formatNumber } from "./components/number-input/number-input.js";
 export { RayPasswordInput } from "./components/password-input/password-input.js";
 export { RayPathInput, dirName, baseName } from "./components/path-input/path-input.js";
-export { RayRadioGroup, RayRadio } from "./components/radio/radio.js";
+export { RayRadioGroup, RayRadio, RayRadioCard } from "./components/radio/radio.js";
 export { RaySearch } from "./components/search/search.js";
 export { RaySegmentedControl } from "./components/segmented-control/segmented-control.js";
 export { RaySelect } from "./components/select/select.js";
@@ -56,8 +56,10 @@ export { RayAlert } from "./components/alert/alert.js";
 export { RayEmptyState } from "./components/empty-state/empty-state.js";
 export { RayNotification, RayToaster, notify, updateNotification, hideNotification, clearNotifications, statusIcon } from "./components/notification/notification.js";
 export { RayProgress } from "./components/progress/progress.js";
+export { RayRingProgress } from "./components/ring-progress/ring-progress.js";
 export { RaySkeleton } from "./components/skeleton/skeleton.js";
 export { RaySpinner } from "./components/spinner/spinner.js";
+export { RayStepDots } from "./components/step-dots/step-dots.js";
 export { RayAppBar } from "./components/app-bar/app-bar.js";
 export { RayAppShell } from "./components/app-shell/app-shell.js";
 export { RayAspectRatio, parseRatio } from "./components/aspect-ratio/aspect-ratio.js";

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.2.
+> 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.6.0.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
@@ -292,7 +292,7 @@ Properties:
 - `variant`: `filled` | `light` | `outline` | `subtle` | `default` | `transparent` | `gradient` | `raised`, default `filled`, reflects. Visual style. raised: a physical key on a darker edge that sinks when pressed (mouse, touch or keyboard).
 - `gradient`: string, reflects. With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens.
 - `color`: string. A palette color (blue, red…) or any CSS color. Default: the primary color.
-- `size`: `xs` | `sm` | `md` | `lg` | `xl`, default `sm`, reflects. Height, padding and font size.
+- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | (string & {})`, default `sm`, reflects. Height, padding and font size: xs…xl or any CSS length (the padding and the font follow).
 - `radius`: `xs` | `sm` | `md` | `lg` | `xl` | `full`. Corner radius. Default: --ray-radius-default.
 - `type`: `button` | `submit` | `reset`, default `button`. submit/reset act on the enclosing form.
 - `disabled`: boolean. Not interactive (also when inside a disabled fieldset).
@@ -354,7 +354,7 @@ Properties:
 - `variant`: `filled` | `light` | `outline` | `subtle` | `default` | `transparent` | `gradient` | `raised`, default `subtle`, reflects. Visual style.
 - `gradient`: string, reflects. With variant=gradient: "from to [deg]", palette colors or CSS colors ("teal blue 90"). Default: the --ray-gradient-* tokens.
 - `color`: string. A palette color or any CSS color.
-- `size`: `xs` | `sm` | `md` | `lg` | `xl`, default `sm`, reflects. Width and height.
+- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | (string & {})`, default `sm`, reflects. Width and height: xs…xl or any CSS length ("5.5rem": a big main action, round with radius=full); the icon scales with it.
 - `disabled`: boolean. Not interactive.
 - `loading`: boolean. Shows a spinner instead of the icon.
 
@@ -911,7 +911,7 @@ Vue `v-model`: `value` (updated on input).
 
 ### Number input
 
-A number field (Mantine's NumberInput): + and − buttons (hold to repeat), arrow keys, min, max and step, fixed decimals, a prefix and a suffix, a thousands separator. An ARIA spinbutton.
+A number field (Mantine's NumberInput): + and − buttons (hold to repeat), arrow keys, min, max and step, fixed decimals, a prefix and a suffix, a thousands separator, or a duration (m:ss). An ARIA spinbutton.
 
 Import: `import "@raylang/elements/number-input";` · Category: Inputs
 
@@ -931,6 +931,7 @@ Properties:
 - `thousandsSeparator` (attribute `thousands-separator`): string. Groups thousands in the shown text (",", ".", " ").
 - `decimalSeparator` (attribute `decimal-separator`): string, default `.`. The decimal mark shown and typed ("," in many locales).
 - `clamp`: `blur` | `strict` | `none`, default `blur`. When out-of-range input is clamped: on blur, while typing, or never (then it is invalid).
+- `format`: `number` | `duration`, default `number`, reflects. 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.
 - `hideControls` (attribute `hide-controls`): boolean, reflects. No + and − buttons (the keys still step).
 - `placeholder`: string. Shown while empty.
 - `readonly`: boolean, reflects. Not editable, still submitted.
@@ -1052,7 +1053,7 @@ for e in ui.events() {
 
 ### Radio group
 
-One choice among options: ray-radio elements inside a ray-radio-group, which is the form control.
+One choice among options: ray-radio (or ray-radio-card) elements inside a ray-radio-group, which is the form control.
 
 Import: `import "@raylang/elements/radio";` · Category: Inputs
 
@@ -1082,11 +1083,11 @@ Events:
 
 Slots:
 
-- (default): ray-radio elements (may be wrapped in layout elements).
+- (default): ray-radio or ray-radio-card elements (may be wrapped in layout elements: a ray-grid of cards).
 
 Methods and properties:
 
-- `readonly radios: RayRadio[]`: The radios of the group.
+- `readonly radios: RayRadio[]`: The radios (and radio cards) of the group.
 
 Vue `v-model`: `value` (updated on change).
 
@@ -1112,6 +1113,26 @@ Parts (`::part()`):
 - `indicator`: The circle.
 - `label`: The label.
 
+#### `<ray-radio-card>` (RayRadioCard, extends RayRadio)
+
+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.
+
+Properties:
+
+- `hideIndicator` (attribute `hide-indicator`): boolean, reflects. No radio circle: the card's border and background alone show the choice.
+
+Also the properties of RayRadio (`<ray-radio>`): `value`, `checked`, `label`, `description`, `disabled`, `color`, `size`, `variant`.
+
+Slots:
+
+- (default): More content under the description.
+- `icon`: An icon before the title.
+
+Parts (`::part()`):
+
+- `root`: The card.
+- `icon`: Around the icon slot.
+
 ### 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.
@@ -2777,6 +2798,37 @@ Parts (`::part()`):
 - `bar`: The filled bar.
 - `value`: The percentage beside the bar (show-value on xs, sm, md).
 
+### Ring progress
+
+Progress as a ring (Mantine's RingProgress), with content in the middle: a countdown, a goal, an upload. Announced as a progressbar.
+
+Import: `import "@raylang/elements/ring-progress";` · Category: Feedback
+
+#### `<ray-ring-progress>` (RayRingProgress, extends RayElement)
+
+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.
+
+Properties:
+
+- `value`: number. Progress, from 0 to max. Unset: indeterminate (a spinning arc).
+- `max`: number, default `100`. The value of a full ring.
+- `color`: string, reflects. A palette color or any CSS color. Default: the primary color.
+- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | (string & {})`, default `md`, reflects. Diameter: xs…xl (3, 5, 7.5, 10, 12.5rem) or any CSS length.
+- `thickness`: string, reflects. Width of the ring: a CSS length (a bare number is px). Default: a tenth of the diameter.
+- `roundCaps` (attribute `round-caps`): boolean, reflects. Rounded ends of the arc.
+- `showValue` (attribute `show-value`): boolean, reflects. Shows the percentage in the middle (when the default slot is empty).
+- `label`: string. Accessible name (default: Progress).
+
+Slots:
+
+- (default): The middle of the ring (a clock, a figure, an icon); its font scales with size.
+
+Parts (`::part()`):
+
+- `track`: The background circle.
+- `bar`: The arc.
+- `center`: The middle, around the default slot.
+
 ### Skeleton
 
 A placeholder while content loads: a shimmering block, a circle or text lines; with loaded it shows its content.
@@ -2824,6 +2876,30 @@ Parts (`::part()`):
 
 - `spinner`: The ring.
 
+### Step dots
+
+A row of dots, one per step: done, current, to do. A compact progress for rounds, onboarding pages or a quiz; announced as a progressbar ("Round 4 of 12").
+
+Import: `import "@raylang/elements/step-dots";` · Category: Feedback
+
+#### `<ray-step-dots>` (RayStepDots, extends RayElement)
+
+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.
+
+Properties:
+
+- `count`: number, default `0`. Number of steps (dots).
+- `value`: number, default `0`. The current step, 0-based; count means every step is done.
+- `color`: string, reflects. A palette color or any CSS color for done and current dots. Default: the primary color.
+- `size`: `xs` | `sm` | `md` | `lg` | `xl`, default `sm`, reflects. Size of a dot.
+- `align`: `start` | `center` | `end`, default `center`, reflects. Where the row sits in its width.
+- `label`: string. What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps).
+
+Parts (`::part()`):
+
+- `dots`: The row.
+- `dot`: Each dot ([data-state] done, current or todo).
+
 ### App bar
 
 The top bar of a phone screen (Material's top app bar, the iOS navigation bar): back or menu, a title and subtitle, actions, and an optional row under it. It elevates once the content scrolls, or hides while scrolling down.

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.2.
+> 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.6.0.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
@@ -268,10 +268,10 @@ Members whose name starts with `_` are internal.
 - [Date picker](https://elements.raylang.dev/components/date-picker.md): `<ray-date-picker>`, `<ray-calendar>` (Inputs). A date field with a calendar dropdown, and the calendar on its own.
 - [File upload](https://elements.raylang.dev/components/file-upload.md): `<ray-file-upload>` (Inputs). A drop zone to pick files: drag, click, keyboard or paste.
 - [Input](https://elements.raylang.dev/components/input.md): `<ray-input>` (Inputs). A text field with label, description and error (Mantine's TextInput).
-- [Number input](https://elements.raylang.dev/components/number-input.md): `<ray-number-input>` (Inputs). A number field (Mantine's NumberInput): + and − buttons (hold to repeat), arrow keys, min, max and step, fixed decimals, a prefix and a suffix, a thousands separator.
+- [Number input](https://elements.raylang.dev/components/number-input.md): `<ray-number-input>` (Inputs). A number field (Mantine's NumberInput): + and − buttons (hold to repeat), arrow keys, min, max and step, fixed decimals, a prefix and a suffix, a thousands separator, or a duration (m:ss).
 - [Password input](https://elements.raylang.dev/components/password-input.md): `<ray-password-input>` (Inputs). A password field with a button that shows or hides what was typed (Mantine's PasswordInput).
 - [Path input](https://elements.raylang.dev/components/path-input.md): `<ray-path-input>` (Inputs). A field for a path on disk: a file to open, a folder, or where to save.
-- [Radio group](https://elements.raylang.dev/components/radio.md): `<ray-radio-group>`, `<ray-radio>` (Inputs). One choice among options: ray-radio elements inside a ray-radio-group, which is the form control.
+- [Radio group](https://elements.raylang.dev/components/radio.md): `<ray-radio-group>`, `<ray-radio>`, `<ray-radio-card>` (Inputs). One choice among options: ray-radio (or ray-radio-card) elements inside a ray-radio-group, which is the form control.
 - [Search](https://elements.raylang.dev/components/search.md): `<ray-search>` (Inputs). A search box: icon, clear button, an optional shortcut that focuses it, and a debounced ray-search event.
 - [Segmented control](https://elements.raylang.dev/components/segmented-control.md): `<ray-segmented-control>` (Inputs). One choice among a few, as a segmented row with a sliding indicator.
 - [Select](https://elements.raylang.dev/components/select.md): `<ray-select>` (Inputs). A select with its own dropdown (keyboard, typeahead, groups); options from child <option> elements or the data property.
@@ -308,8 +308,10 @@ Members whose name starts with `_` are internal.
 - [Empty state](https://elements.raylang.dev/components/empty-state.md): `<ray-empty-state>` (Feedback). What a list, table or pane shows when it is empty: icon, title, text and the action that fills it.
 - [Notification](https://elements.raylang.dev/components/notification.md): `<ray-notification>`, `<ray-toaster>` (Feedback). Toasts: notify(), updateNotification(), hideNotification(), clearNotifications(); shown in a ray-toaster (a polite live region in the top layer).
 - [Progress](https://elements.raylang.dev/components/progress.md): `<ray-progress>` (Feedback). A determinate or (without value) indeterminate progress bar, announced as a progressbar.
+- [Ring progress](https://elements.raylang.dev/components/ring-progress.md): `<ray-ring-progress>` (Feedback). Progress as a ring (Mantine's RingProgress), with content in the middle: a countdown, a goal, an upload.
 - [Skeleton](https://elements.raylang.dev/components/skeleton.md): `<ray-skeleton>` (Feedback). A placeholder while content loads: a shimmering block, a circle or text lines; with loaded it shows its content.
 - [Spinner](https://elements.raylang.dev/components/spinner.md): `<ray-spinner>` (Feedback). An indeterminate loading indicator, announced as a status.
+- [Step dots](https://elements.raylang.dev/components/step-dots.md): `<ray-step-dots>` (Feedback). A row of dots, one per step: done, current, to do.
 - [App bar](https://elements.raylang.dev/components/app-bar.md): `<ray-app-bar>` (Layout). The top bar of a phone screen (Material's top app bar, the iOS navigation bar): back or menu, a title and subtitle, actions, and an optional row under it.
 - [App shell](https://elements.raylang.dev/components/app-shell.md): `<ray-app-shell>` (Layout). The frame of an app (Mantine's AppShell): header, navbar, main, aside and footer on wide screens; on phones one column with a bottom bar.
 - [Aspect ratio](https://elements.raylang.dev/components/aspect-ratio.md): `<ray-aspect-ratio>` (Layout). A box with a fixed width/height ratio; its image, video or iframe fills it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/elements",
-  "version": "0.5.2",
+  "version": "0.6.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"],
@@ -244,6 +244,10 @@
       "types": "./ray-elements.d.ts",
       "default": "./components/progress/progress.js"
     },
+    "./ring-progress": {
+      "types": "./ray-elements.d.ts",
+      "default": "./components/ring-progress/ring-progress.js"
+    },
     "./skeleton": {
       "types": "./ray-elements.d.ts",
       "default": "./components/skeleton/skeleton.js"
@@ -252,6 +256,10 @@
       "types": "./ray-elements.d.ts",
       "default": "./components/spinner/spinner.js"
     },
+    "./step-dots": {
+      "types": "./ray-elements.d.ts",
+      "default": "./components/step-dots/step-dots.js"
+    },
     "./app-bar": {
       "types": "./ray-elements.d.ts",
       "default": "./components/app-bar/app-bar.js"

package/ray-elements.d.ts

@@ -361,8 +361,8 @@ export declare class RayButton extends RayElement {
   gradient: string | undefined;
   /** A palette color (blue, red…) or any CSS color. Default: the primary color. */
   color: string | undefined;
-  /** Height, padding and font size. */
-  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Height, padding and font size: xs…xl or any CSS length (the padding and the font follow). */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | (string & {});
   /** Corner radius. Default: --ray-radius-default. */
   radius: "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   /** submit/reset act on the enclosing form. */
@@ -407,8 +407,8 @@ export declare class RayIconButton extends RayButton {
   gradient: string | undefined;
   /** A palette color or any CSS color. */
   color: string | undefined;
-  /** Width and height. */
-  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Width and height: xs…xl or any CSS length ("5.5rem": a big main action, round with radius=full); the icon scales with it. */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | (string & {});
   /** Not interactive. */
   disabled: boolean | undefined;
   /** Shows a spinner instead of the icon. */
@@ -865,6 +865,8 @@ export declare class RayNumberInput extends FieldControl {
   decimalSeparator: string;
   /** When out-of-range input is clamped: on blur, while typing, or never (then it is invalid). */
   clamp: "blur" | "strict" | "none";
+  /** 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. */
+  format: "number" | "duration";
   /** No + and − buttons (the keys still step). */
   hideControls: boolean | undefined;
   /** Shown while empty. */
@@ -950,10 +952,10 @@ export declare class RayRadioGroup extends FormControl {
   color: string | undefined;
   /** Checked look of every radio: filled circle, or colored ring and dot. */
   variant: "filled" | "outline";
-  /** The radios of the group. */
+  /** The radios (and radio cards) of the group. */
   readonly radios: RayRadio[];
 }
-/** <ray-radio> One choice among options: ray-radio elements inside a ray-radio-group, which is the form control. */
+/** <ray-radio> One choice among options: ray-radio (or ray-radio-card) elements inside a ray-radio-group, which is the form control. */
 export declare class RayRadio extends RayElement {
   /** Value given to the group when chosen. */
   value: string | undefined;
@@ -972,6 +974,11 @@ export declare class RayRadio extends RayElement {
   /** Overrides the group variant. */
   variant: "filled" | "outline" | undefined;
 }
+/** <ray-radio-card> 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. */
+export declare class RayRadioCard extends RayRadio {
+  /** No radio circle: the card's border and background alone show the choice. */
+  hideIndicator: boolean | undefined;
+}
 
 // --- Search (search)
 /** <ray-search> Escape clears it (when it has text); Enter fires ray-search at once. JS: clear(), focus(). */
@@ -2198,6 +2205,27 @@ export declare class RayProgress extends RayElement {
   label: string | undefined;
 }
 
+// --- Ring progress (ring-progress)
+/** <ray-ring-progress> 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. */
+export declare class RayRingProgress extends RayElement {
+  /** Progress, from 0 to max. Unset: indeterminate (a spinning arc). */
+  value: number | undefined;
+  /** The value of a full ring. */
+  max: number;
+  /** A palette color or any CSS color. Default: the primary color. */
+  color: string | undefined;
+  /** Diameter: xs…xl (3, 5, 7.5, 10, 12.5rem) or any CSS length. */
+  size: "xs" | "sm" | "md" | "lg" | "xl" | (string & {});
+  /** Width of the ring: a CSS length (a bare number is px). Default: a tenth of the diameter. */
+  thickness: string | undefined;
+  /** Rounded ends of the arc. */
+  roundCaps: boolean | undefined;
+  /** Shows the percentage in the middle (when the default slot is empty). */
+  showValue: boolean | undefined;
+  /** Accessible name (default: Progress). */
+  label: string | undefined;
+}
+
 // --- Skeleton (skeleton)
 /** <ray-skeleton> aria-busy="true" on the host while loading; the placeholder is aria-hidden. */
 export declare class RaySkeleton extends RayElement {
@@ -2228,6 +2256,23 @@ export declare class RaySpinner extends RayElement {
   label: string;
 }
 
+// --- Step dots (step-dots)
+/** <ray-step-dots> 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. */
+export declare class RayStepDots extends RayElement {
+  /** Number of steps (dots). */
+  count: number;
+  /** The current step, 0-based; count means every step is done. */
+  value: number;
+  /** A palette color or any CSS color for done and current dots. Default: the primary color. */
+  color: string | undefined;
+  /** Size of a dot. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Where the row sits in its width. */
+  align: "start" | "center" | "end";
+  /** What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). */
+  label: string | undefined;
+}
+
 // --- App bar (app-bar)
 /** <ray-app-bar> 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. */
 export declare class RayAppBar extends RayElement {
@@ -2500,6 +2545,7 @@ declare global {
     "ray-path-input": RayPathInput;
     "ray-radio-group": RayRadioGroup;
     "ray-radio": RayRadio;
+    "ray-radio-card": RayRadioCard;
     "ray-search": RaySearch;
     "ray-segmented-control": RaySegmentedControl;
     "ray-select": RaySelect;
@@ -2549,8 +2595,10 @@ declare global {
     "ray-notification": RayNotification;
     "ray-toaster": RayToaster;
     "ray-progress": RayProgress;
+    "ray-ring-progress": RayRingProgress;
     "ray-skeleton": RaySkeleton;
     "ray-spinner": RaySpinner;
+    "ray-step-dots": RayStepDots;
     "ray-app-bar": RayAppBar;
     "ray-app-shell": RayAppShell;
     "ray-aspect-ratio": RayAspectRatio;

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",
@@ -1654,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).",
@@ -2283,8 +2244,78 @@
     },
     {
       "name": "ray-radio",
-      "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.",
+      "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": "Overrides the group variant.",
+          "values": [
+            {
+              "name": "filled"
+            },
+            {
+              "name": "outline"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "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."
@@ -5189,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.",
@@ -5271,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.",