@creativecodeco/ui 0.4.2 → 0.6.0

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.
@@ -671,6 +671,32 @@ html {
671
671
  align-items: center;
672
672
  justify-content: center;
673
673
  }
674
+ .badge {
675
+ display: inline-flex;
676
+ align-items: center;
677
+ justify-content: center;
678
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
679
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
680
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
681
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
682
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
683
+ transition-duration: 200ms;
684
+ height: 1.25rem;
685
+ font-size: 0.875rem;
686
+ line-height: 1.25rem;
687
+ width: -moz-fit-content;
688
+ width: fit-content;
689
+ padding-left: 0.563rem;
690
+ padding-right: 0.563rem;
691
+ border-radius: var(--rounded-badge, 1.9rem);
692
+ border-width: 1px;
693
+ --tw-border-opacity: 1;
694
+ border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
695
+ --tw-bg-opacity: 1;
696
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
697
+ --tw-text-opacity: 1;
698
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
699
+ }
674
700
  @media (hover:hover) {
675
701
 
676
702
  .label a:hover {
@@ -678,8 +704,8 @@ html {
678
704
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
679
705
  }
680
706
 
681
- .menu li > *:not(ul):not(.menu-title):not(details):active,
682
- .menu li > *:not(ul):not(.menu-title):not(details).active,
707
+ .menu li > *:not(ul, .menu-title, details, .btn):active,
708
+ .menu li > *:not(ul, .menu-title, details, .btn).active,
683
709
  .menu li > details > summary:active {
684
710
  --tw-bg-opacity: 1;
685
711
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
@@ -698,6 +724,61 @@ html {
698
724
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
699
725
  }
700
726
  }
727
+ .btn {
728
+ display: inline-flex;
729
+ height: 3rem;
730
+ min-height: 3rem;
731
+ flex-shrink: 0;
732
+ cursor: pointer;
733
+ -webkit-user-select: none;
734
+ -moz-user-select: none;
735
+ user-select: none;
736
+ flex-wrap: wrap;
737
+ align-items: center;
738
+ justify-content: center;
739
+ border-radius: var(--rounded-btn, 0.5rem);
740
+ border-color: transparent;
741
+ border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
742
+ padding-left: 1rem;
743
+ padding-right: 1rem;
744
+ text-align: center;
745
+ font-size: 0.875rem;
746
+ line-height: 1em;
747
+ gap: 0.5rem;
748
+ font-weight: 600;
749
+ text-decoration-line: none;
750
+ transition-duration: 200ms;
751
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
752
+ border-width: var(--border-btn, 1px);
753
+ animation: button-pop var(--animation-btn, 0.25s) ease-out;
754
+ transition-property: color, background-color, border-color, opacity, box-shadow, transform;
755
+ --tw-text-opacity: 1;
756
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
757
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
758
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
759
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
760
+ outline-color: var(--fallback-bc,oklch(var(--bc)/1));
761
+ background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
762
+ --tw-bg-opacity: 1;
763
+ --tw-border-opacity: 1;
764
+ }
765
+ .btn-disabled,
766
+ .btn[disabled],
767
+ .btn:disabled {
768
+ pointer-events: none;
769
+ }
770
+ :where(.btn:is(input[type="checkbox"])),
771
+ :where(.btn:is(input[type="radio"])) {
772
+ width: auto;
773
+ -webkit-appearance: none;
774
+ -moz-appearance: none;
775
+ appearance: none;
776
+ }
777
+ .btn:is(input[type="checkbox"]):after,
778
+ .btn:is(input[type="radio"]):after {
779
+ --tw-content: attr(aria-label);
780
+ content: var(--tw-content);
781
+ }
701
782
  .checkbox {
702
783
  flex-shrink: 0;
703
784
  --chkbg: var(--fallback-bc,oklch(var(--bc)/1));
@@ -713,6 +794,62 @@ html {
713
794
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
714
795
  --tw-border-opacity: 0.2;
715
796
  }
797
+ .collapse:not(td):not(tr):not(colgroup) {
798
+ visibility: visible;
799
+ }
800
+ .collapse {
801
+ position: relative;
802
+ display: grid;
803
+ overflow: hidden;
804
+ grid-template-rows: auto 0fr;
805
+ transition: grid-template-rows 0.2s;
806
+ width: 100%;
807
+ border-radius: var(--rounded-box, 1rem);
808
+ }
809
+ .collapse-title,
810
+ .collapse > input[type="checkbox"],
811
+ .collapse > input[type="radio"],
812
+ .collapse-content {
813
+ grid-column-start: 1;
814
+ grid-row-start: 1;
815
+ }
816
+ .collapse > input[type="checkbox"],
817
+ .collapse > input[type="radio"] {
818
+ -webkit-appearance: none;
819
+ -moz-appearance: none;
820
+ appearance: none;
821
+ opacity: 0;
822
+ }
823
+ .collapse-content {
824
+ visibility: hidden;
825
+ grid-column-start: 1;
826
+ grid-row-start: 2;
827
+ min-height: 0px;
828
+ transition: visibility 0.2s;
829
+ transition: padding 0.2s ease-out,
830
+ background-color 0.2s ease-out;
831
+ padding-left: 1rem;
832
+ padding-right: 1rem;
833
+ cursor: unset;
834
+ }
835
+ .collapse[open],
836
+ .collapse-open,
837
+ .collapse:focus:not(.collapse-close) {
838
+ grid-template-rows: auto 1fr;
839
+ }
840
+ .collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
841
+ .collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
842
+ grid-template-rows: auto 1fr;
843
+ }
844
+ .collapse[open] > .collapse-content,
845
+ .collapse-open > .collapse-content,
846
+ .collapse:focus:not(.collapse-close) > .collapse-content,
847
+ .collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
848
+ .collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content {
849
+ visibility: visible;
850
+ min-height: -moz-fit-content;
851
+ min-height: fit-content;
852
+ }
716
853
  .dropdown {
717
854
  position: relative;
718
855
  display: inline-block;
@@ -803,13 +940,167 @@ html {
803
940
  --tw-text-opacity: 0.2;
804
941
  }
805
942
 
943
+ .btn:hover {
944
+ --tw-border-opacity: 1;
945
+ border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
946
+ --tw-bg-opacity: 1;
947
+ background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
948
+ }
949
+
950
+ @supports (color: color-mix(in oklab, black, black)) {
951
+
952
+ .btn:hover {
953
+ background-color: color-mix(
954
+ in oklab,
955
+ oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
956
+ black
957
+ );
958
+ border-color: color-mix(
959
+ in oklab,
960
+ oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
961
+ black
962
+ );
963
+ }
964
+ }
965
+
966
+ @supports not (color: oklch(0 0 0)) {
967
+
968
+ .btn:hover {
969
+ background-color: var(--btn-color, var(--fallback-b2));
970
+ border-color: var(--btn-color, var(--fallback-b2));
971
+ }
972
+ }
973
+
974
+ .btn.glass:hover {
975
+ --glass-opacity: 25%;
976
+ --glass-border-opacity: 15%;
977
+ }
978
+
979
+ .btn-outline:hover {
980
+ --tw-border-opacity: 1;
981
+ border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
982
+ --tw-bg-opacity: 1;
983
+ background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
984
+ --tw-text-opacity: 1;
985
+ color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
986
+ }
987
+
988
+ .btn-outline.btn-primary:hover {
989
+ --tw-text-opacity: 1;
990
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
991
+ }
992
+
993
+ @supports (color: color-mix(in oklab, black, black)) {
994
+
995
+ .btn-outline.btn-primary:hover {
996
+ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
997
+ border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
998
+ }
999
+ }
1000
+
1001
+ .btn-outline.btn-secondary:hover {
1002
+ --tw-text-opacity: 1;
1003
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
1004
+ }
1005
+
1006
+ @supports (color: color-mix(in oklab, black, black)) {
1007
+
1008
+ .btn-outline.btn-secondary:hover {
1009
+ background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
1010
+ border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
1011
+ }
1012
+ }
1013
+
1014
+ .btn-outline.btn-accent:hover {
1015
+ --tw-text-opacity: 1;
1016
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
1017
+ }
1018
+
1019
+ @supports (color: color-mix(in oklab, black, black)) {
1020
+
1021
+ .btn-outline.btn-accent:hover {
1022
+ background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
1023
+ border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
1024
+ }
1025
+ }
1026
+
1027
+ .btn-outline.btn-success:hover {
1028
+ --tw-text-opacity: 1;
1029
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
1030
+ }
1031
+
1032
+ @supports (color: color-mix(in oklab, black, black)) {
1033
+
1034
+ .btn-outline.btn-success:hover {
1035
+ background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
1036
+ border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
1037
+ }
1038
+ }
1039
+
1040
+ .btn-outline.btn-info:hover {
1041
+ --tw-text-opacity: 1;
1042
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
1043
+ }
1044
+
1045
+ @supports (color: color-mix(in oklab, black, black)) {
1046
+
1047
+ .btn-outline.btn-info:hover {
1048
+ background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
1049
+ border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
1050
+ }
1051
+ }
1052
+
1053
+ .btn-outline.btn-warning:hover {
1054
+ --tw-text-opacity: 1;
1055
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
1056
+ }
1057
+
1058
+ @supports (color: color-mix(in oklab, black, black)) {
1059
+
1060
+ .btn-outline.btn-warning:hover {
1061
+ background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
1062
+ border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
1063
+ }
1064
+ }
1065
+
1066
+ .btn-outline.btn-error:hover {
1067
+ --tw-text-opacity: 1;
1068
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
1069
+ }
1070
+
1071
+ @supports (color: color-mix(in oklab, black, black)) {
1072
+
1073
+ .btn-outline.btn-error:hover {
1074
+ background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
1075
+ border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
1076
+ }
1077
+ }
1078
+
1079
+ .btn-disabled:hover,
1080
+ .btn[disabled]:hover,
1081
+ .btn:disabled:hover {
1082
+ --tw-border-opacity: 0;
1083
+ background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1084
+ --tw-bg-opacity: 0.2;
1085
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1086
+ --tw-text-opacity: 0.2;
1087
+ }
1088
+
1089
+ @supports (color: color-mix(in oklab, black, black)) {
1090
+
1091
+ .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
1092
+ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1093
+ border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1094
+ }
1095
+ }
1096
+
806
1097
  .dropdown.dropdown-hover:hover .dropdown-content {
807
1098
  --tw-scale-x: 1;
808
1099
  --tw-scale-y: 1;
809
1100
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
810
1101
  }
811
1102
 
812
- :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
1103
+ :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
813
1104
  cursor: pointer;
814
1105
  outline: 2px solid transparent;
815
1106
  outline-offset: 2px;
@@ -817,7 +1108,7 @@ html {
817
1108
 
818
1109
  @supports (color: oklch(0 0 0)) {
819
1110
 
820
- :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
1111
+ :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
821
1112
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
822
1113
  }
823
1114
  }
@@ -858,17 +1149,41 @@ html {
858
1149
  --tw-bg-opacity: 1;
859
1150
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
860
1151
  }
1152
+ .input[type="number"]::-webkit-inner-spin-button,
1153
+ .input-md[type="number"]::-webkit-inner-spin-button {
1154
+ margin-top: -1rem;
1155
+ margin-bottom: -1rem;
1156
+ margin-inline-end: -1rem;
1157
+ }
1158
+ .\!join {
1159
+ display: inline-flex !important;
1160
+ align-items: stretch !important;
1161
+ border-radius: var(--rounded-btn, 0.5rem) !important;
1162
+ }
861
1163
  .join {
862
1164
  display: inline-flex;
863
1165
  align-items: stretch;
864
1166
  border-radius: var(--rounded-btn, 0.5rem);
865
1167
  }
1168
+ .\!join :where(.join-item) {
1169
+ border-start-end-radius: 0 !important;
1170
+ border-end-end-radius: 0 !important;
1171
+ border-end-start-radius: 0 !important;
1172
+ border-start-start-radius: 0 !important;
1173
+ }
866
1174
  .join :where(.join-item) {
867
1175
  border-start-end-radius: 0;
868
1176
  border-end-end-radius: 0;
869
1177
  border-end-start-radius: 0;
870
1178
  border-start-start-radius: 0;
871
1179
  }
1180
+ .\!join .join-item:not(:first-child):not(:last-child),
1181
+ .\!join *:not(:first-child):not(:last-child) .join-item {
1182
+ border-start-end-radius: 0 !important;
1183
+ border-end-end-radius: 0 !important;
1184
+ border-end-start-radius: 0 !important;
1185
+ border-start-start-radius: 0 !important;
1186
+ }
872
1187
  .join .join-item:not(:first-child):not(:last-child),
873
1188
  .join *:not(:first-child):not(:last-child) .join-item {
874
1189
  border-start-end-radius: 0;
@@ -876,39 +1191,104 @@ html {
876
1191
  border-end-start-radius: 0;
877
1192
  border-start-start-radius: 0;
878
1193
  }
1194
+ .\!join .join-item:not(:first-child):not(:last-child),
1195
+ .\!join *:not(:first-child):not(:last-child) .join-item {
1196
+ border-start-end-radius: 0 !important;
1197
+ border-end-end-radius: 0 !important;
1198
+ border-end-start-radius: 0 !important;
1199
+ border-start-start-radius: 0 !important;
1200
+ }
1201
+ .\!join .join-item:first-child:not(:last-child),
1202
+ .\!join *:first-child:not(:last-child) .join-item {
1203
+ border-start-end-radius: 0 !important;
1204
+ border-end-end-radius: 0 !important;
1205
+ }
879
1206
  .join .join-item:first-child:not(:last-child),
880
1207
  .join *:first-child:not(:last-child) .join-item {
881
1208
  border-start-end-radius: 0;
882
1209
  border-end-end-radius: 0;
883
1210
  }
1211
+ .\!join .join-item:first-child:not(:last-child),
1212
+ .\!join *:first-child:not(:last-child) .join-item {
1213
+ border-start-end-radius: 0 !important;
1214
+ border-end-end-radius: 0 !important;
1215
+ }
1216
+ .\!join .dropdown .join-item:first-child:not(:last-child),
1217
+ .\!join *:first-child:not(:last-child) .dropdown .join-item {
1218
+ border-start-end-radius: inherit !important;
1219
+ border-end-end-radius: inherit !important;
1220
+ }
884
1221
  .join .dropdown .join-item:first-child:not(:last-child),
885
1222
  .join *:first-child:not(:last-child) .dropdown .join-item {
886
1223
  border-start-end-radius: inherit;
887
1224
  border-end-end-radius: inherit;
888
1225
  }
1226
+ .\!join .dropdown .join-item:first-child:not(:last-child),
1227
+ .\!join *:first-child:not(:last-child) .dropdown .join-item {
1228
+ border-start-end-radius: inherit !important;
1229
+ border-end-end-radius: inherit !important;
1230
+ }
1231
+ .\!join :where(.join-item:first-child:not(:last-child)),
1232
+ .\!join :where(*:first-child:not(:last-child) .join-item) {
1233
+ border-end-start-radius: inherit !important;
1234
+ border-start-start-radius: inherit !important;
1235
+ }
889
1236
  .join :where(.join-item:first-child:not(:last-child)),
890
1237
  .join :where(*:first-child:not(:last-child) .join-item) {
891
1238
  border-end-start-radius: inherit;
892
1239
  border-start-start-radius: inherit;
893
1240
  }
1241
+ .\!join :where(.join-item:first-child:not(:last-child)),
1242
+ .\!join :where(*:first-child:not(:last-child) .join-item) {
1243
+ border-end-start-radius: inherit !important;
1244
+ border-start-start-radius: inherit !important;
1245
+ }
1246
+ .\!join .join-item:last-child:not(:first-child),
1247
+ .\!join *:last-child:not(:first-child) .join-item {
1248
+ border-end-start-radius: 0 !important;
1249
+ border-start-start-radius: 0 !important;
1250
+ }
894
1251
  .join .join-item:last-child:not(:first-child),
895
1252
  .join *:last-child:not(:first-child) .join-item {
896
1253
  border-end-start-radius: 0;
897
1254
  border-start-start-radius: 0;
898
1255
  }
1256
+ .\!join .join-item:last-child:not(:first-child),
1257
+ .\!join *:last-child:not(:first-child) .join-item {
1258
+ border-end-start-radius: 0 !important;
1259
+ border-start-start-radius: 0 !important;
1260
+ }
1261
+ .\!join :where(.join-item:last-child:not(:first-child)),
1262
+ .\!join :where(*:last-child:not(:first-child) .join-item) {
1263
+ border-start-end-radius: inherit !important;
1264
+ border-end-end-radius: inherit !important;
1265
+ }
899
1266
  .join :where(.join-item:last-child:not(:first-child)),
900
1267
  .join :where(*:last-child:not(:first-child) .join-item) {
901
1268
  border-start-end-radius: inherit;
902
1269
  border-end-end-radius: inherit;
903
1270
  }
1271
+ .\!join :where(.join-item:last-child:not(:first-child)),
1272
+ .\!join :where(*:last-child:not(:first-child) .join-item) {
1273
+ border-start-end-radius: inherit !important;
1274
+ border-end-end-radius: inherit !important;
1275
+ }
904
1276
  @supports not selector(:has(*)) {
905
1277
 
1278
+ :where(.\!join *) {
1279
+ border-radius: inherit !important;
1280
+ }
1281
+
906
1282
  :where(.join *) {
907
1283
  border-radius: inherit;
908
1284
  }
909
1285
  }
910
1286
  @supports selector(:has(*)) {
911
1287
 
1288
+ :where(.\!join *:has(.join-item)) {
1289
+ border-radius: inherit !important;
1290
+ }
1291
+
912
1292
  :where(.join *:has(.join-item)) {
913
1293
  border-radius: inherit;
914
1294
  }
@@ -927,8 +1307,7 @@ html {
927
1307
  margin-inline-start: 1rem;
928
1308
  padding-inline-start: 0.5rem;
929
1309
  }
930
- .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
931
- .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
1310
+ .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
932
1311
  display: grid;
933
1312
  grid-auto-flow: column;
934
1313
  align-content: flex-start;
@@ -1010,65 +1389,284 @@ html {
1010
1389
  4px 4px;
1011
1390
  background-repeat: no-repeat;
1012
1391
  }
1013
- .select[multiple] {
1014
- height: auto;
1392
+ .select[multiple] {
1393
+ height: auto;
1394
+ }
1395
+ .table {
1396
+ position: relative;
1397
+ width: 100%;
1398
+ border-radius: var(--rounded-box, 1rem);
1399
+ text-align: left;
1400
+ font-size: 0.875rem;
1401
+ line-height: 1.25rem;
1402
+ }
1403
+ .table :where(.table-pin-rows thead tr) {
1404
+ position: sticky;
1405
+ top: 0px;
1406
+ z-index: 1;
1407
+ --tw-bg-opacity: 1;
1408
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
1409
+ }
1410
+ .table :where(.table-pin-rows tfoot tr) {
1411
+ position: sticky;
1412
+ bottom: 0px;
1413
+ z-index: 1;
1414
+ --tw-bg-opacity: 1;
1415
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
1416
+ }
1417
+ .table :where(.table-pin-cols tr th) {
1418
+ position: sticky;
1419
+ left: 0px;
1420
+ right: 0px;
1421
+ --tw-bg-opacity: 1;
1422
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
1423
+ }
1424
+ .avatar-group :where(.avatar) {
1425
+ overflow: hidden;
1426
+ border-radius: 9999px;
1427
+ border-width: 4px;
1428
+ --tw-border-opacity: 1;
1429
+ border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity)));
1430
+ }
1431
+ .badge-primary {
1432
+ --tw-border-opacity: 1;
1433
+ border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
1434
+ --tw-bg-opacity: 1;
1435
+ background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
1436
+ --tw-text-opacity: 1;
1437
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1438
+ }
1439
+ .badge-outline {
1440
+ border-color: currentColor;
1441
+ --tw-border-opacity: 0.5;
1442
+ background-color: transparent;
1443
+ color: currentColor;
1444
+ }
1445
+ .badge-outline.badge-neutral {
1446
+ --tw-text-opacity: 1;
1447
+ color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity)));
1448
+ }
1449
+ .badge-outline.badge-primary {
1450
+ --tw-text-opacity: 1;
1451
+ color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
1452
+ }
1453
+ .badge-outline.badge-secondary {
1454
+ --tw-text-opacity: 1;
1455
+ color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
1456
+ }
1457
+ .badge-outline.badge-accent {
1458
+ --tw-text-opacity: 1;
1459
+ color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
1460
+ }
1461
+ .badge-outline.badge-info {
1462
+ --tw-text-opacity: 1;
1463
+ color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
1464
+ }
1465
+ .badge-outline.badge-success {
1466
+ --tw-text-opacity: 1;
1467
+ color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
1468
+ }
1469
+ .badge-outline.badge-warning {
1470
+ --tw-text-opacity: 1;
1471
+ color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
1472
+ }
1473
+ .badge-outline.badge-error {
1474
+ --tw-text-opacity: 1;
1475
+ color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
1476
+ }
1477
+ .btm-nav > *.\!disabled {
1478
+ pointer-events: none !important;
1479
+ --tw-border-opacity: 0 !important;
1480
+ background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
1481
+ --tw-bg-opacity: 0.1 !important;
1482
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important;
1483
+ --tw-text-opacity: 0.2 !important;
1484
+ }
1485
+ .btm-nav > *.disabled,
1486
+ .btm-nav > *[disabled] {
1487
+ pointer-events: none;
1488
+ --tw-border-opacity: 0;
1489
+ background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1490
+ --tw-bg-opacity: 0.1;
1491
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1492
+ --tw-text-opacity: 0.2;
1493
+ }
1494
+ .btm-nav > * .label {
1495
+ font-size: 1rem;
1496
+ line-height: 1.5rem;
1497
+ }
1498
+ .btn:active:hover,
1499
+ .btn:active:focus {
1500
+ animation: button-pop 0s ease-out;
1501
+ transform: scale(var(--btn-focus-scale, 0.97));
1502
+ }
1503
+ @supports not (color: oklch(0 0 0)) {
1504
+
1505
+ .btn {
1506
+ background-color: var(--btn-color, var(--fallback-b2));
1507
+ border-color: var(--btn-color, var(--fallback-b2));
1508
+ }
1509
+
1510
+ .btn-primary {
1511
+ --btn-color: var(--fallback-p);
1512
+ }
1513
+ }
1514
+ @supports (color: color-mix(in oklab, black, black)) {
1515
+
1516
+ .btn-outline.btn-primary.btn-active {
1517
+ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1518
+ border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1519
+ }
1520
+
1521
+ .btn-outline.btn-secondary.btn-active {
1522
+ background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
1523
+ border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
1524
+ }
1525
+
1526
+ .btn-outline.btn-accent.btn-active {
1527
+ background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
1528
+ border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
1529
+ }
1530
+
1531
+ .btn-outline.btn-success.btn-active {
1532
+ background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
1533
+ border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
1534
+ }
1535
+
1536
+ .btn-outline.btn-info.btn-active {
1537
+ background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
1538
+ border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
1539
+ }
1540
+
1541
+ .btn-outline.btn-warning.btn-active {
1542
+ background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
1543
+ border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
1544
+ }
1545
+
1546
+ .btn-outline.btn-error.btn-active {
1547
+ background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
1548
+ border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
1549
+ }
1550
+ }
1551
+ .btn:focus-visible {
1552
+ outline-style: solid;
1553
+ outline-width: 2px;
1554
+ outline-offset: 2px;
1555
+ }
1556
+ .btn-primary {
1557
+ --tw-text-opacity: 1;
1558
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1559
+ outline-color: var(--fallback-p,oklch(var(--p)/1));
1560
+ }
1561
+ @supports (color: oklch(0 0 0)) {
1562
+
1563
+ .btn-primary {
1564
+ --btn-color: var(--p);
1565
+ }
1566
+ }
1567
+ .btn.glass {
1568
+ --tw-shadow: 0 0 #0000;
1569
+ --tw-shadow-colored: 0 0 #0000;
1570
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1571
+ outline-color: currentColor;
1572
+ }
1573
+ .btn.glass.btn-active {
1574
+ --glass-opacity: 25%;
1575
+ --glass-border-opacity: 15%;
1576
+ }
1577
+ .btn-outline {
1578
+ border-color: currentColor;
1579
+ background-color: transparent;
1580
+ --tw-text-opacity: 1;
1581
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1582
+ --tw-shadow: 0 0 #0000;
1583
+ --tw-shadow-colored: 0 0 #0000;
1584
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1585
+ }
1586
+ .btn-outline.btn-active {
1587
+ --tw-border-opacity: 1;
1588
+ border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
1589
+ --tw-bg-opacity: 1;
1590
+ background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
1591
+ --tw-text-opacity: 1;
1592
+ color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
1593
+ }
1594
+ .btn-outline.btn-primary {
1595
+ --tw-text-opacity: 1;
1596
+ color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
1597
+ }
1598
+ .btn-outline.btn-primary.btn-active {
1599
+ --tw-text-opacity: 1;
1600
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1601
+ }
1602
+ .btn-outline.btn-secondary {
1603
+ --tw-text-opacity: 1;
1604
+ color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
1605
+ }
1606
+ .btn-outline.btn-secondary.btn-active {
1607
+ --tw-text-opacity: 1;
1608
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
1609
+ }
1610
+ .btn-outline.btn-accent {
1611
+ --tw-text-opacity: 1;
1612
+ color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
1613
+ }
1614
+ .btn-outline.btn-accent.btn-active {
1615
+ --tw-text-opacity: 1;
1616
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
1015
1617
  }
1016
- .table {
1017
- position: relative;
1018
- width: 100%;
1019
- border-radius: var(--rounded-box, 1rem);
1020
- text-align: left;
1021
- font-size: 0.875rem;
1022
- line-height: 1.25rem;
1618
+ .btn-outline.btn-success {
1619
+ --tw-text-opacity: 1;
1620
+ color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
1023
1621
  }
1024
- .table :where(.table-pin-rows thead tr) {
1025
- position: sticky;
1026
- top: 0px;
1027
- z-index: 1;
1028
- --tw-bg-opacity: 1;
1029
- background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
1622
+ .btn-outline.btn-success.btn-active {
1623
+ --tw-text-opacity: 1;
1624
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
1030
1625
  }
1031
- .table :where(.table-pin-rows tfoot tr) {
1032
- position: sticky;
1033
- bottom: 0px;
1034
- z-index: 1;
1035
- --tw-bg-opacity: 1;
1036
- background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
1626
+ .btn-outline.btn-info {
1627
+ --tw-text-opacity: 1;
1628
+ color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
1037
1629
  }
1038
- .table :where(.table-pin-cols tr th) {
1039
- position: sticky;
1040
- left: 0px;
1041
- right: 0px;
1042
- --tw-bg-opacity: 1;
1043
- background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
1630
+ .btn-outline.btn-info.btn-active {
1631
+ --tw-text-opacity: 1;
1632
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
1044
1633
  }
1045
- .avatar-group :where(.avatar) {
1046
- overflow: hidden;
1047
- border-radius: 9999px;
1048
- border-width: 4px;
1049
- --tw-border-opacity: 1;
1050
- border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity)));
1634
+ .btn-outline.btn-warning {
1635
+ --tw-text-opacity: 1;
1636
+ color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
1051
1637
  }
1052
- .btm-nav > *.\!disabled {
1053
- pointer-events: none !important;
1054
- --tw-border-opacity: 0 !important;
1055
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
1056
- --tw-bg-opacity: 0.1 !important;
1057
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important;
1058
- --tw-text-opacity: 0.2 !important;
1638
+ .btn-outline.btn-warning.btn-active {
1639
+ --tw-text-opacity: 1;
1640
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
1059
1641
  }
1060
- .btm-nav > *.disabled,
1061
- .btm-nav > *[disabled] {
1062
- pointer-events: none;
1642
+ .btn-outline.btn-error {
1643
+ --tw-text-opacity: 1;
1644
+ color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
1645
+ }
1646
+ .btn-outline.btn-error.btn-active {
1647
+ --tw-text-opacity: 1;
1648
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
1649
+ }
1650
+ .btn.btn-disabled,
1651
+ .btn[disabled],
1652
+ .btn:disabled {
1063
1653
  --tw-border-opacity: 0;
1064
1654
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1065
- --tw-bg-opacity: 0.1;
1655
+ --tw-bg-opacity: 0.2;
1066
1656
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1067
1657
  --tw-text-opacity: 0.2;
1068
1658
  }
1069
- .btm-nav > * .label {
1070
- font-size: 1rem;
1071
- line-height: 1.5rem;
1659
+ .btn:is(input[type="checkbox"]:checked),
1660
+ .btn:is(input[type="radio"]:checked) {
1661
+ --tw-border-opacity: 1;
1662
+ border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
1663
+ --tw-bg-opacity: 1;
1664
+ background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
1665
+ --tw-text-opacity: 1;
1666
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1667
+ }
1668
+ .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
1669
+ outline-color: var(--fallback-p,oklch(var(--p)/1));
1072
1670
  }
1073
1671
  @keyframes button-pop {
1074
1672
 
@@ -1141,6 +1739,115 @@ html {
1141
1739
  background-position-y: 0;
1142
1740
  }
1143
1741
  }
1742
+ details.collapse {
1743
+ width: 100%;
1744
+ }
1745
+ details.collapse summary {
1746
+ position: relative;
1747
+ display: block;
1748
+ outline: 2px solid transparent;
1749
+ outline-offset: 2px;
1750
+ }
1751
+ details.collapse summary::-webkit-details-marker {
1752
+ display: none;
1753
+ }
1754
+ .collapse:focus-visible {
1755
+ outline-style: solid;
1756
+ outline-width: 2px;
1757
+ outline-offset: 2px;
1758
+ outline-color: var(--fallback-bc,oklch(var(--bc)/1));
1759
+ }
1760
+ .collapse:has(.collapse-title:focus-visible),
1761
+ .collapse:has(> input[type="checkbox"]:focus-visible),
1762
+ .collapse:has(> input[type="radio"]:focus-visible) {
1763
+ outline-style: solid;
1764
+ outline-width: 2px;
1765
+ outline-offset: 2px;
1766
+ outline-color: var(--fallback-bc,oklch(var(--bc)/1));
1767
+ }
1768
+ .collapse-arrow > .collapse-title:after {
1769
+ position: absolute;
1770
+ display: block;
1771
+ height: 0.5rem;
1772
+ width: 0.5rem;
1773
+ --tw-translate-y: -100%;
1774
+ --tw-rotate: 45deg;
1775
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1776
+ transition-property: all;
1777
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1778
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1779
+ transition-duration: 150ms;
1780
+ transition-duration: 0.2s;
1781
+ top: 1.9rem;
1782
+ inset-inline-end: 1.4rem;
1783
+ content: "";
1784
+ transform-origin: 75% 75%;
1785
+ box-shadow: 2px 2px;
1786
+ pointer-events: none;
1787
+ }
1788
+ .collapse-plus > .collapse-title:after {
1789
+ position: absolute;
1790
+ display: block;
1791
+ height: 0.5rem;
1792
+ width: 0.5rem;
1793
+ transition-property: all;
1794
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1795
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1796
+ transition-duration: 300ms;
1797
+ top: 0.9rem;
1798
+ inset-inline-end: 1.4rem;
1799
+ content: "+";
1800
+ pointer-events: none;
1801
+ }
1802
+ .collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"],
1803
+ .collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked),
1804
+ .collapse:not(.collapse-open):not(.collapse-close) > .collapse-title {
1805
+ cursor: pointer;
1806
+ }
1807
+ .collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title {
1808
+ cursor: unset;
1809
+ }
1810
+ .collapse-title {
1811
+ position: relative;
1812
+ }
1813
+ :where(.collapse > input[type="checkbox"]),
1814
+ :where(.collapse > input[type="radio"]) {
1815
+ z-index: 1;
1816
+ }
1817
+ .collapse-title,
1818
+ :where(.collapse > input[type="checkbox"]),
1819
+ :where(.collapse > input[type="radio"]) {
1820
+ width: 100%;
1821
+ padding: 1rem;
1822
+ padding-inline-end: 3rem;
1823
+ min-height: 3.75rem;
1824
+ transition: background-color 0.2s ease-out;
1825
+ }
1826
+ .collapse[open] > :where(.collapse-content),
1827
+ .collapse-open > :where(.collapse-content),
1828
+ .collapse:focus:not(.collapse-close) > :where(.collapse-content),
1829
+ .collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content),
1830
+ .collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) {
1831
+ padding-bottom: 1rem;
1832
+ transition: padding 0.2s ease-out,
1833
+ background-color 0.2s ease-out;
1834
+ }
1835
+ .collapse[open].collapse-arrow > .collapse-title:after,
1836
+ .collapse-open.collapse-arrow > .collapse-title:after,
1837
+ .collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
1838
+ .collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
1839
+ .collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
1840
+ --tw-translate-y: -50%;
1841
+ --tw-rotate: 225deg;
1842
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1843
+ }
1844
+ .collapse[open].collapse-plus > .collapse-title:after,
1845
+ .collapse-open.collapse-plus > .collapse-title:after,
1846
+ .collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
1847
+ .collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
1848
+ .collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
1849
+ content: "−";
1850
+ }
1144
1851
  .dropdown.dropdown-open .dropdown-content,
1145
1852
  .dropdown:focus .dropdown-content,
1146
1853
  .dropdown:focus-within .dropdown-content {
@@ -1154,6 +1861,11 @@ html {
1154
1861
  --tw-text-opacity: 1;
1155
1862
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1156
1863
  }
1864
+ .input input {
1865
+ --tw-bg-opacity: 1;
1866
+ background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
1867
+ background-color: transparent;
1868
+ }
1157
1869
  .input input:focus {
1158
1870
  outline: 2px solid transparent;
1159
1871
  outline-offset: 2px;
@@ -1206,11 +1918,19 @@ html {
1206
1918
  .input::-webkit-date-and-time-value {
1207
1919
  text-align: inherit;
1208
1920
  }
1921
+ .\!join > :where(*:not(:first-child)) {
1922
+ margin-top: 0px !important;
1923
+ margin-bottom: 0px !important;
1924
+ margin-inline-start: -1px !important;
1925
+ }
1209
1926
  .join > :where(*:not(:first-child)) {
1210
1927
  margin-top: 0px;
1211
1928
  margin-bottom: 0px;
1212
1929
  margin-inline-start: -1px;
1213
1930
  }
1931
+ .join-item:focus {
1932
+ isolation: isolate;
1933
+ }
1214
1934
  .\!loading {
1215
1935
  pointer-events: none !important;
1216
1936
  display: inline-block !important;
@@ -1259,7 +1979,7 @@ html {
1259
1979
  opacity: 0.1;
1260
1980
  content: "";
1261
1981
  }
1262
- .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
1982
+ .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
1263
1983
  .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
1264
1984
  border-radius: var(--rounded-btn, 0.5rem);
1265
1985
  padding-left: 1rem;
@@ -1275,12 +1995,7 @@ html {
1275
1995
  transition-duration: 200ms;
1276
1996
  text-wrap: balance;
1277
1997
  }
1278
- :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
1279
- :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
1280
- :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
1281
- :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
1282
- :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
1283
- :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
1998
+ :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
1284
1999
  cursor: pointer;
1285
2000
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
1286
2001
  --tw-text-opacity: 1;
@@ -1288,8 +2003,8 @@ html {
1288
2003
  outline: 2px solid transparent;
1289
2004
  outline-offset: 2px;
1290
2005
  }
1291
- .menu li > *:not(ul):not(.menu-title):not(details):active,
1292
- .menu li > *:not(ul):not(.menu-title):not(details).active,
2006
+ .menu li > *:not(ul, .menu-title, details, .btn):active,
2007
+ .menu li > *:not(ul, .menu-title, details, .btn).active,
1293
2008
  .menu li > details > summary:active {
1294
2009
  --tw-bg-opacity: 1;
1295
2010
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
@@ -1535,9 +2250,19 @@ html {
1535
2250
  opacity: 1;
1536
2251
  }
1537
2252
  }
2253
+ .\!join.join-vertical {
2254
+ flex-direction: column !important;
2255
+ }
1538
2256
  .join.join-vertical {
1539
2257
  flex-direction: column;
1540
2258
  }
2259
+ .\!join.join-vertical .join-item:first-child:not(:last-child),
2260
+ .\!join.join-vertical *:first-child:not(:last-child) .join-item {
2261
+ border-end-start-radius: 0 !important;
2262
+ border-end-end-radius: 0 !important;
2263
+ border-start-start-radius: inherit !important;
2264
+ border-start-end-radius: inherit !important;
2265
+ }
1541
2266
  .join.join-vertical .join-item:first-child:not(:last-child),
1542
2267
  .join.join-vertical *:first-child:not(:last-child) .join-item {
1543
2268
  border-end-start-radius: 0;
@@ -1545,6 +2270,20 @@ html {
1545
2270
  border-start-start-radius: inherit;
1546
2271
  border-start-end-radius: inherit;
1547
2272
  }
2273
+ .\!join.join-vertical .join-item:first-child:not(:last-child),
2274
+ .\!join.join-vertical *:first-child:not(:last-child) .join-item {
2275
+ border-end-start-radius: 0 !important;
2276
+ border-end-end-radius: 0 !important;
2277
+ border-start-start-radius: inherit !important;
2278
+ border-start-end-radius: inherit !important;
2279
+ }
2280
+ .\!join.join-vertical .join-item:last-child:not(:first-child),
2281
+ .\!join.join-vertical *:last-child:not(:first-child) .join-item {
2282
+ border-start-start-radius: 0 !important;
2283
+ border-start-end-radius: 0 !important;
2284
+ border-end-start-radius: inherit !important;
2285
+ border-end-end-radius: inherit !important;
2286
+ }
1548
2287
  .join.join-vertical .join-item:last-child:not(:first-child),
1549
2288
  .join.join-vertical *:last-child:not(:first-child) .join-item {
1550
2289
  border-start-start-radius: 0;
@@ -1552,9 +2291,26 @@ html {
1552
2291
  border-end-start-radius: inherit;
1553
2292
  border-end-end-radius: inherit;
1554
2293
  }
2294
+ .\!join.join-vertical .join-item:last-child:not(:first-child),
2295
+ .\!join.join-vertical *:last-child:not(:first-child) .join-item {
2296
+ border-start-start-radius: 0 !important;
2297
+ border-start-end-radius: 0 !important;
2298
+ border-end-start-radius: inherit !important;
2299
+ border-end-end-radius: inherit !important;
2300
+ }
2301
+ .\!join.join-horizontal {
2302
+ flex-direction: row !important;
2303
+ }
1555
2304
  .join.join-horizontal {
1556
2305
  flex-direction: row;
1557
2306
  }
2307
+ .\!join.join-horizontal .join-item:first-child:not(:last-child),
2308
+ .\!join.join-horizontal *:first-child:not(:last-child) .join-item {
2309
+ border-end-end-radius: 0 !important;
2310
+ border-start-end-radius: 0 !important;
2311
+ border-end-start-radius: inherit !important;
2312
+ border-start-start-radius: inherit !important;
2313
+ }
1558
2314
  .join.join-horizontal .join-item:first-child:not(:last-child),
1559
2315
  .join.join-horizontal *:first-child:not(:last-child) .join-item {
1560
2316
  border-end-end-radius: 0;
@@ -1562,6 +2318,20 @@ html {
1562
2318
  border-end-start-radius: inherit;
1563
2319
  border-start-start-radius: inherit;
1564
2320
  }
2321
+ .\!join.join-horizontal .join-item:first-child:not(:last-child),
2322
+ .\!join.join-horizontal *:first-child:not(:last-child) .join-item {
2323
+ border-end-end-radius: 0 !important;
2324
+ border-start-end-radius: 0 !important;
2325
+ border-end-start-radius: inherit !important;
2326
+ border-start-start-radius: inherit !important;
2327
+ }
2328
+ .\!join.join-horizontal .join-item:last-child:not(:first-child),
2329
+ .\!join.join-horizontal *:last-child:not(:first-child) .join-item {
2330
+ border-end-start-radius: 0 !important;
2331
+ border-start-start-radius: 0 !important;
2332
+ border-end-end-radius: inherit !important;
2333
+ border-start-end-radius: inherit !important;
2334
+ }
1565
2335
  .join.join-horizontal .join-item:last-child:not(:first-child),
1566
2336
  .join.join-horizontal *:last-child:not(:first-child) .join-item {
1567
2337
  border-end-start-radius: 0;
@@ -1569,6 +2339,13 @@ html {
1569
2339
  border-end-end-radius: inherit;
1570
2340
  border-start-end-radius: inherit;
1571
2341
  }
2342
+ .\!join.join-horizontal .join-item:last-child:not(:first-child),
2343
+ .\!join.join-horizontal *:last-child:not(:first-child) .join-item {
2344
+ border-end-start-radius: 0 !important;
2345
+ border-start-start-radius: 0 !important;
2346
+ border-end-end-radius: inherit !important;
2347
+ border-start-end-radius: inherit !important;
2348
+ }
1572
2349
  .avatar.online:before {
1573
2350
  content: "";
1574
2351
  position: absolute;
@@ -1601,16 +2378,29 @@ html {
1601
2378
  top: 7%;
1602
2379
  right: 7%;
1603
2380
  }
2381
+ .\!join.join-vertical > :where(*:not(:first-child)) {
2382
+ margin-left: 0px !important;
2383
+ margin-right: 0px !important;
2384
+ margin-top: -1px !important;
2385
+ }
1604
2386
  .join.join-vertical > :where(*:not(:first-child)) {
1605
2387
  margin-left: 0px;
1606
2388
  margin-right: 0px;
1607
2389
  margin-top: -1px;
1608
2390
  }
2391
+ .\!join.join-horizontal > :where(*:not(:first-child)) {
2392
+ margin-top: 0px !important;
2393
+ margin-bottom: 0px !important;
2394
+ margin-inline-start: -1px !important;
2395
+ }
1609
2396
  .join.join-horizontal > :where(*:not(:first-child)) {
1610
2397
  margin-top: 0px;
1611
2398
  margin-bottom: 0px;
1612
2399
  margin-inline-start: -1px;
1613
2400
  }
2401
+ .collapse {
2402
+ visibility: collapse;
2403
+ }
1614
2404
  .relative {
1615
2405
  position: relative;
1616
2406
  }
@@ -1635,9 +2425,15 @@ html {
1635
2425
  .cursor-pointer {
1636
2426
  cursor: pointer;
1637
2427
  }
2428
+ .flex-wrap {
2429
+ flex-wrap: wrap;
2430
+ }
1638
2431
  .justify-start {
1639
2432
  justify-content: flex-start;
1640
2433
  }
2434
+ .gap-2 {
2435
+ gap: 0.5rem;
2436
+ }
1641
2437
  .gap-3 {
1642
2438
  gap: 0.75rem;
1643
2439
  }
@@ -1650,14 +2446,32 @@ html {
1650
2446
  .rounded-full {
1651
2447
  border-radius: 9999px;
1652
2448
  }
2449
+ .border {
2450
+ border-width: 1px;
2451
+ }
2452
+ .border-base-300 {
2453
+ --tw-border-opacity: 1;
2454
+ border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
2455
+ }
1653
2456
  .bg-base-100 {
1654
2457
  --tw-bg-opacity: 1;
1655
2458
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
1656
2459
  }
2460
+ .bg-base-200 {
2461
+ --tw-bg-opacity: 1;
2462
+ background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
2463
+ }
1657
2464
  .bg-neutral {
1658
2465
  --tw-bg-opacity: 1;
1659
2466
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1660
2467
  }
2468
+ .text-xl {
2469
+ font-size: 1.25rem;
2470
+ line-height: 1.75rem;
2471
+ }
2472
+ .font-medium {
2473
+ font-weight: 500;
2474
+ }
1661
2475
  .text-neutral-content {
1662
2476
  --tw-text-opacity: 1;
1663
2477
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
@@ -1666,6 +2480,9 @@ html {
1666
2480
  --tw-text-opacity: 1;
1667
2481
  color: rgb(239 68 68 / var(--tw-text-opacity));
1668
2482
  }
2483
+ .\!outline {
2484
+ outline-style: solid !important;
2485
+ }
1669
2486
  .outline {
1670
2487
  outline-style: solid;
1671
2488
  }
@@ -1677,6 +2494,50 @@ html {
1677
2494
  .filter {
1678
2495
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1679
2496
  }
2497
+ .accordion-type-arrow > .collapse-title:after {
2498
+ position: absolute;
2499
+ display: block;
2500
+ height: 0.5rem;
2501
+ width: 0.5rem;
2502
+ --tw-translate-y: -100%;
2503
+ --tw-rotate: 45deg;
2504
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2505
+ transition-property: all;
2506
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2507
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2508
+ transition-duration: 150ms;
2509
+ transition-duration: 0.2s;
2510
+ top: 1.9rem;
2511
+ inset-inline-end: 1.4rem;
2512
+ content: "";
2513
+ transform-origin: 75% 75%;
2514
+ box-shadow: 2px 2px;
2515
+ pointer-events: none;
2516
+ }
2517
+ .collapse[open].accordion-type-arrow > .collapse-title:after,
2518
+ .collapse-open.accordion-type-arrow > .collapse-title:after,.accordion-type-arrow:focus:not(.collapse-close) > .collapse-title:after,.accordion-type-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,.accordion-type-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
2519
+ --tw-translate-y: -50%;
2520
+ --tw-rotate: 225deg;
2521
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2522
+ }
2523
+ .accordion-type-plus > .collapse-title:after {
2524
+ position: absolute;
2525
+ display: block;
2526
+ height: 0.5rem;
2527
+ width: 0.5rem;
2528
+ transition-property: all;
2529
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2530
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2531
+ transition-duration: 300ms;
2532
+ top: 0.9rem;
2533
+ inset-inline-end: 1.4rem;
2534
+ content: "+";
2535
+ pointer-events: none;
2536
+ }
2537
+ .collapse[open].accordion-type-plus > .collapse-title:after,
2538
+ .collapse-open.accordion-type-plus > .collapse-title:after,.accordion-type-plus:focus:not(.collapse-close) > .collapse-title:after,.accordion-type-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,.accordion-type-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
2539
+ content: "−";
2540
+ }
1680
2541
  .avatar-size-xs {
1681
2542
  width: 2rem;
1682
2543
  }
@@ -1684,238 +2545,58 @@ html {
1684
2545
  font-size: 0.75rem;
1685
2546
  line-height: 1rem;
1686
2547
  }
1687
- .avatar-size-sm {
1688
- width: 3rem;
1689
- }
1690
- .avatar-size-sm > span {
1691
- font-size: 0.875rem;
1692
- line-height: 1.25rem;
1693
- }
1694
- .avatar-size-md {
1695
- width: 4rem;
1696
- }
1697
- .avatar-size-md > span {
1698
- font-size: 1.25rem;
1699
- line-height: 1.75rem;
1700
- }
1701
- .avatar-size-lg {
1702
- width: 6rem;
1703
- }
1704
- .avatar-size-lg > span {
1705
- font-size: 1.875rem;
1706
- line-height: 2.25rem;
1707
- }
1708
- .avatar-ring {
1709
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1710
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1711
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1712
- --tw-ring-opacity: 1;
1713
- --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity)));
1714
- --tw-ring-offset-width: 2px;
1715
- --tw-ring-offset-color: var(--fallback-b1,oklch(var(--b1)/1));
1716
- }
1717
- .button {
1718
- display: inline-flex;
1719
- height: 3rem;
1720
- min-height: 3rem;
1721
- flex-shrink: 0;
1722
- cursor: pointer;
1723
- -webkit-user-select: none;
1724
- -moz-user-select: none;
1725
- user-select: none;
1726
- flex-wrap: wrap;
1727
- align-items: center;
1728
- justify-content: center;
1729
- border-radius: var(--rounded-btn, 0.5rem);
1730
- border-color: transparent;
1731
- border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
1732
- padding-left: 1rem;
1733
- padding-right: 1rem;
1734
- text-align: center;
1735
- font-size: 0.875rem;
1736
- line-height: 1em;
1737
- gap: 0.5rem;
1738
- font-weight: 600;
1739
- text-decoration-line: none;
1740
- transition-duration: 200ms;
1741
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1742
- border-width: var(--border-btn, 1px);
1743
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
1744
- transition-property: color, background-color, border-color, opacity, box-shadow, transform;
1745
- --tw-text-opacity: 1;
1746
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1747
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1748
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1749
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1750
- outline-color: var(--fallback-bc,oklch(var(--bc)/1));
1751
- background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
1752
- --tw-bg-opacity: 1;
1753
- --tw-border-opacity: 1;
1754
- }
1755
- .button[disabled],.button:disabled {
1756
- pointer-events: none;
2548
+ .avatar-size-sm {
2549
+ width: 3rem;
1757
2550
  }
1758
- :where(.button:is(input[type="checkbox"])),
1759
- :where(.button:is(input[type="radio"])) {
1760
- width: auto;
1761
- -webkit-appearance: none;
1762
- -moz-appearance: none;
1763
- appearance: none;
2551
+ .avatar-size-sm > span {
2552
+ font-size: 0.875rem;
2553
+ line-height: 1.25rem;
1764
2554
  }
1765
- .button:is(input[type="checkbox"]):after,.button:is(input[type="radio"]):after {
1766
- --tw-content: attr(aria-label);
1767
- content: var(--tw-content);
2555
+ .avatar-size-md {
2556
+ width: 4rem;
1768
2557
  }
1769
- @media (hover: hover) {
1770
-
1771
- .button:hover {
1772
- --tw-border-opacity: 1;
1773
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
1774
- --tw-bg-opacity: 1;
1775
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
1776
- }
1777
-
1778
- @supports (color: color-mix(in oklab, black, black)) {
1779
-
1780
- .button:hover {
1781
- background-color: color-mix(
1782
- in oklab,
1783
- oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
1784
- black
1785
- );
1786
- border-color: color-mix(
1787
- in oklab,
1788
- oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
1789
- black
1790
- );
1791
- }
1792
- }
1793
-
1794
- @supports not (color: oklch(0 0 0)) {
1795
-
1796
- .button:hover {
1797
- background-color: var(--btn-color, var(--fallback-b2));
1798
- border-color: var(--btn-color, var(--fallback-b2));
1799
- }
1800
- }
1801
-
1802
- .button:hover {
1803
- --tw-border-opacity: 1;
1804
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
1805
- --tw-bg-opacity: 1;
1806
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
1807
- }
1808
-
1809
- @supports (color: color-mix(in oklab, black, black)) {
1810
-
1811
- .button:hover {
1812
- background-color: color-mix(
1813
- in oklab,
1814
- oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
1815
- black
1816
- );
1817
- border-color: color-mix(
1818
- in oklab,
1819
- oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
1820
- black
1821
- );
1822
- }
1823
- }
1824
-
1825
- @supports not (color: oklch(0 0 0)) {
1826
-
1827
- .button:hover {
1828
- background-color: var(--btn-color, var(--fallback-b2));
1829
- border-color: var(--btn-color, var(--fallback-b2));
1830
- }
1831
- }
1832
-
1833
- .button:hover {
1834
- --tw-border-opacity: 1;
1835
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
1836
- --tw-bg-opacity: 1;
1837
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
1838
- }
1839
-
1840
- @supports (color: color-mix(in oklab, black, black)) {
1841
-
1842
- .button:hover {
1843
- background-color: color-mix(
1844
- in oklab,
1845
- oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
1846
- black
1847
- );
1848
- border-color: color-mix(
1849
- in oklab,
1850
- oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
1851
- black
1852
- );
1853
- }
1854
- }
1855
-
1856
- @supports not (color: oklch(0 0 0)) {
1857
-
1858
- .button:hover {
1859
- background-color: var(--btn-color, var(--fallback-b2));
1860
- border-color: var(--btn-color, var(--fallback-b2));
1861
- }
1862
- }
1863
-
1864
- .button.glass:hover {
1865
- --glass-opacity: 25%;
1866
- --glass-border-opacity: 15%;
1867
- }
1868
-
1869
- .button[disabled]:hover,.button:disabled:hover {
1870
- --tw-border-opacity: 0;
1871
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1872
- --tw-bg-opacity: 0.2;
1873
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1874
- --tw-text-opacity: 0.2;
1875
- }
1876
-
1877
- @supports (color: color-mix(in oklab, black, black)) {
1878
-
1879
- .button:is(input[type="checkbox"]:checked):hover,.button:is(input[type="radio"]:checked):hover {
1880
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1881
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1882
- }
1883
- }
2558
+ .avatar-size-md > span {
2559
+ font-size: 1.25rem;
2560
+ line-height: 1.75rem;
1884
2561
  }
1885
- .button:active:hover,.button:active:focus {
1886
- animation: button-pop 0s ease-out;
1887
- transform: scale(var(--btn-focus-scale, 0.97));
2562
+ .avatar-size-lg {
2563
+ width: 6rem;
1888
2564
  }
1889
- @supports not (color: oklch(0 0 0)) {
1890
-
1891
- .button {
1892
- background-color: var(--btn-color, var(--fallback-b2));
1893
- border-color: var(--btn-color, var(--fallback-b2));
1894
- }
2565
+ .avatar-size-lg > span {
2566
+ font-size: 1.875rem;
2567
+ line-height: 2.25rem;
1895
2568
  }
1896
- .button:focus-visible {
1897
- outline-style: solid;
1898
- outline-width: 2px;
1899
- outline-offset: 2px;
2569
+ .avatar-ring {
2570
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2571
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2572
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2573
+ --tw-ring-opacity: 1;
2574
+ --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity)));
2575
+ --tw-ring-offset-width: 2px;
2576
+ --tw-ring-offset-color: var(--fallback-b1,oklch(var(--b1)/1));
1900
2577
  }
1901
- .button.glass {
1902
- --tw-shadow: 0 0 #0000;
1903
- --tw-shadow-colored: 0 0 #0000;
1904
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1905
- outline-color: currentColor;
2578
+ .badge-size-lg {
2579
+ height: 1.5rem;
2580
+ font-size: 1rem;
2581
+ line-height: 1.5rem;
2582
+ padding-left: 0.688rem;
2583
+ padding-right: 0.688rem;
1906
2584
  }
1907
- .button.glass.btn-active {
1908
- --glass-opacity: 25%;
1909
- --glass-border-opacity: 15%;
2585
+ .badge-size-sm {
2586
+ height: 1rem;
2587
+ font-size: 0.75rem;
2588
+ line-height: 1rem;
2589
+ padding-left: 0.438rem;
2590
+ padding-right: 0.438rem;
1910
2591
  }
1911
- .button.btn-disabled,.button[disabled],.button:disabled {
1912
- --tw-border-opacity: 0;
1913
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1914
- --tw-bg-opacity: 0.2;
1915
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1916
- --tw-text-opacity: 0.2;
2592
+ .badge-size-xs {
2593
+ height: 0.75rem;
2594
+ font-size: 0.75rem;
2595
+ line-height: .75rem;
2596
+ padding-left: 0.313rem;
2597
+ padding-right: 0.313rem;
1917
2598
  }
1918
- .button:is(input[type="checkbox"]:checked),.button:is(input[type="radio"]:checked) {
2599
+ .badge-color-primary {
1919
2600
  --tw-border-opacity: 1;
1920
2601
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
1921
2602
  --tw-bg-opacity: 1;
@@ -1923,8 +2604,77 @@ html {
1923
2604
  --tw-text-opacity: 1;
1924
2605
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1925
2606
  }
1926
- .button:is(input[type="checkbox"]:checked):focus-visible,.button:is(input[type="radio"]:checked):focus-visible {
1927
- outline-color: var(--fallback-p,oklch(var(--p)/1));
2607
+ .badge-outline.badge-color-primary {
2608
+ --tw-text-opacity: 1;
2609
+ color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
2610
+ }
2611
+ .badge-color-secondary {
2612
+ --tw-border-opacity: 1;
2613
+ border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
2614
+ --tw-bg-opacity: 1;
2615
+ background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
2616
+ --tw-text-opacity: 1;
2617
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
2618
+ }
2619
+ .badge-outline.badge-color-secondary {
2620
+ --tw-text-opacity: 1;
2621
+ color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
2622
+ }
2623
+ .badge-color-accent {
2624
+ --tw-border-opacity: 1;
2625
+ border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
2626
+ --tw-bg-opacity: 1;
2627
+ background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
2628
+ --tw-text-opacity: 1;
2629
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
2630
+ }
2631
+ .badge-outline.badge-color-accent {
2632
+ --tw-text-opacity: 1;
2633
+ color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
2634
+ }
2635
+ .badge-color-success {
2636
+ border-color: transparent;
2637
+ --tw-bg-opacity: 1;
2638
+ background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
2639
+ --tw-text-opacity: 1;
2640
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
2641
+ }
2642
+ .badge-outline.badge-color-success {
2643
+ --tw-text-opacity: 1;
2644
+ color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
2645
+ }
2646
+ .badge-color-warning {
2647
+ border-color: transparent;
2648
+ --tw-bg-opacity: 1;
2649
+ background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
2650
+ --tw-text-opacity: 1;
2651
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
2652
+ }
2653
+ .badge-outline.badge-color-warning {
2654
+ --tw-text-opacity: 1;
2655
+ color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
2656
+ }
2657
+ .badge-color-info {
2658
+ border-color: transparent;
2659
+ --tw-bg-opacity: 1;
2660
+ background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
2661
+ --tw-text-opacity: 1;
2662
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
2663
+ }
2664
+ .badge-outline.badge-color-info {
2665
+ --tw-text-opacity: 1;
2666
+ color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
2667
+ }
2668
+ .badge-color-error {
2669
+ border-color: transparent;
2670
+ --tw-bg-opacity: 1;
2671
+ background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
2672
+ --tw-text-opacity: 1;
2673
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
2674
+ }
2675
+ .badge-outline.badge-color-error {
2676
+ --tw-text-opacity: 1;
2677
+ color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
1928
2678
  }
1929
2679
  @media (hover: hover) {
1930
2680
 
@@ -2690,6 +3440,44 @@ html {
2690
3440
  --tw-text-opacity: 1;
2691
3441
  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
2692
3442
  }
3443
+ @media (hover: hover) {
3444
+
3445
+ .button-color-ghost:hover {
3446
+ border-color: transparent;
3447
+ }
3448
+
3449
+ @supports (color: oklch(0 0 0)) {
3450
+
3451
+ .button-color-ghost:hover {
3452
+ background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
3453
+ }
3454
+ }
3455
+
3456
+ .button-color-ghost:hover {
3457
+ border-color: transparent;
3458
+ }
3459
+
3460
+ @supports (color: oklch(0 0 0)) {
3461
+
3462
+ .button-color-ghost:hover {
3463
+ background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
3464
+ }
3465
+ }
3466
+ }
3467
+ .button-color-ghost {
3468
+ border-width: 1px;
3469
+ border-color: transparent;
3470
+ background-color: transparent;
3471
+ color: currentColor;
3472
+ --tw-shadow: 0 0 #0000;
3473
+ --tw-shadow-colored: 0 0 #0000;
3474
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3475
+ outline-color: currentColor;
3476
+ }
3477
+ .button-color-ghost.btn-active {
3478
+ border-color: transparent;
3479
+ background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
3480
+ }
2693
3481
  .button-size-lg {
2694
3482
  height: 4rem;
2695
3483
  min-height: 4rem;
@@ -3309,6 +4097,11 @@ html {
3309
4097
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
3310
4098
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
3311
4099
  }
4100
+ .text-box-size-xs[type="number"]::-webkit-inner-spin-button {
4101
+ margin-top: -0.25rem;
4102
+ margin-bottom: -0.25rem;
4103
+ margin-inline-end: -0px;
4104
+ }
3312
4105
  .text-box-size-xs {
3313
4106
  height: 1.5rem;
3314
4107
  padding-left: 0.5rem;
@@ -3323,6 +4116,11 @@ html {
3323
4116
  .text-box-size-xs.text-box-with-right-icon {
3324
4117
  padding-right: 2rem;
3325
4118
  }
4119
+ .text-box-size-sm[type="number"]::-webkit-inner-spin-button {
4120
+ margin-top: 0px;
4121
+ margin-bottom: 0px;
4122
+ margin-inline-end: -0px;
4123
+ }
3326
4124
  .text-box-size-sm {
3327
4125
  height: 2rem;
3328
4126
  padding-left: 0.75rem;
@@ -3336,6 +4134,11 @@ html {
3336
4134
  .text-box-size-sm.text-box-with-right-icon {
3337
4135
  padding-right: 2rem;
3338
4136
  }
4137
+ .text-box-size-md[type="number"]::-webkit-inner-spin-button {
4138
+ margin-top: -1rem;
4139
+ margin-bottom: -1rem;
4140
+ margin-inline-end: -1rem;
4141
+ }
3339
4142
  .text-box-size-md {
3340
4143
  height: 3rem;
3341
4144
  padding-left: 1rem;
@@ -3350,6 +4153,11 @@ html {
3350
4153
  .text-box-size-md.text-box-with-right-icon {
3351
4154
  padding-right: 2.25rem;
3352
4155
  }
4156
+ .text-box-size-lg[type="number"]::-webkit-inner-spin-button {
4157
+ margin-top: -1.5rem;
4158
+ margin-bottom: -1.5rem;
4159
+ margin-inline-end: -1.5rem;
4160
+ }
3353
4161
  .text-box-size-lg {
3354
4162
  height: 4rem;
3355
4163
  padding-left: 1.5rem;