@askrjs/themes 0.2.1 → 0.2.3

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 (20) hide show
  1. package/THEMING.md +22 -1
  2. package/dist/components/catalog.d.ts +3 -2
  3. package/dist/components/catalog.js +51 -60
  4. package/dist/components/catalog.js.map +1 -1
  5. package/dist/components/navbar/navbar.js +2 -0
  6. package/dist/components/navbar/navbar.js.map +1 -1
  7. package/dist/themes/default/index.css +189 -97
  8. package/package.json +7 -6
  9. package/src/components/catalog.tsx +83 -26
  10. package/src/components/navbar/navbar.tsx +9 -2
  11. package/src/themes/default/styles/base/reset.css +4 -0
  12. package/src/themes/default/styles/display/table.css +32 -31
  13. package/src/themes/default/styles/display/virtual-table.css +142 -13
  14. package/src/themes/default/styles/layout/block.css +0 -1
  15. package/src/themes/default/styles/layout/layout.css +72 -57
  16. package/templates/theme/styles/base/reset.css +4 -0
  17. package/templates/theme/styles/display/table.css +32 -31
  18. package/templates/theme/styles/display/virtual-table.css +148 -13
  19. package/templates/theme/styles/layout/block.css +0 -1
  20. package/templates/theme/styles/layout/layout.css +72 -57
package/dist/themes/default/index.css CHANGED
@@ -404,6 +404,10 @@
404
404
  display: block;
405
405
  }
406
406
 
407
+ :where([data-askr-native-control="true"]) {
408
+ font: inherit;
409
+ }
410
+
407
411
  ::selection {
408
412
  background: color-mix(in srgb, var(--ak-color-primary-soft) 84%, transparent);
409
413
  color: var(--ak-color-text);
@@ -652,24 +656,24 @@
652
656
  --ak-display-md: var(--ak-display-sm);
653
657
  --ak-display-lg: var(--ak-display-md);
654
658
  --ak-display-xl: var(--ak-display-lg);
655
- --ak-flex-direction-base: column;
659
+ --ak-flex-direction-base: row;
656
660
  --ak-flex-direction-sm: var(--ak-flex-direction-base);
657
661
  --ak-flex-direction-md: var(--ak-flex-direction-sm);
658
662
  --ak-flex-direction-lg: var(--ak-flex-direction-md);
659
663
  --ak-flex-direction-xl: var(--ak-flex-direction-lg);
660
664
  --ak-flex-wrap-base: nowrap;
661
665
  --ak-flex-wrap-sm: var(--ak-flex-wrap-base);
662
- --ak-align-items-base: stretch;
666
+ --ak-align-items-base: normal;
663
667
  --ak-align-items-sm: var(--ak-align-items-base);
664
668
  --ak-align-items-md: var(--ak-align-items-sm);
665
669
  --ak-align-items-lg: var(--ak-align-items-md);
666
670
  --ak-align-items-xl: var(--ak-align-items-lg);
667
- --ak-justify-content-base: flex-start;
671
+ --ak-justify-content-base: normal;
668
672
  --ak-justify-content-sm: var(--ak-justify-content-base);
669
673
  --ak-justify-content-md: var(--ak-justify-content-sm);
670
674
  --ak-justify-content-lg: var(--ak-justify-content-md);
671
675
  --ak-justify-content-xl: var(--ak-justify-content-lg);
672
- --ak-gap-base: 0;
676
+ --ak-gap-base: normal;
673
677
  --ak-gap-sm: var(--ak-gap-base);
674
678
  --ak-gap-md: var(--ak-gap-sm);
675
679
  --ak-gap-lg: var(--ak-gap-md);
@@ -688,7 +692,7 @@
688
692
  --ak-flex-basis-sm: var(--ak-flex-basis-base);
689
693
  --ak-flex-basis-md: var(--ak-flex-basis-sm);
690
694
  --ak-flex-basis-lg: var(--ak-flex-basis-md);
691
- --ak-min-width-base: 0;
695
+ --ak-min-width-base: auto;
692
696
  --ak-min-width-sm: var(--ak-min-width-base);
693
697
  --ak-min-width-md: var(--ak-min-width-sm);
694
698
  --ak-min-width-lg: var(--ak-min-width-md);
@@ -768,7 +772,7 @@
768
772
  --ak-overflow-x-sm: var(--ak-overflow-x-base);
769
773
  --ak-overflow-y-base: var(--ak-overflow-base);
770
774
  --ak-overflow-y-sm: var(--ak-overflow-y-base);
771
- --ak-border-base: 0 solid transparent;
775
+ --ak-border-base: medium none currentcolor;
772
776
  --ak-border-sm: var(--ak-border-base);
773
777
  --ak-border-md: var(--ak-border-sm);
774
778
  --ak-border-lg: var(--ak-border-md);
@@ -803,15 +807,15 @@
803
807
  --ak-box-shadow-xl: var(--ak-box-shadow-lg);
804
808
  box-sizing: border-box;
805
809
  display: var(--ak-display-base, flex);
806
- flex-direction: var(--ak-flex-direction-base, column);
810
+ flex-direction: var(--ak-flex-direction-base, row);
807
811
  flex-wrap: var(--ak-flex-wrap-base, nowrap);
808
- align-items: var(--ak-align-items-base, stretch);
809
- justify-content: var(--ak-justify-content-base, flex-start);
810
- gap: var(--ak-gap-base, 0);
812
+ align-items: var(--ak-align-items-base, normal);
813
+ justify-content: var(--ak-justify-content-base, normal);
814
+ gap: var(--ak-gap-base, normal);
811
815
  flex-grow: var(--ak-flex-grow-base, 0);
812
816
  flex-shrink: var(--ak-flex-shrink-base, 1);
813
817
  flex-basis: var(--ak-flex-basis-base, auto);
814
- min-width: var(--ak-min-width-base, 0);
818
+ min-width: var(--ak-min-width-base, auto);
815
819
  max-width: var(--ak-max-width-base, none);
816
820
  width: var(--ak-width-base, auto);
817
821
  min-height: var(--ak-min-height-base, auto);
@@ -833,10 +837,10 @@
833
837
  overflow: var(--ak-overflow-base, visible);
834
838
  overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
835
839
  overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
836
- border: var(--ak-border-base, 0 solid transparent);
837
- border-top: var(--ak-border-top-base, var(--ak-border-base, 0 solid transparent));
838
- border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, 0 solid transparent));
839
- border-right: var(--ak-border-right-base, var(--ak-border-base, 0 solid transparent));
840
+ border: var(--ak-border-base, medium none currentcolor);
841
+ border-top: var(--ak-border-top-base, var(--ak-border-base, medium none currentcolor));
842
+ border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, medium none currentcolor));
843
+ border-right: var(--ak-border-right-base, var(--ak-border-base, medium none currentcolor));
840
844
  border-radius: var(--ak-border-radius-base, 0);
841
845
  background: var(--ak-background-base, transparent);
842
846
  box-shadow: var(--ak-box-shadow-base, none);
@@ -845,15 +849,15 @@
845
849
  @media (width >= 40rem) {
846
850
  :where([data-ak-layout="true"]) {
847
851
  display: var(--ak-display-sm, var(--ak-display-base, flex));
848
- flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column));
852
+ flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row));
849
853
  flex-wrap: var(--ak-flex-wrap-sm, var(--ak-flex-wrap-base, nowrap));
850
- align-items: var(--ak-align-items-sm, var(--ak-align-items-base, stretch));
851
- justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start));
852
- gap: var(--ak-gap-sm, var(--ak-gap-base, 0));
854
+ align-items: var(--ak-align-items-sm, var(--ak-align-items-base, normal));
855
+ justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-base, normal));
856
+ gap: var(--ak-gap-sm, var(--ak-gap-base, normal));
853
857
  flex-grow: var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0));
854
858
  flex-shrink: var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1));
855
859
  flex-basis: var(--ak-flex-basis-sm, var(--ak-flex-basis-base, auto));
856
- min-width: var(--ak-min-width-sm, var(--ak-min-width-base, 0));
860
+ min-width: var(--ak-min-width-sm, var(--ak-min-width-base, auto));
857
861
  max-width: var(--ak-max-width-sm, var(--ak-max-width-base, none));
858
862
  width: var(--ak-width-sm, var(--ak-width-base, auto));
859
863
  min-height: var(--ak-min-height-sm, var(--ak-min-height-base, auto));
@@ -875,10 +879,10 @@
875
879
  overflow: var(--ak-overflow-sm, var(--ak-overflow-base, visible));
876
880
  overflow-x: var(--ak-overflow-x-sm, var(--ak-overflow-x-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible))));
877
881
  overflow-y: var(--ak-overflow-y-sm, var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible))));
878
- border: var(--ak-border-sm, var(--ak-border-base, 0 solid transparent));
879
- border-top: var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
880
- border-bottom: var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
881
- border-right: var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
882
+ border: var(--ak-border-sm, var(--ak-border-base, medium none currentcolor));
883
+ border-top: var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))));
884
+ border-bottom: var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))));
885
+ border-right: var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))));
882
886
  border-radius: var(--ak-border-radius-sm, var(--ak-border-radius-base, 0));
883
887
  background: var(--ak-background-sm, var(--ak-background-base, transparent));
884
888
  box-shadow: var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none));
@@ -888,13 +892,13 @@
888
892
  @media (width >= 48rem) {
889
893
  :where([data-ak-layout="true"]) {
890
894
  display: var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex)));
891
- flex-direction: var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column)));
892
- align-items: var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, stretch)));
893
- justify-content: var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start)));
894
- gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0)));
895
+ flex-direction: var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row)));
896
+ align-items: var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, normal)));
897
+ justify-content: var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, normal)));
898
+ gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal)));
895
899
  flex-grow: var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)));
896
900
  flex-shrink: var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)));
897
- min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)));
901
+ min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto)));
898
902
  max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
899
903
  width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
900
904
  min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
@@ -909,10 +913,10 @@
909
913
  position: var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static)));
910
914
  top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
911
915
  z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
912
- border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)));
913
- border-top: var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))));
914
- border-bottom: var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))));
915
- border-right: var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))));
916
+ border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)));
917
+ border-top: var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))));
918
+ border-bottom: var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))));
919
+ border-right: var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))));
916
920
  border-radius: var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)));
917
921
  background: var(--ak-background-md, var(--ak-background-sm, var(--ak-background-base, transparent)));
918
922
  box-shadow: var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none)));
@@ -922,13 +926,13 @@
922
926
  @media (width >= 64rem) {
923
927
  :where([data-ak-layout="true"]) {
924
928
  display: var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex))));
925
- flex-direction: var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column))));
926
- align-items: var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, stretch))));
927
- justify-content: var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start))));
928
- gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))));
929
+ flex-direction: var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row))));
930
+ align-items: var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, normal))));
931
+ justify-content: var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, normal))));
932
+ gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal))));
929
933
  flex-grow: var(--ak-flex-grow-lg, var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0))));
930
934
  flex-shrink: var(--ak-flex-shrink-lg, var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1))));
931
- min-width: var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0))));
935
+ min-width: var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto))));
932
936
  max-width: var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none))));
933
937
  width: var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto))));
934
938
  min-height: var(--ak-min-height-lg, var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto))));
@@ -942,10 +946,10 @@
942
946
  position: var(--ak-position-lg, var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static))));
943
947
  top: var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto))));
944
948
  z-index: var(--ak-z-index-lg, var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto))));
945
- border: var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
946
- border-top: var(--ak-border-top-lg, var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))))));
947
- border-bottom: var(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))))));
948
- border-right: var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))))));
949
+ border: var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))));
950
+ border-top: var(--ak-border-top-lg, var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))));
951
+ border-bottom: var(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))));
952
+ border-right: var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))));
949
953
  border-radius: var(--ak-border-radius-lg, var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0))));
950
954
  background: var(--ak-background-lg, var(--ak-background-md, var(--ak-background-sm, var(--ak-background-base, transparent))));
951
955
  box-shadow: var(--ak-box-shadow-lg, var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none))));
@@ -955,13 +959,13 @@
955
959
  @media (width >= 80rem) {
956
960
  :where([data-ak-layout="true"]) {
957
961
  display: var(--ak-display-xl, var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex)))));
958
- flex-direction: var(--ak-flex-direction-xl, var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column)))));
959
- align-items: var(--ak-align-items-xl, var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, stretch)))));
960
- justify-content: var(--ak-justify-content-xl, var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start)))));
961
- gap: var(--ak-gap-xl, var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0)))));
962
+ flex-direction: var(--ak-flex-direction-xl, var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row)))));
963
+ align-items: var(--ak-align-items-xl, var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, normal)))));
964
+ justify-content: var(--ak-justify-content-xl, var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, normal)))));
965
+ gap: var(--ak-gap-xl, var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal)))));
962
966
  flex-grow: var(--ak-flex-grow-xl, var(--ak-flex-grow-lg, var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)))));
963
967
  flex-shrink: var(--ak-flex-shrink-xl, var(--ak-flex-shrink-lg, var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)))));
964
- min-width: var(--ak-min-width-xl, var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)))));
968
+ min-width: var(--ak-min-width-xl, var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto)))));
965
969
  width: var(--ak-width-xl, var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)))));
966
970
  max-width: var(--ak-max-width-xl, var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)))));
967
971
  min-height: var(--ak-min-height-xl, var(--ak-min-height-lg, var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)))));
@@ -976,10 +980,10 @@
976
980
  position: var(--ak-position-xl, var(--ak-position-lg, var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static)))));
977
981
  top: var(--ak-top-xl, var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)))));
978
982
  z-index: var(--ak-z-index-xl, var(--ak-z-index-lg, var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)))));
979
- border: var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))));
980
- border-top: var(--ak-border-top-xl, var(--ak-border-top-lg, var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))))))));
981
- border-bottom: var(--ak-border-bottom-xl, var(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))))))));
982
- border-right: var(--ak-border-right-xl, var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))))))));
983
+ border: var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)))));
984
+ border-top: var(--ak-border-top-xl, var(--ak-border-top-lg, var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))))));
985
+ border-bottom: var(--ak-border-bottom-xl, var(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))))));
986
+ border-right: var(--ak-border-right-xl, var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))))));
983
987
  border-radius: var(--ak-border-radius-xl, var(--ak-border-radius-lg, var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)))));
984
988
  background: var(--ak-background-xl, var(--ak-background-lg, var(--ak-background-md, var(--ak-background-sm, var(--ak-background-base, transparent)))));
985
989
  box-shadow: var(--ak-box-shadow-xl, var(--ak-box-shadow-lg, var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none)))));
@@ -1006,7 +1010,7 @@
1006
1010
  overflow: hidden;
1007
1011
  }
1008
1012
 
1009
- :where([data-slot="block"], [data-slot="container"], [data-slot="header"], [data-slot="main"], [data-slot="section"], [data-slot="aside"], [data-slot="sidebar"], [data-slot="navbar"], [data-slot="navbar-collapse"], [data-slot="navbar-content"], [data-slot="nav-brand"], [data-slot="nav-dropdown"], [data-slot="nav-group"], [data-slot="nav-group-body"], [data-slot="brand"], [data-slot="grid"], [data-slot="page"], [data-slot="page-header"], [data-slot="toolbar"], [data-slot="empty-state"]) {
1013
+ :where([data-slot="container"], [data-slot="header"], [data-slot="main"], [data-slot="section"], [data-slot="aside"], [data-slot="sidebar"], [data-slot="navbar"], [data-slot="navbar-collapse"], [data-slot="navbar-content"], [data-slot="nav-brand"], [data-slot="nav-dropdown"], [data-slot="nav-group"], [data-slot="nav-group-body"], [data-slot="brand"], [data-slot="grid"], [data-slot="page"], [data-slot="page-header"], [data-slot="toolbar"], [data-slot="empty-state"]) {
1010
1014
  min-inline-size: 0;
1011
1015
  }
1012
1016
 
@@ -4079,7 +4083,7 @@
4079
4083
  :where([data-slot="table"]) {
4080
4084
  border-collapse: collapse;
4081
4085
  border-spacing: 0;
4082
- table-layout: fixed;
4086
+ table-layout: auto;
4083
4087
  inline-size: 100%;
4084
4088
  min-inline-size: 0;
4085
4089
  color: var(--ak-color-text);
@@ -4087,7 +4091,6 @@
4087
4091
  background: none;
4088
4092
  border: 0;
4089
4093
  border-radius: 0;
4090
- overflow: hidden;
4091
4094
  }
4092
4095
 
4093
4096
  :where([data-slot="data-table"]) {
@@ -4097,71 +4100,63 @@
4097
4100
  }
4098
4101
 
4099
4102
  :where([data-slot="table-caption"]) {
4100
- padding: 0 0 var(--ak-space-sm);
4101
4103
  color: var(--ak-color-text-muted);
4102
4104
  font-size: var(--ak-font-size-sm);
4103
4105
  line-height: var(--ak-line-height-normal);
4104
4106
  text-align: start;
4105
- caption-side: top;
4107
+ caption-side: bottom;
4108
+ padding-block-start: var(--ak-space-md);
4106
4109
  }
4107
4110
 
4108
- :where([data-slot="table-head"]) {
4109
- background: var(--ak-color-surface-muted);
4111
+ :where([data-slot="table-head"]), :where([data-slot="table-body"]) {
4112
+ background: none;
4110
4113
  }
4111
4114
 
4112
- :where([data-slot="table-body"]), :where([data-slot="table-foot"]) {
4113
- background: none;
4115
+ :where([data-slot="table-foot"]) {
4116
+ border-block-start: 1px solid var(--ak-color-border);
4117
+ background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
4118
+ font-weight: var(--ak-font-weight-medium);
4114
4119
  }
4115
4120
 
4116
4121
  :where([data-slot="table-row"]) {
4117
4122
  background: inherit;
4123
+ border-block-end: 1px solid var(--ak-color-border);
4118
4124
  transition: background var(--ak-duration-fast) var(--ak-ease-standard);
4119
4125
  }
4120
4126
 
4121
- :where([data-slot="table-row"]:hover) {
4122
- background: var(--ak-color-hover);
4127
+ :where([data-slot="table-row"]:hover, [data-slot="table-row"][aria-expanded="true"], [data-slot="table-row"][data-state="selected"]) {
4128
+ background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
4123
4129
  }
4124
4130
 
4125
4131
  :where([data-slot="table-header-cell"]), :where([data-slot="table-cell"]) {
4126
- padding: var(--ak-space-sm);
4127
- border-block-end: 1px solid var(--ak-color-border);
4132
+ padding: var(--ak-space-sm) var(--ak-space-xs);
4128
4133
  color: var(--ak-color-text);
4129
4134
  font-size: var(--ak-font-size-sm);
4130
4135
  line-height: var(--ak-line-height-normal);
4131
4136
  text-align: start;
4132
- vertical-align: top;
4133
- overflow-wrap: anywhere;
4137
+ vertical-align: middle;
4138
+ white-space: normal;
4134
4139
  }
4135
4140
 
4136
- :where([data-slot="table-body"] [data-slot="table-row"]:last-child [data-slot="table-cell"]) {
4141
+ :where([data-slot="table-body"] [data-slot="table-row"]:last-child), :where([data-slot="table-foot"] [data-slot="table-row"]:last-child) {
4137
4142
  border-block-end: 0;
4138
4143
  }
4139
4144
 
4140
4145
  :where([data-slot="table-header-cell"]) {
4141
- color: var(--ak-color-text-muted);
4142
- font-weight: var(--ak-font-weight-semibold);
4143
- letter-spacing: 0;
4144
- overflow-wrap: normal;
4145
- text-transform: none;
4146
- word-break: normal;
4147
- white-space: normal;
4146
+ block-size: 2.5rem;
4147
+ font-weight: var(--ak-font-weight-medium);
4148
4148
  }
4149
4149
 
4150
4150
  :where([data-slot="table-cell"]) {
4151
4151
  font-weight: var(--ak-font-weight-regular);
4152
4152
  }
4153
4153
 
4154
- @media (width <= 30rem) {
4155
- :where([data-slot="table-header-cell"]), :where([data-slot="table-cell"]) {
4156
- padding: var(--ak-space-sm) var(--ak-space-xs);
4157
- font-size: var(--ak-font-size-xs);
4158
- line-height: var(--ak-line-height-tight);
4159
- }
4154
+ :where([data-slot="table-header-cell"]:has([role="checkbox"]), [data-slot="table-cell"]:has([role="checkbox"])) {
4155
+ padding-inline-end: 0;
4156
+ }
4160
4157
 
4161
- :where([data-slot="table-header-cell"]) {
4162
- letter-spacing: 0;
4163
- overflow-wrap: anywhere;
4164
- }
4158
+ :where([data-slot="table-header-cell"] > [role="checkbox"], [data-slot="table-cell"] > [role="checkbox"]) {
4159
+ transform: translateY(2px);
4165
4160
  }
4166
4161
 
4167
4162
  :where([data-slot="virtual-table"]) {
@@ -4174,6 +4169,8 @@
4174
4169
  overscroll-behavior: contain;
4175
4170
  scrollbar-width: thin;
4176
4171
  scrollbar-color: var(--ak-color-border-strong) transparent;
4172
+ transition: border-color var(--ak-duration-fast) var(--ak-ease-standard),
4173
+ box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
4177
4174
  overflow: auto;
4178
4175
  }
4179
4176
 
@@ -4196,42 +4193,61 @@
4196
4193
 
4197
4194
  :where([data-slot="virtual-table-head"]) {
4198
4195
  background: var(--ak-color-surface-muted);
4196
+ box-shadow: inset 0 -1px 0 var(--ak-color-border);
4199
4197
  }
4200
4198
 
4201
4199
  :where([data-slot="virtual-table-header-row"]) {
4202
4200
  background: inherit;
4203
4201
  }
4204
4202
 
4203
+ :where([data-slot="virtual-table"][data-at-top="false"]) :where([data-slot="virtual-table-head"]) {
4204
+ box-shadow: inset 0 -1px 0 var(--ak-color-border),
4205
+ var(--ak-shadow-md);
4206
+ }
4207
+
4205
4208
  :where([data-slot="virtual-table-body"]) {
4206
4209
  background: none;
4207
4210
  }
4208
4211
 
4209
4212
  :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
4210
- padding: var(--ak-space-sm);
4211
- border-block-end: 1px solid var(--ak-color-border);
4212
- color: var(--ak-color-text);
4213
4213
  font-size: var(--ak-font-size-sm);
4214
4214
  line-height: var(--ak-line-height-normal);
4215
4215
  text-align: start;
4216
4216
  vertical-align: middle;
4217
+ }
4218
+
4219
+ :where([data-slot="virtual-table-header-cell"]) {
4220
+ padding: 0 var(--ak-space-sm);
4221
+ background: inherit;
4222
+ color: var(--ak-color-text-muted);
4223
+ font-weight: var(--ak-font-weight-medium);
4217
4224
  text-overflow: ellipsis;
4218
4225
  white-space: nowrap;
4219
4226
  overflow: hidden;
4220
4227
  }
4221
4228
 
4222
- :where([data-slot="virtual-table-header-cell"]) {
4223
- color: var(--ak-color-text-muted);
4224
- font-weight: var(--ak-font-weight-semibold);
4225
- letter-spacing: 0;
4226
- text-transform: none;
4229
+ :where([data-slot="virtual-table-cell"]) {
4230
+ border-block-end: 1px solid var(--ak-color-border);
4231
+ color: var(--ak-color-text);
4232
+ text-overflow: ellipsis;
4233
+ white-space: nowrap;
4234
+ padding: 0;
4235
+ position: relative;
4236
+ overflow: hidden;
4227
4237
  }
4228
4238
 
4229
4239
  :where([data-slot="virtual-table-row"]) {
4240
+ cursor: pointer;
4230
4241
  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
4231
- color var(--ak-duration-fast) var(--ak-ease-standard);
4242
+ color var(--ak-duration-fast) var(--ak-ease-standard),
4243
+ box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
4232
4244
  background: none;
4233
4245
  }
4234
4246
 
4247
+ :where([data-slot="virtual-table-row"]) :where([data-slot="input"]:not(:disabled, [data-disabled], [aria-disabled="true"]), [data-slot="textarea"]:not(:disabled, [data-disabled], [aria-disabled="true"]), [contenteditable="true"], [role="searchbox"], [role="spinbutton"], [role="textbox"]) {
4248
+ cursor: text;
4249
+ }
4250
+
4235
4251
  :where([data-slot="virtual-table-row"]:hover) {
4236
4252
  background: var(--ak-color-hover);
4237
4253
  }
@@ -4239,6 +4255,16 @@
4239
4255
  :where([data-slot="virtual-table-row"][data-selected="true"]) {
4240
4256
  background: var(--ak-color-selected);
4241
4257
  color: var(--ak-color-text);
4258
+ box-shadow: inset 0 0 0 var(--ak-border-width-sm) var(--ak-color-selected-border);
4259
+ }
4260
+
4261
+ :where([data-slot="virtual-table-row"][data-selected="true"] > [data-slot="virtual-table-cell"]:first-child):before {
4262
+ inline-size: var(--ak-border-width-md);
4263
+ background: var(--ak-color-primary);
4264
+ content: "";
4265
+ position: absolute;
4266
+ inset-block: 0;
4267
+ inset-inline-start: 0;
4242
4268
  }
4243
4269
 
4244
4270
  :where([data-slot="virtual-table-spacer-row"]) {
@@ -4247,15 +4273,81 @@
4247
4273
 
4248
4274
  :where([data-slot="virtual-table-cell-content"]) {
4249
4275
  align-items: center;
4276
+ gap: var(--ak-space-xs);
4277
+ block-size: 100%;
4278
+ inline-size: 100%;
4250
4279
  min-inline-size: 0;
4280
+ padding-inline: var(--ak-space-sm);
4281
+ box-sizing: border-box;
4282
+ text-overflow: ellipsis;
4283
+ white-space: nowrap;
4251
4284
  display: flex;
4252
4285
  }
4253
4286
 
4254
- @media (width <= 30rem) {
4287
+ :where([data-slot="virtual-table-cell-content"] > [data-slot="text"], [data-slot="virtual-table-cell-content"] > [data-truncate="true"]) {
4288
+ text-overflow: ellipsis;
4289
+ white-space: nowrap;
4290
+ min-inline-size: 0;
4291
+ max-inline-size: 100%;
4292
+ overflow: hidden;
4293
+ }
4294
+
4295
+ :where([data-slot="virtual-table-header-cell"]:has([role="checkbox"]), [data-slot="virtual-table-cell-content"]:has([role="checkbox"])) {
4296
+ padding-inline-end: 0;
4297
+ }
4298
+
4299
+ :where([data-slot="virtual-table-header-cell"] > [role="checkbox"]) {
4300
+ transform: translateY(2px);
4301
+ }
4302
+
4303
+ :where([data-slot="virtual-table-body"] > [data-slot="virtual-table-row"][data-terminal-row="true"] > [data-slot="virtual-table-cell"]) {
4304
+ border-block-end: 0;
4305
+ }
4306
+
4307
+ :where([data-slot="virtual-table"]:focus-visible, [data-slot="virtual-table-table"]:focus-visible) {
4308
+ outline: none;
4309
+ }
4310
+
4311
+ :where([data-slot="virtual-table"]:focus-visible, [data-slot="virtual-table"]:has([data-slot="virtual-table-table"]:focus-visible)) {
4312
+ border-color: var(--ak-color-ring);
4313
+ box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
4314
+ }
4315
+
4316
+ @media (forced-colors: active) {
4317
+ :where([data-slot="virtual-table"]) {
4318
+ border-color: canvastext;
4319
+ }
4320
+
4321
+ :where([data-slot="virtual-table"]:focus-visible, [data-slot="virtual-table"]:has([data-slot="virtual-table-table"]:focus-visible)) {
4322
+ outline-offset: 2px;
4323
+ box-shadow: none;
4324
+ outline: 2px solid highlight;
4325
+ }
4326
+
4327
+ :where([data-slot="virtual-table-head"]) {
4328
+ color: canvastext;
4329
+ background: canvas;
4330
+ box-shadow: inset 0 -1px canvastext;
4331
+ }
4332
+
4255
4333
  :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
4256
- padding: var(--ak-space-sm) var(--ak-space-xs);
4257
- font-size: var(--ak-font-size-xs);
4258
- line-height: var(--ak-line-height-tight);
4334
+ border-color: canvastext;
4335
+ }
4336
+
4337
+ :where([data-slot="virtual-table-row"][data-selected="true"]) {
4338
+ color: highlighttext;
4339
+ outline-offset: -2px;
4340
+ box-shadow: none;
4341
+ background: highlight;
4342
+ outline: 2px solid highlight;
4343
+ }
4344
+
4345
+ :where([data-slot="virtual-table-row"][data-selected="true"] > [data-slot="virtual-table-cell"]) {
4346
+ color: highlighttext;
4347
+ }
4348
+
4349
+ :where([data-slot="virtual-table-row"][data-selected="true"] > [data-slot="virtual-table-cell"]:first-child):before {
4350
+ background: highlighttext;
4259
4351
  }
4260
4352
  }
4261
4353
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@askrjs/themes",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "description": "Default theme tokens, styles, and component presets for Askr apps.",
5
5
  "keywords": [
6
6
  "askr",
@@ -120,24 +120,25 @@
120
120
  "test:checks": "vp test run -c vitest.test.checks.config.ts"
121
121
  },
122
122
  "devDependencies": {
123
- "@askrjs/askr": ">=0.2.0 <0.3.0",
124
- "@askrjs/ui": ">=0.2.0 <0.3.0",
123
+ "@askrjs/askr": ">=0.2.2 <0.3.0",
124
+ "@askrjs/ui": ">=0.2.2 <0.3.0",
125
125
  "@askrjs/vite": ">=0.2.0 <0.3.0",
126
126
  "@tsdown/css": "0.22.14",
127
127
  "@types/node": "^26.2.0",
128
128
  "@typescript/native": "npm:typescript@^7.0.2",
129
129
  "@vitest/browser-playwright": "4.1.10",
130
+ "axe-core": "^4.13.0",
130
131
  "cross-env": "^10.1.0",
131
132
  "jsdom": "^30.0.1",
132
133
  "playwright": "^1.62.1",
133
- "publint": "^0.3.23",
134
+ "publint": "^0.3.24",
134
135
  "tsdown": "0.22.14",
135
136
  "typescript": "npm:@typescript/typescript6@^6.0.2",
136
- "vite-plus": "^0.2.8"
137
+ "vite-plus": "^0.2.9"
137
138
  },
138
139
  "peerDependencies": {
139
140
  "@askrjs/askr": ">=0.2.0 <0.3.0",
140
- "@askrjs/ui": ">=0.2.0 <0.3.0"
141
+ "@askrjs/ui": ">=0.2.2 <0.3.0"
141
142
  },
142
143
  "engines": {
143
144
  "node": ">=24.0.0"