@aortl/admin-css 0.16.2 → 0.18.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.
package/dist/admin.css CHANGED
@@ -25,6 +25,7 @@
25
25
  --font-weight-medium: 500;
26
26
  --font-weight-semibold: 600;
27
27
  --font-weight-bold: 700;
28
+ --tracking-tight: -0.025em;
28
29
  --tracking-wide: 0.025em;
29
30
  --leading-tight: 1.25;
30
31
  --leading-snug: 1.375;
@@ -417,6 +418,9 @@
417
418
  max-width: 96rem;
418
419
  }
419
420
  }
421
+ .my-4 {
422
+ margin-block: calc(var(--spacing) * 4);
423
+ }
420
424
  .block {
421
425
  display: block;
422
426
  }
@@ -464,6 +468,10 @@
464
468
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
465
469
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
466
470
  }
471
+ .outline {
472
+ outline-style: var(--tw-outline-style);
473
+ outline-width: 1px;
474
+ }
467
475
  }
468
476
  @font-face {
469
477
  font-family: "IBM Plex Sans";
@@ -696,11 +704,27 @@
696
704
  row-gap: 0.25rem;
697
705
  align-items: center;
698
706
  }
707
+ .alert:has(> .alert-action), .alert:has(> .alert-dismiss) {
708
+ display: grid;
709
+ grid-template-columns: minmax(0, 1fr) auto;
710
+ column-gap: 0.5rem;
711
+ row-gap: 0.25rem;
712
+ align-items: center;
713
+ }
714
+ .alert:has(> .alert-action):has(> .alert-dismiss) {
715
+ grid-template-columns: minmax(0, 1fr) auto auto;
716
+ }
717
+ .alert:has(> :is(i, svg):first-child):is(:has(> .alert-action), :has(> .alert-dismiss)) {
718
+ grid-template-columns: auto minmax(0, 1fr) auto;
719
+ }
720
+ .alert:has(> :is(i, svg):first-child):has(> .alert-action):has(> .alert-dismiss) {
721
+ grid-template-columns: auto minmax(0, 1fr) auto auto;
722
+ }
699
723
  .alert > :is(i, svg):first-child {
700
724
  font-size: 1rem;
701
725
  line-height: 1.25;
702
726
  }
703
- .alert:has(> :is(i, svg):first-child):has(> .alert-title) {
727
+ .alert:has(> .alert-title):is( :has(> :is(i, svg):first-child), :has(> .alert-action), :has(> .alert-dismiss) ) {
704
728
  grid-template-rows: auto auto;
705
729
  align-items: start;
706
730
  }
@@ -708,9 +732,28 @@
708
732
  grid-row: 1 / -1;
709
733
  }
710
734
  .alert > :is(.alert-title, .alert-description) {
711
- grid-column: 2;
712
735
  min-width: 0;
713
736
  }
737
+ .alert:has(> :is(i, svg):first-child) > :is(.alert-title, .alert-description) {
738
+ grid-column: 2;
739
+ }
740
+ .alert > :is(.alert-action, .alert-dismiss) {
741
+ grid-row: 1 / -1;
742
+ justify-self: end;
743
+ align-self: center;
744
+ }
745
+ .alert > .alert-action {
746
+ --tw-font-weight: var(--font-weight-medium);
747
+ font-weight: var(--font-weight-medium);
748
+ white-space: nowrap;
749
+ grid-column: -2;
750
+ }
751
+ .alert > .alert-dismiss {
752
+ grid-column: -2;
753
+ }
754
+ .alert:has(> .alert-dismiss) > .alert-action {
755
+ grid-column: -3;
756
+ }
714
757
  .alert-info {
715
758
  border-color: var(--color-info);
716
759
  background-color: var(--color-info);
@@ -738,6 +781,55 @@
738
781
  .alert-description {
739
782
  opacity: 0.85;
740
783
  }
784
+ .alert-dismiss {
785
+ margin-right: calc(var(--spacing) * -1);
786
+ display: inline-flex;
787
+ width: calc(var(--spacing) * 5);
788
+ height: calc(var(--spacing) * 5);
789
+ flex-shrink: 0;
790
+ cursor: pointer;
791
+ align-items: center;
792
+ justify-content: center;
793
+ border-radius: 0.25rem;
794
+ color: inherit;
795
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
796
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
797
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
798
+ --tw-duration: 150ms;
799
+ transition-duration: 150ms;
800
+ &:focus-visible {
801
+ outline-style: var(--tw-outline-style);
802
+ outline-width: 2px;
803
+ }
804
+ &:focus-visible {
805
+ outline-offset: 1px;
806
+ }
807
+ &:focus-visible {
808
+ outline-color: var(--color-focus);
809
+ }
810
+ }
811
+ .alert-dismiss:hover {
812
+ background-color: currentColor;
813
+ @supports (color: color-mix(in lab, red, red)) {
814
+ background-color: color-mix(in oklab, currentColor 15%, transparent);
815
+ }
816
+ }
817
+ .alert .link {
818
+ color: currentcolor;
819
+ &:hover {
820
+ @media (hover: hover) {
821
+ color: currentcolor;
822
+ }
823
+ }
824
+ &:hover {
825
+ @media (hover: hover) {
826
+ opacity: 85%;
827
+ }
828
+ }
829
+ &:focus-visible {
830
+ outline-color: currentcolor;
831
+ }
832
+ }
741
833
  }
742
834
  @layer components {
743
835
  .app-shell {
@@ -858,6 +950,74 @@
858
950
  background-color: var(--color-primary);
859
951
  color: var(--color-primary-content);
860
952
  }
953
+ .badge-soft.badge-info {
954
+ border-color: var(--color-info-muted);
955
+ background-color: var(--color-info-muted);
956
+ color: var(--color-info);
957
+ }
958
+ .badge-soft.badge-success {
959
+ border-color: var(--color-success-muted);
960
+ background-color: var(--color-success-muted);
961
+ color: var(--color-success);
962
+ }
963
+ .badge-soft.badge-warning {
964
+ border-color: var(--color-warning-muted);
965
+ background-color: var(--color-warning-muted);
966
+ color: var(--color-text);
967
+ }
968
+ .badge-soft.badge-danger {
969
+ border-color: var(--color-danger-muted);
970
+ background-color: var(--color-danger-muted);
971
+ color: var(--color-danger);
972
+ }
973
+ .badge-soft.badge-primary {
974
+ border-color: var(--color-primary-muted);
975
+ background-color: var(--color-primary-muted);
976
+ color: var(--color-text);
977
+ }
978
+ .badge-remove {
979
+ margin-right: calc(var(--spacing) * -1);
980
+ display: inline-flex;
981
+ width: calc(var(--spacing) * 3.5);
982
+ height: calc(var(--spacing) * 3.5);
983
+ flex-shrink: 0;
984
+ cursor: pointer;
985
+ align-items: center;
986
+ justify-content: center;
987
+ border-radius: calc(infinity * 1px);
988
+ color: inherit;
989
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
990
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
991
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
992
+ --tw-duration: 150ms;
993
+ transition-duration: 150ms;
994
+ &:focus-visible {
995
+ outline-style: var(--tw-outline-style);
996
+ outline-width: 2px;
997
+ }
998
+ &:focus-visible {
999
+ outline-offset: 1px;
1000
+ }
1001
+ &:focus-visible {
1002
+ outline-color: var(--color-focus);
1003
+ }
1004
+ }
1005
+ .badge-remove:hover {
1006
+ background-color: currentColor;
1007
+ @supports (color: color-mix(in lab, red, red)) {
1008
+ background-color: color-mix(in oklab, currentColor 15%, transparent);
1009
+ }
1010
+ }
1011
+ .badge-sm .badge-remove {
1012
+ margin-right: calc(var(--spacing) * -0.5);
1013
+ width: calc(var(--spacing) * 3);
1014
+ height: calc(var(--spacing) * 3);
1015
+ }
1016
+ .badge-lg .badge-remove {
1017
+ margin-right: calc(var(--spacing) * -1.5);
1018
+ width: calc(var(--spacing) * 4.5);
1019
+ height: calc(var(--spacing) * 4.5);
1020
+ }
861
1021
  .badge-sm {
862
1022
  height: calc(var(--spacing) * 4);
863
1023
  gap: calc(var(--spacing) * 0.5);
@@ -891,6 +1051,113 @@
891
1051
  -webkit-user-select: none;
892
1052
  user-select: none;
893
1053
  }
1054
+ .brand-tile > :is(i, svg) {
1055
+ font-size: 14px;
1056
+ }
1057
+ .brand-tile-lg {
1058
+ width: calc(var(--spacing) * 10);
1059
+ height: calc(var(--spacing) * 10);
1060
+ border-radius: var(--radius-md);
1061
+ font-size: var(--text-sm);
1062
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1063
+ }
1064
+ .brand-tile-lg > :is(i, svg) {
1065
+ font-size: 20px;
1066
+ }
1067
+ .brand-tile-soft {
1068
+ background-color: var(--color-system-accent-muted);
1069
+ color: var(--color-system-accent);
1070
+ }
1071
+ .brand-tile-info {
1072
+ background-color: var(--color-info-muted);
1073
+ color: var(--color-info);
1074
+ }
1075
+ .brand-tile-success {
1076
+ background-color: var(--color-success-muted);
1077
+ color: var(--color-success);
1078
+ }
1079
+ .brand-tile-danger {
1080
+ background-color: var(--color-danger-muted);
1081
+ color: var(--color-danger);
1082
+ }
1083
+ .brand-tile:has(> img) {
1084
+ border-style: var(--tw-border-style);
1085
+ border-width: 1px;
1086
+ border-color: var(--color-border);
1087
+ background-color: var(--color-surface);
1088
+ padding: calc(var(--spacing) * 0.5);
1089
+ }
1090
+ .brand-tile > img {
1091
+ width: 100%;
1092
+ height: 100%;
1093
+ border-radius: inherit;
1094
+ object-fit: contain;
1095
+ }
1096
+ }
1097
+ @layer components {
1098
+ .avatar {
1099
+ position: relative;
1100
+ display: inline-flex;
1101
+ width: calc(var(--spacing) * 8);
1102
+ height: calc(var(--spacing) * 8);
1103
+ flex-shrink: 0;
1104
+ align-items: center;
1105
+ justify-content: center;
1106
+ overflow: hidden;
1107
+ border-radius: calc(infinity * 1px);
1108
+ background-color: var(--color-surface-strong);
1109
+ font-size: var(--text-xs);
1110
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1111
+ --tw-leading: 1;
1112
+ line-height: 1;
1113
+ --tw-font-weight: var(--font-weight-medium);
1114
+ font-weight: var(--font-weight-medium);
1115
+ --tw-tracking: var(--tracking-tight);
1116
+ letter-spacing: var(--tracking-tight);
1117
+ color: var(--color-text-muted);
1118
+ -webkit-user-select: none;
1119
+ user-select: none;
1120
+ }
1121
+ .avatar > img {
1122
+ position: absolute;
1123
+ inset: calc(var(--spacing) * 0);
1124
+ width: 100%;
1125
+ height: 100%;
1126
+ object-fit: cover;
1127
+ }
1128
+ .avatar-square {
1129
+ border-radius: var(--radius-md);
1130
+ }
1131
+ .avatar-sm {
1132
+ width: calc(var(--spacing) * 6);
1133
+ height: calc(var(--spacing) * 6);
1134
+ font-size: 0.625rem;
1135
+ }
1136
+ .avatar-lg {
1137
+ width: calc(var(--spacing) * 10);
1138
+ height: calc(var(--spacing) * 10);
1139
+ font-size: var(--text-sm);
1140
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1141
+ }
1142
+ .avatar-group {
1143
+ display: inline-flex;
1144
+ align-items: center;
1145
+ }
1146
+ .avatar-group > .avatar {
1147
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1148
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1149
+ --tw-ring-color: var(--color-surface);
1150
+ }
1151
+ .avatar-group > .avatar + .avatar {
1152
+ margin-inline-start: calc(var(--spacing) * -2);
1153
+ }
1154
+ .avatar-more {
1155
+ background-color: var(--color-surface-strong);
1156
+ --tw-font-weight: var(--font-weight-medium);
1157
+ font-weight: var(--font-weight-medium);
1158
+ color: var(--color-text-muted);
1159
+ font-variant-numeric: tabular-nums;
1160
+ }
894
1161
  }
895
1162
  @layer components {
896
1163
  .kbd {
@@ -954,6 +1221,18 @@
954
1221
  .indicator:has(> .card) {
955
1222
  --indicator-offset: 6px;
956
1223
  }
1224
+ .indicator:has(> .avatar) {
1225
+ --indicator-offset: 5px;
1226
+ }
1227
+ .indicator:has(> .avatar-sm) {
1228
+ --indicator-offset: 3px;
1229
+ }
1230
+ .indicator:has(> .avatar-lg) {
1231
+ --indicator-offset: 6px;
1232
+ }
1233
+ .indicator:has(> .avatar-square) {
1234
+ --indicator-offset: 2px;
1235
+ }
957
1236
  .indicator-item {
958
1237
  position: absolute;
959
1238
  z-index: 1;
@@ -1387,6 +1666,24 @@
1387
1666
  color: var(--color-success);
1388
1667
  }
1389
1668
  }
1669
+ @layer components {
1670
+ .separator {
1671
+ margin: calc(var(--spacing) * 0);
1672
+ display: block;
1673
+ height: 1px;
1674
+ width: 100%;
1675
+ flex-shrink: 0;
1676
+ border-style: var(--tw-border-style);
1677
+ border-width: 0px;
1678
+ background-color: var(--color-border);
1679
+ }
1680
+ .separator-vertical {
1681
+ height: auto;
1682
+ width: 1px;
1683
+ align-self: stretch;
1684
+ min-height: 1lh;
1685
+ }
1686
+ }
1390
1687
  @layer components {
1391
1688
  .btn {
1392
1689
  display: inline-flex;
@@ -1822,32 +2119,70 @@
1822
2119
  }
1823
2120
  }
1824
2121
  @layer components {
1825
- .textarea {
1826
- display: block;
1827
- min-height: calc(var(--spacing) * 20);
2122
+ .input-icon {
2123
+ position: relative;
2124
+ display: inline-flex;
1828
2125
  width: 100%;
1829
- resize: vertical;
1830
- border-radius: var(--radius-lg);
1831
- border-style: var(--tw-border-style);
1832
- border-width: 1px;
1833
- border-color: var(--color-border);
1834
- background-color: var(--color-surface);
1835
- padding-inline: calc(var(--spacing) * 3);
1836
- padding-block: calc(var(--spacing) * 2);
2126
+ align-items: center;
1837
2127
  font-size: var(--text-sm);
1838
2128
  line-height: var(--tw-leading, var(--text-sm--line-height));
1839
- color: var(--color-text);
1840
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1841
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1842
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1843
- --tw-duration: 150ms;
1844
- transition-duration: 150ms;
1845
- &::placeholder {
1846
- color: var(--color-text-muted);
1847
- }
2129
+ color: var(--color-text-muted);
2130
+ --input-icon-inset: calc(var(--spacing) * 3);
2131
+ --input-icon-pad: calc(var(--spacing) * 9);
2132
+ }
2133
+ .input-icon:has(> .input-sm) {
2134
+ font-size: var(--text-xs);
2135
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2136
+ --input-icon-inset: calc(var(--spacing) * 2.5);
2137
+ --input-icon-pad: calc(var(--spacing) * 8);
2138
+ }
2139
+ .input-icon:has(> .input-lg) {
2140
+ font-size: var(--text-base);
2141
+ line-height: var(--tw-leading, var(--text-base--line-height));
2142
+ --input-icon-inset: calc(var(--spacing) * 4);
2143
+ --input-icon-pad: calc(var(--spacing) * 10);
2144
+ }
2145
+ .input-icon > :where(i, svg) {
2146
+ pointer-events: none;
2147
+ position: absolute;
2148
+ top: calc(1 / 2 * 100%);
2149
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
2150
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2151
+ }
2152
+ .input-icon > :where(i, svg):first-child {
2153
+ left: var(--input-icon-inset);
2154
+ }
2155
+ .input-icon > .input ~ :where(i, svg, .input-action) {
2156
+ right: var(--input-icon-inset);
2157
+ }
2158
+ .input-icon:has(> :where(i, svg):first-child) > .input {
2159
+ padding-left: var(--input-icon-pad);
2160
+ }
2161
+ .input-icon:has(> .input ~ :where(i, svg, .input-action)) > .input {
2162
+ padding-right: var(--input-icon-pad);
2163
+ }
2164
+ .input-icon:has(> .input:disabled) > :where(i, svg) {
2165
+ opacity: 50%;
2166
+ }
2167
+ .input-action {
2168
+ position: absolute;
2169
+ top: calc(1 / 2 * 100%);
2170
+ display: inline-flex;
2171
+ width: calc(var(--spacing) * 5);
2172
+ height: calc(var(--spacing) * 5);
2173
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
2174
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2175
+ cursor: pointer;
2176
+ align-items: center;
2177
+ justify-content: center;
2178
+ border-radius: 0.25rem;
2179
+ border-style: var(--tw-border-style);
2180
+ border-width: 0px;
2181
+ background-color: transparent;
2182
+ color: var(--color-text-muted);
1848
2183
  &:hover {
1849
2184
  @media (hover: hover) {
1850
- border-color: var(--color-border-strong);
2185
+ color: var(--color-text);
1851
2186
  }
1852
2187
  }
1853
2188
  &:focus-visible {
@@ -1855,7 +2190,190 @@
1855
2190
  outline-width: 2px;
1856
2191
  }
1857
2192
  &:focus-visible {
1858
- outline-offset: 2px;
2193
+ outline-offset: 1px;
2194
+ }
2195
+ &:focus-visible {
2196
+ outline-color: var(--color-focus);
2197
+ }
2198
+ }
2199
+ .input-action:hover {
2200
+ background-color: currentColor;
2201
+ @supports (color: color-mix(in lab, red, red)) {
2202
+ background-color: color-mix(in oklab, currentColor 12%, transparent);
2203
+ }
2204
+ }
2205
+ .input-icon:has(> .input:disabled) > .input-action {
2206
+ pointer-events: none;
2207
+ opacity: 50%;
2208
+ }
2209
+ }
2210
+ @layer components {
2211
+ .number-input-root {
2212
+ display: contents;
2213
+ }
2214
+ .number-input {
2215
+ display: inline-flex;
2216
+ width: 100%;
2217
+ align-items: stretch;
2218
+ border-radius: var(--radius-lg);
2219
+ border-style: var(--tw-border-style);
2220
+ border-width: 1px;
2221
+ border-color: var(--color-border);
2222
+ background-color: var(--color-surface);
2223
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2224
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2225
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2226
+ --tw-duration: 150ms;
2227
+ transition-duration: 150ms;
2228
+ &:focus-within {
2229
+ outline-style: var(--tw-outline-style);
2230
+ outline-width: 2px;
2231
+ }
2232
+ &:focus-within {
2233
+ outline-offset: 2px;
2234
+ }
2235
+ &:focus-within {
2236
+ outline-color: var(--color-focus);
2237
+ }
2238
+ }
2239
+ .number-input:hover {
2240
+ border-color: var(--color-border-strong);
2241
+ }
2242
+ .number-input-field {
2243
+ width: 100%;
2244
+ min-width: calc(var(--spacing) * 0);
2245
+ flex: 1;
2246
+ border-style: var(--tw-border-style);
2247
+ border-width: 0px;
2248
+ background-color: transparent;
2249
+ padding-inline: calc(var(--spacing) * 3);
2250
+ padding-block: calc(var(--spacing) * 2);
2251
+ text-align: right;
2252
+ font-size: var(--text-sm);
2253
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2254
+ --tw-leading: 1;
2255
+ line-height: 1;
2256
+ color: var(--color-text);
2257
+ --tw-numeric-spacing: tabular-nums;
2258
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
2259
+ --tw-outline-style: none;
2260
+ outline-style: none;
2261
+ &::placeholder {
2262
+ color: var(--color-text-muted);
2263
+ }
2264
+ &:disabled {
2265
+ cursor: not-allowed;
2266
+ }
2267
+ &:disabled {
2268
+ opacity: 50%;
2269
+ }
2270
+ -moz-appearance: textfield;
2271
+ }
2272
+ .number-input-field::-webkit-inner-spin-button, .number-input-field::-webkit-outer-spin-button {
2273
+ -webkit-appearance: none;
2274
+ margin: 0;
2275
+ }
2276
+ .number-input-step {
2277
+ display: inline-flex;
2278
+ width: calc(var(--spacing) * 8);
2279
+ flex-shrink: 0;
2280
+ cursor: pointer;
2281
+ align-items: center;
2282
+ justify-content: center;
2283
+ border-style: var(--tw-border-style);
2284
+ border-width: 0px;
2285
+ background-color: transparent;
2286
+ color: var(--color-text-muted);
2287
+ -webkit-user-select: none;
2288
+ user-select: none;
2289
+ &:hover {
2290
+ @media (hover: hover) {
2291
+ background-color: var(--color-surface-muted);
2292
+ }
2293
+ }
2294
+ &:hover {
2295
+ @media (hover: hover) {
2296
+ color: var(--color-text);
2297
+ }
2298
+ }
2299
+ &:disabled {
2300
+ cursor: not-allowed;
2301
+ }
2302
+ &:disabled {
2303
+ opacity: 50%;
2304
+ }
2305
+ }
2306
+ .number-input-step:first-child {
2307
+ border-top-left-radius: var(--radius-lg);
2308
+ border-bottom-left-radius: var(--radius-lg);
2309
+ border-right-style: var(--tw-border-style);
2310
+ border-right-width: 1px;
2311
+ border-color: var(--color-border);
2312
+ }
2313
+ .number-input-step:last-child {
2314
+ border-top-right-radius: var(--radius-lg);
2315
+ border-bottom-right-radius: var(--radius-lg);
2316
+ border-left-style: var(--tw-border-style);
2317
+ border-left-width: 1px;
2318
+ border-color: var(--color-border);
2319
+ }
2320
+ .number-input-step > :is(i, svg) {
2321
+ font-size: 0.875rem;
2322
+ }
2323
+ .number-input-sm .number-input-field {
2324
+ padding-inline: calc(var(--spacing) * 2.5);
2325
+ padding-block: calc(var(--spacing) * 1.5);
2326
+ font-size: var(--text-xs);
2327
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2328
+ }
2329
+ .number-input-sm .number-input-step {
2330
+ width: calc(var(--spacing) * 7);
2331
+ }
2332
+ .number-input-lg .number-input-field {
2333
+ padding-inline: calc(var(--spacing) * 4);
2334
+ padding-block: calc(var(--spacing) * 2.5);
2335
+ font-size: var(--text-base);
2336
+ line-height: var(--tw-leading, var(--text-base--line-height));
2337
+ }
2338
+ .number-input-lg .number-input-step {
2339
+ width: calc(var(--spacing) * 9);
2340
+ }
2341
+ }
2342
+ @layer components {
2343
+ .textarea {
2344
+ display: block;
2345
+ min-height: calc(var(--spacing) * 20);
2346
+ width: 100%;
2347
+ resize: vertical;
2348
+ border-radius: var(--radius-lg);
2349
+ border-style: var(--tw-border-style);
2350
+ border-width: 1px;
2351
+ border-color: var(--color-border);
2352
+ background-color: var(--color-surface);
2353
+ padding-inline: calc(var(--spacing) * 3);
2354
+ padding-block: calc(var(--spacing) * 2);
2355
+ font-size: var(--text-sm);
2356
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2357
+ color: var(--color-text);
2358
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2359
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2360
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2361
+ --tw-duration: 150ms;
2362
+ transition-duration: 150ms;
2363
+ &::placeholder {
2364
+ color: var(--color-text-muted);
2365
+ }
2366
+ &:hover {
2367
+ @media (hover: hover) {
2368
+ border-color: var(--color-border-strong);
2369
+ }
2370
+ }
2371
+ &:focus-visible {
2372
+ outline-style: var(--tw-outline-style);
2373
+ outline-width: 2px;
2374
+ }
2375
+ &:focus-visible {
2376
+ outline-offset: 2px;
1859
2377
  }
1860
2378
  &:focus-visible {
1861
2379
  outline-color: var(--color-focus);
@@ -2513,112 +3031,431 @@
2513
3031
  .card-toolbar :is(i, svg) {
2514
3032
  font-size: 1.25rem;
2515
3033
  }
2516
- .card-description {
2517
- font-size: var(--text-sm);
2518
- line-height: var(--tw-leading, var(--text-sm--line-height));
3034
+ .card-description {
3035
+ font-size: var(--text-sm);
3036
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3037
+ color: var(--color-text-muted);
3038
+ }
3039
+ .card-actions {
3040
+ margin-top: auto;
3041
+ display: flex;
3042
+ flex-wrap: wrap;
3043
+ align-items: center;
3044
+ gap: calc(var(--spacing) * 2);
3045
+ padding-top: calc(var(--spacing) * 2);
3046
+ }
3047
+ .card-compact .card-body {
3048
+ gap: calc(var(--spacing) * 2);
3049
+ padding: calc(var(--spacing) * 3);
3050
+ }
3051
+ .card-bordered {
3052
+ border-color: var(--color-border-strong);
3053
+ --tw-shadow: 0 0 #0000;
3054
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3055
+ }
3056
+ .card-muted {
3057
+ background-color: var(--color-surface);
3058
+ }
3059
+ .card-primary {
3060
+ border-color: var(--color-primary-muted);
3061
+ background-color: var(--color-primary-muted);
3062
+ }
3063
+ .card-info {
3064
+ border-color: var(--color-info-muted);
3065
+ background-color: var(--color-info-muted);
3066
+ }
3067
+ .card-success {
3068
+ border-color: var(--color-success-muted);
3069
+ background-color: var(--color-success-muted);
3070
+ }
3071
+ .card-warning {
3072
+ border-color: var(--color-warning-muted);
3073
+ background-color: var(--color-warning-muted);
3074
+ }
3075
+ .card-danger {
3076
+ border-color: var(--color-danger-muted);
3077
+ background-color: var(--color-danger-muted);
3078
+ }
3079
+ .card-primary .card-title {
3080
+ color: var(--color-primary);
3081
+ }
3082
+ .card-info .card-title {
3083
+ color: var(--color-info);
3084
+ }
3085
+ .card-success .card-title {
3086
+ color: var(--color-success);
3087
+ }
3088
+ .card-danger .card-title {
3089
+ color: var(--color-danger);
3090
+ }
3091
+ .card-media {
3092
+ display: block;
3093
+ width: 100%;
3094
+ flex-shrink: 0;
3095
+ overflow: hidden;
3096
+ }
3097
+ .card-media:first-child {
3098
+ border-top-left-radius: inherit;
3099
+ border-top-right-radius: inherit;
3100
+ }
3101
+ .card-media:last-child {
3102
+ border-bottom-left-radius: inherit;
3103
+ border-bottom-right-radius: inherit;
3104
+ }
3105
+ .card-media > :is(img, video) {
3106
+ display: block;
3107
+ height: 100%;
3108
+ width: 100%;
3109
+ object-fit: cover;
3110
+ }
3111
+ .card-scroll > .card-header {
3112
+ flex-shrink: 0;
3113
+ border-bottom-style: var(--tw-border-style);
3114
+ border-bottom-width: 1px;
3115
+ border-color: var(--color-border);
3116
+ padding-inline: calc(var(--spacing) * 5);
3117
+ padding-block: calc(var(--spacing) * 3);
3118
+ }
3119
+ .card-scroll > .card-body {
3120
+ min-height: calc(var(--spacing) * 0);
3121
+ flex: 1;
3122
+ overflow-y: auto;
3123
+ }
3124
+ .card-scroll > .card-body:last-child {
3125
+ border-bottom-left-radius: inherit;
3126
+ border-bottom-right-radius: inherit;
3127
+ }
3128
+ .card-scroll > .card-actions {
3129
+ flex-shrink: 0;
3130
+ border-top-style: var(--tw-border-style);
3131
+ border-top-width: 1px;
3132
+ border-color: var(--color-border);
3133
+ padding-inline: calc(var(--spacing) * 5);
3134
+ padding-block: calc(var(--spacing) * 3);
3135
+ }
3136
+ .card-compact.card-scroll > :is(.card-header, .card-actions) {
3137
+ padding-inline: calc(var(--spacing) * 3);
3138
+ padding-block: calc(var(--spacing) * 2);
3139
+ }
3140
+ }
3141
+ @layer components {
3142
+ .stat-card {
3143
+ gap: calc(var(--spacing) * 1);
3144
+ padding: calc(var(--spacing) * 4);
3145
+ }
3146
+ .stat-card-label {
3147
+ display: flex;
3148
+ align-items: center;
3149
+ gap: calc(var(--spacing) * 2);
3150
+ font-size: var(--text-sm);
3151
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3152
+ --tw-font-weight: var(--font-weight-medium);
3153
+ font-weight: var(--font-weight-medium);
3154
+ color: var(--color-text-muted);
3155
+ }
3156
+ .stat-card-label > :is(i, svg) {
3157
+ flex-shrink: 0;
3158
+ }
3159
+ .stat-card-value {
3160
+ font-size: var(--text-2xl);
3161
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
3162
+ --tw-leading: var(--leading-tight);
3163
+ line-height: var(--leading-tight);
3164
+ --tw-font-weight: var(--font-weight-bold);
3165
+ font-weight: var(--font-weight-bold);
3166
+ --tw-numeric-spacing: tabular-nums;
3167
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3168
+ }
3169
+ .stat-card-detail {
3170
+ font-size: var(--text-sm);
3171
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3172
+ color: var(--color-text-muted);
3173
+ }
3174
+ .stat-card-trend {
3175
+ display: inline-flex;
3176
+ align-items: center;
3177
+ gap: calc(var(--spacing) * 1);
3178
+ font-size: var(--text-sm);
3179
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3180
+ --tw-font-weight: var(--font-weight-medium);
3181
+ font-weight: var(--font-weight-medium);
3182
+ color: var(--color-text-muted);
3183
+ --tw-numeric-spacing: tabular-nums;
3184
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3185
+ }
3186
+ .stat-card-trend::before {
3187
+ content: "";
3188
+ width: 0;
3189
+ height: 0;
3190
+ border-inline: 0.3em solid transparent;
3191
+ border-block-end: 0.42em solid currentColor;
3192
+ }
3193
+ .stat-card-trend[data-trend="down"]::before {
3194
+ border-block-end: 0;
3195
+ border-block-start: 0.42em solid currentColor;
3196
+ }
3197
+ .stat-card-trend[data-trend="flat"]::before {
3198
+ width: 0.55em;
3199
+ border-inline: 0;
3200
+ border-block-end: 0;
3201
+ border-block-start: 0.16em solid currentColor;
3202
+ }
3203
+ .stat-card-trend[data-intent="positive"] {
3204
+ color: var(--color-success);
3205
+ }
3206
+ .stat-card-trend[data-intent="negative"] {
3207
+ color: var(--color-danger);
3208
+ }
3209
+ .stat-card-trend[data-intent="neutral"] {
3210
+ color: var(--color-text-muted);
3211
+ }
3212
+ .card-compact.stat-card {
3213
+ gap: calc(var(--spacing) * 0.5);
3214
+ padding: calc(var(--spacing) * 3);
3215
+ }
3216
+ .card-primary .stat-card-value {
3217
+ color: var(--color-primary);
3218
+ }
3219
+ .card-info .stat-card-value {
3220
+ color: var(--color-info);
3221
+ }
3222
+ .card-success .stat-card-value {
3223
+ color: var(--color-success);
3224
+ }
3225
+ .card-danger .stat-card-value {
3226
+ color: var(--color-danger);
3227
+ }
3228
+ }
3229
+ @layer components {
3230
+ .item {
3231
+ display: flex;
3232
+ width: 100%;
3233
+ align-items: center;
3234
+ gap: calc(var(--spacing) * 3);
3235
+ padding-inline: calc(var(--spacing) * 3);
3236
+ padding-block: calc(var(--spacing) * 2);
3237
+ font-size: var(--text-sm);
3238
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3239
+ color: var(--color-text);
3240
+ }
3241
+ .item-media {
3242
+ display: flex;
3243
+ flex-shrink: 0;
3244
+ align-items: center;
3245
+ color: var(--color-text-muted);
3246
+ }
3247
+ .item-media > :is(i, svg) {
3248
+ font-size: 1.25rem;
3249
+ }
3250
+ .item-content {
3251
+ display: flex;
3252
+ min-width: calc(var(--spacing) * 0);
3253
+ flex: 1;
3254
+ flex-direction: column;
3255
+ gap: calc(var(--spacing) * 0.5);
3256
+ }
3257
+ .item-title {
3258
+ --tw-leading: var(--leading-tight);
3259
+ line-height: var(--leading-tight);
3260
+ --tw-font-weight: var(--font-weight-medium);
3261
+ font-weight: var(--font-weight-medium);
3262
+ overflow-wrap: break-word;
3263
+ }
3264
+ .item-description {
3265
+ --tw-leading: var(--leading-snug);
3266
+ line-height: var(--leading-snug);
2519
3267
  color: var(--color-text-muted);
3268
+ text-wrap: pretty;
2520
3269
  }
2521
- .card-actions {
2522
- margin-top: auto;
3270
+ .item-actions {
3271
+ position: relative;
3272
+ z-index: 1;
2523
3273
  display: flex;
2524
- flex-wrap: wrap;
3274
+ flex-shrink: 0;
2525
3275
  align-items: center;
2526
3276
  gap: calc(var(--spacing) * 2);
2527
- padding-top: calc(var(--spacing) * 2);
2528
- }
2529
- .card-compact .card-body {
2530
- gap: calc(var(--spacing) * 2);
2531
- padding: calc(var(--spacing) * 3);
3277
+ margin-inline-start: auto;
2532
3278
  }
2533
- .card-bordered {
2534
- border-color: var(--color-border-strong);
2535
- --tw-shadow: 0 0 #0000;
2536
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3279
+ .item-outline {
3280
+ border-radius: var(--radius-lg);
3281
+ border-style: var(--tw-border-style);
3282
+ border-width: 1px;
3283
+ border-color: var(--color-border);
2537
3284
  }
2538
- .card-muted {
2539
- background-color: var(--color-surface);
3285
+ .item-muted {
3286
+ border-radius: var(--radius-lg);
3287
+ background-color: var(--color-surface-muted);
2540
3288
  }
2541
- .card-primary {
2542
- border-color: var(--color-primary-muted);
2543
- background-color: var(--color-primary-muted);
3289
+ .item-sm {
3290
+ gap: calc(var(--spacing) * 2);
3291
+ padding-inline: calc(var(--spacing) * 2);
3292
+ padding-block: calc(var(--spacing) * 1.5);
3293
+ font-size: var(--text-xs);
3294
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2544
3295
  }
2545
- .card-info {
2546
- border-color: var(--color-info-muted);
2547
- background-color: var(--color-info-muted);
3296
+ .item-lg {
3297
+ gap: calc(var(--spacing) * 4);
3298
+ padding-inline: calc(var(--spacing) * 4);
3299
+ padding-block: calc(var(--spacing) * 3);
3300
+ font-size: var(--text-base);
3301
+ line-height: var(--tw-leading, var(--text-base--line-height));
2548
3302
  }
2549
- .card-success {
2550
- border-color: var(--color-success-muted);
2551
- background-color: var(--color-success-muted);
3303
+ .item-group {
3304
+ display: flex;
3305
+ flex-direction: column;
2552
3306
  }
2553
- .card-warning {
2554
- border-color: var(--color-warning-muted);
2555
- background-color: var(--color-warning-muted);
3307
+ .item-group > .item:not(:last-child) {
3308
+ border-bottom-style: var(--tw-border-style);
3309
+ border-bottom-width: 1px;
3310
+ border-color: var(--color-border);
2556
3311
  }
2557
- .card-danger {
2558
- border-color: var(--color-danger-muted);
2559
- background-color: var(--color-danger-muted);
3312
+ .item-group-bordered {
3313
+ overflow: hidden;
3314
+ border-radius: var(--radius-lg);
3315
+ border-style: var(--tw-border-style);
3316
+ border-width: 1px;
3317
+ border-color: var(--color-border);
2560
3318
  }
2561
- .card-primary .card-title {
2562
- color: var(--color-primary);
3319
+ .item-link {
3320
+ position: relative;
3321
+ cursor: pointer;
2563
3322
  }
2564
- .card-info .card-title {
2565
- color: var(--color-info);
3323
+ .item-link:hover {
3324
+ background-color: var(--color-surface-muted);
2566
3325
  }
2567
- .card-success .card-title {
2568
- color: var(--color-success);
3326
+ .item-link a:first-of-type::after {
3327
+ content: "";
3328
+ position: absolute;
3329
+ inset: calc(var(--spacing) * 0);
2569
3330
  }
2570
- .card-danger .card-title {
2571
- color: var(--color-danger);
3331
+ .item-link:focus-within {
3332
+ outline-style: var(--tw-outline-style);
3333
+ outline-width: 2px;
3334
+ outline-offset: calc(2px * -1);
3335
+ outline-color: var(--color-focus);
2572
3336
  }
2573
3337
  }
2574
3338
  @layer components {
2575
- .stat-card {
2576
- gap: calc(var(--spacing) * 1);
2577
- padding: calc(var(--spacing) * 4);
3339
+ .timeline {
3340
+ list-style: none;
3341
+ margin: 0;
3342
+ padding: 0;
2578
3343
  }
2579
- .stat-card-label {
3344
+ .timeline-item {
3345
+ display: grid;
3346
+ grid-template-columns: 1.5rem 1fr;
3347
+ column-gap: 0.75rem;
3348
+ padding-bottom: 1rem;
3349
+ position: relative;
3350
+ }
3351
+ .timeline-item:last-child {
3352
+ padding-bottom: 0;
3353
+ }
3354
+ .timeline-item:not(:last-child)::before {
3355
+ content: "";
3356
+ position: absolute;
3357
+ inset-block: 0.75rem 0;
3358
+ inset-inline-start: 0.75rem;
3359
+ width: 2px;
3360
+ transform: translateX(-50%);
3361
+ background-color: var(--color-border);
3362
+ }
3363
+ .timeline-indicator {
3364
+ grid-column: 1;
3365
+ align-self: start;
2580
3366
  display: flex;
2581
3367
  align-items: center;
2582
- gap: calc(var(--spacing) * 2);
2583
- font-size: var(--text-sm);
2584
- line-height: var(--tw-leading, var(--text-sm--line-height));
2585
- --tw-font-weight: var(--font-weight-medium);
2586
- font-weight: var(--font-weight-medium);
3368
+ justify-content: center;
3369
+ height: 1.5rem;
3370
+ position: relative;
3371
+ z-index: 1;
3372
+ }
3373
+ .timeline-dot {
3374
+ display: inline-block;
3375
+ width: 0.625rem;
3376
+ height: 0.625rem;
3377
+ border-radius: 9999px;
3378
+ background-color: var(--color-border-strong);
3379
+ box-shadow: 0 0 0 3px var(--color-surface);
3380
+ }
3381
+ .timeline-indicator > :is(i, svg) {
3382
+ font-size: 1rem;
2587
3383
  color: var(--color-text-muted);
3384
+ background-color: var(--color-surface);
3385
+ border-radius: 9999px;
2588
3386
  }
2589
- .stat-card-label > :is(i, svg) {
2590
- flex-shrink: 0;
3387
+ .timeline-content {
3388
+ grid-column: 2;
3389
+ display: flex;
3390
+ flex-direction: column;
3391
+ gap: 0.125rem;
3392
+ min-width: 0;
3393
+ padding-block: 0.125rem 0;
2591
3394
  }
2592
- .stat-card-value {
2593
- font-size: var(--text-2xl);
2594
- line-height: var(--tw-leading, var(--text-2xl--line-height));
3395
+ .timeline-title {
3396
+ font-size: var(--text-sm);
3397
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2595
3398
  --tw-leading: var(--leading-tight);
2596
3399
  line-height: var(--leading-tight);
2597
- --tw-font-weight: var(--font-weight-bold);
2598
- font-weight: var(--font-weight-bold);
3400
+ --tw-font-weight: var(--font-weight-medium);
3401
+ font-weight: var(--font-weight-medium);
3402
+ color: var(--color-text);
3403
+ }
3404
+ .timeline-time {
3405
+ font-size: var(--text-xs);
3406
+ line-height: var(--tw-leading, var(--text-xs--line-height));
3407
+ color: var(--color-text-muted);
2599
3408
  --tw-numeric-spacing: tabular-nums;
2600
3409
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
2601
3410
  }
2602
- .stat-card-detail {
3411
+ .timeline-description {
2603
3412
  font-size: var(--text-sm);
2604
3413
  line-height: var(--tw-leading, var(--text-sm--line-height));
2605
3414
  color: var(--color-text-muted);
3415
+ text-wrap: pretty;
2606
3416
  }
2607
- .card-compact.stat-card {
2608
- gap: calc(var(--spacing) * 0.5);
2609
- padding: calc(var(--spacing) * 3);
3417
+ .timeline-item-info .timeline-dot {
3418
+ background-color: var(--color-info);
2610
3419
  }
2611
- .card-primary .stat-card-value {
2612
- color: var(--color-primary);
3420
+ .timeline-item-success .timeline-dot {
3421
+ background-color: var(--color-success);
2613
3422
  }
2614
- .card-info .stat-card-value {
2615
- color: var(--color-info);
3423
+ .timeline-item-warning .timeline-dot {
3424
+ background-color: var(--color-warning);
2616
3425
  }
2617
- .card-success .stat-card-value {
2618
- color: var(--color-success);
3426
+ .timeline-item-danger .timeline-dot {
3427
+ background-color: var(--color-danger);
2619
3428
  }
2620
- .card-danger .stat-card-value {
2621
- color: var(--color-danger);
3429
+ .timeline-numbered .timeline-item {
3430
+ grid-template-columns: 1.75rem 1fr;
3431
+ }
3432
+ .timeline-numbered .timeline-item:not(:last-child)::before {
3433
+ inset-inline-start: 0.875rem;
3434
+ inset-block: 1.75rem 0;
3435
+ }
3436
+ .timeline-numbered .timeline-indicator {
3437
+ height: 1.75rem;
3438
+ }
3439
+ .timeline-marker {
3440
+ display: inline-flex;
3441
+ width: calc(var(--spacing) * 7);
3442
+ height: calc(var(--spacing) * 7);
3443
+ align-items: center;
3444
+ justify-content: center;
3445
+ border-radius: calc(infinity * 1px);
3446
+ background-color: var(--color-surface-strong);
3447
+ font-size: var(--text-xs);
3448
+ line-height: var(--tw-leading, var(--text-xs--line-height));
3449
+ --tw-font-weight: var(--font-weight-semibold);
3450
+ font-weight: var(--font-weight-semibold);
3451
+ color: var(--color-text-muted);
3452
+ --tw-numeric-spacing: tabular-nums;
3453
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3454
+ box-shadow: 0 0 0 3px var(--color-surface);
3455
+ }
3456
+ .timeline-item-success .timeline-marker, .timeline-item-current .timeline-marker {
3457
+ background-color: var(--color-primary);
3458
+ color: var(--color-primary-content);
2622
3459
  }
2623
3460
  }
2624
3461
  @layer components {
@@ -2763,6 +3600,71 @@
2763
3600
  }
2764
3601
  }
2765
3602
  }
3603
+ @layer components {
3604
+ .drawer {
3605
+ margin: 0;
3606
+ max-width: none;
3607
+ max-height: none;
3608
+ border-radius: 0;
3609
+ height: 100dvh;
3610
+ width: min(28rem, 100vw);
3611
+ margin-inline-start: auto;
3612
+ transform: translateX(100%);
3613
+ }
3614
+ .drawer[open] {
3615
+ transform: translateX(0);
3616
+ }
3617
+ @starting-style {
3618
+ .drawer[open] {
3619
+ transform: translateX(100%);
3620
+ }
3621
+ }
3622
+ .drawer-start {
3623
+ margin-inline-start: 0;
3624
+ margin-inline-end: auto;
3625
+ transform: translateX(-100%);
3626
+ }
3627
+ @starting-style {
3628
+ .drawer-start[open] {
3629
+ transform: translateX(-100%);
3630
+ }
3631
+ }
3632
+ .drawer-bottom {
3633
+ width: 100vw;
3634
+ height: auto;
3635
+ max-height: 85dvh;
3636
+ margin-block-start: auto;
3637
+ margin-inline: 0;
3638
+ transform: translateY(100%);
3639
+ }
3640
+ .drawer-bottom[open] {
3641
+ transform: translateY(0);
3642
+ }
3643
+ @starting-style {
3644
+ .drawer-bottom[open] {
3645
+ transform: translateY(100%);
3646
+ }
3647
+ }
3648
+ .drawer-sm {
3649
+ width: min(20rem, 100vw);
3650
+ }
3651
+ .drawer-lg {
3652
+ width: min(36rem, 100vw);
3653
+ }
3654
+ .drawer-bottom.drawer-sm {
3655
+ width: 100vw;
3656
+ max-height: 50dvh;
3657
+ }
3658
+ .drawer-bottom.drawer-lg {
3659
+ width: 100vw;
3660
+ max-height: 95dvh;
3661
+ }
3662
+ @media (prefers-reduced-motion: reduce) {
3663
+ .drawer {
3664
+ transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out;
3665
+ }
3666
+ }
3667
+ }
2766
3668
  @layer components {
2767
3669
  .field {
2768
3670
  display: flex;
@@ -3173,6 +4075,20 @@
3173
4075
  .menu-trigger > :is(i, svg), .menu-item > :is(i, svg) {
3174
4076
  flex-shrink: 0;
3175
4077
  }
4078
+ .menu-item-indicator {
4079
+ display: inline-flex;
4080
+ flex-shrink: 0;
4081
+ align-items: center;
4082
+ justify-content: center;
4083
+ inline-size: 1rem;
4084
+ block-size: 1rem;
4085
+ }
4086
+ .menu-item-indicator > :is(i, svg) {
4087
+ opacity: 0;
4088
+ }
4089
+ .menu-item[aria-checked="true"] .menu-item-indicator > :is(i, svg) {
4090
+ opacity: 1;
4091
+ }
3176
4092
  .menu-separator {
3177
4093
  margin-block: calc(var(--spacing) * 1);
3178
4094
  height: 1px;
@@ -3953,6 +4869,15 @@
3953
4869
  white-space: nowrap;
3954
4870
  color: var(--color-text-muted);
3955
4871
  }
4872
+ .table :where(tfoot :is(td, th)) {
4873
+ --tw-font-weight: var(--font-weight-semibold);
4874
+ font-weight: var(--font-weight-semibold);
4875
+ }
4876
+ .table :where(tfoot tr:first-child :is(td, th)) {
4877
+ border-top-style: var(--tw-border-style);
4878
+ border-top-width: 2px;
4879
+ border-top-color: var(--color-border-strong);
4880
+ }
3956
4881
  .table :where(td), .table-cell {
3957
4882
  overflow-wrap: break-word;
3958
4883
  }
@@ -4039,6 +4964,40 @@
4039
4964
  outline-offset: calc(2px * -1);
4040
4965
  outline-color: var(--color-focus);
4041
4966
  }
4967
+ .table-compact :where(th, td), .table-compact .table-cell, .table-compact .table-header-cell {
4968
+ padding-inline: calc(var(--spacing) * 2);
4969
+ padding-block: calc(var(--spacing) * 1);
4970
+ font-size: var(--text-xs);
4971
+ line-height: var(--tw-leading, var(--text-xs--line-height));
4972
+ }
4973
+ .table :where(td).table-empty, .table-empty {
4974
+ padding-block: calc(var(--spacing) * 8);
4975
+ text-align: center;
4976
+ color: var(--color-text-muted);
4977
+ }
4978
+ .table tbody tr:has(> .table-empty):hover :where(td) {
4979
+ background-color: transparent;
4980
+ }
4981
+ .table-pin-col :where(thead th, tbody td, tfoot :is(td, th)):first-child {
4982
+ position: sticky;
4983
+ inset-inline-start: 0;
4984
+ }
4985
+ .table-pin-col tbody td:first-child {
4986
+ z-index: 1;
4987
+ background-color: var(--color-surface);
4988
+ }
4989
+ .table-pin-col :where(thead th):first-child {
4990
+ z-index: 11;
4991
+ }
4992
+ .table-pin-col.table-striped tbody tr:nth-child(even) td:first-child {
4993
+ background-color: var(--color-surface-muted);
4994
+ }
4995
+ .table-pin-col tbody tr:hover td:first-child {
4996
+ background-color: var(--color-surface-muted);
4997
+ }
4998
+ .table-pin-col tbody tr:has(input[type="checkbox"]:checked) td:first-child, .table-pin-col tbody tr:has(.checkbox[data-checked]) td:first-child, .table-pin-col tbody tr[data-selected] td:first-child {
4999
+ background-color: var(--color-primary-muted);
5000
+ }
4042
5001
  }
4043
5002
  @layer components {
4044
5003
  .tooltip {
@@ -4628,6 +5587,11 @@
4628
5587
  inherits: false;
4629
5588
  initial-value: 0 0 #0000;
4630
5589
  }
5590
+ @property --tw-outline-style {
5591
+ syntax: "*";
5592
+ inherits: false;
5593
+ initial-value: solid;
5594
+ }
4631
5595
  @property --tw-leading {
4632
5596
  syntax: "*";
4633
5597
  inherits: false;
@@ -4641,12 +5605,11 @@
4641
5605
  inherits: false;
4642
5606
  initial-value: solid;
4643
5607
  }
4644
- @property --tw-outline-style {
5608
+ @property --tw-duration {
4645
5609
  syntax: "*";
4646
5610
  inherits: false;
4647
- initial-value: solid;
4648
5611
  }
4649
- @property --tw-duration {
5612
+ @property --tw-tracking {
4650
5613
  syntax: "*";
4651
5614
  inherits: false;
4652
5615
  }
@@ -4665,10 +5628,6 @@
4665
5628
  inherits: false;
4666
5629
  initial-value: 0;
4667
5630
  }
4668
- @property --tw-tracking {
4669
- syntax: "*";
4670
- inherits: false;
4671
- }
4672
5631
  @layer properties {
4673
5632
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
4674
5633
  *, ::before, ::after, ::backdrop {
@@ -4696,15 +5655,15 @@
4696
5655
  --tw-ring-offset-width: 0px;
4697
5656
  --tw-ring-offset-color: #fff;
4698
5657
  --tw-ring-offset-shadow: 0 0 #0000;
5658
+ --tw-outline-style: solid;
4699
5659
  --tw-leading: initial;
4700
5660
  --tw-font-weight: initial;
4701
5661
  --tw-border-style: solid;
4702
- --tw-outline-style: solid;
4703
5662
  --tw-duration: initial;
5663
+ --tw-tracking: initial;
4704
5664
  --tw-translate-x: 0;
4705
5665
  --tw-translate-y: 0;
4706
5666
  --tw-translate-z: 0;
4707
- --tw-tracking: initial;
4708
5667
  }
4709
5668
  }
4710
5669
  }