@ghchinoy/lit-audio-ui 0.3.3 → 0.3.4

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 (4) hide show
  1. package/dist/components/ui-mic-selector.js +8 -7
  2. package/dist/components/ui-voice-picker.js +13 -12
  3. package/dist/scream-audio-ui.umd.js +21 -19
  4. package/package.json +1 -1
package/dist/components/ui-mic-selector.js CHANGED
@@ -35,6 +35,7 @@ var c = class extends t {
35
35
  display: inline-block;
36
36
  position: relative;
37
37
  font-family: inherit;
38
+ color-scheme: light dark;
38
39
  }
39
40
 
40
41
  .anchor-button {
@@ -42,11 +43,11 @@ var c = class extends t {
42
43
  align-items: center;
43
44
  gap: 8px;
44
45
  padding: 8px 16px;
45
- background: var(--md-sys-color-surface-container-high, #e2e2e2);
46
- color: var(--md-sys-color-on-surface, #1e1e1e);
46
+ background: var(--md-sys-color-surface-container-high, transparent);
47
+ color: var(--md-sys-color-on-surface);
47
48
  border-radius: 999px;
48
49
  cursor: pointer;
49
- border: none;
50
+ border: 1px solid var(--md-sys-color-outline-variant, currentColor);
50
51
  font-family: inherit;
51
52
  font-size: 14px;
52
53
  font-weight: 500;
@@ -55,7 +56,7 @@ var c = class extends t {
55
56
  }
56
57
 
57
58
  .anchor-button:hover:not(:disabled) {
58
- background: var(--md-sys-color-surface-container-highest, #e3e3e3);
59
+ background: var(--md-sys-color-surface-container-highest);
59
60
  }
60
61
 
61
62
  .anchor-button:disabled {
@@ -74,7 +75,7 @@ var c = class extends t {
74
75
  md-menu {
75
76
  --md-menu-container-color: var(
76
77
  --md-sys-color-surface-container,
77
- var(--md-sys-color-surface, #ffffff)
78
+ var(--md-sys-color-surface)
78
79
  );
79
80
  --md-menu-container-shape: 12px;
80
81
  min-width: 280px;
@@ -115,7 +116,7 @@ var c = class extends t {
115
116
  height: 24px;
116
117
  background: var(
117
118
  --md-sys-color-surface-variant,
118
- var(--md-sys-color-surface-container-highest, #e1e2e1)
119
+ var(--md-sys-color-surface-container-highest)
119
120
  );
120
121
  border-radius: 6px;
121
122
  overflow: hidden;
@@ -153,7 +154,7 @@ var c = class extends t {
153
154
  <md-menu
154
155
  id="device-menu"
155
156
  anchor="anchor-button"
156
- positioning="fixed"
157
+ positioning="popover"
157
158
  @closed=${() => this._isMenuOpen = !1}
158
159
  @opened=${() => this._isMenuOpen = !0}
159
160
  >
package/dist/components/ui-voice-picker.js CHANGED
@@ -32,6 +32,7 @@ var c = class extends t {
32
32
  display: inline-block;
33
33
  width: 100%;
34
34
  font-family: inherit;
35
+ color-scheme: light dark;
35
36
  }
36
37
 
37
38
  .anchor-button {
@@ -42,11 +43,11 @@ var c = class extends t {
42
43
  padding: 8px 16px;
43
44
  background: var(
44
45
  --ui-voice-picker-anchor-bg,
45
- var(--md-sys-color-surface-container-high, #e2e2e2)
46
+ var(--md-sys-color-surface-container-high, transparent)
46
47
  );
47
- border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
48
+ border: 1px solid var(--md-sys-color-outline-variant, currentColor);
48
49
  border-radius: 8px;
49
- color: var(--md-sys-color-on-surface, #1e1e1e);
50
+ color: var(--md-sys-color-on-surface);
50
51
  cursor: pointer;
51
52
  font-family: inherit;
52
53
  font-size: 14px;
@@ -57,13 +58,13 @@ var c = class extends t {
57
58
  }
58
59
 
59
60
  .anchor-button:hover {
60
- background: var(--md-sys-color-surface-container-highest, #e3e3e3);
61
+ background: var(--md-sys-color-surface-container-highest);
61
62
  }
62
63
 
63
64
  .anchor-button:focus-visible {
64
65
  outline: none;
65
- border-color: var(--md-sys-color-primary, #0066cc);
66
- box-shadow: 0 0 0 1px var(--md-sys-color-primary, #0066cc);
66
+ border-color: var(--md-sys-color-primary);
67
+ box-shadow: 0 0 0 1px var(--md-sys-color-primary);
67
68
  }
68
69
 
69
70
  .trigger-content {
@@ -86,8 +87,8 @@ var c = class extends t {
86
87
  width: 24px;
87
88
  height: 24px;
88
89
  border-radius: 50%;
89
- background: var(--md-sys-color-primary-container, #d1e4ff);
90
- color: var(--md-sys-color-on-primary-container, #001d36);
90
+ background: var(--md-sys-color-primary-container);
91
+ color: var(--md-sys-color-on-primary-container);
91
92
  display: flex;
92
93
  align-items: center;
93
94
  justify-content: center;
@@ -98,14 +99,14 @@ var c = class extends t {
98
99
  white-space: nowrap;
99
100
  overflow: hidden;
100
101
  text-overflow: ellipsis;
101
- color: var(--md-sys-color-on-surface, #1e1e1e);
102
+ color: var(--md-sys-color-on-surface);
102
103
  }
103
104
 
104
105
  md-menu {
105
106
  --md-menu-container-shape: 12px;
106
107
  --md-menu-container-color: var(
107
108
  --md-sys-color-surface-container,
108
- var(--md-sys-color-surface, #f3f3f3)
109
+ var(--md-sys-color-surface)
109
110
  );
110
111
  max-width: 400px;
111
112
  font-family: inherit;
@@ -115,7 +116,7 @@ var c = class extends t {
115
116
 
116
117
  .search-container {
117
118
  padding: 8px 12px;
118
- background: var(--md-sys-color-surface-container, #f3f3f3);
119
+ background: var(--md-sys-color-surface-container);
119
120
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
120
121
  font-family: inherit;
121
122
  }
@@ -284,7 +285,7 @@ var c = class extends t {
284
285
  <md-menu
285
286
  id="voice-menu"
286
287
  anchor="voice-anchor"
287
- positioning="fixed"
288
+ positioning="popover"
288
289
  @closed=${this._handleMenuClosed}
289
290
  >
290
291
  <!-- The click.stop modifier stops the menu from closing when searching -->
package/dist/scream-audio-ui.umd.js CHANGED
@@ -417,6 +417,7 @@
417
417
  display: inline-block;
418
418
  position: relative;
419
419
  font-family: inherit;
420
+ color-scheme: light dark;
420
421
  }
421
422
 
422
423
  .anchor-button {
@@ -424,11 +425,11 @@
424
425
  align-items: center;
425
426
  gap: 8px;
426
427
  padding: 8px 16px;
427
- background: var(--md-sys-color-surface-container-high, #e2e2e2);
428
- color: var(--md-sys-color-on-surface, #1e1e1e);
428
+ background: var(--md-sys-color-surface-container-high, transparent);
429
+ color: var(--md-sys-color-on-surface);
429
430
  border-radius: 999px;
430
431
  cursor: pointer;
431
- border: none;
432
+ border: 1px solid var(--md-sys-color-outline-variant, currentColor);
432
433
  font-family: inherit;
433
434
  font-size: 14px;
434
435
  font-weight: 500;
@@ -437,7 +438,7 @@
437
438
  }
438
439
 
439
440
  .anchor-button:hover:not(:disabled) {
440
- background: var(--md-sys-color-surface-container-highest, #e3e3e3);
441
+ background: var(--md-sys-color-surface-container-highest);
441
442
  }
442
443
 
443
444
  .anchor-button:disabled {
@@ -456,7 +457,7 @@
456
457
  md-menu {
457
458
  --md-menu-container-color: var(
458
459
  --md-sys-color-surface-container,
459
- var(--md-sys-color-surface, #ffffff)
460
+ var(--md-sys-color-surface)
460
461
  );
461
462
  --md-menu-container-shape: 12px;
462
463
  min-width: 280px;
@@ -497,7 +498,7 @@
497
498
  height: 24px;
498
499
  background: var(
499
500
  --md-sys-color-surface-variant,
500
- var(--md-sys-color-surface-container-highest, #e1e2e1)
501
+ var(--md-sys-color-surface-container-highest)
501
502
  );
502
503
  border-radius: 6px;
503
504
  overflow: hidden;
@@ -522,7 +523,7 @@
522
523
  <md-menu
523
524
  id="device-menu"
524
525
  anchor="anchor-button"
525
- positioning="fixed"
526
+ positioning="popover"
526
527
  @closed=${()=>this._isMenuOpen=!1}
527
528
  @opened=${()=>this._isMenuOpen=!0}
528
529
  >
@@ -570,6 +571,7 @@
570
571
  display: inline-block;
571
572
  width: 100%;
572
573
  font-family: inherit;
574
+ color-scheme: light dark;
573
575
  }
574
576
 
575
577
  .anchor-button {
@@ -580,11 +582,11 @@
580
582
  padding: 8px 16px;
581
583
  background: var(
582
584
  --ui-voice-picker-anchor-bg,
583
- var(--md-sys-color-surface-container-high, #e2e2e2)
585
+ var(--md-sys-color-surface-container-high, transparent)
584
586
  );
585
- border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
587
+ border: 1px solid var(--md-sys-color-outline-variant, currentColor);
586
588
  border-radius: 8px;
587
- color: var(--md-sys-color-on-surface, #1e1e1e);
589
+ color: var(--md-sys-color-on-surface);
588
590
  cursor: pointer;
589
591
  font-family: inherit;
590
592
  font-size: 14px;
@@ -595,13 +597,13 @@
595
597
  }
596
598
 
597
599
  .anchor-button:hover {
598
- background: var(--md-sys-color-surface-container-highest, #e3e3e3);
600
+ background: var(--md-sys-color-surface-container-highest);
599
601
  }
600
602
 
601
603
  .anchor-button:focus-visible {
602
604
  outline: none;
603
- border-color: var(--md-sys-color-primary, #0066cc);
604
- box-shadow: 0 0 0 1px var(--md-sys-color-primary, #0066cc);
605
+ border-color: var(--md-sys-color-primary);
606
+ box-shadow: 0 0 0 1px var(--md-sys-color-primary);
605
607
  }
606
608
 
607
609
  .trigger-content {
@@ -624,8 +626,8 @@
624
626
  width: 24px;
625
627
  height: 24px;
626
628
  border-radius: 50%;
627
- background: var(--md-sys-color-primary-container, #d1e4ff);
628
- color: var(--md-sys-color-on-primary-container, #001d36);
629
+ background: var(--md-sys-color-primary-container);
630
+ color: var(--md-sys-color-on-primary-container);
629
631
  display: flex;
630
632
  align-items: center;
631
633
  justify-content: center;
@@ -636,14 +638,14 @@
636
638
  white-space: nowrap;
637
639
  overflow: hidden;
638
640
  text-overflow: ellipsis;
639
- color: var(--md-sys-color-on-surface, #1e1e1e);
641
+ color: var(--md-sys-color-on-surface);
640
642
  }
641
643
 
642
644
  md-menu {
643
645
  --md-menu-container-shape: 12px;
644
646
  --md-menu-container-color: var(
645
647
  --md-sys-color-surface-container,
646
- var(--md-sys-color-surface, #f3f3f3)
648
+ var(--md-sys-color-surface)
647
649
  );
648
650
  max-width: 400px;
649
651
  font-family: inherit;
@@ -653,7 +655,7 @@
653
655
 
654
656
  .search-container {
655
657
  padding: 8px 12px;
656
- background: var(--md-sys-color-surface-container, #f3f3f3);
658
+ background: var(--md-sys-color-surface-container);
657
659
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
658
660
  font-family: inherit;
659
661
  }
@@ -814,7 +816,7 @@
814
816
  <md-menu
815
817
  id="voice-menu"
816
818
  anchor="voice-anchor"
817
- positioning="fixed"
819
+ positioning="popover"
818
820
  @closed=${this._handleMenuClosed}
819
821
  >
820
822
  <!-- The click.stop modifier stops the menu from closing when searching -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ghchinoy/lit-audio-ui",
3
- "version": "0.3.3",
3
+ "version": "0.3.4",
4
4
  "description": "A pure Lit WebComponents port of modern audio UI components",
5
5
  "author": "G. Hussain Chinoy",
6
6
  "license": "Apache-2.0",