@alivecss/aliveui 1.0.3 → 1.0.5

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.
package/dist/cli.js CHANGED
@@ -585,6 +585,9 @@ function generateBase(_config) {
585
585
  ::before,
586
586
  ::after {
587
587
  box-sizing: border-box;
588
+ border-width: 0;
589
+ border-style: solid;
590
+ border-color: currentColor;
588
591
  }
589
592
 
590
593
  html {
@@ -604,6 +607,39 @@ body {
604
607
  -moz-osx-font-smoothing: grayscale;
605
608
  }
606
609
 
610
+ blockquote,
611
+ dl,
612
+ dd,
613
+ h1,
614
+ h2,
615
+ h3,
616
+ h4,
617
+ h5,
618
+ h6,
619
+ hr,
620
+ figure,
621
+ p,
622
+ pre {
623
+ margin: 0;
624
+ }
625
+
626
+ fieldset {
627
+ margin: 0;
628
+ padding: 0;
629
+ }
630
+
631
+ legend {
632
+ padding: 0;
633
+ }
634
+
635
+ ol,
636
+ ul,
637
+ menu {
638
+ list-style: none;
639
+ margin: 0;
640
+ padding: 0;
641
+ }
642
+
607
643
  button,
608
644
  input,
609
645
  optgroup,
@@ -613,9 +649,24 @@ textarea {
613
649
  font-size: 100%;
614
650
  font-weight: inherit;
615
651
  line-height: inherit;
652
+ letter-spacing: inherit;
616
653
  color: inherit;
617
654
  margin: 0;
618
655
  padding: 0;
656
+ background-color: transparent;
657
+ background-image: none;
658
+ }
659
+
660
+ button,
661
+ [type='button'],
662
+ [type='reset'],
663
+ [type='submit'] {
664
+ -webkit-appearance: button;
665
+ cursor: pointer;
666
+ }
667
+
668
+ :disabled {
669
+ cursor: default;
619
670
  }
620
671
 
621
672
  button,
@@ -623,6 +674,28 @@ select {
623
674
  text-transform: none;
624
675
  }
625
676
 
677
+ img,
678
+ svg,
679
+ video,
680
+ canvas,
681
+ audio,
682
+ iframe,
683
+ embed,
684
+ object {
685
+ display: block;
686
+ vertical-align: middle;
687
+ }
688
+
689
+ img,
690
+ video {
691
+ max-width: 100%;
692
+ height: auto;
693
+ }
694
+
695
+ [hidden] {
696
+ display: none;
697
+ }
698
+
626
699
  /* \u2500\u2500 Design tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
627
700
  :root {
628
701
  /* Motion durations */
@@ -820,6 +893,30 @@ select {
820
893
  .alive-loop-ping { animation: alive-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
821
894
  .alive-loop-bounce { animation: alive-bounce 1s infinite; }
822
895
 
896
+ /* \u2500\u2500 Scroll-reveal (data-alive-scroll) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
897
+
898
+ [data-alive-scroll] {
899
+ opacity: 0;
900
+ transform: translateY(8px);
901
+ }
902
+ [data-alive-scroll].is-visible {
903
+ animation: alive-fade-up var(--alive-duration-slow) var(--alive-ease-emphasized) both;
904
+ }
905
+ [data-alive-scroll="fade"] {
906
+ opacity: 0;
907
+ transform: none;
908
+ }
909
+ [data-alive-scroll="fade"].is-visible {
910
+ animation: alive-fade-in var(--alive-duration-normal) var(--alive-ease-standard) both;
911
+ }
912
+ [data-alive-scroll="scale"] {
913
+ opacity: 0;
914
+ transform: scale(0.94);
915
+ }
916
+ [data-alive-scroll="scale"].is-visible {
917
+ animation: alive-scale-in var(--alive-duration-slow) var(--alive-ease-emphasized) both;
918
+ }
919
+
823
920
  /* Reduced motion \u2014 respect system preference */
824
921
  @media (prefers-reduced-motion: reduce) {
825
922
  .alive-enter,
@@ -842,6 +939,18 @@ select {
842
939
  transform: none;
843
940
  }
844
941
 
942
+ [data-alive-scroll],
943
+ [data-alive-scroll="fade"],
944
+ [data-alive-scroll="scale"] {
945
+ opacity: 1;
946
+ transform: none;
947
+ }
948
+ [data-alive-scroll].is-visible,
949
+ [data-alive-scroll="fade"].is-visible,
950
+ [data-alive-scroll="scale"].is-visible {
951
+ animation: none;
952
+ }
953
+
845
954
  /* depth system \u2014 disable hover lift and active press */
846
955
  .d2,
847
956
  .d2:hover,
package/dist/index.js CHANGED
@@ -593,6 +593,9 @@ function generateBase(_config) {
593
593
  ::before,
594
594
  ::after {
595
595
  box-sizing: border-box;
596
+ border-width: 0;
597
+ border-style: solid;
598
+ border-color: currentColor;
596
599
  }
597
600
 
598
601
  html {
@@ -612,6 +615,39 @@ body {
612
615
  -moz-osx-font-smoothing: grayscale;
613
616
  }
614
617
 
618
+ blockquote,
619
+ dl,
620
+ dd,
621
+ h1,
622
+ h2,
623
+ h3,
624
+ h4,
625
+ h5,
626
+ h6,
627
+ hr,
628
+ figure,
629
+ p,
630
+ pre {
631
+ margin: 0;
632
+ }
633
+
634
+ fieldset {
635
+ margin: 0;
636
+ padding: 0;
637
+ }
638
+
639
+ legend {
640
+ padding: 0;
641
+ }
642
+
643
+ ol,
644
+ ul,
645
+ menu {
646
+ list-style: none;
647
+ margin: 0;
648
+ padding: 0;
649
+ }
650
+
615
651
  button,
616
652
  input,
617
653
  optgroup,
@@ -621,9 +657,24 @@ textarea {
621
657
  font-size: 100%;
622
658
  font-weight: inherit;
623
659
  line-height: inherit;
660
+ letter-spacing: inherit;
624
661
  color: inherit;
625
662
  margin: 0;
626
663
  padding: 0;
664
+ background-color: transparent;
665
+ background-image: none;
666
+ }
667
+
668
+ button,
669
+ [type='button'],
670
+ [type='reset'],
671
+ [type='submit'] {
672
+ -webkit-appearance: button;
673
+ cursor: pointer;
674
+ }
675
+
676
+ :disabled {
677
+ cursor: default;
627
678
  }
628
679
 
629
680
  button,
@@ -631,6 +682,28 @@ select {
631
682
  text-transform: none;
632
683
  }
633
684
 
685
+ img,
686
+ svg,
687
+ video,
688
+ canvas,
689
+ audio,
690
+ iframe,
691
+ embed,
692
+ object {
693
+ display: block;
694
+ vertical-align: middle;
695
+ }
696
+
697
+ img,
698
+ video {
699
+ max-width: 100%;
700
+ height: auto;
701
+ }
702
+
703
+ [hidden] {
704
+ display: none;
705
+ }
706
+
634
707
  /* \u2500\u2500 Design tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
635
708
  :root {
636
709
  /* Motion durations */
@@ -828,6 +901,30 @@ select {
828
901
  .alive-loop-ping { animation: alive-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
829
902
  .alive-loop-bounce { animation: alive-bounce 1s infinite; }
830
903
 
904
+ /* \u2500\u2500 Scroll-reveal (data-alive-scroll) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
905
+
906
+ [data-alive-scroll] {
907
+ opacity: 0;
908
+ transform: translateY(8px);
909
+ }
910
+ [data-alive-scroll].is-visible {
911
+ animation: alive-fade-up var(--alive-duration-slow) var(--alive-ease-emphasized) both;
912
+ }
913
+ [data-alive-scroll="fade"] {
914
+ opacity: 0;
915
+ transform: none;
916
+ }
917
+ [data-alive-scroll="fade"].is-visible {
918
+ animation: alive-fade-in var(--alive-duration-normal) var(--alive-ease-standard) both;
919
+ }
920
+ [data-alive-scroll="scale"] {
921
+ opacity: 0;
922
+ transform: scale(0.94);
923
+ }
924
+ [data-alive-scroll="scale"].is-visible {
925
+ animation: alive-scale-in var(--alive-duration-slow) var(--alive-ease-emphasized) both;
926
+ }
927
+
831
928
  /* Reduced motion \u2014 respect system preference */
832
929
  @media (prefers-reduced-motion: reduce) {
833
930
  .alive-enter,
@@ -850,6 +947,18 @@ select {
850
947
  transform: none;
851
948
  }
852
949
 
950
+ [data-alive-scroll],
951
+ [data-alive-scroll="fade"],
952
+ [data-alive-scroll="scale"] {
953
+ opacity: 1;
954
+ transform: none;
955
+ }
956
+ [data-alive-scroll].is-visible,
957
+ [data-alive-scroll="fade"].is-visible,
958
+ [data-alive-scroll="scale"].is-visible {
959
+ animation: none;
960
+ }
961
+
853
962
  /* depth system \u2014 disable hover lift and active press */
854
963
  .d2,
855
964
  .d2:hover,