@joewinke/jatui 0.2.21 → 0.2.23

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 (3) hide show
  1. package/dist/components/SearchDropdown.svelte +48 -51
  2. package/dist/meet/VideoTile.svelte +1 -0
  3. package/package.json +1 -1
package/dist/components/SearchDropdown.svelte CHANGED
@@ -375,13 +375,13 @@
375
375
  transition: background 0.15s, border-color 0.15s;
376
376
  min-height: 2rem;
377
377
  cursor: pointer;
378
- background: oklch(0.16 0.01 250);
379
- border: 1px solid oklch(0.25 0.02 250);
380
- color: oklch(0.85 0.02 250);
378
+ background: var(--color-base-200, oklch(0.16 0.01 250));
379
+ border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 30%, transparent);
380
+ color: var(--color-base-content, oklch(0.85 0.02 250));
381
381
  }
382
382
  .sd-trigger:hover:not(:disabled) {
383
- background: oklch(0.18 0.01 250);
384
- border-color: oklch(0.30 0.02 250);
383
+ background: color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 8%, var(--color-base-200, oklch(0.16 0.01 250)));
384
+ border-color: color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 45%, transparent);
385
385
  }
386
386
  .sd-trigger:disabled, .sd-disabled {
387
387
  opacity: 0.5;
@@ -394,9 +394,6 @@
394
394
  min-height: 2rem;
395
395
  padding: 0 0.75rem;
396
396
  border-radius: var(--rounded-btn, 0.5rem);
397
- background: var(--color-base-200, oklch(0.16 0.01 250));
398
- border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 30%, transparent);
399
- color: var(--color-base-content, oklch(0.85 0.02 250));
400
397
  }
401
398
  .sd-sm .sd-chevron {
402
399
  width: 0.625rem;
@@ -440,15 +437,15 @@
440
437
  text-transform: uppercase;
441
438
  letter-spacing: 0.025em;
442
439
  background: transparent;
443
- border: 1px solid color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 35%, transparent);
444
- color: color-mix(in oklch, var(--sd-color, oklch(0.7 0 0)) 85%, oklch(0.80 0 0));
440
+ border: 1px solid color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 35%, transparent);
441
+ color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.7 0 0))) 85%, var(--color-base-content, oklch(0.80 0 0)));
445
442
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
446
443
  }
447
444
  .sd-chip:hover:not(:disabled) {
448
- background: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 15%, transparent);
449
- border-color: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 50%, transparent);
450
- color: var(--sd-color, oklch(0.80 0 0));
451
- box-shadow: 0 0 6px color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 15%, transparent);
445
+ background: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 15%, transparent);
446
+ border-color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 50%, transparent);
447
+ color: var(--sd-color, var(--color-base-content, oklch(0.80 0 0)));
448
+ box-shadow: 0 0 6px color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 15%, transparent);
452
449
  }
453
450
 
454
451
  .sd-trigger-label {
@@ -488,12 +485,12 @@
488
485
  background: none;
489
486
  border: none;
490
487
  cursor: pointer;
491
- color: oklch(0.50 0.02 250);
488
+ color: color-mix(in oklch, var(--color-base-content, oklch(0.50 0.02 250)) 55%, transparent);
492
489
  transition: color 0.1s, background 0.1s;
493
490
  }
494
491
  .sd-clear:hover {
495
- color: oklch(0.75 0.15 30);
496
- background: oklch(0.75 0.15 30 / 0.12);
492
+ color: var(--color-error, oklch(0.75 0.15 30));
493
+ background: color-mix(in oklch, var(--color-error, oklch(0.75 0.15 30)) 12%, transparent);
497
494
  }
498
495
 
499
496
  .sd-chevron {
@@ -501,7 +498,7 @@
501
498
  height: 0.75rem;
502
499
  flex-shrink: 0;
503
500
  transition: transform 0.15s;
504
- color: oklch(0.50 0.02 250);
501
+ color: color-mix(in oklch, var(--color-base-content, oklch(0.50 0.02 250)) 55%, transparent);
505
502
  }
506
503
  .sd-chevron-open {
507
504
  transform: rotate(180deg);
@@ -513,7 +510,7 @@
513
510
  }
514
511
  .sd-embedded .sd-search {
515
512
  background: transparent;
516
- border-bottom: 1px solid oklch(0.22 0.02 250);
513
+ border-bottom: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.22 0.02 250)) 25%, transparent);
517
514
  }
518
515
  .sd-embedded .sd-list {
519
516
  max-height: none;
@@ -530,8 +527,8 @@
530
527
  border-radius: 0.5rem;
531
528
  overflow: hidden;
532
529
  box-shadow: 0 4px 24px oklch(0 0 0 / 0.4);
533
- background: oklch(0.16 0.01 250);
534
- border: 1px solid oklch(0.25 0.02 250);
530
+ background: var(--color-base-200, oklch(0.16 0.01 250));
531
+ border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 30%, transparent);
535
532
  }
536
533
 
537
534
  .sd-panel-dropup {
@@ -544,21 +541,21 @@
544
541
 
545
542
  /* Header section */
546
543
  .sd-header {
547
- border-bottom: 1px solid oklch(0.25 0.02 250);
544
+ border-bottom: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.25 0.02 250)) 25%, transparent);
548
545
  }
549
546
 
550
547
  /* Search section */
551
548
  .sd-search {
552
549
  padding: 0.375rem 0.5rem;
553
- border-bottom: 1px solid oklch(0.25 0.02 250);
554
- background: oklch(0.13 0.01 250);
550
+ border-bottom: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.25 0.02 250)) 25%, transparent);
551
+ background: var(--color-base-300, oklch(0.13 0.01 250));
555
552
  }
556
553
  .sd-search-inner {
557
554
  display: flex;
558
555
  align-items: center;
559
556
  gap: 0.375rem;
560
- background: oklch(0.19 0.01 250);
561
- border: 1px solid oklch(0.28 0.02 250);
557
+ background: color-mix(in oklch, var(--color-base-content, oklch(0.19 0.01 250)) 10%, var(--color-base-200, oklch(0.19 0.01 250)));
558
+ border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.28 0.02 250)) 28%, transparent);
562
559
  border-radius: 0.25rem;
563
560
  padding: 0.2rem 0.4rem;
564
561
  }
@@ -566,22 +563,22 @@
566
563
  width: 0.75rem;
567
564
  height: 0.75rem;
568
565
  flex-shrink: 0;
569
- color: oklch(0.60 0.04 250);
566
+ color: color-mix(in oklch, var(--color-base-content, oklch(0.60 0.04 250)) 60%, transparent);
570
567
  }
571
568
  .sd-search-input {
572
569
  width: 100%;
573
570
  background: transparent;
574
571
  font-size: 0.6875rem;
575
572
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
576
- color: oklch(0.85 0.02 250);
573
+ color: var(--color-base-content, oklch(0.85 0.02 250));
577
574
  border: none;
578
575
  outline: none;
579
576
  }
580
577
  .sd-search-input::placeholder {
581
- color: oklch(0.52 0.03 250);
578
+ color: color-mix(in oklch, var(--color-base-content, oklch(0.52 0.03 250)) 40%, transparent);
582
579
  }
583
580
  .sd-search-clear {
584
- color: oklch(0.50 0.02 250);
581
+ color: color-mix(in oklch, var(--color-base-content, oklch(0.50 0.02 250)) 55%, transparent);
585
582
  background: none;
586
583
  border: none;
587
584
  cursor: pointer;
@@ -589,7 +586,7 @@
589
586
  display: flex;
590
587
  }
591
588
  .sd-search-clear:hover {
592
- color: oklch(0.75 0.15 30);
589
+ color: var(--color-error, oklch(0.75 0.15 30));
593
590
  }
594
591
 
595
592
  /* Options list */
@@ -610,7 +607,7 @@
610
607
  font-weight: 600;
611
608
  text-transform: uppercase;
612
609
  letter-spacing: 0.05em;
613
- color: oklch(0.50 0.10 250);
610
+ color: color-mix(in oklch, var(--color-base-content, oklch(0.50 0.10 250)) 55%, transparent);
614
611
  }
615
612
 
616
613
  .sd-option {
@@ -627,22 +624,22 @@
627
624
  background: transparent;
628
625
  border: none;
629
626
  border-left: 2px solid transparent;
630
- color: oklch(0.80 0.02 250);
627
+ color: color-mix(in oklch, var(--color-base-content, oklch(0.80 0.02 250)) 90%, transparent);
631
628
  }
632
629
  .sd-option:hover {
633
- background: oklch(0.19 0.01 250);
630
+ background: color-mix(in oklch, var(--color-base-content, oklch(0.19 0.01 250)) 8%, var(--color-base-200, oklch(0.19 0.01 250)));
634
631
  }
635
632
  .sd-option-selected {
636
- background: oklch(0.20 0.02 250);
637
- border-left-color: oklch(0.65 0.15 250);
633
+ background: color-mix(in oklch, var(--color-base-content, oklch(0.20 0.02 250)) 12%, var(--color-base-200, oklch(0.20 0.02 250)));
634
+ border-left-color: var(--color-primary, oklch(0.65 0.15 250));
638
635
  }
639
636
  .sd-option-highlighted {
640
- background: oklch(0.22 0.02 250);
641
- outline: 1px solid oklch(0.45 0.10 250 / 0.5);
637
+ background: color-mix(in oklch, var(--color-base-content, oklch(0.22 0.02 250)) 16%, var(--color-base-200, oklch(0.22 0.02 250)));
638
+ outline: 1px solid color-mix(in oklch, var(--color-primary, oklch(0.45 0.10 250)) 50%, transparent);
642
639
  outline-offset: -1px;
643
640
  }
644
641
  .sd-option-highlighted.sd-option-selected {
645
- background: oklch(0.24 0.03 250);
642
+ background: color-mix(in oklch, var(--color-base-content, oklch(0.24 0.03 250)) 20%, var(--color-base-200, oklch(0.24 0.03 250)));
646
643
  }
647
644
 
648
645
  /* Chip variant — options render as inline chip pills */
@@ -651,7 +648,7 @@
651
648
  padding: 0.25rem 0.625rem;
652
649
  }
653
650
  .sd-chip-wrap .sd-option-selected {
654
- background: oklch(0.19 0.01 250);
651
+ background: color-mix(in oklch, var(--color-base-content, oklch(0.19 0.01 250)) 8%, var(--color-base-200, oklch(0.19 0.01 250)));
655
652
  border-left: none;
656
653
  }
657
654
  .sd-option-chip {
@@ -663,20 +660,20 @@
663
660
  font-weight: 600;
664
661
  text-transform: uppercase;
665
662
  letter-spacing: 0.025em;
666
- border: 1px solid color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 35%, transparent);
667
- color: color-mix(in oklch, var(--sd-color, oklch(0.7 0 0)) 85%, oklch(0.80 0 0));
663
+ border: 1px solid color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 35%, transparent);
664
+ color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.7 0 0))) 85%, var(--color-base-content, oklch(0.80 0 0)));
668
665
  background: transparent;
669
666
  transition: background 0.1s, border-color 0.1s, color 0.1s;
670
667
  }
671
668
  .sd-chip-wrap .sd-option:hover .sd-option-chip {
672
- background: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 12%, transparent);
673
- border-color: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 50%, transparent);
674
- color: var(--sd-color, oklch(0.80 0 0));
669
+ background: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 12%, transparent);
670
+ border-color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 50%, transparent);
671
+ color: var(--sd-color, var(--color-base-content, oklch(0.80 0 0)));
675
672
  }
676
673
  .sd-chip-wrap .sd-option-selected .sd-option-chip {
677
- background: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 15%, transparent);
678
- border-color: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 50%, transparent);
679
- color: var(--sd-color, oklch(0.80 0 0));
674
+ background: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 15%, transparent);
675
+ border-color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 50%, transparent);
676
+ color: var(--sd-color, var(--color-base-content, oklch(0.80 0 0)));
680
677
  }
681
678
 
682
679
  .sd-option-icon {
@@ -691,11 +688,11 @@
691
688
  height: 0.75rem;
692
689
  flex-shrink: 0;
693
690
  margin-left: auto;
694
- color: oklch(0.70 0.15 145);
691
+ color: var(--color-success, oklch(0.70 0.15 145));
695
692
  }
696
693
 
697
694
  .sd-footer {
698
- border-top: 1px solid oklch(0.22 0.02 250);
695
+ border-top: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.22 0.02 250)) 25%, transparent);
699
696
  }
700
697
 
701
698
  .sd-empty {
@@ -703,6 +700,6 @@
703
700
  text-align: center;
704
701
  font-size: 0.625rem;
705
702
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
706
- color: oklch(0.45 0.02 250);
703
+ color: color-mix(in oklch, var(--color-base-content, oklch(0.45 0.02 250)) 45%, transparent);
707
704
  }
708
705
  </style>
package/dist/meet/VideoTile.svelte CHANGED
@@ -71,6 +71,7 @@
71
71
  class:ring-success={participant.isSpeaking}
72
72
  style="border-radius: var(--jatui-radius-box);"
73
73
  aria-label={`${participant.name}${participant.micMuted ? ', muted' : ''}${participant.cameraOff ? ', camera off' : ''}`}
74
+ data-participant-id={participant.id}
74
75
  >
75
76
  <!-- svelte-ignore a11y_media_has_caption -->
76
77
  <video
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@joewinke/jatui",
3
- "version": "0.2.21",
3
+ "version": "0.2.23",
4
4
  "private": false,
5
5
  "description": "Shared Svelte 5 component library for JAT projects",
6
6
  "type": "module",