@raylang/elements 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/pulse/pulse.js +140 -0
- package/custom-elements.json +200 -0
- package/index.js +1 -0
- package/llms-full.txt +27 -1
- package/llms.txt +2 -1
- package/package.json +5 -1
- package/ray-elements.d.ts +22 -0
- package/vscode.html-custom-data.json +93 -0
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
// <ray-pulse>: an indeterminate wait indicator softer than ray-spinner: up to
|
|
2
|
+
// five circles, concentric or in a row, breathing or expanding from a point.
|
|
3
|
+
// Four presets (variant); count, shape, fade and direction override them.
|
|
4
|
+
|
|
5
|
+
import { RayElement, css, define } from "../../core/core.js";
|
|
6
|
+
import { applyColor, srOnlyStyles } from "../../core/styles.js";
|
|
7
|
+
|
|
8
|
+
export const MAX_COUNT = 5;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* The presets. `scale` is where a cycle starts (1 = the circle's full size),
|
|
12
|
+
* `stagger` how much of the cycle separates one circle's phase from the next
|
|
13
|
+
* (1 = spread evenly), `core` a static dot in the middle, `row` dots side by
|
|
14
|
+
* side instead of concentric.
|
|
15
|
+
*/
|
|
16
|
+
export const PRESETS = {
|
|
17
|
+
cluster: { count: 3, shape: "filled", fade: "none", direction: "alternate", scale: 0.7, stagger: 1 },
|
|
18
|
+
breathe: { count: 2, shape: "filled", fade: "none", direction: "alternate", scale: 0.6, stagger: 0 },
|
|
19
|
+
ripple: { count: 2, shape: "ring", fade: "out", direction: "normal", scale: 0.3, stagger: 1, core: true },
|
|
20
|
+
dots: { count: 3, shape: "filled", fade: "out", direction: "alternate", scale: 0.6, stagger: 1, row: true },
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const styles = css`
|
|
24
|
+
:host {
|
|
25
|
+
display: inline-flex;
|
|
26
|
+
vertical-align: middle;
|
|
27
|
+
--_pulse: 2.25rem;
|
|
28
|
+
--_cycle: var(--ray-pulse-cycle, 1.6s);
|
|
29
|
+
--_floor: var(--ray-pulse-floor, 0.2);
|
|
30
|
+
}
|
|
31
|
+
:host([size="xs"]) { --_pulse: 1.125rem; }
|
|
32
|
+
:host([size="sm"]) { --_pulse: 1.375rem; }
|
|
33
|
+
:host([size="lg"]) { --_pulse: 2.75rem; }
|
|
34
|
+
:host([size="xl"]) { --_pulse: 3.625rem; }
|
|
35
|
+
.pulse {
|
|
36
|
+
display: inline-grid;
|
|
37
|
+
place-items: center;
|
|
38
|
+
width: var(--_pulse);
|
|
39
|
+
height: var(--_pulse);
|
|
40
|
+
color: var(--_filled);
|
|
41
|
+
}
|
|
42
|
+
.pulse.row {
|
|
43
|
+
display: inline-flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
gap: calc(var(--_pulse) * 0.16);
|
|
46
|
+
width: auto;
|
|
47
|
+
}
|
|
48
|
+
.dot {
|
|
49
|
+
grid-area: 1 / 1;
|
|
50
|
+
display: block;
|
|
51
|
+
flex: none;
|
|
52
|
+
width: var(--_w);
|
|
53
|
+
height: var(--_w);
|
|
54
|
+
border-radius: 50%;
|
|
55
|
+
background: currentColor;
|
|
56
|
+
opacity: var(--_o, 1);
|
|
57
|
+
animation: ray-pulse var(--_cycle) var(--_ease) infinite var(--_direction);
|
|
58
|
+
/* Negative: every circle is already mid-cycle on the first frame. */
|
|
59
|
+
animation-delay: calc(-1 * var(--_i) * var(--_cycle) * var(--_stagger) / var(--_n));
|
|
60
|
+
}
|
|
61
|
+
.ring > .dot { background: transparent; border: max(1.5px, calc(var(--_pulse) / 18)) solid currentColor; }
|
|
62
|
+
/* Concentric filled circles: the larger, the fainter (else they merge into one). */
|
|
63
|
+
.gradient > .dot { --_o: calc(1 - (1 - var(--_floor)) * var(--_i) / var(--_last)); }
|
|
64
|
+
.core { --_w: 28%; animation: none; opacity: 1; background: currentColor; border: 0; }
|
|
65
|
+
@keyframes ray-pulse {
|
|
66
|
+
from { transform: scale(var(--_scale)); opacity: var(--_o, 1); }
|
|
67
|
+
to { transform: scale(1); opacity: calc(var(--_o, 1) * var(--_fade-end)); }
|
|
68
|
+
}
|
|
69
|
+
@media (prefers-reduced-motion: reduce) {
|
|
70
|
+
.dot { animation-duration: calc(var(--_cycle) * 2) !important; }
|
|
71
|
+
}
|
|
72
|
+
`;
|
|
73
|
+
|
|
74
|
+
const clampCount = (n) => Math.max(1, Math.min(MAX_COUNT, Math.floor(n)));
|
|
75
|
+
|
|
76
|
+
export class RayPulse extends RayElement {
|
|
77
|
+
static properties = {
|
|
78
|
+
variant: { type: String, reflect: true, default: "cluster" },
|
|
79
|
+
count: { type: Number, reflect: true },
|
|
80
|
+
shape: { type: String, reflect: true },
|
|
81
|
+
fade: { type: String, reflect: true },
|
|
82
|
+
direction: { type: String, reflect: true },
|
|
83
|
+
color: { type: String, reflect: true },
|
|
84
|
+
size: { type: String, reflect: true, default: "md" },
|
|
85
|
+
label: { type: String, default: "Loading" },
|
|
86
|
+
};
|
|
87
|
+
static styles = [srOnlyStyles, styles];
|
|
88
|
+
static template = `<span class="pulse" part="pulse" aria-hidden="true"></span><span class="sr-only"></span>`;
|
|
89
|
+
|
|
90
|
+
connectedCallback() {
|
|
91
|
+
super.connectedCallback();
|
|
92
|
+
if (!this.hasAttribute("role")) this.setAttribute("role", "status");
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
update() {
|
|
96
|
+
const preset = PRESETS[this.variant] ?? PRESETS.cluster;
|
|
97
|
+
const n = this.count > 0 ? clampCount(this.count) : preset.count;
|
|
98
|
+
const shape = this.shape === "ring" || this.shape === "filled" ? this.shape : preset.shape;
|
|
99
|
+
// `fade` alone (an empty attribute) means out; "none" switches a preset's off.
|
|
100
|
+
const fade = this.fade == null ? preset.fade : this.fade === "none" ? "none" : "out";
|
|
101
|
+
const direction = this.direction === "normal" || this.direction === "alternate" ? this.direction : preset.direction;
|
|
102
|
+
const box = this.$(".pulse");
|
|
103
|
+
applyColor(box, this.color);
|
|
104
|
+
box.classList.toggle("row", !!preset.row);
|
|
105
|
+
box.classList.toggle("ring", shape === "ring");
|
|
106
|
+
box.classList.toggle("gradient", shape === "filled" && !preset.row);
|
|
107
|
+
const s = box.style;
|
|
108
|
+
s.setProperty("--_n", String(n));
|
|
109
|
+
s.setProperty("--_last", String(Math.max(1, n - 1)));
|
|
110
|
+
s.setProperty("--_scale", `var(--ray-pulse-scale, ${preset.scale})`);
|
|
111
|
+
s.setProperty("--_stagger", `var(--ray-pulse-stagger, ${preset.stagger})`);
|
|
112
|
+
s.setProperty("--_direction", direction);
|
|
113
|
+
s.setProperty("--_fade-end", fade === "out" ? "0" : "1");
|
|
114
|
+
s.setProperty("--_ease", direction === "normal" ? "cubic-bezier(0, 0.4, 0.5, 1)" : "ease-in-out");
|
|
115
|
+
const key = `${n}:${preset.row ? "row" : "ring"}:${preset.core ? "core" : ""}`;
|
|
116
|
+
if (box.dataset.key !== key) {
|
|
117
|
+
box.dataset.key = key;
|
|
118
|
+
const dots = [];
|
|
119
|
+
// Largest first, so the smaller ones paint on top of it.
|
|
120
|
+
for (let i = n - 1; i >= 0; i--) {
|
|
121
|
+
const dot = document.createElement("i");
|
|
122
|
+
dot.className = "dot";
|
|
123
|
+
dot.setAttribute("part", "dot");
|
|
124
|
+
dot.style.setProperty("--_i", String(i));
|
|
125
|
+
dot.style.setProperty("--_w", preset.row ? "calc(var(--_pulse) * 0.28)" : `${Math.round(((i + 1) / n) * 100)}%`);
|
|
126
|
+
dots.push(dot);
|
|
127
|
+
}
|
|
128
|
+
if (preset.core) {
|
|
129
|
+
const core = document.createElement("i");
|
|
130
|
+
core.className = "dot core";
|
|
131
|
+
core.setAttribute("part", "dot core");
|
|
132
|
+
dots.push(core);
|
|
133
|
+
}
|
|
134
|
+
box.replaceChildren(...dots);
|
|
135
|
+
}
|
|
136
|
+
this.$(".sr-only").textContent = this.label;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
define("ray-pulse", RayPulse);
|
package/custom-elements.json
CHANGED
|
@@ -18463,6 +18463,206 @@
|
|
|
18463
18463
|
}
|
|
18464
18464
|
]
|
|
18465
18465
|
},
|
|
18466
|
+
{
|
|
18467
|
+
"kind": "javascript-module",
|
|
18468
|
+
"path": "components/pulse/pulse.js",
|
|
18469
|
+
"declarations": [
|
|
18470
|
+
{
|
|
18471
|
+
"kind": "class",
|
|
18472
|
+
"name": "RayPulse",
|
|
18473
|
+
"tagName": "ray-pulse",
|
|
18474
|
+
"customElement": true,
|
|
18475
|
+
"description": "Four presets (variant), each a bundle of count, shape, fade and direction, which override it one by one. The rest is tuned with custom properties on the element: --ray-pulse-cycle (one cycle, default 1.6s; doubled with reduced motion), --ray-pulse-floor (opacity of the largest of concentric filled circles, 0 to 1, default 0.2), --ray-pulse-scale (where a cycle starts, 1 = full size; default per variant) and --ray-pulse-stagger (how much of the cycle separates the phases of the circles, 0 together to 1 spread evenly; default per variant).",
|
|
18476
|
+
"superclass": {
|
|
18477
|
+
"name": "RayElement"
|
|
18478
|
+
},
|
|
18479
|
+
"attributes": [
|
|
18480
|
+
{
|
|
18481
|
+
"name": "variant",
|
|
18482
|
+
"type": {
|
|
18483
|
+
"text": "\"cluster\" | \"breathe\" | \"ripple\" | \"dots\""
|
|
18484
|
+
},
|
|
18485
|
+
"description": "The figure: cluster (three concentric circles breathing out of phase), breathe (one dot over a halo), ripple (rings expanding from a dot) or dots (three in a row, in sequence).",
|
|
18486
|
+
"fieldName": "variant",
|
|
18487
|
+
"default": "cluster"
|
|
18488
|
+
},
|
|
18489
|
+
{
|
|
18490
|
+
"name": "count",
|
|
18491
|
+
"type": {
|
|
18492
|
+
"text": "number"
|
|
18493
|
+
},
|
|
18494
|
+
"description": "Number of circles, 1 to 5 (more are clamped). Default: the variant's.",
|
|
18495
|
+
"fieldName": "count"
|
|
18496
|
+
},
|
|
18497
|
+
{
|
|
18498
|
+
"name": "shape",
|
|
18499
|
+
"type": {
|
|
18500
|
+
"text": "\"filled\" | \"ring\""
|
|
18501
|
+
},
|
|
18502
|
+
"description": "Filled discs (concentric ones fade with size, see --ray-pulse-floor) or outlined rings. Default: the variant's.",
|
|
18503
|
+
"fieldName": "shape"
|
|
18504
|
+
},
|
|
18505
|
+
{
|
|
18506
|
+
"name": "fade",
|
|
18507
|
+
"type": {
|
|
18508
|
+
"text": "\"out\" | \"none\""
|
|
18509
|
+
},
|
|
18510
|
+
"description": "Whether a cycle ends transparent; the bare attribute means out. Default: the variant's (ripple and dots fade).",
|
|
18511
|
+
"fieldName": "fade"
|
|
18512
|
+
},
|
|
18513
|
+
{
|
|
18514
|
+
"name": "direction",
|
|
18515
|
+
"type": {
|
|
18516
|
+
"text": "\"alternate\" | \"normal\""
|
|
18517
|
+
},
|
|
18518
|
+
"description": "alternate goes there and back; normal goes one way and restarts (with fade: the ripple). Default: the variant's.",
|
|
18519
|
+
"fieldName": "direction"
|
|
18520
|
+
},
|
|
18521
|
+
{
|
|
18522
|
+
"name": "color",
|
|
18523
|
+
"type": {
|
|
18524
|
+
"text": "string"
|
|
18525
|
+
},
|
|
18526
|
+
"description": "A palette color or any CSS color. Default: the primary color.",
|
|
18527
|
+
"fieldName": "color"
|
|
18528
|
+
},
|
|
18529
|
+
{
|
|
18530
|
+
"name": "size",
|
|
18531
|
+
"type": {
|
|
18532
|
+
"text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
|
|
18533
|
+
},
|
|
18534
|
+
"description": "Height of the figure (the dots variant is wider).",
|
|
18535
|
+
"fieldName": "size",
|
|
18536
|
+
"default": "md"
|
|
18537
|
+
},
|
|
18538
|
+
{
|
|
18539
|
+
"name": "label",
|
|
18540
|
+
"type": {
|
|
18541
|
+
"text": "string"
|
|
18542
|
+
},
|
|
18543
|
+
"description": "Text read by screen readers.",
|
|
18544
|
+
"fieldName": "label",
|
|
18545
|
+
"default": "Loading"
|
|
18546
|
+
}
|
|
18547
|
+
],
|
|
18548
|
+
"members": [
|
|
18549
|
+
{
|
|
18550
|
+
"kind": "field",
|
|
18551
|
+
"name": "variant",
|
|
18552
|
+
"type": {
|
|
18553
|
+
"text": "\"cluster\" | \"breathe\" | \"ripple\" | \"dots\""
|
|
18554
|
+
},
|
|
18555
|
+
"description": "The figure: cluster (three concentric circles breathing out of phase), breathe (one dot over a halo), ripple (rings expanding from a dot) or dots (three in a row, in sequence).",
|
|
18556
|
+
"attribute": "variant",
|
|
18557
|
+
"reflects": true,
|
|
18558
|
+
"default": "cluster"
|
|
18559
|
+
},
|
|
18560
|
+
{
|
|
18561
|
+
"kind": "field",
|
|
18562
|
+
"name": "count",
|
|
18563
|
+
"type": {
|
|
18564
|
+
"text": "number"
|
|
18565
|
+
},
|
|
18566
|
+
"description": "Number of circles, 1 to 5 (more are clamped). Default: the variant's.",
|
|
18567
|
+
"attribute": "count",
|
|
18568
|
+
"reflects": true
|
|
18569
|
+
},
|
|
18570
|
+
{
|
|
18571
|
+
"kind": "field",
|
|
18572
|
+
"name": "shape",
|
|
18573
|
+
"type": {
|
|
18574
|
+
"text": "\"filled\" | \"ring\""
|
|
18575
|
+
},
|
|
18576
|
+
"description": "Filled discs (concentric ones fade with size, see --ray-pulse-floor) or outlined rings. Default: the variant's.",
|
|
18577
|
+
"attribute": "shape",
|
|
18578
|
+
"reflects": true
|
|
18579
|
+
},
|
|
18580
|
+
{
|
|
18581
|
+
"kind": "field",
|
|
18582
|
+
"name": "fade",
|
|
18583
|
+
"type": {
|
|
18584
|
+
"text": "\"out\" | \"none\""
|
|
18585
|
+
},
|
|
18586
|
+
"description": "Whether a cycle ends transparent; the bare attribute means out. Default: the variant's (ripple and dots fade).",
|
|
18587
|
+
"attribute": "fade",
|
|
18588
|
+
"reflects": true
|
|
18589
|
+
},
|
|
18590
|
+
{
|
|
18591
|
+
"kind": "field",
|
|
18592
|
+
"name": "direction",
|
|
18593
|
+
"type": {
|
|
18594
|
+
"text": "\"alternate\" | \"normal\""
|
|
18595
|
+
},
|
|
18596
|
+
"description": "alternate goes there and back; normal goes one way and restarts (with fade: the ripple). Default: the variant's.",
|
|
18597
|
+
"attribute": "direction",
|
|
18598
|
+
"reflects": true
|
|
18599
|
+
},
|
|
18600
|
+
{
|
|
18601
|
+
"kind": "field",
|
|
18602
|
+
"name": "color",
|
|
18603
|
+
"type": {
|
|
18604
|
+
"text": "string"
|
|
18605
|
+
},
|
|
18606
|
+
"description": "A palette color or any CSS color. Default: the primary color.",
|
|
18607
|
+
"attribute": "color",
|
|
18608
|
+
"reflects": true
|
|
18609
|
+
},
|
|
18610
|
+
{
|
|
18611
|
+
"kind": "field",
|
|
18612
|
+
"name": "size",
|
|
18613
|
+
"type": {
|
|
18614
|
+
"text": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
|
|
18615
|
+
},
|
|
18616
|
+
"description": "Height of the figure (the dots variant is wider).",
|
|
18617
|
+
"attribute": "size",
|
|
18618
|
+
"reflects": true,
|
|
18619
|
+
"default": "md"
|
|
18620
|
+
},
|
|
18621
|
+
{
|
|
18622
|
+
"kind": "field",
|
|
18623
|
+
"name": "label",
|
|
18624
|
+
"type": {
|
|
18625
|
+
"text": "string"
|
|
18626
|
+
},
|
|
18627
|
+
"description": "Text read by screen readers.",
|
|
18628
|
+
"attribute": "label",
|
|
18629
|
+
"reflects": false,
|
|
18630
|
+
"default": "Loading"
|
|
18631
|
+
}
|
|
18632
|
+
],
|
|
18633
|
+
"events": [],
|
|
18634
|
+
"slots": [],
|
|
18635
|
+
"cssParts": [
|
|
18636
|
+
{
|
|
18637
|
+
"name": "pulse",
|
|
18638
|
+
"description": "The box holding the circles."
|
|
18639
|
+
},
|
|
18640
|
+
{
|
|
18641
|
+
"name": "dot",
|
|
18642
|
+
"description": "Each circle (the static center of ripple is also part core)."
|
|
18643
|
+
}
|
|
18644
|
+
]
|
|
18645
|
+
}
|
|
18646
|
+
],
|
|
18647
|
+
"exports": [
|
|
18648
|
+
{
|
|
18649
|
+
"kind": "js",
|
|
18650
|
+
"name": "RayPulse",
|
|
18651
|
+
"declaration": {
|
|
18652
|
+
"name": "RayPulse",
|
|
18653
|
+
"module": "components/pulse/pulse.js"
|
|
18654
|
+
}
|
|
18655
|
+
},
|
|
18656
|
+
{
|
|
18657
|
+
"kind": "custom-element-definition",
|
|
18658
|
+
"name": "ray-pulse",
|
|
18659
|
+
"declaration": {
|
|
18660
|
+
"name": "RayPulse",
|
|
18661
|
+
"module": "components/pulse/pulse.js"
|
|
18662
|
+
}
|
|
18663
|
+
}
|
|
18664
|
+
]
|
|
18665
|
+
},
|
|
18466
18666
|
{
|
|
18467
18667
|
"kind": "javascript-module",
|
|
18468
18668
|
"path": "components/ring-progress/ring-progress.js",
|
package/index.js
CHANGED
|
@@ -58,6 +58,7 @@ export { RayAlert } from "./components/alert/alert.js";
|
|
|
58
58
|
export { RayEmptyState } from "./components/empty-state/empty-state.js";
|
|
59
59
|
export { RayNotification, RayToaster, notify, updateNotification, hideNotification, clearNotifications, statusIcon } from "./components/notification/notification.js";
|
|
60
60
|
export { RayProgress } from "./components/progress/progress.js";
|
|
61
|
+
export { RayPulse } from "./components/pulse/pulse.js";
|
|
61
62
|
export { RayRingProgress } from "./components/ring-progress/ring-progress.js";
|
|
62
63
|
export { RaySkeleton } from "./components/skeleton/skeleton.js";
|
|
63
64
|
export { RaySpinner } from "./components/spinner/spinner.js";
|
package/llms-full.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# ray-elements
|
|
2
2
|
|
|
3
|
-
> 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.
|
|
3
|
+
> 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.11.0.
|
|
4
4
|
|
|
5
5
|
ray-elements is a design system of standard web components (custom elements
|
|
6
6
|
with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
|
|
@@ -3007,6 +3007,32 @@ Parts (`::part()`):
|
|
|
3007
3007
|
- `bar`: The filled bar.
|
|
3008
3008
|
- `value`: The percentage beside the bar (show-value on xs, sm, md).
|
|
3009
3009
|
|
|
3010
|
+
### Pulse
|
|
3011
|
+
|
|
3012
|
+
An indeterminate wait indicator softer than the spinner: circles that breathe or ripple, announced as a status.
|
|
3013
|
+
|
|
3014
|
+
Import: `import "@raylang/elements/pulse";` · Category: Feedback
|
|
3015
|
+
|
|
3016
|
+
#### `<ray-pulse>` (RayPulse, extends RayElement)
|
|
3017
|
+
|
|
3018
|
+
Four presets (variant), each a bundle of count, shape, fade and direction, which override it one by one. The rest is tuned with custom properties on the element: --ray-pulse-cycle (one cycle, default 1.6s; doubled with reduced motion), --ray-pulse-floor (opacity of the largest of concentric filled circles, 0 to 1, default 0.2), --ray-pulse-scale (where a cycle starts, 1 = full size; default per variant) and --ray-pulse-stagger (how much of the cycle separates the phases of the circles, 0 together to 1 spread evenly; default per variant).
|
|
3019
|
+
|
|
3020
|
+
Properties:
|
|
3021
|
+
|
|
3022
|
+
- `variant`: `cluster` | `breathe` | `ripple` | `dots`, default `cluster`, reflects. The figure: cluster (three concentric circles breathing out of phase), breathe (one dot over a halo), ripple (rings expanding from a dot) or dots (three in a row, in sequence).
|
|
3023
|
+
- `count`: number, reflects. Number of circles, 1 to 5 (more are clamped). Default: the variant's.
|
|
3024
|
+
- `shape`: `filled` | `ring`, reflects. Filled discs (concentric ones fade with size, see --ray-pulse-floor) or outlined rings. Default: the variant's.
|
|
3025
|
+
- `fade`: `out` | `none`, reflects. Whether a cycle ends transparent; the bare attribute means out. Default: the variant's (ripple and dots fade).
|
|
3026
|
+
- `direction`: `alternate` | `normal`, reflects. alternate goes there and back; normal goes one way and restarts (with fade: the ripple). Default: the variant's.
|
|
3027
|
+
- `color`: string, reflects. A palette color or any CSS color. Default: the primary color.
|
|
3028
|
+
- `size`: `xs` | `sm` | `md` | `lg` | `xl`, default `md`, reflects. Height of the figure (the dots variant is wider).
|
|
3029
|
+
- `label`: string, default `Loading`. Text read by screen readers.
|
|
3030
|
+
|
|
3031
|
+
Parts (`::part()`):
|
|
3032
|
+
|
|
3033
|
+
- `pulse`: The box holding the circles.
|
|
3034
|
+
- `dot`: Each circle (the static center of ripple is also part core).
|
|
3035
|
+
|
|
3010
3036
|
### Ring progress
|
|
3011
3037
|
|
|
3012
3038
|
Progress as a ring (Mantine's RingProgress), with content in the middle: a countdown, a goal, an upload. Announced as a progressbar.
|
package/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# ray-elements
|
|
2
2
|
|
|
3
|
-
> 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.
|
|
3
|
+
> 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.11.0.
|
|
4
4
|
|
|
5
5
|
ray-elements is a design system of standard web components (custom elements
|
|
6
6
|
with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
|
|
@@ -337,6 +337,7 @@ Members whose name starts with `_` are internal.
|
|
|
337
337
|
- [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.
|
|
338
338
|
- [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).
|
|
339
339
|
- [Progress](https://elements.raylang.dev/components/progress.md): `<ray-progress>` (Feedback). A determinate or (without value) indeterminate progress bar, announced as a progressbar.
|
|
340
|
+
- [Pulse](https://elements.raylang.dev/components/pulse.md): `<ray-pulse>` (Feedback). An indeterminate wait indicator softer than the spinner: circles that breathe or ripple, announced as a status.
|
|
340
341
|
- [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.
|
|
341
342
|
- [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.
|
|
342
343
|
- [Spinner](https://elements.raylang.dev/components/spinner.md): `<ray-spinner>` (Feedback). An indeterminate loading indicator, announced as a status.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@raylang/elements",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "Web components for any app, with raylang extras (shadcn/ui + Mantine inspired)",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"keywords": ["web-components", "custom-elements", "design-system", "ui", "raylang"],
|
|
@@ -252,6 +252,10 @@
|
|
|
252
252
|
"types": "./ray-elements.d.ts",
|
|
253
253
|
"default": "./components/progress/progress.js"
|
|
254
254
|
},
|
|
255
|
+
"./pulse": {
|
|
256
|
+
"types": "./ray-elements.d.ts",
|
|
257
|
+
"default": "./components/pulse/pulse.js"
|
|
258
|
+
},
|
|
255
259
|
"./ring-progress": {
|
|
256
260
|
"types": "./ray-elements.d.ts",
|
|
257
261
|
"default": "./components/ring-progress/ring-progress.js"
|
package/ray-elements.d.ts
CHANGED
|
@@ -2367,6 +2367,27 @@ export declare class RayProgress extends RayElement {
|
|
|
2367
2367
|
label: string | undefined;
|
|
2368
2368
|
}
|
|
2369
2369
|
|
|
2370
|
+
// --- Pulse (pulse)
|
|
2371
|
+
/** <ray-pulse> Four presets (variant), each a bundle of count, shape, fade and direction, which override it one by one. The rest is tuned with custom properties on the element: --ray-pulse-cycle (one cycle, default 1.6s; doubled with reduced motion), --ray-pulse-floor (opacity of the largest of concentric filled circles, 0 to 1, default 0.2), --ray-pulse-scale (where a cycle starts, 1 = full size; default per variant) and --ray-pulse-stagger (how much of the cycle separates the phases of the circles, 0 together to 1 spread evenly; default per variant). */
|
|
2372
|
+
export declare class RayPulse extends RayElement {
|
|
2373
|
+
/** The figure: cluster (three concentric circles breathing out of phase), breathe (one dot over a halo), ripple (rings expanding from a dot) or dots (three in a row, in sequence). */
|
|
2374
|
+
variant: "cluster" | "breathe" | "ripple" | "dots";
|
|
2375
|
+
/** Number of circles, 1 to 5 (more are clamped). Default: the variant's. */
|
|
2376
|
+
count: number | undefined;
|
|
2377
|
+
/** Filled discs (concentric ones fade with size, see --ray-pulse-floor) or outlined rings. Default: the variant's. */
|
|
2378
|
+
shape: "filled" | "ring" | undefined;
|
|
2379
|
+
/** Whether a cycle ends transparent; the bare attribute means out. Default: the variant's (ripple and dots fade). */
|
|
2380
|
+
fade: "out" | "none" | undefined;
|
|
2381
|
+
/** alternate goes there and back; normal goes one way and restarts (with fade: the ripple). Default: the variant's. */
|
|
2382
|
+
direction: "alternate" | "normal" | undefined;
|
|
2383
|
+
/** A palette color or any CSS color. Default: the primary color. */
|
|
2384
|
+
color: string | undefined;
|
|
2385
|
+
/** Height of the figure (the dots variant is wider). */
|
|
2386
|
+
size: "xs" | "sm" | "md" | "lg" | "xl";
|
|
2387
|
+
/** Text read by screen readers. */
|
|
2388
|
+
label: string;
|
|
2389
|
+
}
|
|
2390
|
+
|
|
2370
2391
|
// --- Ring progress (ring-progress)
|
|
2371
2392
|
/** <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. */
|
|
2372
2393
|
export declare class RayRingProgress extends RayElement {
|
|
@@ -2764,6 +2785,7 @@ declare global {
|
|
|
2764
2785
|
"ray-notification": RayNotification;
|
|
2765
2786
|
"ray-toaster": RayToaster;
|
|
2766
2787
|
"ray-progress": RayProgress;
|
|
2788
|
+
"ray-pulse": RayPulse;
|
|
2767
2789
|
"ray-ring-progress": RayRingProgress;
|
|
2768
2790
|
"ray-skeleton": RaySkeleton;
|
|
2769
2791
|
"ray-spinner": RaySpinner;
|
|
@@ -6645,6 +6645,99 @@
|
|
|
6645
6645
|
}
|
|
6646
6646
|
]
|
|
6647
6647
|
},
|
|
6648
|
+
{
|
|
6649
|
+
"name": "ray-pulse",
|
|
6650
|
+
"description": "Four presets (variant), each a bundle of count, shape, fade and direction, which override it one by one. The rest is tuned with custom properties on the element: --ray-pulse-cycle (one cycle, default 1.6s; doubled with reduced motion), --ray-pulse-floor (opacity of the largest of concentric filled circles, 0 to 1, default 0.2), --ray-pulse-scale (where a cycle starts, 1 = full size; default per variant) and --ray-pulse-stagger (how much of the cycle separates the phases of the circles, 0 together to 1 spread evenly; default per variant).",
|
|
6651
|
+
"attributes": [
|
|
6652
|
+
{
|
|
6653
|
+
"name": "variant",
|
|
6654
|
+
"description": "The figure: cluster (three concentric circles breathing out of phase), breathe (one dot over a halo), ripple (rings expanding from a dot) or dots (three in a row, in sequence).",
|
|
6655
|
+
"values": [
|
|
6656
|
+
{
|
|
6657
|
+
"name": "cluster"
|
|
6658
|
+
},
|
|
6659
|
+
{
|
|
6660
|
+
"name": "breathe"
|
|
6661
|
+
},
|
|
6662
|
+
{
|
|
6663
|
+
"name": "ripple"
|
|
6664
|
+
},
|
|
6665
|
+
{
|
|
6666
|
+
"name": "dots"
|
|
6667
|
+
}
|
|
6668
|
+
]
|
|
6669
|
+
},
|
|
6670
|
+
{
|
|
6671
|
+
"name": "count",
|
|
6672
|
+
"description": "Number of circles, 1 to 5 (more are clamped). Default: the variant's."
|
|
6673
|
+
},
|
|
6674
|
+
{
|
|
6675
|
+
"name": "shape",
|
|
6676
|
+
"description": "Filled discs (concentric ones fade with size, see --ray-pulse-floor) or outlined rings. Default: the variant's.",
|
|
6677
|
+
"values": [
|
|
6678
|
+
{
|
|
6679
|
+
"name": "filled"
|
|
6680
|
+
},
|
|
6681
|
+
{
|
|
6682
|
+
"name": "ring"
|
|
6683
|
+
}
|
|
6684
|
+
]
|
|
6685
|
+
},
|
|
6686
|
+
{
|
|
6687
|
+
"name": "fade",
|
|
6688
|
+
"description": "Whether a cycle ends transparent; the bare attribute means out. Default: the variant's (ripple and dots fade).",
|
|
6689
|
+
"values": [
|
|
6690
|
+
{
|
|
6691
|
+
"name": "out"
|
|
6692
|
+
},
|
|
6693
|
+
{
|
|
6694
|
+
"name": "none"
|
|
6695
|
+
}
|
|
6696
|
+
]
|
|
6697
|
+
},
|
|
6698
|
+
{
|
|
6699
|
+
"name": "direction",
|
|
6700
|
+
"description": "alternate goes there and back; normal goes one way and restarts (with fade: the ripple). Default: the variant's.",
|
|
6701
|
+
"values": [
|
|
6702
|
+
{
|
|
6703
|
+
"name": "alternate"
|
|
6704
|
+
},
|
|
6705
|
+
{
|
|
6706
|
+
"name": "normal"
|
|
6707
|
+
}
|
|
6708
|
+
]
|
|
6709
|
+
},
|
|
6710
|
+
{
|
|
6711
|
+
"name": "color",
|
|
6712
|
+
"description": "A palette color or any CSS color. Default: the primary color."
|
|
6713
|
+
},
|
|
6714
|
+
{
|
|
6715
|
+
"name": "size",
|
|
6716
|
+
"description": "Height of the figure (the dots variant is wider).",
|
|
6717
|
+
"values": [
|
|
6718
|
+
{
|
|
6719
|
+
"name": "xs"
|
|
6720
|
+
},
|
|
6721
|
+
{
|
|
6722
|
+
"name": "sm"
|
|
6723
|
+
},
|
|
6724
|
+
{
|
|
6725
|
+
"name": "md"
|
|
6726
|
+
},
|
|
6727
|
+
{
|
|
6728
|
+
"name": "lg"
|
|
6729
|
+
},
|
|
6730
|
+
{
|
|
6731
|
+
"name": "xl"
|
|
6732
|
+
}
|
|
6733
|
+
]
|
|
6734
|
+
},
|
|
6735
|
+
{
|
|
6736
|
+
"name": "label",
|
|
6737
|
+
"description": "Text read by screen readers."
|
|
6738
|
+
}
|
|
6739
|
+
]
|
|
6740
|
+
},
|
|
6648
6741
|
{
|
|
6649
6742
|
"name": "ray-ring-progress",
|
|
6650
6743
|
"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.",
|