@aortl/admin-react 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,5 @@
1
1
  /*! @aortl/admin-css scoped variant — @scope (._ao-admin-root); admin classes prefixed with _ao-. */
2
2
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
3
- @layer properties;
4
- @layer theme, base, components, utilities;
5
3
  @font-face {
6
4
  font-family: "IBM Plex Sans";
7
5
  font-style: normal;
@@ -50,6 +48,26 @@
50
48
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format("woff2");
51
49
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
52
50
  }
51
+ @property --tw-rotate-x {
52
+ syntax: "*";
53
+ inherits: false;
54
+ }
55
+ @property --tw-rotate-y {
56
+ syntax: "*";
57
+ inherits: false;
58
+ }
59
+ @property --tw-rotate-z {
60
+ syntax: "*";
61
+ inherits: false;
62
+ }
63
+ @property --tw-skew-x {
64
+ syntax: "*";
65
+ inherits: false;
66
+ }
67
+ @property --tw-skew-y {
68
+ syntax: "*";
69
+ inherits: false;
70
+ }
53
71
  @property --tw-ordinal {
54
72
  syntax: "*";
55
73
  inherits: false;
@@ -70,6 +88,28 @@
70
88
  syntax: "*";
71
89
  inherits: false;
72
90
  }
91
+ @property --tw-leading {
92
+ syntax: "*";
93
+ inherits: false;
94
+ }
95
+ @property --tw-font-weight {
96
+ syntax: "*";
97
+ inherits: false;
98
+ }
99
+ @property --tw-border-style {
100
+ syntax: "*";
101
+ inherits: false;
102
+ initial-value: solid;
103
+ }
104
+ @property --tw-outline-style {
105
+ syntax: "*";
106
+ inherits: false;
107
+ initial-value: solid;
108
+ }
109
+ @property --tw-duration {
110
+ syntax: "*";
111
+ inherits: false;
112
+ }
73
113
  @property --tw-shadow {
74
114
  syntax: "*";
75
115
  inherits: false;
@@ -135,28 +175,6 @@
135
175
  inherits: false;
136
176
  initial-value: 0 0 #0000;
137
177
  }
138
- @property --tw-leading {
139
- syntax: "*";
140
- inherits: false;
141
- }
142
- @property --tw-font-weight {
143
- syntax: "*";
144
- inherits: false;
145
- }
146
- @property --tw-border-style {
147
- syntax: "*";
148
- inherits: false;
149
- initial-value: solid;
150
- }
151
- @property --tw-outline-style {
152
- syntax: "*";
153
- inherits: false;
154
- initial-value: solid;
155
- }
156
- @property --tw-duration {
157
- syntax: "*";
158
- inherits: false;
159
- }
160
178
  @property --tw-translate-x {
161
179
  syntax: "*";
162
180
  inherits: false;
@@ -177,8 +195,71 @@
177
195
  inherits: false;
178
196
  }
179
197
  @scope (._ao-admin-root) {
180
- @layer theme {
181
- :scope, :scope:host, :scope :host {
198
+ :scope :where(
199
+ h1, h2, h3, h4, h5, h6,
200
+ p, a,
201
+ ul, ol, li, dl, dt, dd,
202
+ blockquote, pre, code,
203
+ button, input, textarea, select, label, fieldset, legend,
204
+ table, thead, tbody, tfoot, tr, th, td
205
+ ) {
206
+ font-family: inherit;
207
+ font-style: inherit;
208
+ font-variant: normal;
209
+ font-weight: inherit;
210
+ color: inherit;
211
+ letter-spacing: normal;
212
+ text-transform: none;
213
+ text-decoration: inherit;
214
+ line-height: inherit;
215
+ }
216
+ :scope {
217
+ color-scheme: light dark;
218
+ }
219
+ :scope[data-theme="dark"], :scope [data-theme="dark"] {
220
+ color-scheme: dark;
221
+ }
222
+ :scope[data-theme="light"], :scope [data-theme="light"] {
223
+ color-scheme: light;
224
+ }
225
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
226
+ :scope, :scope *, :scope::before, :scope ::before, :scope::after, :scope ::after, :scope::backdrop, :scope ::backdrop {
227
+ --tw-rotate-x: initial;
228
+ --tw-rotate-y: initial;
229
+ --tw-rotate-z: initial;
230
+ --tw-skew-x: initial;
231
+ --tw-skew-y: initial;
232
+ --tw-ordinal: initial;
233
+ --tw-slashed-zero: initial;
234
+ --tw-numeric-figure: initial;
235
+ --tw-numeric-spacing: initial;
236
+ --tw-numeric-fraction: initial;
237
+ --tw-leading: initial;
238
+ --tw-font-weight: initial;
239
+ --tw-border-style: solid;
240
+ --tw-outline-style: solid;
241
+ --tw-duration: initial;
242
+ --tw-shadow: 0 0 #0000;
243
+ --tw-shadow-color: initial;
244
+ --tw-shadow-alpha: 100%;
245
+ --tw-inset-shadow: 0 0 #0000;
246
+ --tw-inset-shadow-color: initial;
247
+ --tw-inset-shadow-alpha: 100%;
248
+ --tw-ring-color: initial;
249
+ --tw-ring-shadow: 0 0 #0000;
250
+ --tw-inset-ring-color: initial;
251
+ --tw-inset-ring-shadow: 0 0 #0000;
252
+ --tw-ring-inset: initial;
253
+ --tw-ring-offset-width: 0px;
254
+ --tw-ring-offset-color: #fff;
255
+ --tw-ring-offset-shadow: 0 0 #0000;
256
+ --tw-translate-x: 0;
257
+ --tw-translate-y: 0;
258
+ --tw-translate-z: 0;
259
+ --tw-tracking: initial;
260
+ }
261
+ }
262
+ :scope, :scope:host, :scope :host {
182
263
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
183
264
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
184
265
  monospace;
@@ -381,15 +462,13 @@
381
462
  --color-info-muted: light-dark(var(--color-cyan-50), var(--color-cyan-950));
382
463
  --color-info-content: light-dark(var(--color-paper), var(--color-black));
383
464
  }
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 {
465
+ :scope, :scope *, :scope::after, :scope ::after, :scope::before, :scope ::before, :scope::backdrop, :scope ::backdrop, :scope::file-selector-button, :scope ::file-selector-button {
387
466
  box-sizing: border-box;
388
467
  margin: 0;
389
468
  padding: 0;
390
469
  border: 0 solid;
391
470
  }
392
- :scope, :scope:host, :scope :host {
471
+ :scope, :scope:host, :scope :host {
393
472
  line-height: 1.5;
394
473
  -webkit-text-size-adjust: 100%;
395
474
  tab-size: 4;
@@ -398,74 +477,74 @@
398
477
  font-variation-settings: var(--default-font-variation-settings, normal);
399
478
  -webkit-tap-highlight-color: transparent;
400
479
  }
401
- :scope hr {
480
+ :scope hr {
402
481
  height: 0;
403
482
  color: inherit;
404
483
  border-top-width: 1px;
405
484
  }
406
- :scope abbr:where([title]) {
485
+ :scope abbr:where([title]) {
407
486
  -webkit-text-decoration: underline dotted;
408
487
  text-decoration: underline dotted;
409
488
  }
410
- :scope h1, :scope h2, :scope h3, :scope h4, :scope h5, :scope h6 {
489
+ :scope h1, :scope h2, :scope h3, :scope h4, :scope h5, :scope h6 {
411
490
  font-size: inherit;
412
491
  font-weight: inherit;
413
492
  }
414
- :scope a {
493
+ :scope a {
415
494
  color: inherit;
416
495
  -webkit-text-decoration: inherit;
417
496
  text-decoration: inherit;
418
497
  }
419
- :scope b, :scope strong {
498
+ :scope b, :scope strong {
420
499
  font-weight: bolder;
421
500
  }
422
- :scope code, :scope kbd, :scope samp, :scope pre {
501
+ :scope code, :scope kbd, :scope samp, :scope pre {
423
502
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
424
503
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
425
504
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
426
505
  font-size: 1em;
427
506
  }
428
- :scope small {
507
+ :scope small {
429
508
  font-size: 80%;
430
509
  }
431
- :scope sub, :scope sup {
510
+ :scope sub, :scope sup {
432
511
  font-size: 75%;
433
512
  line-height: 0;
434
513
  position: relative;
435
514
  vertical-align: baseline;
436
515
  }
437
- :scope sub {
516
+ :scope sub {
438
517
  bottom: -0.25em;
439
518
  }
440
- :scope sup {
519
+ :scope sup {
441
520
  top: -0.5em;
442
521
  }
443
- :scope table {
522
+ :scope table {
444
523
  text-indent: 0;
445
524
  border-color: inherit;
446
525
  border-collapse: collapse;
447
526
  }
448
- :scope:-moz-focusring, :scope :-moz-focusring {
527
+ :scope:-moz-focusring, :scope :-moz-focusring {
449
528
  outline: auto;
450
529
  }
451
- :scope progress {
530
+ :scope progress {
452
531
  vertical-align: baseline;
453
532
  }
454
- :scope summary {
533
+ :scope summary {
455
534
  display: list-item;
456
535
  }
457
- :scope ol, :scope ul, :scope menu {
536
+ :scope ol, :scope ul, :scope menu {
458
537
  list-style: none;
459
538
  }
460
- :scope img, :scope svg, :scope video, :scope canvas, :scope audio, :scope iframe, :scope embed, :scope object {
539
+ :scope img, :scope svg, :scope video, :scope canvas, :scope audio, :scope iframe, :scope embed, :scope object {
461
540
  display: block;
462
541
  vertical-align: middle;
463
542
  }
464
- :scope img, :scope video {
543
+ :scope img, :scope video {
465
544
  max-width: 100%;
466
545
  height: auto;
467
546
  }
468
- :scope button, :scope input, :scope select, :scope optgroup, :scope textarea, :scope::file-selector-button, :scope ::file-selector-button {
547
+ :scope button, :scope input, :scope select, :scope optgroup, :scope textarea, :scope::file-selector-button, :scope ::file-selector-button {
469
548
  font: inherit;
470
549
  font-feature-settings: inherit;
471
550
  font-variation-settings: inherit;
@@ -475,19 +554,19 @@
475
554
  background-color: transparent;
476
555
  opacity: 1;
477
556
  }
478
- :scope:where(select:is([multiple], [size])) optgroup, :scope :where(select:is([multiple], [size])) optgroup {
557
+ :scope:where(select:is([multiple], [size])) optgroup, :scope :where(select:is([multiple], [size])) optgroup {
479
558
  font-weight: bolder;
480
559
  }
481
- :scope:where(select:is([multiple], [size])) optgroup option, :scope :where(select:is([multiple], [size])) optgroup option {
560
+ :scope:where(select:is([multiple], [size])) optgroup option, :scope :where(select:is([multiple], [size])) optgroup option {
482
561
  padding-inline-start: 20px;
483
562
  }
484
- :scope::file-selector-button, :scope ::file-selector-button {
563
+ :scope::file-selector-button, :scope ::file-selector-button {
485
564
  margin-inline-end: 4px;
486
565
  }
487
- :scope::placeholder, :scope ::placeholder {
566
+ :scope::placeholder, :scope ::placeholder {
488
567
  opacity: 1;
489
568
  }
490
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
569
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
491
570
  :scope::placeholder, :scope ::placeholder {
492
571
  color: currentcolor;
493
572
  @supports (color: color-mix(in lab, red, red)) {
@@ -495,136 +574,52 @@
495
574
  }
496
575
  }
497
576
  }
498
- :scope textarea {
577
+ :scope textarea {
499
578
  resize: vertical;
500
579
  }
501
- :scope::-webkit-search-decoration, :scope ::-webkit-search-decoration {
580
+ :scope::-webkit-search-decoration, :scope ::-webkit-search-decoration {
502
581
  -webkit-appearance: none;
503
582
  }
504
- :scope::-webkit-date-and-time-value, :scope ::-webkit-date-and-time-value {
583
+ :scope::-webkit-date-and-time-value, :scope ::-webkit-date-and-time-value {
505
584
  min-height: 1lh;
506
585
  text-align: inherit;
507
586
  }
508
- :scope::-webkit-datetime-edit, :scope ::-webkit-datetime-edit {
587
+ :scope::-webkit-datetime-edit, :scope ::-webkit-datetime-edit {
509
588
  display: inline-flex;
510
589
  }
511
- :scope::-webkit-datetime-edit-fields-wrapper, :scope ::-webkit-datetime-edit-fields-wrapper {
590
+ :scope::-webkit-datetime-edit-fields-wrapper, :scope ::-webkit-datetime-edit-fields-wrapper {
512
591
  padding: 0;
513
592
  }
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 {
593
+ :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
594
  padding-block: 0;
516
595
  }
517
- :scope::-webkit-calendar-picker-indicator, :scope ::-webkit-calendar-picker-indicator {
596
+ :scope::-webkit-calendar-picker-indicator, :scope ::-webkit-calendar-picker-indicator {
518
597
  line-height: 1;
519
598
  }
520
- :scope:-moz-ui-invalid, :scope :-moz-ui-invalid {
599
+ :scope:-moz-ui-invalid, :scope :-moz-ui-invalid {
521
600
  box-shadow: none;
522
601
  }
523
- :scope button, :scope input:where([type="button"], [type="reset"], [type="submit"]), :scope::file-selector-button, :scope ::file-selector-button {
602
+ :scope button, :scope input:where([type="button"], [type="reset"], [type="submit"]), :scope::file-selector-button, :scope ::file-selector-button {
524
603
  appearance: button;
525
604
  }
526
- :scope::-webkit-inner-spin-button, :scope ::-webkit-inner-spin-button, :scope::-webkit-outer-spin-button, :scope ::-webkit-outer-spin-button {
605
+ :scope::-webkit-inner-spin-button, :scope ::-webkit-inner-spin-button, :scope::-webkit-outer-spin-button, :scope ::-webkit-outer-spin-button {
527
606
  height: auto;
528
607
  }
529
- :scope[hidden]:where(:not([hidden="until-found"])), :scope [hidden]:where(:not([hidden="until-found"])) {
608
+ :scope[hidden]:where(:not([hidden="until-found"])), :scope [hidden]:where(:not([hidden="until-found"])) {
530
609
  display: none !important;
531
610
  }
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
611
  :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
612
  color: var(--color-text);
618
613
  background-color: var(--color-surface);
619
614
  -webkit-text-size-adjust: 100%;
620
615
  }
621
- :scope {
616
+ :scope {
622
617
  font-family: var(--font-sans);
623
618
  font-size: var(--text-sm);
624
619
  line-height: var(--tw-leading, var(--text-sm--line-height));
625
620
  line-height: 1.5;
626
621
  }
627
- :scope h1 {
622
+ :scope h1 {
628
623
  font-size: var(--text-xl);
629
624
  line-height: var(--tw-leading, var(--text-xl--line-height));
630
625
  --tw-leading: var(--leading-tight);
@@ -632,7 +627,7 @@
632
627
  --tw-font-weight: var(--font-weight-semibold);
633
628
  font-weight: var(--font-weight-semibold);
634
629
  }
635
- :scope h2 {
630
+ :scope h2 {
636
631
  font-size: var(--text-base);
637
632
  line-height: var(--tw-leading, var(--text-base--line-height));
638
633
  --tw-leading: var(--leading-tight);
@@ -640,7 +635,7 @@
640
635
  --tw-font-weight: var(--font-weight-semibold);
641
636
  font-weight: var(--font-weight-semibold);
642
637
  }
643
- :scope h3 {
638
+ :scope h3 {
644
639
  font-size: var(--text-sm);
645
640
  line-height: var(--tw-leading, var(--text-sm--line-height));
646
641
  --tw-leading: var(--leading-snug);
@@ -648,31 +643,29 @@
648
643
  --tw-font-weight: var(--font-weight-semibold);
649
644
  font-weight: var(--font-weight-semibold);
650
645
  }
651
- }
652
- @layer components {
653
- ._ao-accordion {
646
+ :scope._ao-accordion, :scope ._ao-accordion {
654
647
  display: flex;
655
648
  flex-direction: column;
656
649
  }
657
- ._ao-accordion-item {
650
+ :scope._ao-accordion-item, :scope ._ao-accordion-item {
658
651
  border-style: var(--tw-border-style);
659
652
  border-width: 1px;
660
653
  border-color: var(--color-border);
661
654
  background-color: var(--color-surface);
662
655
  interpolate-size: allow-keywords;
663
656
  }
664
- ._ao-accordion-item:first-child {
657
+ :scope._ao-accordion-item:first-child, :scope ._ao-accordion-item:first-child {
665
658
  border-top-left-radius: var(--radius-lg);
666
659
  border-top-right-radius: var(--radius-lg);
667
660
  }
668
- ._ao-accordion-item:last-child {
661
+ :scope._ao-accordion-item:last-child, :scope ._ao-accordion-item:last-child {
669
662
  border-bottom-right-radius: var(--radius-lg);
670
663
  border-bottom-left-radius: var(--radius-lg);
671
664
  }
672
- ._ao-accordion-item + ._ao-accordion-item {
665
+ :scope._ao-accordion-item + ._ao-accordion-item, :scope ._ao-accordion-item + ._ao-accordion-item {
673
666
  border-top: 0;
674
667
  }
675
- ._ao-accordion-summary {
668
+ :scope._ao-accordion-summary, :scope ._ao-accordion-summary {
676
669
  display: flex;
677
670
  cursor: pointer;
678
671
  align-items: center;
@@ -703,10 +696,10 @@
703
696
  }
704
697
  list-style: none;
705
698
  }
706
- ._ao-accordion-summary::-webkit-details-marker {
699
+ :scope._ao-accordion-summary::-webkit-details-marker, :scope ._ao-accordion-summary::-webkit-details-marker {
707
700
  display: none;
708
701
  }
709
- ._ao-accordion-summary::after {
702
+ :scope._ao-accordion-summary::after, :scope ._ao-accordion-summary::after {
710
703
  content: "";
711
704
  width: 0.5rem;
712
705
  height: 0.5rem;
@@ -717,10 +710,10 @@
717
710
  flex-shrink: 0;
718
711
  margin-left: auto;
719
712
  }
720
- ._ao-accordion-item[open] > ._ao-accordion-summary::after {
713
+ :scope._ao-accordion-item[open] > ._ao-accordion-summary::after, :scope ._ao-accordion-item[open] > ._ao-accordion-summary::after {
721
714
  transform: rotate(-135deg);
722
715
  }
723
- ._ao-accordion-content {
716
+ :scope._ao-accordion-content, :scope ._ao-accordion-content {
724
717
  border-top-style: var(--tw-border-style);
725
718
  border-top-width: 1px;
726
719
  border-color: var(--color-border);
@@ -730,20 +723,18 @@
730
723
  line-height: var(--tw-leading, var(--text-sm--line-height));
731
724
  color: var(--color-text);
732
725
  }
733
- ._ao-accordion-item::details-content {
726
+ :scope._ao-accordion-item::details-content, :scope ._ao-accordion-item::details-content {
734
727
  opacity: 0;
735
728
  height: 0;
736
729
  overflow: clip;
737
730
  content-visibility: visible;
738
731
  transition: opacity 200ms ease, height 200ms ease;
739
732
  }
740
- ._ao-accordion-item[open]::details-content {
733
+ :scope._ao-accordion-item[open]::details-content, :scope ._ao-accordion-item[open]::details-content {
741
734
  opacity: 1;
742
735
  height: auto;
743
736
  }
744
- }
745
- @layer components {
746
- ._ao-alert {
737
+ :scope._ao-alert, :scope ._ao-alert {
747
738
  display: flex;
748
739
  width: 100%;
749
740
  flex-direction: column;
@@ -757,65 +748,63 @@
757
748
  line-height: var(--tw-leading, var(--text-sm--line-height));
758
749
  color: var(--color-text);
759
750
  }
760
- ._ao-alert:has(> :is(i, svg):first-child) {
751
+ :scope._ao-alert:has(> :is(i, svg):first-child), :scope ._ao-alert:has(> :is(i, svg):first-child) {
761
752
  display: grid;
762
753
  grid-template-columns: auto 1fr;
763
754
  column-gap: 0.5rem;
764
755
  row-gap: 0.25rem;
765
756
  align-items: center;
766
757
  }
767
- ._ao-alert > :is(i, svg):first-child {
758
+ :scope._ao-alert > :is(i, svg):first-child, :scope ._ao-alert > :is(i, svg):first-child {
768
759
  font-size: 1rem;
769
760
  line-height: 1.25;
770
761
  }
771
- ._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-title) {
762
+ :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
763
  grid-template-rows: auto auto;
773
764
  align-items: start;
774
765
  }
775
- ._ao-alert:has(> ._ao-alert-title) > :is(i, svg):first-child {
766
+ :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
767
  grid-row: 1 / -1;
777
768
  }
778
- ._ao-alert > :is(._ao-alert-title, ._ao-alert-description) {
769
+ :scope._ao-alert > :is(._ao-alert-title, ._ao-alert-description), :scope ._ao-alert > :is(._ao-alert-title, ._ao-alert-description) {
779
770
  grid-column: 2;
780
771
  }
781
- ._ao-alert-info {
772
+ :scope._ao-alert-info, :scope ._ao-alert-info {
782
773
  border-color: var(--color-info-muted);
783
774
  background-color: var(--color-info-muted);
784
775
  }
785
- ._ao-alert-success {
776
+ :scope._ao-alert-success, :scope ._ao-alert-success {
786
777
  border-color: var(--color-success-muted);
787
778
  background-color: var(--color-success-muted);
788
779
  }
789
- ._ao-alert-warning {
780
+ :scope._ao-alert-warning, :scope ._ao-alert-warning {
790
781
  border-color: var(--color-warning-muted);
791
782
  background-color: var(--color-warning-muted);
792
783
  }
793
- ._ao-alert-danger {
784
+ :scope._ao-alert-danger, :scope ._ao-alert-danger {
794
785
  border-color: var(--color-danger-muted);
795
786
  background-color: var(--color-danger-muted);
796
787
  }
797
- ._ao-alert-title {
788
+ :scope._ao-alert-title, :scope ._ao-alert-title {
798
789
  --tw-font-weight: var(--font-weight-medium);
799
790
  font-weight: var(--font-weight-medium);
800
791
  }
801
- ._ao-alert-info ._ao-alert-title, ._ao-alert-info > :is(i, svg):first-child {
792
+ :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
793
  color: var(--color-info);
803
794
  }
804
- ._ao-alert-success ._ao-alert-title, ._ao-alert-success > :is(i, svg):first-child {
795
+ :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
796
  color: var(--color-success);
806
797
  }
807
- ._ao-alert-warning ._ao-alert-title, ._ao-alert-warning > :is(i, svg):first-child {
798
+ :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
799
  color: var(--color-warning);
809
800
  }
810
- ._ao-alert-danger ._ao-alert-title, ._ao-alert-danger > :is(i, svg):first-child {
801
+ :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
802
  color: var(--color-danger);
812
803
  }
813
- ._ao-alert-description {
804
+ :scope._ao-alert-description, :scope ._ao-alert-description {
814
805
  color: var(--color-text-muted);
815
806
  }
816
- }
817
- @layer components {
818
- ._ao-app-shell {
807
+ :scope._ao-app-shell, :scope ._ao-app-shell {
819
808
  --app-shell-sidebar-w: 240px;
820
809
  --app-shell-sidebar-w-collapsed: 56px;
821
810
  display: grid;
@@ -827,35 +816,33 @@
827
816
  grid-template-rows: auto 1fr auto;
828
817
  grid-template-areas: "header" "main" "footer";
829
818
  }
830
- ._ao-app-shell > ._ao-navbar {
819
+ :scope._ao-app-shell > ._ao-navbar, :scope ._ao-app-shell > ._ao-navbar {
831
820
  grid-area: header;
832
821
  }
833
- ._ao-app-shell > main, ._ao-app-shell-main {
822
+ :scope._ao-app-shell > main, :scope ._ao-app-shell > main, :scope._ao-app-shell-main, :scope ._ao-app-shell-main {
834
823
  grid-area: main;
835
824
  min-width: 0;
836
825
  }
837
- ._ao-app-shell > ._ao-footer {
826
+ :scope._ao-app-shell > ._ao-footer, :scope ._ao-app-shell > ._ao-footer {
838
827
  grid-area: footer;
839
828
  }
840
- ._ao-app-shell-with-sidebar {
829
+ :scope._ao-app-shell-with-sidebar, :scope ._ao-app-shell-with-sidebar {
841
830
  grid-template-columns: auto 1fr;
842
831
  grid-template-areas: "header header" "sidebar main" "footer footer";
843
832
  }
844
- ._ao-app-shell-with-sidebar > ._ao-sidebar {
833
+ :scope._ao-app-shell-with-sidebar > ._ao-sidebar, :scope ._ao-app-shell-with-sidebar > ._ao-sidebar {
845
834
  grid-area: sidebar;
846
835
  }
847
- @media (max-width: 48rem) {
848
- ._ao-app-shell-with-sidebar {
836
+ @media (max-width: 48rem) {
837
+ :scope._ao-app-shell-with-sidebar, :scope ._ao-app-shell-with-sidebar {
849
838
  grid-template-columns: 1fr;
850
839
  grid-template-areas: "header" "main" "footer";
851
840
  }
852
- ._ao-app-shell-with-sidebar > ._ao-sidebar {
841
+ :scope._ao-app-shell-with-sidebar > ._ao-sidebar, :scope ._ao-app-shell-with-sidebar > ._ao-sidebar {
853
842
  display: none;
854
843
  }
855
844
  }
856
- }
857
- @layer components {
858
- ._ao-badge {
845
+ :scope._ao-badge, :scope ._ao-badge {
859
846
  display: inline-flex;
860
847
  height: calc(var(--spacing) * 5);
861
848
  align-items: center;
@@ -874,50 +861,48 @@
874
861
  font-weight: var(--font-weight-medium);
875
862
  white-space: nowrap;
876
863
  }
877
- ._ao-badge-neutral {
864
+ :scope._ao-badge-neutral, :scope ._ao-badge-neutral {
878
865
  background-color: var(--color-surface-strong);
879
866
  color: var(--color-text);
880
867
  }
881
- ._ao-badge-info {
868
+ :scope._ao-badge-info, :scope ._ao-badge-info {
882
869
  border-color: var(--color-info-muted);
883
870
  background-color: var(--color-info-muted);
884
871
  color: var(--color-info);
885
872
  }
886
- ._ao-badge-success {
873
+ :scope._ao-badge-success, :scope ._ao-badge-success {
887
874
  border-color: var(--color-success-muted);
888
875
  background-color: var(--color-success-muted);
889
876
  color: var(--color-success);
890
877
  }
891
- ._ao-badge-warning {
878
+ :scope._ao-badge-warning, :scope ._ao-badge-warning {
892
879
  border-color: var(--color-warning-muted);
893
880
  background-color: var(--color-warning-muted);
894
881
  color: var(--color-warning);
895
882
  }
896
- ._ao-badge-danger {
883
+ :scope._ao-badge-danger, :scope ._ao-badge-danger {
897
884
  border-color: var(--color-danger-muted);
898
885
  background-color: var(--color-danger-muted);
899
886
  color: var(--color-danger);
900
887
  }
901
- ._ao-badge-primary {
888
+ :scope._ao-badge-primary, :scope ._ao-badge-primary {
902
889
  background-color: var(--color-primary);
903
890
  color: var(--color-primary-content);
904
891
  }
905
- ._ao-badge-sm {
892
+ :scope._ao-badge-sm, :scope ._ao-badge-sm {
906
893
  height: calc(var(--spacing) * 4);
907
894
  gap: calc(var(--spacing) * 0.5);
908
895
  padding-inline: calc(var(--spacing) * 1.5);
909
896
  font-size: 0.625rem;
910
897
  }
911
- ._ao-badge-lg {
898
+ :scope._ao-badge-lg, :scope ._ao-badge-lg {
912
899
  height: calc(var(--spacing) * 6);
913
900
  gap: calc(var(--spacing) * 1.5);
914
901
  padding-inline: calc(var(--spacing) * 2.5);
915
902
  font-size: var(--text-sm);
916
903
  line-height: var(--tw-leading, var(--text-sm--line-height));
917
904
  }
918
- }
919
- @layer components {
920
- ._ao-brand-tile {
905
+ :scope._ao-brand-tile, :scope ._ao-brand-tile {
921
906
  display: inline-flex;
922
907
  width: calc(var(--spacing) * 6);
923
908
  height: calc(var(--spacing) * 6);
@@ -935,9 +920,7 @@
935
920
  -webkit-user-select: none;
936
921
  user-select: none;
937
922
  }
938
- }
939
- @layer components {
940
- ._ao-spinner {
923
+ :scope._ao-spinner, :scope ._ao-spinner {
941
924
  display: inline-block;
942
925
  width: 1rem;
943
926
  height: 1rem;
@@ -950,29 +933,27 @@
950
933
  border-top-color: currentColor;
951
934
  animation: spinner-spin 0.6s linear infinite;
952
935
  }
953
- ._ao-spinner-sm {
936
+ :scope._ao-spinner-sm, :scope ._ao-spinner-sm {
954
937
  width: 0.75rem;
955
938
  height: 0.75rem;
956
939
  border-width: 1.5px;
957
940
  }
958
- ._ao-spinner-lg {
941
+ :scope._ao-spinner-lg, :scope ._ao-spinner-lg {
959
942
  width: 1.5rem;
960
943
  height: 1.5rem;
961
944
  border-width: 3px;
962
945
  }
963
- @media (prefers-reduced-motion: reduce) {
964
- ._ao-spinner {
946
+ @media (prefers-reduced-motion: reduce) {
947
+ :scope._ao-spinner, :scope ._ao-spinner {
965
948
  animation-duration: 2s;
966
949
  }
967
950
  }
968
- @keyframes spinner-spin {
951
+ @keyframes spinner-spin {
969
952
  to {
970
953
  transform: rotate(360deg);
971
954
  }
972
955
  }
973
- }
974
- @layer components {
975
- ._ao-progress {
956
+ :scope._ao-progress, :scope ._ao-progress {
976
957
  appearance: none;
977
958
  -webkit-appearance: none;
978
959
  display: block;
@@ -984,53 +965,53 @@
984
965
  background-color: var(--color-surface-strong);
985
966
  color: var(--color-primary);
986
967
  }
987
- ._ao-progress::-webkit-progress-bar {
968
+ :scope._ao-progress::-webkit-progress-bar, :scope ._ao-progress::-webkit-progress-bar {
988
969
  background-color: var(--color-surface-strong);
989
970
  border-radius: 9999px;
990
971
  }
991
- ._ao-progress::-webkit-progress-value {
972
+ :scope._ao-progress::-webkit-progress-value, :scope ._ao-progress::-webkit-progress-value {
992
973
  background-color: currentColor;
993
974
  border-radius: 9999px;
994
975
  transition: inline-size 200ms ease;
995
976
  }
996
- ._ao-progress::-moz-progress-bar {
977
+ :scope._ao-progress::-moz-progress-bar, :scope ._ao-progress::-moz-progress-bar {
997
978
  background-color: currentColor;
998
979
  border-radius: 9999px;
999
980
  transition: inline-size 200ms ease;
1000
981
  }
1001
- ._ao-progress-sm {
982
+ :scope._ao-progress-sm, :scope ._ao-progress-sm {
1002
983
  height: 0.25rem;
1003
984
  }
1004
- ._ao-progress-lg {
985
+ :scope._ao-progress-lg, :scope ._ao-progress-lg {
1005
986
  height: 0.5rem;
1006
987
  }
1007
- ._ao-progress-success {
988
+ :scope._ao-progress-success, :scope ._ao-progress-success {
1008
989
  color: var(--color-success);
1009
990
  }
1010
- ._ao-progress-warning {
991
+ :scope._ao-progress-warning, :scope ._ao-progress-warning {
1011
992
  color: var(--color-warning);
1012
993
  }
1013
- ._ao-progress-danger {
994
+ :scope._ao-progress-danger, :scope ._ao-progress-danger {
1014
995
  color: var(--color-danger);
1015
996
  }
1016
- ._ao-progress:indeterminate {
997
+ :scope._ao-progress:indeterminate, :scope ._ao-progress:indeterminate {
1017
998
  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
999
  background-size: 250% 100%;
1019
1000
  background-repeat: no-repeat;
1020
1001
  animation: progress-indeterminate 1.2s linear infinite;
1021
1002
  }
1022
- ._ao-progress:indeterminate::-webkit-progress-bar {
1003
+ :scope._ao-progress:indeterminate::-webkit-progress-bar, :scope ._ao-progress:indeterminate::-webkit-progress-bar {
1023
1004
  background-color: transparent;
1024
1005
  }
1025
- ._ao-progress:indeterminate::-webkit-progress-value, ._ao-progress:indeterminate::-moz-progress-bar {
1006
+ :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
1007
  background-color: transparent;
1027
1008
  }
1028
- @media (prefers-reduced-motion: reduce) {
1029
- ._ao-progress:indeterminate {
1009
+ @media (prefers-reduced-motion: reduce) {
1010
+ :scope._ao-progress:indeterminate, :scope ._ao-progress:indeterminate {
1030
1011
  animation-duration: 3s;
1031
1012
  }
1032
1013
  }
1033
- @keyframes progress-indeterminate {
1014
+ @keyframes progress-indeterminate {
1034
1015
  from {
1035
1016
  background-position: 100% 0;
1036
1017
  }
@@ -1038,14 +1019,12 @@
1038
1019
  background-position: 0 0;
1039
1020
  }
1040
1021
  }
1041
- }
1042
- @layer components {
1043
- ._ao-breadcrumbs {
1022
+ :scope._ao-breadcrumbs, :scope ._ao-breadcrumbs {
1044
1023
  font-size: var(--text-sm);
1045
1024
  line-height: var(--tw-leading, var(--text-sm--line-height));
1046
1025
  color: var(--color-text-muted);
1047
1026
  }
1048
- ._ao-breadcrumbs > ol {
1027
+ :scope._ao-breadcrumbs > ol, :scope ._ao-breadcrumbs > ol {
1049
1028
  margin: calc(var(--spacing) * 0);
1050
1029
  display: inline-flex;
1051
1030
  list-style-type: none;
@@ -1054,7 +1033,7 @@
1054
1033
  gap: calc(var(--spacing) * 1.5);
1055
1034
  padding: calc(var(--spacing) * 0);
1056
1035
  }
1057
- ._ao-breadcrumb-item {
1036
+ :scope._ao-breadcrumb-item, :scope ._ao-breadcrumb-item {
1058
1037
  display: inline-flex;
1059
1038
  align-items: center;
1060
1039
  gap: calc(var(--spacing) * 1.5);
@@ -1076,13 +1055,13 @@
1076
1055
  outline-color: var(--color-primary);
1077
1056
  }
1078
1057
  }
1079
- ._ao-breadcrumb-item[aria-current="page"] {
1058
+ :scope._ao-breadcrumb-item[aria-current="page"], :scope ._ao-breadcrumb-item[aria-current="page"] {
1080
1059
  pointer-events: none;
1081
1060
  --tw-font-weight: var(--font-weight-medium);
1082
1061
  font-weight: var(--font-weight-medium);
1083
1062
  color: var(--color-text);
1084
1063
  }
1085
- ._ao-breadcrumb-separator {
1064
+ :scope._ao-breadcrumb-separator, :scope ._ao-breadcrumb-separator {
1086
1065
  display: inline-flex;
1087
1066
  align-items: center;
1088
1067
  color: color-mix(in srgb, light-dark(var(--color-base-600), var(--color-base-500)) 60%, transparent);
@@ -1092,16 +1071,14 @@
1092
1071
  -webkit-user-select: none;
1093
1072
  user-select: none;
1094
1073
  }
1095
- ._ao-breadcrumb-separator:empty::before {
1074
+ :scope._ao-breadcrumb-separator:empty::before, :scope ._ao-breadcrumb-separator:empty::before {
1096
1075
  content: "/";
1097
1076
  }
1098
- ._ao-breadcrumb-separator > :is(i, svg) {
1077
+ :scope._ao-breadcrumb-separator > :is(i, svg), :scope ._ao-breadcrumb-separator > :is(i, svg) {
1099
1078
  width: 0.875rem;
1100
1079
  height: 0.875rem;
1101
1080
  }
1102
- }
1103
- @layer components {
1104
- ._ao-pagination > ol, ._ao-pagination > ul {
1081
+ :scope._ao-pagination > ol, :scope ._ao-pagination > ol, :scope._ao-pagination > ul, :scope ._ao-pagination > ul {
1105
1082
  margin: calc(var(--spacing) * 0);
1106
1083
  display: inline-flex;
1107
1084
  list-style-type: none;
@@ -1109,10 +1086,10 @@
1109
1086
  gap: calc(var(--spacing) * 1);
1110
1087
  padding: calc(var(--spacing) * 0);
1111
1088
  }
1112
- ._ao-page-item {
1089
+ :scope._ao-page-item, :scope ._ao-page-item {
1113
1090
  display: inline-flex;
1114
1091
  }
1115
- ._ao-page-link {
1092
+ :scope._ao-page-link, :scope ._ao-page-link {
1116
1093
  display: inline-flex;
1117
1094
  height: calc(var(--spacing) * 8);
1118
1095
  min-width: calc(var(--spacing) * 8);
@@ -1165,17 +1142,17 @@
1165
1142
  opacity: 50%;
1166
1143
  }
1167
1144
  }
1168
- ._ao-page-link._ao-active, ._ao-page-link[aria-current="page"] {
1145
+ :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
1146
  border-color: var(--color-primary-muted);
1170
1147
  background-color: var(--color-primary-muted);
1171
1148
  color: var(--color-primary);
1172
1149
  }
1173
- ._ao-page-link[aria-disabled="true"] {
1150
+ :scope._ao-page-link[aria-disabled="true"], :scope ._ao-page-link[aria-disabled="true"] {
1174
1151
  pointer-events: none;
1175
1152
  cursor: not-allowed;
1176
1153
  opacity: 50%;
1177
1154
  }
1178
- ._ao-page-ellipsis {
1155
+ :scope._ao-page-ellipsis, :scope ._ao-page-ellipsis {
1179
1156
  display: inline-flex;
1180
1157
  height: calc(var(--spacing) * 8);
1181
1158
  min-width: calc(var(--spacing) * 8);
@@ -1188,9 +1165,7 @@
1188
1165
  -webkit-user-select: none;
1189
1166
  user-select: none;
1190
1167
  }
1191
- }
1192
- @layer components {
1193
- ._ao-btn {
1168
+ :scope._ao-btn, :scope ._ao-btn {
1194
1169
  display: inline-flex;
1195
1170
  cursor: pointer;
1196
1171
  align-items: center;
@@ -1235,7 +1210,7 @@
1235
1210
  opacity: 50%;
1236
1211
  }
1237
1212
  }
1238
- ._ao-btn-primary {
1213
+ :scope._ao-btn-primary, :scope ._ao-btn-primary {
1239
1214
  background-color: var(--color-primary);
1240
1215
  color: var(--color-primary-content);
1241
1216
  &:hover {
@@ -1244,7 +1219,7 @@
1244
1219
  }
1245
1220
  }
1246
1221
  }
1247
- ._ao-btn-secondary {
1222
+ :scope._ao-btn-secondary, :scope ._ao-btn-secondary {
1248
1223
  border-color: var(--color-border);
1249
1224
  background-color: var(--color-surface-muted);
1250
1225
  color: var(--color-text);
@@ -1254,7 +1229,7 @@
1254
1229
  }
1255
1230
  }
1256
1231
  }
1257
- ._ao-btn-ghost {
1232
+ :scope._ao-btn-ghost, :scope ._ao-btn-ghost {
1258
1233
  background-color: transparent;
1259
1234
  color: var(--color-text);
1260
1235
  &:hover {
@@ -1263,7 +1238,7 @@
1263
1238
  }
1264
1239
  }
1265
1240
  }
1266
- ._ao-btn-danger {
1241
+ :scope._ao-btn-danger, :scope ._ao-btn-danger {
1267
1242
  background-color: var(--color-danger);
1268
1243
  color: var(--color-danger-content);
1269
1244
  &:hover {
@@ -1272,38 +1247,38 @@
1272
1247
  }
1273
1248
  }
1274
1249
  }
1275
- ._ao-btn-sm {
1250
+ :scope._ao-btn-sm, :scope ._ao-btn-sm {
1276
1251
  gap: calc(var(--spacing) * 1.5);
1277
1252
  padding-inline: calc(var(--spacing) * 3);
1278
1253
  padding-block: calc(var(--spacing) * 1.5);
1279
1254
  font-size: var(--text-xs);
1280
1255
  line-height: var(--tw-leading, var(--text-xs--line-height));
1281
1256
  }
1282
- ._ao-btn-lg {
1257
+ :scope._ao-btn-lg, :scope ._ao-btn-lg {
1283
1258
  gap: calc(var(--spacing) * 2.5);
1284
1259
  padding-inline: calc(var(--spacing) * 5);
1285
1260
  padding-block: calc(var(--spacing) * 2.5);
1286
1261
  font-size: var(--text-base);
1287
1262
  line-height: var(--tw-leading, var(--text-base--line-height));
1288
1263
  }
1289
- ._ao-btn-full-width {
1264
+ :scope._ao-btn-full-width, :scope ._ao-btn-full-width {
1290
1265
  width: 100%;
1291
1266
  }
1292
- ._ao-btn-square {
1267
+ :scope._ao-btn-square, :scope ._ao-btn-square {
1293
1268
  padding-inline: calc(var(--spacing) * 2);
1294
1269
  }
1295
- ._ao-btn-sm._ao-btn-square {
1270
+ :scope._ao-btn-sm._ao-btn-square, :scope ._ao-btn-sm._ao-btn-square {
1296
1271
  padding-inline: calc(var(--spacing) * 1.5);
1297
1272
  }
1298
- ._ao-btn-lg._ao-btn-square {
1273
+ :scope._ao-btn-lg._ao-btn-square, :scope ._ao-btn-lg._ao-btn-square {
1299
1274
  padding-inline: calc(var(--spacing) * 2.5);
1300
1275
  }
1301
- ._ao-btn-loading {
1276
+ :scope._ao-btn-loading, :scope ._ao-btn-loading {
1302
1277
  pointer-events: none;
1303
1278
  cursor: not-allowed;
1304
1279
  opacity: 50%;
1305
1280
  }
1306
- ._ao-btn-loading::before {
1281
+ :scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
1307
1282
  content: "";
1308
1283
  display: inline-block;
1309
1284
  width: 1em;
@@ -1317,85 +1292,81 @@
1317
1292
  border-top-color: currentColor;
1318
1293
  animation: spinner-spin 0.6s linear infinite;
1319
1294
  }
1320
- ._ao-btn-loading > :is(i, svg):first-child {
1295
+ :scope._ao-btn-loading > :is(i, svg):first-child, :scope ._ao-btn-loading > :is(i, svg):first-child {
1321
1296
  display: none;
1322
1297
  }
1323
- @media (prefers-reduced-motion: reduce) {
1324
- ._ao-btn-loading::before {
1298
+ @media (prefers-reduced-motion: reduce) {
1299
+ :scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
1325
1300
  animation-duration: 2s;
1326
1301
  }
1327
1302
  }
1328
- }
1329
- @layer components {
1330
- ._ao-btn-group {
1303
+ :scope._ao-btn-group, :scope ._ao-btn-group {
1331
1304
  display: inline-flex;
1332
1305
  }
1333
- ._ao-btn-group > ._ao-btn {
1306
+ :scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn {
1334
1307
  position: relative;
1335
1308
  border-radius: 0;
1336
1309
  &:focus-visible {
1337
1310
  z-index: 10;
1338
1311
  }
1339
1312
  }
1340
- ._ao-btn-group > ._ao-btn:not(:first-child) {
1313
+ :scope._ao-btn-group > ._ao-btn:not(:first-child), :scope ._ao-btn-group > ._ao-btn:not(:first-child) {
1341
1314
  margin-left: -1px;
1342
1315
  }
1343
- ._ao-btn-group > ._ao-btn:first-child {
1316
+ :scope._ao-btn-group > ._ao-btn:first-child, :scope ._ao-btn-group > ._ao-btn:first-child {
1344
1317
  border-top-left-radius: var(--radius-lg);
1345
1318
  border-bottom-left-radius: var(--radius-lg);
1346
1319
  }
1347
- ._ao-btn-group > ._ao-btn:last-child {
1320
+ :scope._ao-btn-group > ._ao-btn:last-child, :scope ._ao-btn-group > ._ao-btn:last-child {
1348
1321
  border-top-right-radius: var(--radius-lg);
1349
1322
  border-bottom-right-radius: var(--radius-lg);
1350
1323
  }
1351
- ._ao-btn-group > ._ao-menu {
1324
+ :scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
1352
1325
  position: relative;
1353
1326
  &:focus-visible {
1354
1327
  z-index: 10;
1355
1328
  }
1356
1329
  display: inline-flex;
1357
1330
  }
1358
- ._ao-btn-group > ._ao-menu:not(:first-child) {
1331
+ :scope._ao-btn-group > ._ao-menu:not(:first-child), :scope ._ao-btn-group > ._ao-menu:not(:first-child) {
1359
1332
  margin-left: -1px;
1360
1333
  }
1361
- ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
1334
+ :scope._ao-btn-group > ._ao-menu > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
1362
1335
  border-radius: 0;
1363
1336
  }
1364
- ._ao-btn-group > ._ao-menu:first-child > ._ao-menu-trigger {
1337
+ :scope._ao-btn-group > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu:first-child > ._ao-menu-trigger {
1365
1338
  border-top-left-radius: var(--radius-lg);
1366
1339
  border-bottom-left-radius: var(--radius-lg);
1367
1340
  }
1368
- ._ao-btn-group > ._ao-menu:last-child > ._ao-menu-trigger {
1341
+ :scope._ao-btn-group > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu:last-child > ._ao-menu-trigger {
1369
1342
  border-top-right-radius: var(--radius-lg);
1370
1343
  border-bottom-right-radius: var(--radius-lg);
1371
1344
  }
1372
- ._ao-btn-group > ._ao-btn:not(:first-child), ._ao-btn-group > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1345
+ :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
1346
  border-left-color: currentColor;
1374
1347
  @supports (color: color-mix(in lab, red, red)) {
1375
1348
  border-left-color: color-mix(in srgb, currentColor 25%, transparent);
1376
1349
  }
1377
1350
  }
1378
- ._ao-btn-group-vertical {
1351
+ :scope._ao-btn-group-vertical, :scope ._ao-btn-group-vertical {
1379
1352
  display: inline-flex;
1380
1353
  flex-direction: column;
1381
1354
  }
1382
- ._ao-btn-group-vertical > ._ao-btn:not(:first-child) {
1355
+ :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child) {
1383
1356
  margin-top: -1px;
1384
1357
  margin-left: calc(var(--spacing) * 0);
1385
1358
  }
1386
- ._ao-btn-group-vertical > ._ao-btn:first-child {
1359
+ :scope._ao-btn-group-vertical > ._ao-btn:first-child, :scope ._ao-btn-group-vertical > ._ao-btn:first-child {
1387
1360
  border-top-left-radius: var(--radius-lg);
1388
1361
  border-top-right-radius: var(--radius-lg);
1389
1362
  border-bottom-left-radius: 0;
1390
1363
  }
1391
- ._ao-btn-group-vertical > ._ao-btn:last-child {
1364
+ :scope._ao-btn-group-vertical > ._ao-btn:last-child, :scope ._ao-btn-group-vertical > ._ao-btn:last-child {
1392
1365
  border-top-right-radius: 0;
1393
1366
  border-bottom-right-radius: var(--radius-lg);
1394
1367
  border-bottom-left-radius: var(--radius-lg);
1395
1368
  }
1396
- }
1397
- @layer components {
1398
- ._ao-input {
1369
+ :scope._ao-input, :scope ._ao-input {
1399
1370
  display: inline-flex;
1400
1371
  width: 100%;
1401
1372
  align-items: center;
@@ -1436,7 +1407,7 @@
1436
1407
  opacity: 50%;
1437
1408
  }
1438
1409
  }
1439
- ._ao-input-bordered {
1410
+ :scope._ao-input-bordered, :scope ._ao-input-bordered {
1440
1411
  border-color: var(--color-border);
1441
1412
  &:hover {
1442
1413
  @media (hover: hover) {
@@ -1444,7 +1415,7 @@
1444
1415
  }
1445
1416
  }
1446
1417
  }
1447
- ._ao-input-ghost {
1418
+ :scope._ao-input-ghost, :scope ._ao-input-ghost {
1448
1419
  background-color: transparent;
1449
1420
  &:hover {
1450
1421
  @media (hover: hover) {
@@ -1452,25 +1423,25 @@
1452
1423
  }
1453
1424
  }
1454
1425
  }
1455
- ._ao-input-danger {
1426
+ :scope._ao-input-danger, :scope ._ao-input-danger {
1456
1427
  border-color: var(--color-danger);
1457
1428
  &:focus-visible {
1458
1429
  outline-color: var(--color-danger);
1459
1430
  }
1460
1431
  }
1461
- ._ao-input-sm {
1432
+ :scope._ao-input-sm, :scope ._ao-input-sm {
1462
1433
  padding-inline: calc(var(--spacing) * 2.5);
1463
1434
  padding-block: calc(var(--spacing) * 1.5);
1464
1435
  font-size: var(--text-xs);
1465
1436
  line-height: var(--tw-leading, var(--text-xs--line-height));
1466
1437
  }
1467
- ._ao-input-lg {
1438
+ :scope._ao-input-lg, :scope ._ao-input-lg {
1468
1439
  padding-inline: calc(var(--spacing) * 4);
1469
1440
  padding-block: calc(var(--spacing) * 2.5);
1470
1441
  font-size: var(--text-base);
1471
1442
  line-height: var(--tw-leading, var(--text-base--line-height));
1472
1443
  }
1473
- ._ao-input::-webkit-calendar-picker-indicator {
1444
+ :scope._ao-input::-webkit-calendar-picker-indicator, :scope ._ao-input::-webkit-calendar-picker-indicator {
1474
1445
  cursor: pointer;
1475
1446
  opacity: 60%;
1476
1447
  &:hover {
@@ -1479,31 +1450,29 @@
1479
1450
  }
1480
1451
  }
1481
1452
  }
1482
- }
1483
- @layer components {
1484
- ._ao-input-group {
1453
+ :scope._ao-input-group, :scope ._ao-input-group {
1485
1454
  display: inline-flex;
1486
1455
  width: 100%;
1487
1456
  }
1488
- ._ao-input-group > * {
1457
+ :scope._ao-input-group > *, :scope ._ao-input-group > * {
1489
1458
  border-radius: 0;
1490
1459
  }
1491
- ._ao-input-group > :first-child {
1460
+ :scope._ao-input-group > :first-child, :scope ._ao-input-group > :first-child {
1492
1461
  border-top-left-radius: var(--radius-lg);
1493
1462
  border-bottom-left-radius: var(--radius-lg);
1494
1463
  }
1495
- ._ao-input-group > :last-child {
1464
+ :scope._ao-input-group > :last-child, :scope ._ao-input-group > :last-child {
1496
1465
  border-top-right-radius: var(--radius-lg);
1497
1466
  border-bottom-right-radius: var(--radius-lg);
1498
1467
  }
1499
- ._ao-input-group > :not(:first-child) {
1468
+ :scope._ao-input-group > :not(:first-child), :scope ._ao-input-group > :not(:first-child) {
1500
1469
  margin-left: -1px;
1501
1470
  }
1502
- ._ao-input-group > :focus, ._ao-input-group > :focus-within {
1471
+ :scope._ao-input-group > :focus, :scope ._ao-input-group > :focus, :scope._ao-input-group > :focus-within, :scope ._ao-input-group > :focus-within {
1503
1472
  position: relative;
1504
1473
  z-index: 10;
1505
1474
  }
1506
- ._ao-input-group-addon {
1475
+ :scope._ao-input-group-addon, :scope ._ao-input-group-addon {
1507
1476
  display: inline-flex;
1508
1477
  align-items: center;
1509
1478
  border-style: var(--tw-border-style);
@@ -1518,9 +1487,7 @@
1518
1487
  white-space: nowrap;
1519
1488
  color: var(--color-text-muted);
1520
1489
  }
1521
- }
1522
- @layer components {
1523
- ._ao-textarea {
1490
+ :scope._ao-textarea, :scope ._ao-textarea {
1524
1491
  display: block;
1525
1492
  min-height: calc(var(--spacing) * 20);
1526
1493
  width: 100%;
@@ -1560,7 +1527,7 @@
1560
1527
  opacity: 50%;
1561
1528
  }
1562
1529
  }
1563
- ._ao-textarea-bordered {
1530
+ :scope._ao-textarea-bordered, :scope ._ao-textarea-bordered {
1564
1531
  border-color: var(--color-border);
1565
1532
  &:hover {
1566
1533
  @media (hover: hover) {
@@ -1568,7 +1535,7 @@
1568
1535
  }
1569
1536
  }
1570
1537
  }
1571
- ._ao-textarea-ghost {
1538
+ :scope._ao-textarea-ghost, :scope ._ao-textarea-ghost {
1572
1539
  background-color: transparent;
1573
1540
  &:hover {
1574
1541
  @media (hover: hover) {
@@ -1576,29 +1543,27 @@
1576
1543
  }
1577
1544
  }
1578
1545
  }
1579
- ._ao-textarea-danger {
1546
+ :scope._ao-textarea-danger, :scope ._ao-textarea-danger {
1580
1547
  border-color: var(--color-danger);
1581
1548
  &:focus-visible {
1582
1549
  outline-color: var(--color-danger);
1583
1550
  }
1584
1551
  }
1585
- ._ao-textarea-sm {
1552
+ :scope._ao-textarea-sm, :scope ._ao-textarea-sm {
1586
1553
  min-height: calc(var(--spacing) * 16);
1587
1554
  padding-inline: calc(var(--spacing) * 2.5);
1588
1555
  padding-block: calc(var(--spacing) * 1.5);
1589
1556
  font-size: var(--text-xs);
1590
1557
  line-height: var(--tw-leading, var(--text-xs--line-height));
1591
1558
  }
1592
- ._ao-textarea-lg {
1559
+ :scope._ao-textarea-lg, :scope ._ao-textarea-lg {
1593
1560
  min-height: calc(var(--spacing) * 24);
1594
1561
  padding-inline: calc(var(--spacing) * 4);
1595
1562
  padding-block: calc(var(--spacing) * 2.5);
1596
1563
  font-size: var(--text-base);
1597
1564
  line-height: var(--tw-leading, var(--text-base--line-height));
1598
1565
  }
1599
- }
1600
- @layer components {
1601
- ._ao-checkbox {
1566
+ :scope._ao-checkbox, :scope ._ao-checkbox {
1602
1567
  display: inline-flex;
1603
1568
  width: calc(var(--spacing) * 4);
1604
1569
  height: calc(var(--spacing) * 4);
@@ -1632,7 +1597,7 @@
1632
1597
  opacity: 50%;
1633
1598
  }
1634
1599
  }
1635
- ._ao-checkbox[data-unchecked] {
1600
+ :scope._ao-checkbox[data-unchecked], :scope ._ao-checkbox[data-unchecked] {
1636
1601
  border-color: var(--color-border-strong);
1637
1602
  &:hover {
1638
1603
  @media (hover: hover) {
@@ -1640,7 +1605,7 @@
1640
1605
  }
1641
1606
  }
1642
1607
  }
1643
- ._ao-checkbox[data-checked], ._ao-checkbox[data-indeterminate] {
1608
+ :scope._ao-checkbox[data-checked], :scope ._ao-checkbox[data-checked], :scope._ao-checkbox[data-indeterminate], :scope ._ao-checkbox[data-indeterminate] {
1644
1609
  border-color: var(--color-primary);
1645
1610
  background-color: var(--color-primary);
1646
1611
  &:hover {
@@ -1649,11 +1614,11 @@
1649
1614
  }
1650
1615
  }
1651
1616
  }
1652
- ._ao-checkbox[data-disabled] {
1617
+ :scope._ao-checkbox[data-disabled], :scope ._ao-checkbox[data-disabled] {
1653
1618
  cursor: not-allowed;
1654
1619
  opacity: 50%;
1655
1620
  }
1656
- ._ao-checkbox-indicator {
1621
+ :scope._ao-checkbox-indicator, :scope ._ao-checkbox-indicator {
1657
1622
  display: inline-flex;
1658
1623
  width: calc(var(--spacing) * 3);
1659
1624
  height: calc(var(--spacing) * 3);
@@ -1661,19 +1626,17 @@
1661
1626
  justify-content: center;
1662
1627
  color: var(--color-primary-content);
1663
1628
  }
1664
- label:has(> ._ao-checkbox) {
1629
+ :scope label:has(> ._ao-checkbox) {
1665
1630
  display: inline-flex;
1666
1631
  cursor: pointer;
1667
1632
  align-items: center;
1668
1633
  gap: calc(var(--spacing) * 2);
1669
1634
  }
1670
- label:has(> ._ao-checkbox:disabled), label:has(> ._ao-checkbox[data-disabled]) {
1635
+ :scope label:has(> ._ao-checkbox:disabled), :scope label:has(> ._ao-checkbox[data-disabled]) {
1671
1636
  cursor: not-allowed;
1672
1637
  opacity: 60%;
1673
1638
  }
1674
- }
1675
- @layer components {
1676
- ._ao-radio {
1639
+ :scope._ao-radio, :scope ._ao-radio {
1677
1640
  display: inline-flex;
1678
1641
  width: calc(var(--spacing) * 4);
1679
1642
  height: calc(var(--spacing) * 4);
@@ -1707,7 +1670,7 @@
1707
1670
  opacity: 50%;
1708
1671
  }
1709
1672
  }
1710
- ._ao-radio[data-unchecked] {
1673
+ :scope._ao-radio[data-unchecked], :scope ._ao-radio[data-unchecked] {
1711
1674
  border-color: var(--color-border-strong);
1712
1675
  &:hover {
1713
1676
  @media (hover: hover) {
@@ -1715,7 +1678,7 @@
1715
1678
  }
1716
1679
  }
1717
1680
  }
1718
- ._ao-radio[data-checked] {
1681
+ :scope._ao-radio[data-checked], :scope ._ao-radio[data-checked] {
1719
1682
  border-color: var(--color-primary);
1720
1683
  background-color: var(--color-primary);
1721
1684
  &:hover {
@@ -1724,40 +1687,38 @@
1724
1687
  }
1725
1688
  }
1726
1689
  }
1727
- ._ao-radio[data-disabled] {
1690
+ :scope._ao-radio[data-disabled], :scope ._ao-radio[data-disabled] {
1728
1691
  cursor: not-allowed;
1729
1692
  opacity: 50%;
1730
1693
  }
1731
- ._ao-radio-indicator {
1694
+ :scope._ao-radio-indicator, :scope ._ao-radio-indicator {
1732
1695
  display: inline-flex;
1733
1696
  width: calc(var(--spacing) * 1.5);
1734
1697
  height: calc(var(--spacing) * 1.5);
1735
1698
  border-radius: calc(infinity * 1px);
1736
1699
  background-color: var(--color-primary-content);
1737
1700
  }
1738
- ._ao-radio-group {
1701
+ :scope._ao-radio-group, :scope ._ao-radio-group {
1739
1702
  display: inline-flex;
1740
1703
  flex-wrap: wrap;
1741
1704
  gap: calc(var(--spacing) * 4);
1742
1705
  }
1743
- ._ao-radio-group-vertical {
1706
+ :scope._ao-radio-group-vertical, :scope ._ao-radio-group-vertical {
1744
1707
  flex-direction: column;
1745
1708
  align-items: flex-start;
1746
1709
  gap: calc(var(--spacing) * 2);
1747
1710
  }
1748
- label:has(> ._ao-radio) {
1711
+ :scope label:has(> ._ao-radio) {
1749
1712
  display: inline-flex;
1750
1713
  cursor: pointer;
1751
1714
  align-items: center;
1752
1715
  gap: calc(var(--spacing) * 2);
1753
1716
  }
1754
- label:has(> ._ao-radio:disabled), label:has(> ._ao-radio[data-disabled]) {
1717
+ :scope label:has(> ._ao-radio:disabled), :scope label:has(> ._ao-radio[data-disabled]) {
1755
1718
  cursor: not-allowed;
1756
1719
  opacity: 60%;
1757
1720
  }
1758
- }
1759
- @layer components {
1760
- ._ao-switch {
1721
+ :scope._ao-switch, :scope ._ao-switch {
1761
1722
  position: relative;
1762
1723
  display: inline-flex;
1763
1724
  height: calc(var(--spacing) * 5);
@@ -1792,17 +1753,17 @@
1792
1753
  opacity: 50%;
1793
1754
  }
1794
1755
  }
1795
- ._ao-switch[data-unchecked] {
1756
+ :scope._ao-switch[data-unchecked], :scope ._ao-switch[data-unchecked] {
1796
1757
  background-color: var(--color-border-strong);
1797
1758
  }
1798
- ._ao-switch[data-checked] {
1759
+ :scope._ao-switch[data-checked], :scope ._ao-switch[data-checked] {
1799
1760
  background-color: var(--color-primary);
1800
1761
  }
1801
- ._ao-switch[data-disabled] {
1762
+ :scope._ao-switch[data-disabled], :scope ._ao-switch[data-disabled] {
1802
1763
  cursor: not-allowed;
1803
1764
  opacity: 50%;
1804
1765
  }
1805
- ._ao-switch-thumb {
1766
+ :scope._ao-switch-thumb, :scope ._ao-switch-thumb {
1806
1767
  width: calc(var(--spacing) * 4);
1807
1768
  height: calc(var(--spacing) * 4);
1808
1769
  border-radius: calc(infinity * 1px);
@@ -1815,19 +1776,19 @@
1815
1776
  --tw-duration: 150ms;
1816
1777
  transition-duration: 150ms;
1817
1778
  }
1818
- ._ao-switch[data-checked] ._ao-switch-thumb {
1779
+ :scope._ao-switch[data-checked] ._ao-switch-thumb, :scope ._ao-switch[data-checked] ._ao-switch-thumb {
1819
1780
  --tw-translate-x: calc(var(--spacing) * 4);
1820
1781
  translate: var(--tw-translate-x) var(--tw-translate-y);
1821
1782
  }
1822
- input._ao-switch {
1783
+ :scope input._ao-switch {
1823
1784
  margin: calc(var(--spacing) * 0);
1824
1785
  appearance: none;
1825
1786
  background-color: var(--color-border-strong);
1826
1787
  }
1827
- input._ao-switch:checked {
1788
+ :scope input._ao-switch:checked {
1828
1789
  background-color: var(--color-primary);
1829
1790
  }
1830
- input._ao-switch::before {
1791
+ :scope input._ao-switch::before {
1831
1792
  content: "";
1832
1793
  width: calc(var(--spacing) * 4);
1833
1794
  height: calc(var(--spacing) * 4);
@@ -1841,23 +1802,21 @@
1841
1802
  --tw-duration: 150ms;
1842
1803
  transition-duration: 150ms;
1843
1804
  }
1844
- input._ao-switch:checked::before {
1805
+ :scope input._ao-switch:checked::before {
1845
1806
  --tw-translate-x: calc(var(--spacing) * 4);
1846
1807
  translate: var(--tw-translate-x) var(--tw-translate-y);
1847
1808
  }
1848
- label:has(> ._ao-switch) {
1809
+ :scope label:has(> ._ao-switch) {
1849
1810
  display: inline-flex;
1850
1811
  cursor: pointer;
1851
1812
  align-items: center;
1852
1813
  gap: calc(var(--spacing) * 3);
1853
1814
  }
1854
- label:has(> ._ao-switch:disabled), label:has(> ._ao-switch[data-disabled]) {
1815
+ :scope label:has(> ._ao-switch:disabled), :scope label:has(> ._ao-switch[data-disabled]) {
1855
1816
  cursor: not-allowed;
1856
1817
  opacity: 60%;
1857
1818
  }
1858
- }
1859
- @layer components {
1860
- ._ao-select {
1819
+ :scope._ao-select, :scope ._ao-select {
1861
1820
  display: inline-flex;
1862
1821
  width: 100%;
1863
1822
  cursor: pointer;
@@ -1901,16 +1860,16 @@
1901
1860
  opacity: 50%;
1902
1861
  }
1903
1862
  }
1904
- ._ao-select[data-popup-open] {
1863
+ :scope._ao-select[data-popup-open], :scope ._ao-select[data-popup-open] {
1905
1864
  outline-style: var(--tw-outline-style);
1906
1865
  outline-width: 2px;
1907
1866
  outline-offset: 2px;
1908
1867
  outline-color: var(--color-primary);
1909
1868
  }
1910
- ._ao-select[data-placeholder] {
1869
+ :scope._ao-select[data-placeholder], :scope ._ao-select[data-placeholder] {
1911
1870
  color: var(--color-text-muted);
1912
1871
  }
1913
- ._ao-select-bordered {
1872
+ :scope._ao-select-bordered, :scope ._ao-select-bordered {
1914
1873
  border-color: var(--color-border);
1915
1874
  &:hover {
1916
1875
  @media (hover: hover) {
@@ -1918,7 +1877,7 @@
1918
1877
  }
1919
1878
  }
1920
1879
  }
1921
- ._ao-select-ghost {
1880
+ :scope._ao-select-ghost, :scope ._ao-select-ghost {
1922
1881
  background-color: transparent;
1923
1882
  &:hover {
1924
1883
  @media (hover: hover) {
@@ -1926,25 +1885,25 @@
1926
1885
  }
1927
1886
  }
1928
1887
  }
1929
- ._ao-select-danger {
1888
+ :scope._ao-select-danger, :scope ._ao-select-danger {
1930
1889
  border-color: var(--color-danger);
1931
1890
  &:focus-visible {
1932
1891
  outline-color: var(--color-danger);
1933
1892
  }
1934
1893
  }
1935
- ._ao-select-sm {
1894
+ :scope._ao-select-sm, :scope ._ao-select-sm {
1936
1895
  padding-inline: calc(var(--spacing) * 2.5);
1937
1896
  padding-block: calc(var(--spacing) * 1.5);
1938
1897
  font-size: var(--text-xs);
1939
1898
  line-height: var(--tw-leading, var(--text-xs--line-height));
1940
1899
  }
1941
- ._ao-select-lg {
1900
+ :scope._ao-select-lg, :scope ._ao-select-lg {
1942
1901
  padding-inline: calc(var(--spacing) * 4);
1943
1902
  padding-block: calc(var(--spacing) * 2.5);
1944
1903
  font-size: var(--text-base);
1945
1904
  line-height: var(--tw-leading, var(--text-base--line-height));
1946
1905
  }
1947
- select._ao-select {
1906
+ :scope select._ao-select {
1948
1907
  appearance: none;
1949
1908
  padding-right: 2rem;
1950
1909
  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 +1911,14 @@
1952
1911
  background-position: right 0.5rem center;
1953
1912
  background-size: 1rem;
1954
1913
  }
1955
- select._ao-select-sm {
1914
+ :scope select._ao-select-sm {
1956
1915
  padding-right: 1.75rem;
1957
1916
  background-size: 0.875rem;
1958
1917
  }
1959
- select._ao-select-lg {
1918
+ :scope select._ao-select-lg {
1960
1919
  padding-right: 2.25rem;
1961
1920
  }
1962
- ._ao-select-icon {
1921
+ :scope._ao-select-icon, :scope ._ao-select-icon {
1963
1922
  display: inline-flex;
1964
1923
  width: calc(var(--spacing) * 4);
1965
1924
  height: calc(var(--spacing) * 4);
@@ -1973,10 +1932,10 @@
1973
1932
  --tw-duration: 150ms;
1974
1933
  transition-duration: 150ms;
1975
1934
  }
1976
- ._ao-select[data-popup-open] ._ao-select-icon {
1935
+ :scope._ao-select[data-popup-open] ._ao-select-icon, :scope ._ao-select[data-popup-open] ._ao-select-icon {
1977
1936
  rotate: 180deg;
1978
1937
  }
1979
- ._ao-select-popup {
1938
+ :scope._ao-select-popup, :scope ._ao-select-popup {
1980
1939
  max-height: calc(var(--spacing) * 72);
1981
1940
  min-width: var(--anchor-width);
1982
1941
  overflow: auto;
@@ -1997,14 +1956,14 @@
1997
1956
  --tw-outline-style: none;
1998
1957
  outline-style: none;
1999
1958
  }
2000
- ._ao-select-popup[data-starting-style], ._ao-select-popup[data-ending-style] {
1959
+ :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
1960
  opacity: 0%;
2002
1961
  }
2003
- ._ao-select-popup[data-starting-style] {
1962
+ :scope._ao-select-popup[data-starting-style], :scope ._ao-select-popup[data-starting-style] {
2004
1963
  --tw-translate-y: calc(var(--spacing) * -1);
2005
1964
  translate: var(--tw-translate-x) var(--tw-translate-y);
2006
1965
  }
2007
- ._ao-select-item {
1966
+ :scope._ao-select-item, :scope ._ao-select-item {
2008
1967
  display: flex;
2009
1968
  cursor: pointer;
2010
1969
  align-items: center;
@@ -2018,18 +1977,18 @@
2018
1977
  -webkit-user-select: none;
2019
1978
  user-select: none;
2020
1979
  }
2021
- ._ao-select-item[data-highlighted] {
1980
+ :scope._ao-select-item[data-highlighted], :scope ._ao-select-item[data-highlighted] {
2022
1981
  background-color: var(--color-surface-muted);
2023
1982
  }
2024
- ._ao-select-item[data-selected] {
1983
+ :scope._ao-select-item[data-selected], :scope ._ao-select-item[data-selected] {
2025
1984
  --tw-font-weight: var(--font-weight-medium);
2026
1985
  font-weight: var(--font-weight-medium);
2027
1986
  }
2028
- ._ao-select-item[data-disabled] {
1987
+ :scope._ao-select-item[data-disabled], :scope ._ao-select-item[data-disabled] {
2029
1988
  cursor: not-allowed;
2030
1989
  opacity: 50%;
2031
1990
  }
2032
- ._ao-select-item-indicator {
1991
+ :scope._ao-select-item-indicator, :scope ._ao-select-item-indicator {
2033
1992
  margin-left: auto;
2034
1993
  display: inline-flex;
2035
1994
  width: calc(var(--spacing) * 4);
@@ -2038,7 +1997,7 @@
2038
1997
  justify-content: center;
2039
1998
  color: var(--color-primary);
2040
1999
  }
2041
- ._ao-select-group-label {
2000
+ :scope._ao-select-group-label, :scope ._ao-select-group-label {
2042
2001
  padding-inline: calc(var(--spacing) * 3);
2043
2002
  padding-top: calc(var(--spacing) * 2);
2044
2003
  padding-bottom: calc(var(--spacing) * 1);
@@ -2049,9 +2008,7 @@
2049
2008
  color: var(--color-text-muted);
2050
2009
  text-transform: uppercase;
2051
2010
  }
2052
- }
2053
- @layer components {
2054
- ._ao-card {
2011
+ :scope._ao-card, :scope ._ao-card {
2055
2012
  display: flex;
2056
2013
  flex-direction: column;
2057
2014
  overflow: hidden;
@@ -2064,13 +2021,13 @@
2064
2021
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2065
2022
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2066
2023
  }
2067
- ._ao-card-body {
2024
+ :scope._ao-card-body, :scope ._ao-card-body {
2068
2025
  display: flex;
2069
2026
  flex-direction: column;
2070
2027
  gap: calc(var(--spacing) * 3);
2071
2028
  padding: calc(var(--spacing) * 5);
2072
2029
  }
2073
- ._ao-card-title {
2030
+ :scope._ao-card-title, :scope ._ao-card-title {
2074
2031
  display: flex;
2075
2032
  align-items: center;
2076
2033
  gap: calc(var(--spacing) * 2);
@@ -2081,12 +2038,24 @@
2081
2038
  --tw-font-weight: var(--font-weight-semibold);
2082
2039
  font-weight: var(--font-weight-semibold);
2083
2040
  }
2084
- ._ao-card-description {
2041
+ :scope._ao-card-header, :scope ._ao-card-header {
2042
+ display: flex;
2043
+ align-items: center;
2044
+ gap: calc(var(--spacing) * 2);
2045
+ }
2046
+ :scope._ao-card-toolbar, :scope ._ao-card-toolbar {
2047
+ margin-top: calc(var(--spacing) * -0.5);
2048
+ margin-left: auto;
2049
+ display: flex;
2050
+ align-items: center;
2051
+ gap: calc(var(--spacing) * 1);
2052
+ }
2053
+ :scope._ao-card-description, :scope ._ao-card-description {
2085
2054
  font-size: var(--text-sm);
2086
2055
  line-height: var(--tw-leading, var(--text-sm--line-height));
2087
2056
  color: var(--color-text-muted);
2088
2057
  }
2089
- ._ao-card-actions {
2058
+ :scope._ao-card-actions, :scope ._ao-card-actions {
2090
2059
  margin-top: auto;
2091
2060
  display: flex;
2092
2061
  flex-wrap: wrap;
@@ -2094,18 +2063,16 @@
2094
2063
  gap: calc(var(--spacing) * 2);
2095
2064
  padding-top: calc(var(--spacing) * 2);
2096
2065
  }
2097
- ._ao-card-compact ._ao-card-body {
2066
+ :scope._ao-card-compact ._ao-card-body, :scope ._ao-card-compact ._ao-card-body {
2098
2067
  gap: calc(var(--spacing) * 2);
2099
2068
  padding: calc(var(--spacing) * 3);
2100
2069
  }
2101
- ._ao-card-bordered {
2070
+ :scope._ao-card-bordered, :scope ._ao-card-bordered {
2102
2071
  border-color: var(--color-border-strong);
2103
2072
  --tw-shadow: 0 0 #0000;
2104
2073
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2105
2074
  }
2106
- }
2107
- @layer components {
2108
- ._ao-dialog {
2075
+ :scope._ao-dialog, :scope ._ao-dialog {
2109
2076
  margin: auto;
2110
2077
  flex-direction: column;
2111
2078
  overflow: hidden;
@@ -2125,29 +2092,29 @@
2125
2092
  transform: translateY(0) scale(1);
2126
2093
  transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
2127
2094
  }
2128
- ._ao-dialog[open] {
2095
+ :scope._ao-dialog[open], :scope ._ao-dialog[open] {
2129
2096
  display: flex;
2130
2097
  }
2131
- ._ao-dialog::backdrop {
2098
+ :scope._ao-dialog::backdrop, :scope ._ao-dialog::backdrop {
2132
2099
  background: rgb(0 0 0 / 0.4);
2133
2100
  transition: display 150ms allow-discrete, overlay 150ms allow-discrete, background 150ms ease-out;
2134
2101
  }
2135
- @starting-style {
2136
- ._ao-dialog[open] {
2102
+ @starting-style {
2103
+ :scope._ao-dialog[open], :scope ._ao-dialog[open] {
2137
2104
  opacity: 0;
2138
2105
  transform: translateY(-0.5rem) scale(0.98);
2139
2106
  }
2140
- ._ao-dialog[open]::backdrop {
2107
+ :scope._ao-dialog[open]::backdrop, :scope ._ao-dialog[open]::backdrop {
2141
2108
  background: rgb(0 0 0 / 0);
2142
2109
  }
2143
2110
  }
2144
- ._ao-dialog-sm {
2111
+ :scope._ao-dialog-sm, :scope ._ao-dialog-sm {
2145
2112
  max-width: 24rem;
2146
2113
  }
2147
- ._ao-dialog-lg {
2114
+ :scope._ao-dialog-lg, :scope ._ao-dialog-lg {
2148
2115
  max-width: 48rem;
2149
2116
  }
2150
- ._ao-dialog-header {
2117
+ :scope._ao-dialog-header, :scope ._ao-dialog-header {
2151
2118
  display: flex;
2152
2119
  align-items: flex-start;
2153
2120
  gap: calc(var(--spacing) * 3);
@@ -2155,7 +2122,7 @@
2155
2122
  padding-top: calc(var(--spacing) * 5);
2156
2123
  padding-bottom: calc(var(--spacing) * 3);
2157
2124
  }
2158
- ._ao-dialog-title {
2125
+ :scope._ao-dialog-title, :scope ._ao-dialog-title {
2159
2126
  margin: calc(var(--spacing) * 0);
2160
2127
  display: flex;
2161
2128
  flex: 1;
@@ -2168,7 +2135,7 @@
2168
2135
  --tw-font-weight: var(--font-weight-semibold);
2169
2136
  font-weight: var(--font-weight-semibold);
2170
2137
  }
2171
- ._ao-dialog-description {
2138
+ :scope._ao-dialog-description, :scope ._ao-dialog-description {
2172
2139
  margin-top: calc(var(--spacing) * -2);
2173
2140
  margin-bottom: calc(var(--spacing) * 3);
2174
2141
  padding-inline: calc(var(--spacing) * 5);
@@ -2176,7 +2143,7 @@
2176
2143
  line-height: var(--tw-leading, var(--text-sm--line-height));
2177
2144
  color: var(--color-text-muted);
2178
2145
  }
2179
- ._ao-dialog-body {
2146
+ :scope._ao-dialog-body, :scope ._ao-dialog-body {
2180
2147
  display: flex;
2181
2148
  flex-direction: column;
2182
2149
  gap: calc(var(--spacing) * 3);
@@ -2184,7 +2151,7 @@
2184
2151
  padding-inline: calc(var(--spacing) * 5);
2185
2152
  padding-block: calc(var(--spacing) * 3);
2186
2153
  }
2187
- ._ao-dialog-footer {
2154
+ :scope._ao-dialog-footer, :scope ._ao-dialog-footer {
2188
2155
  display: flex;
2189
2156
  flex-wrap: wrap;
2190
2157
  align-items: center;
@@ -2197,7 +2164,7 @@
2197
2164
  padding-inline: calc(var(--spacing) * 5);
2198
2165
  padding-block: calc(var(--spacing) * 3);
2199
2166
  }
2200
- ._ao-dialog-close {
2167
+ :scope._ao-dialog-close, :scope ._ao-dialog-close {
2201
2168
  display: inline-flex;
2202
2169
  width: calc(var(--spacing) * 7);
2203
2170
  height: calc(var(--spacing) * 7);
@@ -2234,19 +2201,17 @@
2234
2201
  outline-color: var(--color-primary);
2235
2202
  }
2236
2203
  }
2237
- }
2238
- @layer components {
2239
- ._ao-field {
2204
+ :scope._ao-field, :scope ._ao-field {
2240
2205
  display: flex;
2241
2206
  flex-direction: column;
2242
2207
  gap: calc(var(--spacing) * 1.5);
2243
2208
  }
2244
- ._ao-field-row {
2209
+ :scope._ao-field-row, :scope ._ao-field-row {
2245
2210
  flex-direction: row;
2246
2211
  align-items: center;
2247
2212
  gap: calc(var(--spacing) * 3);
2248
2213
  }
2249
- ._ao-field-label {
2214
+ :scope._ao-field-label, :scope ._ao-field-label {
2250
2215
  font-size: var(--text-sm);
2251
2216
  line-height: var(--tw-leading, var(--text-sm--line-height));
2252
2217
  --tw-leading: 1;
@@ -2255,41 +2220,39 @@
2255
2220
  font-weight: var(--font-weight-medium);
2256
2221
  color: var(--color-text);
2257
2222
  }
2258
- ._ao-field-label[data-required]::after {
2223
+ :scope._ao-field-label[data-required]::after, :scope ._ao-field-label[data-required]::after {
2259
2224
  content: " *";
2260
2225
  color: var(--color-danger);
2261
2226
  }
2262
- ._ao-asteriskField {
2227
+ :scope._ao-asteriskField, :scope ._ao-asteriskField {
2263
2228
  color: var(--color-danger);
2264
2229
  }
2265
- ._ao-field-description {
2230
+ :scope._ao-field-description, :scope ._ao-field-description {
2266
2231
  font-size: var(--text-xs);
2267
2232
  line-height: var(--tw-leading, var(--text-xs--line-height));
2268
2233
  --tw-leading: var(--leading-relaxed);
2269
2234
  line-height: var(--leading-relaxed);
2270
2235
  color: var(--color-text-muted);
2271
2236
  }
2272
- ._ao-field-error {
2237
+ :scope._ao-field-error, :scope ._ao-field-error {
2273
2238
  font-size: var(--text-xs);
2274
2239
  line-height: var(--tw-leading, var(--text-xs--line-height));
2275
2240
  --tw-leading: var(--leading-relaxed);
2276
2241
  line-height: var(--leading-relaxed);
2277
2242
  color: var(--color-danger);
2278
2243
  }
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 {
2244
+ :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
2245
  border-color: var(--color-danger);
2281
2246
  }
2282
- ._ao-field[data-invalid] ._ao-checkbox[data-unchecked], ._ao-field[data-invalid] ._ao-radio[data-unchecked] {
2247
+ :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
2248
  border-color: var(--color-danger);
2284
2249
  }
2285
- ._ao-field[data-invalid] ._ao-switch[data-unchecked] {
2250
+ :scope._ao-field[data-invalid] ._ao-switch[data-unchecked], :scope ._ao-field[data-invalid] ._ao-switch[data-unchecked] {
2286
2251
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2287
2252
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2288
2253
  --tw-ring-color: var(--color-danger);
2289
2254
  }
2290
- }
2291
- @layer components {
2292
- ._ao-file-input {
2255
+ :scope._ao-file-input, :scope ._ao-file-input {
2293
2256
  display: inline-flex;
2294
2257
  width: 100%;
2295
2258
  align-items: center;
@@ -2375,7 +2338,7 @@
2375
2338
  opacity: 50%;
2376
2339
  }
2377
2340
  }
2378
- ._ao-file-input-bordered {
2341
+ :scope._ao-file-input-bordered, :scope ._ao-file-input-bordered {
2379
2342
  border-color: var(--color-border);
2380
2343
  &:hover {
2381
2344
  @media (hover: hover) {
@@ -2383,7 +2346,7 @@
2383
2346
  }
2384
2347
  }
2385
2348
  }
2386
- ._ao-file-input-ghost {
2349
+ :scope._ao-file-input-ghost, :scope ._ao-file-input-ghost {
2387
2350
  background-color: transparent;
2388
2351
  &:hover {
2389
2352
  @media (hover: hover) {
@@ -2391,13 +2354,13 @@
2391
2354
  }
2392
2355
  }
2393
2356
  }
2394
- ._ao-file-input-danger {
2357
+ :scope._ao-file-input-danger, :scope ._ao-file-input-danger {
2395
2358
  border-color: var(--color-danger);
2396
2359
  &:focus-visible {
2397
2360
  outline-color: var(--color-danger);
2398
2361
  }
2399
2362
  }
2400
- ._ao-file-input-sm {
2363
+ :scope._ao-file-input-sm, :scope ._ao-file-input-sm {
2401
2364
  font-size: var(--text-xs);
2402
2365
  line-height: var(--tw-leading, var(--text-xs--line-height));
2403
2366
  &::file-selector-button {
@@ -2414,7 +2377,7 @@
2414
2377
  line-height: var(--tw-leading, var(--text-xs--line-height));
2415
2378
  }
2416
2379
  }
2417
- ._ao-file-input-lg {
2380
+ :scope._ao-file-input-lg, :scope ._ao-file-input-lg {
2418
2381
  font-size: var(--text-base);
2419
2382
  line-height: var(--tw-leading, var(--text-base--line-height));
2420
2383
  &::file-selector-button {
@@ -2431,9 +2394,7 @@
2431
2394
  line-height: var(--tw-leading, var(--text-base--line-height));
2432
2395
  }
2433
2396
  }
2434
- }
2435
- @layer components {
2436
- ._ao-footer {
2397
+ :scope._ao-footer, :scope ._ao-footer {
2437
2398
  display: flex;
2438
2399
  flex-wrap: wrap;
2439
2400
  align-items: center;
@@ -2449,13 +2410,13 @@
2449
2410
  line-height: var(--tw-leading, var(--text-xs--line-height));
2450
2411
  color: var(--color-text-muted);
2451
2412
  }
2452
- ._ao-footer-links {
2413
+ :scope._ao-footer-links, :scope ._ao-footer-links {
2453
2414
  display: flex;
2454
2415
  flex-wrap: wrap;
2455
2416
  align-items: center;
2456
2417
  gap: calc(var(--spacing) * 3);
2457
2418
  }
2458
- ._ao-footer-link {
2419
+ :scope._ao-footer-link, :scope ._ao-footer-link {
2459
2420
  border-radius: var(--radius-sm);
2460
2421
  color: var(--color-text-muted);
2461
2422
  text-decoration-line: none;
@@ -2480,16 +2441,14 @@
2480
2441
  outline-color: var(--color-primary);
2481
2442
  }
2482
2443
  }
2483
- ._ao-footer-meta {
2444
+ :scope._ao-footer-meta, :scope ._ao-footer-meta {
2484
2445
  color: var(--color-text-muted);
2485
2446
  }
2486
- }
2487
- @layer components {
2488
- ._ao-menu {
2447
+ :scope._ao-menu, :scope ._ao-menu {
2489
2448
  position: relative;
2490
2449
  display: inline-block;
2491
2450
  }
2492
- ._ao-menu-trigger {
2451
+ :scope._ao-menu-trigger, :scope ._ao-menu-trigger {
2493
2452
  display: inline-flex;
2494
2453
  cursor: pointer;
2495
2454
  align-items: center;
@@ -2513,10 +2472,10 @@
2513
2472
  }
2514
2473
  list-style: none;
2515
2474
  }
2516
- ._ao-menu-trigger::-webkit-details-marker {
2475
+ :scope._ao-menu-trigger::-webkit-details-marker, :scope ._ao-menu-trigger::-webkit-details-marker {
2517
2476
  display: none;
2518
2477
  }
2519
- ._ao-menu-trigger:not(._ao-btn) {
2478
+ :scope._ao-menu-trigger:not(._ao-btn), :scope ._ao-menu-trigger:not(._ao-btn) {
2520
2479
  border-radius: var(--radius-md);
2521
2480
  background-color: transparent;
2522
2481
  padding-inline: calc(var(--spacing) * 2.5);
@@ -2532,7 +2491,7 @@
2532
2491
  }
2533
2492
  }
2534
2493
  }
2535
- ._ao-menu-trigger::after {
2494
+ :scope._ao-menu-trigger::after, :scope ._ao-menu-trigger::after {
2536
2495
  content: "";
2537
2496
  width: 0.5em;
2538
2497
  height: 0.5em;
@@ -2542,13 +2501,13 @@
2542
2501
  transition: transform 150ms ease;
2543
2502
  flex-shrink: 0;
2544
2503
  }
2545
- ._ao-menu-trigger:empty {
2504
+ :scope._ao-menu-trigger:empty, :scope ._ao-menu-trigger:empty {
2546
2505
  justify-content: center;
2547
2506
  }
2548
- ._ao-menu[open] > ._ao-menu-trigger::after {
2507
+ :scope._ao-menu[open] > ._ao-menu-trigger::after, :scope ._ao-menu[open] > ._ao-menu-trigger::after {
2549
2508
  transform: rotate(-135deg);
2550
2509
  }
2551
- ._ao-menu-popup {
2510
+ :scope._ao-menu-popup, :scope ._ao-menu-popup {
2552
2511
  position: absolute;
2553
2512
  top: 100%;
2554
2513
  left: calc(var(--spacing) * 0);
@@ -2567,7 +2526,7 @@
2567
2526
  --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
2527
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2569
2528
  }
2570
- ._ao-menu-item {
2529
+ :scope._ao-menu-item, :scope ._ao-menu-item {
2571
2530
  display: flex;
2572
2531
  width: 100%;
2573
2532
  cursor: pointer;
@@ -2606,22 +2565,22 @@
2606
2565
  opacity: 50%;
2607
2566
  }
2608
2567
  }
2609
- ._ao-menu-item[aria-disabled="true"] {
2568
+ :scope._ao-menu-item[aria-disabled="true"], :scope ._ao-menu-item[aria-disabled="true"] {
2610
2569
  cursor: not-allowed;
2611
2570
  opacity: 50%;
2612
2571
  }
2613
- ._ao-menu-separator {
2572
+ :scope._ao-menu-separator, :scope ._ao-menu-separator {
2614
2573
  margin-block: calc(var(--spacing) * 1);
2615
2574
  height: 1px;
2616
2575
  border-style: var(--tw-border-style);
2617
2576
  border-width: 0px;
2618
2577
  background-color: var(--color-border);
2619
2578
  }
2620
- ._ao-menu-group {
2579
+ :scope._ao-menu-group, :scope ._ao-menu-group {
2621
2580
  display: flex;
2622
2581
  flex-direction: column;
2623
2582
  }
2624
- ._ao-menu-group-label {
2583
+ :scope._ao-menu-group-label, :scope ._ao-menu-group-label {
2625
2584
  padding-inline: calc(var(--spacing) * 3);
2626
2585
  padding-top: calc(var(--spacing) * 2);
2627
2586
  padding-bottom: calc(var(--spacing) * 1);
@@ -2632,9 +2591,7 @@
2632
2591
  color: var(--color-text-muted);
2633
2592
  text-transform: uppercase;
2634
2593
  }
2635
- }
2636
- @layer components {
2637
- ._ao-navbar {
2594
+ :scope._ao-navbar, :scope ._ao-navbar {
2638
2595
  display: flex;
2639
2596
  height: calc(var(--spacing) * 12);
2640
2597
  align-items: center;
@@ -2646,7 +2603,7 @@
2646
2603
  padding-inline: calc(var(--spacing) * 4);
2647
2604
  color: var(--color-text);
2648
2605
  }
2649
- ._ao-navbar-brand {
2606
+ :scope._ao-navbar-brand, :scope ._ao-navbar-brand {
2650
2607
  display: flex;
2651
2608
  flex-shrink: 0;
2652
2609
  align-items: center;
@@ -2657,12 +2614,12 @@
2657
2614
  font-weight: var(--font-weight-semibold);
2658
2615
  color: var(--color-text);
2659
2616
  }
2660
- ._ao-navbar-items {
2617
+ :scope._ao-navbar-items, :scope ._ao-navbar-items {
2661
2618
  display: flex;
2662
2619
  align-items: center;
2663
2620
  gap: calc(var(--spacing) * 0.5);
2664
2621
  }
2665
- ._ao-navbar-item {
2622
+ :scope._ao-navbar-item, :scope ._ao-navbar-item {
2666
2623
  display: inline-flex;
2667
2624
  cursor: pointer;
2668
2625
  align-items: center;
@@ -2699,17 +2656,17 @@
2699
2656
  outline-color: var(--color-primary);
2700
2657
  }
2701
2658
  }
2702
- ._ao-navbar-item[aria-current="page"], ._ao-navbar-item[data-active] {
2659
+ :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
2660
  background-color: var(--color-primary-muted);
2704
2661
  color: var(--color-primary);
2705
2662
  }
2706
- ._ao-navbar-actions {
2663
+ :scope._ao-navbar-actions, :scope ._ao-navbar-actions {
2707
2664
  margin-left: auto;
2708
2665
  display: flex;
2709
2666
  align-items: center;
2710
2667
  gap: calc(var(--spacing) * 2);
2711
2668
  }
2712
- ._ao-navbar-mobile-toggle {
2669
+ :scope._ao-navbar-mobile-toggle, :scope ._ao-navbar-mobile-toggle {
2713
2670
  margin-left: calc(var(--spacing) * -2);
2714
2671
  display: inline-flex;
2715
2672
  width: calc(var(--spacing) * 9);
@@ -2736,7 +2693,7 @@
2736
2693
  outline-color: var(--color-primary);
2737
2694
  }
2738
2695
  }
2739
- ._ao-navbar-mobile-toggle::before {
2696
+ :scope._ao-navbar-mobile-toggle::before, :scope ._ao-navbar-mobile-toggle::before {
2740
2697
  content: "";
2741
2698
  display: block;
2742
2699
  width: 18px;
@@ -2745,14 +2702,12 @@
2745
2702
  border-radius: 1px;
2746
2703
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
2747
2704
  }
2748
- @media (min-width: 48rem) {
2749
- ._ao-navbar-mobile-toggle {
2705
+ @media (min-width: 48rem) {
2706
+ :scope._ao-navbar-mobile-toggle, :scope ._ao-navbar-mobile-toggle {
2750
2707
  display: none;
2751
2708
  }
2752
2709
  }
2753
- }
2754
- @layer components {
2755
- ._ao-sidebar {
2710
+ :scope._ao-sidebar, :scope ._ao-sidebar {
2756
2711
  display: flex;
2757
2712
  flex-shrink: 0;
2758
2713
  flex-direction: column;
@@ -2764,7 +2719,7 @@
2764
2719
  width: var(--app-shell-sidebar-w, 240px);
2765
2720
  transition: width 150ms ease;
2766
2721
  }
2767
- ._ao-sidebar-toggle {
2722
+ :scope._ao-sidebar-toggle, :scope ._ao-sidebar-toggle {
2768
2723
  position: absolute;
2769
2724
  width: 1px;
2770
2725
  height: 1px;
@@ -2774,17 +2729,17 @@
2774
2729
  opacity: 0;
2775
2730
  pointer-events: none;
2776
2731
  }
2777
- ._ao-sidebar:has(._ao-sidebar-toggle:checked) {
2732
+ :scope._ao-sidebar:has(._ao-sidebar-toggle:checked), :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) {
2778
2733
  width: var(--app-shell-sidebar-w-collapsed, 56px);
2779
2734
  }
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 {
2735
+ :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
2736
  display: none;
2782
2737
  }
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 {
2738
+ :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
2739
  justify-content: center;
2785
2740
  padding-inline: calc(var(--spacing) * 1);
2786
2741
  }
2787
- ._ao-sidebar-header {
2742
+ :scope._ao-sidebar-header, :scope ._ao-sidebar-header {
2788
2743
  display: flex;
2789
2744
  height: calc(var(--spacing) * 12);
2790
2745
  flex-shrink: 0;
@@ -2795,7 +2750,7 @@
2795
2750
  border-color: var(--color-border);
2796
2751
  padding-inline: calc(var(--spacing) * 3);
2797
2752
  }
2798
- ._ao-sidebar-nav {
2753
+ :scope._ao-sidebar-nav, :scope ._ao-sidebar-nav {
2799
2754
  display: flex;
2800
2755
  flex: 1;
2801
2756
  flex-direction: column;
@@ -2804,15 +2759,15 @@
2804
2759
  padding-inline: calc(var(--spacing) * 2);
2805
2760
  padding-block: calc(var(--spacing) * 2);
2806
2761
  }
2807
- ._ao-sidebar-group {
2762
+ :scope._ao-sidebar-group, :scope ._ao-sidebar-group {
2808
2763
  display: flex;
2809
2764
  flex-direction: column;
2810
2765
  gap: calc(var(--spacing) * 0.5);
2811
2766
  }
2812
- ._ao-sidebar-group + ._ao-sidebar-group {
2767
+ :scope._ao-sidebar-group + ._ao-sidebar-group, :scope ._ao-sidebar-group + ._ao-sidebar-group {
2813
2768
  margin-top: calc(var(--spacing) * 2);
2814
2769
  }
2815
- ._ao-sidebar-group-label {
2770
+ :scope._ao-sidebar-group-label, :scope ._ao-sidebar-group-label {
2816
2771
  padding-inline: calc(var(--spacing) * 2);
2817
2772
  padding-top: calc(var(--spacing) * 2);
2818
2773
  padding-bottom: calc(var(--spacing) * 1);
@@ -2823,7 +2778,7 @@
2823
2778
  color: var(--color-text-muted);
2824
2779
  text-transform: uppercase;
2825
2780
  }
2826
- ._ao-sidebar-item {
2781
+ :scope._ao-sidebar-item, :scope ._ao-sidebar-item {
2827
2782
  display: flex;
2828
2783
  cursor: pointer;
2829
2784
  align-items: center;
@@ -2861,13 +2816,13 @@
2861
2816
  outline-color: var(--color-primary);
2862
2817
  }
2863
2818
  }
2864
- ._ao-sidebar-item[aria-current="page"], ._ao-sidebar-item[data-active] {
2819
+ :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
2820
  background-color: var(--color-primary-muted);
2866
2821
  --tw-font-weight: var(--font-weight-medium);
2867
2822
  font-weight: var(--font-weight-medium);
2868
2823
  color: var(--color-primary);
2869
2824
  }
2870
- ._ao-sidebar-icon {
2825
+ :scope._ao-sidebar-icon, :scope ._ao-sidebar-icon {
2871
2826
  display: inline-flex;
2872
2827
  width: calc(var(--spacing) * 4);
2873
2828
  height: calc(var(--spacing) * 4);
@@ -2876,17 +2831,17 @@
2876
2831
  justify-content: center;
2877
2832
  color: var(--color-text-muted);
2878
2833
  }
2879
- ._ao-sidebar-item[aria-current="page"] ._ao-sidebar-icon, ._ao-sidebar-item[data-active] ._ao-sidebar-icon {
2834
+ :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
2835
  color: var(--color-primary);
2881
2836
  }
2882
- ._ao-sidebar-label {
2837
+ :scope._ao-sidebar-label, :scope ._ao-sidebar-label {
2883
2838
  min-width: calc(var(--spacing) * 0);
2884
2839
  flex: 1;
2885
2840
  overflow: hidden;
2886
2841
  text-overflow: ellipsis;
2887
2842
  white-space: nowrap;
2888
2843
  }
2889
- ._ao-sidebar-badge {
2844
+ :scope._ao-sidebar-badge, :scope ._ao-sidebar-badge {
2890
2845
  margin-left: auto;
2891
2846
  display: inline-flex;
2892
2847
  height: calc(var(--spacing) * 5);
@@ -2902,12 +2857,12 @@
2902
2857
  font-weight: var(--font-weight-medium);
2903
2858
  color: var(--color-text-muted);
2904
2859
  }
2905
- ._ao-sidebar-collapsible {
2860
+ :scope._ao-sidebar-collapsible, :scope ._ao-sidebar-collapsible {
2906
2861
  display: flex;
2907
2862
  flex-direction: column;
2908
2863
  interpolate-size: allow-keywords;
2909
2864
  }
2910
- ._ao-sidebar-collapsible-trigger {
2865
+ :scope._ao-sidebar-collapsible-trigger, :scope ._ao-sidebar-collapsible-trigger {
2911
2866
  display: flex;
2912
2867
  width: 100%;
2913
2868
  cursor: pointer;
@@ -2947,10 +2902,10 @@
2947
2902
  }
2948
2903
  list-style: none;
2949
2904
  }
2950
- ._ao-sidebar-collapsible-trigger::-webkit-details-marker {
2905
+ :scope._ao-sidebar-collapsible-trigger::-webkit-details-marker, :scope ._ao-sidebar-collapsible-trigger::-webkit-details-marker {
2951
2906
  display: none;
2952
2907
  }
2953
- ._ao-sidebar-collapsible-trigger::after {
2908
+ :scope._ao-sidebar-collapsible-trigger::after, :scope ._ao-sidebar-collapsible-trigger::after {
2954
2909
  content: "";
2955
2910
  margin-left: auto;
2956
2911
  width: 0.375rem;
@@ -2962,10 +2917,10 @@
2962
2917
  transition: transform 150ms ease;
2963
2918
  flex-shrink: 0;
2964
2919
  }
2965
- ._ao-sidebar-collapsible[open] > ._ao-sidebar-collapsible-trigger::after {
2920
+ :scope._ao-sidebar-collapsible[open] > ._ao-sidebar-collapsible-trigger::after, :scope ._ao-sidebar-collapsible[open] > ._ao-sidebar-collapsible-trigger::after {
2966
2921
  transform: rotate(45deg);
2967
2922
  }
2968
- ._ao-sidebar-collapsible-panel {
2923
+ :scope._ao-sidebar-collapsible-panel, :scope ._ao-sidebar-collapsible-panel {
2969
2924
  margin-top: calc(var(--spacing) * 0.5);
2970
2925
  display: flex;
2971
2926
  flex-direction: column;
@@ -2973,18 +2928,18 @@
2973
2928
  padding-left: calc(var(--spacing) * 4);
2974
2929
  overflow: hidden;
2975
2930
  }
2976
- ._ao-sidebar-collapsible::details-content {
2931
+ :scope._ao-sidebar-collapsible::details-content, :scope ._ao-sidebar-collapsible::details-content {
2977
2932
  opacity: 0;
2978
2933
  height: 0;
2979
2934
  overflow: clip;
2980
2935
  transition: opacity 150ms ease, height 150ms ease, content-visibility 150ms;
2981
2936
  transition-behavior: allow-discrete;
2982
2937
  }
2983
- ._ao-sidebar-collapsible[open]::details-content {
2938
+ :scope._ao-sidebar-collapsible[open]::details-content, :scope ._ao-sidebar-collapsible[open]::details-content {
2984
2939
  opacity: 1;
2985
2940
  height: auto;
2986
2941
  }
2987
- ._ao-sidebar-subitem {
2942
+ :scope._ao-sidebar-subitem, :scope ._ao-sidebar-subitem {
2988
2943
  display: flex;
2989
2944
  cursor: pointer;
2990
2945
  align-items: center;
@@ -3022,13 +2977,13 @@
3022
2977
  outline-color: var(--color-primary);
3023
2978
  }
3024
2979
  }
3025
- ._ao-sidebar-subitem[aria-current="page"], ._ao-sidebar-subitem[data-active] {
2980
+ :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
2981
  background-color: var(--color-primary-muted);
3027
2982
  --tw-font-weight: var(--font-weight-medium);
3028
2983
  font-weight: var(--font-weight-medium);
3029
2984
  color: var(--color-primary);
3030
2985
  }
3031
- ._ao-sidebar-footer {
2986
+ :scope._ao-sidebar-footer, :scope ._ao-sidebar-footer {
3032
2987
  display: flex;
3033
2988
  flex-direction: column;
3034
2989
  gap: calc(var(--spacing) * 1);
@@ -3038,7 +2993,7 @@
3038
2993
  padding-inline: calc(var(--spacing) * 2);
3039
2994
  padding-block: calc(var(--spacing) * 2);
3040
2995
  }
3041
- ._ao-sidebar-collapse-toggle {
2996
+ :scope._ao-sidebar-collapse-toggle, :scope ._ao-sidebar-collapse-toggle {
3042
2997
  position: relative;
3043
2998
  display: inline-flex;
3044
2999
  width: calc(var(--spacing) * 7);
@@ -3067,13 +3022,13 @@
3067
3022
  }
3068
3023
  }
3069
3024
  }
3070
- ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible) {
3025
+ :scope._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible), :scope ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible) {
3071
3026
  outline-style: var(--tw-outline-style);
3072
3027
  outline-width: 2px;
3073
3028
  outline-offset: 2px;
3074
3029
  outline-color: var(--color-primary);
3075
3030
  }
3076
- ._ao-sidebar-collapse-toggle::before {
3031
+ :scope._ao-sidebar-collapse-toggle::before, :scope ._ao-sidebar-collapse-toggle::before {
3077
3032
  content: "";
3078
3033
  width: 0.5rem;
3079
3034
  height: 0.5rem;
@@ -3082,10 +3037,10 @@
3082
3037
  transform: rotate(45deg);
3083
3038
  transition: transform 150ms ease;
3084
3039
  }
3085
- ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle::before {
3040
+ :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
3041
  transform: rotate(-135deg);
3087
3042
  }
3088
- ._ao-sidebar-drawer-backdrop {
3043
+ :scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop {
3089
3044
  position: fixed;
3090
3045
  inset: calc(var(--spacing) * 0);
3091
3046
  z-index: 40;
@@ -3099,10 +3054,10 @@
3099
3054
  --tw-duration: 150ms;
3100
3055
  transition-duration: 150ms;
3101
3056
  }
3102
- ._ao-sidebar-drawer-backdrop[data-starting-style], ._ao-sidebar-drawer-backdrop[data-ending-style] {
3057
+ :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
3058
  opacity: 0%;
3104
3059
  }
3105
- ._ao-sidebar-drawer {
3060
+ :scope._ao-sidebar-drawer, :scope ._ao-sidebar-drawer {
3106
3061
  position: fixed;
3107
3062
  inset-block: calc(var(--spacing) * 0);
3108
3063
  left: calc(var(--spacing) * 0);
@@ -3121,17 +3076,15 @@
3121
3076
  transition-duration: 150ms;
3122
3077
  width: min(var(--app-shell-sidebar-w, 240px), 80vw);
3123
3078
  }
3124
- ._ao-sidebar-drawer[data-starting-style], ._ao-sidebar-drawer[data-ending-style] {
3079
+ :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
3080
  --tw-translate-x: -100%;
3126
3081
  translate: var(--tw-translate-x) var(--tw-translate-y);
3127
3082
  }
3128
- }
3129
- @layer components {
3130
- ._ao-tabs {
3083
+ :scope._ao-tabs, :scope ._ao-tabs {
3131
3084
  display: flex;
3132
3085
  flex-direction: column;
3133
3086
  }
3134
- ._ao-tabs ._ao-tab-list {
3087
+ :scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list {
3135
3088
  display: inline-flex;
3136
3089
  align-items: center;
3137
3090
  gap: calc(var(--spacing) * 1);
@@ -3140,7 +3093,7 @@
3140
3093
  border-color: var(--color-border);
3141
3094
  position: relative;
3142
3095
  }
3143
- ._ao-tabs ._ao-tab {
3096
+ :scope._ao-tabs ._ao-tab, :scope ._ao-tabs ._ao-tab {
3144
3097
  display: inline-flex;
3145
3098
  height: calc(var(--spacing) * 9);
3146
3099
  cursor: pointer;
@@ -3186,10 +3139,10 @@
3186
3139
  opacity: 50%;
3187
3140
  }
3188
3141
  }
3189
- ._ao-tabs ._ao-tab[data-selected], ._ao-tabs ._ao-tab[aria-selected="true"] {
3142
+ :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
3143
  color: var(--color-text);
3191
3144
  }
3192
- ._ao-tabs ._ao-tab-input {
3145
+ :scope._ao-tabs ._ao-tab-input, :scope ._ao-tabs ._ao-tab-input {
3193
3146
  position: absolute;
3194
3147
  width: 1px;
3195
3148
  height: 1px;
@@ -3199,19 +3152,19 @@
3199
3152
  opacity: 0;
3200
3153
  pointer-events: none;
3201
3154
  }
3202
- ._ao-tabs ._ao-tab-input:checked + ._ao-tab {
3155
+ :scope._ao-tabs ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs ._ao-tab-input:checked + ._ao-tab {
3203
3156
  color: var(--color-text);
3204
3157
  }
3205
- ._ao-tabs ._ao-tab-input:focus-visible + ._ao-tab {
3158
+ :scope._ao-tabs ._ao-tab-input:focus-visible + ._ao-tab, :scope ._ao-tabs ._ao-tab-input:focus-visible + ._ao-tab {
3206
3159
  outline-style: var(--tw-outline-style);
3207
3160
  outline-width: 2px;
3208
3161
  outline-offset: 2px;
3209
3162
  outline-color: var(--color-primary);
3210
3163
  }
3211
- ._ao-tabs-bordered ._ao-tab, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab {
3164
+ :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
3165
  position: relative;
3213
3166
  }
3214
- ._ao-tabs-bordered ._ao-tab::after, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after {
3167
+ :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
3168
  content: "";
3216
3169
  position: absolute;
3217
3170
  inset-inline: 0;
@@ -3221,10 +3174,10 @@
3221
3174
  transform: scaleX(0);
3222
3175
  transition: transform 150ms ease;
3223
3176
  }
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 {
3177
+ :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
3178
  transform: scaleX(1);
3226
3179
  }
3227
- ._ao-tabs-boxed ._ao-tab-list {
3180
+ :scope._ao-tabs-boxed ._ao-tab-list, :scope ._ao-tabs-boxed ._ao-tab-list {
3228
3181
  gap: calc(var(--spacing) * 0);
3229
3182
  border-radius: var(--radius-md);
3230
3183
  border-style: var(--tw-border-style);
@@ -3233,54 +3186,54 @@
3233
3186
  background-color: var(--color-surface-muted);
3234
3187
  padding: calc(var(--spacing) * 0.5);
3235
3188
  }
3236
- ._ao-tabs-boxed ._ao-tab {
3189
+ :scope._ao-tabs-boxed ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab {
3237
3190
  border-radius: 0.25rem;
3238
3191
  }
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 {
3192
+ :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
3193
  background-color: var(--color-surface);
3241
3194
  color: var(--color-text);
3242
3195
  --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
3196
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3244
3197
  }
3245
- ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list {
3198
+ :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
3199
  display: flex;
3247
3200
  width: 100%;
3248
3201
  }
3249
- ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab {
3202
+ :scope._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab, :scope ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab {
3250
3203
  flex: 1;
3251
3204
  justify-content: center;
3252
3205
  }
3253
- ._ao-tabs-sm ._ao-tab {
3206
+ :scope._ao-tabs-sm ._ao-tab, :scope ._ao-tabs-sm ._ao-tab {
3254
3207
  height: calc(var(--spacing) * 7);
3255
3208
  padding-inline: calc(var(--spacing) * 2);
3256
3209
  font-size: var(--text-xs);
3257
3210
  line-height: var(--tw-leading, var(--text-xs--line-height));
3258
3211
  }
3259
- ._ao-tabs-lg ._ao-tab {
3212
+ :scope._ao-tabs-lg ._ao-tab, :scope ._ao-tabs-lg ._ao-tab {
3260
3213
  height: calc(var(--spacing) * 11);
3261
3214
  padding-inline: calc(var(--spacing) * 4);
3262
3215
  font-size: var(--text-base);
3263
3216
  line-height: var(--tw-leading, var(--text-base--line-height));
3264
3217
  }
3265
- ._ao-tabs ._ao-tab-panel {
3218
+ :scope._ao-tabs ._ao-tab-panel, :scope ._ao-tabs ._ao-tab-panel {
3266
3219
  padding-top: calc(var(--spacing) * 3);
3267
3220
  --tw-outline-style: none;
3268
3221
  outline-style: none;
3269
3222
  }
3270
- ._ao-tabs ._ao-tab-panel {
3223
+ :scope._ao-tabs ._ao-tab-panel, :scope ._ao-tabs ._ao-tab-panel {
3271
3224
  display: none;
3272
3225
  }
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"] {
3226
+ :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
3227
  display: block;
3275
3228
  }
3276
- ._ao-tabs ._ao-tab-panel:not([hidden]):not([data-value]) {
3229
+ :scope._ao-tabs ._ao-tab-panel:not([hidden]):not([data-value]), :scope ._ao-tabs ._ao-tab-panel:not([hidden]):not([data-value]) {
3277
3230
  display: block;
3278
3231
  }
3279
- ._ao-tabs[data-orientation="vertical"] {
3232
+ :scope._ao-tabs[data-orientation="vertical"], :scope ._ao-tabs[data-orientation="vertical"] {
3280
3233
  flex-direction: row;
3281
3234
  gap: calc(var(--spacing) * 3);
3282
3235
  }
3283
- ._ao-tabs[data-orientation="vertical"] ._ao-tab-list {
3236
+ :scope._ao-tabs[data-orientation="vertical"] ._ao-tab-list, :scope ._ao-tabs[data-orientation="vertical"] ._ao-tab-list {
3284
3237
  flex-direction: column;
3285
3238
  align-items: stretch;
3286
3239
  border-right-style: var(--tw-border-style);
@@ -3289,11 +3242,11 @@
3289
3242
  border-bottom-width: 0px;
3290
3243
  border-color: var(--color-border);
3291
3244
  }
3292
- ._ao-tabs[data-orientation="vertical"] ._ao-tab {
3245
+ :scope._ao-tabs[data-orientation="vertical"] ._ao-tab, :scope ._ao-tabs[data-orientation="vertical"] ._ao-tab {
3293
3246
  width: 100%;
3294
3247
  justify-content: flex-start;
3295
3248
  }
3296
- ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab::after, ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after {
3249
+ :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
3250
  inset-inline: auto;
3298
3251
  inset-inline-end: -1px;
3299
3252
  inset-block: 0;
@@ -3301,19 +3254,17 @@
3301
3254
  block-size: auto;
3302
3255
  transform: scaleY(0);
3303
3256
  }
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 {
3257
+ :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
3258
  transform: scaleY(1);
3306
3259
  }
3307
- }
3308
- @layer components {
3309
- ._ao-table {
3260
+ :scope._ao-table, :scope ._ao-table {
3310
3261
  width: 100%;
3311
3262
  border-collapse: collapse;
3312
3263
  font-size: var(--text-sm);
3313
3264
  line-height: var(--tw-leading, var(--text-sm--line-height));
3314
3265
  color: var(--color-text);
3315
3266
  }
3316
- ._ao-table :where(th, td), ._ao-table-cell, ._ao-table-header-cell {
3267
+ :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
3268
  border-bottom-style: var(--tw-border-style);
3318
3269
  border-bottom-width: 1px;
3319
3270
  border-color: var(--color-border);
@@ -3322,7 +3273,7 @@
3322
3273
  text-align: left;
3323
3274
  vertical-align: middle;
3324
3275
  }
3325
- ._ao-table :where(thead th), ._ao-table-header-cell {
3276
+ :scope._ao-table :where(thead th), :scope ._ao-table :where(thead th), :scope._ao-table-header-cell, :scope ._ao-table-header-cell {
3326
3277
  border-bottom-color: var(--color-border-strong);
3327
3278
  background-color: var(--color-surface-muted);
3328
3279
  --tw-font-weight: var(--font-weight-medium);
@@ -3330,92 +3281,90 @@
3330
3281
  white-space: nowrap;
3331
3282
  color: var(--color-text-muted);
3332
3283
  }
3333
- ._ao-table > :last-child > tr:last-child :where(td), ._ao-table > :last-child > tr:last-child ._ao-table-cell {
3284
+ :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
3285
  border-bottom-style: var(--tw-border-style);
3335
3286
  border-bottom-width: 0px;
3336
3287
  }
3337
- ._ao-table :where(th, td)[data-align="right"] {
3288
+ :scope._ao-table :where(th, td)[data-align="right"], :scope ._ao-table :where(th, td)[data-align="right"] {
3338
3289
  text-align: right;
3339
3290
  }
3340
- ._ao-table :where(th, td)[data-align="center"] {
3291
+ :scope._ao-table :where(th, td)[data-align="center"], :scope ._ao-table :where(th, td)[data-align="center"] {
3341
3292
  text-align: center;
3342
3293
  }
3343
- ._ao-table-cell-numeric {
3294
+ :scope._ao-table-cell-numeric, :scope ._ao-table-cell-numeric {
3344
3295
  text-align: right;
3345
3296
  --tw-numeric-spacing: tabular-nums;
3346
3297
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3347
3298
  }
3348
- ._ao-table-cell-gutter {
3299
+ :scope._ao-table-cell-gutter, :scope ._ao-table-cell-gutter {
3349
3300
  width: calc(var(--spacing) * 6);
3350
3301
  padding-inline: calc(var(--spacing) * 0);
3351
3302
  text-align: center;
3352
3303
  color: var(--color-text-muted);
3353
3304
  }
3354
- ._ao-table-cell-gutter > :is(i, svg) {
3305
+ :scope._ao-table-cell-gutter > :is(i, svg), :scope ._ao-table-cell-gutter > :is(i, svg) {
3355
3306
  font-size: 1rem;
3356
3307
  line-height: 1;
3357
3308
  vertical-align: middle;
3358
3309
  }
3359
- ._ao-table-striped tbody tr:nth-child(even) :where(td) {
3310
+ :scope._ao-table-striped tbody tr:nth-child(even) :where(td), :scope ._ao-table-striped tbody tr:nth-child(even) :where(td) {
3360
3311
  background-color: var(--color-surface-muted);
3361
3312
  }
3362
- ._ao-table-bordered {
3313
+ :scope._ao-table-bordered, :scope ._ao-table-bordered {
3363
3314
  border-style: var(--tw-border-style);
3364
3315
  border-width: 1px;
3365
3316
  border-color: var(--color-border);
3366
3317
  }
3367
- ._ao-table-bordered :where(th, td) {
3318
+ :scope._ao-table-bordered :where(th, td), :scope ._ao-table-bordered :where(th, td) {
3368
3319
  border-style: var(--tw-border-style);
3369
3320
  border-width: 1px;
3370
3321
  border-color: var(--color-border);
3371
3322
  }
3372
- ._ao-table-relaxed :where(th, td) {
3323
+ :scope._ao-table-relaxed :where(th, td), :scope ._ao-table-relaxed :where(th, td) {
3373
3324
  padding-inline: calc(var(--spacing) * 4);
3374
3325
  padding-block: calc(var(--spacing) * 3);
3375
3326
  }
3376
- ._ao-table-sticky thead :where(th) {
3327
+ :scope._ao-table-sticky thead :where(th), :scope ._ao-table-sticky thead :where(th) {
3377
3328
  position: sticky;
3378
3329
  top: calc(var(--spacing) * 0);
3379
3330
  z-index: 10;
3380
3331
  background-color: var(--color-surface-muted);
3381
3332
  }
3382
- ._ao-table tbody tr {
3333
+ :scope._ao-table tbody tr, :scope ._ao-table tbody tr {
3383
3334
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3384
3335
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3385
3336
  transition-duration: var(--tw-duration, var(--default-transition-duration));
3386
3337
  --tw-duration: 75ms;
3387
3338
  transition-duration: 75ms;
3388
3339
  }
3389
- ._ao-table tbody tr:hover :where(td) {
3340
+ :scope._ao-table tbody tr:hover :where(td), :scope ._ao-table tbody tr:hover :where(td) {
3390
3341
  background-color: var(--color-surface-muted);
3391
3342
  }
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] {
3343
+ :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
3344
  background-color: var(--color-primary-muted);
3394
3345
  }
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) {
3346
+ :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
3347
  background-color: var(--color-primary-muted);
3397
3348
  }
3398
- ._ao-table-row-link {
3349
+ :scope._ao-table-row-link, :scope ._ao-table-row-link {
3399
3350
  position: relative;
3400
3351
  cursor: pointer;
3401
3352
  }
3402
- ._ao-table-row-link:hover :where(td) {
3353
+ :scope._ao-table-row-link:hover :where(td), :scope ._ao-table-row-link:hover :where(td) {
3403
3354
  background-color: var(--color-surface-muted);
3404
3355
  }
3405
- ._ao-table-row-link a:first-of-type::after {
3356
+ :scope._ao-table-row-link a:first-of-type::after, :scope ._ao-table-row-link a:first-of-type::after {
3406
3357
  content: "";
3407
3358
  position: absolute;
3408
3359
  inset: calc(var(--spacing) * 0);
3409
3360
  }
3410
- ._ao-table-row-link:focus-within {
3361
+ :scope._ao-table-row-link:focus-within, :scope ._ao-table-row-link:focus-within {
3411
3362
  outline-style: var(--tw-outline-style);
3412
3363
  outline-width: 2px;
3413
3364
  outline-offset: calc(2px * -1);
3414
3365
  outline-color: var(--color-primary);
3415
3366
  }
3416
- }
3417
- @layer components {
3418
- ._ao-tooltip {
3367
+ :scope._ao-tooltip, :scope ._ao-tooltip {
3419
3368
  pointer-events: none;
3420
3369
  display: inline-block;
3421
3370
  max-width: var(--container-xs);
@@ -3434,34 +3383,34 @@
3434
3383
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3435
3384
  text-wrap: balance;
3436
3385
  }
3437
- ._ao-tooltip-sm {
3386
+ :scope._ao-tooltip-sm, :scope ._ao-tooltip-sm {
3438
3387
  padding-inline: calc(var(--spacing) * 1.5);
3439
3388
  padding-block: calc(var(--spacing) * 0.5);
3440
3389
  }
3441
- ._ao-tooltip {
3390
+ :scope._ao-tooltip, :scope ._ao-tooltip {
3442
3391
  transition: opacity 150ms ease-out, transform 150ms ease-out;
3443
3392
  }
3444
- ._ao-tooltip[data-starting-style], ._ao-tooltip[data-ending-style] {
3393
+ :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
3394
  opacity: 0;
3446
3395
  }
3447
- ._ao-tooltip[data-side="top"][data-starting-style], ._ao-tooltip[data-side="top"][data-ending-style] {
3396
+ :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
3397
  transform: translateY(0.25rem);
3449
3398
  }
3450
- ._ao-tooltip[data-side="bottom"][data-starting-style], ._ao-tooltip[data-side="bottom"][data-ending-style] {
3399
+ :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
3400
  transform: translateY(-0.25rem);
3452
3401
  }
3453
- ._ao-tooltip[data-side="left"][data-starting-style], ._ao-tooltip[data-side="left"][data-ending-style] {
3402
+ :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
3403
  transform: translateX(0.25rem);
3455
3404
  }
3456
- ._ao-tooltip[data-side="right"][data-starting-style], ._ao-tooltip[data-side="right"][data-ending-style] {
3405
+ :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
3406
  transform: translateX(-0.25rem);
3458
3407
  }
3459
- ._ao-tooltip-wrap {
3408
+ :scope._ao-tooltip-wrap, :scope ._ao-tooltip-wrap {
3460
3409
  position: relative;
3461
3410
  display: inline-flex;
3462
3411
  align-items: center;
3463
3412
  }
3464
- ._ao-tooltip-wrap > ._ao-tooltip {
3413
+ :scope._ao-tooltip-wrap > ._ao-tooltip, :scope ._ao-tooltip-wrap > ._ao-tooltip {
3465
3414
  visibility: hidden;
3466
3415
  position: absolute;
3467
3416
  opacity: 0%;
@@ -3471,7 +3420,7 @@
3471
3420
  transform: translateX(-50%);
3472
3421
  transition: opacity 150ms ease-out 0ms, visibility 0s linear 150ms;
3473
3422
  }
3474
- ._ao-tooltip-wrap-bottom > ._ao-tooltip {
3423
+ :scope._ao-tooltip-wrap-bottom > ._ao-tooltip, :scope ._ao-tooltip-wrap-bottom > ._ao-tooltip {
3475
3424
  top: 100%;
3476
3425
  right: auto;
3477
3426
  bottom: auto;
@@ -3482,7 +3431,7 @@
3482
3431
  margin-left: 0;
3483
3432
  transform: translateX(-50%);
3484
3433
  }
3485
- ._ao-tooltip-wrap-left > ._ao-tooltip {
3434
+ :scope._ao-tooltip-wrap-left > ._ao-tooltip, :scope ._ao-tooltip-wrap-left > ._ao-tooltip {
3486
3435
  top: 50%;
3487
3436
  right: 100%;
3488
3437
  bottom: auto;
@@ -3493,7 +3442,7 @@
3493
3442
  margin-left: 0;
3494
3443
  transform: translateY(-50%);
3495
3444
  }
3496
- ._ao-tooltip-wrap-right > ._ao-tooltip {
3445
+ :scope._ao-tooltip-wrap-right > ._ao-tooltip, :scope ._ao-tooltip-wrap-right > ._ao-tooltip {
3497
3446
  top: 50%;
3498
3447
  right: auto;
3499
3448
  bottom: auto;
@@ -3504,44 +3453,79 @@
3504
3453
  margin-left: calc(var(--spacing) * 1.5);
3505
3454
  transform: translateY(-50%);
3506
3455
  }
3507
- ._ao-tooltip-wrap:hover > ._ao-tooltip, ._ao-tooltip-wrap:focus-within > ._ao-tooltip {
3456
+ :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
3457
  visibility: visible;
3509
3458
  opacity: 100%;
3510
3459
  transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
3511
3460
  }
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;
3461
+ :scope._ao-collapse, :scope ._ao-collapse {
3462
+ visibility: collapse;
3463
+ }
3464
+ :scope._ao-visible, :scope ._ao-visible {
3465
+ visibility: visible;
3466
+ }
3467
+ :scope._ao-sr-only, :scope ._ao-sr-only {
3468
+ position: absolute;
3469
+ width: 1px;
3470
+ height: 1px;
3471
+ padding: 0;
3472
+ margin: -1px;
3473
+ overflow: hidden;
3474
+ clip-path: inset(50%);
3475
+ white-space: nowrap;
3476
+ border-width: 0;
3477
+ }
3478
+ :scope._ao-sticky, :scope ._ao-sticky {
3479
+ position: sticky;
3480
+ }
3481
+ :scope._ao-container, :scope ._ao-container {
3482
+ width: 100%;
3483
+ @media (width >= 40rem) {
3484
+ max-width: 40rem;
3485
+ }
3486
+ @media (width >= 48rem) {
3487
+ max-width: 48rem;
3488
+ }
3489
+ @media (width >= 64rem) {
3490
+ max-width: 64rem;
3491
+ }
3492
+ @media (width >= 80rem) {
3493
+ max-width: 80rem;
3494
+ }
3495
+ @media (width >= 96rem) {
3496
+ max-width: 96rem;
3544
3497
  }
3545
3498
  }
3546
- }
3499
+ :scope._ao-block, :scope ._ao-block {
3500
+ display: block;
3501
+ }
3502
+ :scope._ao-grid, :scope ._ao-grid {
3503
+ display: grid;
3504
+ }
3505
+ :scope._ao-hidden, :scope ._ao-hidden {
3506
+ display: none;
3507
+ }
3508
+ :scope._ao-table, :scope ._ao-table {
3509
+ display: table;
3510
+ }
3511
+ :scope._ao-table-cell, :scope ._ao-table-cell {
3512
+ display: table-cell;
3513
+ }
3514
+ :scope._ao-flex-1, :scope ._ao-flex-1 {
3515
+ flex: 1;
3516
+ }
3517
+ :scope._ao-transform, :scope ._ao-transform {
3518
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
3519
+ }
3520
+ :scope._ao-text-right, :scope ._ao-text-right {
3521
+ text-align: right;
3522
+ }
3523
+ :scope._ao-tabular-nums, :scope ._ao-tabular-nums {
3524
+ --tw-numeric-spacing: tabular-nums;
3525
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3526
+ }
3527
+ :scope._ao-select-all, :scope ._ao-select-all {
3528
+ -webkit-user-select: all;
3529
+ user-select: all;
3530
+ }
3547
3531
  }