@xsynaptic/sonic-ui 0.21.0 → 0.23.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 (42) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +1 -0
  3. package/dist/default/elements/envelope.js +3 -6
  4. package/dist/default/elements/split.js +4 -7
  5. package/dist/default/elements/value-element.js +3 -0
  6. package/dist/default/elements/wave-element.js +1 -0
  7. package/dist/default/elements/waveform.js +48 -4
  8. package/dist/default/elements/wavestrip.js +1 -0
  9. package/dist/default/lib/waveform-bands.js +85 -0
  10. package/dist/default/lib/waveform-scene.js +52 -16
  11. package/dist/dev/elements/envelope.js +3 -6
  12. package/dist/dev/elements/envelope.js.map +1 -1
  13. package/dist/dev/elements/split.js +4 -7
  14. package/dist/dev/elements/split.js.map +1 -1
  15. package/dist/dev/elements/value-element.js +3 -0
  16. package/dist/dev/elements/value-element.js.map +1 -1
  17. package/dist/dev/elements/wave-element.d.ts +3 -2
  18. package/dist/dev/elements/wave-element.js +1 -0
  19. package/dist/dev/elements/wave-element.js.map +1 -1
  20. package/dist/dev/elements/waveform.d.ts +13 -4
  21. package/dist/dev/elements/waveform.js +48 -4
  22. package/dist/dev/elements/waveform.js.map +1 -1
  23. package/dist/dev/elements/wavestrip.d.ts +1 -0
  24. package/dist/dev/elements/wavestrip.js +1 -0
  25. package/dist/dev/elements/wavestrip.js.map +1 -1
  26. package/dist/dev/index.d.ts +2 -1
  27. package/dist/dev/lib/waveform-bands.d.ts +13 -0
  28. package/dist/dev/lib/waveform-bands.js +86 -0
  29. package/dist/dev/lib/waveform-bands.js.map +1 -0
  30. package/dist/dev/lib/waveform-scene.d.ts +6 -1
  31. package/dist/dev/lib/waveform-scene.js +52 -16
  32. package/dist/dev/lib/waveform-scene.js.map +1 -1
  33. package/dist/skins/amber.css +1 -0
  34. package/dist/skins/flat.css +0 -1
  35. package/dist/skins/ivory.css +1 -0
  36. package/dist/skins/lime.css +1 -0
  37. package/dist/skins/slate.css +1 -0
  38. package/dist/styles/material/readout.css +4 -2
  39. package/dist/styles/material/value.css +1 -1
  40. package/dist/styles/slider.css +29 -11
  41. package/dist/styles/waveform.css +29 -11
  42. package/package.json +1 -1
package/dist/styles/slider.css CHANGED
@@ -18,6 +18,18 @@
18
18
  initial-value: 0.15;
19
19
  }
20
20
 
21
+ @property --_sonic-slider-groove-hovered {
22
+ syntax: '<number>';
23
+ inherits: true;
24
+ initial-value: 0;
25
+ }
26
+
27
+ @property --_sonic-slider-groove-held {
28
+ syntax: '<number>';
29
+ inherits: true;
30
+ initial-value: 0;
31
+ }
32
+
21
33
  @property --_sonic-slider-value {
22
34
  syntax: '<number>';
23
35
  inherits: true;
@@ -49,7 +61,16 @@
49
61
  }
50
62
 
51
63
  .sonic-slider {
52
- --_sonic-slider-groove-ratio: var(--sonic-slider-groove-ratio, 0.15);
64
+ --_sonic-slider-groove-rest: var(--sonic-slider-groove-ratio, 0.15);
65
+ --_sonic-slider-groove-hover-delay: 0s;
66
+ --_sonic-slider-groove-ratio: calc(
67
+ var(--_sonic-slider-groove-rest) +
68
+ (
69
+ var(--sonic-slider-groove-hover-ratio, var(--_sonic-slider-groove-rest)) -
70
+ var(--_sonic-slider-groove-rest)
71
+ ) *
72
+ max(var(--_sonic-slider-groove-hovered), var(--_sonic-slider-groove-held))
73
+ );
53
74
  --_sonic-slider-cap-ratio: var(--sonic-slider-cap-ratio, 0.5);
54
75
  --_sonic-slider-radius-ratio: var(--sonic-slider-radius-ratio, 0.15);
55
76
  --_sonic-slider-bevel-ratio: var(--sonic-slider-bevel-ratio, 0.075);
@@ -92,7 +113,10 @@
92
113
  touch-action: var(--sonic-touch-action, pan-y);
93
114
  cursor: var(--_sonic-slider-cursor);
94
115
  user-select: none;
95
- transition: --_sonic-slider-groove-ratio var(--_sonic-fade-duration) ease-out;
116
+ transition:
117
+ --_sonic-slider-groove-hovered var(--_sonic-fade-duration) ease-out
118
+ var(--_sonic-slider-groove-hover-delay),
119
+ --_sonic-slider-groove-held var(--_sonic-fade-duration) ease-out;
96
120
 
97
121
  @media (prefers-reduced-motion: reduce) {
98
122
  transition: none;
@@ -101,19 +125,13 @@
101
125
 
102
126
  :where(:not(:disabled)) > .sonic-slider:focus-visible,
103
127
  :state(dragging) > .sonic-slider {
104
- --_sonic-slider-groove-ratio: var(
105
- --sonic-slider-groove-hover-ratio,
106
- var(--sonic-slider-groove-ratio, 0.15)
107
- );
128
+ --_sonic-slider-groove-held: 1;
108
129
  }
109
130
 
110
131
  @media (hover: hover) {
111
- /* fallow-ignore-next-line code-duplication -- `:hover` and `:focus-visible` split by `(hover: hover)` */
112
132
  :where(:not(:disabled)) > .sonic-slider:hover {
113
- --_sonic-slider-groove-ratio: var(
114
- --sonic-slider-groove-hover-ratio,
115
- var(--sonic-slider-groove-ratio, 0.15)
116
- );
133
+ --_sonic-slider-groove-hovered: 1;
134
+ --_sonic-slider-groove-hover-delay: var(--sonic-slider-groove-hover-delay, 0s);
117
135
  }
118
136
  }
119
137
 
package/dist/styles/waveform.css CHANGED
@@ -30,10 +30,28 @@
30
30
  initial-value: rgb(245 158 10);
31
31
  }
32
32
 
33
- @property --_sonic-waveform-wave-edge {
33
+ @property --_sonic-waveform-shade {
34
34
  syntax: '<color>';
35
35
  inherits: true;
36
- initial-value: rgb(110 70 5);
36
+ initial-value: rgb(0 0 0);
37
+ }
38
+
39
+ @property --_sonic-waveform-shade-clear {
40
+ syntax: '<color>';
41
+ inherits: true;
42
+ initial-value: rgb(0 0 0 / 0%);
43
+ }
44
+
45
+ @property --_sonic-waveform-edge-shade {
46
+ syntax: '<number>';
47
+ inherits: true;
48
+ initial-value: 0;
49
+ }
50
+
51
+ @property --_sonic-waveform-band-opacity {
52
+ syntax: '<number>';
53
+ inherits: true;
54
+ initial-value: 1;
37
55
  }
38
56
 
39
57
  @property --_sonic-waveform-grid {
@@ -98,13 +116,11 @@
98
116
  );
99
117
  --_sonic-waveform-lit: var(--_sonic-lit);
100
118
  --_sonic-waveform-wave: var(--_sonic-waveform-lit);
101
- --_sonic-waveform-wave-edge: var(
102
- --sonic-waveform-edge,
103
- color-mix(
104
- in oklab,
105
- var(--_sonic-waveform-lit) calc(100% - 55% * var(--_sonic-relief)),
106
- var(--_sonic-shade)
107
- )
119
+ --_sonic-waveform-shade: var(--_sonic-shade);
120
+ --_sonic-waveform-shade-clear: rgb(from var(--_sonic-shade) r g b / 0%);
121
+ --_sonic-waveform-edge-shade: var(--sonic-waveform-edge-shade, 0);
122
+ --_sonic-waveform-band-opacity: calc(
123
+ var(--sonic-waveform-band-opacity, 1) * var(--_sonic-waveform-band-dim, 1)
108
124
  );
109
125
  --_sonic-waveform-grid: var(--sonic-waveform-grid, var(--_sonic-etch));
110
126
  --_sonic-waveform-ends: var(--sonic-waveform-ends, var(--_sonic-etch));
@@ -153,10 +169,12 @@
153
169
 
154
170
  [dimmed] > .sonic-waveform {
155
171
  --_sonic-waveform-lit: var(--_sonic-lit-off);
172
+ --_sonic-waveform-band-dim: 0.75;
156
173
  }
157
174
 
158
175
  :disabled > .sonic-waveform {
159
176
  --_sonic-waveform-lit: var(--_sonic-lit-disabled);
177
+ --_sonic-waveform-band-dim: 0.25;
160
178
 
161
179
  cursor: default;
162
180
  }
@@ -219,7 +237,8 @@
219
237
  @media (forced-colors: active) {
220
238
  .sonic-waveform {
221
239
  --_sonic-waveform-wave: rgb(from CanvasText r g b / 100%);
222
- --_sonic-waveform-wave-edge: rgb(from CanvasText r g b / 100%);
240
+ --_sonic-waveform-edge-shade: 0;
241
+ --_sonic-waveform-band-opacity: 0;
223
242
  --_sonic-waveform-grid: rgb(from GrayText r g b / 100%);
224
243
  --_sonic-waveform-ends: rgb(from GrayText r g b / 100%);
225
244
  --_sonic-waveform-placeholder: rgb(from GrayText r g b / 100%);
@@ -228,7 +247,6 @@
228
247
 
229
248
  :disabled > .sonic-waveform {
230
249
  --_sonic-waveform-wave: rgb(from GrayText r g b / 100%);
231
- --_sonic-waveform-wave-edge: rgb(from GrayText r g b / 100%);
232
250
  }
233
251
 
234
252
  :is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsynaptic/sonic-ui",
3
- "version": "0.21.0",
3
+ "version": "0.23.0",
4
4
  "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
5
5
  "keywords": [
6
6
  "custom-elements",