@aortl/admin-css 0.17.0 → 0.18.1

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.
@@ -168,20 +168,20 @@
168
168
  inherits: false;
169
169
  initial-value: 0 0 #0000;
170
170
  }
171
- @property --tw-leading {
171
+ @property --tw-outline-style {
172
172
  syntax: "*";
173
173
  inherits: false;
174
+ initial-value: solid;
174
175
  }
175
- @property --tw-font-weight {
176
+ @property --tw-leading {
176
177
  syntax: "*";
177
178
  inherits: false;
178
179
  }
179
- @property --tw-border-style {
180
+ @property --tw-font-weight {
180
181
  syntax: "*";
181
182
  inherits: false;
182
- initial-value: solid;
183
183
  }
184
- @property --tw-outline-style {
184
+ @property --tw-border-style {
185
185
  syntax: "*";
186
186
  inherits: false;
187
187
  initial-value: solid;
@@ -263,10 +263,10 @@
263
263
  --tw-ring-offset-width: 0px;
264
264
  --tw-ring-offset-color: #fff;
265
265
  --tw-ring-offset-shadow: 0 0 #0000;
266
+ --tw-outline-style: solid;
266
267
  --tw-leading: initial;
267
268
  --tw-font-weight: initial;
268
269
  --tw-border-style: solid;
269
- --tw-outline-style: solid;
270
270
  --tw-duration: initial;
271
271
  --tw-tracking: initial;
272
272
  --tw-translate-x: 0;
@@ -439,9 +439,13 @@
439
439
  --color-code-surface: light-dark(var(--color-base-150), var(--color-base-950));
440
440
  --color-code-text: light-dark(var(--color-base-800), var(--color-base-200));
441
441
  --color-scrim: color-mix(in srgb, #0f0f0f 40%, transparent);
442
- @supports (color: color-mix(in lab, red, red)) {
442
+ }
443
+ @supports (color: color-mix(in lab, red, red)) {
444
+ :scope, :scope:host, :scope :host {
443
445
  --color-scrim: color-mix(in oklab, var(--color-black) 40%, transparent);
446
+ }
444
447
  }
448
+ :scope, :scope:host, :scope :host {
445
449
  --color-primary: light-dark(var(--color-black), var(--color-paper));
446
450
  --color-primary-hover: light-dark(var(--color-base-800), var(--color-base-200));
447
451
  --color-primary-muted: light-dark(var(--color-base-150), var(--color-base-800));
@@ -455,25 +459,33 @@
455
459
  light-dark(var(--color-base-600), var(--color-base-400)),
456
460
  light-dark(var(--color-black), var(--color-base-200)) 12%
457
461
  );
458
- @supports (color: color-mix(in lab, red, red)) {
462
+ }
463
+ @supports (color: color-mix(in lab, red, red)) {
464
+ :scope, :scope:host, :scope :host {
459
465
  --color-system-accent-hover: color-mix(
460
466
  in oklch,
461
467
  var(--color-system-accent),
462
468
  var(--color-text) 12%
463
469
  );
470
+ }
464
471
  }
472
+ :scope, :scope:host, :scope :host {
465
473
  --color-system-accent-muted: color-mix(
466
474
  in oklch,
467
475
  light-dark(var(--color-base-600), var(--color-base-400)) 12%,
468
476
  light-dark(var(--color-paper), var(--color-black))
469
477
  );
470
- @supports (color: color-mix(in lab, red, red)) {
478
+ }
479
+ @supports (color: color-mix(in lab, red, red)) {
480
+ :scope, :scope:host, :scope :host {
471
481
  --color-system-accent-muted: color-mix(
472
482
  in oklch,
473
483
  var(--color-system-accent) 12%,
474
484
  var(--color-surface)
475
485
  );
486
+ }
476
487
  }
488
+ :scope, :scope:host, :scope :host {
477
489
  --color-system-accent-content: light-dark(var(--color-paper), var(--color-black));
478
490
  --color-danger: light-dark(var(--color-red-600), var(--color-red-400));
479
491
  --color-danger-hover: light-dark(var(--color-red-700), var(--color-red-300));
@@ -599,10 +611,12 @@
599
611
  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
600
612
  :scope::placeholder, :scope ::placeholder {
601
613
  color: currentcolor;
614
+ }
602
615
  @supports (color: color-mix(in lab, red, red)) {
616
+ :scope::placeholder, :scope ::placeholder {
603
617
  color: color-mix(in oklab, currentcolor 50%, transparent);
604
- }
605
618
  }
619
+ }
606
620
  }
607
621
  :scope textarea {
608
622
  resize: vertical;
@@ -709,21 +723,23 @@
709
723
  color: var(--color-text);
710
724
  -webkit-user-select: none;
711
725
  user-select: none;
712
- &:hover {
713
- @media (hover: hover) {
726
+ }
727
+ @media (hover: hover) {
728
+ :scope._ao-accordion-summary:hover, :scope ._ao-accordion-summary:hover {
714
729
  background-color: var(--color-surface-muted);
715
- }
716
730
  }
717
- &:focus-visible {
731
+ }
732
+ :scope._ao-accordion-summary:focus-visible, :scope ._ao-accordion-summary:focus-visible {
718
733
  outline-style: var(--tw-outline-style);
719
734
  outline-width: 2px;
720
735
  }
721
- &:focus-visible {
736
+ :scope._ao-accordion-summary:focus-visible, :scope ._ao-accordion-summary:focus-visible {
722
737
  outline-offset: 2px;
723
738
  }
724
- &:focus-visible {
739
+ :scope._ao-accordion-summary:focus-visible, :scope ._ao-accordion-summary:focus-visible {
725
740
  outline-color: var(--color-focus);
726
741
  }
742
+ :scope._ao-accordion-summary, :scope ._ao-accordion-summary {
727
743
  list-style: none;
728
744
  overflow-wrap: break-word;
729
745
  min-width: 0;
@@ -792,21 +808,27 @@
792
808
  row-gap: 0.25rem;
793
809
  align-items: center;
794
810
  }
795
- :scope._ao-alert:has(> ._ao-alert-action), :scope ._ao-alert:has(> ._ao-alert-action) {
811
+ :scope._ao-alert:has(> ._ao-alert-action), :scope ._ao-alert:has(> ._ao-alert-action), :scope._ao-alert:has(> ._ao-alert-dismiss), :scope ._ao-alert:has(> ._ao-alert-dismiss) {
796
812
  display: grid;
797
813
  grid-template-columns: minmax(0, 1fr) auto;
798
814
  column-gap: 0.5rem;
799
815
  row-gap: 0.25rem;
800
816
  align-items: center;
801
817
  }
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) {
818
+ :scope._ao-alert:has(> ._ao-alert-action):has(> ._ao-alert-dismiss), :scope ._ao-alert:has(> ._ao-alert-action):has(> ._ao-alert-dismiss) {
819
+ grid-template-columns: minmax(0, 1fr) auto auto;
820
+ }
821
+ :scope._ao-alert:has(> :is(i, svg):first-child):is(:has(> ._ao-alert-action), :has(> ._ao-alert-dismiss)), :scope ._ao-alert:has(> :is(i, svg):first-child):is(:has(> ._ao-alert-action), :has(> ._ao-alert-dismiss)) {
803
822
  grid-template-columns: auto minmax(0, 1fr) auto;
804
823
  }
824
+ :scope._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-action):has(> ._ao-alert-dismiss), :scope ._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-action):has(> ._ao-alert-dismiss) {
825
+ grid-template-columns: auto minmax(0, 1fr) auto auto;
826
+ }
805
827
  :scope._ao-alert > :is(i, svg):first-child, :scope ._ao-alert > :is(i, svg):first-child {
806
828
  font-size: 1rem;
807
829
  line-height: 1.25;
808
830
  }
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)) {
831
+ :scope._ao-alert:has(> ._ao-alert-title):is( :has(> :is(i, svg):first-child), :has(> ._ao-alert-action), :has(> ._ao-alert-dismiss) ), :scope ._ao-alert:has(> ._ao-alert-title):is( :has(> :is(i, svg):first-child), :has(> ._ao-alert-action), :has(> ._ao-alert-dismiss) ) {
810
832
  grid-template-rows: auto auto;
811
833
  align-items: start;
812
834
  }
@@ -819,14 +841,22 @@
819
841
  :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
842
  grid-column: 2;
821
843
  }
844
+ :scope._ao-alert > :is(._ao-alert-action, ._ao-alert-dismiss), :scope ._ao-alert > :is(._ao-alert-action, ._ao-alert-dismiss) {
845
+ grid-row: 1 / -1;
846
+ justify-self: end;
847
+ align-self: center;
848
+ }
822
849
  :scope._ao-alert > ._ao-alert-action, :scope ._ao-alert > ._ao-alert-action {
823
850
  --tw-font-weight: var(--font-weight-medium);
824
851
  font-weight: var(--font-weight-medium);
825
852
  white-space: nowrap;
826
853
  grid-column: -2;
827
- grid-row: 1 / -1;
828
- justify-self: end;
829
- align-self: center;
854
+ }
855
+ :scope._ao-alert > ._ao-alert-dismiss, :scope ._ao-alert > ._ao-alert-dismiss {
856
+ grid-column: -2;
857
+ }
858
+ :scope._ao-alert:has(> ._ao-alert-dismiss) > ._ao-alert-action, :scope ._ao-alert:has(> ._ao-alert-dismiss) > ._ao-alert-action {
859
+ grid-column: -3;
830
860
  }
831
861
  :scope._ao-alert-info, :scope ._ao-alert-info {
832
862
  border-color: var(--color-info);
@@ -855,22 +885,57 @@
855
885
  :scope._ao-alert-description, :scope ._ao-alert-description {
856
886
  opacity: 0.85;
857
887
  }
888
+ :scope._ao-alert-dismiss, :scope ._ao-alert-dismiss {
889
+ margin-right: calc(var(--spacing) * -1);
890
+ display: inline-flex;
891
+ width: calc(var(--spacing) * 5);
892
+ height: calc(var(--spacing) * 5);
893
+ flex-shrink: 0;
894
+ cursor: pointer;
895
+ align-items: center;
896
+ justify-content: center;
897
+ border-radius: 0.25rem;
898
+ color: inherit;
899
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
900
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
901
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
902
+ --tw-duration: 150ms;
903
+ transition-duration: 150ms;
904
+ }
905
+ :scope._ao-alert-dismiss:focus-visible, :scope ._ao-alert-dismiss:focus-visible {
906
+ outline-style: var(--tw-outline-style);
907
+ outline-width: 2px;
908
+ }
909
+ :scope._ao-alert-dismiss:focus-visible, :scope ._ao-alert-dismiss:focus-visible {
910
+ outline-offset: 1px;
911
+ }
912
+ :scope._ao-alert-dismiss:focus-visible, :scope ._ao-alert-dismiss:focus-visible {
913
+ outline-color: var(--color-focus);
914
+ }
915
+ :scope._ao-alert-dismiss:hover, :scope ._ao-alert-dismiss:hover {
916
+ background-color: currentColor;
917
+ }
918
+ @supports (color: color-mix(in lab, red, red)) {
919
+ :scope._ao-alert-dismiss:hover, :scope ._ao-alert-dismiss:hover {
920
+ background-color: color-mix(in oklab, currentColor 15%, transparent);
921
+ }
922
+ }
858
923
  :scope._ao-alert ._ao-link, :scope ._ao-alert ._ao-link {
859
924
  color: currentcolor;
860
- &:hover {
861
- @media (hover: hover) {
925
+ }
926
+ @media (hover: hover) {
927
+ :scope:is(._ao-alert ._ao-link):hover, :scope :is(._ao-alert ._ao-link):hover {
862
928
  color: currentcolor;
863
- }
864
929
  }
865
- &:hover {
866
- @media (hover: hover) {
867
- opacity: 85%;
868
930
  }
931
+ @media (hover: hover) {
932
+ :scope:is(._ao-alert ._ao-link):hover, :scope :is(._ao-alert ._ao-link):hover {
933
+ opacity: 85%;
869
934
  }
870
- &:focus-visible {
935
+ }
936
+ :scope:is(._ao-alert ._ao-link):focus-visible, :scope :is(._ao-alert ._ao-link):focus-visible {
871
937
  outline-color: currentcolor;
872
938
  }
873
- }
874
939
  :scope._ao-app-shell, :scope ._ao-app-shell {
875
940
  --app-shell-sidebar-w: 240px;
876
941
  --app-shell-sidebar-w-collapsed: 56px;
@@ -1026,23 +1091,25 @@
1026
1091
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1027
1092
  --tw-duration: 150ms;
1028
1093
  transition-duration: 150ms;
1029
- &:focus-visible {
1094
+ }
1095
+ :scope._ao-badge-remove:focus-visible, :scope ._ao-badge-remove:focus-visible {
1030
1096
  outline-style: var(--tw-outline-style);
1031
1097
  outline-width: 2px;
1032
1098
  }
1033
- &:focus-visible {
1099
+ :scope._ao-badge-remove:focus-visible, :scope ._ao-badge-remove:focus-visible {
1034
1100
  outline-offset: 1px;
1035
1101
  }
1036
- &:focus-visible {
1102
+ :scope._ao-badge-remove:focus-visible, :scope ._ao-badge-remove:focus-visible {
1037
1103
  outline-color: var(--color-focus);
1038
1104
  }
1039
- }
1040
1105
  :scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover {
1041
1106
  background-color: currentColor;
1042
- @supports (color: color-mix(in lab, red, red)) {
1107
+ }
1108
+ @supports (color: color-mix(in lab, red, red)) {
1109
+ :scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover {
1043
1110
  background-color: color-mix(in oklab, currentColor 15%, transparent);
1044
- }
1045
1111
  }
1112
+ }
1046
1113
  :scope._ao-badge-sm ._ao-badge-remove, :scope ._ao-badge-sm ._ao-badge-remove {
1047
1114
  margin-right: calc(var(--spacing) * -0.5);
1048
1115
  width: calc(var(--spacing) * 3);
@@ -1182,6 +1249,13 @@
1182
1249
  :scope._ao-avatar-group > ._ao-avatar + ._ao-avatar, :scope ._ao-avatar-group > ._ao-avatar + ._ao-avatar {
1183
1250
  margin-inline-start: calc(var(--spacing) * -2);
1184
1251
  }
1252
+ :scope._ao-avatar-more, :scope ._ao-avatar-more {
1253
+ background-color: var(--color-surface-strong);
1254
+ --tw-font-weight: var(--font-weight-medium);
1255
+ font-weight: var(--font-weight-medium);
1256
+ color: var(--color-text-muted);
1257
+ font-variant-numeric: tabular-nums;
1258
+ }
1185
1259
  :scope._ao-kbd, :scope ._ao-kbd {
1186
1260
  display: inline-flex;
1187
1261
  height: 1.4em;
@@ -1213,14 +1287,20 @@
1213
1287
  :scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd {
1214
1288
  color: currentColor;
1215
1289
  background-color: currentColor;
1216
- @supports (color: color-mix(in lab, red, red)) {
1290
+ }
1291
+ @supports (color: color-mix(in lab, red, red)) {
1292
+ :scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd {
1217
1293
  background-color: color-mix(in srgb, currentColor 12%, transparent);
1294
+ }
1218
1295
  }
1296
+ :scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd {
1219
1297
  border-color: currentColor;
1220
- @supports (color: color-mix(in lab, red, red)) {
1298
+ }
1299
+ @supports (color: color-mix(in lab, red, red)) {
1300
+ :scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd {
1221
1301
  border-color: color-mix(in srgb, currentColor 22%, transparent);
1222
- }
1223
1302
  }
1303
+ }
1224
1304
  :scope._ao-btn > ._ao-kbd-group, :scope ._ao-btn > ._ao-kbd-group {
1225
1305
  opacity: 0.85;
1226
1306
  }
@@ -1328,9 +1408,13 @@
1328
1408
  flex-shrink: 0;
1329
1409
  border-radius: 9999px;
1330
1410
  border: 2px solid currentColor;
1331
- @supports (color: color-mix(in lab, red, red)) {
1411
+ }
1412
+ @supports (color: color-mix(in lab, red, red)) {
1413
+ :scope._ao-spinner, :scope ._ao-spinner {
1332
1414
  border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
1415
+ }
1333
1416
  }
1417
+ :scope._ao-spinner, :scope ._ao-spinner {
1334
1418
  border-top-color: currentColor;
1335
1419
  animation: spinner-spin 0.6s linear infinite;
1336
1420
  }
@@ -1441,22 +1525,22 @@
1441
1525
  gap: calc(var(--spacing) * 1.5);
1442
1526
  color: var(--color-text-muted);
1443
1527
  text-decoration-line: none;
1444
- &:hover {
1445
- @media (hover: hover) {
1528
+ }
1529
+ @media (hover: hover) {
1530
+ :scope._ao-breadcrumb-item:hover, :scope ._ao-breadcrumb-item:hover {
1446
1531
  color: var(--color-text);
1447
- }
1448
1532
  }
1449
- &:focus-visible {
1533
+ }
1534
+ :scope._ao-breadcrumb-item:focus-visible, :scope ._ao-breadcrumb-item:focus-visible {
1450
1535
  outline-style: var(--tw-outline-style);
1451
1536
  outline-width: 2px;
1452
1537
  }
1453
- &:focus-visible {
1538
+ :scope._ao-breadcrumb-item:focus-visible, :scope ._ao-breadcrumb-item:focus-visible {
1454
1539
  outline-offset: 2px;
1455
1540
  }
1456
- &:focus-visible {
1541
+ :scope._ao-breadcrumb-item:focus-visible, :scope ._ao-breadcrumb-item:focus-visible {
1457
1542
  outline-color: var(--color-focus);
1458
1543
  }
1459
- }
1460
1544
  :scope._ao-breadcrumb-item[aria-current="page"], :scope ._ao-breadcrumb-item[aria-current="page"] {
1461
1545
  pointer-events: none;
1462
1546
  --tw-font-weight: var(--font-weight-medium);
@@ -1467,9 +1551,13 @@
1467
1551
  display: inline-flex;
1468
1552
  align-items: center;
1469
1553
  color: color-mix(in srgb, light-dark(var(--color-base-600), var(--color-base-500)) 60%, transparent);
1470
- @supports (color: color-mix(in lab, red, red)) {
1554
+ }
1555
+ @supports (color: color-mix(in lab, red, red)) {
1556
+ :scope._ao-breadcrumb-separator, :scope ._ao-breadcrumb-separator {
1471
1557
  color: color-mix(in oklab, var(--color-text-muted) 60%, transparent);
1558
+ }
1472
1559
  }
1560
+ :scope._ao-breadcrumb-separator, :scope ._ao-breadcrumb-separator {
1473
1561
  -webkit-user-select: none;
1474
1562
  user-select: none;
1475
1563
  }
@@ -1522,31 +1610,31 @@
1522
1610
  transition-duration: 150ms;
1523
1611
  -webkit-user-select: none;
1524
1612
  user-select: none;
1525
- &:hover {
1526
- @media (hover: hover) {
1613
+ }
1614
+ @media (hover: hover) {
1615
+ :scope._ao-page-link:hover, :scope ._ao-page-link:hover {
1527
1616
  background-color: var(--color-surface-muted);
1528
- }
1529
1617
  }
1530
- &:focus-visible {
1618
+ }
1619
+ :scope._ao-page-link:focus-visible, :scope ._ao-page-link:focus-visible {
1531
1620
  outline-style: var(--tw-outline-style);
1532
1621
  outline-width: 2px;
1533
1622
  }
1534
- &:focus-visible {
1623
+ :scope._ao-page-link:focus-visible, :scope ._ao-page-link:focus-visible {
1535
1624
  outline-offset: 2px;
1536
1625
  }
1537
- &:focus-visible {
1626
+ :scope._ao-page-link:focus-visible, :scope ._ao-page-link:focus-visible {
1538
1627
  outline-color: var(--color-focus);
1539
1628
  }
1540
- &:disabled {
1629
+ :scope._ao-page-link:disabled, :scope ._ao-page-link:disabled {
1541
1630
  pointer-events: none;
1542
1631
  }
1543
- &:disabled {
1632
+ :scope._ao-page-link:disabled, :scope ._ao-page-link:disabled {
1544
1633
  cursor: not-allowed;
1545
1634
  }
1546
- &:disabled {
1635
+ :scope._ao-page-link:disabled, :scope ._ao-page-link:disabled {
1547
1636
  opacity: 50%;
1548
1637
  }
1549
- }
1550
1638
  :scope._ao-page-link._ao-active, :scope ._ao-page-link._ao-active, :scope._ao-page-link[aria-current="page"], :scope ._ao-page-link[aria-current="page"] {
1551
1639
  border-color: var(--color-primary-muted);
1552
1640
  background-color: var(--color-primary-muted);
@@ -1634,21 +1722,23 @@
1634
1722
  border-width: 0px;
1635
1723
  background-color: transparent;
1636
1724
  color: var(--color-text-muted);
1637
- &:hover {
1638
- @media (hover: hover) {
1725
+ }
1726
+ @media (hover: hover) {
1727
+ :scope._ao-property-list-copy:hover, :scope ._ao-property-list-copy:hover {
1639
1728
  color: var(--color-text);
1640
- }
1641
1729
  }
1642
- &:focus-visible {
1730
+ }
1731
+ :scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible {
1643
1732
  outline-style: var(--tw-outline-style);
1644
1733
  outline-width: 2px;
1645
1734
  }
1646
- &:focus-visible {
1735
+ :scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible {
1647
1736
  outline-offset: 2px;
1648
1737
  }
1649
- &:focus-visible {
1738
+ :scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible {
1650
1739
  outline-color: var(--color-focus);
1651
1740
  }
1741
+ :scope._ao-property-list-copy, :scope ._ao-property-list-copy {
1652
1742
  display: none;
1653
1743
  flex-shrink: 0;
1654
1744
  padding: 0.125rem;
@@ -1718,31 +1808,31 @@
1718
1808
  transition-duration: 150ms;
1719
1809
  -webkit-user-select: none;
1720
1810
  user-select: none;
1721
- &:hover {
1722
- @media (hover: hover) {
1811
+ }
1812
+ @media (hover: hover) {
1813
+ :scope._ao-btn:hover, :scope ._ao-btn:hover {
1723
1814
  background-color: var(--color-surface-strong);
1724
- }
1725
1815
  }
1726
- &:focus-visible {
1816
+ }
1817
+ :scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible {
1727
1818
  outline-style: var(--tw-outline-style);
1728
1819
  outline-width: 2px;
1729
1820
  }
1730
- &:focus-visible {
1821
+ :scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible {
1731
1822
  outline-offset: 2px;
1732
1823
  }
1733
- &:focus-visible {
1824
+ :scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible {
1734
1825
  outline-color: var(--color-focus);
1735
1826
  }
1736
- &:disabled {
1827
+ :scope._ao-btn:disabled, :scope ._ao-btn:disabled {
1737
1828
  pointer-events: none;
1738
1829
  }
1739
- &:disabled {
1830
+ :scope._ao-btn:disabled, :scope ._ao-btn:disabled {
1740
1831
  cursor: not-allowed;
1741
1832
  }
1742
- &:disabled {
1833
+ :scope._ao-btn:disabled, :scope ._ao-btn:disabled {
1743
1834
  opacity: 50%;
1744
1835
  }
1745
- }
1746
1836
  :scope._ao-btn > :is(i, svg), :scope ._ao-btn > :is(i, svg) {
1747
1837
  flex-shrink: 0;
1748
1838
  }
@@ -1750,40 +1840,40 @@
1750
1840
  border-color: transparent;
1751
1841
  background-color: var(--color-primary);
1752
1842
  color: var(--color-primary-content);
1753
- &:hover {
1754
- @media (hover: hover) {
1843
+ }
1844
+ @media (hover: hover) {
1845
+ :scope._ao-btn-primary:hover, :scope ._ao-btn-primary:hover {
1755
1846
  background-color: var(--color-primary-hover);
1756
- }
1757
1847
  }
1758
- }
1848
+ }
1759
1849
  :scope._ao-btn-ghost, :scope ._ao-btn-ghost {
1760
1850
  border-color: transparent;
1761
1851
  background-color: transparent;
1762
1852
  color: var(--color-text);
1763
- &:hover {
1764
- @media (hover: hover) {
1853
+ }
1854
+ @media (hover: hover) {
1855
+ :scope._ao-btn-ghost:hover, :scope ._ao-btn-ghost:hover {
1765
1856
  background-color: var(--color-surface-muted);
1766
- }
1767
1857
  }
1768
- }
1858
+ }
1769
1859
  :scope._ao-btn-muted, :scope ._ao-btn-muted {
1770
1860
  background-color: var(--color-surface);
1771
- &:hover {
1772
- @media (hover: hover) {
1861
+ }
1862
+ @media (hover: hover) {
1863
+ :scope._ao-btn-muted:hover, :scope ._ao-btn-muted:hover {
1773
1864
  background-color: var(--color-surface-muted);
1774
- }
1775
1865
  }
1776
- }
1866
+ }
1777
1867
  :scope._ao-btn-danger, :scope ._ao-btn-danger {
1778
1868
  border-color: transparent;
1779
1869
  background-color: var(--color-danger);
1780
1870
  color: var(--color-danger-content);
1781
- &:hover {
1782
- @media (hover: hover) {
1871
+ }
1872
+ @media (hover: hover) {
1873
+ :scope._ao-btn-danger:hover, :scope ._ao-btn-danger:hover {
1783
1874
  opacity: 90%;
1784
- }
1785
1875
  }
1786
- }
1876
+ }
1787
1877
  :scope._ao-btn-sm, :scope ._ao-btn-sm {
1788
1878
  gap: calc(var(--spacing) * 1.5);
1789
1879
  padding-inline: calc(var(--spacing) * 3);
@@ -1823,9 +1913,13 @@
1823
1913
  flex-shrink: 0;
1824
1914
  border-radius: 9999px;
1825
1915
  border: 0.125em solid currentColor;
1826
- @supports (color: color-mix(in lab, red, red)) {
1916
+ }
1917
+ @supports (color: color-mix(in lab, red, red)) {
1918
+ :scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
1827
1919
  border: 0.125em solid color-mix(in oklab, currentColor 25%, transparent);
1920
+ }
1828
1921
  }
1922
+ :scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
1829
1923
  border-top-color: currentColor;
1830
1924
  animation: spinner-spin 0.6s linear infinite;
1831
1925
  }
@@ -1843,15 +1937,17 @@
1843
1937
  :scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn {
1844
1938
  position: relative;
1845
1939
  border-radius: 0;
1846
- &:focus-visible {
1940
+ }
1941
+ :scope:is(._ao-btn-group > ._ao-btn):focus-visible, :scope :is(._ao-btn-group > ._ao-btn):focus-visible {
1847
1942
  z-index: 10;
1848
1943
  }
1849
- }
1850
1944
  :scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
1851
1945
  position: relative;
1852
- &:focus-visible {
1946
+ }
1947
+ :scope:is(._ao-btn-group > ._ao-menu):focus-visible, :scope :is(._ao-btn-group > ._ao-menu):focus-visible {
1853
1948
  z-index: 10;
1854
1949
  }
1950
+ :scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
1855
1951
  display: inline-flex;
1856
1952
  }
1857
1953
  :scope._ao-btn-group > ._ao-menu > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
@@ -1870,10 +1966,12 @@
1870
1966
  }
1871
1967
  :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1872
1968
  border-left-color: currentColor;
1873
- @supports (color: color-mix(in lab, red, red)) {
1969
+ }
1970
+ @supports (color: color-mix(in lab, red, red)) {
1971
+ :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1874
1972
  border-left-color: color-mix(in oklab, currentColor 25%, transparent);
1875
- }
1876
1973
  }
1974
+ }
1877
1975
  :scope._ao-btn-group-vertical, :scope ._ao-btn-group-vertical {
1878
1976
  display: inline-flex;
1879
1977
  flex-direction: column;
@@ -1894,10 +1992,12 @@
1894
1992
  }
1895
1993
  :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1896
1994
  border-top-color: currentColor;
1897
- @supports (color: color-mix(in lab, red, red)) {
1995
+ }
1996
+ @supports (color: color-mix(in lab, red, red)) {
1997
+ :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1898
1998
  border-top-color: color-mix(in oklab, currentColor 25%, transparent);
1899
- }
1900
1999
  }
2000
+ }
1901
2001
  :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical), :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) {
1902
2002
  display: flex;
1903
2003
  width: 100%;
@@ -1921,21 +2021,23 @@
1921
2021
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1922
2022
  --tw-duration: 150ms;
1923
2023
  transition-duration: 150ms;
1924
- &:hover {
1925
- @media (hover: hover) {
2024
+ }
2025
+ @media (hover: hover) {
2026
+ :scope._ao-link:hover, :scope ._ao-link:hover {
1926
2027
  color: var(--color-link-hover);
1927
- }
1928
2028
  }
1929
- &:focus-visible {
2029
+ }
2030
+ :scope._ao-link:focus-visible, :scope ._ao-link:focus-visible {
1930
2031
  outline-style: var(--tw-outline-style);
1931
2032
  outline-width: 2px;
1932
2033
  }
1933
- &:focus-visible {
2034
+ :scope._ao-link:focus-visible, :scope ._ao-link:focus-visible {
1934
2035
  outline-offset: 2px;
1935
2036
  }
1936
- &:focus-visible {
2037
+ :scope._ao-link:focus-visible, :scope ._ao-link:focus-visible {
1937
2038
  outline-color: var(--color-focus);
1938
2039
  }
2040
+ :scope._ao-link, :scope ._ao-link {
1939
2041
  overflow-wrap: break-word;
1940
2042
  }
1941
2043
  :scope._ao-link > :is(i, svg), :scope ._ao-link > :is(i, svg) {
@@ -1974,89 +2076,89 @@
1974
2076
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1975
2077
  --tw-duration: 150ms;
1976
2078
  transition-duration: 150ms;
1977
- &::placeholder {
2079
+ }
2080
+ :scope._ao-input::placeholder, :scope ._ao-input::placeholder {
1978
2081
  color: var(--color-text-muted);
1979
2082
  }
1980
- &:hover {
1981
- @media (hover: hover) {
2083
+ @media (hover: hover) {
2084
+ :scope._ao-input:hover, :scope ._ao-input:hover {
1982
2085
  border-color: var(--color-border-strong);
1983
- }
1984
2086
  }
1985
- &:focus-visible {
2087
+ }
2088
+ :scope._ao-input:focus-visible, :scope ._ao-input:focus-visible {
1986
2089
  outline-style: var(--tw-outline-style);
1987
2090
  outline-width: 2px;
1988
2091
  }
1989
- &:focus-visible {
2092
+ :scope._ao-input:focus-visible, :scope ._ao-input:focus-visible {
1990
2093
  outline-offset: 2px;
1991
2094
  }
1992
- &:focus-visible {
2095
+ :scope._ao-input:focus-visible, :scope ._ao-input:focus-visible {
1993
2096
  outline-color: var(--color-focus);
1994
2097
  }
1995
- &:disabled {
2098
+ :scope._ao-input:disabled, :scope ._ao-input:disabled {
1996
2099
  cursor: not-allowed;
1997
2100
  }
1998
- &:disabled {
2101
+ :scope._ao-input:disabled, :scope ._ao-input:disabled {
1999
2102
  opacity: 50%;
2000
2103
  }
2001
- }
2002
2104
  :scope._ao-input-ghost, :scope ._ao-input-ghost {
2003
2105
  border-color: transparent;
2004
2106
  background-color: transparent;
2005
- &:hover {
2006
- @media (hover: hover) {
2107
+ }
2108
+ @media (hover: hover) {
2109
+ :scope._ao-input-ghost:hover, :scope ._ao-input-ghost:hover {
2007
2110
  border-color: transparent;
2008
- }
2009
2111
  }
2010
- &:hover {
2011
- @media (hover: hover) {
2012
- background-color: var(--color-surface-muted);
2013
2112
  }
2113
+ @media (hover: hover) {
2114
+ :scope._ao-input-ghost:hover, :scope ._ao-input-ghost:hover {
2115
+ background-color: var(--color-surface-muted);
2014
2116
  }
2015
- }
2117
+ }
2016
2118
  :scope._ao-input-danger, :scope ._ao-input-danger {
2017
2119
  border-color: var(--color-danger);
2018
- &:hover {
2019
- @media (hover: hover) {
2120
+ }
2121
+ @media (hover: hover) {
2122
+ :scope._ao-input-danger:hover, :scope ._ao-input-danger:hover {
2020
2123
  border-color: var(--color-danger);
2021
- }
2022
2124
  }
2023
- &:focus-visible {
2125
+ }
2126
+ :scope._ao-input-danger:focus-visible, :scope ._ao-input-danger:focus-visible {
2024
2127
  outline-color: var(--color-danger);
2025
2128
  }
2026
- }
2027
2129
  :scope._ao-input-info, :scope ._ao-input-info {
2028
2130
  border-color: var(--color-info);
2029
- &:hover {
2030
- @media (hover: hover) {
2131
+ }
2132
+ @media (hover: hover) {
2133
+ :scope._ao-input-info:hover, :scope ._ao-input-info:hover {
2031
2134
  border-color: var(--color-info);
2032
- }
2033
2135
  }
2034
- &:focus-visible {
2136
+ }
2137
+ :scope._ao-input-info:focus-visible, :scope ._ao-input-info:focus-visible {
2035
2138
  outline-color: var(--color-info);
2036
2139
  }
2037
- }
2038
2140
  :scope._ao-input-success, :scope ._ao-input-success {
2039
2141
  border-color: var(--color-success);
2040
- &:hover {
2041
- @media (hover: hover) {
2142
+ }
2143
+ @media (hover: hover) {
2144
+ :scope._ao-input-success:hover, :scope ._ao-input-success:hover {
2042
2145
  border-color: var(--color-success);
2043
- }
2044
2146
  }
2045
- &:focus-visible {
2147
+ }
2148
+ :scope._ao-input-success:focus-visible, :scope ._ao-input-success:focus-visible {
2046
2149
  outline-color: var(--color-success);
2047
2150
  }
2048
- }
2049
2151
  :scope._ao-input-warning, :scope ._ao-input-warning {
2050
2152
  border-color: var(--color-warning);
2051
- &:hover {
2052
- @media (hover: hover) {
2153
+ }
2154
+ @media (hover: hover) {
2155
+ :scope._ao-input-warning:hover, :scope ._ao-input-warning:hover {
2053
2156
  border-color: var(--color-warning);
2054
- }
2055
2157
  }
2056
- &:focus-visible {
2158
+ }
2159
+ :scope._ao-input-warning:focus-visible, :scope ._ao-input-warning:focus-visible {
2057
2160
  outline-color: var(--color-warning);
2058
2161
  }
2059
- }
2060
2162
  :scope._ao-input-sm, :scope ._ao-input-sm {
2061
2163
  padding-inline: calc(var(--spacing) * 2.5);
2062
2164
  padding-block: calc(var(--spacing) * 1.5);
@@ -2072,12 +2174,12 @@
2072
2174
  :scope._ao-input::-webkit-calendar-picker-indicator, :scope ._ao-input::-webkit-calendar-picker-indicator {
2073
2175
  cursor: pointer;
2074
2176
  opacity: 60%;
2075
- &:hover {
2076
- @media (hover: hover) {
2177
+ }
2178
+ @media (hover: hover) {
2179
+ :scope:is(._ao-input::-webkit-calendar-picker-indicator):hover, :scope :is(._ao-input::-webkit-calendar-picker-indicator):hover {
2077
2180
  opacity: 100%;
2078
- }
2079
2181
  }
2080
- }
2182
+ }
2081
2183
  :scope._ao-input-group, :scope ._ao-input-group {
2082
2184
  display: inline-flex;
2083
2185
  width: 100%;
@@ -2148,121 +2250,297 @@
2148
2250
  :scope._ao-input-icon > :where(i, svg):first-child, :scope ._ao-input-icon > :where(i, svg):first-child {
2149
2251
  left: var(--input-icon-inset);
2150
2252
  }
2151
- :scope._ao-input-icon > ._ao-input ~ :where(i, svg), :scope ._ao-input-icon > ._ao-input ~ :where(i, svg) {
2253
+ :scope._ao-input-icon > ._ao-input ~ :where(i, svg, ._ao-input-action), :scope ._ao-input-icon > ._ao-input ~ :where(i, svg, ._ao-input-action) {
2152
2254
  right: var(--input-icon-inset);
2153
2255
  }
2154
2256
  :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
2257
  padding-left: var(--input-icon-pad);
2156
2258
  }
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 {
2259
+ :scope._ao-input-icon:has(> ._ao-input ~ :where(i, svg, ._ao-input-action)) > ._ao-input, :scope ._ao-input-icon:has(> ._ao-input ~ :where(i, svg, ._ao-input-action)) > ._ao-input {
2158
2260
  padding-right: var(--input-icon-pad);
2159
2261
  }
2160
2262
  :scope._ao-input-icon:has(> ._ao-input:disabled) > :where(i, svg), :scope ._ao-input-icon:has(> ._ao-input:disabled) > :where(i, svg) {
2161
2263
  opacity: 50%;
2162
2264
  }
2163
- :scope._ao-textarea, :scope ._ao-textarea {
2164
- display: block;
2165
- min-height: calc(var(--spacing) * 20);
2265
+ :scope._ao-input-action, :scope ._ao-input-action {
2266
+ position: absolute;
2267
+ top: calc(1 / 2 * 100%);
2268
+ display: inline-flex;
2269
+ width: calc(var(--spacing) * 5);
2270
+ height: calc(var(--spacing) * 5);
2271
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
2272
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2273
+ cursor: pointer;
2274
+ align-items: center;
2275
+ justify-content: center;
2276
+ border-radius: 0.25rem;
2277
+ border-style: var(--tw-border-style);
2278
+ border-width: 0px;
2279
+ background-color: transparent;
2280
+ color: var(--color-text-muted);
2281
+ }
2282
+ @media (hover: hover) {
2283
+ :scope._ao-input-action:hover, :scope ._ao-input-action:hover {
2284
+ color: var(--color-text);
2285
+ }
2286
+ }
2287
+ :scope._ao-input-action:focus-visible, :scope ._ao-input-action:focus-visible {
2288
+ outline-style: var(--tw-outline-style);
2289
+ outline-width: 2px;
2290
+ }
2291
+ :scope._ao-input-action:focus-visible, :scope ._ao-input-action:focus-visible {
2292
+ outline-offset: 1px;
2293
+ }
2294
+ :scope._ao-input-action:focus-visible, :scope ._ao-input-action:focus-visible {
2295
+ outline-color: var(--color-focus);
2296
+ }
2297
+ :scope._ao-input-action:hover, :scope ._ao-input-action:hover {
2298
+ background-color: currentColor;
2299
+ }
2300
+ @supports (color: color-mix(in lab, red, red)) {
2301
+ :scope._ao-input-action:hover, :scope ._ao-input-action:hover {
2302
+ background-color: color-mix(in oklab, currentColor 12%, transparent);
2303
+ }
2304
+ }
2305
+ :scope._ao-input-icon:has(> ._ao-input:disabled) > ._ao-input-action, :scope ._ao-input-icon:has(> ._ao-input:disabled) > ._ao-input-action {
2306
+ pointer-events: none;
2307
+ opacity: 50%;
2308
+ }
2309
+ :scope._ao-number-input-root, :scope ._ao-number-input-root {
2310
+ display: contents;
2311
+ }
2312
+ :scope._ao-number-input, :scope ._ao-number-input {
2313
+ display: inline-flex;
2166
2314
  width: 100%;
2167
- resize: vertical;
2315
+ align-items: stretch;
2168
2316
  border-radius: var(--radius-lg);
2169
2317
  border-style: var(--tw-border-style);
2170
2318
  border-width: 1px;
2171
2319
  border-color: var(--color-border);
2172
2320
  background-color: var(--color-surface);
2173
- padding-inline: calc(var(--spacing) * 3);
2174
- padding-block: calc(var(--spacing) * 2);
2175
- font-size: var(--text-sm);
2176
- line-height: var(--tw-leading, var(--text-sm--line-height));
2177
- color: var(--color-text);
2178
2321
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2179
2322
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2180
2323
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2181
2324
  --tw-duration: 150ms;
2182
2325
  transition-duration: 150ms;
2183
- &::placeholder {
2184
- color: var(--color-text-muted);
2185
- }
2186
- &:hover {
2187
- @media (hover: hover) {
2188
- border-color: var(--color-border-strong);
2189
- }
2190
- }
2191
- &:focus-visible {
2326
+ }
2327
+ :scope._ao-number-input:focus-within, :scope ._ao-number-input:focus-within {
2192
2328
  outline-style: var(--tw-outline-style);
2193
2329
  outline-width: 2px;
2194
2330
  }
2195
- &:focus-visible {
2331
+ :scope._ao-number-input:focus-within, :scope ._ao-number-input:focus-within {
2196
2332
  outline-offset: 2px;
2197
2333
  }
2198
- &:focus-visible {
2334
+ :scope._ao-number-input:focus-within, :scope ._ao-number-input:focus-within {
2199
2335
  outline-color: var(--color-focus);
2200
2336
  }
2201
- &:disabled {
2337
+ :scope._ao-number-input:hover, :scope ._ao-number-input:hover {
2338
+ border-color: var(--color-border-strong);
2339
+ }
2340
+ :scope._ao-number-input-field, :scope ._ao-number-input-field {
2341
+ width: 100%;
2342
+ min-width: calc(var(--spacing) * 0);
2343
+ flex: 1;
2344
+ border-style: var(--tw-border-style);
2345
+ border-width: 0px;
2346
+ background-color: transparent;
2347
+ padding-inline: calc(var(--spacing) * 3);
2348
+ padding-block: calc(var(--spacing) * 2);
2349
+ text-align: right;
2350
+ font-size: var(--text-sm);
2351
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2352
+ --tw-leading: 1;
2353
+ line-height: 1;
2354
+ color: var(--color-text);
2355
+ --tw-numeric-spacing: tabular-nums;
2356
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
2357
+ --tw-outline-style: none;
2358
+ outline-style: none;
2359
+ }
2360
+ :scope._ao-number-input-field::placeholder, :scope ._ao-number-input-field::placeholder {
2361
+ color: var(--color-text-muted);
2362
+ }
2363
+ :scope._ao-number-input-field:disabled, :scope ._ao-number-input-field:disabled {
2202
2364
  cursor: not-allowed;
2203
2365
  }
2204
- &:disabled {
2366
+ :scope._ao-number-input-field:disabled, :scope ._ao-number-input-field:disabled {
2205
2367
  opacity: 50%;
2206
2368
  }
2369
+ :scope._ao-number-input-field, :scope ._ao-number-input-field {
2370
+ -moz-appearance: textfield;
2207
2371
  }
2208
- :scope._ao-textarea-ghost, :scope ._ao-textarea-ghost {
2209
- border-color: transparent;
2210
- background-color: transparent;
2211
- &:hover {
2212
- @media (hover: hover) {
2213
- border-color: transparent;
2214
- }
2215
- }
2216
- &:hover {
2217
- @media (hover: hover) {
2218
- background-color: var(--color-surface-muted);
2219
- }
2372
+ :scope._ao-number-input-field::-webkit-inner-spin-button, :scope ._ao-number-input-field::-webkit-inner-spin-button, :scope._ao-number-input-field::-webkit-outer-spin-button, :scope ._ao-number-input-field::-webkit-outer-spin-button {
2373
+ -webkit-appearance: none;
2374
+ margin: 0;
2375
+ }
2376
+ :scope._ao-number-input-step, :scope ._ao-number-input-step {
2377
+ display: inline-flex;
2378
+ width: calc(var(--spacing) * 8);
2379
+ flex-shrink: 0;
2380
+ cursor: pointer;
2381
+ align-items: center;
2382
+ justify-content: center;
2383
+ border-style: var(--tw-border-style);
2384
+ border-width: 0px;
2385
+ background-color: transparent;
2386
+ color: var(--color-text-muted);
2387
+ -webkit-user-select: none;
2388
+ user-select: none;
2389
+ }
2390
+ @media (hover: hover) {
2391
+ :scope._ao-number-input-step:hover, :scope ._ao-number-input-step:hover {
2392
+ background-color: var(--color-surface-muted);
2393
+ }
2394
+ }
2395
+ @media (hover: hover) {
2396
+ :scope._ao-number-input-step:hover, :scope ._ao-number-input-step:hover {
2397
+ color: var(--color-text);
2398
+ }
2399
+ }
2400
+ :scope._ao-number-input-step:disabled, :scope ._ao-number-input-step:disabled {
2401
+ cursor: not-allowed;
2402
+ }
2403
+ :scope._ao-number-input-step:disabled, :scope ._ao-number-input-step:disabled {
2404
+ opacity: 50%;
2405
+ }
2406
+ :scope._ao-number-input-step:first-child, :scope ._ao-number-input-step:first-child {
2407
+ border-top-left-radius: var(--radius-lg);
2408
+ border-bottom-left-radius: var(--radius-lg);
2409
+ border-right-style: var(--tw-border-style);
2410
+ border-right-width: 1px;
2411
+ border-color: var(--color-border);
2412
+ }
2413
+ :scope._ao-number-input-step:last-child, :scope ._ao-number-input-step:last-child {
2414
+ border-top-right-radius: var(--radius-lg);
2415
+ border-bottom-right-radius: var(--radius-lg);
2416
+ border-left-style: var(--tw-border-style);
2417
+ border-left-width: 1px;
2418
+ border-color: var(--color-border);
2419
+ }
2420
+ :scope._ao-number-input-step > :is(i, svg), :scope ._ao-number-input-step > :is(i, svg) {
2421
+ font-size: 0.875rem;
2422
+ }
2423
+ :scope._ao-number-input-sm ._ao-number-input-field, :scope ._ao-number-input-sm ._ao-number-input-field {
2424
+ padding-inline: calc(var(--spacing) * 2.5);
2425
+ padding-block: calc(var(--spacing) * 1.5);
2426
+ font-size: var(--text-xs);
2427
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2428
+ }
2429
+ :scope._ao-number-input-sm ._ao-number-input-step, :scope ._ao-number-input-sm ._ao-number-input-step {
2430
+ width: calc(var(--spacing) * 7);
2431
+ }
2432
+ :scope._ao-number-input-lg ._ao-number-input-field, :scope ._ao-number-input-lg ._ao-number-input-field {
2433
+ padding-inline: calc(var(--spacing) * 4);
2434
+ padding-block: calc(var(--spacing) * 2.5);
2435
+ font-size: var(--text-base);
2436
+ line-height: var(--tw-leading, var(--text-base--line-height));
2437
+ }
2438
+ :scope._ao-number-input-lg ._ao-number-input-step, :scope ._ao-number-input-lg ._ao-number-input-step {
2439
+ width: calc(var(--spacing) * 9);
2440
+ }
2441
+ :scope._ao-textarea, :scope ._ao-textarea {
2442
+ display: block;
2443
+ min-height: calc(var(--spacing) * 20);
2444
+ width: 100%;
2445
+ resize: vertical;
2446
+ border-radius: var(--radius-lg);
2447
+ border-style: var(--tw-border-style);
2448
+ border-width: 1px;
2449
+ border-color: var(--color-border);
2450
+ background-color: var(--color-surface);
2451
+ padding-inline: calc(var(--spacing) * 3);
2452
+ padding-block: calc(var(--spacing) * 2);
2453
+ font-size: var(--text-sm);
2454
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2455
+ color: var(--color-text);
2456
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2457
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2458
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2459
+ --tw-duration: 150ms;
2460
+ transition-duration: 150ms;
2461
+ }
2462
+ :scope._ao-textarea::placeholder, :scope ._ao-textarea::placeholder {
2463
+ color: var(--color-text-muted);
2464
+ }
2465
+ @media (hover: hover) {
2466
+ :scope._ao-textarea:hover, :scope ._ao-textarea:hover {
2467
+ border-color: var(--color-border-strong);
2220
2468
  }
2469
+ }
2470
+ :scope._ao-textarea:focus-visible, :scope ._ao-textarea:focus-visible {
2471
+ outline-style: var(--tw-outline-style);
2472
+ outline-width: 2px;
2473
+ }
2474
+ :scope._ao-textarea:focus-visible, :scope ._ao-textarea:focus-visible {
2475
+ outline-offset: 2px;
2476
+ }
2477
+ :scope._ao-textarea:focus-visible, :scope ._ao-textarea:focus-visible {
2478
+ outline-color: var(--color-focus);
2479
+ }
2480
+ :scope._ao-textarea:disabled, :scope ._ao-textarea:disabled {
2481
+ cursor: not-allowed;
2482
+ }
2483
+ :scope._ao-textarea:disabled, :scope ._ao-textarea:disabled {
2484
+ opacity: 50%;
2485
+ }
2486
+ :scope._ao-textarea-ghost, :scope ._ao-textarea-ghost {
2487
+ border-color: transparent;
2488
+ background-color: transparent;
2221
2489
  }
2490
+ @media (hover: hover) {
2491
+ :scope._ao-textarea-ghost:hover, :scope ._ao-textarea-ghost:hover {
2492
+ border-color: transparent;
2493
+ }
2494
+ }
2495
+ @media (hover: hover) {
2496
+ :scope._ao-textarea-ghost:hover, :scope ._ao-textarea-ghost:hover {
2497
+ background-color: var(--color-surface-muted);
2498
+ }
2499
+ }
2222
2500
  :scope._ao-textarea-danger, :scope ._ao-textarea-danger {
2223
2501
  border-color: var(--color-danger);
2224
- &:hover {
2225
- @media (hover: hover) {
2502
+ }
2503
+ @media (hover: hover) {
2504
+ :scope._ao-textarea-danger:hover, :scope ._ao-textarea-danger:hover {
2226
2505
  border-color: var(--color-danger);
2227
- }
2228
2506
  }
2229
- &:focus-visible {
2507
+ }
2508
+ :scope._ao-textarea-danger:focus-visible, :scope ._ao-textarea-danger:focus-visible {
2230
2509
  outline-color: var(--color-danger);
2231
2510
  }
2232
- }
2233
2511
  :scope._ao-textarea-info, :scope ._ao-textarea-info {
2234
2512
  border-color: var(--color-info);
2235
- &:hover {
2236
- @media (hover: hover) {
2513
+ }
2514
+ @media (hover: hover) {
2515
+ :scope._ao-textarea-info:hover, :scope ._ao-textarea-info:hover {
2237
2516
  border-color: var(--color-info);
2238
- }
2239
2517
  }
2240
- &:focus-visible {
2518
+ }
2519
+ :scope._ao-textarea-info:focus-visible, :scope ._ao-textarea-info:focus-visible {
2241
2520
  outline-color: var(--color-info);
2242
2521
  }
2243
- }
2244
2522
  :scope._ao-textarea-success, :scope ._ao-textarea-success {
2245
2523
  border-color: var(--color-success);
2246
- &:hover {
2247
- @media (hover: hover) {
2524
+ }
2525
+ @media (hover: hover) {
2526
+ :scope._ao-textarea-success:hover, :scope ._ao-textarea-success:hover {
2248
2527
  border-color: var(--color-success);
2249
- }
2250
2528
  }
2251
- &:focus-visible {
2529
+ }
2530
+ :scope._ao-textarea-success:focus-visible, :scope ._ao-textarea-success:focus-visible {
2252
2531
  outline-color: var(--color-success);
2253
2532
  }
2254
- }
2255
2533
  :scope._ao-textarea-warning, :scope ._ao-textarea-warning {
2256
2534
  border-color: var(--color-warning);
2257
- &:hover {
2258
- @media (hover: hover) {
2535
+ }
2536
+ @media (hover: hover) {
2537
+ :scope._ao-textarea-warning:hover, :scope ._ao-textarea-warning:hover {
2259
2538
  border-color: var(--color-warning);
2260
- }
2261
2539
  }
2262
- &:focus-visible {
2540
+ }
2541
+ :scope._ao-textarea-warning:focus-visible, :scope ._ao-textarea-warning:focus-visible {
2263
2542
  outline-color: var(--color-warning);
2264
2543
  }
2265
- }
2266
2544
  :scope._ao-textarea-autosize, :scope ._ao-textarea-autosize {
2267
2545
  field-sizing: content;
2268
2546
  resize: none;
@@ -2298,40 +2576,40 @@
2298
2576
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2299
2577
  --tw-duration: 150ms;
2300
2578
  transition-duration: 150ms;
2301
- &:focus-visible {
2579
+ }
2580
+ :scope._ao-checkbox:focus-visible, :scope ._ao-checkbox:focus-visible {
2302
2581
  outline-style: var(--tw-outline-style);
2303
2582
  outline-width: 2px;
2304
2583
  }
2305
- &:focus-visible {
2584
+ :scope._ao-checkbox:focus-visible, :scope ._ao-checkbox:focus-visible {
2306
2585
  outline-offset: 2px;
2307
2586
  }
2308
- &:focus-visible {
2587
+ :scope._ao-checkbox:focus-visible, :scope ._ao-checkbox:focus-visible {
2309
2588
  outline-color: var(--color-focus);
2310
2589
  }
2311
- &:disabled {
2590
+ :scope._ao-checkbox:disabled, :scope ._ao-checkbox:disabled {
2312
2591
  cursor: not-allowed;
2313
2592
  }
2314
- &:disabled {
2593
+ :scope._ao-checkbox:disabled, :scope ._ao-checkbox:disabled {
2315
2594
  opacity: 50%;
2316
2595
  }
2317
- }
2318
2596
  :scope._ao-checkbox[data-unchecked], :scope ._ao-checkbox[data-unchecked] {
2319
2597
  border-color: var(--color-border-strong);
2320
- &:hover {
2321
- @media (hover: hover) {
2598
+ }
2599
+ @media (hover: hover) {
2600
+ :scope._ao-checkbox[data-unchecked]:hover, :scope ._ao-checkbox[data-unchecked]:hover {
2322
2601
  border-color: var(--color-text-muted);
2323
- }
2324
2602
  }
2325
- }
2603
+ }
2326
2604
  :scope._ao-checkbox[data-checked], :scope ._ao-checkbox[data-checked], :scope._ao-checkbox[data-indeterminate], :scope ._ao-checkbox[data-indeterminate] {
2327
2605
  border-color: var(--color-primary);
2328
2606
  background-color: var(--color-primary);
2329
- &:hover {
2330
- @media (hover: hover) {
2607
+ }
2608
+ @media (hover: hover) {
2609
+ :scope:is(._ao-checkbox[data-checked],._ao-checkbox[data-indeterminate]):hover, :scope :is(._ao-checkbox[data-checked],._ao-checkbox[data-indeterminate]):hover {
2331
2610
  background-color: var(--color-primary-hover);
2332
- }
2333
2611
  }
2334
- }
2612
+ }
2335
2613
  :scope._ao-checkbox[data-disabled], :scope ._ao-checkbox[data-disabled] {
2336
2614
  cursor: not-allowed;
2337
2615
  opacity: 50%;
@@ -2347,22 +2625,24 @@
2347
2625
  :scope input._ao-checkbox {
2348
2626
  appearance: none;
2349
2627
  border-color: var(--color-border-strong);
2350
- &:hover {
2351
- @media (hover: hover) {
2628
+ }
2629
+ @media (hover: hover) {
2630
+ :scope input._ao-checkbox:hover {
2352
2631
  border-color: var(--color-text-muted);
2353
- }
2354
2632
  }
2633
+ }
2634
+ :scope input._ao-checkbox {
2355
2635
  --checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
2356
2636
  }
2357
2637
  :scope input._ao-checkbox:checked, :scope input._ao-checkbox:indeterminate {
2358
2638
  border-color: var(--color-primary);
2359
2639
  background-color: var(--color-primary);
2360
- &:hover {
2361
- @media (hover: hover) {
2640
+ }
2641
+ @media (hover: hover) {
2642
+ :scope:is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover, :scope :is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover {
2362
2643
  background-color: var(--color-primary-hover);
2363
- }
2364
2644
  }
2365
- }
2645
+ }
2366
2646
  :scope input._ao-checkbox:checked::after, :scope input._ao-checkbox:indeterminate::after {
2367
2647
  content: "";
2368
2648
  width: calc(var(--spacing) * 3);
@@ -2400,40 +2680,40 @@
2400
2680
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2401
2681
  --tw-duration: 150ms;
2402
2682
  transition-duration: 150ms;
2403
- &:focus-visible {
2683
+ }
2684
+ :scope._ao-radio:focus-visible, :scope ._ao-radio:focus-visible {
2404
2685
  outline-style: var(--tw-outline-style);
2405
2686
  outline-width: 2px;
2406
2687
  }
2407
- &:focus-visible {
2688
+ :scope._ao-radio:focus-visible, :scope ._ao-radio:focus-visible {
2408
2689
  outline-offset: 2px;
2409
2690
  }
2410
- &:focus-visible {
2691
+ :scope._ao-radio:focus-visible, :scope ._ao-radio:focus-visible {
2411
2692
  outline-color: var(--color-focus);
2412
2693
  }
2413
- &:disabled {
2694
+ :scope._ao-radio:disabled, :scope ._ao-radio:disabled {
2414
2695
  cursor: not-allowed;
2415
2696
  }
2416
- &:disabled {
2697
+ :scope._ao-radio:disabled, :scope ._ao-radio:disabled {
2417
2698
  opacity: 50%;
2418
2699
  }
2419
- }
2420
2700
  :scope._ao-radio[data-unchecked], :scope ._ao-radio[data-unchecked] {
2421
2701
  border-color: var(--color-border-strong);
2422
- &:hover {
2423
- @media (hover: hover) {
2702
+ }
2703
+ @media (hover: hover) {
2704
+ :scope._ao-radio[data-unchecked]:hover, :scope ._ao-radio[data-unchecked]:hover {
2424
2705
  border-color: var(--color-text-muted);
2425
- }
2426
2706
  }
2427
- }
2707
+ }
2428
2708
  :scope._ao-radio[data-checked], :scope ._ao-radio[data-checked] {
2429
2709
  border-color: var(--color-primary);
2430
2710
  background-color: var(--color-primary);
2431
- &:hover {
2432
- @media (hover: hover) {
2711
+ }
2712
+ @media (hover: hover) {
2713
+ :scope._ao-radio[data-checked]:hover, :scope ._ao-radio[data-checked]:hover {
2433
2714
  background-color: var(--color-primary-hover);
2434
- }
2435
2715
  }
2436
- }
2716
+ }
2437
2717
  :scope._ao-radio[data-disabled], :scope ._ao-radio[data-disabled] {
2438
2718
  cursor: not-allowed;
2439
2719
  opacity: 50%;
@@ -2448,21 +2728,21 @@
2448
2728
  :scope input._ao-radio {
2449
2729
  appearance: none;
2450
2730
  border-color: var(--color-border-strong);
2451
- &:hover {
2452
- @media (hover: hover) {
2731
+ }
2732
+ @media (hover: hover) {
2733
+ :scope input._ao-radio:hover {
2453
2734
  border-color: var(--color-text-muted);
2454
- }
2455
2735
  }
2456
- }
2736
+ }
2457
2737
  :scope input._ao-radio:checked {
2458
2738
  border-color: var(--color-primary);
2459
2739
  background-color: var(--color-primary);
2460
- &:hover {
2461
- @media (hover: hover) {
2740
+ }
2741
+ @media (hover: hover) {
2742
+ :scope input._ao-radio:checked:hover {
2462
2743
  background-color: var(--color-primary-hover);
2463
- }
2464
2744
  }
2465
- }
2745
+ }
2466
2746
  :scope input._ao-radio:checked::after {
2467
2747
  content: "";
2468
2748
  width: calc(var(--spacing) * 1.5);
@@ -2510,23 +2790,23 @@
2510
2790
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2511
2791
  --tw-duration: 150ms;
2512
2792
  transition-duration: 150ms;
2513
- &:focus-visible {
2793
+ }
2794
+ :scope._ao-switch:focus-visible, :scope ._ao-switch:focus-visible {
2514
2795
  outline-style: var(--tw-outline-style);
2515
2796
  outline-width: 2px;
2516
2797
  }
2517
- &:focus-visible {
2798
+ :scope._ao-switch:focus-visible, :scope ._ao-switch:focus-visible {
2518
2799
  outline-offset: 2px;
2519
2800
  }
2520
- &:focus-visible {
2801
+ :scope._ao-switch:focus-visible, :scope ._ao-switch:focus-visible {
2521
2802
  outline-color: var(--color-focus);
2522
2803
  }
2523
- &:disabled {
2804
+ :scope._ao-switch:disabled, :scope ._ao-switch:disabled {
2524
2805
  cursor: not-allowed;
2525
2806
  }
2526
- &:disabled {
2807
+ :scope._ao-switch:disabled, :scope ._ao-switch:disabled {
2527
2808
  opacity: 50%;
2528
2809
  }
2529
- }
2530
2810
  :scope._ao-switch[data-unchecked], :scope ._ao-switch[data-unchecked] {
2531
2811
  background-color: var(--color-border-strong);
2532
2812
  }
@@ -2619,28 +2899,28 @@
2619
2899
  transition-duration: 150ms;
2620
2900
  -webkit-user-select: none;
2621
2901
  user-select: none;
2622
- &:hover {
2623
- @media (hover: hover) {
2902
+ }
2903
+ @media (hover: hover) {
2904
+ :scope._ao-select:hover, :scope ._ao-select:hover {
2624
2905
  border-color: var(--color-border-strong);
2625
- }
2626
2906
  }
2627
- &:focus-visible {
2907
+ }
2908
+ :scope._ao-select:focus-visible, :scope ._ao-select:focus-visible {
2628
2909
  outline-style: var(--tw-outline-style);
2629
2910
  outline-width: 2px;
2630
2911
  }
2631
- &:focus-visible {
2912
+ :scope._ao-select:focus-visible, :scope ._ao-select:focus-visible {
2632
2913
  outline-offset: 2px;
2633
2914
  }
2634
- &:focus-visible {
2915
+ :scope._ao-select:focus-visible, :scope ._ao-select:focus-visible {
2635
2916
  outline-color: var(--color-focus);
2636
2917
  }
2637
- &:disabled {
2918
+ :scope._ao-select:disabled, :scope ._ao-select:disabled {
2638
2919
  cursor: not-allowed;
2639
2920
  }
2640
- &:disabled {
2921
+ :scope._ao-select:disabled, :scope ._ao-select:disabled {
2641
2922
  opacity: 50%;
2642
2923
  }
2643
- }
2644
2924
  :scope._ao-select[data-popup-open], :scope ._ao-select[data-popup-open] {
2645
2925
  outline-style: var(--tw-outline-style);
2646
2926
  outline-width: 2px;
@@ -2653,28 +2933,28 @@
2653
2933
  :scope._ao-select-ghost, :scope ._ao-select-ghost {
2654
2934
  border-color: transparent;
2655
2935
  background-color: transparent;
2656
- &:hover {
2657
- @media (hover: hover) {
2936
+ }
2937
+ @media (hover: hover) {
2938
+ :scope._ao-select-ghost:hover, :scope ._ao-select-ghost:hover {
2658
2939
  border-color: transparent;
2659
- }
2660
2940
  }
2661
- &:hover {
2662
- @media (hover: hover) {
2663
- background-color: var(--color-surface-muted);
2664
2941
  }
2942
+ @media (hover: hover) {
2943
+ :scope._ao-select-ghost:hover, :scope ._ao-select-ghost:hover {
2944
+ background-color: var(--color-surface-muted);
2665
2945
  }
2666
- }
2946
+ }
2667
2947
  :scope._ao-select-danger, :scope ._ao-select-danger {
2668
2948
  border-color: var(--color-danger);
2669
- &:hover {
2670
- @media (hover: hover) {
2949
+ }
2950
+ @media (hover: hover) {
2951
+ :scope._ao-select-danger:hover, :scope ._ao-select-danger:hover {
2671
2952
  border-color: var(--color-danger);
2672
- }
2673
2953
  }
2674
- &:focus-visible {
2954
+ }
2955
+ :scope._ao-select-danger:focus-visible, :scope ._ao-select-danger:focus-visible {
2675
2956
  outline-color: var(--color-danger);
2676
2957
  }
2677
- }
2678
2958
  :scope._ao-select-sm, :scope ._ao-select-sm {
2679
2959
  padding-inline: calc(var(--spacing) * 2.5);
2680
2960
  padding-block: calc(var(--spacing) * 1.5);
@@ -2979,6 +3259,44 @@
2979
3259
  line-height: var(--tw-leading, var(--text-sm--line-height));
2980
3260
  color: var(--color-text-muted);
2981
3261
  }
3262
+ :scope._ao-stat-card-trend, :scope ._ao-stat-card-trend {
3263
+ display: inline-flex;
3264
+ align-items: center;
3265
+ gap: calc(var(--spacing) * 1);
3266
+ font-size: var(--text-sm);
3267
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3268
+ --tw-font-weight: var(--font-weight-medium);
3269
+ font-weight: var(--font-weight-medium);
3270
+ color: var(--color-text-muted);
3271
+ --tw-numeric-spacing: tabular-nums;
3272
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3273
+ }
3274
+ :scope._ao-stat-card-trend::before, :scope ._ao-stat-card-trend::before {
3275
+ content: "";
3276
+ width: 0;
3277
+ height: 0;
3278
+ border-inline: 0.3em solid transparent;
3279
+ border-block-end: 0.42em solid currentColor;
3280
+ }
3281
+ :scope._ao-stat-card-trend[data-trend="down"]::before, :scope ._ao-stat-card-trend[data-trend="down"]::before {
3282
+ border-block-end: 0;
3283
+ border-block-start: 0.42em solid currentColor;
3284
+ }
3285
+ :scope._ao-stat-card-trend[data-trend="flat"]::before, :scope ._ao-stat-card-trend[data-trend="flat"]::before {
3286
+ width: 0.55em;
3287
+ border-inline: 0;
3288
+ border-block-end: 0;
3289
+ border-block-start: 0.16em solid currentColor;
3290
+ }
3291
+ :scope._ao-stat-card-trend[data-intent="positive"], :scope ._ao-stat-card-trend[data-intent="positive"] {
3292
+ color: var(--color-success);
3293
+ }
3294
+ :scope._ao-stat-card-trend[data-intent="negative"], :scope ._ao-stat-card-trend[data-intent="negative"] {
3295
+ color: var(--color-danger);
3296
+ }
3297
+ :scope._ao-stat-card-trend[data-intent="neutral"], :scope ._ao-stat-card-trend[data-intent="neutral"] {
3298
+ color: var(--color-text-muted);
3299
+ }
2982
3300
  :scope._ao-card-compact._ao-stat-card, :scope ._ao-card-compact._ao-stat-card {
2983
3301
  gap: calc(var(--spacing) * 0.5);
2984
3302
  padding: calc(var(--spacing) * 3);
@@ -2995,6 +3313,234 @@
2995
3313
  :scope._ao-card-danger ._ao-stat-card-value, :scope ._ao-card-danger ._ao-stat-card-value {
2996
3314
  color: var(--color-danger);
2997
3315
  }
3316
+ :scope._ao-item, :scope ._ao-item {
3317
+ display: flex;
3318
+ width: 100%;
3319
+ align-items: center;
3320
+ gap: calc(var(--spacing) * 3);
3321
+ padding-inline: calc(var(--spacing) * 3);
3322
+ padding-block: calc(var(--spacing) * 2);
3323
+ font-size: var(--text-sm);
3324
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3325
+ color: var(--color-text);
3326
+ }
3327
+ :scope._ao-item-media, :scope ._ao-item-media {
3328
+ display: flex;
3329
+ flex-shrink: 0;
3330
+ align-items: center;
3331
+ color: var(--color-text-muted);
3332
+ }
3333
+ :scope._ao-item-media > :is(i, svg), :scope ._ao-item-media > :is(i, svg) {
3334
+ font-size: 1.25rem;
3335
+ }
3336
+ :scope._ao-item-content, :scope ._ao-item-content {
3337
+ display: flex;
3338
+ min-width: calc(var(--spacing) * 0);
3339
+ flex: 1;
3340
+ flex-direction: column;
3341
+ gap: calc(var(--spacing) * 0.5);
3342
+ }
3343
+ :scope._ao-item-title, :scope ._ao-item-title {
3344
+ --tw-leading: var(--leading-tight);
3345
+ line-height: var(--leading-tight);
3346
+ --tw-font-weight: var(--font-weight-medium);
3347
+ font-weight: var(--font-weight-medium);
3348
+ overflow-wrap: break-word;
3349
+ }
3350
+ :scope._ao-item-description, :scope ._ao-item-description {
3351
+ --tw-leading: var(--leading-snug);
3352
+ line-height: var(--leading-snug);
3353
+ color: var(--color-text-muted);
3354
+ text-wrap: pretty;
3355
+ }
3356
+ :scope._ao-item-actions, :scope ._ao-item-actions {
3357
+ position: relative;
3358
+ z-index: 1;
3359
+ display: flex;
3360
+ flex-shrink: 0;
3361
+ align-items: center;
3362
+ gap: calc(var(--spacing) * 2);
3363
+ margin-inline-start: auto;
3364
+ }
3365
+ :scope._ao-item-outline, :scope ._ao-item-outline {
3366
+ border-radius: var(--radius-lg);
3367
+ border-style: var(--tw-border-style);
3368
+ border-width: 1px;
3369
+ border-color: var(--color-border);
3370
+ }
3371
+ :scope._ao-item-muted, :scope ._ao-item-muted {
3372
+ border-radius: var(--radius-lg);
3373
+ background-color: var(--color-surface-muted);
3374
+ }
3375
+ :scope._ao-item-sm, :scope ._ao-item-sm {
3376
+ gap: calc(var(--spacing) * 2);
3377
+ padding-inline: calc(var(--spacing) * 2);
3378
+ padding-block: calc(var(--spacing) * 1.5);
3379
+ font-size: var(--text-xs);
3380
+ line-height: var(--tw-leading, var(--text-xs--line-height));
3381
+ }
3382
+ :scope._ao-item-lg, :scope ._ao-item-lg {
3383
+ gap: calc(var(--spacing) * 4);
3384
+ padding-inline: calc(var(--spacing) * 4);
3385
+ padding-block: calc(var(--spacing) * 3);
3386
+ font-size: var(--text-base);
3387
+ line-height: var(--tw-leading, var(--text-base--line-height));
3388
+ }
3389
+ :scope._ao-item-group, :scope ._ao-item-group {
3390
+ display: flex;
3391
+ flex-direction: column;
3392
+ }
3393
+ :scope._ao-item-group > ._ao-item:not(:last-child), :scope ._ao-item-group > ._ao-item:not(:last-child) {
3394
+ border-bottom-style: var(--tw-border-style);
3395
+ border-bottom-width: 1px;
3396
+ border-color: var(--color-border);
3397
+ }
3398
+ :scope._ao-item-group-bordered, :scope ._ao-item-group-bordered {
3399
+ overflow: hidden;
3400
+ border-radius: var(--radius-lg);
3401
+ border-style: var(--tw-border-style);
3402
+ border-width: 1px;
3403
+ border-color: var(--color-border);
3404
+ }
3405
+ :scope._ao-item-link, :scope ._ao-item-link {
3406
+ position: relative;
3407
+ cursor: pointer;
3408
+ }
3409
+ :scope._ao-item-link:hover, :scope ._ao-item-link:hover {
3410
+ background-color: var(--color-surface-muted);
3411
+ }
3412
+ :scope._ao-item-link a:first-of-type::after, :scope ._ao-item-link a:first-of-type::after {
3413
+ content: "";
3414
+ position: absolute;
3415
+ inset: calc(var(--spacing) * 0);
3416
+ }
3417
+ :scope._ao-item-link:focus-within, :scope ._ao-item-link:focus-within {
3418
+ outline-style: var(--tw-outline-style);
3419
+ outline-width: 2px;
3420
+ outline-offset: calc(2px * -1);
3421
+ outline-color: var(--color-focus);
3422
+ }
3423
+ :scope._ao-timeline, :scope ._ao-timeline {
3424
+ list-style: none;
3425
+ margin: 0;
3426
+ padding: 0;
3427
+ }
3428
+ :scope._ao-timeline-item, :scope ._ao-timeline-item {
3429
+ display: grid;
3430
+ grid-template-columns: 1.5rem 1fr;
3431
+ column-gap: 0.75rem;
3432
+ padding-bottom: 1rem;
3433
+ position: relative;
3434
+ }
3435
+ :scope._ao-timeline-item:last-child, :scope ._ao-timeline-item:last-child {
3436
+ padding-bottom: 0;
3437
+ }
3438
+ :scope._ao-timeline-item:not(:last-child)::before, :scope ._ao-timeline-item:not(:last-child)::before {
3439
+ content: "";
3440
+ position: absolute;
3441
+ inset-block: 0.75rem 0;
3442
+ inset-inline-start: 0.75rem;
3443
+ width: 2px;
3444
+ transform: translateX(-50%);
3445
+ background-color: var(--color-border);
3446
+ }
3447
+ :scope._ao-timeline-indicator, :scope ._ao-timeline-indicator {
3448
+ grid-column: 1;
3449
+ align-self: start;
3450
+ display: flex;
3451
+ align-items: center;
3452
+ justify-content: center;
3453
+ height: 1.5rem;
3454
+ position: relative;
3455
+ z-index: 1;
3456
+ }
3457
+ :scope._ao-timeline-dot, :scope ._ao-timeline-dot {
3458
+ display: inline-block;
3459
+ width: 0.625rem;
3460
+ height: 0.625rem;
3461
+ border-radius: 9999px;
3462
+ background-color: var(--color-border-strong);
3463
+ box-shadow: 0 0 0 3px var(--color-surface);
3464
+ }
3465
+ :scope._ao-timeline-indicator > :is(i, svg), :scope ._ao-timeline-indicator > :is(i, svg) {
3466
+ font-size: 1rem;
3467
+ color: var(--color-text-muted);
3468
+ background-color: var(--color-surface);
3469
+ border-radius: 9999px;
3470
+ }
3471
+ :scope._ao-timeline-content, :scope ._ao-timeline-content {
3472
+ grid-column: 2;
3473
+ display: flex;
3474
+ flex-direction: column;
3475
+ gap: 0.125rem;
3476
+ min-width: 0;
3477
+ padding-block: 0.125rem 0;
3478
+ }
3479
+ :scope._ao-timeline-title, :scope ._ao-timeline-title {
3480
+ font-size: var(--text-sm);
3481
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3482
+ --tw-leading: var(--leading-tight);
3483
+ line-height: var(--leading-tight);
3484
+ --tw-font-weight: var(--font-weight-medium);
3485
+ font-weight: var(--font-weight-medium);
3486
+ color: var(--color-text);
3487
+ }
3488
+ :scope._ao-timeline-time, :scope ._ao-timeline-time {
3489
+ font-size: var(--text-xs);
3490
+ line-height: var(--tw-leading, var(--text-xs--line-height));
3491
+ color: var(--color-text-muted);
3492
+ --tw-numeric-spacing: tabular-nums;
3493
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3494
+ }
3495
+ :scope._ao-timeline-description, :scope ._ao-timeline-description {
3496
+ font-size: var(--text-sm);
3497
+ line-height: var(--tw-leading, var(--text-sm--line-height));
3498
+ color: var(--color-text-muted);
3499
+ text-wrap: pretty;
3500
+ }
3501
+ :scope._ao-timeline-item-info ._ao-timeline-dot, :scope ._ao-timeline-item-info ._ao-timeline-dot {
3502
+ background-color: var(--color-info);
3503
+ }
3504
+ :scope._ao-timeline-item-success ._ao-timeline-dot, :scope ._ao-timeline-item-success ._ao-timeline-dot {
3505
+ background-color: var(--color-success);
3506
+ }
3507
+ :scope._ao-timeline-item-warning ._ao-timeline-dot, :scope ._ao-timeline-item-warning ._ao-timeline-dot {
3508
+ background-color: var(--color-warning);
3509
+ }
3510
+ :scope._ao-timeline-item-danger ._ao-timeline-dot, :scope ._ao-timeline-item-danger ._ao-timeline-dot {
3511
+ background-color: var(--color-danger);
3512
+ }
3513
+ :scope._ao-timeline-numbered ._ao-timeline-item, :scope ._ao-timeline-numbered ._ao-timeline-item {
3514
+ grid-template-columns: 1.75rem 1fr;
3515
+ }
3516
+ :scope._ao-timeline-numbered ._ao-timeline-item:not(:last-child)::before, :scope ._ao-timeline-numbered ._ao-timeline-item:not(:last-child)::before {
3517
+ inset-inline-start: 0.875rem;
3518
+ inset-block: 1.75rem 0;
3519
+ }
3520
+ :scope._ao-timeline-numbered ._ao-timeline-indicator, :scope ._ao-timeline-numbered ._ao-timeline-indicator {
3521
+ height: 1.75rem;
3522
+ }
3523
+ :scope._ao-timeline-marker, :scope ._ao-timeline-marker {
3524
+ display: inline-flex;
3525
+ width: calc(var(--spacing) * 7);
3526
+ height: calc(var(--spacing) * 7);
3527
+ align-items: center;
3528
+ justify-content: center;
3529
+ border-radius: calc(infinity * 1px);
3530
+ background-color: var(--color-surface-strong);
3531
+ font-size: var(--text-xs);
3532
+ line-height: var(--tw-leading, var(--text-xs--line-height));
3533
+ --tw-font-weight: var(--font-weight-semibold);
3534
+ font-weight: var(--font-weight-semibold);
3535
+ color: var(--color-text-muted);
3536
+ --tw-numeric-spacing: tabular-nums;
3537
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3538
+ box-shadow: 0 0 0 3px var(--color-surface);
3539
+ }
3540
+ :scope._ao-timeline-item-success ._ao-timeline-marker, :scope ._ao-timeline-item-success ._ao-timeline-marker, :scope._ao-timeline-item-current ._ao-timeline-marker, :scope ._ao-timeline-item-current ._ao-timeline-marker {
3541
+ background-color: var(--color-primary);
3542
+ color: var(--color-primary-content);
3543
+ }
2998
3544
  :scope._ao-dialog, :scope ._ao-dialog {
2999
3545
  margin: auto;
3000
3546
  flex-direction: column;
@@ -3114,26 +3660,89 @@
3114
3660
  transition-duration: var(--tw-duration, var(--default-transition-duration));
3115
3661
  --tw-duration: 150ms;
3116
3662
  transition-duration: 150ms;
3117
- &:hover {
3118
- @media (hover: hover) {
3663
+ }
3664
+ @media (hover: hover) {
3665
+ :scope._ao-dialog-close:hover, :scope ._ao-dialog-close:hover {
3119
3666
  background-color: var(--color-surface-strong);
3120
- }
3121
3667
  }
3122
- &:hover {
3123
- @media (hover: hover) {
3124
- color: var(--color-text);
3125
3668
  }
3669
+ @media (hover: hover) {
3670
+ :scope._ao-dialog-close:hover, :scope ._ao-dialog-close:hover {
3671
+ color: var(--color-text);
3126
3672
  }
3127
- &:focus-visible {
3673
+ }
3674
+ :scope._ao-dialog-close:focus-visible, :scope ._ao-dialog-close:focus-visible {
3128
3675
  outline-style: var(--tw-outline-style);
3129
3676
  outline-width: 2px;
3130
3677
  }
3131
- &:focus-visible {
3678
+ :scope._ao-dialog-close:focus-visible, :scope ._ao-dialog-close:focus-visible {
3132
3679
  outline-offset: 2px;
3133
3680
  }
3134
- &:focus-visible {
3681
+ :scope._ao-dialog-close:focus-visible, :scope ._ao-dialog-close:focus-visible {
3135
3682
  outline-color: var(--color-focus);
3136
3683
  }
3684
+ :scope._ao-drawer, :scope ._ao-drawer {
3685
+ margin: 0;
3686
+ max-width: none;
3687
+ max-height: none;
3688
+ border-radius: 0;
3689
+ height: 100dvh;
3690
+ width: min(28rem, 100vw);
3691
+ margin-inline-start: auto;
3692
+ transform: translateX(100%);
3693
+ }
3694
+ :scope._ao-drawer[open], :scope ._ao-drawer[open] {
3695
+ transform: translateX(0);
3696
+ }
3697
+ @starting-style {
3698
+ :scope._ao-drawer[open], :scope ._ao-drawer[open] {
3699
+ transform: translateX(100%);
3700
+ }
3701
+ }
3702
+ :scope._ao-drawer-start, :scope ._ao-drawer-start {
3703
+ margin-inline-start: 0;
3704
+ margin-inline-end: auto;
3705
+ transform: translateX(-100%);
3706
+ }
3707
+ @starting-style {
3708
+ :scope._ao-drawer-start[open], :scope ._ao-drawer-start[open] {
3709
+ transform: translateX(-100%);
3710
+ }
3711
+ }
3712
+ :scope._ao-drawer-bottom, :scope ._ao-drawer-bottom {
3713
+ width: 100vw;
3714
+ height: auto;
3715
+ max-height: 85dvh;
3716
+ margin-block-start: auto;
3717
+ margin-inline: 0;
3718
+ transform: translateY(100%);
3719
+ }
3720
+ :scope._ao-drawer-bottom[open], :scope ._ao-drawer-bottom[open] {
3721
+ transform: translateY(0);
3722
+ }
3723
+ @starting-style {
3724
+ :scope._ao-drawer-bottom[open], :scope ._ao-drawer-bottom[open] {
3725
+ transform: translateY(100%);
3726
+ }
3727
+ }
3728
+ :scope._ao-drawer-sm, :scope ._ao-drawer-sm {
3729
+ width: min(20rem, 100vw);
3730
+ }
3731
+ :scope._ao-drawer-lg, :scope ._ao-drawer-lg {
3732
+ width: min(36rem, 100vw);
3733
+ }
3734
+ :scope._ao-drawer-bottom._ao-drawer-sm, :scope ._ao-drawer-bottom._ao-drawer-sm {
3735
+ width: 100vw;
3736
+ max-height: 50dvh;
3737
+ }
3738
+ :scope._ao-drawer-bottom._ao-drawer-lg, :scope ._ao-drawer-bottom._ao-drawer-lg {
3739
+ width: 100vw;
3740
+ max-height: 95dvh;
3741
+ }
3742
+ @media (prefers-reduced-motion: reduce) {
3743
+ :scope._ao-drawer, :scope ._ao-drawer {
3744
+ transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out;
3745
+ }
3137
3746
  }
3138
3747
  :scope._ao-field, :scope ._ao-field {
3139
3748
  display: flex;
@@ -3208,135 +3817,133 @@
3208
3817
  transition-duration: var(--tw-duration, var(--default-transition-duration));
3209
3818
  --tw-duration: 150ms;
3210
3819
  transition-duration: 150ms;
3211
- &::file-selector-button {
3820
+ }
3821
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3212
3822
  margin-right: calc(var(--spacing) * 3);
3213
3823
  }
3214
- &::file-selector-button {
3824
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3215
3825
  cursor: pointer;
3216
3826
  }
3217
- &::file-selector-button {
3827
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3218
3828
  border-style: var(--tw-border-style);
3219
3829
  border-width: 0px;
3220
3830
  }
3221
- &::file-selector-button {
3831
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3222
3832
  border-right-style: var(--tw-border-style);
3223
3833
  border-right-width: 1px;
3224
3834
  }
3225
- &::file-selector-button {
3835
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3226
3836
  border-color: var(--color-border);
3227
3837
  }
3228
- &::file-selector-button {
3838
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3229
3839
  background-color: var(--color-surface-muted);
3230
3840
  }
3231
- &::file-selector-button {
3841
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3232
3842
  padding-inline: calc(var(--spacing) * 3);
3233
3843
  }
3234
- &::file-selector-button {
3844
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3235
3845
  padding-block: calc(var(--spacing) * 2);
3236
3846
  }
3237
- &::file-selector-button {
3847
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3238
3848
  font-size: var(--text-sm);
3239
3849
  line-height: var(--tw-leading, var(--text-sm--line-height));
3240
3850
  }
3241
- &::file-selector-button {
3851
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3242
3852
  --tw-leading: 1;
3243
3853
  line-height: 1;
3244
3854
  }
3245
- &::file-selector-button {
3855
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3246
3856
  --tw-font-weight: var(--font-weight-medium);
3247
3857
  font-weight: var(--font-weight-medium);
3248
3858
  }
3249
- &::file-selector-button {
3859
+ :scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
3250
3860
  color: var(--color-text);
3251
3861
  }
3252
- &:hover {
3253
- @media (hover: hover) {
3862
+ @media (hover: hover) {
3863
+ :scope._ao-file-input:hover, :scope ._ao-file-input:hover {
3254
3864
  border-color: var(--color-border-strong);
3255
- }
3256
3865
  }
3257
- &:hover {
3258
- @media (hover: hover) {
3259
- &::file-selector-button {
3866
+ }
3867
+ @media (hover: hover) {
3868
+ :scope._ao-file-input:hover::file-selector-button, :scope ._ao-file-input:hover::file-selector-button {
3260
3869
  background-color: var(--color-surface-strong);
3261
3870
  }
3262
3871
  }
3263
- }
3264
- &:focus-visible {
3872
+ :scope._ao-file-input:focus-visible, :scope ._ao-file-input:focus-visible {
3265
3873
  outline-style: var(--tw-outline-style);
3266
3874
  outline-width: 2px;
3267
3875
  }
3268
- &:focus-visible {
3876
+ :scope._ao-file-input:focus-visible, :scope ._ao-file-input:focus-visible {
3269
3877
  outline-offset: 2px;
3270
3878
  }
3271
- &:focus-visible {
3879
+ :scope._ao-file-input:focus-visible, :scope ._ao-file-input:focus-visible {
3272
3880
  outline-color: var(--color-focus);
3273
3881
  }
3274
- &:disabled {
3882
+ :scope._ao-file-input:disabled, :scope ._ao-file-input:disabled {
3275
3883
  cursor: not-allowed;
3276
3884
  }
3277
- &:disabled {
3885
+ :scope._ao-file-input:disabled, :scope ._ao-file-input:disabled {
3278
3886
  opacity: 50%;
3279
3887
  }
3280
- }
3281
3888
  :scope._ao-file-input-ghost, :scope ._ao-file-input-ghost {
3282
3889
  border-color: transparent;
3283
3890
  background-color: transparent;
3284
- &:hover {
3285
- @media (hover: hover) {
3891
+ }
3892
+ @media (hover: hover) {
3893
+ :scope._ao-file-input-ghost:hover, :scope ._ao-file-input-ghost:hover {
3286
3894
  border-color: transparent;
3287
- }
3288
3895
  }
3289
- &:hover {
3290
- @media (hover: hover) {
3291
- background-color: var(--color-surface-muted);
3292
3896
  }
3897
+ @media (hover: hover) {
3898
+ :scope._ao-file-input-ghost:hover, :scope ._ao-file-input-ghost:hover {
3899
+ background-color: var(--color-surface-muted);
3293
3900
  }
3294
- }
3901
+ }
3295
3902
  :scope._ao-file-input-danger, :scope ._ao-file-input-danger {
3296
3903
  border-color: var(--color-danger);
3297
- &:hover {
3298
- @media (hover: hover) {
3904
+ }
3905
+ @media (hover: hover) {
3906
+ :scope._ao-file-input-danger:hover, :scope ._ao-file-input-danger:hover {
3299
3907
  border-color: var(--color-danger);
3300
- }
3301
3908
  }
3302
- &:focus-visible {
3909
+ }
3910
+ :scope._ao-file-input-danger:focus-visible, :scope ._ao-file-input-danger:focus-visible {
3303
3911
  outline-color: var(--color-danger);
3304
3912
  }
3305
- }
3306
3913
  :scope._ao-file-input-sm, :scope ._ao-file-input-sm {
3307
3914
  font-size: var(--text-xs);
3308
3915
  line-height: var(--tw-leading, var(--text-xs--line-height));
3309
- &::file-selector-button {
3916
+ }
3917
+ :scope._ao-file-input-sm::file-selector-button, :scope ._ao-file-input-sm::file-selector-button {
3310
3918
  margin-right: calc(var(--spacing) * 2.5);
3311
3919
  }
3312
- &::file-selector-button {
3920
+ :scope._ao-file-input-sm::file-selector-button, :scope ._ao-file-input-sm::file-selector-button {
3313
3921
  padding-inline: calc(var(--spacing) * 2.5);
3314
3922
  }
3315
- &::file-selector-button {
3923
+ :scope._ao-file-input-sm::file-selector-button, :scope ._ao-file-input-sm::file-selector-button {
3316
3924
  padding-block: calc(var(--spacing) * 1.5);
3317
3925
  }
3318
- &::file-selector-button {
3926
+ :scope._ao-file-input-sm::file-selector-button, :scope ._ao-file-input-sm::file-selector-button {
3319
3927
  font-size: var(--text-xs);
3320
3928
  line-height: var(--tw-leading, var(--text-xs--line-height));
3321
3929
  }
3322
- }
3323
3930
  :scope._ao-file-input-lg, :scope ._ao-file-input-lg {
3324
3931
  font-size: var(--text-base);
3325
3932
  line-height: var(--tw-leading, var(--text-base--line-height));
3326
- &::file-selector-button {
3933
+ }
3934
+ :scope._ao-file-input-lg::file-selector-button, :scope ._ao-file-input-lg::file-selector-button {
3327
3935
  margin-right: calc(var(--spacing) * 4);
3328
3936
  }
3329
- &::file-selector-button {
3937
+ :scope._ao-file-input-lg::file-selector-button, :scope ._ao-file-input-lg::file-selector-button {
3330
3938
  padding-inline: calc(var(--spacing) * 4);
3331
3939
  }
3332
- &::file-selector-button {
3940
+ :scope._ao-file-input-lg::file-selector-button, :scope ._ao-file-input-lg::file-selector-button {
3333
3941
  padding-block: calc(var(--spacing) * 2.5);
3334
3942
  }
3335
- &::file-selector-button {
3943
+ :scope._ao-file-input-lg::file-selector-button, :scope ._ao-file-input-lg::file-selector-button {
3336
3944
  font-size: var(--text-base);
3337
3945
  line-height: var(--tw-leading, var(--text-base--line-height));
3338
3946
  }
3339
- }
3340
3947
  :scope._ao-footer, :scope ._ao-footer {
3341
3948
  display: flex;
3342
3949
  flex-wrap: wrap;
@@ -3363,27 +3970,27 @@
3363
3970
  border-radius: var(--radius-sm);
3364
3971
  color: var(--color-text-muted);
3365
3972
  text-decoration-line: none;
3366
- &:hover {
3367
- @media (hover: hover) {
3973
+ }
3974
+ @media (hover: hover) {
3975
+ :scope._ao-footer-link:hover, :scope ._ao-footer-link:hover {
3368
3976
  color: var(--color-text);
3369
- }
3370
3977
  }
3371
- &:hover {
3372
- @media (hover: hover) {
3373
- text-decoration-line: underline;
3374
3978
  }
3979
+ @media (hover: hover) {
3980
+ :scope._ao-footer-link:hover, :scope ._ao-footer-link:hover {
3981
+ text-decoration-line: underline;
3375
3982
  }
3376
- &:focus-visible {
3983
+ }
3984
+ :scope._ao-footer-link:focus-visible, :scope ._ao-footer-link:focus-visible {
3377
3985
  outline-style: var(--tw-outline-style);
3378
3986
  outline-width: 2px;
3379
3987
  }
3380
- &:focus-visible {
3988
+ :scope._ao-footer-link:focus-visible, :scope ._ao-footer-link:focus-visible {
3381
3989
  outline-offset: 2px;
3382
3990
  }
3383
- &:focus-visible {
3991
+ :scope._ao-footer-link:focus-visible, :scope ._ao-footer-link:focus-visible {
3384
3992
  outline-color: var(--color-focus);
3385
3993
  }
3386
- }
3387
3994
  :scope._ao-footer-meta, :scope ._ao-footer-meta {
3388
3995
  color: var(--color-text-muted);
3389
3996
  }
@@ -3403,16 +4010,18 @@
3403
4010
  transition-duration: 150ms;
3404
4011
  -webkit-user-select: none;
3405
4012
  user-select: none;
3406
- &:focus-visible {
4013
+ }
4014
+ :scope._ao-menu-trigger:focus-visible, :scope ._ao-menu-trigger:focus-visible {
3407
4015
  outline-style: var(--tw-outline-style);
3408
4016
  outline-width: 2px;
3409
4017
  }
3410
- &:focus-visible {
4018
+ :scope._ao-menu-trigger:focus-visible, :scope ._ao-menu-trigger:focus-visible {
3411
4019
  outline-offset: 2px;
3412
4020
  }
3413
- &:focus-visible {
4021
+ :scope._ao-menu-trigger:focus-visible, :scope ._ao-menu-trigger:focus-visible {
3414
4022
  outline-color: var(--color-focus);
3415
4023
  }
4024
+ :scope._ao-menu-trigger, :scope ._ao-menu-trigger {
3416
4025
  list-style: none;
3417
4026
  }
3418
4027
  :scope._ao-menu-trigger::-webkit-details-marker, :scope ._ao-menu-trigger::-webkit-details-marker {
@@ -3428,12 +4037,12 @@
3428
4037
  --tw-leading: 1;
3429
4038
  line-height: 1;
3430
4039
  color: var(--color-text);
3431
- &:hover {
3432
- @media (hover: hover) {
4040
+ }
4041
+ @media (hover: hover) {
4042
+ :scope._ao-menu-trigger:not(._ao-btn):hover, :scope ._ao-menu-trigger:not(._ao-btn):hover {
3433
4043
  background-color: var(--color-surface-strong);
3434
- }
3435
4044
  }
3436
- }
4045
+ }
3437
4046
  :scope._ao-menu-trigger::after, :scope ._ao-menu-trigger::after {
3438
4047
  content: "";
3439
4048
  width: 0.5em;
@@ -3510,24 +4119,26 @@
3510
4119
  text-decoration-line: none;
3511
4120
  -webkit-user-select: none;
3512
4121
  user-select: none;
3513
- &:hover {
3514
- @media (hover: hover) {
4122
+ }
4123
+ @media (hover: hover) {
4124
+ :scope._ao-menu-item:hover, :scope ._ao-menu-item:hover {
3515
4125
  background-color: var(--color-surface-muted);
3516
- }
3517
4126
  }
3518
- &:focus-visible {
4127
+ }
4128
+ :scope._ao-menu-item:focus-visible, :scope ._ao-menu-item:focus-visible {
3519
4129
  background-color: var(--color-surface-muted);
3520
4130
  }
3521
- &:focus-visible {
4131
+ :scope._ao-menu-item:focus-visible, :scope ._ao-menu-item:focus-visible {
3522
4132
  --tw-outline-style: none;
3523
4133
  outline-style: none;
3524
4134
  }
3525
- &:disabled {
4135
+ :scope._ao-menu-item:disabled, :scope ._ao-menu-item:disabled {
3526
4136
  cursor: not-allowed;
3527
4137
  }
3528
- &:disabled {
4138
+ :scope._ao-menu-item:disabled, :scope ._ao-menu-item:disabled {
3529
4139
  opacity: 50%;
3530
4140
  }
4141
+ :scope._ao-menu-item, :scope ._ao-menu-item {
3531
4142
  overflow-wrap: break-word;
3532
4143
  min-width: 0;
3533
4144
  }
@@ -3538,6 +4149,20 @@
3538
4149
  :scope._ao-menu-trigger > :is(i, svg), :scope ._ao-menu-trigger > :is(i, svg), :scope._ao-menu-item > :is(i, svg), :scope ._ao-menu-item > :is(i, svg) {
3539
4150
  flex-shrink: 0;
3540
4151
  }
4152
+ :scope._ao-menu-item-indicator, :scope ._ao-menu-item-indicator {
4153
+ display: inline-flex;
4154
+ flex-shrink: 0;
4155
+ align-items: center;
4156
+ justify-content: center;
4157
+ inline-size: 1rem;
4158
+ block-size: 1rem;
4159
+ }
4160
+ :scope._ao-menu-item-indicator > :is(i, svg), :scope ._ao-menu-item-indicator > :is(i, svg) {
4161
+ opacity: 0;
4162
+ }
4163
+ :scope._ao-menu-item[aria-checked="true"] ._ao-menu-item-indicator > :is(i, svg), :scope ._ao-menu-item[aria-checked="true"] ._ao-menu-item-indicator > :is(i, svg) {
4164
+ opacity: 1;
4165
+ }
3541
4166
  :scope._ao-menu-separator, :scope ._ao-menu-separator {
3542
4167
  margin-block: calc(var(--spacing) * 1);
3543
4168
  height: 1px;
@@ -3609,22 +4234,22 @@
3609
4234
  transition-duration: 150ms;
3610
4235
  -webkit-user-select: none;
3611
4236
  user-select: none;
3612
- &:hover {
3613
- @media (hover: hover) {
4237
+ }
4238
+ @media (hover: hover) {
4239
+ :scope._ao-navbar-item:hover, :scope ._ao-navbar-item:hover {
3614
4240
  background-color: var(--color-surface-strong);
3615
- }
3616
4241
  }
3617
- &:focus-visible {
4242
+ }
4243
+ :scope._ao-navbar-item:focus-visible, :scope ._ao-navbar-item:focus-visible {
3618
4244
  outline-style: var(--tw-outline-style);
3619
4245
  outline-width: 2px;
3620
4246
  }
3621
- &:focus-visible {
4247
+ :scope._ao-navbar-item:focus-visible, :scope ._ao-navbar-item:focus-visible {
3622
4248
  outline-offset: 2px;
3623
4249
  }
3624
- &:focus-visible {
4250
+ :scope._ao-navbar-item:focus-visible, :scope ._ao-navbar-item:focus-visible {
3625
4251
  outline-color: var(--color-focus);
3626
4252
  }
3627
- }
3628
4253
  :scope._ao-navbar-item[aria-current="page"], :scope ._ao-navbar-item[aria-current="page"], :scope._ao-navbar-item[data-active], :scope ._ao-navbar-item[data-active] {
3629
4254
  background-color: var(--color-primary-muted);
3630
4255
  color: var(--color-primary);
@@ -3649,22 +4274,22 @@
3649
4274
  border-radius: var(--radius-md);
3650
4275
  background-color: transparent;
3651
4276
  color: var(--color-text);
3652
- &:hover {
3653
- @media (hover: hover) {
4277
+ }
4278
+ @media (hover: hover) {
4279
+ :scope._ao-navbar-mobile-toggle:hover, :scope ._ao-navbar-mobile-toggle:hover {
3654
4280
  background-color: var(--color-surface-strong);
3655
- }
3656
4281
  }
3657
- &:focus-visible {
4282
+ }
4283
+ :scope._ao-navbar-mobile-toggle:focus-visible, :scope ._ao-navbar-mobile-toggle:focus-visible {
3658
4284
  outline-style: var(--tw-outline-style);
3659
4285
  outline-width: 2px;
3660
4286
  }
3661
- &:focus-visible {
4287
+ :scope._ao-navbar-mobile-toggle:focus-visible, :scope ._ao-navbar-mobile-toggle:focus-visible {
3662
4288
  outline-offset: 2px;
3663
4289
  }
3664
- &:focus-visible {
4290
+ :scope._ao-navbar-mobile-toggle:focus-visible, :scope ._ao-navbar-mobile-toggle:focus-visible {
3665
4291
  outline-color: var(--color-focus);
3666
4292
  }
3667
- }
3668
4293
  :scope._ao-navbar-mobile-toggle::before, :scope ._ao-navbar-mobile-toggle::before {
3669
4294
  content: "";
3670
4295
  display: block;
@@ -3772,22 +4397,22 @@
3772
4397
  transition-duration: 150ms;
3773
4398
  -webkit-user-select: none;
3774
4399
  user-select: none;
3775
- &:hover {
3776
- @media (hover: hover) {
4400
+ }
4401
+ @media (hover: hover) {
4402
+ :scope._ao-sidebar-item:hover, :scope ._ao-sidebar-item:hover {
3777
4403
  background-color: var(--color-surface-strong);
3778
- }
3779
4404
  }
3780
- &:focus-visible {
4405
+ }
4406
+ :scope._ao-sidebar-item:focus-visible, :scope ._ao-sidebar-item:focus-visible {
3781
4407
  outline-style: var(--tw-outline-style);
3782
4408
  outline-width: 2px;
3783
4409
  }
3784
- &:focus-visible {
4410
+ :scope._ao-sidebar-item:focus-visible, :scope ._ao-sidebar-item:focus-visible {
3785
4411
  outline-offset: 2px;
3786
4412
  }
3787
- &:focus-visible {
4413
+ :scope._ao-sidebar-item:focus-visible, :scope ._ao-sidebar-item:focus-visible {
3788
4414
  outline-color: var(--color-focus);
3789
4415
  }
3790
- }
3791
4416
  :scope._ao-sidebar-item[aria-current="page"], :scope ._ao-sidebar-item[aria-current="page"], :scope._ao-sidebar-item[data-active], :scope ._ao-sidebar-item[data-active] {
3792
4417
  background-color: var(--color-primary-muted);
3793
4418
  --tw-font-weight: var(--font-weight-medium);
@@ -3857,21 +4482,23 @@
3857
4482
  transition-duration: 150ms;
3858
4483
  -webkit-user-select: none;
3859
4484
  user-select: none;
3860
- &:hover {
3861
- @media (hover: hover) {
4485
+ }
4486
+ @media (hover: hover) {
4487
+ :scope._ao-sidebar-collapsible-trigger:hover, :scope ._ao-sidebar-collapsible-trigger:hover {
3862
4488
  background-color: var(--color-surface-strong);
3863
- }
3864
4489
  }
3865
- &:focus-visible {
4490
+ }
4491
+ :scope._ao-sidebar-collapsible-trigger:focus-visible, :scope ._ao-sidebar-collapsible-trigger:focus-visible {
3866
4492
  outline-style: var(--tw-outline-style);
3867
4493
  outline-width: 2px;
3868
4494
  }
3869
- &:focus-visible {
4495
+ :scope._ao-sidebar-collapsible-trigger:focus-visible, :scope ._ao-sidebar-collapsible-trigger:focus-visible {
3870
4496
  outline-offset: 2px;
3871
4497
  }
3872
- &:focus-visible {
4498
+ :scope._ao-sidebar-collapsible-trigger:focus-visible, :scope ._ao-sidebar-collapsible-trigger:focus-visible {
3873
4499
  outline-color: var(--color-focus);
3874
4500
  }
4501
+ :scope._ao-sidebar-collapsible-trigger, :scope ._ao-sidebar-collapsible-trigger {
3875
4502
  list-style: none;
3876
4503
  }
3877
4504
  :scope._ao-sidebar-collapsible-trigger::-webkit-details-marker, :scope ._ao-sidebar-collapsible-trigger::-webkit-details-marker {
@@ -3933,22 +4560,22 @@
3933
4560
  transition-duration: 150ms;
3934
4561
  -webkit-user-select: none;
3935
4562
  user-select: none;
3936
- &:hover {
3937
- @media (hover: hover) {
4563
+ }
4564
+ @media (hover: hover) {
4565
+ :scope._ao-sidebar-subitem:hover, :scope ._ao-sidebar-subitem:hover {
3938
4566
  background-color: var(--color-surface-strong);
3939
- }
3940
4567
  }
3941
- &:focus-visible {
4568
+ }
4569
+ :scope._ao-sidebar-subitem:focus-visible, :scope ._ao-sidebar-subitem:focus-visible {
3942
4570
  outline-style: var(--tw-outline-style);
3943
4571
  outline-width: 2px;
3944
4572
  }
3945
- &:focus-visible {
4573
+ :scope._ao-sidebar-subitem:focus-visible, :scope ._ao-sidebar-subitem:focus-visible {
3946
4574
  outline-offset: 2px;
3947
4575
  }
3948
- &:focus-visible {
4576
+ :scope._ao-sidebar-subitem:focus-visible, :scope ._ao-sidebar-subitem:focus-visible {
3949
4577
  outline-color: var(--color-focus);
3950
4578
  }
3951
- }
3952
4579
  :scope._ao-sidebar-subitem[aria-current="page"], :scope ._ao-sidebar-subitem[aria-current="page"], :scope._ao-sidebar-subitem[data-active], :scope ._ao-sidebar-subitem[data-active] {
3953
4580
  background-color: var(--color-primary-muted);
3954
4581
  --tw-font-weight: var(--font-weight-medium);
@@ -3983,17 +4610,17 @@
3983
4610
  transition-duration: 150ms;
3984
4611
  -webkit-user-select: none;
3985
4612
  user-select: none;
3986
- &:hover {
3987
- @media (hover: hover) {
4613
+ }
4614
+ @media (hover: hover) {
4615
+ :scope._ao-sidebar-collapse-toggle:hover, :scope ._ao-sidebar-collapse-toggle:hover {
3988
4616
  background-color: var(--color-surface-strong);
3989
- }
3990
4617
  }
3991
- &:hover {
3992
- @media (hover: hover) {
3993
- color: var(--color-text);
3994
4618
  }
4619
+ @media (hover: hover) {
4620
+ :scope._ao-sidebar-collapse-toggle:hover, :scope ._ao-sidebar-collapse-toggle:hover {
4621
+ color: var(--color-text);
3995
4622
  }
3996
- }
4623
+ }
3997
4624
  :scope._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible), :scope ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible) {
3998
4625
  outline-style: var(--tw-outline-style);
3999
4626
  outline-width: 2px;
@@ -4086,28 +4713,28 @@
4086
4713
  transition-duration: 150ms;
4087
4714
  -webkit-user-select: none;
4088
4715
  user-select: none;
4089
- &:hover {
4090
- @media (hover: hover) {
4716
+ }
4717
+ @media (hover: hover) {
4718
+ :scope:is(._ao-tabs ._ao-tab):hover, :scope :is(._ao-tabs ._ao-tab):hover {
4091
4719
  color: var(--color-text);
4092
- }
4093
4720
  }
4094
- &:focus-visible {
4721
+ }
4722
+ :scope:is(._ao-tabs ._ao-tab):focus-visible, :scope :is(._ao-tabs ._ao-tab):focus-visible {
4095
4723
  outline-style: var(--tw-outline-style);
4096
4724
  outline-width: 2px;
4097
4725
  }
4098
- &:focus-visible {
4726
+ :scope:is(._ao-tabs ._ao-tab):focus-visible, :scope :is(._ao-tabs ._ao-tab):focus-visible {
4099
4727
  outline-offset: 2px;
4100
4728
  }
4101
- &:focus-visible {
4729
+ :scope:is(._ao-tabs ._ao-tab):focus-visible, :scope :is(._ao-tabs ._ao-tab):focus-visible {
4102
4730
  outline-color: var(--color-focus);
4103
4731
  }
4104
- &:disabled {
4732
+ :scope:is(._ao-tabs ._ao-tab):disabled, :scope :is(._ao-tabs ._ao-tab):disabled {
4105
4733
  cursor: not-allowed;
4106
4734
  }
4107
- &:disabled {
4735
+ :scope:is(._ao-tabs ._ao-tab):disabled, :scope :is(._ao-tabs ._ao-tab):disabled {
4108
4736
  opacity: 50%;
4109
4737
  }
4110
- }
4111
4738
  :scope._ao-tabs ._ao-tab[data-selected], :scope ._ao-tabs ._ao-tab[data-selected], :scope._ao-tabs ._ao-tab[aria-selected="true"], :scope ._ao-tabs ._ao-tab[aria-selected="true"] {
4112
4739
  color: var(--color-text);
4113
4740
  }
@@ -4405,6 +5032,40 @@
4405
5032
  outline-offset: calc(2px * -1);
4406
5033
  outline-color: var(--color-focus);
4407
5034
  }
5035
+ :scope._ao-table-compact :where(th, td), :scope ._ao-table-compact :where(th, td), :scope._ao-table-compact ._ao-table-cell, :scope ._ao-table-compact ._ao-table-cell, :scope._ao-table-compact ._ao-table-header-cell, :scope ._ao-table-compact ._ao-table-header-cell {
5036
+ padding-inline: calc(var(--spacing) * 2);
5037
+ padding-block: calc(var(--spacing) * 1);
5038
+ font-size: var(--text-xs);
5039
+ line-height: var(--tw-leading, var(--text-xs--line-height));
5040
+ }
5041
+ :scope._ao-table :where(td)._ao-table-empty, :scope ._ao-table :where(td)._ao-table-empty, :scope._ao-table-empty, :scope ._ao-table-empty {
5042
+ padding-block: calc(var(--spacing) * 8);
5043
+ text-align: center;
5044
+ color: var(--color-text-muted);
5045
+ }
5046
+ :scope._ao-table tbody tr:has(> ._ao-table-empty):hover :where(td), :scope ._ao-table tbody tr:has(> ._ao-table-empty):hover :where(td) {
5047
+ background-color: transparent;
5048
+ }
5049
+ :scope._ao-table-pin-col :where(thead th, tbody td, tfoot :is(td, th)):first-child, :scope ._ao-table-pin-col :where(thead th, tbody td, tfoot :is(td, th)):first-child {
5050
+ position: sticky;
5051
+ inset-inline-start: 0;
5052
+ }
5053
+ :scope._ao-table-pin-col tbody td:first-child, :scope ._ao-table-pin-col tbody td:first-child {
5054
+ z-index: 1;
5055
+ background-color: var(--color-surface);
5056
+ }
5057
+ :scope._ao-table-pin-col :where(thead th):first-child, :scope ._ao-table-pin-col :where(thead th):first-child {
5058
+ z-index: 11;
5059
+ }
5060
+ :scope._ao-table-pin-col._ao-table-striped tbody tr:nth-child(even) td:first-child, :scope ._ao-table-pin-col._ao-table-striped tbody tr:nth-child(even) td:first-child {
5061
+ background-color: var(--color-surface-muted);
5062
+ }
5063
+ :scope._ao-table-pin-col tbody tr:hover td:first-child, :scope ._ao-table-pin-col tbody tr:hover td:first-child {
5064
+ background-color: var(--color-surface-muted);
5065
+ }
5066
+ :scope._ao-table-pin-col tbody tr:has(input[type="checkbox"]:checked) td:first-child, :scope ._ao-table-pin-col tbody tr:has(input[type="checkbox"]:checked) td:first-child, :scope._ao-table-pin-col tbody tr:has(._ao-checkbox[data-checked]) td:first-child, :scope ._ao-table-pin-col tbody tr:has(._ao-checkbox[data-checked]) td:first-child, :scope._ao-table-pin-col tbody tr[data-selected] td:first-child, :scope ._ao-table-pin-col tbody tr[data-selected] td:first-child {
5067
+ background-color: var(--color-primary-muted);
5068
+ }
4408
5069
  :scope._ao-tooltip, :scope ._ao-tooltip {
4409
5070
  pointer-events: none;
4410
5071
  display: inline-block;
@@ -4574,22 +5235,22 @@
4574
5235
  color: var(--color-link);
4575
5236
  text-decoration-line: underline;
4576
5237
  text-underline-offset: 2px;
4577
- &:hover {
4578
- @media (hover: hover) {
5238
+ }
5239
+ @media (hover: hover) {
5240
+ :scope:is(._ao-prose :where(a)):hover, :scope :is(._ao-prose :where(a)):hover {
4579
5241
  color: var(--color-link-hover);
4580
- }
4581
5242
  }
4582
- &:focus-visible {
5243
+ }
5244
+ :scope:is(._ao-prose :where(a)):focus-visible, :scope :is(._ao-prose :where(a)):focus-visible {
4583
5245
  outline-style: var(--tw-outline-style);
4584
5246
  outline-width: 2px;
4585
5247
  }
4586
- &:focus-visible {
5248
+ :scope:is(._ao-prose :where(a)):focus-visible, :scope :is(._ao-prose :where(a)):focus-visible {
4587
5249
  outline-offset: 2px;
4588
5250
  }
4589
- &:focus-visible {
5251
+ :scope:is(._ao-prose :where(a)):focus-visible, :scope :is(._ao-prose :where(a)):focus-visible {
4590
5252
  outline-color: var(--color-focus);
4591
5253
  }
4592
- }
4593
5254
  :scope._ao-prose :where(code), :scope ._ao-prose :where(code) {
4594
5255
  border-radius: 0.25rem;
4595
5256
  border-style: var(--tw-border-style);
@@ -4911,22 +5572,32 @@
4911
5572
  }
4912
5573
  :scope._ao-container, :scope ._ao-container {
4913
5574
  width: 100%;
4914
- @media (width >= 40rem) {
5575
+ }
5576
+ @media (width >= 40rem) {
5577
+ :scope._ao-container, :scope ._ao-container {
4915
5578
  max-width: 40rem;
5579
+ }
4916
5580
  }
4917
- @media (width >= 48rem) {
5581
+ @media (width >= 48rem) {
5582
+ :scope._ao-container, :scope ._ao-container {
4918
5583
  max-width: 48rem;
5584
+ }
4919
5585
  }
4920
- @media (width >= 64rem) {
5586
+ @media (width >= 64rem) {
5587
+ :scope._ao-container, :scope ._ao-container {
4921
5588
  max-width: 64rem;
5589
+ }
4922
5590
  }
4923
- @media (width >= 80rem) {
5591
+ @media (width >= 80rem) {
5592
+ :scope._ao-container, :scope ._ao-container {
4924
5593
  max-width: 80rem;
5594
+ }
4925
5595
  }
4926
- @media (width >= 96rem) {
5596
+ @media (width >= 96rem) {
5597
+ :scope._ao-container, :scope ._ao-container {
4927
5598
  max-width: 96rem;
4928
- }
4929
5599
  }
5600
+ }
4930
5601
  :scope._ao-my-4, :scope ._ao-my-4 {
4931
5602
  margin-block: calc(var(--spacing) * 4);
4932
5603
  }
@@ -4977,4 +5648,8 @@
4977
5648
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
4978
5649
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4979
5650
  }
5651
+ :scope._ao-outline, :scope ._ao-outline {
5652
+ outline-style: var(--tw-outline-style);
5653
+ outline-width: 1px;
5654
+ }
4980
5655
  }