@raylang/elements 0.9.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/core/complete.js +17 -8
- package/custom-elements.json +224 -0
- package/index.js +1 -0
- package/llms-full.txt +33 -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/core/complete.js
CHANGED
|
@@ -42,7 +42,8 @@ export const completeStyles = css`
|
|
|
42
42
|
white-space: nowrap;
|
|
43
43
|
}
|
|
44
44
|
.suggestion[aria-selected="true"] { color: var(--ray-accent-foreground); background: var(--ray-accent); }
|
|
45
|
-
.suggestion .s-
|
|
45
|
+
.suggestion .s-main { flex: none; }
|
|
46
|
+
.suggestion .s-label { font-family: var(--ray-font-mono); }
|
|
46
47
|
.suggestion .s-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ray-muted-foreground); }
|
|
47
48
|
.suggestion .s-description { display: block; font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
|
|
48
49
|
`;
|
|
@@ -127,22 +128,30 @@ class Completer {
|
|
|
127
128
|
option.dataset.index = String(i);
|
|
128
129
|
option.setAttribute("role", "option");
|
|
129
130
|
option.setAttribute("part", "suggestion");
|
|
131
|
+
// The label (code, in the mono font) with the description (prose)
|
|
132
|
+
// under it, then the detail.
|
|
133
|
+
const main = document.createElement("span");
|
|
134
|
+
main.className = "s-main";
|
|
130
135
|
const label = document.createElement("span");
|
|
131
136
|
label.className = "s-label";
|
|
137
|
+
label.setAttribute("part", "suggestion-label");
|
|
132
138
|
label.textContent = item.label ?? String(item.value);
|
|
133
|
-
|
|
139
|
+
main.append(label);
|
|
140
|
+
if (item.description) {
|
|
141
|
+
const d = document.createElement("span");
|
|
142
|
+
d.className = "s-description";
|
|
143
|
+
d.setAttribute("part", "suggestion-description");
|
|
144
|
+
d.textContent = item.description;
|
|
145
|
+
main.append(d);
|
|
146
|
+
}
|
|
147
|
+
option.append(main);
|
|
134
148
|
if (item.detail) {
|
|
135
149
|
const detail = document.createElement("span");
|
|
136
150
|
detail.className = "s-detail";
|
|
151
|
+
detail.setAttribute("part", "suggestion-detail");
|
|
137
152
|
detail.textContent = item.detail;
|
|
138
153
|
option.append(detail);
|
|
139
154
|
}
|
|
140
|
-
if (item.description) {
|
|
141
|
-
const d = document.createElement("span");
|
|
142
|
-
d.className = "s-description";
|
|
143
|
-
d.textContent = item.description;
|
|
144
|
-
label.append(d);
|
|
145
|
-
}
|
|
146
155
|
return option;
|
|
147
156
|
}));
|
|
148
157
|
const keep = this.open ? this.open.items[this.open.index]?.value : undefined;
|
package/custom-elements.json
CHANGED
|
@@ -4814,6 +4814,18 @@
|
|
|
4814
4814
|
"name": "suggestion",
|
|
4815
4815
|
"description": "Each suggestion ([aria-selected] when active)."
|
|
4816
4816
|
},
|
|
4817
|
+
{
|
|
4818
|
+
"name": "suggestion-label",
|
|
4819
|
+
"description": "A suggestion's label (in the mono font)."
|
|
4820
|
+
},
|
|
4821
|
+
{
|
|
4822
|
+
"name": "suggestion-detail",
|
|
4823
|
+
"description": "A suggestion's detail."
|
|
4824
|
+
},
|
|
4825
|
+
{
|
|
4826
|
+
"name": "suggestion-description",
|
|
4827
|
+
"description": "A suggestion's description, under its label (in the interface font)."
|
|
4828
|
+
},
|
|
4817
4829
|
{
|
|
4818
4830
|
"name": "highlight",
|
|
4819
4831
|
"description": "Each marked range (also highlight-<kind> for a range with a kind)."
|
|
@@ -9575,6 +9587,18 @@
|
|
|
9575
9587
|
"name": "suggestion",
|
|
9576
9588
|
"description": "Each suggestion ([aria-selected] when active)."
|
|
9577
9589
|
},
|
|
9590
|
+
{
|
|
9591
|
+
"name": "suggestion-label",
|
|
9592
|
+
"description": "A suggestion's label (in the mono font)."
|
|
9593
|
+
},
|
|
9594
|
+
{
|
|
9595
|
+
"name": "suggestion-detail",
|
|
9596
|
+
"description": "A suggestion's detail."
|
|
9597
|
+
},
|
|
9598
|
+
{
|
|
9599
|
+
"name": "suggestion-description",
|
|
9600
|
+
"description": "A suggestion's description, under its label (in the interface font)."
|
|
9601
|
+
},
|
|
9578
9602
|
{
|
|
9579
9603
|
"name": "highlight",
|
|
9580
9604
|
"description": "Each marked range (also highlight-<kind> for a range with a kind)."
|
|
@@ -18439,6 +18463,206 @@
|
|
|
18439
18463
|
}
|
|
18440
18464
|
]
|
|
18441
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
|
+
},
|
|
18442
18666
|
{
|
|
18443
18667
|
"kind": "javascript-module",
|
|
18444
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>`,
|
|
@@ -935,6 +935,9 @@ Parts (`::part()`):
|
|
|
935
935
|
- `error`: The error message.
|
|
936
936
|
- `suggestions`: The suggestion list (a listbox in the top layer).
|
|
937
937
|
- `suggestion`: Each suggestion ([aria-selected] when active).
|
|
938
|
+
- `suggestion-label`: A suggestion's label (in the mono font).
|
|
939
|
+
- `suggestion-detail`: A suggestion's detail.
|
|
940
|
+
- `suggestion-description`: A suggestion's description, under its label (in the interface font).
|
|
938
941
|
- `highlight`: Each marked range (also highlight-<kind> for a range with a kind).
|
|
939
942
|
- `text-layer`: The layer behind the text that holds the marks.
|
|
940
943
|
|
|
@@ -1486,6 +1489,9 @@ Parts (`::part()`):
|
|
|
1486
1489
|
- `wrapper`: The box.
|
|
1487
1490
|
- `suggestions`: The suggestion list (a listbox in the top layer).
|
|
1488
1491
|
- `suggestion`: Each suggestion ([aria-selected] when active).
|
|
1492
|
+
- `suggestion-label`: A suggestion's label (in the mono font).
|
|
1493
|
+
- `suggestion-detail`: A suggestion's detail.
|
|
1494
|
+
- `suggestion-description`: A suggestion's description, under its label (in the interface font).
|
|
1489
1495
|
- `highlight`: Each marked range (also highlight-<kind> for a range with a kind).
|
|
1490
1496
|
- `text-layer`: The layer behind the text that holds the marks.
|
|
1491
1497
|
|
|
@@ -3001,6 +3007,32 @@ Parts (`::part()`):
|
|
|
3001
3007
|
- `bar`: The filled bar.
|
|
3002
3008
|
- `value`: The percentage beside the bar (show-value on xs, sm, md).
|
|
3003
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
|
+
|
|
3004
3036
|
### Ring progress
|
|
3005
3037
|
|
|
3006
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.",
|