@aortl/admin-css 0.16.2 → 0.17.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.
Files changed (16) hide show
  1. package/CHANGELOG.md +19 -1
  2. package/dist/admin.css +351 -7
  3. package/dist/admin.min.css +1 -1
  4. package/dist/admin.scoped.css +345 -7
  5. package/dist/admin.scoped.min.css +67 -5
  6. package/package.json +1 -1
  7. package/src/components/alert.css +34 -4
  8. package/src/components/avatar.css +36 -0
  9. package/src/components/badge.css +36 -0
  10. package/src/components/brand-tile.css +36 -0
  11. package/src/components/card.css +38 -0
  12. package/src/components/index.css +3 -0
  13. package/src/components/indicator.css +12 -0
  14. package/src/components/input-icon.css +46 -0
  15. package/src/components/separator.css +13 -0
  16. package/src/components/table.css +10 -0
package/dist/admin.scoped.css CHANGED
@@ -190,6 +190,10 @@
190
190
  syntax: "*";
191
191
  inherits: false;
192
192
  }
193
+ @property --tw-tracking {
194
+ syntax: "*";
195
+ inherits: false;
196
+ }
193
197
  @property --tw-translate-x {
194
198
  syntax: "*";
195
199
  inherits: false;
@@ -205,10 +209,6 @@
205
209
  inherits: false;
206
210
  initial-value: 0;
207
211
  }
208
- @property --tw-tracking {
209
- syntax: "*";
210
- inherits: false;
211
- }
212
212
  @scope (._ao-admin-root) {
213
213
  :scope :where(
214
214
  h1, h2, h3, h4, h5, h6,
@@ -268,10 +268,10 @@
268
268
  --tw-border-style: solid;
269
269
  --tw-outline-style: solid;
270
270
  --tw-duration: initial;
271
+ --tw-tracking: initial;
271
272
  --tw-translate-x: 0;
272
273
  --tw-translate-y: 0;
273
274
  --tw-translate-z: 0;
274
- --tw-tracking: initial;
275
275
  }
276
276
  }
277
277
  :scope, :scope:host, :scope :host {
@@ -296,6 +296,7 @@
296
296
  --font-weight-medium: 500;
297
297
  --font-weight-semibold: 600;
298
298
  --font-weight-bold: 700;
299
+ --tracking-tight: -0.025em;
299
300
  --tracking-wide: 0.025em;
300
301
  --leading-tight: 1.25;
301
302
  --leading-snug: 1.375;
@@ -791,11 +792,21 @@
791
792
  row-gap: 0.25rem;
792
793
  align-items: center;
793
794
  }
795
+ :scope._ao-alert:has(> ._ao-alert-action), :scope ._ao-alert:has(> ._ao-alert-action) {
796
+ display: grid;
797
+ grid-template-columns: minmax(0, 1fr) auto;
798
+ column-gap: 0.5rem;
799
+ row-gap: 0.25rem;
800
+ align-items: center;
801
+ }
802
+ :scope._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-action), :scope ._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-action) {
803
+ grid-template-columns: auto minmax(0, 1fr) auto;
804
+ }
794
805
  :scope._ao-alert > :is(i, svg):first-child, :scope ._ao-alert > :is(i, svg):first-child {
795
806
  font-size: 1rem;
796
807
  line-height: 1.25;
797
808
  }
798
- :scope._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-title), :scope ._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-title) {
809
+ :scope._ao-alert:has(> ._ao-alert-title):is(:has(> :is(i, svg):first-child), :has(> ._ao-alert-action)), :scope ._ao-alert:has(> ._ao-alert-title):is(:has(> :is(i, svg):first-child), :has(> ._ao-alert-action)) {
799
810
  grid-template-rows: auto auto;
800
811
  align-items: start;
801
812
  }
@@ -803,9 +814,20 @@
803
814
  grid-row: 1 / -1;
804
815
  }
805
816
  :scope._ao-alert > :is(._ao-alert-title, ._ao-alert-description), :scope ._ao-alert > :is(._ao-alert-title, ._ao-alert-description) {
806
- grid-column: 2;
807
817
  min-width: 0;
808
818
  }
819
+ :scope._ao-alert:has(> :is(i, svg):first-child) > :is(._ao-alert-title, ._ao-alert-description), :scope ._ao-alert:has(> :is(i, svg):first-child) > :is(._ao-alert-title, ._ao-alert-description) {
820
+ grid-column: 2;
821
+ }
822
+ :scope._ao-alert > ._ao-alert-action, :scope ._ao-alert > ._ao-alert-action {
823
+ --tw-font-weight: var(--font-weight-medium);
824
+ font-weight: var(--font-weight-medium);
825
+ white-space: nowrap;
826
+ grid-column: -2;
827
+ grid-row: 1 / -1;
828
+ justify-self: end;
829
+ align-self: center;
830
+ }
809
831
  :scope._ao-alert-info, :scope ._ao-alert-info {
810
832
  border-color: var(--color-info);
811
833
  background-color: var(--color-info);
@@ -833,6 +855,22 @@
833
855
  :scope._ao-alert-description, :scope ._ao-alert-description {
834
856
  opacity: 0.85;
835
857
  }
858
+ :scope._ao-alert ._ao-link, :scope ._ao-alert ._ao-link {
859
+ color: currentcolor;
860
+ &:hover {
861
+ @media (hover: hover) {
862
+ color: currentcolor;
863
+ }
864
+ }
865
+ &:hover {
866
+ @media (hover: hover) {
867
+ opacity: 85%;
868
+ }
869
+ }
870
+ &:focus-visible {
871
+ outline-color: currentcolor;
872
+ }
873
+ }
836
874
  :scope._ao-app-shell, :scope ._ao-app-shell {
837
875
  --app-shell-sidebar-w: 240px;
838
876
  --app-shell-sidebar-w-collapsed: 56px;
@@ -947,6 +985,74 @@
947
985
  background-color: var(--color-primary);
948
986
  color: var(--color-primary-content);
949
987
  }
988
+ :scope._ao-badge-soft._ao-badge-info, :scope ._ao-badge-soft._ao-badge-info {
989
+ border-color: var(--color-info-muted);
990
+ background-color: var(--color-info-muted);
991
+ color: var(--color-info);
992
+ }
993
+ :scope._ao-badge-soft._ao-badge-success, :scope ._ao-badge-soft._ao-badge-success {
994
+ border-color: var(--color-success-muted);
995
+ background-color: var(--color-success-muted);
996
+ color: var(--color-success);
997
+ }
998
+ :scope._ao-badge-soft._ao-badge-warning, :scope ._ao-badge-soft._ao-badge-warning {
999
+ border-color: var(--color-warning-muted);
1000
+ background-color: var(--color-warning-muted);
1001
+ color: var(--color-text);
1002
+ }
1003
+ :scope._ao-badge-soft._ao-badge-danger, :scope ._ao-badge-soft._ao-badge-danger {
1004
+ border-color: var(--color-danger-muted);
1005
+ background-color: var(--color-danger-muted);
1006
+ color: var(--color-danger);
1007
+ }
1008
+ :scope._ao-badge-soft._ao-badge-primary, :scope ._ao-badge-soft._ao-badge-primary {
1009
+ border-color: var(--color-primary-muted);
1010
+ background-color: var(--color-primary-muted);
1011
+ color: var(--color-text);
1012
+ }
1013
+ :scope._ao-badge-remove, :scope ._ao-badge-remove {
1014
+ margin-right: calc(var(--spacing) * -1);
1015
+ display: inline-flex;
1016
+ width: calc(var(--spacing) * 3.5);
1017
+ height: calc(var(--spacing) * 3.5);
1018
+ flex-shrink: 0;
1019
+ cursor: pointer;
1020
+ align-items: center;
1021
+ justify-content: center;
1022
+ border-radius: calc(infinity * 1px);
1023
+ color: inherit;
1024
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1025
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1026
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1027
+ --tw-duration: 150ms;
1028
+ transition-duration: 150ms;
1029
+ &:focus-visible {
1030
+ outline-style: var(--tw-outline-style);
1031
+ outline-width: 2px;
1032
+ }
1033
+ &:focus-visible {
1034
+ outline-offset: 1px;
1035
+ }
1036
+ &:focus-visible {
1037
+ outline-color: var(--color-focus);
1038
+ }
1039
+ }
1040
+ :scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover {
1041
+ background-color: currentColor;
1042
+ @supports (color: color-mix(in lab, red, red)) {
1043
+ background-color: color-mix(in oklab, currentColor 15%, transparent);
1044
+ }
1045
+ }
1046
+ :scope._ao-badge-sm ._ao-badge-remove, :scope ._ao-badge-sm ._ao-badge-remove {
1047
+ margin-right: calc(var(--spacing) * -0.5);
1048
+ width: calc(var(--spacing) * 3);
1049
+ height: calc(var(--spacing) * 3);
1050
+ }
1051
+ :scope._ao-badge-lg ._ao-badge-remove, :scope ._ao-badge-lg ._ao-badge-remove {
1052
+ margin-right: calc(var(--spacing) * -1.5);
1053
+ width: calc(var(--spacing) * 4.5);
1054
+ height: calc(var(--spacing) * 4.5);
1055
+ }
950
1056
  :scope._ao-badge-sm, :scope ._ao-badge-sm {
951
1057
  height: calc(var(--spacing) * 4);
952
1058
  gap: calc(var(--spacing) * 0.5);
@@ -978,6 +1084,104 @@
978
1084
  -webkit-user-select: none;
979
1085
  user-select: none;
980
1086
  }
1087
+ :scope._ao-brand-tile > :is(i, svg), :scope ._ao-brand-tile > :is(i, svg) {
1088
+ font-size: 14px;
1089
+ }
1090
+ :scope._ao-brand-tile-lg, :scope ._ao-brand-tile-lg {
1091
+ width: calc(var(--spacing) * 10);
1092
+ height: calc(var(--spacing) * 10);
1093
+ border-radius: var(--radius-md);
1094
+ font-size: var(--text-sm);
1095
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1096
+ }
1097
+ :scope._ao-brand-tile-lg > :is(i, svg), :scope ._ao-brand-tile-lg > :is(i, svg) {
1098
+ font-size: 20px;
1099
+ }
1100
+ :scope._ao-brand-tile-soft, :scope ._ao-brand-tile-soft {
1101
+ background-color: var(--color-system-accent-muted);
1102
+ color: var(--color-system-accent);
1103
+ }
1104
+ :scope._ao-brand-tile-info, :scope ._ao-brand-tile-info {
1105
+ background-color: var(--color-info-muted);
1106
+ color: var(--color-info);
1107
+ }
1108
+ :scope._ao-brand-tile-success, :scope ._ao-brand-tile-success {
1109
+ background-color: var(--color-success-muted);
1110
+ color: var(--color-success);
1111
+ }
1112
+ :scope._ao-brand-tile-danger, :scope ._ao-brand-tile-danger {
1113
+ background-color: var(--color-danger-muted);
1114
+ color: var(--color-danger);
1115
+ }
1116
+ :scope._ao-brand-tile:has(> img), :scope ._ao-brand-tile:has(> img) {
1117
+ border-style: var(--tw-border-style);
1118
+ border-width: 1px;
1119
+ border-color: var(--color-border);
1120
+ background-color: var(--color-surface);
1121
+ padding: calc(var(--spacing) * 0.5);
1122
+ }
1123
+ :scope._ao-brand-tile > img, :scope ._ao-brand-tile > img {
1124
+ width: 100%;
1125
+ height: 100%;
1126
+ border-radius: inherit;
1127
+ object-fit: contain;
1128
+ }
1129
+ :scope._ao-avatar, :scope ._ao-avatar {
1130
+ position: relative;
1131
+ display: inline-flex;
1132
+ width: calc(var(--spacing) * 8);
1133
+ height: calc(var(--spacing) * 8);
1134
+ flex-shrink: 0;
1135
+ align-items: center;
1136
+ justify-content: center;
1137
+ overflow: hidden;
1138
+ border-radius: calc(infinity * 1px);
1139
+ background-color: var(--color-surface-strong);
1140
+ font-size: var(--text-xs);
1141
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1142
+ --tw-leading: 1;
1143
+ line-height: 1;
1144
+ --tw-font-weight: var(--font-weight-medium);
1145
+ font-weight: var(--font-weight-medium);
1146
+ --tw-tracking: var(--tracking-tight);
1147
+ letter-spacing: var(--tracking-tight);
1148
+ color: var(--color-text-muted);
1149
+ -webkit-user-select: none;
1150
+ user-select: none;
1151
+ }
1152
+ :scope._ao-avatar > img, :scope ._ao-avatar > img {
1153
+ position: absolute;
1154
+ inset: calc(var(--spacing) * 0);
1155
+ width: 100%;
1156
+ height: 100%;
1157
+ object-fit: cover;
1158
+ }
1159
+ :scope._ao-avatar-square, :scope ._ao-avatar-square {
1160
+ border-radius: var(--radius-md);
1161
+ }
1162
+ :scope._ao-avatar-sm, :scope ._ao-avatar-sm {
1163
+ width: calc(var(--spacing) * 6);
1164
+ height: calc(var(--spacing) * 6);
1165
+ font-size: 0.625rem;
1166
+ }
1167
+ :scope._ao-avatar-lg, :scope ._ao-avatar-lg {
1168
+ width: calc(var(--spacing) * 10);
1169
+ height: calc(var(--spacing) * 10);
1170
+ font-size: var(--text-sm);
1171
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1172
+ }
1173
+ :scope._ao-avatar-group, :scope ._ao-avatar-group {
1174
+ display: inline-flex;
1175
+ align-items: center;
1176
+ }
1177
+ :scope._ao-avatar-group > ._ao-avatar, :scope ._ao-avatar-group > ._ao-avatar {
1178
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1179
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1180
+ --tw-ring-color: var(--color-surface);
1181
+ }
1182
+ :scope._ao-avatar-group > ._ao-avatar + ._ao-avatar, :scope ._ao-avatar-group > ._ao-avatar + ._ao-avatar {
1183
+ margin-inline-start: calc(var(--spacing) * -2);
1184
+ }
981
1185
  :scope._ao-kbd, :scope ._ao-kbd {
982
1186
  display: inline-flex;
983
1187
  height: 1.4em;
@@ -1037,6 +1241,18 @@
1037
1241
  :scope._ao-indicator:has(> ._ao-card), :scope ._ao-indicator:has(> ._ao-card) {
1038
1242
  --indicator-offset: 6px;
1039
1243
  }
1244
+ :scope._ao-indicator:has(> ._ao-avatar), :scope ._ao-indicator:has(> ._ao-avatar) {
1245
+ --indicator-offset: 5px;
1246
+ }
1247
+ :scope._ao-indicator:has(> ._ao-avatar-sm), :scope ._ao-indicator:has(> ._ao-avatar-sm) {
1248
+ --indicator-offset: 3px;
1249
+ }
1250
+ :scope._ao-indicator:has(> ._ao-avatar-lg), :scope ._ao-indicator:has(> ._ao-avatar-lg) {
1251
+ --indicator-offset: 6px;
1252
+ }
1253
+ :scope._ao-indicator:has(> ._ao-avatar-square), :scope ._ao-indicator:has(> ._ao-avatar-square) {
1254
+ --indicator-offset: 2px;
1255
+ }
1040
1256
  :scope._ao-indicator-item, :scope ._ao-indicator-item {
1041
1257
  position: absolute;
1042
1258
  z-index: 1;
@@ -1459,6 +1675,22 @@
1459
1675
  :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied] {
1460
1676
  color: var(--color-success);
1461
1677
  }
1678
+ :scope._ao-separator, :scope ._ao-separator {
1679
+ margin: calc(var(--spacing) * 0);
1680
+ display: block;
1681
+ height: 1px;
1682
+ width: 100%;
1683
+ flex-shrink: 0;
1684
+ border-style: var(--tw-border-style);
1685
+ border-width: 0px;
1686
+ background-color: var(--color-border);
1687
+ }
1688
+ :scope._ao-separator-vertical, :scope ._ao-separator-vertical {
1689
+ height: auto;
1690
+ width: 1px;
1691
+ align-self: stretch;
1692
+ min-height: 1lh;
1693
+ }
1462
1694
  :scope._ao-btn, :scope ._ao-btn {
1463
1695
  display: inline-flex;
1464
1696
  cursor: pointer;
@@ -1883,6 +2115,51 @@
1883
2115
  white-space: nowrap;
1884
2116
  color: var(--color-text-muted);
1885
2117
  }
2118
+ :scope._ao-input-icon, :scope ._ao-input-icon {
2119
+ position: relative;
2120
+ display: inline-flex;
2121
+ width: 100%;
2122
+ align-items: center;
2123
+ font-size: var(--text-sm);
2124
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2125
+ color: var(--color-text-muted);
2126
+ --input-icon-inset: calc(var(--spacing) * 3);
2127
+ --input-icon-pad: calc(var(--spacing) * 9);
2128
+ }
2129
+ :scope._ao-input-icon:has(> ._ao-input-sm), :scope ._ao-input-icon:has(> ._ao-input-sm) {
2130
+ font-size: var(--text-xs);
2131
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2132
+ --input-icon-inset: calc(var(--spacing) * 2.5);
2133
+ --input-icon-pad: calc(var(--spacing) * 8);
2134
+ }
2135
+ :scope._ao-input-icon:has(> ._ao-input-lg), :scope ._ao-input-icon:has(> ._ao-input-lg) {
2136
+ font-size: var(--text-base);
2137
+ line-height: var(--tw-leading, var(--text-base--line-height));
2138
+ --input-icon-inset: calc(var(--spacing) * 4);
2139
+ --input-icon-pad: calc(var(--spacing) * 10);
2140
+ }
2141
+ :scope._ao-input-icon > :where(i, svg), :scope ._ao-input-icon > :where(i, svg) {
2142
+ pointer-events: none;
2143
+ position: absolute;
2144
+ top: calc(1 / 2 * 100%);
2145
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
2146
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2147
+ }
2148
+ :scope._ao-input-icon > :where(i, svg):first-child, :scope ._ao-input-icon > :where(i, svg):first-child {
2149
+ left: var(--input-icon-inset);
2150
+ }
2151
+ :scope._ao-input-icon > ._ao-input ~ :where(i, svg), :scope ._ao-input-icon > ._ao-input ~ :where(i, svg) {
2152
+ right: var(--input-icon-inset);
2153
+ }
2154
+ :scope._ao-input-icon:has(> :where(i, svg):first-child) > ._ao-input, :scope ._ao-input-icon:has(> :where(i, svg):first-child) > ._ao-input {
2155
+ padding-left: var(--input-icon-pad);
2156
+ }
2157
+ :scope._ao-input-icon:has(> ._ao-input ~ :where(i, svg)) > ._ao-input, :scope ._ao-input-icon:has(> ._ao-input ~ :where(i, svg)) > ._ao-input {
2158
+ padding-right: var(--input-icon-pad);
2159
+ }
2160
+ :scope._ao-input-icon:has(> ._ao-input:disabled) > :where(i, svg), :scope ._ao-input-icon:has(> ._ao-input:disabled) > :where(i, svg) {
2161
+ opacity: 50%;
2162
+ }
1886
2163
  :scope._ao-textarea, :scope ._ao-textarea {
1887
2164
  display: block;
1888
2165
  min-height: calc(var(--spacing) * 20);
@@ -2621,6 +2898,55 @@
2621
2898
  :scope._ao-card-danger ._ao-card-title, :scope ._ao-card-danger ._ao-card-title {
2622
2899
  color: var(--color-danger);
2623
2900
  }
2901
+ :scope._ao-card-media, :scope ._ao-card-media {
2902
+ display: block;
2903
+ width: 100%;
2904
+ flex-shrink: 0;
2905
+ overflow: hidden;
2906
+ }
2907
+ :scope._ao-card-media:first-child, :scope ._ao-card-media:first-child {
2908
+ border-top-left-radius: inherit;
2909
+ border-top-right-radius: inherit;
2910
+ }
2911
+ :scope._ao-card-media:last-child, :scope ._ao-card-media:last-child {
2912
+ border-bottom-left-radius: inherit;
2913
+ border-bottom-right-radius: inherit;
2914
+ }
2915
+ :scope._ao-card-media > :is(img, video), :scope ._ao-card-media > :is(img, video) {
2916
+ display: block;
2917
+ height: 100%;
2918
+ width: 100%;
2919
+ object-fit: cover;
2920
+ }
2921
+ :scope._ao-card-scroll > ._ao-card-header, :scope ._ao-card-scroll > ._ao-card-header {
2922
+ flex-shrink: 0;
2923
+ border-bottom-style: var(--tw-border-style);
2924
+ border-bottom-width: 1px;
2925
+ border-color: var(--color-border);
2926
+ padding-inline: calc(var(--spacing) * 5);
2927
+ padding-block: calc(var(--spacing) * 3);
2928
+ }
2929
+ :scope._ao-card-scroll > ._ao-card-body, :scope ._ao-card-scroll > ._ao-card-body {
2930
+ min-height: calc(var(--spacing) * 0);
2931
+ flex: 1;
2932
+ overflow-y: auto;
2933
+ }
2934
+ :scope._ao-card-scroll > ._ao-card-body:last-child, :scope ._ao-card-scroll > ._ao-card-body:last-child {
2935
+ border-bottom-left-radius: inherit;
2936
+ border-bottom-right-radius: inherit;
2937
+ }
2938
+ :scope._ao-card-scroll > ._ao-card-actions, :scope ._ao-card-scroll > ._ao-card-actions {
2939
+ flex-shrink: 0;
2940
+ border-top-style: var(--tw-border-style);
2941
+ border-top-width: 1px;
2942
+ border-color: var(--color-border);
2943
+ padding-inline: calc(var(--spacing) * 5);
2944
+ padding-block: calc(var(--spacing) * 3);
2945
+ }
2946
+ :scope._ao-card-compact._ao-card-scroll > :is(._ao-card-header, ._ao-card-actions), :scope ._ao-card-compact._ao-card-scroll > :is(._ao-card-header, ._ao-card-actions) {
2947
+ padding-inline: calc(var(--spacing) * 3);
2948
+ padding-block: calc(var(--spacing) * 2);
2949
+ }
2624
2950
  :scope._ao-stat-card, :scope ._ao-stat-card {
2625
2951
  gap: calc(var(--spacing) * 1);
2626
2952
  padding: calc(var(--spacing) * 4);
@@ -3984,6 +4310,15 @@
3984
4310
  white-space: nowrap;
3985
4311
  color: var(--color-text-muted);
3986
4312
  }
4313
+ :scope._ao-table :where(tfoot :is(td, th)), :scope ._ao-table :where(tfoot :is(td, th)) {
4314
+ --tw-font-weight: var(--font-weight-semibold);
4315
+ font-weight: var(--font-weight-semibold);
4316
+ }
4317
+ :scope._ao-table :where(tfoot tr:first-child :is(td, th)), :scope ._ao-table :where(tfoot tr:first-child :is(td, th)) {
4318
+ border-top-style: var(--tw-border-style);
4319
+ border-top-width: 2px;
4320
+ border-top-color: var(--color-border-strong);
4321
+ }
3987
4322
  :scope._ao-table :where(td), :scope ._ao-table :where(td), :scope._ao-table-cell, :scope ._ao-table-cell {
3988
4323
  overflow-wrap: break-word;
3989
4324
  }
@@ -4592,6 +4927,9 @@
4592
4927
  max-width: 96rem;
4593
4928
  }
4594
4929
  }
4930
+ :scope._ao-my-4, :scope ._ao-my-4 {
4931
+ margin-block: calc(var(--spacing) * 4);
4932
+ }
4595
4933
  :scope._ao-block, :scope ._ao-block {
4596
4934
  display: block;
4597
4935
  }
package/dist/admin.scoped.min.css CHANGED
@@ -37,10 +37,10 @@
37
37
  @property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
38
38
  @property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
39
39
  @property --tw-duration{syntax:"*";inherits:false}
40
+ @property --tw-tracking{syntax:"*";inherits:false}
40
41
  @property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}
41
42
  @property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}
42
43
  @property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}
43
- @property --tw-tracking{syntax:"*";inherits:false}
44
44
  @scope (._ao-admin-root) {
45
45
  :scope :where(
46
46
  h1, h2, h3, h4, h5, h6,
@@ -63,8 +63,8 @@
63
63
  :scope{color-scheme:light dark}
64
64
  :scope[data-theme=dark], :scope [data-theme=dark]{color-scheme:dark}
65
65
  :scope[data-theme=light], :scope [data-theme=light]{color-scheme:light}
66
- @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:scope, :scope *, :scope:before, :scope :before, :scope:after, :scope :after, :scope::backdrop, :scope ::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-tracking:initial}}
67
- :scope, :scope:host, :scope :host{--font-sans:"IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-paper:#fff;--color-black:#0f0f0f;--color-base-50:#fafafa;--color-base-100:#f4f4f4;--color-base-150:#e7e7e7;--color-base-200:#d4d4d4;--color-base-300:#b3b3b3;--color-base-400:#9b9b9b;--color-base-500:#848484;--color-base-600:#6c6c6c;--color-base-700:#555;--color-base-800:#3e3e3e;--color-base-850:#333;--color-base-900:#272727;--color-base-950:#1b1b1b;--color-red-50:#ffe1d5;--color-red-100:#ffcabb;--color-red-150:#fdb2a2;--color-red-200:#f89a8a;--color-red-300:#e8705f;--color-red-400:#d14d41;--color-red-500:#c03e35;--color-red-600:#af3029;--color-red-700:#942822;--color-red-800:#6c201c;--color-red-850:#551b18;--color-red-900:#3e1715;--color-red-950:#261312;--color-orange-50:#ffe7ce;--color-orange-100:#fed3af;--color-orange-150:#fcc192;--color-orange-200:#f9ae77;--color-orange-300:#ec8b49;--color-orange-400:#da702c;--color-orange-500:#cb6120;--color-orange-600:#bc5215;--color-orange-700:#9d4310;--color-orange-800:#71320d;--color-orange-850:#59290d;--color-orange-900:#40200d;--color-orange-950:#27180e;--color-yellow-50:#faeec6;--color-yellow-100:#f6e2a0;--color-yellow-150:#f1d67e;--color-yellow-200:#eccb60;--color-yellow-300:#dfb431;--color-yellow-400:#d0a215;--color-yellow-500:#be9207;--color-yellow-600:#ad8301;--color-yellow-700:#8e6b01;--color-yellow-800:#664d01;--color-yellow-850:#503d02;--color-yellow-900:#3a2d04;--color-yellow-950:#241e08;--color-green-50:#edeecf;--color-green-100:#dde2b2;--color-green-150:#cdd597;--color-green-200:#bec97e;--color-green-300:#a0af54;--color-green-400:#879a39;--color-green-500:#768d21;--color-green-600:#66800b;--color-green-700:#536907;--color-green-800:#3d4c07;--color-green-850:#313d07;--color-green-900:#252d09;--color-green-950:#1a1e0c;--color-cyan-50:#ddf1e4;--color-cyan-100:#bfe8d9;--color-cyan-150:#a2dece;--color-cyan-200:#87d3c3;--color-cyan-300:#5abdac;--color-cyan-400:#3aa99f;--color-cyan-500:#2f968d;--color-cyan-600:#24837b;--color-cyan-700:#1c6c66;--color-cyan-800:#164f4a;--color-cyan-850:#143f3c;--color-cyan-900:#122f2c;--color-cyan-950:#101f1d;--color-blue-50:#e1eceb;--color-blue-100:#c6dde8;--color-blue-150:#abcfe2;--color-blue-200:#92bfdb;--color-blue-300:#66a0c8;--color-blue-400:#4385be;--color-blue-500:#3171b2;--color-blue-600:#205ea6;--color-blue-700:#1a4f8c;--color-blue-800:#163b66;--color-blue-850:#133051;--color-blue-900:#12253b;--color-blue-950:#101a24;--color-purple-50:#f0eaec;--color-purple-100:#e2d9e9;--color-purple-150:#d3cae6;--color-purple-200:#c4b9e0;--color-purple-300:#a699d0;--color-purple-400:#8b7ec8;--color-purple-500:#735eb5;--color-purple-600:#5e409d;--color-purple-700:#4f3685;--color-purple-800:#3c2a62;--color-purple-850:#31234e;--color-purple-900:#261c39;--color-purple-950:#1a1623;--color-magenta-50:#fee4e5;--color-magenta-100:#fccfda;--color-magenta-150:#f9b9cf;--color-magenta-200:#f4a4c2;--color-magenta-300:#e47da8;--color-magenta-400:#ce5d97;--color-magenta-500:#b74583;--color-magenta-600:#a02f6f;--color-magenta-700:#87285e;--color-magenta-800:#641f46;--color-magenta-850:#4f1b39;--color-magenta-900:#39172b;--color-magenta-950:#24131d;--color-surface:light-dark(var(--color-paper),var(--color-black));--color-surface-muted:light-dark(var(--color-base-50),var(--color-base-950));--color-surface-strong:light-dark(var(--color-base-100),var(--color-base-900));--color-text:light-dark(var(--color-black),var(--color-base-200));--color-text-muted:light-dark(var(--color-base-600),var(--color-base-500));--color-border:light-dark(var(--color-base-150),var(--color-base-850));--color-border-strong:light-dark(var(--color-base-300),var(--color-base-700));--color-code-surface:light-dark(var(--color-base-150),var(--color-base-950));--color-code-text:light-dark(var(--color-base-800),var(--color-base-200));--color-scrim:#0f0f0f66}
66
+ @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:scope, :scope *, :scope:before, :scope :before, :scope:after, :scope :after, :scope::backdrop, :scope ::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-duration:initial;--tw-tracking:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}
67
+ :scope, :scope:host, :scope :host{--font-sans:"IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-paper:#fff;--color-black:#0f0f0f;--color-base-50:#fafafa;--color-base-100:#f4f4f4;--color-base-150:#e7e7e7;--color-base-200:#d4d4d4;--color-base-300:#b3b3b3;--color-base-400:#9b9b9b;--color-base-500:#848484;--color-base-600:#6c6c6c;--color-base-700:#555;--color-base-800:#3e3e3e;--color-base-850:#333;--color-base-900:#272727;--color-base-950:#1b1b1b;--color-red-50:#ffe1d5;--color-red-100:#ffcabb;--color-red-150:#fdb2a2;--color-red-200:#f89a8a;--color-red-300:#e8705f;--color-red-400:#d14d41;--color-red-500:#c03e35;--color-red-600:#af3029;--color-red-700:#942822;--color-red-800:#6c201c;--color-red-850:#551b18;--color-red-900:#3e1715;--color-red-950:#261312;--color-orange-50:#ffe7ce;--color-orange-100:#fed3af;--color-orange-150:#fcc192;--color-orange-200:#f9ae77;--color-orange-300:#ec8b49;--color-orange-400:#da702c;--color-orange-500:#cb6120;--color-orange-600:#bc5215;--color-orange-700:#9d4310;--color-orange-800:#71320d;--color-orange-850:#59290d;--color-orange-900:#40200d;--color-orange-950:#27180e;--color-yellow-50:#faeec6;--color-yellow-100:#f6e2a0;--color-yellow-150:#f1d67e;--color-yellow-200:#eccb60;--color-yellow-300:#dfb431;--color-yellow-400:#d0a215;--color-yellow-500:#be9207;--color-yellow-600:#ad8301;--color-yellow-700:#8e6b01;--color-yellow-800:#664d01;--color-yellow-850:#503d02;--color-yellow-900:#3a2d04;--color-yellow-950:#241e08;--color-green-50:#edeecf;--color-green-100:#dde2b2;--color-green-150:#cdd597;--color-green-200:#bec97e;--color-green-300:#a0af54;--color-green-400:#879a39;--color-green-500:#768d21;--color-green-600:#66800b;--color-green-700:#536907;--color-green-800:#3d4c07;--color-green-850:#313d07;--color-green-900:#252d09;--color-green-950:#1a1e0c;--color-cyan-50:#ddf1e4;--color-cyan-100:#bfe8d9;--color-cyan-150:#a2dece;--color-cyan-200:#87d3c3;--color-cyan-300:#5abdac;--color-cyan-400:#3aa99f;--color-cyan-500:#2f968d;--color-cyan-600:#24837b;--color-cyan-700:#1c6c66;--color-cyan-800:#164f4a;--color-cyan-850:#143f3c;--color-cyan-900:#122f2c;--color-cyan-950:#101f1d;--color-blue-50:#e1eceb;--color-blue-100:#c6dde8;--color-blue-150:#abcfe2;--color-blue-200:#92bfdb;--color-blue-300:#66a0c8;--color-blue-400:#4385be;--color-blue-500:#3171b2;--color-blue-600:#205ea6;--color-blue-700:#1a4f8c;--color-blue-800:#163b66;--color-blue-850:#133051;--color-blue-900:#12253b;--color-blue-950:#101a24;--color-purple-50:#f0eaec;--color-purple-100:#e2d9e9;--color-purple-150:#d3cae6;--color-purple-200:#c4b9e0;--color-purple-300:#a699d0;--color-purple-400:#8b7ec8;--color-purple-500:#735eb5;--color-purple-600:#5e409d;--color-purple-700:#4f3685;--color-purple-800:#3c2a62;--color-purple-850:#31234e;--color-purple-900:#261c39;--color-purple-950:#1a1623;--color-magenta-50:#fee4e5;--color-magenta-100:#fccfda;--color-magenta-150:#f9b9cf;--color-magenta-200:#f4a4c2;--color-magenta-300:#e47da8;--color-magenta-400:#ce5d97;--color-magenta-500:#b74583;--color-magenta-600:#a02f6f;--color-magenta-700:#87285e;--color-magenta-800:#641f46;--color-magenta-850:#4f1b39;--color-magenta-900:#39172b;--color-magenta-950:#24131d;--color-surface:light-dark(var(--color-paper),var(--color-black));--color-surface-muted:light-dark(var(--color-base-50),var(--color-base-950));--color-surface-strong:light-dark(var(--color-base-100),var(--color-base-900));--color-text:light-dark(var(--color-black),var(--color-base-200));--color-text-muted:light-dark(var(--color-base-600),var(--color-base-500));--color-border:light-dark(var(--color-base-150),var(--color-base-850));--color-border-strong:light-dark(var(--color-base-300),var(--color-base-700));--color-code-surface:light-dark(var(--color-base-150),var(--color-base-950));--color-code-text:light-dark(var(--color-base-800),var(--color-base-200));--color-scrim:#0f0f0f66}
68
68
  @supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-scrim:color-mix(in oklab, var(--color-black) 40%, transparent)}}
69
69
  :scope, :scope:host, :scope :host{--color-primary:light-dark(var(--color-black),var(--color-paper));--color-primary-hover:light-dark(var(--color-base-800),var(--color-base-200));--color-primary-muted:light-dark(var(--color-base-150),var(--color-base-800));--color-primary-content:light-dark(var(--color-paper),var(--color-black));--color-link:light-dark(var(--color-blue-600),var(--color-blue-400));--color-link-hover:light-dark(var(--color-blue-700),var(--color-blue-300));--color-focus:light-dark(var(--color-blue-600),var(--color-blue-400));--color-system-accent:light-dark(var(--color-base-600),var(--color-base-400));--color-system-accent-hover:color-mix(in oklch, light-dark(var(--color-base-600),var(--color-base-400)), light-dark(var(--color-black),var(--color-base-200)) 12%)}
70
70
  @supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-system-accent-hover:color-mix(in oklch, var(--color-system-accent), var(--color-text) 12%)}}
@@ -142,16 +142,23 @@
142
142
  :scope._ao-accordion-item[open]::details-content, :scope ._ao-accordion-item[open]::details-content{opacity:1;height:auto}
143
143
  :scope._ao-alert, :scope ._ao-alert{gap:calc(var(--spacing) * 1);border-radius:var(--radius-md);border-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);overflow-wrap:break-word;border-width:1px;flex-direction:column;display:flex}
144
144
  :scope._ao-alert:has(>:is(i,svg):first-child), :scope ._ao-alert:has(>:is(i,svg):first-child){grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.25rem .5rem;display:grid}
145
+ :scope._ao-alert:has(>._ao-alert-action), :scope ._ao-alert:has(>._ao-alert-action){grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .5rem;display:grid}
146
+ :scope._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-action), :scope ._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-action){grid-template-columns:auto minmax(0,1fr) auto}
145
147
  :scope._ao-alert>:is(i,svg):first-child, :scope ._ao-alert>:is(i,svg):first-child{font-size:1rem;line-height:1.25}
146
- :scope._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-title), :scope ._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-title){grid-template-rows:auto auto;align-items:start}
148
+ :scope._ao-alert:has(>._ao-alert-title):is(:has(>:is(i,svg):first-child),:has(>._ao-alert-action)), :scope ._ao-alert:has(>._ao-alert-title):is(:has(>:is(i,svg):first-child),:has(>._ao-alert-action)){grid-template-rows:auto auto;align-items:start}
147
149
  :scope._ao-alert:has(>._ao-alert-title)>:is(i,svg):first-child, :scope ._ao-alert:has(>._ao-alert-title)>:is(i,svg):first-child{grid-row:1/-1}
148
- :scope._ao-alert>:is(._ao-alert-title,._ao-alert-description), :scope ._ao-alert>:is(._ao-alert-title,._ao-alert-description){grid-column:2;min-width:0}
150
+ :scope._ao-alert>:is(._ao-alert-title,._ao-alert-description), :scope ._ao-alert>:is(._ao-alert-title,._ao-alert-description){min-width:0}
151
+ :scope._ao-alert:has(>:is(i,svg):first-child)>:is(._ao-alert-title,._ao-alert-description), :scope ._ao-alert:has(>:is(i,svg):first-child)>:is(._ao-alert-title,._ao-alert-description){grid-column:2}
152
+ :scope._ao-alert>._ao-alert-action, :scope ._ao-alert>._ao-alert-action{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;grid-area:1/-2/-1;place-self:center end}
149
153
  :scope._ao-alert-info, :scope ._ao-alert-info{border-color:var(--color-info);background-color:var(--color-info);color:var(--color-info-content)}
150
154
  :scope._ao-alert-success, :scope ._ao-alert-success{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-success-content)}
151
155
  :scope._ao-alert-warning, :scope ._ao-alert-warning{border-color:var(--color-warning);background-color:var(--color-warning);color:var(--color-warning-content)}
152
156
  :scope._ao-alert-danger, :scope ._ao-alert-danger{border-color:var(--color-danger);background-color:var(--color-danger);color:var(--color-danger-content)}
153
157
  :scope._ao-alert-title, :scope ._ao-alert-title{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
154
158
  :scope._ao-alert-description, :scope ._ao-alert-description{opacity:.85}
159
+ :scope._ao-alert ._ao-link, :scope ._ao-alert ._ao-link{color:currentColor}
160
+ @media (hover:hover){:scope._ao-alert ._ao-link:hover, :scope ._ao-alert ._ao-link:hover{color:currentColor;opacity:.85}}
161
+ :scope._ao-alert ._ao-link:focus-visible, :scope ._ao-alert ._ao-link:focus-visible{outline-color:currentColor}
155
162
  :scope._ao-app-shell, :scope ._ao-app-shell{--app-shell-sidebar-w:240px;--app-shell-sidebar-w-collapsed:56px;background-color:var(--color-surface);width:100%;min-height:100vh;color:var(--color-text);grid-template:"header""main"1fr"footer"/1fr;display:grid}
156
163
  :scope._ao-app-shell>._ao-navbar, :scope ._ao-app-shell>._ao-navbar{grid-area:header}
157
164
  :scope._ao-app-shell>main, :scope ._ao-app-shell>main, :scope._ao-app-shell-main, :scope ._ao-app-shell-main{grid-area:main;min-width:0}
@@ -172,9 +179,37 @@
172
179
  :scope._ao-badge-warning, :scope ._ao-badge-warning{border-color:var(--color-warning);background-color:var(--color-warning);color:var(--color-warning-content)}
173
180
  :scope._ao-badge-danger, :scope ._ao-badge-danger{border-color:var(--color-danger);background-color:var(--color-danger);color:var(--color-danger-content)}
174
181
  :scope._ao-badge-primary, :scope ._ao-badge-primary{background-color:var(--color-primary);color:var(--color-primary-content)}
182
+ :scope._ao-badge-soft._ao-badge-info, :scope ._ao-badge-soft._ao-badge-info{border-color:var(--color-info-muted);background-color:var(--color-info-muted);color:var(--color-info)}
183
+ :scope._ao-badge-soft._ao-badge-success, :scope ._ao-badge-soft._ao-badge-success{border-color:var(--color-success-muted);background-color:var(--color-success-muted);color:var(--color-success)}
184
+ :scope._ao-badge-soft._ao-badge-warning, :scope ._ao-badge-soft._ao-badge-warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-muted);color:var(--color-text)}
185
+ :scope._ao-badge-soft._ao-badge-danger, :scope ._ao-badge-soft._ao-badge-danger{border-color:var(--color-danger-muted);background-color:var(--color-danger-muted);color:var(--color-danger)}
186
+ :scope._ao-badge-soft._ao-badge-primary, :scope ._ao-badge-soft._ao-badge-primary{border-color:var(--color-primary-muted);background-color:var(--color-primary-muted);color:var(--color-text)}
187
+ :scope._ao-badge-remove, :scope ._ao-badge-remove{margin-right:calc(var(--spacing) * -1);width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5);cursor:pointer;color:inherit;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
188
+ :scope._ao-badge-remove:focus-visible, :scope ._ao-badge-remove:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-focus)}
189
+ :scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover{background-color:currentColor}
190
+ @supports (color:color-mix(in lab, red, red)){:scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover{background-color:color-mix(in oklab, currentColor 15%, transparent)}}
191
+ :scope._ao-badge-sm ._ao-badge-remove, :scope ._ao-badge-sm ._ao-badge-remove{margin-right:calc(var(--spacing) * -.5);width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}
192
+ :scope._ao-badge-lg ._ao-badge-remove, :scope ._ao-badge-lg ._ao-badge-remove{margin-right:calc(var(--spacing) * -1.5);width:calc(var(--spacing) * 4.5);height:calc(var(--spacing) * 4.5)}
175
193
  :scope._ao-badge-sm, :scope ._ao-badge-sm{height:calc(var(--spacing) * 4);gap:calc(var(--spacing) * .5);padding-inline:calc(var(--spacing) * 1.5);font-size:.625rem}
176
194
  :scope._ao-badge-lg, :scope ._ao-badge-lg{height:calc(var(--spacing) * 6);gap:calc(var(--spacing) * 1.5);padding-inline:calc(var(--spacing) * 2.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
177
195
  :scope._ao-brand-tile, :scope ._ao-brand-tile{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);background-color:var(--color-system-accent);--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);font-size:11px;line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-system-accent-content);-webkit-user-select:none;user-select:none;border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}
196
+ :scope._ao-brand-tile>:is(i,svg), :scope ._ao-brand-tile>:is(i,svg){font-size:14px}
197
+ :scope._ao-brand-tile-lg, :scope ._ao-brand-tile-lg{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10);border-radius:var(--radius-md);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
198
+ :scope._ao-brand-tile-lg>:is(i,svg), :scope ._ao-brand-tile-lg>:is(i,svg){font-size:20px}
199
+ :scope._ao-brand-tile-soft, :scope ._ao-brand-tile-soft{background-color:var(--color-system-accent-muted);color:var(--color-system-accent)}
200
+ :scope._ao-brand-tile-info, :scope ._ao-brand-tile-info{background-color:var(--color-info-muted);color:var(--color-info)}
201
+ :scope._ao-brand-tile-success, :scope ._ao-brand-tile-success{background-color:var(--color-success-muted);color:var(--color-success)}
202
+ :scope._ao-brand-tile-danger, :scope ._ao-brand-tile-danger{background-color:var(--color-danger-muted);color:var(--color-danger)}
203
+ :scope._ao-brand-tile:has(>img), :scope ._ao-brand-tile:has(>img){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);padding:calc(var(--spacing) * .5)}
204
+ :scope._ao-brand-tile>img, :scope ._ao-brand-tile>img{border-radius:inherit;object-fit:contain;width:100%;height:100%}
205
+ :scope._ao-avatar, :scope ._ao-avatar{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8);background-color:var(--color-surface-strong);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-medium);line-height:1;font-weight:var(--font-weight-medium);--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);color:var(--color-text-muted);-webkit-user-select:none;user-select:none;border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden}
206
+ :scope._ao-avatar>img, :scope ._ao-avatar>img{inset:calc(var(--spacing) * 0);object-fit:cover;width:100%;height:100%;position:absolute}
207
+ :scope._ao-avatar-square, :scope ._ao-avatar-square{border-radius:var(--radius-md)}
208
+ :scope._ao-avatar-sm, :scope ._ao-avatar-sm{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);font-size:.625rem}
209
+ :scope._ao-avatar-lg, :scope ._ao-avatar-lg{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
210
+ :scope._ao-avatar-group, :scope ._ao-avatar-group{align-items:center;display:inline-flex}
211
+ :scope._ao-avatar-group>._ao-avatar, :scope ._ao-avatar-group>._ao-avatar{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-surface)}
212
+ :scope._ao-avatar-group>._ao-avatar+._ao-avatar, :scope ._ao-avatar-group>._ao-avatar+._ao-avatar{margin-inline-start:calc(var(--spacing) * -2)}
178
213
  :scope._ao-kbd, :scope ._ao-kbd{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-strong);vertical-align:middle;min-width:1.25em;height:1.4em;font-family:var(--font-mono);--tw-leading:1;white-space:nowrap;color:var(--color-text-muted);--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);border-radius:.25rem;justify-content:center;align-items:center;padding-inline:.35em;font-size:.75em;line-height:1;display:inline-flex}
179
214
  :scope._ao-kbd-group, :scope ._ao-kbd-group{align-items:center;gap:calc(var(--spacing) * 1);vertical-align:middle;display:inline-flex}
180
215
  :scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd{color:currentColor;background-color:currentColor}
@@ -186,6 +221,10 @@
186
221
  :scope._ao-indicator, :scope ._ao-indicator{width:max-content;display:inline-flex;position:relative}
187
222
  :scope._ao-indicator:has(>._ao-btn), :scope ._ao-indicator:has(>._ao-btn), :scope._ao-indicator:has(>._ao-input), :scope ._ao-indicator:has(>._ao-input){--indicator-offset:2px}
188
223
  :scope._ao-indicator:has(>._ao-card), :scope ._ao-indicator:has(>._ao-card){--indicator-offset:6px}
224
+ :scope._ao-indicator:has(>._ao-avatar), :scope ._ao-indicator:has(>._ao-avatar){--indicator-offset:5px}
225
+ :scope._ao-indicator:has(>._ao-avatar-sm), :scope ._ao-indicator:has(>._ao-avatar-sm){--indicator-offset:3px}
226
+ :scope._ao-indicator:has(>._ao-avatar-lg), :scope ._ao-indicator:has(>._ao-avatar-lg){--indicator-offset:6px}
227
+ :scope._ao-indicator:has(>._ao-avatar-square), :scope ._ao-indicator:has(>._ao-avatar-square){--indicator-offset:2px}
189
228
  :scope._ao-indicator-item, :scope ._ao-indicator-item{z-index:1;white-space:nowrap;top:var(--indicator-top,0);bottom:var(--indicator-bottom,auto);transform:translate(var(--indicator-tx,50%), var(--indicator-ty,-50%)) translate(var(--indicator-offset-x,calc(-1 * var(--indicator-offset,0px))), var(--indicator-offset-y,var(--indicator-offset,0px)));position:absolute;inset-inline-start:var(--indicator-start,auto);inset-inline-end:var(--indicator-end,0)}
190
229
  :scope._ao-indicator-start, :scope ._ao-indicator-start{--indicator-start:0;--indicator-end:auto;--indicator-tx:-50%;--indicator-offset-x:var(--indicator-offset,0px)}
191
230
  :scope._ao-indicator-center, :scope ._ao-indicator-center{--indicator-start:50%;--indicator-end:auto;--indicator-tx:-50%;--indicator-offset-x:0px}
@@ -262,6 +301,8 @@
262
301
  :scope._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon{display:none}
263
302
  :scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied{display:inline-flex}
264
303
  :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied]{color:var(--color-success)}
304
+ :scope._ao-separator, :scope ._ao-separator{margin:calc(var(--spacing) * 0);border-style:var(--tw-border-style);background-color:var(--color-border);border-width:0;flex-shrink:0;width:100%;height:1px;display:block}
305
+ :scope._ao-separator-vertical, :scope ._ao-separator-vertical{align-self:stretch;width:1px;height:auto;min-height:1lh}
265
306
  :scope._ao-btn, :scope ._ao-btn{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-medium);line-height:1;font-weight:var(--font-weight-medium);color:var(--color-text);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;-webkit-user-select:none;user-select:none;transition-duration:.15s;display:inline-flex}
266
307
  @media (hover:hover){:scope._ao-btn:hover, :scope ._ao-btn:hover{background-color:var(--color-surface-strong)}}
267
308
  :scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
@@ -346,6 +387,15 @@
346
387
  :scope._ao-input-group>:not(:first-child), :scope ._ao-input-group>:not(:first-child){margin-left:-1px}
347
388
  :scope._ao-input-group>:focus, :scope ._ao-input-group>:focus, :scope._ao-input-group>:focus-within, :scope ._ao-input-group>:focus-within{z-index:10;position:relative}
348
389
  :scope._ao-input-group-addon, :scope ._ao-input-group-addon{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding-inline:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;white-space:nowrap;color:var(--color-text-muted);align-items:center;line-height:1;display:inline-flex}
390
+ :scope._ao-input-icon, :scope ._ao-input-icon{width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted);--input-icon-inset:calc(var(--spacing) * 3);--input-icon-pad:calc(var(--spacing) * 9);align-items:center;display:inline-flex;position:relative}
391
+ :scope._ao-input-icon:has(>._ao-input-sm), :scope ._ao-input-icon:has(>._ao-input-sm){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--input-icon-inset:calc(var(--spacing) * 2.5);--input-icon-pad:calc(var(--spacing) * 8)}
392
+ :scope._ao-input-icon:has(>._ao-input-lg), :scope ._ao-input-icon:has(>._ao-input-lg){font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--input-icon-inset:calc(var(--spacing) * 4);--input-icon-pad:calc(var(--spacing) * 10)}
393
+ :scope._ao-input-icon>:where(i,svg), :scope ._ao-input-icon>:where(i,svg){pointer-events:none;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y);position:absolute;top:50%}
394
+ :scope._ao-input-icon>:where(i,svg):first-child, :scope ._ao-input-icon>:where(i,svg):first-child{left:var(--input-icon-inset)}
395
+ :scope._ao-input-icon>._ao-input~:where(i,svg), :scope ._ao-input-icon>._ao-input~:where(i,svg){right:var(--input-icon-inset)}
396
+ :scope._ao-input-icon:has(>:where(i,svg):first-child)>._ao-input, :scope ._ao-input-icon:has(>:where(i,svg):first-child)>._ao-input{padding-left:var(--input-icon-pad)}
397
+ :scope._ao-input-icon:has(>._ao-input~:where(i,svg))>._ao-input, :scope ._ao-input-icon:has(>._ao-input~:where(i,svg))>._ao-input{padding-right:var(--input-icon-pad)}
398
+ :scope._ao-input-icon:has(>._ao-input:disabled)>:where(i,svg), :scope ._ao-input-icon:has(>._ao-input:disabled)>:where(i,svg){opacity:.5}
349
399
  :scope._ao-textarea, :scope ._ao-textarea{min-height:calc(var(--spacing) * 20);resize:vertical;border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s;display:block}
350
400
  :scope._ao-textarea::placeholder, :scope ._ao-textarea::placeholder{color:var(--color-text-muted)}
351
401
  @media (hover:hover){:scope._ao-textarea:hover, :scope ._ao-textarea:hover{border-color:var(--color-border-strong)}}
@@ -464,6 +514,15 @@
464
514
  :scope._ao-card-info ._ao-card-title, :scope ._ao-card-info ._ao-card-title{color:var(--color-info)}
465
515
  :scope._ao-card-success ._ao-card-title, :scope ._ao-card-success ._ao-card-title{color:var(--color-success)}
466
516
  :scope._ao-card-danger ._ao-card-title, :scope ._ao-card-danger ._ao-card-title{color:var(--color-danger)}
517
+ :scope._ao-card-media, :scope ._ao-card-media{flex-shrink:0;width:100%;display:block;overflow:hidden}
518
+ :scope._ao-card-media:first-child, :scope ._ao-card-media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
519
+ :scope._ao-card-media:last-child, :scope ._ao-card-media:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
520
+ :scope._ao-card-media>:is(img,video), :scope ._ao-card-media>:is(img,video){object-fit:cover;width:100%;height:100%;display:block}
521
+ :scope._ao-card-scroll>._ao-card-header, :scope ._ao-card-scroll>._ao-card-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-shrink:0}
522
+ :scope._ao-card-scroll>._ao-card-body, :scope ._ao-card-scroll>._ao-card-body{min-height:calc(var(--spacing) * 0);flex:1;overflow-y:auto}
523
+ :scope._ao-card-scroll>._ao-card-body:last-child, :scope ._ao-card-scroll>._ao-card-body:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
524
+ :scope._ao-card-scroll>._ao-card-actions, :scope ._ao-card-scroll>._ao-card-actions{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-shrink:0}
525
+ :scope._ao-card-compact._ao-card-scroll>:is(._ao-card-header,._ao-card-actions), :scope ._ao-card-compact._ao-card-scroll>:is(._ao-card-header,._ao-card-actions){padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2)}
467
526
  :scope._ao-stat-card, :scope ._ao-stat-card{gap:calc(var(--spacing) * 1);padding:calc(var(--spacing) * 4)}
468
527
  :scope._ao-stat-card-label, :scope ._ao-stat-card-label{align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-text-muted);display:flex}
469
528
  :scope._ao-stat-card-label>:is(i,svg), :scope ._ao-stat-card-label>:is(i,svg){flex-shrink:0}
@@ -648,6 +707,8 @@
648
707
  :scope._ao-table, :scope ._ao-table{border-collapse:collapse;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text)}
649
708
  :scope._ao-table :where(th,td), :scope ._ao-table :where(th,td), :scope._ao-table-cell, :scope ._ao-table-cell, :scope._ao-table-header-cell, :scope ._ao-table-header-cell{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);text-align:left;vertical-align:middle}
650
709
  :scope._ao-table :where(thead th), :scope ._ao-table :where(thead th), :scope._ao-table-header-cell, :scope ._ao-table-header-cell{border-bottom-color:var(--color-border-strong);background-color:var(--color-surface-muted);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-text-muted)}
710
+ :scope._ao-table :where(tfoot :is(td,th)), :scope ._ao-table :where(tfoot :is(td,th)){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
711
+ :scope._ao-table :where(tfoot tr:first-child :is(td,th)), :scope ._ao-table :where(tfoot tr:first-child :is(td,th)){border-top-style:var(--tw-border-style);border-top-width:2px;border-top-color:var(--color-border-strong)}
651
712
  :scope._ao-table :where(td), :scope ._ao-table :where(td), :scope._ao-table-cell, :scope ._ao-table-cell{overflow-wrap:break-word}
652
713
  :scope._ao-table>:last-child>tr:last-child :where(td), :scope ._ao-table>:last-child>tr:last-child :where(td), :scope._ao-table>:last-child>tr:last-child ._ao-table-cell, :scope ._ao-table>:last-child>tr:last-child ._ao-table-cell{border-bottom-style:var(--tw-border-style);border-bottom-width:0}
653
714
  :scope._ao-table :where(th,td)[data-align=right], :scope ._ao-table :where(th,td)[data-align=right]{text-align:right}
@@ -753,6 +814,7 @@
753
814
  @media (min-width:64rem){:scope._ao-container, :scope ._ao-container{max-width:64rem}}
754
815
  @media (min-width:80rem){:scope._ao-container, :scope ._ao-container{max-width:80rem}}
755
816
  @media (min-width:96rem){:scope._ao-container, :scope ._ao-container{max-width:96rem}}
817
+ :scope._ao-my-4, :scope ._ao-my-4{margin-block:calc(var(--spacing) * 4)}
756
818
  :scope._ao-block, :scope ._ao-block{display:block}
757
819
  :scope._ao-flex, :scope ._ao-flex{display:flex}
758
820
  :scope._ao-grid, :scope ._ao-grid{display:grid}