npm - @aortl/admin-react - Versions diffs - 0.18.0 → 0.18.1 - Mend

@aortl/admin-react 0.18.0 → 0.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/admin.scoped.css CHANGED Viewed

@@ -439,9 +439,13 @@
     --color-code-surface: light-dark(var(--color-base-150), var(--color-base-950));
     --color-code-text: light-dark(var(--color-base-800), var(--color-base-200));
     --color-scrim: color-mix(in srgb, #0f0f0f 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope, :scope:host, :scope :host {
       --color-scrim: color-mix(in oklab, var(--color-black) 40%, transparent);
+  }
     }
+:scope, :scope:host, :scope :host {
     --color-primary: light-dark(var(--color-black), var(--color-paper));
     --color-primary-hover: light-dark(var(--color-base-800), var(--color-base-200));
     --color-primary-muted: light-dark(var(--color-base-150), var(--color-base-800));
@@ -455,25 +459,33 @@
     light-dark(var(--color-base-600), var(--color-base-400)),
     light-dark(var(--color-black), var(--color-base-200)) 12%
   );
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope, :scope:host, :scope :host {
       --color-system-accent-hover: color-mix(
     in oklch,
     var(--color-system-accent),
     var(--color-text) 12%
   );
+  }
     }
+:scope, :scope:host, :scope :host {
     --color-system-accent-muted: color-mix(
     in oklch,
     light-dark(var(--color-base-600), var(--color-base-400)) 12%,
     light-dark(var(--color-paper), var(--color-black))
   );
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope, :scope:host, :scope :host {
       --color-system-accent-muted: color-mix(
     in oklch,
     var(--color-system-accent) 12%,
     var(--color-surface)
   );
+  }
     }
+:scope, :scope:host, :scope :host {
     --color-system-accent-content: light-dark(var(--color-paper), var(--color-black));
     --color-danger: light-dark(var(--color-red-600), var(--color-red-400));
     --color-danger-hover: light-dark(var(--color-red-700), var(--color-red-300));
@@ -599,10 +611,12 @@
 @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
     :scope::placeholder, :scope ::placeholder {
       color: currentcolor;
+    }
       @supports (color: color-mix(in lab, red, red)) {
+    :scope::placeholder, :scope ::placeholder {
         color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
     }
+      }
   }
 :scope textarea {
     resize: vertical;
@@ -709,21 +723,23 @@
     color: var(--color-text);
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-accordion-summary:hover, :scope ._ao-accordion-summary:hover {
         background-color: var(--color-surface-muted);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-accordion-summary:focus-visible, :scope ._ao-accordion-summary:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-accordion-summary:focus-visible, :scope ._ao-accordion-summary:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-accordion-summary:focus-visible, :scope ._ao-accordion-summary:focus-visible {
       outline-color: var(--color-focus);
     }
+:scope._ao-accordion-summary, :scope ._ao-accordion-summary {
     list-style: none;
     overflow-wrap: break-word;
     min-width: 0;
@@ -885,39 +901,41 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &:focus-visible {
+  }
+:scope._ao-alert-dismiss:focus-visible, :scope ._ao-alert-dismiss:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-alert-dismiss:focus-visible, :scope ._ao-alert-dismiss:focus-visible {
       outline-offset: 1px;
     }
-    &:focus-visible {
+:scope._ao-alert-dismiss:focus-visible, :scope ._ao-alert-dismiss:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-alert-dismiss:hover, :scope ._ao-alert-dismiss:hover {
     background-color: currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-alert-dismiss:hover, :scope ._ao-alert-dismiss:hover {
       background-color: color-mix(in oklab, currentColor 15%, transparent);
-    }
   }
+    }
 :scope._ao-alert ._ao-link, :scope ._ao-alert ._ao-link {
     color: currentcolor;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope:is(._ao-alert ._ao-link):hover, :scope :is(._ao-alert ._ao-link):hover {
         color: currentcolor;
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        opacity: 85%;
       }
+@media (hover: hover) {
+    :scope:is(._ao-alert ._ao-link):hover, :scope :is(._ao-alert ._ao-link):hover {
+        opacity: 85%;
     }
-    &:focus-visible {
+      }
+:scope:is(._ao-alert ._ao-link):focus-visible, :scope :is(._ao-alert ._ao-link):focus-visible {
       outline-color: currentcolor;
     }
-  }
 :scope._ao-app-shell, :scope ._ao-app-shell {
     --app-shell-sidebar-w: 240px;
     --app-shell-sidebar-w-collapsed: 56px;
@@ -1073,23 +1091,25 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &:focus-visible {
+  }
+:scope._ao-badge-remove:focus-visible, :scope ._ao-badge-remove:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-badge-remove:focus-visible, :scope ._ao-badge-remove:focus-visible {
       outline-offset: 1px;
     }
-    &:focus-visible {
+:scope._ao-badge-remove:focus-visible, :scope ._ao-badge-remove:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover {
     background-color: currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover {
       background-color: color-mix(in oklab, currentColor 15%, transparent);
-    }
   }
+    }
 :scope._ao-badge-sm ._ao-badge-remove, :scope ._ao-badge-sm ._ao-badge-remove {
     margin-right: calc(var(--spacing) * -0.5);
     width: calc(var(--spacing) * 3);
@@ -1267,14 +1287,20 @@
 :scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd {
     color: currentColor;
     background-color: currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd {
       background-color: color-mix(in srgb, currentColor 12%, transparent);
+  }
     }
+:scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd {
     border-color: currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd {
       border-color: color-mix(in srgb, currentColor 22%, transparent);
-    }
   }
+    }
 :scope._ao-btn > ._ao-kbd-group, :scope ._ao-btn > ._ao-kbd-group {
     opacity: 0.85;
   }
@@ -1382,9 +1408,13 @@
     flex-shrink: 0;
     border-radius: 9999px;
     border: 2px solid currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-spinner, :scope ._ao-spinner {
       border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
+  }
     }
+:scope._ao-spinner, :scope ._ao-spinner {
     border-top-color: currentColor;
     animation: spinner-spin 0.6s linear infinite;
   }
@@ -1495,22 +1525,22 @@
     gap: calc(var(--spacing) * 1.5);
     color: var(--color-text-muted);
     text-decoration-line: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-breadcrumb-item:hover, :scope ._ao-breadcrumb-item:hover {
         color: var(--color-text);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-breadcrumb-item:focus-visible, :scope ._ao-breadcrumb-item:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-breadcrumb-item:focus-visible, :scope ._ao-breadcrumb-item:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-breadcrumb-item:focus-visible, :scope ._ao-breadcrumb-item:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-breadcrumb-item[aria-current="page"], :scope ._ao-breadcrumb-item[aria-current="page"] {
     pointer-events: none;
     --tw-font-weight: var(--font-weight-medium);
@@ -1521,9 +1551,13 @@
     display: inline-flex;
     align-items: center;
     color: color-mix(in srgb, light-dark(var(--color-base-600), var(--color-base-500)) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-breadcrumb-separator, :scope ._ao-breadcrumb-separator {
       color: color-mix(in oklab, var(--color-text-muted) 60%, transparent);
+  }
     }
+:scope._ao-breadcrumb-separator, :scope ._ao-breadcrumb-separator {
     -webkit-user-select: none;
     user-select: none;
   }
@@ -1576,31 +1610,31 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-page-link:hover, :scope ._ao-page-link:hover {
         background-color: var(--color-surface-muted);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-page-link:focus-visible, :scope ._ao-page-link:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-page-link:focus-visible, :scope ._ao-page-link:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-page-link:focus-visible, :scope ._ao-page-link:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-page-link:disabled, :scope ._ao-page-link:disabled {
       pointer-events: none;
     }
-    &:disabled {
+:scope._ao-page-link:disabled, :scope ._ao-page-link:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-page-link:disabled, :scope ._ao-page-link:disabled {
       opacity: 50%;
     }
-  }
 :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"] {
     border-color: var(--color-primary-muted);
     background-color: var(--color-primary-muted);
@@ -1688,21 +1722,23 @@
     border-width: 0px;
     background-color: transparent;
     color: var(--color-text-muted);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-property-list-copy:hover, :scope ._ao-property-list-copy:hover {
         color: var(--color-text);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible {
       outline-color: var(--color-focus);
     }
+:scope._ao-property-list-copy, :scope ._ao-property-list-copy {
     display: none;
     flex-shrink: 0;
     padding: 0.125rem;
@@ -1772,31 +1808,31 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-btn:hover, :scope ._ao-btn:hover {
         background-color: var(--color-surface-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-btn:disabled, :scope ._ao-btn:disabled {
       pointer-events: none;
     }
-    &:disabled {
+:scope._ao-btn:disabled, :scope ._ao-btn:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-btn:disabled, :scope ._ao-btn:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-btn > :is(i, svg), :scope ._ao-btn > :is(i, svg) {
     flex-shrink: 0;
   }
@@ -1804,40 +1840,40 @@
     border-color: transparent;
     background-color: var(--color-primary);
     color: var(--color-primary-content);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-btn-primary:hover, :scope ._ao-btn-primary:hover {
         background-color: var(--color-primary-hover);
-      }
     }
-  }
+      }
 :scope._ao-btn-ghost, :scope ._ao-btn-ghost {
     border-color: transparent;
     background-color: transparent;
     color: var(--color-text);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-btn-ghost:hover, :scope ._ao-btn-ghost:hover {
         background-color: var(--color-surface-muted);
-      }
     }
-  }
+      }
 :scope._ao-btn-muted, :scope ._ao-btn-muted {
     background-color: var(--color-surface);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-btn-muted:hover, :scope ._ao-btn-muted:hover {
         background-color: var(--color-surface-muted);
-      }
     }
-  }
+      }
 :scope._ao-btn-danger, :scope ._ao-btn-danger {
     border-color: transparent;
     background-color: var(--color-danger);
     color: var(--color-danger-content);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-btn-danger:hover, :scope ._ao-btn-danger:hover {
         opacity: 90%;
-      }
     }
-  }
+      }
 :scope._ao-btn-sm, :scope ._ao-btn-sm {
     gap: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 3);
@@ -1877,9 +1913,13 @@
     flex-shrink: 0;
     border-radius: 9999px;
     border: 0.125em solid currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
       border: 0.125em solid color-mix(in oklab, currentColor 25%, transparent);
+  }
     }
+:scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
     border-top-color: currentColor;
     animation: spinner-spin 0.6s linear infinite;
   }
@@ -1897,15 +1937,17 @@
 :scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn {
     position: relative;
     border-radius: 0;
-    &:focus-visible {
+  }
+:scope:is(._ao-btn-group > ._ao-btn):focus-visible, :scope :is(._ao-btn-group > ._ao-btn):focus-visible {
       z-index: 10;
     }
-  }
 :scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
     position: relative;
-    &:focus-visible {
+  }
+:scope:is(._ao-btn-group > ._ao-menu):focus-visible, :scope :is(._ao-btn-group > ._ao-menu):focus-visible {
       z-index: 10;
     }
+:scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
     display: inline-flex;
   }
 :scope._ao-btn-group > ._ao-menu > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
@@ -1924,10 +1966,12 @@
   }
 :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
     border-left-color: currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
       border-left-color: color-mix(in oklab, currentColor 25%, transparent);
-    }
   }
+    }
 :scope._ao-btn-group-vertical, :scope ._ao-btn-group-vertical {
     display: inline-flex;
     flex-direction: column;
@@ -1948,10 +1992,12 @@
   }
 :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
     border-top-color: currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
       border-top-color: color-mix(in oklab, currentColor 25%, transparent);
-    }
   }
+    }
 :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical), :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) {
     display: flex;
     width: 100%;
@@ -1975,21 +2021,23 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-link:hover, :scope ._ao-link:hover {
         color: var(--color-link-hover);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-link:focus-visible, :scope ._ao-link:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-link:focus-visible, :scope ._ao-link:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-link:focus-visible, :scope ._ao-link:focus-visible {
       outline-color: var(--color-focus);
     }
+:scope._ao-link, :scope ._ao-link {
     overflow-wrap: break-word;
   }
 :scope._ao-link > :is(i, svg), :scope ._ao-link > :is(i, svg) {
@@ -2028,89 +2076,89 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &::placeholder {
+  }
+:scope._ao-input::placeholder, :scope ._ao-input::placeholder {
       color: var(--color-text-muted);
     }
-    &:hover {
-      @media (hover: hover) {
+@media (hover: hover) {
+    :scope._ao-input:hover, :scope ._ao-input:hover {
         border-color: var(--color-border-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-input:focus-visible, :scope ._ao-input:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-input:focus-visible, :scope ._ao-input:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-input:focus-visible, :scope ._ao-input:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-input:disabled, :scope ._ao-input:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-input:disabled, :scope ._ao-input:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-input-ghost, :scope ._ao-input-ghost {
     border-color: transparent;
     background-color: transparent;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-input-ghost:hover, :scope ._ao-input-ghost:hover {
         border-color: transparent;
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-surface-muted);
       }
+@media (hover: hover) {
+    :scope._ao-input-ghost:hover, :scope ._ao-input-ghost:hover {
+        background-color: var(--color-surface-muted);
     }
-  }
+      }
 :scope._ao-input-danger, :scope ._ao-input-danger {
     border-color: var(--color-danger);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-input-danger:hover, :scope ._ao-input-danger:hover {
         border-color: var(--color-danger);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-input-danger:focus-visible, :scope ._ao-input-danger:focus-visible {
       outline-color: var(--color-danger);
     }
-  }
 :scope._ao-input-info, :scope ._ao-input-info {
     border-color: var(--color-info);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-input-info:hover, :scope ._ao-input-info:hover {
         border-color: var(--color-info);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-input-info:focus-visible, :scope ._ao-input-info:focus-visible {
       outline-color: var(--color-info);
     }
-  }
 :scope._ao-input-success, :scope ._ao-input-success {
     border-color: var(--color-success);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-input-success:hover, :scope ._ao-input-success:hover {
         border-color: var(--color-success);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-input-success:focus-visible, :scope ._ao-input-success:focus-visible {
       outline-color: var(--color-success);
     }
-  }
 :scope._ao-input-warning, :scope ._ao-input-warning {
     border-color: var(--color-warning);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-input-warning:hover, :scope ._ao-input-warning:hover {
         border-color: var(--color-warning);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-input-warning:focus-visible, :scope ._ao-input-warning:focus-visible {
       outline-color: var(--color-warning);
     }
-  }
 :scope._ao-input-sm, :scope ._ao-input-sm {
     padding-inline: calc(var(--spacing) * 2.5);
     padding-block: calc(var(--spacing) * 1.5);
@@ -2126,12 +2174,12 @@
 :scope._ao-input::-webkit-calendar-picker-indicator, :scope ._ao-input::-webkit-calendar-picker-indicator {
     cursor: pointer;
     opacity: 60%;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope:is(._ao-input::-webkit-calendar-picker-indicator):hover, :scope :is(._ao-input::-webkit-calendar-picker-indicator):hover {
         opacity: 100%;
-      }
     }
-  }
+      }
 :scope._ao-input-group, :scope ._ao-input-group {
     display: inline-flex;
     width: 100%;
@@ -2230,28 +2278,30 @@
     border-width: 0px;
     background-color: transparent;
     color: var(--color-text-muted);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-input-action:hover, :scope ._ao-input-action:hover {
         color: var(--color-text);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-input-action:focus-visible, :scope ._ao-input-action:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-input-action:focus-visible, :scope ._ao-input-action:focus-visible {
       outline-offset: 1px;
     }
-    &:focus-visible {
+:scope._ao-input-action:focus-visible, :scope ._ao-input-action:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-input-action:hover, :scope ._ao-input-action:hover {
     background-color: currentColor;
-    @supports (color: color-mix(in lab, red, red)) {
+  }
+@supports (color: color-mix(in lab, red, red)) {
+  :scope._ao-input-action:hover, :scope ._ao-input-action:hover {
       background-color: color-mix(in oklab, currentColor 12%, transparent);
-    }
   }
+    }
 :scope._ao-input-icon:has(> ._ao-input:disabled) > ._ao-input-action, :scope ._ao-input-icon:has(> ._ao-input:disabled) > ._ao-input-action {
     pointer-events: none;
     opacity: 50%;
@@ -2273,17 +2323,17 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &:focus-within {
+  }
+:scope._ao-number-input:focus-within, :scope ._ao-number-input:focus-within {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-within {
+:scope._ao-number-input:focus-within, :scope ._ao-number-input:focus-within {
       outline-offset: 2px;
     }
-    &:focus-within {
+:scope._ao-number-input:focus-within, :scope ._ao-number-input:focus-within {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-number-input:hover, :scope ._ao-number-input:hover {
     border-color: var(--color-border-strong);
   }
@@ -2306,15 +2356,17 @@
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
     --tw-outline-style: none;
     outline-style: none;
-    &::placeholder {
+  }
+:scope._ao-number-input-field::placeholder, :scope ._ao-number-input-field::placeholder {
       color: var(--color-text-muted);
     }
-    &:disabled {
+:scope._ao-number-input-field:disabled, :scope ._ao-number-input-field:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-number-input-field:disabled, :scope ._ao-number-input-field:disabled {
       opacity: 50%;
     }
+:scope._ao-number-input-field, :scope ._ao-number-input-field {
     -moz-appearance: textfield;
   }
 :scope._ao-number-input-field::-webkit-inner-spin-button, :scope ._ao-number-input-field::-webkit-inner-spin-button, :scope._ao-number-input-field::-webkit-outer-spin-button, :scope ._ao-number-input-field::-webkit-outer-spin-button {
@@ -2334,23 +2386,23 @@
     color: var(--color-text-muted);
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-number-input-step:hover, :scope ._ao-number-input-step:hover {
         background-color: var(--color-surface-muted);
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-text);
       }
+@media (hover: hover) {
+    :scope._ao-number-input-step:hover, :scope ._ao-number-input-step:hover {
+        color: var(--color-text);
     }
-    &:disabled {
+      }
+:scope._ao-number-input-step:disabled, :scope ._ao-number-input-step:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-number-input-step:disabled, :scope ._ao-number-input-step:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-number-input-step:first-child, :scope ._ao-number-input-step:first-child {
     border-top-left-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
@@ -2406,89 +2458,89 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &::placeholder {
+  }
+:scope._ao-textarea::placeholder, :scope ._ao-textarea::placeholder {
       color: var(--color-text-muted);
     }
-    &:hover {
-      @media (hover: hover) {
+@media (hover: hover) {
+    :scope._ao-textarea:hover, :scope ._ao-textarea:hover {
         border-color: var(--color-border-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-textarea:focus-visible, :scope ._ao-textarea:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-textarea:focus-visible, :scope ._ao-textarea:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-textarea:focus-visible, :scope ._ao-textarea:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-textarea:disabled, :scope ._ao-textarea:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-textarea:disabled, :scope ._ao-textarea:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-textarea-ghost, :scope ._ao-textarea-ghost {
     border-color: transparent;
     background-color: transparent;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-textarea-ghost:hover, :scope ._ao-textarea-ghost:hover {
         border-color: transparent;
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-surface-muted);
       }
+@media (hover: hover) {
+    :scope._ao-textarea-ghost:hover, :scope ._ao-textarea-ghost:hover {
+        background-color: var(--color-surface-muted);
     }
-  }
+      }
 :scope._ao-textarea-danger, :scope ._ao-textarea-danger {
     border-color: var(--color-danger);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-textarea-danger:hover, :scope ._ao-textarea-danger:hover {
         border-color: var(--color-danger);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-textarea-danger:focus-visible, :scope ._ao-textarea-danger:focus-visible {
       outline-color: var(--color-danger);
     }
-  }
 :scope._ao-textarea-info, :scope ._ao-textarea-info {
     border-color: var(--color-info);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-textarea-info:hover, :scope ._ao-textarea-info:hover {
         border-color: var(--color-info);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-textarea-info:focus-visible, :scope ._ao-textarea-info:focus-visible {
       outline-color: var(--color-info);
     }
-  }
 :scope._ao-textarea-success, :scope ._ao-textarea-success {
     border-color: var(--color-success);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-textarea-success:hover, :scope ._ao-textarea-success:hover {
         border-color: var(--color-success);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-textarea-success:focus-visible, :scope ._ao-textarea-success:focus-visible {
       outline-color: var(--color-success);
     }
-  }
 :scope._ao-textarea-warning, :scope ._ao-textarea-warning {
     border-color: var(--color-warning);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-textarea-warning:hover, :scope ._ao-textarea-warning:hover {
         border-color: var(--color-warning);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-textarea-warning:focus-visible, :scope ._ao-textarea-warning:focus-visible {
       outline-color: var(--color-warning);
     }
-  }
 :scope._ao-textarea-autosize, :scope ._ao-textarea-autosize {
     field-sizing: content;
     resize: none;
@@ -2524,40 +2576,40 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &:focus-visible {
+  }
+:scope._ao-checkbox:focus-visible, :scope ._ao-checkbox:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-checkbox:focus-visible, :scope ._ao-checkbox:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-checkbox:focus-visible, :scope ._ao-checkbox:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-checkbox:disabled, :scope ._ao-checkbox:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-checkbox:disabled, :scope ._ao-checkbox:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-checkbox[data-unchecked], :scope ._ao-checkbox[data-unchecked] {
     border-color: var(--color-border-strong);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-checkbox[data-unchecked]:hover, :scope ._ao-checkbox[data-unchecked]:hover {
         border-color: var(--color-text-muted);
-      }
     }
-  }
+      }
 :scope._ao-checkbox[data-checked], :scope ._ao-checkbox[data-checked], :scope._ao-checkbox[data-indeterminate], :scope ._ao-checkbox[data-indeterminate] {
     border-color: var(--color-primary);
     background-color: var(--color-primary);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope:is(._ao-checkbox[data-checked],._ao-checkbox[data-indeterminate]):hover, :scope :is(._ao-checkbox[data-checked],._ao-checkbox[data-indeterminate]):hover {
         background-color: var(--color-primary-hover);
-      }
     }
-  }
+      }
 :scope._ao-checkbox[data-disabled], :scope ._ao-checkbox[data-disabled] {
     cursor: not-allowed;
     opacity: 50%;
@@ -2573,22 +2625,24 @@
 :scope input._ao-checkbox {
     appearance: none;
     border-color: var(--color-border-strong);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope input._ao-checkbox:hover {
         border-color: var(--color-text-muted);
-      }
     }
+      }
+:scope input._ao-checkbox {
     --checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
   }
 :scope input._ao-checkbox:checked, :scope input._ao-checkbox:indeterminate {
     border-color: var(--color-primary);
     background-color: var(--color-primary);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope:is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover, :scope :is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover {
         background-color: var(--color-primary-hover);
-      }
     }
-  }
+      }
 :scope input._ao-checkbox:checked::after, :scope input._ao-checkbox:indeterminate::after {
     content: "";
     width: calc(var(--spacing) * 3);
@@ -2626,40 +2680,40 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &:focus-visible {
+  }
+:scope._ao-radio:focus-visible, :scope ._ao-radio:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-radio:focus-visible, :scope ._ao-radio:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-radio:focus-visible, :scope ._ao-radio:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-radio:disabled, :scope ._ao-radio:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-radio:disabled, :scope ._ao-radio:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-radio[data-unchecked], :scope ._ao-radio[data-unchecked] {
     border-color: var(--color-border-strong);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-radio[data-unchecked]:hover, :scope ._ao-radio[data-unchecked]:hover {
         border-color: var(--color-text-muted);
-      }
     }
-  }
+      }
 :scope._ao-radio[data-checked], :scope ._ao-radio[data-checked] {
     border-color: var(--color-primary);
     background-color: var(--color-primary);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-radio[data-checked]:hover, :scope ._ao-radio[data-checked]:hover {
         background-color: var(--color-primary-hover);
-      }
     }
-  }
+      }
 :scope._ao-radio[data-disabled], :scope ._ao-radio[data-disabled] {
     cursor: not-allowed;
     opacity: 50%;
@@ -2674,21 +2728,21 @@
 :scope input._ao-radio {
     appearance: none;
     border-color: var(--color-border-strong);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope input._ao-radio:hover {
         border-color: var(--color-text-muted);
-      }
     }
-  }
+      }
 :scope input._ao-radio:checked {
     border-color: var(--color-primary);
     background-color: var(--color-primary);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope input._ao-radio:checked:hover {
         background-color: var(--color-primary-hover);
-      }
     }
-  }
+      }
 :scope input._ao-radio:checked::after {
     content: "";
     width: calc(var(--spacing) * 1.5);
@@ -2736,23 +2790,23 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &:focus-visible {
+  }
+:scope._ao-switch:focus-visible, :scope ._ao-switch:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-switch:focus-visible, :scope ._ao-switch:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-switch:focus-visible, :scope ._ao-switch:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-switch:disabled, :scope ._ao-switch:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-switch:disabled, :scope ._ao-switch:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-switch[data-unchecked], :scope ._ao-switch[data-unchecked] {
     background-color: var(--color-border-strong);
   }
@@ -2845,28 +2899,28 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-select:hover, :scope ._ao-select:hover {
         border-color: var(--color-border-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-select:focus-visible, :scope ._ao-select:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-select:focus-visible, :scope ._ao-select:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-select:focus-visible, :scope ._ao-select:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-select:disabled, :scope ._ao-select:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-select:disabled, :scope ._ao-select:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-select[data-popup-open], :scope ._ao-select[data-popup-open] {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
@@ -2879,28 +2933,28 @@
 :scope._ao-select-ghost, :scope ._ao-select-ghost {
     border-color: transparent;
     background-color: transparent;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-select-ghost:hover, :scope ._ao-select-ghost:hover {
         border-color: transparent;
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-surface-muted);
       }
+@media (hover: hover) {
+    :scope._ao-select-ghost:hover, :scope ._ao-select-ghost:hover {
+        background-color: var(--color-surface-muted);
     }
-  }
+      }
 :scope._ao-select-danger, :scope ._ao-select-danger {
     border-color: var(--color-danger);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-select-danger:hover, :scope ._ao-select-danger:hover {
         border-color: var(--color-danger);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-select-danger:focus-visible, :scope ._ao-select-danger:focus-visible {
       outline-color: var(--color-danger);
     }
-  }
 :scope._ao-select-sm, :scope ._ao-select-sm {
     padding-inline: calc(var(--spacing) * 2.5);
     padding-block: calc(var(--spacing) * 1.5);
@@ -3606,27 +3660,27 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-dialog-close:hover, :scope ._ao-dialog-close:hover {
         background-color: var(--color-surface-strong);
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-text);
       }
+@media (hover: hover) {
+    :scope._ao-dialog-close:hover, :scope ._ao-dialog-close:hover {
+        color: var(--color-text);
     }
-    &:focus-visible {
+      }
+:scope._ao-dialog-close:focus-visible, :scope ._ao-dialog-close:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-dialog-close:focus-visible, :scope ._ao-dialog-close:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-dialog-close:focus-visible, :scope ._ao-dialog-close:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-drawer, :scope ._ao-drawer {
     margin: 0;
     max-width: none;
@@ -3763,135 +3817,133 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
-    &::file-selector-button {
+  }
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       margin-right: calc(var(--spacing) * 3);
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       cursor: pointer;
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       border-style: var(--tw-border-style);
       border-width: 0px;
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       border-right-style: var(--tw-border-style);
       border-right-width: 1px;
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       border-color: var(--color-border);
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       background-color: var(--color-surface-muted);
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       padding-inline: calc(var(--spacing) * 3);
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       padding-block: calc(var(--spacing) * 2);
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       --tw-leading: 1;
       line-height: 1;
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
     }
-    &::file-selector-button {
+:scope._ao-file-input::file-selector-button, :scope ._ao-file-input::file-selector-button {
       color: var(--color-text);
     }
-    &:hover {
-      @media (hover: hover) {
+@media (hover: hover) {
+    :scope._ao-file-input:hover, :scope ._ao-file-input:hover {
         border-color: var(--color-border-strong);
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        &::file-selector-button {
+      }
+@media (hover: hover) {
+        :scope._ao-file-input:hover::file-selector-button, :scope ._ao-file-input:hover::file-selector-button {
           background-color: var(--color-surface-strong);
         }
       }
-    }
-    &:focus-visible {
+:scope._ao-file-input:focus-visible, :scope ._ao-file-input:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-file-input:focus-visible, :scope ._ao-file-input:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-file-input:focus-visible, :scope ._ao-file-input:focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope._ao-file-input:disabled, :scope ._ao-file-input:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-file-input:disabled, :scope ._ao-file-input:disabled {
       opacity: 50%;
     }
-  }
 :scope._ao-file-input-ghost, :scope ._ao-file-input-ghost {
     border-color: transparent;
     background-color: transparent;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-file-input-ghost:hover, :scope ._ao-file-input-ghost:hover {
         border-color: transparent;
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-surface-muted);
       }
+@media (hover: hover) {
+    :scope._ao-file-input-ghost:hover, :scope ._ao-file-input-ghost:hover {
+        background-color: var(--color-surface-muted);
     }
-  }
+      }
 :scope._ao-file-input-danger, :scope ._ao-file-input-danger {
     border-color: var(--color-danger);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-file-input-danger:hover, :scope ._ao-file-input-danger:hover {
         border-color: var(--color-danger);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-file-input-danger:focus-visible, :scope ._ao-file-input-danger:focus-visible {
       outline-color: var(--color-danger);
     }
-  }
 :scope._ao-file-input-sm, :scope ._ao-file-input-sm {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
-    &::file-selector-button {
+  }
+:scope._ao-file-input-sm::file-selector-button, :scope ._ao-file-input-sm::file-selector-button {
       margin-right: calc(var(--spacing) * 2.5);
     }
-    &::file-selector-button {
+:scope._ao-file-input-sm::file-selector-button, :scope ._ao-file-input-sm::file-selector-button {
       padding-inline: calc(var(--spacing) * 2.5);
     }
-    &::file-selector-button {
+:scope._ao-file-input-sm::file-selector-button, :scope ._ao-file-input-sm::file-selector-button {
       padding-block: calc(var(--spacing) * 1.5);
     }
-    &::file-selector-button {
+:scope._ao-file-input-sm::file-selector-button, :scope ._ao-file-input-sm::file-selector-button {
       font-size: var(--text-xs);
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
-  }
 :scope._ao-file-input-lg, :scope ._ao-file-input-lg {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
-    &::file-selector-button {
+  }
+:scope._ao-file-input-lg::file-selector-button, :scope ._ao-file-input-lg::file-selector-button {
       margin-right: calc(var(--spacing) * 4);
     }
-    &::file-selector-button {
+:scope._ao-file-input-lg::file-selector-button, :scope ._ao-file-input-lg::file-selector-button {
       padding-inline: calc(var(--spacing) * 4);
     }
-    &::file-selector-button {
+:scope._ao-file-input-lg::file-selector-button, :scope ._ao-file-input-lg::file-selector-button {
       padding-block: calc(var(--spacing) * 2.5);
     }
-    &::file-selector-button {
+:scope._ao-file-input-lg::file-selector-button, :scope ._ao-file-input-lg::file-selector-button {
       font-size: var(--text-base);
       line-height: var(--tw-leading, var(--text-base--line-height));
     }
-  }
 :scope._ao-footer, :scope ._ao-footer {
     display: flex;
     flex-wrap: wrap;
@@ -3918,27 +3970,27 @@
     border-radius: var(--radius-sm);
     color: var(--color-text-muted);
     text-decoration-line: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-footer-link:hover, :scope ._ao-footer-link:hover {
         color: var(--color-text);
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        text-decoration-line: underline;
       }
+@media (hover: hover) {
+    :scope._ao-footer-link:hover, :scope ._ao-footer-link:hover {
+        text-decoration-line: underline;
     }
-    &:focus-visible {
+      }
+:scope._ao-footer-link:focus-visible, :scope ._ao-footer-link:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-footer-link:focus-visible, :scope ._ao-footer-link:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-footer-link:focus-visible, :scope ._ao-footer-link:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-footer-meta, :scope ._ao-footer-meta {
     color: var(--color-text-muted);
   }
@@ -3958,16 +4010,18 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:focus-visible {
+  }
+:scope._ao-menu-trigger:focus-visible, :scope ._ao-menu-trigger:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-menu-trigger:focus-visible, :scope ._ao-menu-trigger:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-menu-trigger:focus-visible, :scope ._ao-menu-trigger:focus-visible {
       outline-color: var(--color-focus);
     }
+:scope._ao-menu-trigger, :scope ._ao-menu-trigger {
     list-style: none;
   }
 :scope._ao-menu-trigger::-webkit-details-marker, :scope ._ao-menu-trigger::-webkit-details-marker {
@@ -3983,12 +4037,12 @@
     --tw-leading: 1;
     line-height: 1;
     color: var(--color-text);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-menu-trigger:not(._ao-btn):hover, :scope ._ao-menu-trigger:not(._ao-btn):hover {
         background-color: var(--color-surface-strong);
-      }
     }
-  }
+      }
 :scope._ao-menu-trigger::after, :scope ._ao-menu-trigger::after {
     content: "";
     width: 0.5em;
@@ -4065,24 +4119,26 @@
     text-decoration-line: none;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-menu-item:hover, :scope ._ao-menu-item:hover {
         background-color: var(--color-surface-muted);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-menu-item:focus-visible, :scope ._ao-menu-item:focus-visible {
       background-color: var(--color-surface-muted);
     }
-    &:focus-visible {
+:scope._ao-menu-item:focus-visible, :scope ._ao-menu-item:focus-visible {
       --tw-outline-style: none;
       outline-style: none;
     }
-    &:disabled {
+:scope._ao-menu-item:disabled, :scope ._ao-menu-item:disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope._ao-menu-item:disabled, :scope ._ao-menu-item:disabled {
       opacity: 50%;
     }
+:scope._ao-menu-item, :scope ._ao-menu-item {
     overflow-wrap: break-word;
     min-width: 0;
   }
@@ -4178,22 +4234,22 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-navbar-item:hover, :scope ._ao-navbar-item:hover {
         background-color: var(--color-surface-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-navbar-item:focus-visible, :scope ._ao-navbar-item:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-navbar-item:focus-visible, :scope ._ao-navbar-item:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-navbar-item:focus-visible, :scope ._ao-navbar-item:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :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] {
     background-color: var(--color-primary-muted);
     color: var(--color-primary);
@@ -4218,22 +4274,22 @@
     border-radius: var(--radius-md);
     background-color: transparent;
     color: var(--color-text);
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-navbar-mobile-toggle:hover, :scope ._ao-navbar-mobile-toggle:hover {
         background-color: var(--color-surface-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-navbar-mobile-toggle:focus-visible, :scope ._ao-navbar-mobile-toggle:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-navbar-mobile-toggle:focus-visible, :scope ._ao-navbar-mobile-toggle:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-navbar-mobile-toggle:focus-visible, :scope ._ao-navbar-mobile-toggle:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-navbar-mobile-toggle::before, :scope ._ao-navbar-mobile-toggle::before {
     content: "";
     display: block;
@@ -4341,22 +4397,22 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-sidebar-item:hover, :scope ._ao-sidebar-item:hover {
         background-color: var(--color-surface-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-sidebar-item:focus-visible, :scope ._ao-sidebar-item:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-sidebar-item:focus-visible, :scope ._ao-sidebar-item:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-sidebar-item:focus-visible, :scope ._ao-sidebar-item:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :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] {
     background-color: var(--color-primary-muted);
     --tw-font-weight: var(--font-weight-medium);
@@ -4426,21 +4482,23 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-sidebar-collapsible-trigger:hover, :scope ._ao-sidebar-collapsible-trigger:hover {
         background-color: var(--color-surface-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-sidebar-collapsible-trigger:focus-visible, :scope ._ao-sidebar-collapsible-trigger:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-sidebar-collapsible-trigger:focus-visible, :scope ._ao-sidebar-collapsible-trigger:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-sidebar-collapsible-trigger:focus-visible, :scope ._ao-sidebar-collapsible-trigger:focus-visible {
       outline-color: var(--color-focus);
     }
+:scope._ao-sidebar-collapsible-trigger, :scope ._ao-sidebar-collapsible-trigger {
     list-style: none;
   }
 :scope._ao-sidebar-collapsible-trigger::-webkit-details-marker, :scope ._ao-sidebar-collapsible-trigger::-webkit-details-marker {
@@ -4502,22 +4560,22 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-sidebar-subitem:hover, :scope ._ao-sidebar-subitem:hover {
         background-color: var(--color-surface-strong);
-      }
     }
-    &:focus-visible {
+      }
+:scope._ao-sidebar-subitem:focus-visible, :scope ._ao-sidebar-subitem:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope._ao-sidebar-subitem:focus-visible, :scope ._ao-sidebar-subitem:focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope._ao-sidebar-subitem:focus-visible, :scope ._ao-sidebar-subitem:focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :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] {
     background-color: var(--color-primary-muted);
     --tw-font-weight: var(--font-weight-medium);
@@ -4552,17 +4610,17 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope._ao-sidebar-collapse-toggle:hover, :scope ._ao-sidebar-collapse-toggle:hover {
         background-color: var(--color-surface-strong);
-      }
     }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-text);
       }
+@media (hover: hover) {
+    :scope._ao-sidebar-collapse-toggle:hover, :scope ._ao-sidebar-collapse-toggle:hover {
+        color: var(--color-text);
     }
-  }
+      }
 :scope._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible), :scope ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible) {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
@@ -4655,28 +4713,28 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope:is(._ao-tabs ._ao-tab):hover, :scope :is(._ao-tabs ._ao-tab):hover {
         color: var(--color-text);
-      }
     }
-    &:focus-visible {
+      }
+:scope:is(._ao-tabs ._ao-tab):focus-visible, :scope :is(._ao-tabs ._ao-tab):focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope:is(._ao-tabs ._ao-tab):focus-visible, :scope :is(._ao-tabs ._ao-tab):focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope:is(._ao-tabs ._ao-tab):focus-visible, :scope :is(._ao-tabs ._ao-tab):focus-visible {
       outline-color: var(--color-focus);
     }
-    &:disabled {
+:scope:is(._ao-tabs ._ao-tab):disabled, :scope :is(._ao-tabs ._ao-tab):disabled {
       cursor: not-allowed;
     }
-    &:disabled {
+:scope:is(._ao-tabs ._ao-tab):disabled, :scope :is(._ao-tabs ._ao-tab):disabled {
       opacity: 50%;
     }
-  }
 :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"] {
     color: var(--color-text);
   }
@@ -5177,22 +5235,22 @@
     color: var(--color-link);
     text-decoration-line: underline;
     text-underline-offset: 2px;
-    &:hover {
-      @media (hover: hover) {
+  }
+@media (hover: hover) {
+    :scope:is(._ao-prose :where(a)):hover, :scope :is(._ao-prose :where(a)):hover {
         color: var(--color-link-hover);
-      }
     }
-    &:focus-visible {
+      }
+:scope:is(._ao-prose :where(a)):focus-visible, :scope :is(._ao-prose :where(a)):focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
-    &:focus-visible {
+:scope:is(._ao-prose :where(a)):focus-visible, :scope :is(._ao-prose :where(a)):focus-visible {
       outline-offset: 2px;
     }
-    &:focus-visible {
+:scope:is(._ao-prose :where(a)):focus-visible, :scope :is(._ao-prose :where(a)):focus-visible {
       outline-color: var(--color-focus);
     }
-  }
 :scope._ao-prose :where(code), :scope ._ao-prose :where(code) {
     border-radius: 0.25rem;
     border-style: var(--tw-border-style);
@@ -5514,22 +5572,32 @@
   }
 :scope._ao-container, :scope ._ao-container {
     width: 100%;
-    @media (width >= 40rem) {
+  }
+@media (width >= 40rem) {
+  :scope._ao-container, :scope ._ao-container {
       max-width: 40rem;
+  }
     }
-    @media (width >= 48rem) {
+@media (width >= 48rem) {
+  :scope._ao-container, :scope ._ao-container {
       max-width: 48rem;
+  }
     }
-    @media (width >= 64rem) {
+@media (width >= 64rem) {
+  :scope._ao-container, :scope ._ao-container {
       max-width: 64rem;
+  }
     }
-    @media (width >= 80rem) {
+@media (width >= 80rem) {
+  :scope._ao-container, :scope ._ao-container {
       max-width: 80rem;
+  }
     }
-    @media (width >= 96rem) {
+@media (width >= 96rem) {
+  :scope._ao-container, :scope ._ao-container {
       max-width: 96rem;
-    }
   }
+    }
 :scope._ao-my-4, :scope ._ao-my-4 {
     margin-block: calc(var(--spacing) * 4);
   }