@xsynaptic/sonic-ui 0.12.0 → 0.13.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 (88) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +35 -0
  3. package/dist/default/elements/button.js +5 -1
  4. package/dist/default/elements/dial.js +7 -1
  5. package/dist/default/elements/display-element.js +5 -1
  6. package/dist/default/elements/envelope.js +6 -1
  7. package/dist/default/elements/meter.js +1 -1
  8. package/dist/default/elements/number.js +7 -1
  9. package/dist/default/elements/segmented.js +5 -1
  10. package/dist/default/elements/slider.js +7 -1
  11. package/dist/default/elements/sonic-element.js +1 -1
  12. package/dist/default/elements/switch.js +1 -1
  13. package/dist/default/elements/toggle.js +5 -1
  14. package/dist/default/elements/value-element.js +3 -0
  15. package/dist/default/elements/value-gestures.js +7 -0
  16. package/dist/default/elements/wave-element.js +8 -1
  17. package/dist/default/elements/waveform.js +129 -3
  18. package/dist/default/elements/xy.js +7 -1
  19. package/dist/default/lib/zoom-gesture.js +19 -0
  20. package/dist/dev/elements/button.js +5 -1
  21. package/dist/dev/elements/button.js.map +1 -1
  22. package/dist/dev/elements/dial.js +7 -1
  23. package/dist/dev/elements/dial.js.map +1 -1
  24. package/dist/dev/elements/display-element.js +5 -1
  25. package/dist/dev/elements/display-element.js.map +1 -1
  26. package/dist/dev/elements/envelope.js +6 -1
  27. package/dist/dev/elements/envelope.js.map +1 -1
  28. package/dist/dev/elements/meter.js +1 -1
  29. package/dist/dev/elements/meter.js.map +1 -1
  30. package/dist/dev/elements/number.js +7 -1
  31. package/dist/dev/elements/number.js.map +1 -1
  32. package/dist/dev/elements/segmented.js +5 -1
  33. package/dist/dev/elements/segmented.js.map +1 -1
  34. package/dist/dev/elements/slider.js +7 -1
  35. package/dist/dev/elements/slider.js.map +1 -1
  36. package/dist/dev/elements/sonic-element.d.ts +16 -1
  37. package/dist/dev/elements/sonic-element.js +27 -5
  38. package/dist/dev/elements/sonic-element.js.map +1 -1
  39. package/dist/dev/elements/switch.js +1 -1
  40. package/dist/dev/elements/switch.js.map +1 -1
  41. package/dist/dev/elements/toggle.js +5 -1
  42. package/dist/dev/elements/toggle.js.map +1 -1
  43. package/dist/dev/elements/value-element.d.ts +1 -0
  44. package/dist/dev/elements/value-element.js +3 -0
  45. package/dist/dev/elements/value-element.js.map +1 -1
  46. package/dist/dev/elements/value-gestures.js +7 -0
  47. package/dist/dev/elements/value-gestures.js.map +1 -1
  48. package/dist/dev/elements/wave-element.js +8 -1
  49. package/dist/dev/elements/wave-element.js.map +1 -1
  50. package/dist/dev/elements/waveform.d.ts +10 -0
  51. package/dist/dev/elements/waveform.js +129 -3
  52. package/dist/dev/elements/waveform.js.map +1 -1
  53. package/dist/dev/elements/xy.js +7 -1
  54. package/dist/dev/elements/xy.js.map +1 -1
  55. package/dist/dev/lib/zoom-gesture.js +20 -0
  56. package/dist/dev/lib/zoom-gesture.js.map +1 -0
  57. package/dist/styles/button.css +3 -1
  58. package/dist/styles/dial.css +3 -1
  59. package/dist/styles/envelope.css +3 -1
  60. package/dist/styles/led.css +3 -1
  61. package/dist/styles/material/arc.css +21 -0
  62. package/dist/styles/material/bracket.css +31 -0
  63. package/dist/styles/material/cap.css +179 -0
  64. package/dist/styles/material/core.css +103 -0
  65. package/dist/styles/material/glass.css +62 -0
  66. package/dist/styles/material/groove.css +10 -0
  67. package/dist/styles/material/keycap.css +95 -0
  68. package/dist/styles/material/lens.css +11 -0
  69. package/dist/styles/material/pane.css +97 -0
  70. package/dist/styles/material/readout.css +87 -0
  71. package/dist/styles/material/scale.css +30 -0
  72. package/dist/styles/material/value.css +43 -0
  73. package/dist/styles/material/well.css +24 -0
  74. package/dist/styles/material.css +15 -772
  75. package/dist/styles/meter.css +3 -1
  76. package/dist/styles/number.css +3 -1
  77. package/dist/styles/panel.css +3 -1
  78. package/dist/styles/ring.css +3 -1
  79. package/dist/styles/screen.css +3 -1
  80. package/dist/styles/segmented.css +3 -1
  81. package/dist/styles/slider.css +3 -1
  82. package/dist/styles/spectrum.css +3 -1
  83. package/dist/styles/switch.css +3 -1
  84. package/dist/styles/toggle.css +3 -1
  85. package/dist/styles/waveform.css +3 -1
  86. package/dist/styles/wavestrip.css +3 -1
  87. package/dist/styles/xy.css +3 -1
  88. package/package.json +2 -1
package/dist/styles/meter.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-meter-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -16,7 +18,7 @@
16
18
  initial-value: 4px;
17
19
  }
18
20
 
19
- @layer sonic {
21
+ @layer sonic.control {
20
22
  :is(sonic-meter, .sonic-meter) {
21
23
  --_sonic-meter-size: var(--sonic-meter-size, 0.5rem);
22
24
  --_sonic-meter-length: var(--sonic-meter-length, 8rem);
package/dist/styles/number.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-number-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -10,7 +12,7 @@
10
12
  initial-value: 160px;
11
13
  }
12
14
 
13
- @layer sonic {
15
+ @layer sonic.control {
14
16
  :is(sonic-number, .sonic-number) {
15
17
  --_sonic-number-size: var(--sonic-number-size, 1.75rem);
16
18
  --_sonic-number-aspect-ratio: var(--sonic-number-aspect-ratio, 3);
package/dist/styles/panel.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-panel-depth {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -10,7 +12,7 @@
10
12
  initial-value: 12px;
11
13
  }
12
14
 
13
- @layer sonic {
15
+ @layer sonic.control {
14
16
  :is(.sonic-panel, .sonic-panel-title, .sonic-panel-rule) {
15
17
  --_sonic-panel-line: color-mix(in oklab, currentcolor 20%, transparent);
16
18
  }
package/dist/styles/ring.css CHANGED
@@ -1,10 +1,12 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-ring-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
4
6
  initial-value: 40px;
5
7
  }
6
8
 
7
- @layer sonic {
9
+ @layer sonic.control {
8
10
  .sonic-ring {
9
11
  --_sonic-ring-size: var(--sonic-ring-size, 2.5rem);
10
12
  --_sonic-ring-ratio: var(--sonic-ring-ratio, 0.075);
package/dist/styles/screen.css CHANGED
@@ -1,10 +1,12 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-screen-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
4
6
  initial-value: 40px;
5
7
  }
6
8
 
7
- @layer sonic {
9
+ @layer sonic.control {
8
10
  .sonic-screen {
9
11
  --_sonic-screen-size: var(--sonic-screen-size, 2.5rem);
10
12
  --_sonic-screen-aspect-ratio: var(--sonic-screen-aspect-ratio, 3);
package/dist/styles/segmented.css CHANGED
@@ -1,10 +1,12 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-segmented-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
4
6
  initial-value: 32px;
5
7
  }
6
8
 
7
- @layer sonic {
9
+ @layer sonic.control {
8
10
  :is(sonic-segmented, .sonic-segmented) {
9
11
  --_sonic-segmented-size: var(--sonic-segmented-size, 2rem);
10
12
  }
package/dist/styles/slider.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-slider-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -22,7 +24,7 @@
22
24
  initial-value: 0;
23
25
  }
24
26
 
25
- @layer sonic {
27
+ @layer sonic.control {
26
28
  :is(sonic-slider, .sonic-slider) {
27
29
  --_sonic-slider-size: var(--sonic-slider-size, 2rem);
28
30
  --_sonic-slider-length: var(--sonic-slider-length, 8rem);
package/dist/styles/spectrum.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-spectrum-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -46,7 +48,7 @@
46
48
  initial-value: -3;
47
49
  }
48
50
 
49
- @layer sonic {
51
+ @layer sonic.control {
50
52
  :is(sonic-spectrum, .sonic-spectrum) {
51
53
  --_sonic-spectrum-size: var(--sonic-spectrum-size, 6rem);
52
54
  --_sonic-spectrum-length: var(--sonic-spectrum-length, 20rem);
package/dist/styles/switch.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-switch-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -10,7 +12,7 @@
10
12
  initial-value: 0;
11
13
  }
12
14
 
13
- @layer sonic {
15
+ @layer sonic.control {
14
16
  :is(sonic-switch, .sonic-switch) {
15
17
  --_sonic-switch-size: var(--sonic-switch-size, 2rem);
16
18
  }
package/dist/styles/toggle.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-toggle-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -22,7 +24,7 @@
22
24
  initial-value: transparent;
23
25
  }
24
26
 
25
- @layer sonic {
27
+ @layer sonic.control {
26
28
  :is(sonic-toggle, .sonic-toggle) {
27
29
  --_sonic-toggle-size: var(--sonic-toggle-size, 2rem);
28
30
  }
package/dist/styles/waveform.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-waveform-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -64,7 +66,7 @@
64
66
  initial-value: rgb(200 200 208);
65
67
  }
66
68
 
67
- @layer sonic {
69
+ @layer sonic.control {
68
70
  :is(sonic-waveform, .sonic-waveform) {
69
71
  --_sonic-waveform-size: var(--sonic-waveform-size, 6rem);
70
72
  --_sonic-waveform-length: var(--sonic-waveform-length, 20rem);
package/dist/styles/wavestrip.css CHANGED
@@ -1,3 +1,5 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-wavestrip-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
@@ -82,7 +84,7 @@
82
84
  initial-value: 48px;
83
85
  }
84
86
 
85
- @layer sonic {
87
+ @layer sonic.control {
86
88
  :is(sonic-wavestrip, .sonic-wavestrip) {
87
89
  --_sonic-wavestrip-size: var(--sonic-wavestrip-size, 3.5rem);
88
90
  --_sonic-wavestrip-length: var(--sonic-wavestrip-length, 16rem);
package/dist/styles/xy.css CHANGED
@@ -1,10 +1,12 @@
1
+ @layer sonic.material, sonic.control;
2
+
1
3
  @property --_sonic-xy-size {
2
4
  syntax: '<length>';
3
5
  inherits: true;
4
6
  initial-value: 128px;
5
7
  }
6
8
 
7
- @layer sonic {
9
+ @layer sonic.control {
8
10
  :is(sonic-xy, .sonic-xy) {
9
11
  --_sonic-xy-size: var(--sonic-xy-size, 8rem);
10
12
  --_sonic-xy-aspect-ratio: var(--sonic-xy-aspect-ratio, 1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsynaptic/sonic-ui",
3
- "version": "0.12.0",
3
+ "version": "0.13.0",
4
4
  "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
5
5
  "keywords": [
6
6
  "custom-elements",
@@ -55,6 +55,7 @@
55
55
  },
56
56
  "./controls.css": "./dist/styles/controls.css",
57
57
  "./material.css": "./dist/styles/material.css",
58
+ "./material/*.css": "./dist/styles/material/*.css",
58
59
  "./button.css": "./dist/styles/button.css",
59
60
  "./dial.css": "./dist/styles/dial.css",
60
61
  "./envelope.css": "./dist/styles/envelope.css",