@xsynaptic/sonic-ui 0.20.0 → 0.21.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.
Files changed (49) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +22 -108
  3. package/dist/default/elements/button.js +2 -1
  4. package/dist/default/elements/field-gesture.js +3 -0
  5. package/dist/default/elements/split.js +3 -1
  6. package/dist/default/elements/switch.js +5 -3
  7. package/dist/default/elements/toggle.js +10 -5
  8. package/dist/default/elements/value-entry.js +5 -18
  9. package/dist/default/elements/waveform.js +15 -4
  10. package/dist/default/elements/xy.js +33 -5
  11. package/dist/default/lib/double-press.js +30 -0
  12. package/dist/dev/elements/button.js +2 -1
  13. package/dist/dev/elements/button.js.map +1 -1
  14. package/dist/dev/elements/field-gesture.js +3 -0
  15. package/dist/dev/elements/field-gesture.js.map +1 -1
  16. package/dist/dev/elements/number.js +1 -4
  17. package/dist/dev/elements/number.js.map +1 -1
  18. package/dist/dev/elements/split.js +3 -1
  19. package/dist/dev/elements/split.js.map +1 -1
  20. package/dist/dev/elements/switch.js +5 -3
  21. package/dist/dev/elements/switch.js.map +1 -1
  22. package/dist/dev/elements/toggle.js +10 -5
  23. package/dist/dev/elements/toggle.js.map +1 -1
  24. package/dist/dev/elements/value-entry.js +5 -18
  25. package/dist/dev/elements/value-entry.js.map +1 -1
  26. package/dist/dev/elements/waveform.d.ts +2 -0
  27. package/dist/dev/elements/waveform.js +15 -4
  28. package/dist/dev/elements/waveform.js.map +1 -1
  29. package/dist/dev/elements/xy.d.ts +4 -0
  30. package/dist/dev/elements/xy.js +33 -5
  31. package/dist/dev/elements/xy.js.map +1 -1
  32. package/dist/dev/lib/double-press.js +31 -0
  33. package/dist/dev/lib/double-press.js.map +1 -0
  34. package/dist/styles/button.css +1 -0
  35. package/dist/styles/dial.css +1 -1
  36. package/dist/styles/envelope.css +2 -1
  37. package/dist/styles/led.css +7 -19
  38. package/dist/styles/material/cap.css +26 -7
  39. package/dist/styles/material/core.css +9 -1
  40. package/dist/styles/material/glass.css +1 -2
  41. package/dist/styles/material/lens.css +18 -1
  42. package/dist/styles/material/pane.css +2 -5
  43. package/dist/styles/material/readout.css +7 -1
  44. package/dist/styles/material/well.css +8 -1
  45. package/dist/styles/meter.css +6 -4
  46. package/dist/styles/number.css +8 -9
  47. package/dist/styles/toggle.css +4 -0
  48. package/dist/styles/xy.css +4 -19
  49. package/package.json +1 -1
package/dist/styles/material/pane.css CHANGED
@@ -7,7 +7,7 @@
7
7
  @layer sonic.material {
8
8
  /* A definite cell, so percentage-sized content fills the glass; a canvas sized to its own box would feed back */
9
9
 
10
- :is(.sonic-number, .sonic-screen) {
10
+ .sonic-screen {
11
11
  --_sonic-glass-depth: var(--sonic-glass-depth, var(--_sonic-relief));
12
12
  --_sonic-glass-texture: var(--sonic-glass-texture, var(--_sonic-relief));
13
13
  --_sonic-glass-pitch: max(2px, round(2 * var(--_sonic-unit), 1px));
@@ -15,12 +15,10 @@
15
15
  position: relative;
16
16
  box-sizing: border-box;
17
17
  display: grid;
18
- flex-shrink: 0;
19
18
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
20
19
  place-items: center;
21
20
  font-family: var(--sonic-glass-font, inherit);
22
21
  color: var(--_sonic-glass-text);
23
- user-select: none;
24
22
  background: var(--_sonic-glass-fill);
25
23
  border: var(--_sonic-glass-edge);
26
24
 
@@ -75,8 +73,7 @@
75
73
 
76
74
  @media (prefers-reduced-motion: no-preference) {
77
75
  &:is(:focus-visible, :focus-within)::before,
78
- &:has(:state(dragging))::before,
79
- :state(dragging) > &::before {
76
+ &:has(:state(dragging))::before {
80
77
  animation: sonic-glass-breathe 3s ease-in-out infinite alternate;
81
78
  }
82
79
 
package/dist/styles/material/readout.css CHANGED
@@ -18,6 +18,9 @@
18
18
  .sonic-xy-readout
19
19
  ) {
20
20
  --_sonic-unit: calc(var(--_sonic-readout-size) / 32);
21
+ --_sonic-readout-radius-own: calc(
22
+ var(--_sonic-readout-size) * var(--sonic-readout-radius-ratio)
23
+ );
21
24
  --_sonic-glass-own: var(--sonic-readout-glass);
22
25
  --_sonic-glass-edge-colour-own: var(--sonic-readout-edge);
23
26
  --_sonic-glass-edge-width-own: var(--sonic-readout-edge-width);
@@ -43,7 +46,10 @@
43
46
  user-select: none;
44
47
  background: var(--_sonic-glass-fill);
45
48
  border: var(--_sonic-glass-edge);
46
- border-radius: calc(0.25 * var(--_sonic-readout-size));
49
+ border-radius: var(
50
+ --_sonic-readout-radius-own,
51
+ var(--sonic-radius, calc(0.25 * var(--_sonic-readout-size)))
52
+ );
47
53
  box-shadow:
48
54
  calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(6 * var(--_sonic-unit))
49
55
  rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief))),
package/dist/styles/material/well.css CHANGED
@@ -1,6 +1,13 @@
1
1
  @layer sonic.material {
2
- :is(.sonic-button, .sonic-number, .sonic-screen, .sonic-segmented, .sonic-toggle) {
2
+ :is(.sonic-button, .sonic-segmented, .sonic-toggle) {
3
+ --_sonic-well-depth: 1;
4
+ }
5
+
6
+ .sonic-screen {
3
7
  --_sonic-well-depth: var(--_sonic-glass-depth, 1);
8
+ }
9
+
10
+ :is(.sonic-button, .sonic-screen, .sonic-segmented, .sonic-toggle) {
4
11
  --_sonic-well:
5
12
  inset calc(var(--_sonic-well-depth) * var(--_sonic-cast-x))
6
13
  calc(var(--_sonic-well-depth) * var(--_sonic-cast-y))
package/dist/styles/meter.css CHANGED
@@ -49,6 +49,7 @@
49
49
  --_sonic-meter-clip-from: var(--sonic-meter-clip-from, -3);
50
50
  --_sonic-unit: calc(var(--_sonic-meter-size) / 8);
51
51
  --_sonic-meter-toward: to top;
52
+ --_sonic-meter-unlit: var(--_sonic-unlit);
52
53
  --_sonic-meter-inset: calc(var(--_sonic-meter-size) * 0.125);
53
54
  --_sonic-meter-lens: calc(var(--_sonic-meter-size) - 2 * var(--_sonic-meter-inset));
54
55
  --_sonic-meter-clip-space: calc(var(--_sonic-meter-inset) + var(--_sonic-meter-lens));
@@ -63,7 +64,7 @@
63
64
  inline-size: var(--_sonic-meter-size);
64
65
  block-size: var(--_sonic-meter-length);
65
66
  container-type: size;
66
- background: var(--sonic-bezel, color-mix(in oklab, var(--_sonic-unlit) 55%, #000));
67
+ background: var(--_sonic-lens-bezel);
67
68
  border-radius: calc(var(--_sonic-meter-size) * var(--_sonic-meter-radius-ratio));
68
69
 
69
70
  &::after {
@@ -286,10 +287,11 @@
286
287
  .sonic-meter-segments {
287
288
  background: linear-gradient(
288
289
  var(--_sonic-meter-toward),
289
- color-mix(in oklab, var(--_sonic-lit) 12%, var(--_sonic-unlit)) 0 var(--_sonic-meter-hot-at),
290
- color-mix(in oklab, var(--_sonic-lit-warning) 12%, var(--_sonic-unlit)) 0
290
+ color-mix(in oklab, var(--_sonic-lit) 12%, var(--_sonic-meter-unlit)) 0
291
+ var(--_sonic-meter-hot-at),
292
+ color-mix(in oklab, var(--_sonic-lit-warning) 12%, var(--_sonic-meter-unlit)) 0
291
293
  var(--_sonic-meter-clip-at),
292
- color-mix(in oklab, var(--_sonic-lit-danger) 12%, var(--_sonic-unlit)) 0
294
+ color-mix(in oklab, var(--_sonic-lit-danger) 12%, var(--_sonic-meter-unlit)) 0
293
295
  );
294
296
  }
295
297
 
package/dist/styles/number.css CHANGED
@@ -30,25 +30,24 @@
30
30
  }
31
31
 
32
32
  .sonic-number {
33
- --_sonic-number-radius-ratio: var(--sonic-number-radius-ratio, 0.15);
34
- --_sonic-number-radius-own: calc(var(--_sonic-number-size) * var(--sonic-number-radius-ratio));
35
- --_sonic-number-inset-ratio: var(--sonic-number-inset-ratio, 0.2);
36
33
  --_sonic-number-text-ratio: var(--sonic-number-text-ratio, 0.45);
37
34
  --_sonic-number-travel: var(--sonic-number-travel, 160px);
38
35
  --_sonic-unit: calc(var(--_sonic-number-size) / 32);
39
36
 
37
+ /* fallow-ignore-next-line code-duplication -- a plain box restated, since sheets never import each other */
38
+ position: relative;
39
+ display: grid;
40
+ flex-shrink: 0;
41
+ grid-template: minmax(0, 1fr) / minmax(0, 1fr);
42
+ place-items: center;
40
43
  inline-size: calc(var(--_sonic-number-size) * var(--_sonic-number-aspect-ratio));
41
44
  block-size: var(--_sonic-number-size);
42
- padding: 0 calc(var(--_sonic-number-size) * var(--_sonic-number-inset-ratio));
43
45
  font-size: calc(var(--_sonic-number-size) * var(--_sonic-number-text-ratio));
44
46
  font-variant-numeric: tabular-nums;
45
47
  line-height: 1;
46
- touch-action: pan-x;
48
+ touch-action: var(--sonic-touch-action, pan-x);
47
49
  cursor: ns-resize;
48
- border-radius: var(
49
- --_sonic-number-radius-own,
50
- var(--sonic-radius, calc(var(--_sonic-number-size) * var(--_sonic-number-radius-ratio)))
51
- );
50
+ user-select: none;
52
51
  box-shadow: var(--_sonic-focus-shadow);
53
52
  }
54
53
 
package/dist/styles/toggle.css CHANGED
@@ -261,6 +261,7 @@
261
261
  .sonic-toggle-position:focus-visible {
262
262
  outline: var(--sonic-focus-outline, 2px solid transparent);
263
263
  outline-offset: var(--sonic-focus-outline-offset, -2px);
264
+ border-radius: var(--_sonic-toggle-corner);
264
265
  }
265
266
 
266
267
  .sonic-toggle-position:disabled {
@@ -452,6 +453,9 @@
452
453
 
453
454
  @media (forced-colors: active) {
454
455
  .sonic-toggle {
456
+ --_sonic-lit-ok: Mark;
457
+ --_sonic-lit-warning: Highlight;
458
+ --_sonic-lit-danger: Mark;
455
459
  --_sonic-skirt: CanvasText;
456
460
  --_sonic-face: CanvasText;
457
461
  --_sonic-rim: 0 0 0 var(--_sonic-rim-width) Canvas;
package/dist/styles/xy.css CHANGED
@@ -27,6 +27,7 @@
27
27
  --_sonic-xy-puck-ratio: var(--sonic-xy-puck-ratio, 0.2);
28
28
  --_sonic-unit: calc(var(--_sonic-xy-size) / 96);
29
29
  --_sonic-xy-lit: var(--_sonic-lit);
30
+ --_sonic-xy-puck-core: var(--_sonic-xy-lit);
30
31
  --_sonic-xy-cursor: grab;
31
32
  --_sonic-xy-puck: calc(var(--_sonic-xy-size) * var(--_sonic-xy-puck-ratio));
32
33
  --_sonic-xy-travel-x: calc(100cqi - var(--_sonic-xy-puck));
@@ -47,6 +48,7 @@
47
48
 
48
49
  :disabled > .sonic-xy {
49
50
  --_sonic-xy-lit: var(--_sonic-lit-disabled);
51
+ --_sonic-xy-puck-core: color-mix(in oklab, var(--_sonic-ink) 25%, var(--_sonic-unlit-solid));
50
52
  --_sonic-xy-cursor: default;
51
53
 
52
54
  cursor: default;
@@ -58,8 +60,6 @@
58
60
  --_sonic-xy-x-high: max(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
59
61
  --_sonic-xy-y-low: min(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
60
62
  --_sonic-xy-y-high: max(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
61
- --_sonic-xy-cut-x: calc(var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
62
- --_sonic-xy-cut-y: calc(var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y));
63
63
 
64
64
  position: absolute;
65
65
  inset: 0;
@@ -71,8 +71,6 @@
71
71
  content: '';
72
72
  }
73
73
 
74
- /* Each line is cut under the puck, which is see-through while held; the cut ends inside its ring */
75
-
76
74
  &::before {
77
75
  inset: auto 0
78
76
  calc(
@@ -96,12 +94,6 @@
96
94
  transparent 0
97
95
  ),
98
96
  var(--_sonic-unlit);
99
- mask: linear-gradient(
100
- to right,
101
- #000 calc(var(--_sonic-xy-cut-x) + 0.29 * var(--_sonic-xy-puck)),
102
- transparent 0 calc(var(--_sonic-xy-cut-x) + 0.71 * var(--_sonic-xy-puck)),
103
- #000 0
104
- );
105
97
  }
106
98
 
107
99
  &::after {
@@ -127,12 +119,6 @@
127
119
  transparent 0
128
120
  ),
129
121
  var(--_sonic-unlit);
130
- mask: linear-gradient(
131
- to top,
132
- #000 calc(var(--_sonic-xy-cut-y) + 0.29 * var(--_sonic-xy-puck)),
133
- transparent 0 calc(var(--_sonic-xy-cut-y) + 0.71 * var(--_sonic-xy-puck)),
134
- #000 0
135
- );
136
122
  }
137
123
  }
138
124
 
@@ -150,7 +136,7 @@
150
136
  }
151
137
 
152
138
  .sonic-xy-puck {
153
- --_sonic-xy-puck-fill: var(--_sonic-xy-lit);
139
+ --_sonic-xy-puck-fill: var(--_sonic-xy-puck-core);
154
140
  --_sonic-xy-puck-edge: var(--_sonic-xy-puck-fill);
155
141
  --_sonic-xy-puck-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
156
142
  --_sonic-xy-puck-glow: transparent;
@@ -190,8 +176,6 @@
190
176
  }
191
177
 
192
178
  :state(dragging) > .sonic-xy > .sonic-xy-puck {
193
- --_sonic-xy-puck-fill: transparent;
194
- --_sonic-xy-puck-edge: var(--_sonic-xy-lit);
195
179
  --_sonic-xy-puck-glow: color-mix(
196
180
  in oklab,
197
181
  var(--_sonic-xy-lit) calc(30% * var(--_sonic-relief)),
@@ -231,6 +215,7 @@
231
215
 
232
216
  :state(dragging) > .sonic-xy > .sonic-xy-puck {
233
217
  --_sonic-xy-puck-fill: Canvas;
218
+ --_sonic-xy-puck-edge: var(--_sonic-xy-lit);
234
219
  }
235
220
 
236
221
  .sonic-xy-axis {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsynaptic/sonic-ui",
3
- "version": "0.20.0",
3
+ "version": "0.21.0",
4
4
  "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
5
5
  "keywords": [
6
6
  "custom-elements",