@vsn-ux/gaia-styles 0.2.3 → 0.2.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 (11) hide show
  1. package/dist/all-no-reset-10pt.css +54 -20
  2. package/dist/all-no-reset.css +54 -20
  3. package/dist/all.css +54 -20
  4. package/dist/components/dropdown.css +7 -5
  5. package/dist/components/input.css +15 -13
  6. package/dist/components/menu.css +37 -2
  7. package/dist/components.css +54 -20
  8. package/package.json +1 -1
  9. package/src/styles/components/dropdown.css +4 -4
  10. package/src/styles/components/input.css +13 -7
  11. package/src/styles/components/menu.css +27 -3
package/dist/all-no-reset-10pt.css CHANGED
@@ -481,7 +481,7 @@
481
481
  }
482
482
  .ga-dropdown {
483
483
  display: flex;
484
- max-height: calc(0.4rem * 41);
484
+ max-height: calc(0.4rem * 81);
485
485
  min-width: calc(0.4rem * 36);
486
486
  flex-direction: column;
487
487
  align-items: stretch;
@@ -497,6 +497,7 @@
497
497
  position: relative;
498
498
  display: flex;
499
499
  height: calc(0.4rem * 9);
500
+ flex-shrink: 0;
500
501
  cursor: pointer;
501
502
  flex-direction: row;
502
503
  align-items: center;
@@ -545,10 +546,10 @@
545
546
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
546
547
  &::after {
547
548
  position: absolute;
548
- top: 2px;
549
- left: 2px;
550
- height: calc(100% - 4px);
551
- width: calc(100% - 4px);
549
+ top: calc(0.4rem * 0);
550
+ left: calc(0.4rem * 0);
551
+ height: 100%;
552
+ width: 100%;
552
553
  border-radius: var(--ga-radius);
553
554
  border-style: var(--tw-border-style);
554
555
  border-width: 2px;
@@ -558,6 +559,7 @@
558
559
  }
559
560
  }
560
561
  .ga-dropdown__caption {
562
+ flex-shrink: 0;
561
563
  padding-inline: calc(0.4rem * 3);
562
564
  padding-top: calc(0.4rem * 3);
563
565
  padding-bottom: calc(0.4rem * 2);
@@ -616,7 +618,7 @@
616
618
  font-size: var(--ga-size-font-md);
617
619
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
618
620
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
619
- &:has(input:hover), &:is(input:hover) {
621
+ &:hover {
620
622
  border-color: var(--ga-color-border-action-hover);
621
623
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
622
624
  background-color: var(--ga-color-surface-action-hover-2);
@@ -628,10 +630,12 @@
628
630
  color: var(--ga-color-text-disable-selected);
629
631
  }
630
632
  &:has(input:focus), &:is(input:focus) {
631
- border-color: var(--ga-color-border-focus);
632
- outline-style: var(--tw-outline-style);
633
- outline-width: 1px;
634
- outline-color: var(--ga-color-border-focus);
633
+ &:not(.ga-input--invalid) {
634
+ border-color: var(--ga-color-border-focus);
635
+ outline-style: var(--tw-outline-style);
636
+ outline-width: 1px;
637
+ outline-color: var(--ga-color-border-focus);
638
+ }
635
639
  }
636
640
  &.ga-input--invalid {
637
641
  border-color: var(--ga-color-border-error);
@@ -642,20 +646,20 @@
642
646
  background-color: var(--ga-color-surface-error);
643
647
  }
644
648
  }
645
- input {
646
- height: calc(0.4rem * 6);
647
- width: 100%;
649
+ input, &:is(input) {
648
650
  min-width: calc(0.4rem * 0);
649
651
  --tw-leading: calc(0.4rem * 6);
650
652
  line-height: calc(0.4rem * 6);
653
+ &::placeholder {
654
+ color: var(--ga-color-text-disabled);
655
+ }
656
+ }
657
+ input {
658
+ height: calc(0.4rem * 6);
659
+ width: 100%;
651
660
  --tw-outline-style: none;
652
661
  outline-style: none;
653
662
  }
654
- &:is(input) {
655
- min-width: calc(0.4rem * 0);
656
- --tw-leading: calc(0.4rem * 6);
657
- line-height: calc(0.4rem * 6);
658
- }
659
663
  }
660
664
  .ga-notification {
661
665
  display: inline-flex;
@@ -735,6 +739,7 @@
735
739
  border-color: var(--ga-color-border-primary);
736
740
  background-color: var(--ga-color-surface-primary);
737
741
  .ga-menu__item {
742
+ position: relative;
738
743
  display: flex;
739
744
  height: calc(0.4rem * 9);
740
745
  cursor: pointer;
@@ -764,9 +769,39 @@
764
769
  background-color: var(--ga-color-surface-action-hover-2);
765
770
  color: var(--ga-color-text-action-hover);
766
771
  }
767
- &:active {
772
+ &:focus, &:focus-visible {
773
+ --tw-outline-style: none;
774
+ outline-style: none;
775
+ }
776
+ &.ga-menu__item--disabled {
777
+ background-color: var(--ga-color-surface-primary);
778
+ color: var(--ga-color-text-disabled);
779
+ }
780
+ &.ga-menu__item--selected {
768
781
  background-color: var(--ga-color-surface-action);
769
782
  color: var(--ga-color-text-on-action);
783
+ &:hover {
784
+ background-color: var(--ga-color-surface-action-hover);
785
+ }
786
+ &.ga-menu__item--disabled {
787
+ background-color: var(--ga-color-surface-primary);
788
+ color: var(--ga-color-text-disable-selected);
789
+ }
790
+ }
791
+ }
792
+ &:not(:focus-within) .ga-menu__item.ga-menu__item--active, .ga-menu__item:focus-visible {
793
+ &::after {
794
+ position: absolute;
795
+ top: 1px;
796
+ left: 1px;
797
+ height: calc(100% - 2px);
798
+ width: calc(100% - 2px);
799
+ border-radius: var(--ga-radius);
800
+ border-style: var(--tw-border-style);
801
+ border-width: 2px;
802
+ border-color: var(--ga-color-border-focus);
803
+ --tw-content: '';
804
+ content: var(--tw-content);
770
805
  }
771
806
  }
772
807
  .ga-menu__separator {
@@ -784,7 +819,6 @@
784
819
  letter-spacing: var(--tw-tracking, 0);
785
820
  --tw-font-weight: 600;
786
821
  font-weight: 600;
787
- color: var(--ga-color-text-disable-selected);
788
822
  }
789
823
  }
790
824
  .ga-radio-group {
package/dist/all-no-reset.css CHANGED
@@ -481,7 +481,7 @@
481
481
  }
482
482
  .ga-dropdown {
483
483
  display: flex;
484
- max-height: calc(0.25rem * 41);
484
+ max-height: calc(0.25rem * 81);
485
485
  min-width: calc(0.25rem * 36);
486
486
  flex-direction: column;
487
487
  align-items: stretch;
@@ -497,6 +497,7 @@
497
497
  position: relative;
498
498
  display: flex;
499
499
  height: calc(0.25rem * 9);
500
+ flex-shrink: 0;
500
501
  cursor: pointer;
501
502
  flex-direction: row;
502
503
  align-items: center;
@@ -545,10 +546,10 @@
545
546
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
546
547
  &::after {
547
548
  position: absolute;
548
- top: 2px;
549
- left: 2px;
550
- height: calc(100% - 4px);
551
- width: calc(100% - 4px);
549
+ top: calc(0.25rem * 0);
550
+ left: calc(0.25rem * 0);
551
+ height: 100%;
552
+ width: 100%;
552
553
  border-radius: var(--ga-radius);
553
554
  border-style: var(--tw-border-style);
554
555
  border-width: 2px;
@@ -558,6 +559,7 @@
558
559
  }
559
560
  }
560
561
  .ga-dropdown__caption {
562
+ flex-shrink: 0;
561
563
  padding-inline: calc(0.25rem * 3);
562
564
  padding-top: calc(0.25rem * 3);
563
565
  padding-bottom: calc(0.25rem * 2);
@@ -616,7 +618,7 @@
616
618
  font-size: var(--ga-size-font-md);
617
619
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
618
620
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
619
- &:has(input:hover), &:is(input:hover) {
621
+ &:hover {
620
622
  border-color: var(--ga-color-border-action-hover);
621
623
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
622
624
  background-color: var(--ga-color-surface-action-hover-2);
@@ -628,10 +630,12 @@
628
630
  color: var(--ga-color-text-disable-selected);
629
631
  }
630
632
  &:has(input:focus), &:is(input:focus) {
631
- border-color: var(--ga-color-border-focus);
632
- outline-style: var(--tw-outline-style);
633
- outline-width: 1px;
634
- outline-color: var(--ga-color-border-focus);
633
+ &:not(.ga-input--invalid) {
634
+ border-color: var(--ga-color-border-focus);
635
+ outline-style: var(--tw-outline-style);
636
+ outline-width: 1px;
637
+ outline-color: var(--ga-color-border-focus);
638
+ }
635
639
  }
636
640
  &.ga-input--invalid {
637
641
  border-color: var(--ga-color-border-error);
@@ -642,20 +646,20 @@
642
646
  background-color: var(--ga-color-surface-error);
643
647
  }
644
648
  }
645
- input {
646
- height: calc(0.25rem * 6);
647
- width: 100%;
649
+ input, &:is(input) {
648
650
  min-width: calc(0.25rem * 0);
649
651
  --tw-leading: calc(0.25rem * 6);
650
652
  line-height: calc(0.25rem * 6);
653
+ &::placeholder {
654
+ color: var(--ga-color-text-disabled);
655
+ }
656
+ }
657
+ input {
658
+ height: calc(0.25rem * 6);
659
+ width: 100%;
651
660
  --tw-outline-style: none;
652
661
  outline-style: none;
653
662
  }
654
- &:is(input) {
655
- min-width: calc(0.25rem * 0);
656
- --tw-leading: calc(0.25rem * 6);
657
- line-height: calc(0.25rem * 6);
658
- }
659
663
  }
660
664
  .ga-notification {
661
665
  display: inline-flex;
@@ -735,6 +739,7 @@
735
739
  border-color: var(--ga-color-border-primary);
736
740
  background-color: var(--ga-color-surface-primary);
737
741
  .ga-menu__item {
742
+ position: relative;
738
743
  display: flex;
739
744
  height: calc(0.25rem * 9);
740
745
  cursor: pointer;
@@ -764,9 +769,39 @@
764
769
  background-color: var(--ga-color-surface-action-hover-2);
765
770
  color: var(--ga-color-text-action-hover);
766
771
  }
767
- &:active {
772
+ &:focus, &:focus-visible {
773
+ --tw-outline-style: none;
774
+ outline-style: none;
775
+ }
776
+ &.ga-menu__item--disabled {
777
+ background-color: var(--ga-color-surface-primary);
778
+ color: var(--ga-color-text-disabled);
779
+ }
780
+ &.ga-menu__item--selected {
768
781
  background-color: var(--ga-color-surface-action);
769
782
  color: var(--ga-color-text-on-action);
783
+ &:hover {
784
+ background-color: var(--ga-color-surface-action-hover);
785
+ }
786
+ &.ga-menu__item--disabled {
787
+ background-color: var(--ga-color-surface-primary);
788
+ color: var(--ga-color-text-disable-selected);
789
+ }
790
+ }
791
+ }
792
+ &:not(:focus-within) .ga-menu__item.ga-menu__item--active, .ga-menu__item:focus-visible {
793
+ &::after {
794
+ position: absolute;
795
+ top: 1px;
796
+ left: 1px;
797
+ height: calc(100% - 2px);
798
+ width: calc(100% - 2px);
799
+ border-radius: var(--ga-radius);
800
+ border-style: var(--tw-border-style);
801
+ border-width: 2px;
802
+ border-color: var(--ga-color-border-focus);
803
+ --tw-content: '';
804
+ content: var(--tw-content);
770
805
  }
771
806
  }
772
807
  .ga-menu__separator {
@@ -784,7 +819,6 @@
784
819
  letter-spacing: var(--tw-tracking, 0);
785
820
  --tw-font-weight: 600;
786
821
  font-weight: 600;
787
- color: var(--ga-color-text-disable-selected);
788
822
  }
789
823
  }
790
824
  .ga-radio-group {
package/dist/all.css CHANGED
@@ -624,7 +624,7 @@
624
624
  }
625
625
  .ga-dropdown {
626
626
  display: flex;
627
- max-height: calc(0.25rem * 41);
627
+ max-height: calc(0.25rem * 81);
628
628
  min-width: calc(0.25rem * 36);
629
629
  flex-direction: column;
630
630
  align-items: stretch;
@@ -640,6 +640,7 @@
640
640
  position: relative;
641
641
  display: flex;
642
642
  height: calc(0.25rem * 9);
643
+ flex-shrink: 0;
643
644
  cursor: pointer;
644
645
  flex-direction: row;
645
646
  align-items: center;
@@ -688,10 +689,10 @@
688
689
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
689
690
  &::after {
690
691
  position: absolute;
691
- top: 2px;
692
- left: 2px;
693
- height: calc(100% - 4px);
694
- width: calc(100% - 4px);
692
+ top: calc(0.25rem * 0);
693
+ left: calc(0.25rem * 0);
694
+ height: 100%;
695
+ width: 100%;
695
696
  border-radius: var(--ga-radius);
696
697
  border-style: var(--tw-border-style);
697
698
  border-width: 2px;
@@ -701,6 +702,7 @@
701
702
  }
702
703
  }
703
704
  .ga-dropdown__caption {
705
+ flex-shrink: 0;
704
706
  padding-inline: calc(0.25rem * 3);
705
707
  padding-top: calc(0.25rem * 3);
706
708
  padding-bottom: calc(0.25rem * 2);
@@ -759,7 +761,7 @@
759
761
  font-size: var(--ga-size-font-md);
760
762
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
761
763
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
762
- &:has(input:hover), &:is(input:hover) {
764
+ &:hover {
763
765
  border-color: var(--ga-color-border-action-hover);
764
766
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
765
767
  background-color: var(--ga-color-surface-action-hover-2);
@@ -771,10 +773,12 @@
771
773
  color: var(--ga-color-text-disable-selected);
772
774
  }
773
775
  &:has(input:focus), &:is(input:focus) {
774
- border-color: var(--ga-color-border-focus);
775
- outline-style: var(--tw-outline-style);
776
- outline-width: 1px;
777
- outline-color: var(--ga-color-border-focus);
776
+ &:not(.ga-input--invalid) {
777
+ border-color: var(--ga-color-border-focus);
778
+ outline-style: var(--tw-outline-style);
779
+ outline-width: 1px;
780
+ outline-color: var(--ga-color-border-focus);
781
+ }
778
782
  }
779
783
  &.ga-input--invalid {
780
784
  border-color: var(--ga-color-border-error);
@@ -785,20 +789,20 @@
785
789
  background-color: var(--ga-color-surface-error);
786
790
  }
787
791
  }
788
- input {
789
- height: calc(0.25rem * 6);
790
- width: 100%;
792
+ input, &:is(input) {
791
793
  min-width: calc(0.25rem * 0);
792
794
  --tw-leading: calc(0.25rem * 6);
793
795
  line-height: calc(0.25rem * 6);
796
+ &::placeholder {
797
+ color: var(--ga-color-text-disabled);
798
+ }
799
+ }
800
+ input {
801
+ height: calc(0.25rem * 6);
802
+ width: 100%;
794
803
  --tw-outline-style: none;
795
804
  outline-style: none;
796
805
  }
797
- &:is(input) {
798
- min-width: calc(0.25rem * 0);
799
- --tw-leading: calc(0.25rem * 6);
800
- line-height: calc(0.25rem * 6);
801
- }
802
806
  }
803
807
  .ga-notification {
804
808
  display: inline-flex;
@@ -878,6 +882,7 @@
878
882
  border-color: var(--ga-color-border-primary);
879
883
  background-color: var(--ga-color-surface-primary);
880
884
  .ga-menu__item {
885
+ position: relative;
881
886
  display: flex;
882
887
  height: calc(0.25rem * 9);
883
888
  cursor: pointer;
@@ -907,9 +912,39 @@
907
912
  background-color: var(--ga-color-surface-action-hover-2);
908
913
  color: var(--ga-color-text-action-hover);
909
914
  }
910
- &:active {
915
+ &:focus, &:focus-visible {
916
+ --tw-outline-style: none;
917
+ outline-style: none;
918
+ }
919
+ &.ga-menu__item--disabled {
920
+ background-color: var(--ga-color-surface-primary);
921
+ color: var(--ga-color-text-disabled);
922
+ }
923
+ &.ga-menu__item--selected {
911
924
  background-color: var(--ga-color-surface-action);
912
925
  color: var(--ga-color-text-on-action);
926
+ &:hover {
927
+ background-color: var(--ga-color-surface-action-hover);
928
+ }
929
+ &.ga-menu__item--disabled {
930
+ background-color: var(--ga-color-surface-primary);
931
+ color: var(--ga-color-text-disable-selected);
932
+ }
933
+ }
934
+ }
935
+ &:not(:focus-within) .ga-menu__item.ga-menu__item--active, .ga-menu__item:focus-visible {
936
+ &::after {
937
+ position: absolute;
938
+ top: 1px;
939
+ left: 1px;
940
+ height: calc(100% - 2px);
941
+ width: calc(100% - 2px);
942
+ border-radius: var(--ga-radius);
943
+ border-style: var(--tw-border-style);
944
+ border-width: 2px;
945
+ border-color: var(--ga-color-border-focus);
946
+ --tw-content: '';
947
+ content: var(--tw-content);
913
948
  }
914
949
  }
915
950
  .ga-menu__separator {
@@ -927,7 +962,6 @@
927
962
  letter-spacing: var(--tw-tracking, 0);
928
963
  --tw-font-weight: 600;
929
964
  font-weight: 600;
930
- color: var(--ga-color-text-disable-selected);
931
965
  }
932
966
  }
933
967
  .ga-radio-group {
package/dist/components/dropdown.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
2
2
  .ga-dropdown {
3
3
  display: flex;
4
- max-height: calc(0.25rem * 41);
4
+ max-height: calc(0.25rem * 81);
5
5
  min-width: calc(0.25rem * 36);
6
6
  flex-direction: column;
7
7
  align-items: stretch;
@@ -17,6 +17,7 @@
17
17
  position: relative;
18
18
  display: flex;
19
19
  height: calc(0.25rem * 9);
20
+ flex-shrink: 0;
20
21
  cursor: pointer;
21
22
  flex-direction: row;
22
23
  align-items: center;
@@ -65,10 +66,10 @@
65
66
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
66
67
  &::after {
67
68
  position: absolute;
68
- top: 2px;
69
- left: 2px;
70
- height: calc(100% - 4px);
71
- width: calc(100% - 4px);
69
+ top: calc(0.25rem * 0);
70
+ left: calc(0.25rem * 0);
71
+ height: 100%;
72
+ width: 100%;
72
73
  border-radius: var(--ga-radius);
73
74
  border-style: var(--tw-border-style);
74
75
  border-width: 2px;
@@ -78,6 +79,7 @@
78
79
  }
79
80
  }
80
81
  .ga-dropdown__caption {
82
+ flex-shrink: 0;
81
83
  padding-inline: calc(0.25rem * 3);
82
84
  padding-top: calc(0.25rem * 3);
83
85
  padding-bottom: calc(0.25rem * 2);
package/dist/components/input.css CHANGED
@@ -16,7 +16,7 @@
16
16
  font-size: var(--ga-size-font-md);
17
17
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
18
18
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
19
- &:has(input:hover), &:is(input:hover) {
19
+ &:hover {
20
20
  border-color: var(--ga-color-border-action-hover);
21
21
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
22
22
  background-color: var(--ga-color-surface-action-hover-2);
@@ -28,10 +28,12 @@
28
28
  color: var(--ga-color-text-disable-selected);
29
29
  }
30
30
  &:has(input:focus), &:is(input:focus) {
31
- border-color: var(--ga-color-border-focus);
32
- outline-style: var(--tw-outline-style);
33
- outline-width: 1px;
34
- outline-color: var(--ga-color-border-focus);
31
+ &:not(.ga-input--invalid) {
32
+ border-color: var(--ga-color-border-focus);
33
+ outline-style: var(--tw-outline-style);
34
+ outline-width: 1px;
35
+ outline-color: var(--ga-color-border-focus);
36
+ }
35
37
  }
36
38
  &.ga-input--invalid {
37
39
  border-color: var(--ga-color-border-error);
@@ -42,20 +44,20 @@
42
44
  background-color: var(--ga-color-surface-error);
43
45
  }
44
46
  }
45
- input {
46
- height: calc(0.25rem * 6);
47
- width: 100%;
47
+ input, &:is(input) {
48
48
  min-width: calc(0.25rem * 0);
49
49
  --tw-leading: calc(0.25rem * 6);
50
50
  line-height: calc(0.25rem * 6);
51
+ &::placeholder {
52
+ color: var(--ga-color-text-disabled);
53
+ }
54
+ }
55
+ input {
56
+ height: calc(0.25rem * 6);
57
+ width: 100%;
51
58
  --tw-outline-style: none;
52
59
  outline-style: none;
53
60
  }
54
- &:is(input) {
55
- min-width: calc(0.25rem * 0);
56
- --tw-leading: calc(0.25rem * 6);
57
- line-height: calc(0.25rem * 6);
58
- }
59
61
  }
60
62
  @property --tw-border-style {
61
63
  syntax: "*";
package/dist/components/menu.css CHANGED
@@ -10,6 +10,7 @@
10
10
  border-color: var(--ga-color-border-primary);
11
11
  background-color: var(--ga-color-surface-primary);
12
12
  .ga-menu__item {
13
+ position: relative;
13
14
  display: flex;
14
15
  height: calc(0.25rem * 9);
15
16
  cursor: pointer;
@@ -39,9 +40,39 @@
39
40
  background-color: var(--ga-color-surface-action-hover-2);
40
41
  color: var(--ga-color-text-action-hover);
41
42
  }
42
- &:active {
43
+ &:focus, &:focus-visible {
44
+ --tw-outline-style: none;
45
+ outline-style: none;
46
+ }
47
+ &.ga-menu__item--disabled {
48
+ background-color: var(--ga-color-surface-primary);
49
+ color: var(--ga-color-text-disabled);
50
+ }
51
+ &.ga-menu__item--selected {
43
52
  background-color: var(--ga-color-surface-action);
44
53
  color: var(--ga-color-text-on-action);
54
+ &:hover {
55
+ background-color: var(--ga-color-surface-action-hover);
56
+ }
57
+ &.ga-menu__item--disabled {
58
+ background-color: var(--ga-color-surface-primary);
59
+ color: var(--ga-color-text-disable-selected);
60
+ }
61
+ }
62
+ }
63
+ &:not(:focus-within) .ga-menu__item.ga-menu__item--active, .ga-menu__item:focus-visible {
64
+ &::after {
65
+ position: absolute;
66
+ top: 1px;
67
+ left: 1px;
68
+ height: calc(100% - 2px);
69
+ width: calc(100% - 2px);
70
+ border-radius: var(--ga-radius);
71
+ border-style: var(--tw-border-style);
72
+ border-width: 2px;
73
+ border-color: var(--ga-color-border-focus);
74
+ --tw-content: '';
75
+ content: var(--tw-content);
45
76
  }
46
77
  }
47
78
  .ga-menu__separator {
@@ -59,7 +90,6 @@
59
90
  letter-spacing: var(--tw-tracking, 0);
60
91
  --tw-font-weight: 600;
61
92
  font-weight: 600;
62
- color: var(--ga-color-text-disable-selected);
63
93
  }
64
94
  }
65
95
  @property --tw-border-style {
@@ -75,3 +105,8 @@
75
105
  syntax: "*";
76
106
  inherits: false;
77
107
  }
108
+ @property --tw-content {
109
+ syntax: "*";
110
+ inherits: false;
111
+ initial-value: "";
112
+ }
package/dist/components.css CHANGED
@@ -300,7 +300,7 @@
300
300
  }
301
301
  .ga-dropdown {
302
302
  display: flex;
303
- max-height: calc(0.25rem * 41);
303
+ max-height: calc(0.25rem * 81);
304
304
  min-width: calc(0.25rem * 36);
305
305
  flex-direction: column;
306
306
  align-items: stretch;
@@ -316,6 +316,7 @@
316
316
  position: relative;
317
317
  display: flex;
318
318
  height: calc(0.25rem * 9);
319
+ flex-shrink: 0;
319
320
  cursor: pointer;
320
321
  flex-direction: row;
321
322
  align-items: center;
@@ -364,10 +365,10 @@
364
365
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
365
366
  &::after {
366
367
  position: absolute;
367
- top: 2px;
368
- left: 2px;
369
- height: calc(100% - 4px);
370
- width: calc(100% - 4px);
368
+ top: calc(0.25rem * 0);
369
+ left: calc(0.25rem * 0);
370
+ height: 100%;
371
+ width: 100%;
371
372
  border-radius: var(--ga-radius);
372
373
  border-style: var(--tw-border-style);
373
374
  border-width: 2px;
@@ -377,6 +378,7 @@
377
378
  }
378
379
  }
379
380
  .ga-dropdown__caption {
381
+ flex-shrink: 0;
380
382
  padding-inline: calc(0.25rem * 3);
381
383
  padding-top: calc(0.25rem * 3);
382
384
  padding-bottom: calc(0.25rem * 2);
@@ -435,7 +437,7 @@
435
437
  font-size: var(--ga-size-font-md);
436
438
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
437
439
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
438
- &:has(input:hover), &:is(input:hover) {
440
+ &:hover {
439
441
  border-color: var(--ga-color-border-action-hover);
440
442
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
441
443
  background-color: var(--ga-color-surface-action-hover-2);
@@ -447,10 +449,12 @@
447
449
  color: var(--ga-color-text-disable-selected);
448
450
  }
449
451
  &:has(input:focus), &:is(input:focus) {
450
- border-color: var(--ga-color-border-focus);
451
- outline-style: var(--tw-outline-style);
452
- outline-width: 1px;
453
- outline-color: var(--ga-color-border-focus);
452
+ &:not(.ga-input--invalid) {
453
+ border-color: var(--ga-color-border-focus);
454
+ outline-style: var(--tw-outline-style);
455
+ outline-width: 1px;
456
+ outline-color: var(--ga-color-border-focus);
457
+ }
454
458
  }
455
459
  &.ga-input--invalid {
456
460
  border-color: var(--ga-color-border-error);
@@ -461,20 +465,20 @@
461
465
  background-color: var(--ga-color-surface-error);
462
466
  }
463
467
  }
464
- input {
465
- height: calc(0.25rem * 6);
466
- width: 100%;
468
+ input, &:is(input) {
467
469
  min-width: calc(0.25rem * 0);
468
470
  --tw-leading: calc(0.25rem * 6);
469
471
  line-height: calc(0.25rem * 6);
472
+ &::placeholder {
473
+ color: var(--ga-color-text-disabled);
474
+ }
475
+ }
476
+ input {
477
+ height: calc(0.25rem * 6);
478
+ width: 100%;
470
479
  --tw-outline-style: none;
471
480
  outline-style: none;
472
481
  }
473
- &:is(input) {
474
- min-width: calc(0.25rem * 0);
475
- --tw-leading: calc(0.25rem * 6);
476
- line-height: calc(0.25rem * 6);
477
- }
478
482
  }
479
483
  .ga-notification {
480
484
  display: inline-flex;
@@ -554,6 +558,7 @@
554
558
  border-color: var(--ga-color-border-primary);
555
559
  background-color: var(--ga-color-surface-primary);
556
560
  .ga-menu__item {
561
+ position: relative;
557
562
  display: flex;
558
563
  height: calc(0.25rem * 9);
559
564
  cursor: pointer;
@@ -583,9 +588,39 @@
583
588
  background-color: var(--ga-color-surface-action-hover-2);
584
589
  color: var(--ga-color-text-action-hover);
585
590
  }
586
- &:active {
591
+ &:focus, &:focus-visible {
592
+ --tw-outline-style: none;
593
+ outline-style: none;
594
+ }
595
+ &.ga-menu__item--disabled {
596
+ background-color: var(--ga-color-surface-primary);
597
+ color: var(--ga-color-text-disabled);
598
+ }
599
+ &.ga-menu__item--selected {
587
600
  background-color: var(--ga-color-surface-action);
588
601
  color: var(--ga-color-text-on-action);
602
+ &:hover {
603
+ background-color: var(--ga-color-surface-action-hover);
604
+ }
605
+ &.ga-menu__item--disabled {
606
+ background-color: var(--ga-color-surface-primary);
607
+ color: var(--ga-color-text-disable-selected);
608
+ }
609
+ }
610
+ }
611
+ &:not(:focus-within) .ga-menu__item.ga-menu__item--active, .ga-menu__item:focus-visible {
612
+ &::after {
613
+ position: absolute;
614
+ top: 1px;
615
+ left: 1px;
616
+ height: calc(100% - 2px);
617
+ width: calc(100% - 2px);
618
+ border-radius: var(--ga-radius);
619
+ border-style: var(--tw-border-style);
620
+ border-width: 2px;
621
+ border-color: var(--ga-color-border-focus);
622
+ --tw-content: '';
623
+ content: var(--tw-content);
589
624
  }
590
625
  }
591
626
  .ga-menu__separator {
@@ -603,7 +638,6 @@
603
638
  letter-spacing: var(--tw-tracking, 0);
604
639
  --tw-font-weight: 600;
605
640
  font-weight: 600;
606
- color: var(--ga-color-text-disable-selected);
607
641
  }
608
642
  }
609
643
  .ga-radio-group {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "storybook dev -p 6006",
package/src/styles/components/dropdown.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .ga-dropdown {
2
- @apply flex max-h-41 min-w-36 flex-col items-stretch overflow-y-auto rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) outline-none;
2
+ @apply flex max-h-81 min-w-36 flex-col items-stretch overflow-y-auto rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) outline-none;
3
3
 
4
4
  .ga-dropdown__item {
5
- @apply text-md relative flex h-9 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left leading-none text-(--ga-color-text-action);
5
+ @apply text-md relative flex h-9 shrink-0 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left leading-none text-(--ga-color-text-action);
6
6
 
7
7
  &:first-child {
8
8
  @apply rounded-t;
@@ -37,12 +37,12 @@
37
37
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active,
38
38
  .ga-dropdown__item:focus-visible {
39
39
  &::after {
40
- @apply absolute top-[2px] left-[2px] h-[calc(100%-4px)] w-[calc(100%-4px)] rounded border-2 border-(--ga-color-border-focus) content-[''];
40
+ @apply absolute top-0 left-0 h-full w-full rounded border-2 border-(--ga-color-border-focus) content-[''];
41
41
  }
42
42
  }
43
43
 
44
44
  .ga-dropdown__caption {
45
- @apply px-3 pt-3 pb-2 text-sm font-semibold;
45
+ @apply shrink-0 px-3 pt-3 pb-2 text-sm font-semibold;
46
46
  }
47
47
 
48
48
  .ga-dropdown__content-spinner {
package/src/styles/components/input.css CHANGED
@@ -1,8 +1,7 @@
1
1
  .ga-input {
2
2
  @apply text-md flex h-10 w-50 flex-row items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-bg-primary) px-3 py-2;
3
3
 
4
- &:has(input:hover),
5
- &:is(input:hover) {
4
+ &:hover {
6
5
  @apply border-(--ga-color-border-action-hover);
7
6
 
8
7
  &:has(input:not(:placeholder-shown)),
@@ -18,7 +17,9 @@
18
17
 
19
18
  &:has(input:focus),
20
19
  &:is(input:focus) {
21
- @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
20
+ &:not(.ga-input--invalid) {
21
+ @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
22
+ }
22
23
  }
23
24
 
24
25
  &.ga-input--invalid {
@@ -30,11 +31,16 @@
30
31
  }
31
32
  }
32
33
 
33
- input {
34
- @apply h-6 w-full min-w-0 leading-6 outline-none;
35
- }
36
-
34
+ input,
37
35
  &:is(input) {
38
36
  @apply min-w-0 leading-6;
37
+
38
+ &::placeholder {
39
+ @apply text-(--ga-color-text-disabled);
40
+ }
41
+ }
42
+
43
+ input {
44
+ @apply h-6 w-full outline-none;
39
45
  }
40
46
  }
package/src/styles/components/menu.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @apply flex min-w-36 flex-col items-stretch rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary);
3
3
 
4
4
  .ga-menu__item {
5
- @apply text-md flex h-9 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left leading-none font-medium text-(--ga-color-text-action);
5
+ @apply text-md relative flex h-9 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left leading-none font-medium text-(--ga-color-text-action);
6
6
 
7
7
  &:first-child {
8
8
  @apply rounded-t;
@@ -16,8 +16,32 @@
16
16
  @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
17
17
  }
18
18
 
19
- &:active {
19
+ &:focus,
20
+ &:focus-visible {
21
+ @apply outline-none;
22
+ }
23
+
24
+ &.ga-menu__item--disabled {
25
+ @apply bg-(--ga-color-surface-primary) text-(--ga-color-text-disabled);
26
+ }
27
+
28
+ &.ga-menu__item--selected {
20
29
  @apply bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);
30
+
31
+ &:hover {
32
+ @apply bg-(--ga-color-surface-action-hover);
33
+ }
34
+
35
+ &.ga-menu__item--disabled {
36
+ @apply bg-(--ga-color-surface-primary) text-(--ga-color-text-disable-selected);
37
+ }
38
+ }
39
+ }
40
+
41
+ &:not(:focus-within) .ga-menu__item.ga-menu__item--active,
42
+ .ga-menu__item:focus-visible {
43
+ &::after {
44
+ @apply absolute top-[1px] left-[1px] h-[calc(100%-2px)] w-[calc(100%-2px)] rounded border-2 border-(--ga-color-border-focus) content-[''];
21
45
  }
22
46
  }
23
47
 
@@ -26,6 +50,6 @@
26
50
  }
27
51
 
28
52
  .ga-menu__title {
29
- @apply px-3 pt-3 pb-2 text-sm font-semibold text-(--ga-color-text-disable-selected);
53
+ @apply px-3 pt-3 pb-2 text-sm font-semibold;
30
54
  }
31
55
  }