@aortl/admin-css 0.5.1 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/admin.css +3 -0
  2. package/dist/admin.min.css +1 -1
  3. package/dist/admin.scoped.css +497 -562
  4. package/dist/admin.scoped.min.css +515 -5
  5. package/package.json +1 -1
package/dist/admin.scoped.css CHANGED
@@ -177,8 +177,48 @@
177
177
  inherits: false;
178
178
  }
179
179
  @scope (._ao-admin-root) {
180
- @layer theme {
181
- :scope, :scope:host, :scope :host {
180
+ :scope {
181
+ color-scheme: light dark;
182
+ }
183
+ :scope[data-theme="dark"], :scope [data-theme="dark"] {
184
+ color-scheme: dark;
185
+ }
186
+ :scope[data-theme="light"], :scope [data-theme="light"] {
187
+ color-scheme: light;
188
+ }
189
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
190
+ :scope, :scope *, :scope::before, :scope ::before, :scope::after, :scope ::after, :scope::backdrop, :scope ::backdrop {
191
+ --tw-ordinal: initial;
192
+ --tw-slashed-zero: initial;
193
+ --tw-numeric-figure: initial;
194
+ --tw-numeric-spacing: initial;
195
+ --tw-numeric-fraction: initial;
196
+ --tw-shadow: 0 0 #0000;
197
+ --tw-shadow-color: initial;
198
+ --tw-shadow-alpha: 100%;
199
+ --tw-inset-shadow: 0 0 #0000;
200
+ --tw-inset-shadow-color: initial;
201
+ --tw-inset-shadow-alpha: 100%;
202
+ --tw-ring-color: initial;
203
+ --tw-ring-shadow: 0 0 #0000;
204
+ --tw-inset-ring-color: initial;
205
+ --tw-inset-ring-shadow: 0 0 #0000;
206
+ --tw-ring-inset: initial;
207
+ --tw-ring-offset-width: 0px;
208
+ --tw-ring-offset-color: #fff;
209
+ --tw-ring-offset-shadow: 0 0 #0000;
210
+ --tw-leading: initial;
211
+ --tw-font-weight: initial;
212
+ --tw-border-style: solid;
213
+ --tw-outline-style: solid;
214
+ --tw-duration: initial;
215
+ --tw-translate-x: 0;
216
+ --tw-translate-y: 0;
217
+ --tw-translate-z: 0;
218
+ --tw-tracking: initial;
219
+ }
220
+ }
221
+ :scope, :scope:host, :scope :host {
182
222
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
183
223
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
184
224
  monospace;
@@ -381,15 +421,13 @@
381
421
  --color-info-muted: light-dark(var(--color-cyan-50), var(--color-cyan-950));
382
422
  --color-info-content: light-dark(var(--color-paper), var(--color-black));
383
423
  }
384
- }
385
- @layer base {
386
- :scope, :scope *, :scope::after, :scope ::after, :scope::before, :scope ::before, :scope::backdrop, :scope ::backdrop, :scope::file-selector-button, :scope ::file-selector-button {
424
+ :scope, :scope *, :scope::after, :scope ::after, :scope::before, :scope ::before, :scope::backdrop, :scope ::backdrop, :scope::file-selector-button, :scope ::file-selector-button {
387
425
  box-sizing: border-box;
388
426
  margin: 0;
389
427
  padding: 0;
390
428
  border: 0 solid;
391
429
  }
392
- :scope, :scope:host, :scope :host {
430
+ :scope, :scope:host, :scope :host {
393
431
  line-height: 1.5;
394
432
  -webkit-text-size-adjust: 100%;
395
433
  tab-size: 4;
@@ -398,74 +436,74 @@
398
436
  font-variation-settings: var(--default-font-variation-settings, normal);
399
437
  -webkit-tap-highlight-color: transparent;
400
438
  }
401
- :scope hr {
439
+ :scope hr {
402
440
  height: 0;
403
441
  color: inherit;
404
442
  border-top-width: 1px;
405
443
  }
406
- :scope abbr:where([title]) {
444
+ :scope abbr:where([title]) {
407
445
  -webkit-text-decoration: underline dotted;
408
446
  text-decoration: underline dotted;
409
447
  }
410
- :scope h1, :scope h2, :scope h3, :scope h4, :scope h5, :scope h6 {
448
+ :scope h1, :scope h2, :scope h3, :scope h4, :scope h5, :scope h6 {
411
449
  font-size: inherit;
412
450
  font-weight: inherit;
413
451
  }
414
- :scope a {
452
+ :scope a {
415
453
  color: inherit;
416
454
  -webkit-text-decoration: inherit;
417
455
  text-decoration: inherit;
418
456
  }
419
- :scope b, :scope strong {
457
+ :scope b, :scope strong {
420
458
  font-weight: bolder;
421
459
  }
422
- :scope code, :scope kbd, :scope samp, :scope pre {
460
+ :scope code, :scope kbd, :scope samp, :scope pre {
423
461
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
424
462
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
425
463
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
426
464
  font-size: 1em;
427
465
  }
428
- :scope small {
466
+ :scope small {
429
467
  font-size: 80%;
430
468
  }
431
- :scope sub, :scope sup {
469
+ :scope sub, :scope sup {
432
470
  font-size: 75%;
433
471
  line-height: 0;
434
472
  position: relative;
435
473
  vertical-align: baseline;
436
474
  }
437
- :scope sub {
475
+ :scope sub {
438
476
  bottom: -0.25em;
439
477
  }
440
- :scope sup {
478
+ :scope sup {
441
479
  top: -0.5em;
442
480
  }
443
- :scope table {
481
+ :scope table {
444
482
  text-indent: 0;
445
483
  border-color: inherit;
446
484
  border-collapse: collapse;
447
485
  }
448
- :scope:-moz-focusring, :scope :-moz-focusring {
486
+ :scope:-moz-focusring, :scope :-moz-focusring {
449
487
  outline: auto;
450
488
  }
451
- :scope progress {
489
+ :scope progress {
452
490
  vertical-align: baseline;
453
491
  }
454
- :scope summary {
492
+ :scope summary {
455
493
  display: list-item;
456
494
  }
457
- :scope ol, :scope ul, :scope menu {
495
+ :scope ol, :scope ul, :scope menu {
458
496
  list-style: none;
459
497
  }
460
- :scope img, :scope svg, :scope video, :scope canvas, :scope audio, :scope iframe, :scope embed, :scope object {
498
+ :scope img, :scope svg, :scope video, :scope canvas, :scope audio, :scope iframe, :scope embed, :scope object {
461
499
  display: block;
462
500
  vertical-align: middle;
463
501
  }
464
- :scope img, :scope video {
502
+ :scope img, :scope video {
465
503
  max-width: 100%;
466
504
  height: auto;
467
505
  }
468
- :scope button, :scope input, :scope select, :scope optgroup, :scope textarea, :scope::file-selector-button, :scope ::file-selector-button {
506
+ :scope button, :scope input, :scope select, :scope optgroup, :scope textarea, :scope::file-selector-button, :scope ::file-selector-button {
469
507
  font: inherit;
470
508
  font-feature-settings: inherit;
471
509
  font-variation-settings: inherit;
@@ -475,19 +513,19 @@
475
513
  background-color: transparent;
476
514
  opacity: 1;
477
515
  }
478
- :scope:where(select:is([multiple], [size])) optgroup, :scope :where(select:is([multiple], [size])) optgroup {
516
+ :scope:where(select:is([multiple], [size])) optgroup, :scope :where(select:is([multiple], [size])) optgroup {
479
517
  font-weight: bolder;
480
518
  }
481
- :scope:where(select:is([multiple], [size])) optgroup option, :scope :where(select:is([multiple], [size])) optgroup option {
519
+ :scope:where(select:is([multiple], [size])) optgroup option, :scope :where(select:is([multiple], [size])) optgroup option {
482
520
  padding-inline-start: 20px;
483
521
  }
484
- :scope::file-selector-button, :scope ::file-selector-button {
522
+ :scope::file-selector-button, :scope ::file-selector-button {
485
523
  margin-inline-end: 4px;
486
524
  }
487
- :scope::placeholder, :scope ::placeholder {
525
+ :scope::placeholder, :scope ::placeholder {
488
526
  opacity: 1;
489
527
  }
490
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
528
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
491
529
  :scope::placeholder, :scope ::placeholder {
492
530
  color: currentcolor;
493
531
  @supports (color: color-mix(in lab, red, red)) {
@@ -495,136 +533,52 @@
495
533
  }
496
534
  }
497
535
  }
498
- :scope textarea {
536
+ :scope textarea {
499
537
  resize: vertical;
500
538
  }
501
- :scope::-webkit-search-decoration, :scope ::-webkit-search-decoration {
539
+ :scope::-webkit-search-decoration, :scope ::-webkit-search-decoration {
502
540
  -webkit-appearance: none;
503
541
  }
504
- :scope::-webkit-date-and-time-value, :scope ::-webkit-date-and-time-value {
542
+ :scope::-webkit-date-and-time-value, :scope ::-webkit-date-and-time-value {
505
543
  min-height: 1lh;
506
544
  text-align: inherit;
507
545
  }
508
- :scope::-webkit-datetime-edit, :scope ::-webkit-datetime-edit {
546
+ :scope::-webkit-datetime-edit, :scope ::-webkit-datetime-edit {
509
547
  display: inline-flex;
510
548
  }
511
- :scope::-webkit-datetime-edit-fields-wrapper, :scope ::-webkit-datetime-edit-fields-wrapper {
549
+ :scope::-webkit-datetime-edit-fields-wrapper, :scope ::-webkit-datetime-edit-fields-wrapper {
512
550
  padding: 0;
513
551
  }
514
- :scope::-webkit-datetime-edit, :scope ::-webkit-datetime-edit, :scope::-webkit-datetime-edit-year-field, :scope ::-webkit-datetime-edit-year-field, :scope::-webkit-datetime-edit-month-field, :scope ::-webkit-datetime-edit-month-field, :scope::-webkit-datetime-edit-day-field, :scope ::-webkit-datetime-edit-day-field, :scope::-webkit-datetime-edit-hour-field, :scope ::-webkit-datetime-edit-hour-field, :scope::-webkit-datetime-edit-minute-field, :scope ::-webkit-datetime-edit-minute-field, :scope::-webkit-datetime-edit-second-field, :scope ::-webkit-datetime-edit-second-field, :scope::-webkit-datetime-edit-millisecond-field, :scope ::-webkit-datetime-edit-millisecond-field, :scope::-webkit-datetime-edit-meridiem-field, :scope ::-webkit-datetime-edit-meridiem-field {
552
+ :scope::-webkit-datetime-edit, :scope ::-webkit-datetime-edit, :scope::-webkit-datetime-edit-year-field, :scope ::-webkit-datetime-edit-year-field, :scope::-webkit-datetime-edit-month-field, :scope ::-webkit-datetime-edit-month-field, :scope::-webkit-datetime-edit-day-field, :scope ::-webkit-datetime-edit-day-field, :scope::-webkit-datetime-edit-hour-field, :scope ::-webkit-datetime-edit-hour-field, :scope::-webkit-datetime-edit-minute-field, :scope ::-webkit-datetime-edit-minute-field, :scope::-webkit-datetime-edit-second-field, :scope ::-webkit-datetime-edit-second-field, :scope::-webkit-datetime-edit-millisecond-field, :scope ::-webkit-datetime-edit-millisecond-field, :scope::-webkit-datetime-edit-meridiem-field, :scope ::-webkit-datetime-edit-meridiem-field {
515
553
  padding-block: 0;
516
554
  }
517
- :scope::-webkit-calendar-picker-indicator, :scope ::-webkit-calendar-picker-indicator {
555
+ :scope::-webkit-calendar-picker-indicator, :scope ::-webkit-calendar-picker-indicator {
518
556
  line-height: 1;
519
557
  }
520
- :scope:-moz-ui-invalid, :scope :-moz-ui-invalid {
558
+ :scope:-moz-ui-invalid, :scope :-moz-ui-invalid {
521
559
  box-shadow: none;
522
560
  }
523
- :scope button, :scope input:where([type="button"], [type="reset"], [type="submit"]), :scope::file-selector-button, :scope ::file-selector-button {
561
+ :scope button, :scope input:where([type="button"], [type="reset"], [type="submit"]), :scope::file-selector-button, :scope ::file-selector-button {
524
562
  appearance: button;
525
563
  }
526
- :scope::-webkit-inner-spin-button, :scope ::-webkit-inner-spin-button, :scope::-webkit-outer-spin-button, :scope ::-webkit-outer-spin-button {
564
+ :scope::-webkit-inner-spin-button, :scope ::-webkit-inner-spin-button, :scope::-webkit-outer-spin-button, :scope ::-webkit-outer-spin-button {
527
565
  height: auto;
528
566
  }
529
- :scope[hidden]:where(:not([hidden="until-found"])), :scope [hidden]:where(:not([hidden="until-found"])) {
567
+ :scope[hidden]:where(:not([hidden="until-found"])), :scope [hidden]:where(:not([hidden="until-found"])) {
530
568
  display: none !important;
531
569
  }
532
- }
533
- @layer utilities {
534
- ._ao-collapse {
535
- visibility: collapse;
536
- }
537
- ._ao-visible {
538
- visibility: visible;
539
- }
540
- ._ao-sr-only {
541
- position: absolute;
542
- width: 1px;
543
- height: 1px;
544
- padding: 0;
545
- margin: -1px;
546
- overflow: hidden;
547
- clip-path: inset(50%);
548
- white-space: nowrap;
549
- border-width: 0;
550
- }
551
- ._ao-sticky {
552
- position: sticky;
553
- }
554
- ._ao-container {
555
- width: 100%;
556
- @media (width >= 40rem) {
557
- max-width: 40rem;
558
- }
559
- @media (width >= 48rem) {
560
- max-width: 48rem;
561
- }
562
- @media (width >= 64rem) {
563
- max-width: 64rem;
564
- }
565
- @media (width >= 80rem) {
566
- max-width: 80rem;
567
- }
568
- @media (width >= 96rem) {
569
- max-width: 96rem;
570
- }
571
- }
572
- ._ao-block {
573
- display: block;
574
- }
575
- ._ao-grid {
576
- display: grid;
577
- }
578
- ._ao-hidden {
579
- display: none;
580
- }
581
- ._ao-table {
582
- display: table;
583
- }
584
- ._ao-table-cell {
585
- display: table-cell;
586
- }
587
- ._ao-flex-1 {
588
- flex: 1;
589
- }
590
- ._ao-text-right {
591
- text-align: right;
592
- }
593
- ._ao-tabular-nums {
594
- --tw-numeric-spacing: tabular-nums;
595
- font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
596
- }
597
- ._ao-shadow {
598
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
599
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
600
- }
601
- ._ao-select-all {
602
- -webkit-user-select: all;
603
- user-select: all;
604
- }
605
- }
606
570
  :scope {
607
- color-scheme: light dark;
608
- }
609
- :scope[data-theme="dark"], :scope [data-theme="dark"] {
610
- color-scheme: dark;
611
- }
612
- :scope[data-theme="light"], :scope [data-theme="light"] {
613
- color-scheme: light;
614
- }
615
- @layer base {
616
- :scope {
617
571
  color: var(--color-text);
618
572
  background-color: var(--color-surface);
619
573
  -webkit-text-size-adjust: 100%;
620
574
  }
621
- :scope {
575
+ :scope {
622
576
  font-family: var(--font-sans);
623
577
  font-size: var(--text-sm);
624
578
  line-height: var(--tw-leading, var(--text-sm--line-height));
625
579
  line-height: 1.5;
626
580
  }
627
- :scope h1 {
581
+ :scope h1 {
628
582
  font-size: var(--text-xl);
629
583
  line-height: var(--tw-leading, var(--text-xl--line-height));
630
584
  --tw-leading: var(--leading-tight);
@@ -632,7 +586,7 @@
632
586
  --tw-font-weight: var(--font-weight-semibold);
633
587
  font-weight: var(--font-weight-semibold);
634
588
  }
635
- :scope h2 {
589
+ :scope h2 {
636
590
  font-size: var(--text-base);
637
591
  line-height: var(--tw-leading, var(--text-base--line-height));
638
592
  --tw-leading: var(--leading-tight);
@@ -640,7 +594,7 @@
640
594
  --tw-font-weight: var(--font-weight-semibold);
641
595
  font-weight: var(--font-weight-semibold);
642
596
  }
643
- :scope h3 {
597
+ :scope h3 {
644
598
  font-size: var(--text-sm);
645
599
  line-height: var(--tw-leading, var(--text-sm--line-height));
646
600
  --tw-leading: var(--leading-snug);
@@ -648,31 +602,29 @@
648
602
  --tw-font-weight: var(--font-weight-semibold);
649
603
  font-weight: var(--font-weight-semibold);
650
604
  }
651
- }
652
- @layer components {
653
- ._ao-accordion {
605
+ :scope._ao-accordion, :scope ._ao-accordion {
654
606
  display: flex;
655
607
  flex-direction: column;
656
608
  }
657
- ._ao-accordion-item {
609
+ :scope._ao-accordion-item, :scope ._ao-accordion-item {
658
610
  border-style: var(--tw-border-style);
659
611
  border-width: 1px;
660
612
  border-color: var(--color-border);
661
613
  background-color: var(--color-surface);
662
614
  interpolate-size: allow-keywords;
663
615
  }
664
- ._ao-accordion-item:first-child {
616
+ :scope._ao-accordion-item:first-child, :scope ._ao-accordion-item:first-child {
665
617
  border-top-left-radius: var(--radius-lg);
666
618
  border-top-right-radius: var(--radius-lg);
667
619
  }
668
- ._ao-accordion-item:last-child {
620
+ :scope._ao-accordion-item:last-child, :scope ._ao-accordion-item:last-child {
669
621
  border-bottom-right-radius: var(--radius-lg);
670
622
  border-bottom-left-radius: var(--radius-lg);
671
623
  }
672
- ._ao-accordion-item + ._ao-accordion-item {
624
+ :scope._ao-accordion-item + ._ao-accordion-item, :scope ._ao-accordion-item + ._ao-accordion-item {
673
625
  border-top: 0;
674
626
  }
675
- ._ao-accordion-summary {
627
+ :scope._ao-accordion-summary, :scope ._ao-accordion-summary {
676
628
  display: flex;
677
629
  cursor: pointer;
678
630
  align-items: center;
@@ -703,10 +655,10 @@
703
655
  }
704
656
  list-style: none;
705
657
  }
706
- ._ao-accordion-summary::-webkit-details-marker {
658
+ :scope._ao-accordion-summary::-webkit-details-marker, :scope ._ao-accordion-summary::-webkit-details-marker {
707
659
  display: none;
708
660
  }
709
- ._ao-accordion-summary::after {
661
+ :scope._ao-accordion-summary::after, :scope ._ao-accordion-summary::after {
710
662
  content: "";
711
663
  width: 0.5rem;
712
664
  height: 0.5rem;
@@ -717,10 +669,10 @@
717
669
  flex-shrink: 0;
718
670
  margin-left: auto;
719
671
  }
720
- ._ao-accordion-item[open] > ._ao-accordion-summary::after {
672
+ :scope._ao-accordion-item[open] > ._ao-accordion-summary::after, :scope ._ao-accordion-item[open] > ._ao-accordion-summary::after {
721
673
  transform: rotate(-135deg);
722
674
  }
723
- ._ao-accordion-content {
675
+ :scope._ao-accordion-content, :scope ._ao-accordion-content {
724
676
  border-top-style: var(--tw-border-style);
725
677
  border-top-width: 1px;
726
678
  border-color: var(--color-border);
@@ -730,20 +682,18 @@
730
682
  line-height: var(--tw-leading, var(--text-sm--line-height));
731
683
  color: var(--color-text);
732
684
  }
733
- ._ao-accordion-item::details-content {
685
+ :scope._ao-accordion-item::details-content, :scope ._ao-accordion-item::details-content {
734
686
  opacity: 0;
735
687
  height: 0;
736
688
  overflow: clip;
737
689
  content-visibility: visible;
738
690
  transition: opacity 200ms ease, height 200ms ease;
739
691
  }
740
- ._ao-accordion-item[open]::details-content {
692
+ :scope._ao-accordion-item[open]::details-content, :scope ._ao-accordion-item[open]::details-content {
741
693
  opacity: 1;
742
694
  height: auto;
743
695
  }
744
- }
745
- @layer components {
746
- ._ao-alert {
696
+ :scope._ao-alert, :scope ._ao-alert {
747
697
  display: flex;
748
698
  width: 100%;
749
699
  flex-direction: column;
@@ -757,65 +707,63 @@
757
707
  line-height: var(--tw-leading, var(--text-sm--line-height));
758
708
  color: var(--color-text);
759
709
  }
760
- ._ao-alert:has(> :is(i, svg):first-child) {
710
+ :scope._ao-alert:has(> :is(i, svg):first-child), :scope ._ao-alert:has(> :is(i, svg):first-child) {
761
711
  display: grid;
762
712
  grid-template-columns: auto 1fr;
763
713
  column-gap: 0.5rem;
764
714
  row-gap: 0.25rem;
765
715
  align-items: center;
766
716
  }
767
- ._ao-alert > :is(i, svg):first-child {
717
+ :scope._ao-alert > :is(i, svg):first-child, :scope ._ao-alert > :is(i, svg):first-child {
768
718
  font-size: 1rem;
769
719
  line-height: 1.25;
770
720
  }
771
- ._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-title) {
721
+ :scope._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-title), :scope ._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-title) {
772
722
  grid-template-rows: auto auto;
773
723
  align-items: start;
774
724
  }
775
- ._ao-alert:has(> ._ao-alert-title) > :is(i, svg):first-child {
725
+ :scope._ao-alert:has(> ._ao-alert-title) > :is(i, svg):first-child, :scope ._ao-alert:has(> ._ao-alert-title) > :is(i, svg):first-child {
776
726
  grid-row: 1 / -1;
777
727
  }
778
- ._ao-alert > :is(._ao-alert-title, ._ao-alert-description) {
728
+ :scope._ao-alert > :is(._ao-alert-title, ._ao-alert-description), :scope ._ao-alert > :is(._ao-alert-title, ._ao-alert-description) {
779
729
  grid-column: 2;
780
730
  }
781
- ._ao-alert-info {
731
+ :scope._ao-alert-info, :scope ._ao-alert-info {
782
732
  border-color: var(--color-info-muted);
783
733
  background-color: var(--color-info-muted);
784
734
  }
785
- ._ao-alert-success {
735
+ :scope._ao-alert-success, :scope ._ao-alert-success {
786
736
  border-color: var(--color-success-muted);
787
737
  background-color: var(--color-success-muted);
788
738
  }
789
- ._ao-alert-warning {
739
+ :scope._ao-alert-warning, :scope ._ao-alert-warning {
790
740
  border-color: var(--color-warning-muted);
791
741
  background-color: var(--color-warning-muted);
792
742
  }
793
- ._ao-alert-danger {
743
+ :scope._ao-alert-danger, :scope ._ao-alert-danger {
794
744
  border-color: var(--color-danger-muted);
795
745
  background-color: var(--color-danger-muted);
796
746
  }
797
- ._ao-alert-title {
747
+ :scope._ao-alert-title, :scope ._ao-alert-title {
798
748
  --tw-font-weight: var(--font-weight-medium);
799
749
  font-weight: var(--font-weight-medium);
800
750
  }
801
- ._ao-alert-info ._ao-alert-title, ._ao-alert-info > :is(i, svg):first-child {
751
+ :scope._ao-alert-info ._ao-alert-title, :scope ._ao-alert-info ._ao-alert-title, :scope._ao-alert-info > :is(i, svg):first-child, :scope ._ao-alert-info > :is(i, svg):first-child {
802
752
  color: var(--color-info);
803
753
  }
804
- ._ao-alert-success ._ao-alert-title, ._ao-alert-success > :is(i, svg):first-child {
754
+ :scope._ao-alert-success ._ao-alert-title, :scope ._ao-alert-success ._ao-alert-title, :scope._ao-alert-success > :is(i, svg):first-child, :scope ._ao-alert-success > :is(i, svg):first-child {
805
755
  color: var(--color-success);
806
756
  }
807
- ._ao-alert-warning ._ao-alert-title, ._ao-alert-warning > :is(i, svg):first-child {
757
+ :scope._ao-alert-warning ._ao-alert-title, :scope ._ao-alert-warning ._ao-alert-title, :scope._ao-alert-warning > :is(i, svg):first-child, :scope ._ao-alert-warning > :is(i, svg):first-child {
808
758
  color: var(--color-warning);
809
759
  }
810
- ._ao-alert-danger ._ao-alert-title, ._ao-alert-danger > :is(i, svg):first-child {
760
+ :scope._ao-alert-danger ._ao-alert-title, :scope ._ao-alert-danger ._ao-alert-title, :scope._ao-alert-danger > :is(i, svg):first-child, :scope ._ao-alert-danger > :is(i, svg):first-child {
811
761
  color: var(--color-danger);
812
762
  }
813
- ._ao-alert-description {
763
+ :scope._ao-alert-description, :scope ._ao-alert-description {
814
764
  color: var(--color-text-muted);
815
765
  }
816
- }
817
- @layer components {
818
- ._ao-app-shell {
766
+ :scope._ao-app-shell, :scope ._ao-app-shell {
819
767
  --app-shell-sidebar-w: 240px;
820
768
  --app-shell-sidebar-w-collapsed: 56px;
821
769
  display: grid;
@@ -827,35 +775,33 @@
827
775
  grid-template-rows: auto 1fr auto;
828
776
  grid-template-areas: "header" "main" "footer";
829
777
  }
830
- ._ao-app-shell > ._ao-navbar {
778
+ :scope._ao-app-shell > ._ao-navbar, :scope ._ao-app-shell > ._ao-navbar {
831
779
  grid-area: header;
832
780
  }
833
- ._ao-app-shell > main, ._ao-app-shell-main {
781
+ :scope._ao-app-shell > main, :scope ._ao-app-shell > main, :scope._ao-app-shell-main, :scope ._ao-app-shell-main {
834
782
  grid-area: main;
835
783
  min-width: 0;
836
784
  }
837
- ._ao-app-shell > ._ao-footer {
785
+ :scope._ao-app-shell > ._ao-footer, :scope ._ao-app-shell > ._ao-footer {
838
786
  grid-area: footer;
839
787
  }
840
- ._ao-app-shell-with-sidebar {
788
+ :scope._ao-app-shell-with-sidebar, :scope ._ao-app-shell-with-sidebar {
841
789
  grid-template-columns: auto 1fr;
842
790
  grid-template-areas: "header header" "sidebar main" "footer footer";
843
791
  }
844
- ._ao-app-shell-with-sidebar > ._ao-sidebar {
792
+ :scope._ao-app-shell-with-sidebar > ._ao-sidebar, :scope ._ao-app-shell-with-sidebar > ._ao-sidebar {
845
793
  grid-area: sidebar;
846
794
  }
847
- @media (max-width: 48rem) {
848
- ._ao-app-shell-with-sidebar {
795
+ @media (max-width: 48rem) {
796
+ :scope._ao-app-shell-with-sidebar, :scope ._ao-app-shell-with-sidebar {
849
797
  grid-template-columns: 1fr;
850
798
  grid-template-areas: "header" "main" "footer";
851
799
  }
852
- ._ao-app-shell-with-sidebar > ._ao-sidebar {
800
+ :scope._ao-app-shell-with-sidebar > ._ao-sidebar, :scope ._ao-app-shell-with-sidebar > ._ao-sidebar {
853
801
  display: none;
854
802
  }
855
803
  }
856
- }
857
- @layer components {
858
- ._ao-badge {
804
+ :scope._ao-badge, :scope ._ao-badge {
859
805
  display: inline-flex;
860
806
  height: calc(var(--spacing) * 5);
861
807
  align-items: center;
@@ -874,50 +820,48 @@
874
820
  font-weight: var(--font-weight-medium);
875
821
  white-space: nowrap;
876
822
  }
877
- ._ao-badge-neutral {
823
+ :scope._ao-badge-neutral, :scope ._ao-badge-neutral {
878
824
  background-color: var(--color-surface-strong);
879
825
  color: var(--color-text);
880
826
  }
881
- ._ao-badge-info {
827
+ :scope._ao-badge-info, :scope ._ao-badge-info {
882
828
  border-color: var(--color-info-muted);
883
829
  background-color: var(--color-info-muted);
884
830
  color: var(--color-info);
885
831
  }
886
- ._ao-badge-success {
832
+ :scope._ao-badge-success, :scope ._ao-badge-success {
887
833
  border-color: var(--color-success-muted);
888
834
  background-color: var(--color-success-muted);
889
835
  color: var(--color-success);
890
836
  }
891
- ._ao-badge-warning {
837
+ :scope._ao-badge-warning, :scope ._ao-badge-warning {
892
838
  border-color: var(--color-warning-muted);
893
839
  background-color: var(--color-warning-muted);
894
840
  color: var(--color-warning);
895
841
  }
896
- ._ao-badge-danger {
842
+ :scope._ao-badge-danger, :scope ._ao-badge-danger {
897
843
  border-color: var(--color-danger-muted);
898
844
  background-color: var(--color-danger-muted);
899
845
  color: var(--color-danger);
900
846
  }
901
- ._ao-badge-primary {
847
+ :scope._ao-badge-primary, :scope ._ao-badge-primary {
902
848
  background-color: var(--color-primary);
903
849
  color: var(--color-primary-content);
904
850
  }
905
- ._ao-badge-sm {
851
+ :scope._ao-badge-sm, :scope ._ao-badge-sm {
906
852
  height: calc(var(--spacing) * 4);
907
853
  gap: calc(var(--spacing) * 0.5);
908
854
  padding-inline: calc(var(--spacing) * 1.5);
909
855
  font-size: 0.625rem;
910
856
  }
911
- ._ao-badge-lg {
857
+ :scope._ao-badge-lg, :scope ._ao-badge-lg {
912
858
  height: calc(var(--spacing) * 6);
913
859
  gap: calc(var(--spacing) * 1.5);
914
860
  padding-inline: calc(var(--spacing) * 2.5);
915
861
  font-size: var(--text-sm);
916
862
  line-height: var(--tw-leading, var(--text-sm--line-height));
917
863
  }
918
- }
919
- @layer components {
920
- ._ao-brand-tile {
864
+ :scope._ao-brand-tile, :scope ._ao-brand-tile {
921
865
  display: inline-flex;
922
866
  width: calc(var(--spacing) * 6);
923
867
  height: calc(var(--spacing) * 6);
@@ -935,9 +879,7 @@
935
879
  -webkit-user-select: none;
936
880
  user-select: none;
937
881
  }
938
- }
939
- @layer components {
940
- ._ao-spinner {
882
+ :scope._ao-spinner, :scope ._ao-spinner {
941
883
  display: inline-block;
942
884
  width: 1rem;
943
885
  height: 1rem;
@@ -950,29 +892,27 @@
950
892
  border-top-color: currentColor;
951
893
  animation: spinner-spin 0.6s linear infinite;
952
894
  }
953
- ._ao-spinner-sm {
895
+ :scope._ao-spinner-sm, :scope ._ao-spinner-sm {
954
896
  width: 0.75rem;
955
897
  height: 0.75rem;
956
898
  border-width: 1.5px;
957
899
  }
958
- ._ao-spinner-lg {
900
+ :scope._ao-spinner-lg, :scope ._ao-spinner-lg {
959
901
  width: 1.5rem;
960
902
  height: 1.5rem;
961
903
  border-width: 3px;
962
904
  }
963
- @media (prefers-reduced-motion: reduce) {
964
- ._ao-spinner {
905
+ @media (prefers-reduced-motion: reduce) {
906
+ :scope._ao-spinner, :scope ._ao-spinner {
965
907
  animation-duration: 2s;
966
908
  }
967
909
  }
968
- @keyframes spinner-spin {
910
+ @keyframes spinner-spin {
969
911
  to {
970
912
  transform: rotate(360deg);
971
913
  }
972
914
  }
973
- }
974
- @layer components {
975
- ._ao-progress {
915
+ :scope._ao-progress, :scope ._ao-progress {
976
916
  appearance: none;
977
917
  -webkit-appearance: none;
978
918
  display: block;
@@ -984,53 +924,53 @@
984
924
  background-color: var(--color-surface-strong);
985
925
  color: var(--color-primary);
986
926
  }
987
- ._ao-progress::-webkit-progress-bar {
927
+ :scope._ao-progress::-webkit-progress-bar, :scope ._ao-progress::-webkit-progress-bar {
988
928
  background-color: var(--color-surface-strong);
989
929
  border-radius: 9999px;
990
930
  }
991
- ._ao-progress::-webkit-progress-value {
931
+ :scope._ao-progress::-webkit-progress-value, :scope ._ao-progress::-webkit-progress-value {
992
932
  background-color: currentColor;
993
933
  border-radius: 9999px;
994
934
  transition: inline-size 200ms ease;
995
935
  }
996
- ._ao-progress::-moz-progress-bar {
936
+ :scope._ao-progress::-moz-progress-bar, :scope ._ao-progress::-moz-progress-bar {
997
937
  background-color: currentColor;
998
938
  border-radius: 9999px;
999
939
  transition: inline-size 200ms ease;
1000
940
  }
1001
- ._ao-progress-sm {
941
+ :scope._ao-progress-sm, :scope ._ao-progress-sm {
1002
942
  height: 0.25rem;
1003
943
  }
1004
- ._ao-progress-lg {
944
+ :scope._ao-progress-lg, :scope ._ao-progress-lg {
1005
945
  height: 0.5rem;
1006
946
  }
1007
- ._ao-progress-success {
947
+ :scope._ao-progress-success, :scope ._ao-progress-success {
1008
948
  color: var(--color-success);
1009
949
  }
1010
- ._ao-progress-warning {
950
+ :scope._ao-progress-warning, :scope ._ao-progress-warning {
1011
951
  color: var(--color-warning);
1012
952
  }
1013
- ._ao-progress-danger {
953
+ :scope._ao-progress-danger, :scope ._ao-progress-danger {
1014
954
  color: var(--color-danger);
1015
955
  }
1016
- ._ao-progress:indeterminate {
956
+ :scope._ao-progress:indeterminate, :scope ._ao-progress:indeterminate {
1017
957
  background-image: linear-gradient( 90deg, var(--color-surface-strong) 0%, var(--color-surface-strong) 40%, currentColor 50%, var(--color-surface-strong) 60%, var(--color-surface-strong) 100% );
1018
958
  background-size: 250% 100%;
1019
959
  background-repeat: no-repeat;
1020
960
  animation: progress-indeterminate 1.2s linear infinite;
1021
961
  }
1022
- ._ao-progress:indeterminate::-webkit-progress-bar {
962
+ :scope._ao-progress:indeterminate::-webkit-progress-bar, :scope ._ao-progress:indeterminate::-webkit-progress-bar {
1023
963
  background-color: transparent;
1024
964
  }
1025
- ._ao-progress:indeterminate::-webkit-progress-value, ._ao-progress:indeterminate::-moz-progress-bar {
965
+ :scope._ao-progress:indeterminate::-webkit-progress-value, :scope ._ao-progress:indeterminate::-webkit-progress-value, :scope._ao-progress:indeterminate::-moz-progress-bar, :scope ._ao-progress:indeterminate::-moz-progress-bar {
1026
966
  background-color: transparent;
1027
967
  }
1028
- @media (prefers-reduced-motion: reduce) {
1029
- ._ao-progress:indeterminate {
968
+ @media (prefers-reduced-motion: reduce) {
969
+ :scope._ao-progress:indeterminate, :scope ._ao-progress:indeterminate {
1030
970
  animation-duration: 3s;
1031
971
  }
1032
972
  }
1033
- @keyframes progress-indeterminate {
973
+ @keyframes progress-indeterminate {
1034
974
  from {
1035
975
  background-position: 100% 0;
1036
976
  }
@@ -1038,14 +978,12 @@
1038
978
  background-position: 0 0;
1039
979
  }
1040
980
  }
1041
- }
1042
- @layer components {
1043
- ._ao-breadcrumbs {
981
+ :scope._ao-breadcrumbs, :scope ._ao-breadcrumbs {
1044
982
  font-size: var(--text-sm);
1045
983
  line-height: var(--tw-leading, var(--text-sm--line-height));
1046
984
  color: var(--color-text-muted);
1047
985
  }
1048
- ._ao-breadcrumbs > ol {
986
+ :scope._ao-breadcrumbs > ol, :scope ._ao-breadcrumbs > ol {
1049
987
  margin: calc(var(--spacing) * 0);
1050
988
  display: inline-flex;
1051
989
  list-style-type: none;
@@ -1054,7 +992,7 @@
1054
992
  gap: calc(var(--spacing) * 1.5);
1055
993
  padding: calc(var(--spacing) * 0);
1056
994
  }
1057
- ._ao-breadcrumb-item {
995
+ :scope._ao-breadcrumb-item, :scope ._ao-breadcrumb-item {
1058
996
  display: inline-flex;
1059
997
  align-items: center;
1060
998
  gap: calc(var(--spacing) * 1.5);
@@ -1076,13 +1014,13 @@
1076
1014
  outline-color: var(--color-primary);
1077
1015
  }
1078
1016
  }
1079
- ._ao-breadcrumb-item[aria-current="page"] {
1017
+ :scope._ao-breadcrumb-item[aria-current="page"], :scope ._ao-breadcrumb-item[aria-current="page"] {
1080
1018
  pointer-events: none;
1081
1019
  --tw-font-weight: var(--font-weight-medium);
1082
1020
  font-weight: var(--font-weight-medium);
1083
1021
  color: var(--color-text);
1084
1022
  }
1085
- ._ao-breadcrumb-separator {
1023
+ :scope._ao-breadcrumb-separator, :scope ._ao-breadcrumb-separator {
1086
1024
  display: inline-flex;
1087
1025
  align-items: center;
1088
1026
  color: color-mix(in srgb, light-dark(var(--color-base-600), var(--color-base-500)) 60%, transparent);
@@ -1092,16 +1030,14 @@
1092
1030
  -webkit-user-select: none;
1093
1031
  user-select: none;
1094
1032
  }
1095
- ._ao-breadcrumb-separator:empty::before {
1033
+ :scope._ao-breadcrumb-separator:empty::before, :scope ._ao-breadcrumb-separator:empty::before {
1096
1034
  content: "/";
1097
1035
  }
1098
- ._ao-breadcrumb-separator > :is(i, svg) {
1036
+ :scope._ao-breadcrumb-separator > :is(i, svg), :scope ._ao-breadcrumb-separator > :is(i, svg) {
1099
1037
  width: 0.875rem;
1100
1038
  height: 0.875rem;
1101
1039
  }
1102
- }
1103
- @layer components {
1104
- ._ao-pagination > ol, ._ao-pagination > ul {
1040
+ :scope._ao-pagination > ol, :scope ._ao-pagination > ol, :scope._ao-pagination > ul, :scope ._ao-pagination > ul {
1105
1041
  margin: calc(var(--spacing) * 0);
1106
1042
  display: inline-flex;
1107
1043
  list-style-type: none;
@@ -1109,10 +1045,10 @@
1109
1045
  gap: calc(var(--spacing) * 1);
1110
1046
  padding: calc(var(--spacing) * 0);
1111
1047
  }
1112
- ._ao-page-item {
1048
+ :scope._ao-page-item, :scope ._ao-page-item {
1113
1049
  display: inline-flex;
1114
1050
  }
1115
- ._ao-page-link {
1051
+ :scope._ao-page-link, :scope ._ao-page-link {
1116
1052
  display: inline-flex;
1117
1053
  height: calc(var(--spacing) * 8);
1118
1054
  min-width: calc(var(--spacing) * 8);
@@ -1165,17 +1101,17 @@
1165
1101
  opacity: 50%;
1166
1102
  }
1167
1103
  }
1168
- ._ao-page-link._ao-active, ._ao-page-link[aria-current="page"] {
1104
+ :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"] {
1169
1105
  border-color: var(--color-primary-muted);
1170
1106
  background-color: var(--color-primary-muted);
1171
1107
  color: var(--color-primary);
1172
1108
  }
1173
- ._ao-page-link[aria-disabled="true"] {
1109
+ :scope._ao-page-link[aria-disabled="true"], :scope ._ao-page-link[aria-disabled="true"] {
1174
1110
  pointer-events: none;
1175
1111
  cursor: not-allowed;
1176
1112
  opacity: 50%;
1177
1113
  }
1178
- ._ao-page-ellipsis {
1114
+ :scope._ao-page-ellipsis, :scope ._ao-page-ellipsis {
1179
1115
  display: inline-flex;
1180
1116
  height: calc(var(--spacing) * 8);
1181
1117
  min-width: calc(var(--spacing) * 8);
@@ -1188,9 +1124,7 @@
1188
1124
  -webkit-user-select: none;
1189
1125
  user-select: none;
1190
1126
  }
1191
- }
1192
- @layer components {
1193
- ._ao-btn {
1127
+ :scope._ao-btn, :scope ._ao-btn {
1194
1128
  display: inline-flex;
1195
1129
  cursor: pointer;
1196
1130
  align-items: center;
@@ -1235,7 +1169,7 @@
1235
1169
  opacity: 50%;
1236
1170
  }
1237
1171
  }
1238
- ._ao-btn-primary {
1172
+ :scope._ao-btn-primary, :scope ._ao-btn-primary {
1239
1173
  background-color: var(--color-primary);
1240
1174
  color: var(--color-primary-content);
1241
1175
  &:hover {
@@ -1244,7 +1178,7 @@
1244
1178
  }
1245
1179
  }
1246
1180
  }
1247
- ._ao-btn-secondary {
1181
+ :scope._ao-btn-secondary, :scope ._ao-btn-secondary {
1248
1182
  border-color: var(--color-border);
1249
1183
  background-color: var(--color-surface-muted);
1250
1184
  color: var(--color-text);
@@ -1254,7 +1188,7 @@
1254
1188
  }
1255
1189
  }
1256
1190
  }
1257
- ._ao-btn-ghost {
1191
+ :scope._ao-btn-ghost, :scope ._ao-btn-ghost {
1258
1192
  background-color: transparent;
1259
1193
  color: var(--color-text);
1260
1194
  &:hover {
@@ -1263,7 +1197,7 @@
1263
1197
  }
1264
1198
  }
1265
1199
  }
1266
- ._ao-btn-danger {
1200
+ :scope._ao-btn-danger, :scope ._ao-btn-danger {
1267
1201
  background-color: var(--color-danger);
1268
1202
  color: var(--color-danger-content);
1269
1203
  &:hover {
@@ -1272,38 +1206,38 @@
1272
1206
  }
1273
1207
  }
1274
1208
  }
1275
- ._ao-btn-sm {
1209
+ :scope._ao-btn-sm, :scope ._ao-btn-sm {
1276
1210
  gap: calc(var(--spacing) * 1.5);
1277
1211
  padding-inline: calc(var(--spacing) * 3);
1278
1212
  padding-block: calc(var(--spacing) * 1.5);
1279
1213
  font-size: var(--text-xs);
1280
1214
  line-height: var(--tw-leading, var(--text-xs--line-height));
1281
1215
  }
1282
- ._ao-btn-lg {
1216
+ :scope._ao-btn-lg, :scope ._ao-btn-lg {
1283
1217
  gap: calc(var(--spacing) * 2.5);
1284
1218
  padding-inline: calc(var(--spacing) * 5);
1285
1219
  padding-block: calc(var(--spacing) * 2.5);
1286
1220
  font-size: var(--text-base);
1287
1221
  line-height: var(--tw-leading, var(--text-base--line-height));
1288
1222
  }
1289
- ._ao-btn-full-width {
1223
+ :scope._ao-btn-full-width, :scope ._ao-btn-full-width {
1290
1224
  width: 100%;
1291
1225
  }
1292
- ._ao-btn-square {
1226
+ :scope._ao-btn-square, :scope ._ao-btn-square {
1293
1227
  padding-inline: calc(var(--spacing) * 2);
1294
1228
  }
1295
- ._ao-btn-sm._ao-btn-square {
1229
+ :scope._ao-btn-sm._ao-btn-square, :scope ._ao-btn-sm._ao-btn-square {
1296
1230
  padding-inline: calc(var(--spacing) * 1.5);
1297
1231
  }
1298
- ._ao-btn-lg._ao-btn-square {
1232
+ :scope._ao-btn-lg._ao-btn-square, :scope ._ao-btn-lg._ao-btn-square {
1299
1233
  padding-inline: calc(var(--spacing) * 2.5);
1300
1234
  }
1301
- ._ao-btn-loading {
1235
+ :scope._ao-btn-loading, :scope ._ao-btn-loading {
1302
1236
  pointer-events: none;
1303
1237
  cursor: not-allowed;
1304
1238
  opacity: 50%;
1305
1239
  }
1306
- ._ao-btn-loading::before {
1240
+ :scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
1307
1241
  content: "";
1308
1242
  display: inline-block;
1309
1243
  width: 1em;
@@ -1317,85 +1251,81 @@
1317
1251
  border-top-color: currentColor;
1318
1252
  animation: spinner-spin 0.6s linear infinite;
1319
1253
  }
1320
- ._ao-btn-loading > :is(i, svg):first-child {
1254
+ :scope._ao-btn-loading > :is(i, svg):first-child, :scope ._ao-btn-loading > :is(i, svg):first-child {
1321
1255
  display: none;
1322
1256
  }
1323
- @media (prefers-reduced-motion: reduce) {
1324
- ._ao-btn-loading::before {
1257
+ @media (prefers-reduced-motion: reduce) {
1258
+ :scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
1325
1259
  animation-duration: 2s;
1326
1260
  }
1327
1261
  }
1328
- }
1329
- @layer components {
1330
- ._ao-btn-group {
1262
+ :scope._ao-btn-group, :scope ._ao-btn-group {
1331
1263
  display: inline-flex;
1332
1264
  }
1333
- ._ao-btn-group > ._ao-btn {
1265
+ :scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn {
1334
1266
  position: relative;
1335
1267
  border-radius: 0;
1336
1268
  &:focus-visible {
1337
1269
  z-index: 10;
1338
1270
  }
1339
1271
  }
1340
- ._ao-btn-group > ._ao-btn:not(:first-child) {
1272
+ :scope._ao-btn-group > ._ao-btn:not(:first-child), :scope ._ao-btn-group > ._ao-btn:not(:first-child) {
1341
1273
  margin-left: -1px;
1342
1274
  }
1343
- ._ao-btn-group > ._ao-btn:first-child {
1275
+ :scope._ao-btn-group > ._ao-btn:first-child, :scope ._ao-btn-group > ._ao-btn:first-child {
1344
1276
  border-top-left-radius: var(--radius-lg);
1345
1277
  border-bottom-left-radius: var(--radius-lg);
1346
1278
  }
1347
- ._ao-btn-group > ._ao-btn:last-child {
1279
+ :scope._ao-btn-group > ._ao-btn:last-child, :scope ._ao-btn-group > ._ao-btn:last-child {
1348
1280
  border-top-right-radius: var(--radius-lg);
1349
1281
  border-bottom-right-radius: var(--radius-lg);
1350
1282
  }
1351
- ._ao-btn-group > ._ao-menu {
1283
+ :scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
1352
1284
  position: relative;
1353
1285
  &:focus-visible {
1354
1286
  z-index: 10;
1355
1287
  }
1356
1288
  display: inline-flex;
1357
1289
  }
1358
- ._ao-btn-group > ._ao-menu:not(:first-child) {
1290
+ :scope._ao-btn-group > ._ao-menu:not(:first-child), :scope ._ao-btn-group > ._ao-menu:not(:first-child) {
1359
1291
  margin-left: -1px;
1360
1292
  }
1361
- ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
1293
+ :scope._ao-btn-group > ._ao-menu > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
1362
1294
  border-radius: 0;
1363
1295
  }
1364
- ._ao-btn-group > ._ao-menu:first-child > ._ao-menu-trigger {
1296
+ :scope._ao-btn-group > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu:first-child > ._ao-menu-trigger {
1365
1297
  border-top-left-radius: var(--radius-lg);
1366
1298
  border-bottom-left-radius: var(--radius-lg);
1367
1299
  }
1368
- ._ao-btn-group > ._ao-menu:last-child > ._ao-menu-trigger {
1300
+ :scope._ao-btn-group > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu:last-child > ._ao-menu-trigger {
1369
1301
  border-top-right-radius: var(--radius-lg);
1370
1302
  border-bottom-right-radius: var(--radius-lg);
1371
1303
  }
1372
- ._ao-btn-group > ._ao-btn:not(:first-child), ._ao-btn-group > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1304
+ :scope._ao-btn-group > ._ao-btn:not(:first-child), :scope ._ao-btn-group > ._ao-btn:not(:first-child), :scope._ao-btn-group > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1373
1305
  border-left-color: currentColor;
1374
1306
  @supports (color: color-mix(in lab, red, red)) {
1375
1307
  border-left-color: color-mix(in srgb, currentColor 25%, transparent);
1376
1308
  }
1377
1309
  }
1378
- ._ao-btn-group-vertical {
1310
+ :scope._ao-btn-group-vertical, :scope ._ao-btn-group-vertical {
1379
1311
  display: inline-flex;
1380
1312
  flex-direction: column;
1381
1313
  }
1382
- ._ao-btn-group-vertical > ._ao-btn:not(:first-child) {
1314
+ :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child) {
1383
1315
  margin-top: -1px;
1384
1316
  margin-left: calc(var(--spacing) * 0);
1385
1317
  }
1386
- ._ao-btn-group-vertical > ._ao-btn:first-child {
1318
+ :scope._ao-btn-group-vertical > ._ao-btn:first-child, :scope ._ao-btn-group-vertical > ._ao-btn:first-child {
1387
1319
  border-top-left-radius: var(--radius-lg);
1388
1320
  border-top-right-radius: var(--radius-lg);
1389
1321
  border-bottom-left-radius: 0;
1390
1322
  }
1391
- ._ao-btn-group-vertical > ._ao-btn:last-child {
1323
+ :scope._ao-btn-group-vertical > ._ao-btn:last-child, :scope ._ao-btn-group-vertical > ._ao-btn:last-child {
1392
1324
  border-top-right-radius: 0;
1393
1325
  border-bottom-right-radius: var(--radius-lg);
1394
1326
  border-bottom-left-radius: var(--radius-lg);
1395
1327
  }
1396
- }
1397
- @layer components {
1398
- ._ao-input {
1328
+ :scope._ao-input, :scope ._ao-input {
1399
1329
  display: inline-flex;
1400
1330
  width: 100%;
1401
1331
  align-items: center;
@@ -1436,7 +1366,7 @@
1436
1366
  opacity: 50%;
1437
1367
  }
1438
1368
  }
1439
- ._ao-input-bordered {
1369
+ :scope._ao-input-bordered, :scope ._ao-input-bordered {
1440
1370
  border-color: var(--color-border);
1441
1371
  &:hover {
1442
1372
  @media (hover: hover) {
@@ -1444,7 +1374,7 @@
1444
1374
  }
1445
1375
  }
1446
1376
  }
1447
- ._ao-input-ghost {
1377
+ :scope._ao-input-ghost, :scope ._ao-input-ghost {
1448
1378
  background-color: transparent;
1449
1379
  &:hover {
1450
1380
  @media (hover: hover) {
@@ -1452,25 +1382,25 @@
1452
1382
  }
1453
1383
  }
1454
1384
  }
1455
- ._ao-input-danger {
1385
+ :scope._ao-input-danger, :scope ._ao-input-danger {
1456
1386
  border-color: var(--color-danger);
1457
1387
  &:focus-visible {
1458
1388
  outline-color: var(--color-danger);
1459
1389
  }
1460
1390
  }
1461
- ._ao-input-sm {
1391
+ :scope._ao-input-sm, :scope ._ao-input-sm {
1462
1392
  padding-inline: calc(var(--spacing) * 2.5);
1463
1393
  padding-block: calc(var(--spacing) * 1.5);
1464
1394
  font-size: var(--text-xs);
1465
1395
  line-height: var(--tw-leading, var(--text-xs--line-height));
1466
1396
  }
1467
- ._ao-input-lg {
1397
+ :scope._ao-input-lg, :scope ._ao-input-lg {
1468
1398
  padding-inline: calc(var(--spacing) * 4);
1469
1399
  padding-block: calc(var(--spacing) * 2.5);
1470
1400
  font-size: var(--text-base);
1471
1401
  line-height: var(--tw-leading, var(--text-base--line-height));
1472
1402
  }
1473
- ._ao-input::-webkit-calendar-picker-indicator {
1403
+ :scope._ao-input::-webkit-calendar-picker-indicator, :scope ._ao-input::-webkit-calendar-picker-indicator {
1474
1404
  cursor: pointer;
1475
1405
  opacity: 60%;
1476
1406
  &:hover {
@@ -1479,31 +1409,29 @@
1479
1409
  }
1480
1410
  }
1481
1411
  }
1482
- }
1483
- @layer components {
1484
- ._ao-input-group {
1412
+ :scope._ao-input-group, :scope ._ao-input-group {
1485
1413
  display: inline-flex;
1486
1414
  width: 100%;
1487
1415
  }
1488
- ._ao-input-group > * {
1416
+ :scope._ao-input-group > *, :scope ._ao-input-group > * {
1489
1417
  border-radius: 0;
1490
1418
  }
1491
- ._ao-input-group > :first-child {
1419
+ :scope._ao-input-group > :first-child, :scope ._ao-input-group > :first-child {
1492
1420
  border-top-left-radius: var(--radius-lg);
1493
1421
  border-bottom-left-radius: var(--radius-lg);
1494
1422
  }
1495
- ._ao-input-group > :last-child {
1423
+ :scope._ao-input-group > :last-child, :scope ._ao-input-group > :last-child {
1496
1424
  border-top-right-radius: var(--radius-lg);
1497
1425
  border-bottom-right-radius: var(--radius-lg);
1498
1426
  }
1499
- ._ao-input-group > :not(:first-child) {
1427
+ :scope._ao-input-group > :not(:first-child), :scope ._ao-input-group > :not(:first-child) {
1500
1428
  margin-left: -1px;
1501
1429
  }
1502
- ._ao-input-group > :focus, ._ao-input-group > :focus-within {
1430
+ :scope._ao-input-group > :focus, :scope ._ao-input-group > :focus, :scope._ao-input-group > :focus-within, :scope ._ao-input-group > :focus-within {
1503
1431
  position: relative;
1504
1432
  z-index: 10;
1505
1433
  }
1506
- ._ao-input-group-addon {
1434
+ :scope._ao-input-group-addon, :scope ._ao-input-group-addon {
1507
1435
  display: inline-flex;
1508
1436
  align-items: center;
1509
1437
  border-style: var(--tw-border-style);
@@ -1518,9 +1446,7 @@
1518
1446
  white-space: nowrap;
1519
1447
  color: var(--color-text-muted);
1520
1448
  }
1521
- }
1522
- @layer components {
1523
- ._ao-textarea {
1449
+ :scope._ao-textarea, :scope ._ao-textarea {
1524
1450
  display: block;
1525
1451
  min-height: calc(var(--spacing) * 20);
1526
1452
  width: 100%;
@@ -1560,7 +1486,7 @@
1560
1486
  opacity: 50%;
1561
1487
  }
1562
1488
  }
1563
- ._ao-textarea-bordered {
1489
+ :scope._ao-textarea-bordered, :scope ._ao-textarea-bordered {
1564
1490
  border-color: var(--color-border);
1565
1491
  &:hover {
1566
1492
  @media (hover: hover) {
@@ -1568,7 +1494,7 @@
1568
1494
  }
1569
1495
  }
1570
1496
  }
1571
- ._ao-textarea-ghost {
1497
+ :scope._ao-textarea-ghost, :scope ._ao-textarea-ghost {
1572
1498
  background-color: transparent;
1573
1499
  &:hover {
1574
1500
  @media (hover: hover) {
@@ -1576,29 +1502,27 @@
1576
1502
  }
1577
1503
  }
1578
1504
  }
1579
- ._ao-textarea-danger {
1505
+ :scope._ao-textarea-danger, :scope ._ao-textarea-danger {
1580
1506
  border-color: var(--color-danger);
1581
1507
  &:focus-visible {
1582
1508
  outline-color: var(--color-danger);
1583
1509
  }
1584
1510
  }
1585
- ._ao-textarea-sm {
1511
+ :scope._ao-textarea-sm, :scope ._ao-textarea-sm {
1586
1512
  min-height: calc(var(--spacing) * 16);
1587
1513
  padding-inline: calc(var(--spacing) * 2.5);
1588
1514
  padding-block: calc(var(--spacing) * 1.5);
1589
1515
  font-size: var(--text-xs);
1590
1516
  line-height: var(--tw-leading, var(--text-xs--line-height));
1591
1517
  }
1592
- ._ao-textarea-lg {
1518
+ :scope._ao-textarea-lg, :scope ._ao-textarea-lg {
1593
1519
  min-height: calc(var(--spacing) * 24);
1594
1520
  padding-inline: calc(var(--spacing) * 4);
1595
1521
  padding-block: calc(var(--spacing) * 2.5);
1596
1522
  font-size: var(--text-base);
1597
1523
  line-height: var(--tw-leading, var(--text-base--line-height));
1598
1524
  }
1599
- }
1600
- @layer components {
1601
- ._ao-checkbox {
1525
+ :scope._ao-checkbox, :scope ._ao-checkbox {
1602
1526
  display: inline-flex;
1603
1527
  width: calc(var(--spacing) * 4);
1604
1528
  height: calc(var(--spacing) * 4);
@@ -1632,7 +1556,7 @@
1632
1556
  opacity: 50%;
1633
1557
  }
1634
1558
  }
1635
- ._ao-checkbox[data-unchecked] {
1559
+ :scope._ao-checkbox[data-unchecked], :scope ._ao-checkbox[data-unchecked] {
1636
1560
  border-color: var(--color-border-strong);
1637
1561
  &:hover {
1638
1562
  @media (hover: hover) {
@@ -1640,7 +1564,7 @@
1640
1564
  }
1641
1565
  }
1642
1566
  }
1643
- ._ao-checkbox[data-checked], ._ao-checkbox[data-indeterminate] {
1567
+ :scope._ao-checkbox[data-checked], :scope ._ao-checkbox[data-checked], :scope._ao-checkbox[data-indeterminate], :scope ._ao-checkbox[data-indeterminate] {
1644
1568
  border-color: var(--color-primary);
1645
1569
  background-color: var(--color-primary);
1646
1570
  &:hover {
@@ -1649,11 +1573,11 @@
1649
1573
  }
1650
1574
  }
1651
1575
  }
1652
- ._ao-checkbox[data-disabled] {
1576
+ :scope._ao-checkbox[data-disabled], :scope ._ao-checkbox[data-disabled] {
1653
1577
  cursor: not-allowed;
1654
1578
  opacity: 50%;
1655
1579
  }
1656
- ._ao-checkbox-indicator {
1580
+ :scope._ao-checkbox-indicator, :scope ._ao-checkbox-indicator {
1657
1581
  display: inline-flex;
1658
1582
  width: calc(var(--spacing) * 3);
1659
1583
  height: calc(var(--spacing) * 3);
@@ -1661,19 +1585,17 @@
1661
1585
  justify-content: center;
1662
1586
  color: var(--color-primary-content);
1663
1587
  }
1664
- label:has(> ._ao-checkbox) {
1588
+ :scope label:has(> ._ao-checkbox) {
1665
1589
  display: inline-flex;
1666
1590
  cursor: pointer;
1667
1591
  align-items: center;
1668
1592
  gap: calc(var(--spacing) * 2);
1669
1593
  }
1670
- label:has(> ._ao-checkbox:disabled), label:has(> ._ao-checkbox[data-disabled]) {
1594
+ :scope label:has(> ._ao-checkbox:disabled), :scope label:has(> ._ao-checkbox[data-disabled]) {
1671
1595
  cursor: not-allowed;
1672
1596
  opacity: 60%;
1673
1597
  }
1674
- }
1675
- @layer components {
1676
- ._ao-radio {
1598
+ :scope._ao-radio, :scope ._ao-radio {
1677
1599
  display: inline-flex;
1678
1600
  width: calc(var(--spacing) * 4);
1679
1601
  height: calc(var(--spacing) * 4);
@@ -1707,7 +1629,7 @@
1707
1629
  opacity: 50%;
1708
1630
  }
1709
1631
  }
1710
- ._ao-radio[data-unchecked] {
1632
+ :scope._ao-radio[data-unchecked], :scope ._ao-radio[data-unchecked] {
1711
1633
  border-color: var(--color-border-strong);
1712
1634
  &:hover {
1713
1635
  @media (hover: hover) {
@@ -1715,7 +1637,7 @@
1715
1637
  }
1716
1638
  }
1717
1639
  }
1718
- ._ao-radio[data-checked] {
1640
+ :scope._ao-radio[data-checked], :scope ._ao-radio[data-checked] {
1719
1641
  border-color: var(--color-primary);
1720
1642
  background-color: var(--color-primary);
1721
1643
  &:hover {
@@ -1724,40 +1646,38 @@
1724
1646
  }
1725
1647
  }
1726
1648
  }
1727
- ._ao-radio[data-disabled] {
1649
+ :scope._ao-radio[data-disabled], :scope ._ao-radio[data-disabled] {
1728
1650
  cursor: not-allowed;
1729
1651
  opacity: 50%;
1730
1652
  }
1731
- ._ao-radio-indicator {
1653
+ :scope._ao-radio-indicator, :scope ._ao-radio-indicator {
1732
1654
  display: inline-flex;
1733
1655
  width: calc(var(--spacing) * 1.5);
1734
1656
  height: calc(var(--spacing) * 1.5);
1735
1657
  border-radius: calc(infinity * 1px);
1736
1658
  background-color: var(--color-primary-content);
1737
1659
  }
1738
- ._ao-radio-group {
1660
+ :scope._ao-radio-group, :scope ._ao-radio-group {
1739
1661
  display: inline-flex;
1740
1662
  flex-wrap: wrap;
1741
1663
  gap: calc(var(--spacing) * 4);
1742
1664
  }
1743
- ._ao-radio-group-vertical {
1665
+ :scope._ao-radio-group-vertical, :scope ._ao-radio-group-vertical {
1744
1666
  flex-direction: column;
1745
1667
  align-items: flex-start;
1746
1668
  gap: calc(var(--spacing) * 2);
1747
1669
  }
1748
- label:has(> ._ao-radio) {
1670
+ :scope label:has(> ._ao-radio) {
1749
1671
  display: inline-flex;
1750
1672
  cursor: pointer;
1751
1673
  align-items: center;
1752
1674
  gap: calc(var(--spacing) * 2);
1753
1675
  }
1754
- label:has(> ._ao-radio:disabled), label:has(> ._ao-radio[data-disabled]) {
1676
+ :scope label:has(> ._ao-radio:disabled), :scope label:has(> ._ao-radio[data-disabled]) {
1755
1677
  cursor: not-allowed;
1756
1678
  opacity: 60%;
1757
1679
  }
1758
- }
1759
- @layer components {
1760
- ._ao-switch {
1680
+ :scope._ao-switch, :scope ._ao-switch {
1761
1681
  position: relative;
1762
1682
  display: inline-flex;
1763
1683
  height: calc(var(--spacing) * 5);
@@ -1792,17 +1712,17 @@
1792
1712
  opacity: 50%;
1793
1713
  }
1794
1714
  }
1795
- ._ao-switch[data-unchecked] {
1715
+ :scope._ao-switch[data-unchecked], :scope ._ao-switch[data-unchecked] {
1796
1716
  background-color: var(--color-border-strong);
1797
1717
  }
1798
- ._ao-switch[data-checked] {
1718
+ :scope._ao-switch[data-checked], :scope ._ao-switch[data-checked] {
1799
1719
  background-color: var(--color-primary);
1800
1720
  }
1801
- ._ao-switch[data-disabled] {
1721
+ :scope._ao-switch[data-disabled], :scope ._ao-switch[data-disabled] {
1802
1722
  cursor: not-allowed;
1803
1723
  opacity: 50%;
1804
1724
  }
1805
- ._ao-switch-thumb {
1725
+ :scope._ao-switch-thumb, :scope ._ao-switch-thumb {
1806
1726
  width: calc(var(--spacing) * 4);
1807
1727
  height: calc(var(--spacing) * 4);
1808
1728
  border-radius: calc(infinity * 1px);
@@ -1815,19 +1735,19 @@
1815
1735
  --tw-duration: 150ms;
1816
1736
  transition-duration: 150ms;
1817
1737
  }
1818
- ._ao-switch[data-checked] ._ao-switch-thumb {
1738
+ :scope._ao-switch[data-checked] ._ao-switch-thumb, :scope ._ao-switch[data-checked] ._ao-switch-thumb {
1819
1739
  --tw-translate-x: calc(var(--spacing) * 4);
1820
1740
  translate: var(--tw-translate-x) var(--tw-translate-y);
1821
1741
  }
1822
- input._ao-switch {
1742
+ :scope input._ao-switch {
1823
1743
  margin: calc(var(--spacing) * 0);
1824
1744
  appearance: none;
1825
1745
  background-color: var(--color-border-strong);
1826
1746
  }
1827
- input._ao-switch:checked {
1747
+ :scope input._ao-switch:checked {
1828
1748
  background-color: var(--color-primary);
1829
1749
  }
1830
- input._ao-switch::before {
1750
+ :scope input._ao-switch::before {
1831
1751
  content: "";
1832
1752
  width: calc(var(--spacing) * 4);
1833
1753
  height: calc(var(--spacing) * 4);
@@ -1841,23 +1761,21 @@
1841
1761
  --tw-duration: 150ms;
1842
1762
  transition-duration: 150ms;
1843
1763
  }
1844
- input._ao-switch:checked::before {
1764
+ :scope input._ao-switch:checked::before {
1845
1765
  --tw-translate-x: calc(var(--spacing) * 4);
1846
1766
  translate: var(--tw-translate-x) var(--tw-translate-y);
1847
1767
  }
1848
- label:has(> ._ao-switch) {
1768
+ :scope label:has(> ._ao-switch) {
1849
1769
  display: inline-flex;
1850
1770
  cursor: pointer;
1851
1771
  align-items: center;
1852
1772
  gap: calc(var(--spacing) * 3);
1853
1773
  }
1854
- label:has(> ._ao-switch:disabled), label:has(> ._ao-switch[data-disabled]) {
1774
+ :scope label:has(> ._ao-switch:disabled), :scope label:has(> ._ao-switch[data-disabled]) {
1855
1775
  cursor: not-allowed;
1856
1776
  opacity: 60%;
1857
1777
  }
1858
- }
1859
- @layer components {
1860
- ._ao-select {
1778
+ :scope._ao-select, :scope ._ao-select {
1861
1779
  display: inline-flex;
1862
1780
  width: 100%;
1863
1781
  cursor: pointer;
@@ -1901,16 +1819,16 @@
1901
1819
  opacity: 50%;
1902
1820
  }
1903
1821
  }
1904
- ._ao-select[data-popup-open] {
1822
+ :scope._ao-select[data-popup-open], :scope ._ao-select[data-popup-open] {
1905
1823
  outline-style: var(--tw-outline-style);
1906
1824
  outline-width: 2px;
1907
1825
  outline-offset: 2px;
1908
1826
  outline-color: var(--color-primary);
1909
1827
  }
1910
- ._ao-select[data-placeholder] {
1828
+ :scope._ao-select[data-placeholder], :scope ._ao-select[data-placeholder] {
1911
1829
  color: var(--color-text-muted);
1912
1830
  }
1913
- ._ao-select-bordered {
1831
+ :scope._ao-select-bordered, :scope ._ao-select-bordered {
1914
1832
  border-color: var(--color-border);
1915
1833
  &:hover {
1916
1834
  @media (hover: hover) {
@@ -1918,7 +1836,7 @@
1918
1836
  }
1919
1837
  }
1920
1838
  }
1921
- ._ao-select-ghost {
1839
+ :scope._ao-select-ghost, :scope ._ao-select-ghost {
1922
1840
  background-color: transparent;
1923
1841
  &:hover {
1924
1842
  @media (hover: hover) {
@@ -1926,25 +1844,25 @@
1926
1844
  }
1927
1845
  }
1928
1846
  }
1929
- ._ao-select-danger {
1847
+ :scope._ao-select-danger, :scope ._ao-select-danger {
1930
1848
  border-color: var(--color-danger);
1931
1849
  &:focus-visible {
1932
1850
  outline-color: var(--color-danger);
1933
1851
  }
1934
1852
  }
1935
- ._ao-select-sm {
1853
+ :scope._ao-select-sm, :scope ._ao-select-sm {
1936
1854
  padding-inline: calc(var(--spacing) * 2.5);
1937
1855
  padding-block: calc(var(--spacing) * 1.5);
1938
1856
  font-size: var(--text-xs);
1939
1857
  line-height: var(--tw-leading, var(--text-xs--line-height));
1940
1858
  }
1941
- ._ao-select-lg {
1859
+ :scope._ao-select-lg, :scope ._ao-select-lg {
1942
1860
  padding-inline: calc(var(--spacing) * 4);
1943
1861
  padding-block: calc(var(--spacing) * 2.5);
1944
1862
  font-size: var(--text-base);
1945
1863
  line-height: var(--tw-leading, var(--text-base--line-height));
1946
1864
  }
1947
- select._ao-select {
1865
+ :scope select._ao-select {
1948
1866
  appearance: none;
1949
1867
  padding-right: 2rem;
1950
1868
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
@@ -1952,14 +1870,14 @@
1952
1870
  background-position: right 0.5rem center;
1953
1871
  background-size: 1rem;
1954
1872
  }
1955
- select._ao-select-sm {
1873
+ :scope select._ao-select-sm {
1956
1874
  padding-right: 1.75rem;
1957
1875
  background-size: 0.875rem;
1958
1876
  }
1959
- select._ao-select-lg {
1877
+ :scope select._ao-select-lg {
1960
1878
  padding-right: 2.25rem;
1961
1879
  }
1962
- ._ao-select-icon {
1880
+ :scope._ao-select-icon, :scope ._ao-select-icon {
1963
1881
  display: inline-flex;
1964
1882
  width: calc(var(--spacing) * 4);
1965
1883
  height: calc(var(--spacing) * 4);
@@ -1973,10 +1891,10 @@
1973
1891
  --tw-duration: 150ms;
1974
1892
  transition-duration: 150ms;
1975
1893
  }
1976
- ._ao-select[data-popup-open] ._ao-select-icon {
1894
+ :scope._ao-select[data-popup-open] ._ao-select-icon, :scope ._ao-select[data-popup-open] ._ao-select-icon {
1977
1895
  rotate: 180deg;
1978
1896
  }
1979
- ._ao-select-popup {
1897
+ :scope._ao-select-popup, :scope ._ao-select-popup {
1980
1898
  max-height: calc(var(--spacing) * 72);
1981
1899
  min-width: var(--anchor-width);
1982
1900
  overflow: auto;
@@ -1997,14 +1915,14 @@
1997
1915
  --tw-outline-style: none;
1998
1916
  outline-style: none;
1999
1917
  }
2000
- ._ao-select-popup[data-starting-style], ._ao-select-popup[data-ending-style] {
1918
+ :scope._ao-select-popup[data-starting-style], :scope ._ao-select-popup[data-starting-style], :scope._ao-select-popup[data-ending-style], :scope ._ao-select-popup[data-ending-style] {
2001
1919
  opacity: 0%;
2002
1920
  }
2003
- ._ao-select-popup[data-starting-style] {
1921
+ :scope._ao-select-popup[data-starting-style], :scope ._ao-select-popup[data-starting-style] {
2004
1922
  --tw-translate-y: calc(var(--spacing) * -1);
2005
1923
  translate: var(--tw-translate-x) var(--tw-translate-y);
2006
1924
  }
2007
- ._ao-select-item {
1925
+ :scope._ao-select-item, :scope ._ao-select-item {
2008
1926
  display: flex;
2009
1927
  cursor: pointer;
2010
1928
  align-items: center;
@@ -2018,18 +1936,18 @@
2018
1936
  -webkit-user-select: none;
2019
1937
  user-select: none;
2020
1938
  }
2021
- ._ao-select-item[data-highlighted] {
1939
+ :scope._ao-select-item[data-highlighted], :scope ._ao-select-item[data-highlighted] {
2022
1940
  background-color: var(--color-surface-muted);
2023
1941
  }
2024
- ._ao-select-item[data-selected] {
1942
+ :scope._ao-select-item[data-selected], :scope ._ao-select-item[data-selected] {
2025
1943
  --tw-font-weight: var(--font-weight-medium);
2026
1944
  font-weight: var(--font-weight-medium);
2027
1945
  }
2028
- ._ao-select-item[data-disabled] {
1946
+ :scope._ao-select-item[data-disabled], :scope ._ao-select-item[data-disabled] {
2029
1947
  cursor: not-allowed;
2030
1948
  opacity: 50%;
2031
1949
  }
2032
- ._ao-select-item-indicator {
1950
+ :scope._ao-select-item-indicator, :scope ._ao-select-item-indicator {
2033
1951
  margin-left: auto;
2034
1952
  display: inline-flex;
2035
1953
  width: calc(var(--spacing) * 4);
@@ -2038,7 +1956,7 @@
2038
1956
  justify-content: center;
2039
1957
  color: var(--color-primary);
2040
1958
  }
2041
- ._ao-select-group-label {
1959
+ :scope._ao-select-group-label, :scope ._ao-select-group-label {
2042
1960
  padding-inline: calc(var(--spacing) * 3);
2043
1961
  padding-top: calc(var(--spacing) * 2);
2044
1962
  padding-bottom: calc(var(--spacing) * 1);
@@ -2049,9 +1967,7 @@
2049
1967
  color: var(--color-text-muted);
2050
1968
  text-transform: uppercase;
2051
1969
  }
2052
- }
2053
- @layer components {
2054
- ._ao-card {
1970
+ :scope._ao-card, :scope ._ao-card {
2055
1971
  display: flex;
2056
1972
  flex-direction: column;
2057
1973
  overflow: hidden;
@@ -2064,13 +1980,13 @@
2064
1980
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2065
1981
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2066
1982
  }
2067
- ._ao-card-body {
1983
+ :scope._ao-card-body, :scope ._ao-card-body {
2068
1984
  display: flex;
2069
1985
  flex-direction: column;
2070
1986
  gap: calc(var(--spacing) * 3);
2071
1987
  padding: calc(var(--spacing) * 5);
2072
1988
  }
2073
- ._ao-card-title {
1989
+ :scope._ao-card-title, :scope ._ao-card-title {
2074
1990
  display: flex;
2075
1991
  align-items: center;
2076
1992
  gap: calc(var(--spacing) * 2);
@@ -2081,12 +1997,12 @@
2081
1997
  --tw-font-weight: var(--font-weight-semibold);
2082
1998
  font-weight: var(--font-weight-semibold);
2083
1999
  }
2084
- ._ao-card-description {
2000
+ :scope._ao-card-description, :scope ._ao-card-description {
2085
2001
  font-size: var(--text-sm);
2086
2002
  line-height: var(--tw-leading, var(--text-sm--line-height));
2087
2003
  color: var(--color-text-muted);
2088
2004
  }
2089
- ._ao-card-actions {
2005
+ :scope._ao-card-actions, :scope ._ao-card-actions {
2090
2006
  margin-top: auto;
2091
2007
  display: flex;
2092
2008
  flex-wrap: wrap;
@@ -2094,18 +2010,16 @@
2094
2010
  gap: calc(var(--spacing) * 2);
2095
2011
  padding-top: calc(var(--spacing) * 2);
2096
2012
  }
2097
- ._ao-card-compact ._ao-card-body {
2013
+ :scope._ao-card-compact ._ao-card-body, :scope ._ao-card-compact ._ao-card-body {
2098
2014
  gap: calc(var(--spacing) * 2);
2099
2015
  padding: calc(var(--spacing) * 3);
2100
2016
  }
2101
- ._ao-card-bordered {
2017
+ :scope._ao-card-bordered, :scope ._ao-card-bordered {
2102
2018
  border-color: var(--color-border-strong);
2103
2019
  --tw-shadow: 0 0 #0000;
2104
2020
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2105
2021
  }
2106
- }
2107
- @layer components {
2108
- ._ao-dialog {
2022
+ :scope._ao-dialog, :scope ._ao-dialog {
2109
2023
  margin: auto;
2110
2024
  flex-direction: column;
2111
2025
  overflow: hidden;
@@ -2125,29 +2039,29 @@
2125
2039
  transform: translateY(0) scale(1);
2126
2040
  transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
2127
2041
  }
2128
- ._ao-dialog[open] {
2042
+ :scope._ao-dialog[open], :scope ._ao-dialog[open] {
2129
2043
  display: flex;
2130
2044
  }
2131
- ._ao-dialog::backdrop {
2045
+ :scope._ao-dialog::backdrop, :scope ._ao-dialog::backdrop {
2132
2046
  background: rgb(0 0 0 / 0.4);
2133
2047
  transition: display 150ms allow-discrete, overlay 150ms allow-discrete, background 150ms ease-out;
2134
2048
  }
2135
- @starting-style {
2136
- ._ao-dialog[open] {
2049
+ @starting-style {
2050
+ :scope._ao-dialog[open], :scope ._ao-dialog[open] {
2137
2051
  opacity: 0;
2138
2052
  transform: translateY(-0.5rem) scale(0.98);
2139
2053
  }
2140
- ._ao-dialog[open]::backdrop {
2054
+ :scope._ao-dialog[open]::backdrop, :scope ._ao-dialog[open]::backdrop {
2141
2055
  background: rgb(0 0 0 / 0);
2142
2056
  }
2143
2057
  }
2144
- ._ao-dialog-sm {
2058
+ :scope._ao-dialog-sm, :scope ._ao-dialog-sm {
2145
2059
  max-width: 24rem;
2146
2060
  }
2147
- ._ao-dialog-lg {
2061
+ :scope._ao-dialog-lg, :scope ._ao-dialog-lg {
2148
2062
  max-width: 48rem;
2149
2063
  }
2150
- ._ao-dialog-header {
2064
+ :scope._ao-dialog-header, :scope ._ao-dialog-header {
2151
2065
  display: flex;
2152
2066
  align-items: flex-start;
2153
2067
  gap: calc(var(--spacing) * 3);
@@ -2155,7 +2069,7 @@
2155
2069
  padding-top: calc(var(--spacing) * 5);
2156
2070
  padding-bottom: calc(var(--spacing) * 3);
2157
2071
  }
2158
- ._ao-dialog-title {
2072
+ :scope._ao-dialog-title, :scope ._ao-dialog-title {
2159
2073
  margin: calc(var(--spacing) * 0);
2160
2074
  display: flex;
2161
2075
  flex: 1;
@@ -2168,7 +2082,7 @@
2168
2082
  --tw-font-weight: var(--font-weight-semibold);
2169
2083
  font-weight: var(--font-weight-semibold);
2170
2084
  }
2171
- ._ao-dialog-description {
2085
+ :scope._ao-dialog-description, :scope ._ao-dialog-description {
2172
2086
  margin-top: calc(var(--spacing) * -2);
2173
2087
  margin-bottom: calc(var(--spacing) * 3);
2174
2088
  padding-inline: calc(var(--spacing) * 5);
@@ -2176,7 +2090,7 @@
2176
2090
  line-height: var(--tw-leading, var(--text-sm--line-height));
2177
2091
  color: var(--color-text-muted);
2178
2092
  }
2179
- ._ao-dialog-body {
2093
+ :scope._ao-dialog-body, :scope ._ao-dialog-body {
2180
2094
  display: flex;
2181
2095
  flex-direction: column;
2182
2096
  gap: calc(var(--spacing) * 3);
@@ -2184,7 +2098,7 @@
2184
2098
  padding-inline: calc(var(--spacing) * 5);
2185
2099
  padding-block: calc(var(--spacing) * 3);
2186
2100
  }
2187
- ._ao-dialog-footer {
2101
+ :scope._ao-dialog-footer, :scope ._ao-dialog-footer {
2188
2102
  display: flex;
2189
2103
  flex-wrap: wrap;
2190
2104
  align-items: center;
@@ -2197,7 +2111,7 @@
2197
2111
  padding-inline: calc(var(--spacing) * 5);
2198
2112
  padding-block: calc(var(--spacing) * 3);
2199
2113
  }
2200
- ._ao-dialog-close {
2114
+ :scope._ao-dialog-close, :scope ._ao-dialog-close {
2201
2115
  display: inline-flex;
2202
2116
  width: calc(var(--spacing) * 7);
2203
2117
  height: calc(var(--spacing) * 7);
@@ -2234,19 +2148,17 @@
2234
2148
  outline-color: var(--color-primary);
2235
2149
  }
2236
2150
  }
2237
- }
2238
- @layer components {
2239
- ._ao-field {
2151
+ :scope._ao-field, :scope ._ao-field {
2240
2152
  display: flex;
2241
2153
  flex-direction: column;
2242
2154
  gap: calc(var(--spacing) * 1.5);
2243
2155
  }
2244
- ._ao-field-row {
2156
+ :scope._ao-field-row, :scope ._ao-field-row {
2245
2157
  flex-direction: row;
2246
2158
  align-items: center;
2247
2159
  gap: calc(var(--spacing) * 3);
2248
2160
  }
2249
- ._ao-field-label {
2161
+ :scope._ao-field-label, :scope ._ao-field-label {
2250
2162
  font-size: var(--text-sm);
2251
2163
  line-height: var(--tw-leading, var(--text-sm--line-height));
2252
2164
  --tw-leading: 1;
@@ -2255,41 +2167,39 @@
2255
2167
  font-weight: var(--font-weight-medium);
2256
2168
  color: var(--color-text);
2257
2169
  }
2258
- ._ao-field-label[data-required]::after {
2170
+ :scope._ao-field-label[data-required]::after, :scope ._ao-field-label[data-required]::after {
2259
2171
  content: " *";
2260
2172
  color: var(--color-danger);
2261
2173
  }
2262
- ._ao-asteriskField {
2174
+ :scope._ao-asteriskField, :scope ._ao-asteriskField {
2263
2175
  color: var(--color-danger);
2264
2176
  }
2265
- ._ao-field-description {
2177
+ :scope._ao-field-description, :scope ._ao-field-description {
2266
2178
  font-size: var(--text-xs);
2267
2179
  line-height: var(--tw-leading, var(--text-xs--line-height));
2268
2180
  --tw-leading: var(--leading-relaxed);
2269
2181
  line-height: var(--leading-relaxed);
2270
2182
  color: var(--color-text-muted);
2271
2183
  }
2272
- ._ao-field-error {
2184
+ :scope._ao-field-error, :scope ._ao-field-error {
2273
2185
  font-size: var(--text-xs);
2274
2186
  line-height: var(--tw-leading, var(--text-xs--line-height));
2275
2187
  --tw-leading: var(--leading-relaxed);
2276
2188
  line-height: var(--leading-relaxed);
2277
2189
  color: var(--color-danger);
2278
2190
  }
2279
- ._ao-field[data-invalid] ._ao-input, ._ao-field[data-invalid] ._ao-textarea, ._ao-field[data-invalid] ._ao-select, ._ao-field[data-invalid] ._ao-file-input {
2191
+ :scope._ao-field[data-invalid] ._ao-input, :scope ._ao-field[data-invalid] ._ao-input, :scope._ao-field[data-invalid] ._ao-textarea, :scope ._ao-field[data-invalid] ._ao-textarea, :scope._ao-field[data-invalid] ._ao-select, :scope ._ao-field[data-invalid] ._ao-select, :scope._ao-field[data-invalid] ._ao-file-input, :scope ._ao-field[data-invalid] ._ao-file-input {
2280
2192
  border-color: var(--color-danger);
2281
2193
  }
2282
- ._ao-field[data-invalid] ._ao-checkbox[data-unchecked], ._ao-field[data-invalid] ._ao-radio[data-unchecked] {
2194
+ :scope._ao-field[data-invalid] ._ao-checkbox[data-unchecked], :scope ._ao-field[data-invalid] ._ao-checkbox[data-unchecked], :scope._ao-field[data-invalid] ._ao-radio[data-unchecked], :scope ._ao-field[data-invalid] ._ao-radio[data-unchecked] {
2283
2195
  border-color: var(--color-danger);
2284
2196
  }
2285
- ._ao-field[data-invalid] ._ao-switch[data-unchecked] {
2197
+ :scope._ao-field[data-invalid] ._ao-switch[data-unchecked], :scope ._ao-field[data-invalid] ._ao-switch[data-unchecked] {
2286
2198
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2287
2199
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2288
2200
  --tw-ring-color: var(--color-danger);
2289
2201
  }
2290
- }
2291
- @layer components {
2292
- ._ao-file-input {
2202
+ :scope._ao-file-input, :scope ._ao-file-input {
2293
2203
  display: inline-flex;
2294
2204
  width: 100%;
2295
2205
  align-items: center;
@@ -2375,7 +2285,7 @@
2375
2285
  opacity: 50%;
2376
2286
  }
2377
2287
  }
2378
- ._ao-file-input-bordered {
2288
+ :scope._ao-file-input-bordered, :scope ._ao-file-input-bordered {
2379
2289
  border-color: var(--color-border);
2380
2290
  &:hover {
2381
2291
  @media (hover: hover) {
@@ -2383,7 +2293,7 @@
2383
2293
  }
2384
2294
  }
2385
2295
  }
2386
- ._ao-file-input-ghost {
2296
+ :scope._ao-file-input-ghost, :scope ._ao-file-input-ghost {
2387
2297
  background-color: transparent;
2388
2298
  &:hover {
2389
2299
  @media (hover: hover) {
@@ -2391,13 +2301,13 @@
2391
2301
  }
2392
2302
  }
2393
2303
  }
2394
- ._ao-file-input-danger {
2304
+ :scope._ao-file-input-danger, :scope ._ao-file-input-danger {
2395
2305
  border-color: var(--color-danger);
2396
2306
  &:focus-visible {
2397
2307
  outline-color: var(--color-danger);
2398
2308
  }
2399
2309
  }
2400
- ._ao-file-input-sm {
2310
+ :scope._ao-file-input-sm, :scope ._ao-file-input-sm {
2401
2311
  font-size: var(--text-xs);
2402
2312
  line-height: var(--tw-leading, var(--text-xs--line-height));
2403
2313
  &::file-selector-button {
@@ -2414,7 +2324,7 @@
2414
2324
  line-height: var(--tw-leading, var(--text-xs--line-height));
2415
2325
  }
2416
2326
  }
2417
- ._ao-file-input-lg {
2327
+ :scope._ao-file-input-lg, :scope ._ao-file-input-lg {
2418
2328
  font-size: var(--text-base);
2419
2329
  line-height: var(--tw-leading, var(--text-base--line-height));
2420
2330
  &::file-selector-button {
@@ -2431,9 +2341,7 @@
2431
2341
  line-height: var(--tw-leading, var(--text-base--line-height));
2432
2342
  }
2433
2343
  }
2434
- }
2435
- @layer components {
2436
- ._ao-footer {
2344
+ :scope._ao-footer, :scope ._ao-footer {
2437
2345
  display: flex;
2438
2346
  flex-wrap: wrap;
2439
2347
  align-items: center;
@@ -2449,13 +2357,13 @@
2449
2357
  line-height: var(--tw-leading, var(--text-xs--line-height));
2450
2358
  color: var(--color-text-muted);
2451
2359
  }
2452
- ._ao-footer-links {
2360
+ :scope._ao-footer-links, :scope ._ao-footer-links {
2453
2361
  display: flex;
2454
2362
  flex-wrap: wrap;
2455
2363
  align-items: center;
2456
2364
  gap: calc(var(--spacing) * 3);
2457
2365
  }
2458
- ._ao-footer-link {
2366
+ :scope._ao-footer-link, :scope ._ao-footer-link {
2459
2367
  border-radius: var(--radius-sm);
2460
2368
  color: var(--color-text-muted);
2461
2369
  text-decoration-line: none;
@@ -2480,16 +2388,14 @@
2480
2388
  outline-color: var(--color-primary);
2481
2389
  }
2482
2390
  }
2483
- ._ao-footer-meta {
2391
+ :scope._ao-footer-meta, :scope ._ao-footer-meta {
2484
2392
  color: var(--color-text-muted);
2485
2393
  }
2486
- }
2487
- @layer components {
2488
- ._ao-menu {
2394
+ :scope._ao-menu, :scope ._ao-menu {
2489
2395
  position: relative;
2490
2396
  display: inline-block;
2491
2397
  }
2492
- ._ao-menu-trigger {
2398
+ :scope._ao-menu-trigger, :scope ._ao-menu-trigger {
2493
2399
  display: inline-flex;
2494
2400
  cursor: pointer;
2495
2401
  align-items: center;
@@ -2513,10 +2419,10 @@
2513
2419
  }
2514
2420
  list-style: none;
2515
2421
  }
2516
- ._ao-menu-trigger::-webkit-details-marker {
2422
+ :scope._ao-menu-trigger::-webkit-details-marker, :scope ._ao-menu-trigger::-webkit-details-marker {
2517
2423
  display: none;
2518
2424
  }
2519
- ._ao-menu-trigger:not(._ao-btn) {
2425
+ :scope._ao-menu-trigger:not(._ao-btn), :scope ._ao-menu-trigger:not(._ao-btn) {
2520
2426
  border-radius: var(--radius-md);
2521
2427
  background-color: transparent;
2522
2428
  padding-inline: calc(var(--spacing) * 2.5);
@@ -2532,7 +2438,7 @@
2532
2438
  }
2533
2439
  }
2534
2440
  }
2535
- ._ao-menu-trigger::after {
2441
+ :scope._ao-menu-trigger::after, :scope ._ao-menu-trigger::after {
2536
2442
  content: "";
2537
2443
  width: 0.5em;
2538
2444
  height: 0.5em;
@@ -2542,13 +2448,13 @@
2542
2448
  transition: transform 150ms ease;
2543
2449
  flex-shrink: 0;
2544
2450
  }
2545
- ._ao-menu-trigger:empty {
2451
+ :scope._ao-menu-trigger:empty, :scope ._ao-menu-trigger:empty {
2546
2452
  justify-content: center;
2547
2453
  }
2548
- ._ao-menu[open] > ._ao-menu-trigger::after {
2454
+ :scope._ao-menu[open] > ._ao-menu-trigger::after, :scope ._ao-menu[open] > ._ao-menu-trigger::after {
2549
2455
  transform: rotate(-135deg);
2550
2456
  }
2551
- ._ao-menu-popup {
2457
+ :scope._ao-menu-popup, :scope ._ao-menu-popup {
2552
2458
  position: absolute;
2553
2459
  top: 100%;
2554
2460
  left: calc(var(--spacing) * 0);
@@ -2567,7 +2473,7 @@
2567
2473
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2568
2474
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2569
2475
  }
2570
- ._ao-menu-item {
2476
+ :scope._ao-menu-item, :scope ._ao-menu-item {
2571
2477
  display: flex;
2572
2478
  width: 100%;
2573
2479
  cursor: pointer;
@@ -2606,22 +2512,22 @@
2606
2512
  opacity: 50%;
2607
2513
  }
2608
2514
  }
2609
- ._ao-menu-item[aria-disabled="true"] {
2515
+ :scope._ao-menu-item[aria-disabled="true"], :scope ._ao-menu-item[aria-disabled="true"] {
2610
2516
  cursor: not-allowed;
2611
2517
  opacity: 50%;
2612
2518
  }
2613
- ._ao-menu-separator {
2519
+ :scope._ao-menu-separator, :scope ._ao-menu-separator {
2614
2520
  margin-block: calc(var(--spacing) * 1);
2615
2521
  height: 1px;
2616
2522
  border-style: var(--tw-border-style);
2617
2523
  border-width: 0px;
2618
2524
  background-color: var(--color-border);
2619
2525
  }
2620
- ._ao-menu-group {
2526
+ :scope._ao-menu-group, :scope ._ao-menu-group {
2621
2527
  display: flex;
2622
2528
  flex-direction: column;
2623
2529
  }
2624
- ._ao-menu-group-label {
2530
+ :scope._ao-menu-group-label, :scope ._ao-menu-group-label {
2625
2531
  padding-inline: calc(var(--spacing) * 3);
2626
2532
  padding-top: calc(var(--spacing) * 2);
2627
2533
  padding-bottom: calc(var(--spacing) * 1);
@@ -2632,9 +2538,7 @@
2632
2538
  color: var(--color-text-muted);
2633
2539
  text-transform: uppercase;
2634
2540
  }
2635
- }
2636
- @layer components {
2637
- ._ao-navbar {
2541
+ :scope._ao-navbar, :scope ._ao-navbar {
2638
2542
  display: flex;
2639
2543
  height: calc(var(--spacing) * 12);
2640
2544
  align-items: center;
@@ -2646,7 +2550,7 @@
2646
2550
  padding-inline: calc(var(--spacing) * 4);
2647
2551
  color: var(--color-text);
2648
2552
  }
2649
- ._ao-navbar-brand {
2553
+ :scope._ao-navbar-brand, :scope ._ao-navbar-brand {
2650
2554
  display: flex;
2651
2555
  flex-shrink: 0;
2652
2556
  align-items: center;
@@ -2657,12 +2561,12 @@
2657
2561
  font-weight: var(--font-weight-semibold);
2658
2562
  color: var(--color-text);
2659
2563
  }
2660
- ._ao-navbar-items {
2564
+ :scope._ao-navbar-items, :scope ._ao-navbar-items {
2661
2565
  display: flex;
2662
2566
  align-items: center;
2663
2567
  gap: calc(var(--spacing) * 0.5);
2664
2568
  }
2665
- ._ao-navbar-item {
2569
+ :scope._ao-navbar-item, :scope ._ao-navbar-item {
2666
2570
  display: inline-flex;
2667
2571
  cursor: pointer;
2668
2572
  align-items: center;
@@ -2699,17 +2603,17 @@
2699
2603
  outline-color: var(--color-primary);
2700
2604
  }
2701
2605
  }
2702
- ._ao-navbar-item[aria-current="page"], ._ao-navbar-item[data-active] {
2606
+ :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] {
2703
2607
  background-color: var(--color-primary-muted);
2704
2608
  color: var(--color-primary);
2705
2609
  }
2706
- ._ao-navbar-actions {
2610
+ :scope._ao-navbar-actions, :scope ._ao-navbar-actions {
2707
2611
  margin-left: auto;
2708
2612
  display: flex;
2709
2613
  align-items: center;
2710
2614
  gap: calc(var(--spacing) * 2);
2711
2615
  }
2712
- ._ao-navbar-mobile-toggle {
2616
+ :scope._ao-navbar-mobile-toggle, :scope ._ao-navbar-mobile-toggle {
2713
2617
  margin-left: calc(var(--spacing) * -2);
2714
2618
  display: inline-flex;
2715
2619
  width: calc(var(--spacing) * 9);
@@ -2736,7 +2640,7 @@
2736
2640
  outline-color: var(--color-primary);
2737
2641
  }
2738
2642
  }
2739
- ._ao-navbar-mobile-toggle::before {
2643
+ :scope._ao-navbar-mobile-toggle::before, :scope ._ao-navbar-mobile-toggle::before {
2740
2644
  content: "";
2741
2645
  display: block;
2742
2646
  width: 18px;
@@ -2745,14 +2649,12 @@
2745
2649
  border-radius: 1px;
2746
2650
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
2747
2651
  }
2748
- @media (min-width: 48rem) {
2749
- ._ao-navbar-mobile-toggle {
2652
+ @media (min-width: 48rem) {
2653
+ :scope._ao-navbar-mobile-toggle, :scope ._ao-navbar-mobile-toggle {
2750
2654
  display: none;
2751
2655
  }
2752
2656
  }
2753
- }
2754
- @layer components {
2755
- ._ao-sidebar {
2657
+ :scope._ao-sidebar, :scope ._ao-sidebar {
2756
2658
  display: flex;
2757
2659
  flex-shrink: 0;
2758
2660
  flex-direction: column;
@@ -2764,7 +2666,7 @@
2764
2666
  width: var(--app-shell-sidebar-w, 240px);
2765
2667
  transition: width 150ms ease;
2766
2668
  }
2767
- ._ao-sidebar-toggle {
2669
+ :scope._ao-sidebar-toggle, :scope ._ao-sidebar-toggle {
2768
2670
  position: absolute;
2769
2671
  width: 1px;
2770
2672
  height: 1px;
@@ -2774,17 +2676,17 @@
2774
2676
  opacity: 0;
2775
2677
  pointer-events: none;
2776
2678
  }
2777
- ._ao-sidebar:has(._ao-sidebar-toggle:checked) {
2679
+ :scope._ao-sidebar:has(._ao-sidebar-toggle:checked), :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) {
2778
2680
  width: var(--app-shell-sidebar-w-collapsed, 56px);
2779
2681
  }
2780
- ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-label, ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-group-label, ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-badge, ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-panel, ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-trigger::after {
2682
+ :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-label, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-label, :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-group-label, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-group-label, :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-badge, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-badge, :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-panel, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-panel, :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-trigger::after, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-trigger::after {
2781
2683
  display: none;
2782
2684
  }
2783
- ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-item, ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-subitem, ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-trigger {
2685
+ :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-item, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-item, :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-subitem, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-subitem, :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-trigger, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapsible-trigger {
2784
2686
  justify-content: center;
2785
2687
  padding-inline: calc(var(--spacing) * 1);
2786
2688
  }
2787
- ._ao-sidebar-header {
2689
+ :scope._ao-sidebar-header, :scope ._ao-sidebar-header {
2788
2690
  display: flex;
2789
2691
  height: calc(var(--spacing) * 12);
2790
2692
  flex-shrink: 0;
@@ -2795,7 +2697,7 @@
2795
2697
  border-color: var(--color-border);
2796
2698
  padding-inline: calc(var(--spacing) * 3);
2797
2699
  }
2798
- ._ao-sidebar-nav {
2700
+ :scope._ao-sidebar-nav, :scope ._ao-sidebar-nav {
2799
2701
  display: flex;
2800
2702
  flex: 1;
2801
2703
  flex-direction: column;
@@ -2804,15 +2706,15 @@
2804
2706
  padding-inline: calc(var(--spacing) * 2);
2805
2707
  padding-block: calc(var(--spacing) * 2);
2806
2708
  }
2807
- ._ao-sidebar-group {
2709
+ :scope._ao-sidebar-group, :scope ._ao-sidebar-group {
2808
2710
  display: flex;
2809
2711
  flex-direction: column;
2810
2712
  gap: calc(var(--spacing) * 0.5);
2811
2713
  }
2812
- ._ao-sidebar-group + ._ao-sidebar-group {
2714
+ :scope._ao-sidebar-group + ._ao-sidebar-group, :scope ._ao-sidebar-group + ._ao-sidebar-group {
2813
2715
  margin-top: calc(var(--spacing) * 2);
2814
2716
  }
2815
- ._ao-sidebar-group-label {
2717
+ :scope._ao-sidebar-group-label, :scope ._ao-sidebar-group-label {
2816
2718
  padding-inline: calc(var(--spacing) * 2);
2817
2719
  padding-top: calc(var(--spacing) * 2);
2818
2720
  padding-bottom: calc(var(--spacing) * 1);
@@ -2823,7 +2725,7 @@
2823
2725
  color: var(--color-text-muted);
2824
2726
  text-transform: uppercase;
2825
2727
  }
2826
- ._ao-sidebar-item {
2728
+ :scope._ao-sidebar-item, :scope ._ao-sidebar-item {
2827
2729
  display: flex;
2828
2730
  cursor: pointer;
2829
2731
  align-items: center;
@@ -2861,13 +2763,13 @@
2861
2763
  outline-color: var(--color-primary);
2862
2764
  }
2863
2765
  }
2864
- ._ao-sidebar-item[aria-current="page"], ._ao-sidebar-item[data-active] {
2766
+ :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] {
2865
2767
  background-color: var(--color-primary-muted);
2866
2768
  --tw-font-weight: var(--font-weight-medium);
2867
2769
  font-weight: var(--font-weight-medium);
2868
2770
  color: var(--color-primary);
2869
2771
  }
2870
- ._ao-sidebar-icon {
2772
+ :scope._ao-sidebar-icon, :scope ._ao-sidebar-icon {
2871
2773
  display: inline-flex;
2872
2774
  width: calc(var(--spacing) * 4);
2873
2775
  height: calc(var(--spacing) * 4);
@@ -2876,17 +2778,17 @@
2876
2778
  justify-content: center;
2877
2779
  color: var(--color-text-muted);
2878
2780
  }
2879
- ._ao-sidebar-item[aria-current="page"] ._ao-sidebar-icon, ._ao-sidebar-item[data-active] ._ao-sidebar-icon {
2781
+ :scope._ao-sidebar-item[aria-current="page"] ._ao-sidebar-icon, :scope ._ao-sidebar-item[aria-current="page"] ._ao-sidebar-icon, :scope._ao-sidebar-item[data-active] ._ao-sidebar-icon, :scope ._ao-sidebar-item[data-active] ._ao-sidebar-icon {
2880
2782
  color: var(--color-primary);
2881
2783
  }
2882
- ._ao-sidebar-label {
2784
+ :scope._ao-sidebar-label, :scope ._ao-sidebar-label {
2883
2785
  min-width: calc(var(--spacing) * 0);
2884
2786
  flex: 1;
2885
2787
  overflow: hidden;
2886
2788
  text-overflow: ellipsis;
2887
2789
  white-space: nowrap;
2888
2790
  }
2889
- ._ao-sidebar-badge {
2791
+ :scope._ao-sidebar-badge, :scope ._ao-sidebar-badge {
2890
2792
  margin-left: auto;
2891
2793
  display: inline-flex;
2892
2794
  height: calc(var(--spacing) * 5);
@@ -2902,12 +2804,12 @@
2902
2804
  font-weight: var(--font-weight-medium);
2903
2805
  color: var(--color-text-muted);
2904
2806
  }
2905
- ._ao-sidebar-collapsible {
2807
+ :scope._ao-sidebar-collapsible, :scope ._ao-sidebar-collapsible {
2906
2808
  display: flex;
2907
2809
  flex-direction: column;
2908
2810
  interpolate-size: allow-keywords;
2909
2811
  }
2910
- ._ao-sidebar-collapsible-trigger {
2812
+ :scope._ao-sidebar-collapsible-trigger, :scope ._ao-sidebar-collapsible-trigger {
2911
2813
  display: flex;
2912
2814
  width: 100%;
2913
2815
  cursor: pointer;
@@ -2947,10 +2849,10 @@
2947
2849
  }
2948
2850
  list-style: none;
2949
2851
  }
2950
- ._ao-sidebar-collapsible-trigger::-webkit-details-marker {
2852
+ :scope._ao-sidebar-collapsible-trigger::-webkit-details-marker, :scope ._ao-sidebar-collapsible-trigger::-webkit-details-marker {
2951
2853
  display: none;
2952
2854
  }
2953
- ._ao-sidebar-collapsible-trigger::after {
2855
+ :scope._ao-sidebar-collapsible-trigger::after, :scope ._ao-sidebar-collapsible-trigger::after {
2954
2856
  content: "";
2955
2857
  margin-left: auto;
2956
2858
  width: 0.375rem;
@@ -2962,10 +2864,10 @@
2962
2864
  transition: transform 150ms ease;
2963
2865
  flex-shrink: 0;
2964
2866
  }
2965
- ._ao-sidebar-collapsible[open] > ._ao-sidebar-collapsible-trigger::after {
2867
+ :scope._ao-sidebar-collapsible[open] > ._ao-sidebar-collapsible-trigger::after, :scope ._ao-sidebar-collapsible[open] > ._ao-sidebar-collapsible-trigger::after {
2966
2868
  transform: rotate(45deg);
2967
2869
  }
2968
- ._ao-sidebar-collapsible-panel {
2870
+ :scope._ao-sidebar-collapsible-panel, :scope ._ao-sidebar-collapsible-panel {
2969
2871
  margin-top: calc(var(--spacing) * 0.5);
2970
2872
  display: flex;
2971
2873
  flex-direction: column;
@@ -2973,18 +2875,18 @@
2973
2875
  padding-left: calc(var(--spacing) * 4);
2974
2876
  overflow: hidden;
2975
2877
  }
2976
- ._ao-sidebar-collapsible::details-content {
2878
+ :scope._ao-sidebar-collapsible::details-content, :scope ._ao-sidebar-collapsible::details-content {
2977
2879
  opacity: 0;
2978
2880
  height: 0;
2979
2881
  overflow: clip;
2980
2882
  transition: opacity 150ms ease, height 150ms ease, content-visibility 150ms;
2981
2883
  transition-behavior: allow-discrete;
2982
2884
  }
2983
- ._ao-sidebar-collapsible[open]::details-content {
2885
+ :scope._ao-sidebar-collapsible[open]::details-content, :scope ._ao-sidebar-collapsible[open]::details-content {
2984
2886
  opacity: 1;
2985
2887
  height: auto;
2986
2888
  }
2987
- ._ao-sidebar-subitem {
2889
+ :scope._ao-sidebar-subitem, :scope ._ao-sidebar-subitem {
2988
2890
  display: flex;
2989
2891
  cursor: pointer;
2990
2892
  align-items: center;
@@ -3022,13 +2924,13 @@
3022
2924
  outline-color: var(--color-primary);
3023
2925
  }
3024
2926
  }
3025
- ._ao-sidebar-subitem[aria-current="page"], ._ao-sidebar-subitem[data-active] {
2927
+ :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] {
3026
2928
  background-color: var(--color-primary-muted);
3027
2929
  --tw-font-weight: var(--font-weight-medium);
3028
2930
  font-weight: var(--font-weight-medium);
3029
2931
  color: var(--color-primary);
3030
2932
  }
3031
- ._ao-sidebar-footer {
2933
+ :scope._ao-sidebar-footer, :scope ._ao-sidebar-footer {
3032
2934
  display: flex;
3033
2935
  flex-direction: column;
3034
2936
  gap: calc(var(--spacing) * 1);
@@ -3038,7 +2940,7 @@
3038
2940
  padding-inline: calc(var(--spacing) * 2);
3039
2941
  padding-block: calc(var(--spacing) * 2);
3040
2942
  }
3041
- ._ao-sidebar-collapse-toggle {
2943
+ :scope._ao-sidebar-collapse-toggle, :scope ._ao-sidebar-collapse-toggle {
3042
2944
  position: relative;
3043
2945
  display: inline-flex;
3044
2946
  width: calc(var(--spacing) * 7);
@@ -3067,13 +2969,13 @@
3067
2969
  }
3068
2970
  }
3069
2971
  }
3070
- ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible) {
2972
+ :scope._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible), :scope ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible) {
3071
2973
  outline-style: var(--tw-outline-style);
3072
2974
  outline-width: 2px;
3073
2975
  outline-offset: 2px;
3074
2976
  outline-color: var(--color-primary);
3075
2977
  }
3076
- ._ao-sidebar-collapse-toggle::before {
2978
+ :scope._ao-sidebar-collapse-toggle::before, :scope ._ao-sidebar-collapse-toggle::before {
3077
2979
  content: "";
3078
2980
  width: 0.5rem;
3079
2981
  height: 0.5rem;
@@ -3082,10 +2984,10 @@
3082
2984
  transform: rotate(45deg);
3083
2985
  transition: transform 150ms ease;
3084
2986
  }
3085
- ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle::before {
2987
+ :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle::before, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle::before {
3086
2988
  transform: rotate(-135deg);
3087
2989
  }
3088
- ._ao-sidebar-drawer-backdrop {
2990
+ :scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop {
3089
2991
  position: fixed;
3090
2992
  inset: calc(var(--spacing) * 0);
3091
2993
  z-index: 40;
@@ -3099,10 +3001,10 @@
3099
3001
  --tw-duration: 150ms;
3100
3002
  transition-duration: 150ms;
3101
3003
  }
3102
- ._ao-sidebar-drawer-backdrop[data-starting-style], ._ao-sidebar-drawer-backdrop[data-ending-style] {
3004
+ :scope._ao-sidebar-drawer-backdrop[data-starting-style], :scope ._ao-sidebar-drawer-backdrop[data-starting-style], :scope._ao-sidebar-drawer-backdrop[data-ending-style], :scope ._ao-sidebar-drawer-backdrop[data-ending-style] {
3103
3005
  opacity: 0%;
3104
3006
  }
3105
- ._ao-sidebar-drawer {
3007
+ :scope._ao-sidebar-drawer, :scope ._ao-sidebar-drawer {
3106
3008
  position: fixed;
3107
3009
  inset-block: calc(var(--spacing) * 0);
3108
3010
  left: calc(var(--spacing) * 0);
@@ -3121,17 +3023,15 @@
3121
3023
  transition-duration: 150ms;
3122
3024
  width: min(var(--app-shell-sidebar-w, 240px), 80vw);
3123
3025
  }
3124
- ._ao-sidebar-drawer[data-starting-style], ._ao-sidebar-drawer[data-ending-style] {
3026
+ :scope._ao-sidebar-drawer[data-starting-style], :scope ._ao-sidebar-drawer[data-starting-style], :scope._ao-sidebar-drawer[data-ending-style], :scope ._ao-sidebar-drawer[data-ending-style] {
3125
3027
  --tw-translate-x: -100%;
3126
3028
  translate: var(--tw-translate-x) var(--tw-translate-y);
3127
3029
  }
3128
- }
3129
- @layer components {
3130
- ._ao-tabs {
3030
+ :scope._ao-tabs, :scope ._ao-tabs {
3131
3031
  display: flex;
3132
3032
  flex-direction: column;
3133
3033
  }
3134
- ._ao-tabs ._ao-tab-list {
3034
+ :scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list {
3135
3035
  display: inline-flex;
3136
3036
  align-items: center;
3137
3037
  gap: calc(var(--spacing) * 1);
@@ -3140,7 +3040,7 @@
3140
3040
  border-color: var(--color-border);
3141
3041
  position: relative;
3142
3042
  }
3143
- ._ao-tabs ._ao-tab {
3043
+ :scope._ao-tabs ._ao-tab, :scope ._ao-tabs ._ao-tab {
3144
3044
  display: inline-flex;
3145
3045
  height: calc(var(--spacing) * 9);
3146
3046
  cursor: pointer;
@@ -3186,10 +3086,10 @@
3186
3086
  opacity: 50%;
3187
3087
  }
3188
3088
  }
3189
- ._ao-tabs ._ao-tab[data-selected], ._ao-tabs ._ao-tab[aria-selected="true"] {
3089
+ :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"] {
3190
3090
  color: var(--color-text);
3191
3091
  }
3192
- ._ao-tabs ._ao-tab-input {
3092
+ :scope._ao-tabs ._ao-tab-input, :scope ._ao-tabs ._ao-tab-input {
3193
3093
  position: absolute;
3194
3094
  width: 1px;
3195
3095
  height: 1px;
@@ -3199,19 +3099,19 @@
3199
3099
  opacity: 0;
3200
3100
  pointer-events: none;
3201
3101
  }
3202
- ._ao-tabs ._ao-tab-input:checked + ._ao-tab {
3102
+ :scope._ao-tabs ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs ._ao-tab-input:checked + ._ao-tab {
3203
3103
  color: var(--color-text);
3204
3104
  }
3205
- ._ao-tabs ._ao-tab-input:focus-visible + ._ao-tab {
3105
+ :scope._ao-tabs ._ao-tab-input:focus-visible + ._ao-tab, :scope ._ao-tabs ._ao-tab-input:focus-visible + ._ao-tab {
3206
3106
  outline-style: var(--tw-outline-style);
3207
3107
  outline-width: 2px;
3208
3108
  outline-offset: 2px;
3209
3109
  outline-color: var(--color-primary);
3210
3110
  }
3211
- ._ao-tabs-bordered ._ao-tab, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab {
3111
+ :scope._ao-tabs-bordered ._ao-tab, :scope ._ao-tabs-bordered ._ao-tab, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab {
3212
3112
  position: relative;
3213
3113
  }
3214
- ._ao-tabs-bordered ._ao-tab::after, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after {
3114
+ :scope._ao-tabs-bordered ._ao-tab::after, :scope ._ao-tabs-bordered ._ao-tab::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after {
3215
3115
  content: "";
3216
3116
  position: absolute;
3217
3117
  inset-inline: 0;
@@ -3221,10 +3121,10 @@
3221
3121
  transform: scaleX(0);
3222
3122
  transition: transform 150ms ease;
3223
3123
  }
3224
- ._ao-tabs-bordered ._ao-tab[data-selected]::after, ._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, ._ao-tabs-bordered ._ao-tab-input:checked + ._ao-tab::after, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked + ._ao-tab::after {
3124
+ :scope._ao-tabs-bordered ._ao-tab[data-selected]::after, :scope ._ao-tabs-bordered ._ao-tab[data-selected]::after, :scope._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, :scope._ao-tabs-bordered ._ao-tab-input:checked + ._ao-tab::after, :scope ._ao-tabs-bordered ._ao-tab-input:checked + ._ao-tab::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked + ._ao-tab::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked + ._ao-tab::after {
3225
3125
  transform: scaleX(1);
3226
3126
  }
3227
- ._ao-tabs-boxed ._ao-tab-list {
3127
+ :scope._ao-tabs-boxed ._ao-tab-list, :scope ._ao-tabs-boxed ._ao-tab-list {
3228
3128
  gap: calc(var(--spacing) * 0);
3229
3129
  border-radius: var(--radius-md);
3230
3130
  border-style: var(--tw-border-style);
@@ -3233,54 +3133,54 @@
3233
3133
  background-color: var(--color-surface-muted);
3234
3134
  padding: calc(var(--spacing) * 0.5);
3235
3135
  }
3236
- ._ao-tabs-boxed ._ao-tab {
3136
+ :scope._ao-tabs-boxed ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab {
3237
3137
  border-radius: 0.25rem;
3238
3138
  }
3239
- ._ao-tabs-boxed ._ao-tab[data-selected], ._ao-tabs-boxed ._ao-tab[aria-selected="true"], ._ao-tabs-boxed ._ao-tab-input:checked + ._ao-tab {
3139
+ :scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked + ._ao-tab {
3240
3140
  background-color: var(--color-surface);
3241
3141
  color: var(--color-text);
3242
3142
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3243
3143
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3244
3144
  }
3245
- ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list {
3145
+ :scope._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list, :scope ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list {
3246
3146
  display: flex;
3247
3147
  width: 100%;
3248
3148
  }
3249
- ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab {
3149
+ :scope._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab, :scope ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab {
3250
3150
  flex: 1;
3251
3151
  justify-content: center;
3252
3152
  }
3253
- ._ao-tabs-sm ._ao-tab {
3153
+ :scope._ao-tabs-sm ._ao-tab, :scope ._ao-tabs-sm ._ao-tab {
3254
3154
  height: calc(var(--spacing) * 7);
3255
3155
  padding-inline: calc(var(--spacing) * 2);
3256
3156
  font-size: var(--text-xs);
3257
3157
  line-height: var(--tw-leading, var(--text-xs--line-height));
3258
3158
  }
3259
- ._ao-tabs-lg ._ao-tab {
3159
+ :scope._ao-tabs-lg ._ao-tab, :scope ._ao-tabs-lg ._ao-tab {
3260
3160
  height: calc(var(--spacing) * 11);
3261
3161
  padding-inline: calc(var(--spacing) * 4);
3262
3162
  font-size: var(--text-base);
3263
3163
  line-height: var(--tw-leading, var(--text-base--line-height));
3264
3164
  }
3265
- ._ao-tabs ._ao-tab-panel {
3165
+ :scope._ao-tabs ._ao-tab-panel, :scope ._ao-tabs ._ao-tab-panel {
3266
3166
  padding-top: calc(var(--spacing) * 3);
3267
3167
  --tw-outline-style: none;
3268
3168
  outline-style: none;
3269
3169
  }
3270
- ._ao-tabs ._ao-tab-panel {
3170
+ :scope._ao-tabs ._ao-tab-panel, :scope ._ao-tabs ._ao-tab-panel {
3271
3171
  display: none;
3272
3172
  }
3273
- ._ao-tabs:has(._ao-tab-input[value="1"]:checked) ._ao-tab-panel[data-value="1"], ._ao-tabs:has(._ao-tab-input[value="2"]:checked) ._ao-tab-panel[data-value="2"], ._ao-tabs:has(._ao-tab-input[value="3"]:checked) ._ao-tab-panel[data-value="3"], ._ao-tabs:has(._ao-tab-input[value="4"]:checked) ._ao-tab-panel[data-value="4"], ._ao-tabs:has(._ao-tab-input[value="5"]:checked) ._ao-tab-panel[data-value="5"], ._ao-tabs:has(._ao-tab-input[value="6"]:checked) ._ao-tab-panel[data-value="6"] {
3173
+ :scope._ao-tabs:has(._ao-tab-input[value="1"]:checked) ._ao-tab-panel[data-value="1"], :scope ._ao-tabs:has(._ao-tab-input[value="1"]:checked) ._ao-tab-panel[data-value="1"], :scope._ao-tabs:has(._ao-tab-input[value="2"]:checked) ._ao-tab-panel[data-value="2"], :scope ._ao-tabs:has(._ao-tab-input[value="2"]:checked) ._ao-tab-panel[data-value="2"], :scope._ao-tabs:has(._ao-tab-input[value="3"]:checked) ._ao-tab-panel[data-value="3"], :scope ._ao-tabs:has(._ao-tab-input[value="3"]:checked) ._ao-tab-panel[data-value="3"], :scope._ao-tabs:has(._ao-tab-input[value="4"]:checked) ._ao-tab-panel[data-value="4"], :scope ._ao-tabs:has(._ao-tab-input[value="4"]:checked) ._ao-tab-panel[data-value="4"], :scope._ao-tabs:has(._ao-tab-input[value="5"]:checked) ._ao-tab-panel[data-value="5"], :scope ._ao-tabs:has(._ao-tab-input[value="5"]:checked) ._ao-tab-panel[data-value="5"], :scope._ao-tabs:has(._ao-tab-input[value="6"]:checked) ._ao-tab-panel[data-value="6"], :scope ._ao-tabs:has(._ao-tab-input[value="6"]:checked) ._ao-tab-panel[data-value="6"] {
3274
3174
  display: block;
3275
3175
  }
3276
- ._ao-tabs ._ao-tab-panel:not([hidden]):not([data-value]) {
3176
+ :scope._ao-tabs ._ao-tab-panel:not([hidden]):not([data-value]), :scope ._ao-tabs ._ao-tab-panel:not([hidden]):not([data-value]) {
3277
3177
  display: block;
3278
3178
  }
3279
- ._ao-tabs[data-orientation="vertical"] {
3179
+ :scope._ao-tabs[data-orientation="vertical"], :scope ._ao-tabs[data-orientation="vertical"] {
3280
3180
  flex-direction: row;
3281
3181
  gap: calc(var(--spacing) * 3);
3282
3182
  }
3283
- ._ao-tabs[data-orientation="vertical"] ._ao-tab-list {
3183
+ :scope._ao-tabs[data-orientation="vertical"] ._ao-tab-list, :scope ._ao-tabs[data-orientation="vertical"] ._ao-tab-list {
3284
3184
  flex-direction: column;
3285
3185
  align-items: stretch;
3286
3186
  border-right-style: var(--tw-border-style);
@@ -3289,11 +3189,11 @@
3289
3189
  border-bottom-width: 0px;
3290
3190
  border-color: var(--color-border);
3291
3191
  }
3292
- ._ao-tabs[data-orientation="vertical"] ._ao-tab {
3192
+ :scope._ao-tabs[data-orientation="vertical"] ._ao-tab, :scope ._ao-tabs[data-orientation="vertical"] ._ao-tab {
3293
3193
  width: 100%;
3294
3194
  justify-content: flex-start;
3295
3195
  }
3296
- ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab::after, ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after {
3196
+ :scope._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab::after, :scope ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab::after, :scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after {
3297
3197
  inset-inline: auto;
3298
3198
  inset-inline-end: -1px;
3299
3199
  inset-block: 0;
@@ -3301,19 +3201,17 @@
3301
3201
  block-size: auto;
3302
3202
  transform: scaleY(0);
3303
3203
  }
3304
- ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[data-selected]::after, ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after {
3204
+ :scope._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[data-selected]::after, :scope ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[data-selected]::after, :scope._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, :scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after {
3305
3205
  transform: scaleY(1);
3306
3206
  }
3307
- }
3308
- @layer components {
3309
- ._ao-table {
3207
+ :scope._ao-table, :scope ._ao-table {
3310
3208
  width: 100%;
3311
3209
  border-collapse: collapse;
3312
3210
  font-size: var(--text-sm);
3313
3211
  line-height: var(--tw-leading, var(--text-sm--line-height));
3314
3212
  color: var(--color-text);
3315
3213
  }
3316
- ._ao-table :where(th, td), ._ao-table-cell, ._ao-table-header-cell {
3214
+ :scope._ao-table :where(th, td), :scope ._ao-table :where(th, td), :scope._ao-table-cell, :scope ._ao-table-cell, :scope._ao-table-header-cell, :scope ._ao-table-header-cell {
3317
3215
  border-bottom-style: var(--tw-border-style);
3318
3216
  border-bottom-width: 1px;
3319
3217
  border-color: var(--color-border);
@@ -3322,7 +3220,7 @@
3322
3220
  text-align: left;
3323
3221
  vertical-align: middle;
3324
3222
  }
3325
- ._ao-table :where(thead th), ._ao-table-header-cell {
3223
+ :scope._ao-table :where(thead th), :scope ._ao-table :where(thead th), :scope._ao-table-header-cell, :scope ._ao-table-header-cell {
3326
3224
  border-bottom-color: var(--color-border-strong);
3327
3225
  background-color: var(--color-surface-muted);
3328
3226
  --tw-font-weight: var(--font-weight-medium);
@@ -3330,92 +3228,90 @@
3330
3228
  white-space: nowrap;
3331
3229
  color: var(--color-text-muted);
3332
3230
  }
3333
- ._ao-table > :last-child > tr:last-child :where(td), ._ao-table > :last-child > tr:last-child ._ao-table-cell {
3231
+ :scope._ao-table > :last-child > tr:last-child :where(td), :scope ._ao-table > :last-child > tr:last-child :where(td), :scope._ao-table > :last-child > tr:last-child ._ao-table-cell, :scope ._ao-table > :last-child > tr:last-child ._ao-table-cell {
3334
3232
  border-bottom-style: var(--tw-border-style);
3335
3233
  border-bottom-width: 0px;
3336
3234
  }
3337
- ._ao-table :where(th, td)[data-align="right"] {
3235
+ :scope._ao-table :where(th, td)[data-align="right"], :scope ._ao-table :where(th, td)[data-align="right"] {
3338
3236
  text-align: right;
3339
3237
  }
3340
- ._ao-table :where(th, td)[data-align="center"] {
3238
+ :scope._ao-table :where(th, td)[data-align="center"], :scope ._ao-table :where(th, td)[data-align="center"] {
3341
3239
  text-align: center;
3342
3240
  }
3343
- ._ao-table-cell-numeric {
3241
+ :scope._ao-table-cell-numeric, :scope ._ao-table-cell-numeric {
3344
3242
  text-align: right;
3345
3243
  --tw-numeric-spacing: tabular-nums;
3346
3244
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3347
3245
  }
3348
- ._ao-table-cell-gutter {
3246
+ :scope._ao-table-cell-gutter, :scope ._ao-table-cell-gutter {
3349
3247
  width: calc(var(--spacing) * 6);
3350
3248
  padding-inline: calc(var(--spacing) * 0);
3351
3249
  text-align: center;
3352
3250
  color: var(--color-text-muted);
3353
3251
  }
3354
- ._ao-table-cell-gutter > :is(i, svg) {
3252
+ :scope._ao-table-cell-gutter > :is(i, svg), :scope ._ao-table-cell-gutter > :is(i, svg) {
3355
3253
  font-size: 1rem;
3356
3254
  line-height: 1;
3357
3255
  vertical-align: middle;
3358
3256
  }
3359
- ._ao-table-striped tbody tr:nth-child(even) :where(td) {
3257
+ :scope._ao-table-striped tbody tr:nth-child(even) :where(td), :scope ._ao-table-striped tbody tr:nth-child(even) :where(td) {
3360
3258
  background-color: var(--color-surface-muted);
3361
3259
  }
3362
- ._ao-table-bordered {
3260
+ :scope._ao-table-bordered, :scope ._ao-table-bordered {
3363
3261
  border-style: var(--tw-border-style);
3364
3262
  border-width: 1px;
3365
3263
  border-color: var(--color-border);
3366
3264
  }
3367
- ._ao-table-bordered :where(th, td) {
3265
+ :scope._ao-table-bordered :where(th, td), :scope ._ao-table-bordered :where(th, td) {
3368
3266
  border-style: var(--tw-border-style);
3369
3267
  border-width: 1px;
3370
3268
  border-color: var(--color-border);
3371
3269
  }
3372
- ._ao-table-relaxed :where(th, td) {
3270
+ :scope._ao-table-relaxed :where(th, td), :scope ._ao-table-relaxed :where(th, td) {
3373
3271
  padding-inline: calc(var(--spacing) * 4);
3374
3272
  padding-block: calc(var(--spacing) * 3);
3375
3273
  }
3376
- ._ao-table-sticky thead :where(th) {
3274
+ :scope._ao-table-sticky thead :where(th), :scope ._ao-table-sticky thead :where(th) {
3377
3275
  position: sticky;
3378
3276
  top: calc(var(--spacing) * 0);
3379
3277
  z-index: 10;
3380
3278
  background-color: var(--color-surface-muted);
3381
3279
  }
3382
- ._ao-table tbody tr {
3280
+ :scope._ao-table tbody tr, :scope ._ao-table tbody tr {
3383
3281
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3384
3282
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3385
3283
  transition-duration: var(--tw-duration, var(--default-transition-duration));
3386
3284
  --tw-duration: 75ms;
3387
3285
  transition-duration: 75ms;
3388
3286
  }
3389
- ._ao-table tbody tr:hover :where(td) {
3287
+ :scope._ao-table tbody tr:hover :where(td), :scope ._ao-table tbody tr:hover :where(td) {
3390
3288
  background-color: var(--color-surface-muted);
3391
3289
  }
3392
- ._ao-table tbody tr:has(input[type="checkbox"]:checked), ._ao-table tbody tr:has(._ao-checkbox[data-checked]), ._ao-table tbody tr[data-selected] {
3290
+ :scope._ao-table tbody tr:has(input[type="checkbox"]:checked), :scope ._ao-table tbody tr:has(input[type="checkbox"]:checked), :scope._ao-table tbody tr:has(._ao-checkbox[data-checked]), :scope ._ao-table tbody tr:has(._ao-checkbox[data-checked]), :scope._ao-table tbody tr[data-selected], :scope ._ao-table tbody tr[data-selected] {
3393
3291
  background-color: var(--color-primary-muted);
3394
3292
  }
3395
- ._ao-table tbody tr:has(input[type="checkbox"]:checked):hover :where(td), ._ao-table tbody tr:has(._ao-checkbox[data-checked]):hover :where(td), ._ao-table tbody tr[data-selected]:hover :where(td) {
3293
+ :scope._ao-table tbody tr:has(input[type="checkbox"]:checked):hover :where(td), :scope ._ao-table tbody tr:has(input[type="checkbox"]:checked):hover :where(td), :scope._ao-table tbody tr:has(._ao-checkbox[data-checked]):hover :where(td), :scope ._ao-table tbody tr:has(._ao-checkbox[data-checked]):hover :where(td), :scope._ao-table tbody tr[data-selected]:hover :where(td), :scope ._ao-table tbody tr[data-selected]:hover :where(td) {
3396
3294
  background-color: var(--color-primary-muted);
3397
3295
  }
3398
- ._ao-table-row-link {
3296
+ :scope._ao-table-row-link, :scope ._ao-table-row-link {
3399
3297
  position: relative;
3400
3298
  cursor: pointer;
3401
3299
  }
3402
- ._ao-table-row-link:hover :where(td) {
3300
+ :scope._ao-table-row-link:hover :where(td), :scope ._ao-table-row-link:hover :where(td) {
3403
3301
  background-color: var(--color-surface-muted);
3404
3302
  }
3405
- ._ao-table-row-link a:first-of-type::after {
3303
+ :scope._ao-table-row-link a:first-of-type::after, :scope ._ao-table-row-link a:first-of-type::after {
3406
3304
  content: "";
3407
3305
  position: absolute;
3408
3306
  inset: calc(var(--spacing) * 0);
3409
3307
  }
3410
- ._ao-table-row-link:focus-within {
3308
+ :scope._ao-table-row-link:focus-within, :scope ._ao-table-row-link:focus-within {
3411
3309
  outline-style: var(--tw-outline-style);
3412
3310
  outline-width: 2px;
3413
3311
  outline-offset: calc(2px * -1);
3414
3312
  outline-color: var(--color-primary);
3415
3313
  }
3416
- }
3417
- @layer components {
3418
- ._ao-tooltip {
3314
+ :scope._ao-tooltip, :scope ._ao-tooltip {
3419
3315
  pointer-events: none;
3420
3316
  display: inline-block;
3421
3317
  max-width: var(--container-xs);
@@ -3434,34 +3330,34 @@
3434
3330
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3435
3331
  text-wrap: balance;
3436
3332
  }
3437
- ._ao-tooltip-sm {
3333
+ :scope._ao-tooltip-sm, :scope ._ao-tooltip-sm {
3438
3334
  padding-inline: calc(var(--spacing) * 1.5);
3439
3335
  padding-block: calc(var(--spacing) * 0.5);
3440
3336
  }
3441
- ._ao-tooltip {
3337
+ :scope._ao-tooltip, :scope ._ao-tooltip {
3442
3338
  transition: opacity 150ms ease-out, transform 150ms ease-out;
3443
3339
  }
3444
- ._ao-tooltip[data-starting-style], ._ao-tooltip[data-ending-style] {
3340
+ :scope._ao-tooltip[data-starting-style], :scope ._ao-tooltip[data-starting-style], :scope._ao-tooltip[data-ending-style], :scope ._ao-tooltip[data-ending-style] {
3445
3341
  opacity: 0;
3446
3342
  }
3447
- ._ao-tooltip[data-side="top"][data-starting-style], ._ao-tooltip[data-side="top"][data-ending-style] {
3343
+ :scope._ao-tooltip[data-side="top"][data-starting-style], :scope ._ao-tooltip[data-side="top"][data-starting-style], :scope._ao-tooltip[data-side="top"][data-ending-style], :scope ._ao-tooltip[data-side="top"][data-ending-style] {
3448
3344
  transform: translateY(0.25rem);
3449
3345
  }
3450
- ._ao-tooltip[data-side="bottom"][data-starting-style], ._ao-tooltip[data-side="bottom"][data-ending-style] {
3346
+ :scope._ao-tooltip[data-side="bottom"][data-starting-style], :scope ._ao-tooltip[data-side="bottom"][data-starting-style], :scope._ao-tooltip[data-side="bottom"][data-ending-style], :scope ._ao-tooltip[data-side="bottom"][data-ending-style] {
3451
3347
  transform: translateY(-0.25rem);
3452
3348
  }
3453
- ._ao-tooltip[data-side="left"][data-starting-style], ._ao-tooltip[data-side="left"][data-ending-style] {
3349
+ :scope._ao-tooltip[data-side="left"][data-starting-style], :scope ._ao-tooltip[data-side="left"][data-starting-style], :scope._ao-tooltip[data-side="left"][data-ending-style], :scope ._ao-tooltip[data-side="left"][data-ending-style] {
3454
3350
  transform: translateX(0.25rem);
3455
3351
  }
3456
- ._ao-tooltip[data-side="right"][data-starting-style], ._ao-tooltip[data-side="right"][data-ending-style] {
3352
+ :scope._ao-tooltip[data-side="right"][data-starting-style], :scope ._ao-tooltip[data-side="right"][data-starting-style], :scope._ao-tooltip[data-side="right"][data-ending-style], :scope ._ao-tooltip[data-side="right"][data-ending-style] {
3457
3353
  transform: translateX(-0.25rem);
3458
3354
  }
3459
- ._ao-tooltip-wrap {
3355
+ :scope._ao-tooltip-wrap, :scope ._ao-tooltip-wrap {
3460
3356
  position: relative;
3461
3357
  display: inline-flex;
3462
3358
  align-items: center;
3463
3359
  }
3464
- ._ao-tooltip-wrap > ._ao-tooltip {
3360
+ :scope._ao-tooltip-wrap > ._ao-tooltip, :scope ._ao-tooltip-wrap > ._ao-tooltip {
3465
3361
  visibility: hidden;
3466
3362
  position: absolute;
3467
3363
  opacity: 0%;
@@ -3471,7 +3367,7 @@
3471
3367
  transform: translateX(-50%);
3472
3368
  transition: opacity 150ms ease-out 0ms, visibility 0s linear 150ms;
3473
3369
  }
3474
- ._ao-tooltip-wrap-bottom > ._ao-tooltip {
3370
+ :scope._ao-tooltip-wrap-bottom > ._ao-tooltip, :scope ._ao-tooltip-wrap-bottom > ._ao-tooltip {
3475
3371
  top: 100%;
3476
3372
  right: auto;
3477
3373
  bottom: auto;
@@ -3482,7 +3378,7 @@
3482
3378
  margin-left: 0;
3483
3379
  transform: translateX(-50%);
3484
3380
  }
3485
- ._ao-tooltip-wrap-left > ._ao-tooltip {
3381
+ :scope._ao-tooltip-wrap-left > ._ao-tooltip, :scope ._ao-tooltip-wrap-left > ._ao-tooltip {
3486
3382
  top: 50%;
3487
3383
  right: 100%;
3488
3384
  bottom: auto;
@@ -3493,7 +3389,7 @@
3493
3389
  margin-left: 0;
3494
3390
  transform: translateY(-50%);
3495
3391
  }
3496
- ._ao-tooltip-wrap-right > ._ao-tooltip {
3392
+ :scope._ao-tooltip-wrap-right > ._ao-tooltip, :scope ._ao-tooltip-wrap-right > ._ao-tooltip {
3497
3393
  top: 50%;
3498
3394
  right: auto;
3499
3395
  bottom: auto;
@@ -3504,44 +3400,83 @@
3504
3400
  margin-left: calc(var(--spacing) * 1.5);
3505
3401
  transform: translateY(-50%);
3506
3402
  }
3507
- ._ao-tooltip-wrap:hover > ._ao-tooltip, ._ao-tooltip-wrap:focus-within > ._ao-tooltip {
3403
+ :scope._ao-tooltip-wrap:hover > ._ao-tooltip, :scope ._ao-tooltip-wrap:hover > ._ao-tooltip, :scope._ao-tooltip-wrap:focus-within > ._ao-tooltip, :scope ._ao-tooltip-wrap:focus-within > ._ao-tooltip {
3508
3404
  visibility: visible;
3509
3405
  opacity: 100%;
3510
3406
  transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
3511
3407
  }
3512
- }
3513
- @layer properties {
3514
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3515
- :scope, :scope *, :scope::before, :scope ::before, :scope::after, :scope ::after, :scope::backdrop, :scope ::backdrop {
3516
- --tw-ordinal: initial;
3517
- --tw-slashed-zero: initial;
3518
- --tw-numeric-figure: initial;
3519
- --tw-numeric-spacing: initial;
3520
- --tw-numeric-fraction: initial;
3521
- --tw-shadow: 0 0 #0000;
3522
- --tw-shadow-color: initial;
3523
- --tw-shadow-alpha: 100%;
3524
- --tw-inset-shadow: 0 0 #0000;
3525
- --tw-inset-shadow-color: initial;
3526
- --tw-inset-shadow-alpha: 100%;
3527
- --tw-ring-color: initial;
3528
- --tw-ring-shadow: 0 0 #0000;
3529
- --tw-inset-ring-color: initial;
3530
- --tw-inset-ring-shadow: 0 0 #0000;
3531
- --tw-ring-inset: initial;
3532
- --tw-ring-offset-width: 0px;
3533
- --tw-ring-offset-color: #fff;
3534
- --tw-ring-offset-shadow: 0 0 #0000;
3535
- --tw-leading: initial;
3536
- --tw-font-weight: initial;
3537
- --tw-border-style: solid;
3538
- --tw-outline-style: solid;
3539
- --tw-duration: initial;
3540
- --tw-translate-x: 0;
3541
- --tw-translate-y: 0;
3542
- --tw-translate-z: 0;
3543
- --tw-tracking: initial;
3408
+ :scope._ao-collapse, :scope ._ao-collapse {
3409
+ visibility: collapse;
3410
+ }
3411
+ :scope._ao-visible, :scope ._ao-visible {
3412
+ visibility: visible;
3413
+ }
3414
+ :scope._ao-sr-only, :scope ._ao-sr-only {
3415
+ position: absolute;
3416
+ width: 1px;
3417
+ height: 1px;
3418
+ padding: 0;
3419
+ margin: -1px;
3420
+ overflow: hidden;
3421
+ clip-path: inset(50%);
3422
+ white-space: nowrap;
3423
+ border-width: 0;
3424
+ }
3425
+ :scope._ao-sticky, :scope ._ao-sticky {
3426
+ position: sticky;
3427
+ }
3428
+ :scope._ao-container, :scope ._ao-container {
3429
+ width: 100%;
3430
+ @media (width >= 40rem) {
3431
+ max-width: 40rem;
3432
+ }
3433
+ @media (width >= 48rem) {
3434
+ max-width: 48rem;
3435
+ }
3436
+ @media (width >= 64rem) {
3437
+ max-width: 64rem;
3438
+ }
3439
+ @media (width >= 80rem) {
3440
+ max-width: 80rem;
3441
+ }
3442
+ @media (width >= 96rem) {
3443
+ max-width: 96rem;
3544
3444
  }
3545
3445
  }
3546
- }
3446
+ :scope._ao-block, :scope ._ao-block {
3447
+ display: block;
3448
+ }
3449
+ :scope._ao-contents, :scope ._ao-contents {
3450
+ display: contents;
3451
+ }
3452
+ :scope._ao-grid, :scope ._ao-grid {
3453
+ display: grid;
3454
+ }
3455
+ :scope._ao-hidden, :scope ._ao-hidden {
3456
+ display: none;
3457
+ }
3458
+ :scope._ao-table, :scope ._ao-table {
3459
+ display: table;
3460
+ }
3461
+ :scope._ao-table-cell, :scope ._ao-table-cell {
3462
+ display: table-cell;
3463
+ }
3464
+ :scope._ao-flex-1, :scope ._ao-flex-1 {
3465
+ flex: 1;
3466
+ }
3467
+ :scope._ao-text-right, :scope ._ao-text-right {
3468
+ text-align: right;
3469
+ }
3470
+ :scope._ao-tabular-nums, :scope ._ao-tabular-nums {
3471
+ --tw-numeric-spacing: tabular-nums;
3472
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3473
+ }
3474
+ :scope._ao-shadow, :scope ._ao-shadow {
3475
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3476
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3477
+ }
3478
+ :scope._ao-select-all, :scope ._ao-select-all {
3479
+ -webkit-user-select: all;
3480
+ user-select: all;
3481
+ }
3547
3482
  }