@vsn-ux/gaia-styles 0.2.2 → 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 (13) hide show
  1. package/dist/all-no-reset-10pt.css +56 -20
  2. package/dist/all-no-reset.css +56 -20
  3. package/dist/all.css +56 -20
  4. package/dist/components/dropdown.css +8 -4
  5. package/dist/components/form-field.css +1 -1
  6. package/dist/components/input.css +15 -13
  7. package/dist/components/menu.css +37 -2
  8. package/dist/components.css +56 -20
  9. package/package.json +1 -1
  10. package/src/styles/components/dropdown.css +4 -4
  11. package/src/styles/components/form-field.css +3 -1
  12. package/src/styles/components/input.css +13 -7
  13. package/src/styles/components/menu.css +27 -3
package/dist/all-no-reset-10pt.css CHANGED
@@ -481,9 +481,11 @@
481
481
  }
482
482
  .ga-dropdown {
483
483
  display: flex;
484
+ max-height: calc(0.4rem * 81);
484
485
  min-width: calc(0.4rem * 36);
485
486
  flex-direction: column;
486
487
  align-items: stretch;
488
+ overflow-y: auto;
487
489
  border-radius: var(--ga-radius);
488
490
  border-style: var(--tw-border-style);
489
491
  border-width: 1px;
@@ -495,6 +497,7 @@
495
497
  position: relative;
496
498
  display: flex;
497
499
  height: calc(0.4rem * 9);
500
+ flex-shrink: 0;
498
501
  cursor: pointer;
499
502
  flex-direction: row;
500
503
  align-items: center;
@@ -543,10 +546,10 @@
543
546
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
544
547
  &::after {
545
548
  position: absolute;
546
- top: 2px;
547
- left: 2px;
548
- height: calc(100% - 4px);
549
- width: calc(100% - 4px);
549
+ top: calc(0.4rem * 0);
550
+ left: calc(0.4rem * 0);
551
+ height: 100%;
552
+ width: 100%;
550
553
  border-radius: var(--ga-radius);
551
554
  border-style: var(--tw-border-style);
552
555
  border-width: 2px;
@@ -556,6 +559,7 @@
556
559
  }
557
560
  }
558
561
  .ga-dropdown__caption {
562
+ flex-shrink: 0;
559
563
  padding-inline: calc(0.4rem * 3);
560
564
  padding-top: calc(0.4rem * 3);
561
565
  padding-bottom: calc(0.4rem * 2);
@@ -575,7 +579,7 @@
575
579
  display: flex;
576
580
  flex-direction: column;
577
581
  gap: calc(0.4rem * 2);
578
- > * {
582
+ > *, > .ga-select, > .ga-input {
579
583
  width: 100%;
580
584
  }
581
585
  .ga-form-field__label {
@@ -614,7 +618,7 @@
614
618
  font-size: var(--ga-size-font-md);
615
619
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
616
620
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
617
- &:has(input:hover), &:is(input:hover) {
621
+ &:hover {
618
622
  border-color: var(--ga-color-border-action-hover);
619
623
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
620
624
  background-color: var(--ga-color-surface-action-hover-2);
@@ -626,10 +630,12 @@
626
630
  color: var(--ga-color-text-disable-selected);
627
631
  }
628
632
  &:has(input:focus), &:is(input:focus) {
629
- border-color: var(--ga-color-border-focus);
630
- outline-style: var(--tw-outline-style);
631
- outline-width: 1px;
632
- 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
+ }
633
639
  }
634
640
  &.ga-input--invalid {
635
641
  border-color: var(--ga-color-border-error);
@@ -640,20 +646,20 @@
640
646
  background-color: var(--ga-color-surface-error);
641
647
  }
642
648
  }
643
- input {
644
- height: calc(0.4rem * 6);
645
- width: 100%;
649
+ input, &:is(input) {
646
650
  min-width: calc(0.4rem * 0);
647
651
  --tw-leading: calc(0.4rem * 6);
648
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%;
649
660
  --tw-outline-style: none;
650
661
  outline-style: none;
651
662
  }
652
- &:is(input) {
653
- min-width: calc(0.4rem * 0);
654
- --tw-leading: calc(0.4rem * 6);
655
- line-height: calc(0.4rem * 6);
656
- }
657
663
  }
658
664
  .ga-notification {
659
665
  display: inline-flex;
@@ -733,6 +739,7 @@
733
739
  border-color: var(--ga-color-border-primary);
734
740
  background-color: var(--ga-color-surface-primary);
735
741
  .ga-menu__item {
742
+ position: relative;
736
743
  display: flex;
737
744
  height: calc(0.4rem * 9);
738
745
  cursor: pointer;
@@ -762,9 +769,39 @@
762
769
  background-color: var(--ga-color-surface-action-hover-2);
763
770
  color: var(--ga-color-text-action-hover);
764
771
  }
765
- &: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 {
766
781
  background-color: var(--ga-color-surface-action);
767
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);
768
805
  }
769
806
  }
770
807
  .ga-menu__separator {
@@ -782,7 +819,6 @@
782
819
  letter-spacing: var(--tw-tracking, 0);
783
820
  --tw-font-weight: 600;
784
821
  font-weight: 600;
785
- color: var(--ga-color-text-disable-selected);
786
822
  }
787
823
  }
788
824
  .ga-radio-group {
package/dist/all-no-reset.css CHANGED
@@ -481,9 +481,11 @@
481
481
  }
482
482
  .ga-dropdown {
483
483
  display: flex;
484
+ max-height: calc(0.25rem * 81);
484
485
  min-width: calc(0.25rem * 36);
485
486
  flex-direction: column;
486
487
  align-items: stretch;
488
+ overflow-y: auto;
487
489
  border-radius: var(--ga-radius);
488
490
  border-style: var(--tw-border-style);
489
491
  border-width: 1px;
@@ -495,6 +497,7 @@
495
497
  position: relative;
496
498
  display: flex;
497
499
  height: calc(0.25rem * 9);
500
+ flex-shrink: 0;
498
501
  cursor: pointer;
499
502
  flex-direction: row;
500
503
  align-items: center;
@@ -543,10 +546,10 @@
543
546
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
544
547
  &::after {
545
548
  position: absolute;
546
- top: 2px;
547
- left: 2px;
548
- height: calc(100% - 4px);
549
- width: calc(100% - 4px);
549
+ top: calc(0.25rem * 0);
550
+ left: calc(0.25rem * 0);
551
+ height: 100%;
552
+ width: 100%;
550
553
  border-radius: var(--ga-radius);
551
554
  border-style: var(--tw-border-style);
552
555
  border-width: 2px;
@@ -556,6 +559,7 @@
556
559
  }
557
560
  }
558
561
  .ga-dropdown__caption {
562
+ flex-shrink: 0;
559
563
  padding-inline: calc(0.25rem * 3);
560
564
  padding-top: calc(0.25rem * 3);
561
565
  padding-bottom: calc(0.25rem * 2);
@@ -575,7 +579,7 @@
575
579
  display: flex;
576
580
  flex-direction: column;
577
581
  gap: calc(0.25rem * 2);
578
- > * {
582
+ > *, > .ga-select, > .ga-input {
579
583
  width: 100%;
580
584
  }
581
585
  .ga-form-field__label {
@@ -614,7 +618,7 @@
614
618
  font-size: var(--ga-size-font-md);
615
619
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
616
620
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
617
- &:has(input:hover), &:is(input:hover) {
621
+ &:hover {
618
622
  border-color: var(--ga-color-border-action-hover);
619
623
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
620
624
  background-color: var(--ga-color-surface-action-hover-2);
@@ -626,10 +630,12 @@
626
630
  color: var(--ga-color-text-disable-selected);
627
631
  }
628
632
  &:has(input:focus), &:is(input:focus) {
629
- border-color: var(--ga-color-border-focus);
630
- outline-style: var(--tw-outline-style);
631
- outline-width: 1px;
632
- 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
+ }
633
639
  }
634
640
  &.ga-input--invalid {
635
641
  border-color: var(--ga-color-border-error);
@@ -640,20 +646,20 @@
640
646
  background-color: var(--ga-color-surface-error);
641
647
  }
642
648
  }
643
- input {
644
- height: calc(0.25rem * 6);
645
- width: 100%;
649
+ input, &:is(input) {
646
650
  min-width: calc(0.25rem * 0);
647
651
  --tw-leading: calc(0.25rem * 6);
648
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%;
649
660
  --tw-outline-style: none;
650
661
  outline-style: none;
651
662
  }
652
- &:is(input) {
653
- min-width: calc(0.25rem * 0);
654
- --tw-leading: calc(0.25rem * 6);
655
- line-height: calc(0.25rem * 6);
656
- }
657
663
  }
658
664
  .ga-notification {
659
665
  display: inline-flex;
@@ -733,6 +739,7 @@
733
739
  border-color: var(--ga-color-border-primary);
734
740
  background-color: var(--ga-color-surface-primary);
735
741
  .ga-menu__item {
742
+ position: relative;
736
743
  display: flex;
737
744
  height: calc(0.25rem * 9);
738
745
  cursor: pointer;
@@ -762,9 +769,39 @@
762
769
  background-color: var(--ga-color-surface-action-hover-2);
763
770
  color: var(--ga-color-text-action-hover);
764
771
  }
765
- &: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 {
766
781
  background-color: var(--ga-color-surface-action);
767
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);
768
805
  }
769
806
  }
770
807
  .ga-menu__separator {
@@ -782,7 +819,6 @@
782
819
  letter-spacing: var(--tw-tracking, 0);
783
820
  --tw-font-weight: 600;
784
821
  font-weight: 600;
785
- color: var(--ga-color-text-disable-selected);
786
822
  }
787
823
  }
788
824
  .ga-radio-group {
package/dist/all.css CHANGED
@@ -624,9 +624,11 @@
624
624
  }
625
625
  .ga-dropdown {
626
626
  display: flex;
627
+ max-height: calc(0.25rem * 81);
627
628
  min-width: calc(0.25rem * 36);
628
629
  flex-direction: column;
629
630
  align-items: stretch;
631
+ overflow-y: auto;
630
632
  border-radius: var(--ga-radius);
631
633
  border-style: var(--tw-border-style);
632
634
  border-width: 1px;
@@ -638,6 +640,7 @@
638
640
  position: relative;
639
641
  display: flex;
640
642
  height: calc(0.25rem * 9);
643
+ flex-shrink: 0;
641
644
  cursor: pointer;
642
645
  flex-direction: row;
643
646
  align-items: center;
@@ -686,10 +689,10 @@
686
689
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
687
690
  &::after {
688
691
  position: absolute;
689
- top: 2px;
690
- left: 2px;
691
- height: calc(100% - 4px);
692
- width: calc(100% - 4px);
692
+ top: calc(0.25rem * 0);
693
+ left: calc(0.25rem * 0);
694
+ height: 100%;
695
+ width: 100%;
693
696
  border-radius: var(--ga-radius);
694
697
  border-style: var(--tw-border-style);
695
698
  border-width: 2px;
@@ -699,6 +702,7 @@
699
702
  }
700
703
  }
701
704
  .ga-dropdown__caption {
705
+ flex-shrink: 0;
702
706
  padding-inline: calc(0.25rem * 3);
703
707
  padding-top: calc(0.25rem * 3);
704
708
  padding-bottom: calc(0.25rem * 2);
@@ -718,7 +722,7 @@
718
722
  display: flex;
719
723
  flex-direction: column;
720
724
  gap: calc(0.25rem * 2);
721
- > * {
725
+ > *, > .ga-select, > .ga-input {
722
726
  width: 100%;
723
727
  }
724
728
  .ga-form-field__label {
@@ -757,7 +761,7 @@
757
761
  font-size: var(--ga-size-font-md);
758
762
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
759
763
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
760
- &:has(input:hover), &:is(input:hover) {
764
+ &:hover {
761
765
  border-color: var(--ga-color-border-action-hover);
762
766
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
763
767
  background-color: var(--ga-color-surface-action-hover-2);
@@ -769,10 +773,12 @@
769
773
  color: var(--ga-color-text-disable-selected);
770
774
  }
771
775
  &:has(input:focus), &:is(input:focus) {
772
- border-color: var(--ga-color-border-focus);
773
- outline-style: var(--tw-outline-style);
774
- outline-width: 1px;
775
- 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
+ }
776
782
  }
777
783
  &.ga-input--invalid {
778
784
  border-color: var(--ga-color-border-error);
@@ -783,20 +789,20 @@
783
789
  background-color: var(--ga-color-surface-error);
784
790
  }
785
791
  }
786
- input {
787
- height: calc(0.25rem * 6);
788
- width: 100%;
792
+ input, &:is(input) {
789
793
  min-width: calc(0.25rem * 0);
790
794
  --tw-leading: calc(0.25rem * 6);
791
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%;
792
803
  --tw-outline-style: none;
793
804
  outline-style: none;
794
805
  }
795
- &:is(input) {
796
- min-width: calc(0.25rem * 0);
797
- --tw-leading: calc(0.25rem * 6);
798
- line-height: calc(0.25rem * 6);
799
- }
800
806
  }
801
807
  .ga-notification {
802
808
  display: inline-flex;
@@ -876,6 +882,7 @@
876
882
  border-color: var(--ga-color-border-primary);
877
883
  background-color: var(--ga-color-surface-primary);
878
884
  .ga-menu__item {
885
+ position: relative;
879
886
  display: flex;
880
887
  height: calc(0.25rem * 9);
881
888
  cursor: pointer;
@@ -905,9 +912,39 @@
905
912
  background-color: var(--ga-color-surface-action-hover-2);
906
913
  color: var(--ga-color-text-action-hover);
907
914
  }
908
- &: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 {
909
924
  background-color: var(--ga-color-surface-action);
910
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);
911
948
  }
912
949
  }
913
950
  .ga-menu__separator {
@@ -925,7 +962,6 @@
925
962
  letter-spacing: var(--tw-tracking, 0);
926
963
  --tw-font-weight: 600;
927
964
  font-weight: 600;
928
- color: var(--ga-color-text-disable-selected);
929
965
  }
930
966
  }
931
967
  .ga-radio-group {
package/dist/components/dropdown.css CHANGED
@@ -1,9 +1,11 @@
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 * 81);
4
5
  min-width: calc(0.25rem * 36);
5
6
  flex-direction: column;
6
7
  align-items: stretch;
8
+ overflow-y: auto;
7
9
  border-radius: var(--ga-radius);
8
10
  border-style: var(--tw-border-style);
9
11
  border-width: 1px;
@@ -15,6 +17,7 @@
15
17
  position: relative;
16
18
  display: flex;
17
19
  height: calc(0.25rem * 9);
20
+ flex-shrink: 0;
18
21
  cursor: pointer;
19
22
  flex-direction: row;
20
23
  align-items: center;
@@ -63,10 +66,10 @@
63
66
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
64
67
  &::after {
65
68
  position: absolute;
66
- top: 2px;
67
- left: 2px;
68
- height: calc(100% - 4px);
69
- width: calc(100% - 4px);
69
+ top: calc(0.25rem * 0);
70
+ left: calc(0.25rem * 0);
71
+ height: 100%;
72
+ width: 100%;
70
73
  border-radius: var(--ga-radius);
71
74
  border-style: var(--tw-border-style);
72
75
  border-width: 2px;
@@ -76,6 +79,7 @@
76
79
  }
77
80
  }
78
81
  .ga-dropdown__caption {
82
+ flex-shrink: 0;
79
83
  padding-inline: calc(0.25rem * 3);
80
84
  padding-top: calc(0.25rem * 3);
81
85
  padding-bottom: calc(0.25rem * 2);
package/dist/components/form-field.css CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  gap: calc(0.25rem * 2);
6
- > * {
6
+ > *, > .ga-select, > .ga-input {
7
7
  width: 100%;
8
8
  }
9
9
  .ga-form-field__label {
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,9 +300,11 @@
300
300
  }
301
301
  .ga-dropdown {
302
302
  display: flex;
303
+ max-height: calc(0.25rem * 81);
303
304
  min-width: calc(0.25rem * 36);
304
305
  flex-direction: column;
305
306
  align-items: stretch;
307
+ overflow-y: auto;
306
308
  border-radius: var(--ga-radius);
307
309
  border-style: var(--tw-border-style);
308
310
  border-width: 1px;
@@ -314,6 +316,7 @@
314
316
  position: relative;
315
317
  display: flex;
316
318
  height: calc(0.25rem * 9);
319
+ flex-shrink: 0;
317
320
  cursor: pointer;
318
321
  flex-direction: row;
319
322
  align-items: center;
@@ -362,10 +365,10 @@
362
365
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
363
366
  &::after {
364
367
  position: absolute;
365
- top: 2px;
366
- left: 2px;
367
- height: calc(100% - 4px);
368
- width: calc(100% - 4px);
368
+ top: calc(0.25rem * 0);
369
+ left: calc(0.25rem * 0);
370
+ height: 100%;
371
+ width: 100%;
369
372
  border-radius: var(--ga-radius);
370
373
  border-style: var(--tw-border-style);
371
374
  border-width: 2px;
@@ -375,6 +378,7 @@
375
378
  }
376
379
  }
377
380
  .ga-dropdown__caption {
381
+ flex-shrink: 0;
378
382
  padding-inline: calc(0.25rem * 3);
379
383
  padding-top: calc(0.25rem * 3);
380
384
  padding-bottom: calc(0.25rem * 2);
@@ -394,7 +398,7 @@
394
398
  display: flex;
395
399
  flex-direction: column;
396
400
  gap: calc(0.25rem * 2);
397
- > * {
401
+ > *, > .ga-select, > .ga-input {
398
402
  width: 100%;
399
403
  }
400
404
  .ga-form-field__label {
@@ -433,7 +437,7 @@
433
437
  font-size: var(--ga-size-font-md);
434
438
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
435
439
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
436
- &:has(input:hover), &:is(input:hover) {
440
+ &:hover {
437
441
  border-color: var(--ga-color-border-action-hover);
438
442
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
439
443
  background-color: var(--ga-color-surface-action-hover-2);
@@ -445,10 +449,12 @@
445
449
  color: var(--ga-color-text-disable-selected);
446
450
  }
447
451
  &:has(input:focus), &:is(input:focus) {
448
- border-color: var(--ga-color-border-focus);
449
- outline-style: var(--tw-outline-style);
450
- outline-width: 1px;
451
- 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
+ }
452
458
  }
453
459
  &.ga-input--invalid {
454
460
  border-color: var(--ga-color-border-error);
@@ -459,20 +465,20 @@
459
465
  background-color: var(--ga-color-surface-error);
460
466
  }
461
467
  }
462
- input {
463
- height: calc(0.25rem * 6);
464
- width: 100%;
468
+ input, &:is(input) {
465
469
  min-width: calc(0.25rem * 0);
466
470
  --tw-leading: calc(0.25rem * 6);
467
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%;
468
479
  --tw-outline-style: none;
469
480
  outline-style: none;
470
481
  }
471
- &:is(input) {
472
- min-width: calc(0.25rem * 0);
473
- --tw-leading: calc(0.25rem * 6);
474
- line-height: calc(0.25rem * 6);
475
- }
476
482
  }
477
483
  .ga-notification {
478
484
  display: inline-flex;
@@ -552,6 +558,7 @@
552
558
  border-color: var(--ga-color-border-primary);
553
559
  background-color: var(--ga-color-surface-primary);
554
560
  .ga-menu__item {
561
+ position: relative;
555
562
  display: flex;
556
563
  height: calc(0.25rem * 9);
557
564
  cursor: pointer;
@@ -581,9 +588,39 @@
581
588
  background-color: var(--ga-color-surface-action-hover-2);
582
589
  color: var(--ga-color-text-action-hover);
583
590
  }
584
- &: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 {
585
600
  background-color: var(--ga-color-surface-action);
586
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);
587
624
  }
588
625
  }
589
626
  .ga-menu__separator {
@@ -601,7 +638,6 @@
601
638
  letter-spacing: var(--tw-tracking, 0);
602
639
  --tw-font-weight: 600;
603
640
  font-weight: 600;
604
- color: var(--ga-color-text-disable-selected);
605
641
  }
606
642
  }
607
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.2",
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 min-w-36 flex-col items-stretch 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/form-field.css CHANGED
@@ -1,7 +1,9 @@
1
1
  .ga-form-field {
2
2
  @apply flex flex-col gap-2;
3
3
 
4
- > * {
4
+ > *,
5
+ > .ga-select,
6
+ > .ga-input {
5
7
  @apply w-full;
6
8
  }
7
9
 
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
  }