@raylang/elements 0.5.1 → 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.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.6.0.
 
 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
@@ -282,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).
@@ -344,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.
 
@@ -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.
@@ -901,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
 
@@ -921,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.
@@ -1042,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
 
@@ -1072,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).
 
@@ -1085,6 +1096,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,9 +1113,25 @@ Parts (`::part()`):
 - `indicator`: The circle.
 - `label`: The label.
 
-Methods and properties:
+#### `<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:
 
-- `readonly checked: boolean`: Whether this radio is the group's value.
+- (default): More content under the description.
+- `icon`: An icon before the title.
+
+Parts (`::part()`):
+
+- `root`: The card.
+- `icon`: Around the icon slot.
 
 ### Search
 
@@ -1293,7 +1321,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 +2465,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.
@@ -2770,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.
@@ -2817,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.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.6.0.
 
 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
@@ -258,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.
@@ -298,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.1",
+  "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"],
@@ -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"
@@ -237,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"
@@ -245,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,13 +952,15 @@ 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;
+  /** 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 +973,11 @@ 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;
+}
+/** <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)
@@ -1923,7 +1930,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;
@@ -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;