@aortl/admin-css 0.2.0 → 0.4.0

package/dist/admin.scoped.css

@@ -1,4 +1,4 @@
-/*! @aortl/admin-css scoped variant — wrapped in @scope (.admin-root). */
+/*! @aortl/admin-css scoped variant — @scope (._ao-admin-root); admin classes prefixed with _ao-. */
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
@@ -50,6 +50,26 @@
   src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format("woff2");
   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;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -156,33 +176,14 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-ordinal {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-slashed-zero {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-numeric-figure {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-numeric-spacing {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-numeric-fraction {
-  syntax: "*";
-  inherits: false;
-}
-@scope (.admin-root) {
+@scope (._ao-admin-root) {
 @layer theme {
   :scope, :host {
     --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
     monospace;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -530,10 +531,77 @@
   }
 }
 @layer utilities {
-  .shadow {
+  ._ao-collapse {
+    visibility: collapse;
+  }
+  ._ao-visible {
+    visibility: visible;
+  }
+  ._ao-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  ._ao-sticky {
+    position: sticky;
+  }
+  ._ao-container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  ._ao-block {
+    display: block;
+  }
+  ._ao-grid {
+    display: grid;
+  }
+  ._ao-hidden {
+    display: none;
+  }
+  ._ao-table {
+    display: table;
+  }
+  ._ao-table-cell {
+    display: table-cell;
+  }
+  ._ao-flex-1 {
+    flex: 1;
+  }
+  ._ao-text-right {
+    text-align: right;
+  }
+  ._ao-tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  ._ao-shadow {
     --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));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  ._ao-select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
 }
 :scope {
   color-scheme: light dark;
@@ -582,29 +650,29 @@
   }
 }
 @layer components {
-  .accordion {
+  ._ao-accordion {
     display: flex;
     flex-direction: column;
   }
-  .accordion-item {
+  ._ao-accordion-item {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-border);
     background-color: var(--color-surface);
     interpolate-size: allow-keywords;
   }
-  .accordion-item:first-child {
+  ._ao-accordion-item:first-child {
     border-top-left-radius: var(--radius-lg);
     border-top-right-radius: var(--radius-lg);
   }
-  .accordion-item:last-child {
+  ._ao-accordion-item:last-child {
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-  .accordion-item + .accordion-item {
+  ._ao-accordion-item + ._ao-accordion-item {
     border-top: 0;
   }
-  .accordion-summary {
+  ._ao-accordion-summary {
     display: flex;
     cursor: pointer;
     align-items: center;
@@ -635,10 +703,10 @@
     }
     list-style: none;
   }
-  .accordion-summary::-webkit-details-marker {
+  ._ao-accordion-summary::-webkit-details-marker {
     display: none;
   }
-  .accordion-summary::after {
+  ._ao-accordion-summary::after {
     content: "";
     width: 0.5rem;
     height: 0.5rem;
@@ -649,10 +717,10 @@
     flex-shrink: 0;
     margin-left: auto;
   }
-  .accordion-item[open] > .accordion-summary::after {
+  ._ao-accordion-item[open] > ._ao-accordion-summary::after {
     transform: rotate(-135deg);
   }
-  .accordion-content {
+  ._ao-accordion-content {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
     border-color: var(--color-border);
@@ -662,20 +730,20 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text);
   }
-  .accordion-item::details-content {
+  ._ao-accordion-item::details-content {
     opacity: 0;
     height: 0;
     overflow: clip;
     content-visibility: visible;
     transition: opacity 200ms ease, height 200ms ease;
   }
-  .accordion-item[open]::details-content {
+  ._ao-accordion-item[open]::details-content {
     opacity: 1;
     height: auto;
   }
 }
 @layer components {
-  .alert {
+  ._ao-alert {
     display: flex;
     width: 100%;
     flex-direction: column;
@@ -689,65 +757,65 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text);
   }
-  .alert:has(> :is(i, svg):first-child) {
+  ._ao-alert:has(> :is(i, svg):first-child) {
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: 0.5rem;
     row-gap: 0.25rem;
     align-items: center;
   }
-  .alert > :is(i, svg):first-child {
+  ._ao-alert > :is(i, svg):first-child {
     font-size: 1rem;
     line-height: 1.25;
   }
-  .alert:has(> :is(i, svg):first-child):has(> .alert-title) {
+  ._ao-alert:has(> :is(i, svg):first-child):has(> ._ao-alert-title) {
     grid-template-rows: auto auto;
     align-items: start;
   }
-  .alert:has(> .alert-title) > :is(i, svg):first-child {
+  ._ao-alert:has(> ._ao-alert-title) > :is(i, svg):first-child {
     grid-row: 1 / -1;
   }
-  .alert > :is(.alert-title, .alert-description) {
+  ._ao-alert > :is(._ao-alert-title, ._ao-alert-description) {
     grid-column: 2;
   }
-  .alert-info {
+  ._ao-alert-info {
     border-color: var(--color-info-muted);
     background-color: var(--color-info-muted);
   }
-  .alert-success {
+  ._ao-alert-success {
     border-color: var(--color-success-muted);
     background-color: var(--color-success-muted);
   }
-  .alert-warning {
+  ._ao-alert-warning {
     border-color: var(--color-warning-muted);
     background-color: var(--color-warning-muted);
   }
-  .alert-danger {
+  ._ao-alert-danger {
     border-color: var(--color-danger-muted);
     background-color: var(--color-danger-muted);
   }
-  .alert-title {
+  ._ao-alert-title {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-  .alert-info .alert-title, .alert-info > :is(i, svg):first-child {
+  ._ao-alert-info ._ao-alert-title, ._ao-alert-info > :is(i, svg):first-child {
     color: var(--color-info);
   }
-  .alert-success .alert-title, .alert-success > :is(i, svg):first-child {
+  ._ao-alert-success ._ao-alert-title, ._ao-alert-success > :is(i, svg):first-child {
     color: var(--color-success);
   }
-  .alert-warning .alert-title, .alert-warning > :is(i, svg):first-child {
+  ._ao-alert-warning ._ao-alert-title, ._ao-alert-warning > :is(i, svg):first-child {
     color: var(--color-warning);
   }
-  .alert-danger .alert-title, .alert-danger > :is(i, svg):first-child {
+  ._ao-alert-danger ._ao-alert-title, ._ao-alert-danger > :is(i, svg):first-child {
     color: var(--color-danger);
   }
-  .alert-description {
+  ._ao-alert-description {
     color: var(--color-text-muted);
   }
 }
 @layer components {
-  .app-shell {
+  ._ao-app-shell {
     --app-shell-sidebar-w: 240px;
     --app-shell-sidebar-w-collapsed: 56px;
     display: grid;
@@ -759,35 +827,35 @@
     grid-template-rows: auto 1fr auto;
     grid-template-areas: "header" "main" "footer";
   }
-  .app-shell > .navbar {
+  ._ao-app-shell > ._ao-navbar {
     grid-area: header;
   }
-  .app-shell > main, .app-shell-main {
+  ._ao-app-shell > main, ._ao-app-shell-main {
     grid-area: main;
     min-width: 0;
   }
-  .app-shell > .footer {
+  ._ao-app-shell > ._ao-footer {
     grid-area: footer;
   }
-  .app-shell-with-sidebar {
+  ._ao-app-shell-with-sidebar {
     grid-template-columns: auto 1fr;
     grid-template-areas: "header header" "sidebar main" "footer  footer";
   }
-  .app-shell-with-sidebar > .sidebar {
+  ._ao-app-shell-with-sidebar > ._ao-sidebar {
     grid-area: sidebar;
   }
   @media (max-width: 48rem) {
-    .app-shell-with-sidebar {
+    ._ao-app-shell-with-sidebar {
       grid-template-columns: 1fr;
       grid-template-areas: "header" "main" "footer";
     }
-    .app-shell-with-sidebar > .sidebar {
+    ._ao-app-shell-with-sidebar > ._ao-sidebar {
       display: none;
     }
   }
 }
 @layer components {
-  .badge {
+  ._ao-badge {
     display: inline-flex;
     height: calc(var(--spacing) * 5);
     align-items: center;
@@ -806,41 +874,41 @@
     font-weight: var(--font-weight-medium);
     white-space: nowrap;
   }
-  .badge-neutral {
+  ._ao-badge-neutral {
     background-color: var(--color-surface-strong);
     color: var(--color-text);
   }
-  .badge-info {
+  ._ao-badge-info {
     border-color: var(--color-info-muted);
     background-color: var(--color-info-muted);
     color: var(--color-info);
   }
-  .badge-success {
+  ._ao-badge-success {
     border-color: var(--color-success-muted);
     background-color: var(--color-success-muted);
     color: var(--color-success);
   }
-  .badge-warning {
+  ._ao-badge-warning {
     border-color: var(--color-warning-muted);
     background-color: var(--color-warning-muted);
     color: var(--color-warning);
   }
-  .badge-danger {
+  ._ao-badge-danger {
     border-color: var(--color-danger-muted);
     background-color: var(--color-danger-muted);
     color: var(--color-danger);
   }
-  .badge-primary {
+  ._ao-badge-primary {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
   }
-  .badge-sm {
+  ._ao-badge-sm {
     height: calc(var(--spacing) * 4);
     gap: calc(var(--spacing) * 0.5);
     padding-inline: calc(var(--spacing) * 1.5);
     font-size: 0.625rem;
   }
-  .badge-lg {
+  ._ao-badge-lg {
     height: calc(var(--spacing) * 6);
     gap: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 2.5);
@@ -849,7 +917,7 @@
   }
 }
 @layer components {
-  .brand-tile {
+  ._ao-brand-tile {
     display: inline-flex;
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -869,7 +937,7 @@
   }
 }
 @layer components {
-  .spinner {
+  ._ao-spinner {
     display: inline-block;
     width: 1rem;
     height: 1rem;
@@ -882,18 +950,18 @@
     border-top-color: currentColor;
     animation: spinner-spin 0.6s linear infinite;
   }
-  .spinner-sm {
+  ._ao-spinner-sm {
     width: 0.75rem;
     height: 0.75rem;
     border-width: 1.5px;
   }
-  .spinner-lg {
+  ._ao-spinner-lg {
     width: 1.5rem;
     height: 1.5rem;
     border-width: 3px;
   }
   @media (prefers-reduced-motion: reduce) {
-    .spinner {
+    ._ao-spinner {
       animation-duration: 2s;
     }
   }
@@ -904,7 +972,7 @@
   }
 }
 @layer components {
-  .progress {
+  ._ao-progress {
     appearance: none;
     -webkit-appearance: none;
     display: block;
@@ -916,49 +984,49 @@
     background-color: var(--color-surface-strong);
     color: var(--color-primary);
   }
-  .progress::-webkit-progress-bar {
+  ._ao-progress::-webkit-progress-bar {
     background-color: var(--color-surface-strong);
     border-radius: 9999px;
   }
-  .progress::-webkit-progress-value {
+  ._ao-progress::-webkit-progress-value {
     background-color: currentColor;
     border-radius: 9999px;
     transition: inline-size 200ms ease;
   }
-  .progress::-moz-progress-bar {
+  ._ao-progress::-moz-progress-bar {
     background-color: currentColor;
     border-radius: 9999px;
     transition: inline-size 200ms ease;
   }
-  .progress-sm {
+  ._ao-progress-sm {
     height: 0.25rem;
   }
-  .progress-lg {
+  ._ao-progress-lg {
     height: 0.5rem;
   }
-  .progress-success {
+  ._ao-progress-success {
     color: var(--color-success);
   }
-  .progress-warning {
+  ._ao-progress-warning {
     color: var(--color-warning);
   }
-  .progress-danger {
+  ._ao-progress-danger {
     color: var(--color-danger);
   }
-  .progress:indeterminate {
+  ._ao-progress:indeterminate {
     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% );
     background-size: 250% 100%;
     background-repeat: no-repeat;
     animation: progress-indeterminate 1.2s linear infinite;
   }
-  .progress:indeterminate::-webkit-progress-bar {
+  ._ao-progress:indeterminate::-webkit-progress-bar {
     background-color: transparent;
   }
-  .progress:indeterminate::-webkit-progress-value, .progress:indeterminate::-moz-progress-bar {
+  ._ao-progress:indeterminate::-webkit-progress-value, ._ao-progress:indeterminate::-moz-progress-bar {
     background-color: transparent;
   }
   @media (prefers-reduced-motion: reduce) {
-    .progress:indeterminate {
+    ._ao-progress:indeterminate {
       animation-duration: 3s;
     }
   }
@@ -972,12 +1040,12 @@
   }
 }
 @layer components {
-  .breadcrumbs {
+  ._ao-breadcrumbs {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text-muted);
   }
-  .breadcrumbs > ol {
+  ._ao-breadcrumbs > ol {
     margin: calc(var(--spacing) * 0);
     display: inline-flex;
     list-style-type: none;
@@ -986,7 +1054,7 @@
     gap: calc(var(--spacing) * 1.5);
     padding: calc(var(--spacing) * 0);
   }
-  .breadcrumb-item {
+  ._ao-breadcrumb-item {
     display: inline-flex;
     align-items: center;
     gap: calc(var(--spacing) * 1.5);
@@ -1008,13 +1076,13 @@
       outline-color: var(--color-primary);
     }
   }
-  .breadcrumb-item[aria-current="page"] {
+  ._ao-breadcrumb-item[aria-current="page"] {
     pointer-events: none;
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
     color: var(--color-text);
   }
-  .breadcrumb-separator {
+  ._ao-breadcrumb-separator {
     display: inline-flex;
     align-items: center;
     color: color-mix(in srgb, light-dark(var(--color-base-600), var(--color-base-500)) 60%, transparent);
@@ -1024,16 +1092,16 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .breadcrumb-separator:empty::before {
+  ._ao-breadcrumb-separator:empty::before {
     content: "/";
   }
-  .breadcrumb-separator > :is(i, svg) {
+  ._ao-breadcrumb-separator > :is(i, svg) {
     width: 0.875rem;
     height: 0.875rem;
   }
 }
 @layer components {
-  .pagination > ol, .pagination > ul {
+  ._ao-pagination > ol, ._ao-pagination > ul {
     margin: calc(var(--spacing) * 0);
     display: inline-flex;
     list-style-type: none;
@@ -1041,10 +1109,10 @@
     gap: calc(var(--spacing) * 1);
     padding: calc(var(--spacing) * 0);
   }
-  .page-item {
+  ._ao-page-item {
     display: inline-flex;
   }
-  .page-link {
+  ._ao-page-link {
     display: inline-flex;
     height: calc(var(--spacing) * 8);
     min-width: calc(var(--spacing) * 8);
@@ -1097,17 +1165,17 @@
       opacity: 50%;
     }
   }
-  .page-link.active, .page-link[aria-current="page"] {
+  ._ao-page-link._ao-active, ._ao-page-link[aria-current="page"] {
     border-color: var(--color-primary-muted);
     background-color: var(--color-primary-muted);
     color: var(--color-primary);
   }
-  .page-link[aria-disabled="true"] {
+  ._ao-page-link[aria-disabled="true"] {
     pointer-events: none;
     cursor: not-allowed;
     opacity: 50%;
   }
-  .page-ellipsis {
+  ._ao-page-ellipsis {
     display: inline-flex;
     height: calc(var(--spacing) * 8);
     min-width: calc(var(--spacing) * 8);
@@ -1122,7 +1190,7 @@
   }
 }
 @layer components {
-  .btn {
+  ._ao-btn {
     display: inline-flex;
     cursor: pointer;
     align-items: center;
@@ -1167,7 +1235,7 @@
       opacity: 50%;
     }
   }
-  .btn-primary {
+  ._ao-btn-primary {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
     &:hover {
@@ -1176,7 +1244,7 @@
       }
     }
   }
-  .btn-secondary {
+  ._ao-btn-secondary {
     border-color: var(--color-border);
     background-color: var(--color-surface-muted);
     color: var(--color-text);
@@ -1186,7 +1254,7 @@
       }
     }
   }
-  .btn-ghost {
+  ._ao-btn-ghost {
     background-color: transparent;
     color: var(--color-text);
     &:hover {
@@ -1195,7 +1263,7 @@
       }
     }
   }
-  .btn-danger {
+  ._ao-btn-danger {
     background-color: var(--color-danger);
     color: var(--color-danger-content);
     &:hover {
@@ -1204,38 +1272,38 @@
       }
     }
   }
-  .btn-sm {
+  ._ao-btn-sm {
     gap: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 1.5);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .btn-lg {
+  ._ao-btn-lg {
     gap: calc(var(--spacing) * 2.5);
     padding-inline: calc(var(--spacing) * 5);
     padding-block: calc(var(--spacing) * 2.5);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
-  .btn-full-width {
+  ._ao-btn-full-width {
     width: 100%;
   }
-  .btn-square {
+  ._ao-btn-square {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .btn-sm.btn-square {
+  ._ao-btn-sm._ao-btn-square {
     padding-inline: calc(var(--spacing) * 1.5);
   }
-  .btn-lg.btn-square {
+  ._ao-btn-lg._ao-btn-square {
     padding-inline: calc(var(--spacing) * 2.5);
   }
-  .btn-loading {
+  ._ao-btn-loading {
     pointer-events: none;
     cursor: not-allowed;
     opacity: 50%;
   }
-  .btn-loading::before {
+  ._ao-btn-loading::before {
     content: "";
     display: inline-block;
     width: 1em;
@@ -1249,85 +1317,85 @@
     border-top-color: currentColor;
     animation: spinner-spin 0.6s linear infinite;
   }
-  .btn-loading > :is(i, svg):first-child {
+  ._ao-btn-loading > :is(i, svg):first-child {
     display: none;
   }
   @media (prefers-reduced-motion: reduce) {
-    .btn-loading::before {
+    ._ao-btn-loading::before {
       animation-duration: 2s;
     }
   }
 }
 @layer components {
-  .btn-group {
+  ._ao-btn-group {
     display: inline-flex;
   }
-  .btn-group > .btn {
+  ._ao-btn-group > ._ao-btn {
     position: relative;
     border-radius: 0;
     &:focus-visible {
       z-index: 10;
     }
   }
-  .btn-group > .btn:not(:first-child) {
+  ._ao-btn-group > ._ao-btn:not(:first-child) {
     margin-left: -1px;
   }
-  .btn-group > .btn:first-child {
+  ._ao-btn-group > ._ao-btn:first-child {
     border-top-left-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-  .btn-group > .btn:last-child {
+  ._ao-btn-group > ._ao-btn:last-child {
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
   }
-  .btn-group > .menu {
+  ._ao-btn-group > ._ao-menu {
     position: relative;
     &:focus-visible {
       z-index: 10;
     }
     display: inline-flex;
   }
-  .btn-group > .menu:not(:first-child) {
+  ._ao-btn-group > ._ao-menu:not(:first-child) {
     margin-left: -1px;
   }
-  .btn-group > .menu > .menu-trigger {
+  ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
     border-radius: 0;
   }
-  .btn-group > .menu:first-child > .menu-trigger {
+  ._ao-btn-group > ._ao-menu:first-child > ._ao-menu-trigger {
     border-top-left-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-  .btn-group > .menu:last-child > .menu-trigger {
+  ._ao-btn-group > ._ao-menu:last-child > ._ao-menu-trigger {
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
   }
-  .btn-group > .btn:not(:first-child), .btn-group > .menu:not(:first-child) > .menu-trigger {
+  ._ao-btn-group > ._ao-btn:not(:first-child), ._ao-btn-group > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
     border-left-color: currentColor;
     @supports (color: color-mix(in lab, red, red)) {
       border-left-color: color-mix(in srgb, currentColor 25%, transparent);
     }
   }
-  .btn-group-vertical {
+  ._ao-btn-group-vertical {
     display: inline-flex;
     flex-direction: column;
   }
-  .btn-group-vertical > .btn:not(:first-child) {
+  ._ao-btn-group-vertical > ._ao-btn:not(:first-child) {
     margin-top: -1px;
     margin-left: calc(var(--spacing) * 0);
   }
-  .btn-group-vertical > .btn:first-child {
+  ._ao-btn-group-vertical > ._ao-btn:first-child {
     border-top-left-radius: var(--radius-lg);
     border-top-right-radius: var(--radius-lg);
     border-bottom-left-radius: 0;
   }
-  .btn-group-vertical > .btn:last-child {
+  ._ao-btn-group-vertical > ._ao-btn:last-child {
     border-top-right-radius: 0;
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
 }
 @layer components {
-  .input {
+  ._ao-input {
     display: inline-flex;
     width: 100%;
     align-items: center;
@@ -1368,7 +1436,7 @@
       opacity: 50%;
     }
   }
-  .input-bordered {
+  ._ao-input-bordered {
     border-color: var(--color-border);
     &:hover {
       @media (hover: hover) {
@@ -1376,7 +1444,7 @@
       }
     }
   }
-  .input-ghost {
+  ._ao-input-ghost {
     background-color: transparent;
     &:hover {
       @media (hover: hover) {
@@ -1384,25 +1452,25 @@
       }
     }
   }
-  .input-danger {
+  ._ao-input-danger {
     border-color: var(--color-danger);
     &:focus-visible {
       outline-color: var(--color-danger);
     }
   }
-  .input-sm {
+  ._ao-input-sm {
     padding-inline: calc(var(--spacing) * 2.5);
     padding-block: calc(var(--spacing) * 1.5);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .input-lg {
+  ._ao-input-lg {
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2.5);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
-  .input::-webkit-calendar-picker-indicator {
+  ._ao-input::-webkit-calendar-picker-indicator {
     cursor: pointer;
     opacity: 60%;
     &:hover {
@@ -1413,29 +1481,29 @@
   }
 }
 @layer components {
-  .input-group {
+  ._ao-input-group {
     display: inline-flex;
     width: 100%;
   }
-  .input-group > * {
+  ._ao-input-group > * {
     border-radius: 0;
   }
-  .input-group > :first-child {
+  ._ao-input-group > :first-child {
     border-top-left-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-  .input-group > :last-child {
+  ._ao-input-group > :last-child {
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
   }
-  .input-group > :not(:first-child) {
+  ._ao-input-group > :not(:first-child) {
     margin-left: -1px;
   }
-  .input-group > :focus, .input-group > :focus-within {
+  ._ao-input-group > :focus, ._ao-input-group > :focus-within {
     position: relative;
     z-index: 10;
   }
-  .input-group-addon {
+  ._ao-input-group-addon {
     display: inline-flex;
     align-items: center;
     border-style: var(--tw-border-style);
@@ -1452,7 +1520,7 @@
   }
 }
 @layer components {
-  .textarea {
+  ._ao-textarea {
     display: block;
     min-height: calc(var(--spacing) * 20);
     width: 100%;
@@ -1492,7 +1560,7 @@
       opacity: 50%;
     }
   }
-  .textarea-bordered {
+  ._ao-textarea-bordered {
     border-color: var(--color-border);
     &:hover {
       @media (hover: hover) {
@@ -1500,7 +1568,7 @@
       }
     }
   }
-  .textarea-ghost {
+  ._ao-textarea-ghost {
     background-color: transparent;
     &:hover {
       @media (hover: hover) {
@@ -1508,20 +1576,20 @@
       }
     }
   }
-  .textarea-danger {
+  ._ao-textarea-danger {
     border-color: var(--color-danger);
     &:focus-visible {
       outline-color: var(--color-danger);
     }
   }
-  .textarea-sm {
+  ._ao-textarea-sm {
     min-height: calc(var(--spacing) * 16);
     padding-inline: calc(var(--spacing) * 2.5);
     padding-block: calc(var(--spacing) * 1.5);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .textarea-lg {
+  ._ao-textarea-lg {
     min-height: calc(var(--spacing) * 24);
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2.5);
@@ -1530,7 +1598,7 @@
   }
 }
 @layer components {
-  .checkbox {
+  ._ao-checkbox {
     display: inline-flex;
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1564,7 +1632,7 @@
       opacity: 50%;
     }
   }
-  .checkbox[data-unchecked] {
+  ._ao-checkbox[data-unchecked] {
     border-color: var(--color-border-strong);
     &:hover {
       @media (hover: hover) {
@@ -1572,7 +1640,7 @@
       }
     }
   }
-  .checkbox[data-checked], .checkbox[data-indeterminate] {
+  ._ao-checkbox[data-checked], ._ao-checkbox[data-indeterminate] {
     border-color: var(--color-primary);
     background-color: var(--color-primary);
     &:hover {
@@ -1581,11 +1649,11 @@
       }
     }
   }
-  .checkbox[data-disabled] {
+  ._ao-checkbox[data-disabled] {
     cursor: not-allowed;
     opacity: 50%;
   }
-  .checkbox-indicator {
+  ._ao-checkbox-indicator {
     display: inline-flex;
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -1593,19 +1661,19 @@
     justify-content: center;
     color: var(--color-primary-content);
   }
-  label:has(> .checkbox) {
+  label:has(> ._ao-checkbox) {
     display: inline-flex;
     cursor: pointer;
     align-items: center;
     gap: calc(var(--spacing) * 2);
   }
-  label:has(> .checkbox:disabled), label:has(> .checkbox[data-disabled]) {
+  label:has(> ._ao-checkbox:disabled), label:has(> ._ao-checkbox[data-disabled]) {
     cursor: not-allowed;
     opacity: 60%;
   }
 }
 @layer components {
-  .radio {
+  ._ao-radio {
     display: inline-flex;
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1639,7 +1707,7 @@
       opacity: 50%;
     }
   }
-  .radio[data-unchecked] {
+  ._ao-radio[data-unchecked] {
     border-color: var(--color-border-strong);
     &:hover {
       @media (hover: hover) {
@@ -1647,7 +1715,7 @@
       }
     }
   }
-  .radio[data-checked] {
+  ._ao-radio[data-checked] {
     border-color: var(--color-primary);
     background-color: var(--color-primary);
     &:hover {
@@ -1656,40 +1724,40 @@
       }
     }
   }
-  .radio[data-disabled] {
+  ._ao-radio[data-disabled] {
     cursor: not-allowed;
     opacity: 50%;
   }
-  .radio-indicator {
+  ._ao-radio-indicator {
     display: inline-flex;
     width: calc(var(--spacing) * 1.5);
     height: calc(var(--spacing) * 1.5);
     border-radius: calc(infinity * 1px);
     background-color: var(--color-primary-content);
   }
-  .radio-group {
+  ._ao-radio-group {
     display: inline-flex;
     flex-wrap: wrap;
     gap: calc(var(--spacing) * 4);
   }
-  .radio-group-vertical {
+  ._ao-radio-group-vertical {
     flex-direction: column;
     align-items: flex-start;
     gap: calc(var(--spacing) * 2);
   }
-  label:has(> .radio) {
+  label:has(> ._ao-radio) {
     display: inline-flex;
     cursor: pointer;
     align-items: center;
     gap: calc(var(--spacing) * 2);
   }
-  label:has(> .radio:disabled), label:has(> .radio[data-disabled]) {
+  label:has(> ._ao-radio:disabled), label:has(> ._ao-radio[data-disabled]) {
     cursor: not-allowed;
     opacity: 60%;
   }
 }
 @layer components {
-  .switch {
+  ._ao-switch {
     position: relative;
     display: inline-flex;
     height: calc(var(--spacing) * 5);
@@ -1724,17 +1792,17 @@
       opacity: 50%;
     }
   }
-  .switch[data-unchecked] {
+  ._ao-switch[data-unchecked] {
     background-color: var(--color-border-strong);
   }
-  .switch[data-checked] {
+  ._ao-switch[data-checked] {
     background-color: var(--color-primary);
   }
-  .switch[data-disabled] {
+  ._ao-switch[data-disabled] {
     cursor: not-allowed;
     opacity: 50%;
   }
-  .switch-thumb {
+  ._ao-switch-thumb {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
     border-radius: calc(infinity * 1px);
@@ -1747,19 +1815,19 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
-  .switch[data-checked] .switch-thumb {
+  ._ao-switch[data-checked] ._ao-switch-thumb {
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  input.switch {
+  input._ao-switch {
     margin: calc(var(--spacing) * 0);
     appearance: none;
     background-color: var(--color-border-strong);
   }
-  input.switch:checked {
+  input._ao-switch:checked {
     background-color: var(--color-primary);
   }
-  input.switch::before {
+  input._ao-switch::before {
     content: "";
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1773,23 +1841,23 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
-  input.switch:checked::before {
+  input._ao-switch:checked::before {
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  label:has(> .switch) {
+  label:has(> ._ao-switch) {
     display: inline-flex;
     cursor: pointer;
     align-items: center;
     gap: calc(var(--spacing) * 3);
   }
-  label:has(> .switch:disabled), label:has(> .switch[data-disabled]) {
+  label:has(> ._ao-switch:disabled), label:has(> ._ao-switch[data-disabled]) {
     cursor: not-allowed;
     opacity: 60%;
   }
 }
 @layer components {
-  .select {
+  ._ao-select {
     display: inline-flex;
     width: 100%;
     cursor: pointer;
@@ -1833,16 +1901,16 @@
       opacity: 50%;
     }
   }
-  .select[data-popup-open] {
+  ._ao-select[data-popup-open] {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
     outline-color: var(--color-primary);
   }
-  .select[data-placeholder] {
+  ._ao-select[data-placeholder] {
     color: var(--color-text-muted);
   }
-  .select-bordered {
+  ._ao-select-bordered {
     border-color: var(--color-border);
     &:hover {
       @media (hover: hover) {
@@ -1850,7 +1918,7 @@
       }
     }
   }
-  .select-ghost {
+  ._ao-select-ghost {
     background-color: transparent;
     &:hover {
       @media (hover: hover) {
@@ -1858,25 +1926,25 @@
       }
     }
   }
-  .select-danger {
+  ._ao-select-danger {
     border-color: var(--color-danger);
     &:focus-visible {
       outline-color: var(--color-danger);
     }
   }
-  .select-sm {
+  ._ao-select-sm {
     padding-inline: calc(var(--spacing) * 2.5);
     padding-block: calc(var(--spacing) * 1.5);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .select-lg {
+  ._ao-select-lg {
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2.5);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
-  select.select {
+  select._ao-select {
     appearance: none;
     padding-right: 2rem;
     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>");
@@ -1884,14 +1952,14 @@
     background-position: right 0.5rem center;
     background-size: 1rem;
   }
-  select.select-sm {
+  select._ao-select-sm {
     padding-right: 1.75rem;
     background-size: 0.875rem;
   }
-  select.select-lg {
+  select._ao-select-lg {
     padding-right: 2.25rem;
   }
-  .select-icon {
+  ._ao-select-icon {
     display: inline-flex;
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -1905,10 +1973,10 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
-  .select[data-popup-open] .select-icon {
+  ._ao-select[data-popup-open] ._ao-select-icon {
     rotate: 180deg;
   }
-  .select-popup {
+  ._ao-select-popup {
     max-height: calc(var(--spacing) * 72);
     min-width: var(--anchor-width);
     overflow: auto;
@@ -1929,14 +1997,14 @@
     --tw-outline-style: none;
     outline-style: none;
   }
-  .select-popup[data-starting-style], .select-popup[data-ending-style] {
+  ._ao-select-popup[data-starting-style], ._ao-select-popup[data-ending-style] {
     opacity: 0%;
   }
-  .select-popup[data-starting-style] {
+  ._ao-select-popup[data-starting-style] {
     --tw-translate-y: calc(var(--spacing) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .select-item {
+  ._ao-select-item {
     display: flex;
     cursor: pointer;
     align-items: center;
@@ -1950,18 +2018,18 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .select-item[data-highlighted] {
+  ._ao-select-item[data-highlighted] {
     background-color: var(--color-surface-muted);
   }
-  .select-item[data-selected] {
+  ._ao-select-item[data-selected] {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-  .select-item[data-disabled] {
+  ._ao-select-item[data-disabled] {
     cursor: not-allowed;
     opacity: 50%;
   }
-  .select-item-indicator {
+  ._ao-select-item-indicator {
     margin-left: auto;
     display: inline-flex;
     width: calc(var(--spacing) * 4);
@@ -1970,7 +2038,7 @@
     justify-content: center;
     color: var(--color-primary);
   }
-  .select-group-label {
+  ._ao-select-group-label {
     padding-inline: calc(var(--spacing) * 3);
     padding-top: calc(var(--spacing) * 2);
     padding-bottom: calc(var(--spacing) * 1);
@@ -1983,7 +2051,7 @@
   }
 }
 @layer components {
-  .card {
+  ._ao-card {
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -1996,13 +2064,13 @@
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .card-body {
+  ._ao-card-body {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 3);
     padding: calc(var(--spacing) * 5);
   }
-  .card-title {
+  ._ao-card-title {
     display: flex;
     align-items: center;
     gap: calc(var(--spacing) * 2);
@@ -2013,12 +2081,12 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .card-description {
+  ._ao-card-description {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text-muted);
   }
-  .card-actions {
+  ._ao-card-actions {
     margin-top: auto;
     display: flex;
     flex-wrap: wrap;
@@ -2026,18 +2094,18 @@
     gap: calc(var(--spacing) * 2);
     padding-top: calc(var(--spacing) * 2);
   }
-  .card-compact .card-body {
+  ._ao-card-compact ._ao-card-body {
     gap: calc(var(--spacing) * 2);
     padding: calc(var(--spacing) * 3);
   }
-  .card-bordered {
+  ._ao-card-bordered {
     border-color: var(--color-border-strong);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
 @layer components {
-  .dialog {
+  ._ao-dialog {
     margin: auto;
     flex-direction: column;
     overflow: hidden;
@@ -2057,29 +2125,29 @@
     transform: translateY(0) scale(1);
     transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
   }
-  .dialog[open] {
+  ._ao-dialog[open] {
     display: flex;
   }
-  .dialog::backdrop {
+  ._ao-dialog::backdrop {
     background: rgb(0 0 0 / 0.4);
     transition: display 150ms allow-discrete, overlay 150ms allow-discrete, background 150ms ease-out;
   }
   @starting-style {
-    .dialog[open] {
+    ._ao-dialog[open] {
       opacity: 0;
       transform: translateY(-0.5rem) scale(0.98);
     }
-    .dialog[open]::backdrop {
+    ._ao-dialog[open]::backdrop {
       background: rgb(0 0 0 / 0);
     }
   }
-  .dialog-sm {
+  ._ao-dialog-sm {
     max-width: 24rem;
   }
-  .dialog-lg {
+  ._ao-dialog-lg {
     max-width: 48rem;
   }
-  .dialog-header {
+  ._ao-dialog-header {
     display: flex;
     align-items: flex-start;
     gap: calc(var(--spacing) * 3);
@@ -2087,7 +2155,7 @@
     padding-top: calc(var(--spacing) * 5);
     padding-bottom: calc(var(--spacing) * 3);
   }
-  .dialog-title {
+  ._ao-dialog-title {
     margin: calc(var(--spacing) * 0);
     display: flex;
     flex: 1;
@@ -2100,7 +2168,7 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .dialog-description {
+  ._ao-dialog-description {
     margin-top: calc(var(--spacing) * -2);
     margin-bottom: calc(var(--spacing) * 3);
     padding-inline: calc(var(--spacing) * 5);
@@ -2108,7 +2176,7 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text-muted);
   }
-  .dialog-body {
+  ._ao-dialog-body {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 3);
@@ -2116,7 +2184,7 @@
     padding-inline: calc(var(--spacing) * 5);
     padding-block: calc(var(--spacing) * 3);
   }
-  .dialog-footer {
+  ._ao-dialog-footer {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -2129,7 +2197,7 @@
     padding-inline: calc(var(--spacing) * 5);
     padding-block: calc(var(--spacing) * 3);
   }
-  .dialog-close {
+  ._ao-dialog-close {
     display: inline-flex;
     width: calc(var(--spacing) * 7);
     height: calc(var(--spacing) * 7);
@@ -2168,17 +2236,17 @@
   }
 }
 @layer components {
-  .field {
+  ._ao-field {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 1.5);
   }
-  .field-row {
+  ._ao-field-row {
     flex-direction: row;
     align-items: center;
     gap: calc(var(--spacing) * 3);
   }
-  .field-label {
+  ._ao-field-label {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-leading: 1;
@@ -2187,41 +2255,41 @@
     font-weight: var(--font-weight-medium);
     color: var(--color-text);
   }
-  .field-label[data-required]::after {
+  ._ao-field-label[data-required]::after {
     content: " *";
     color: var(--color-danger);
   }
-  .asteriskField {
+  ._ao-asteriskField {
     color: var(--color-danger);
   }
-  .field-description {
+  ._ao-field-description {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
     color: var(--color-text-muted);
   }
-  .field-error {
+  ._ao-field-error {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
     color: var(--color-danger);
   }
-  .field[data-invalid] .input, .field[data-invalid] .textarea, .field[data-invalid] .select, .field[data-invalid] .file-input {
+  ._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 {
     border-color: var(--color-danger);
   }
-  .field[data-invalid] .checkbox[data-unchecked], .field[data-invalid] .radio[data-unchecked] {
+  ._ao-field[data-invalid] ._ao-checkbox[data-unchecked], ._ao-field[data-invalid] ._ao-radio[data-unchecked] {
     border-color: var(--color-danger);
   }
-  .field[data-invalid] .switch[data-unchecked] {
+  ._ao-field[data-invalid] ._ao-switch[data-unchecked] {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --tw-ring-color: var(--color-danger);
   }
 }
 @layer components {
-  .file-input {
+  ._ao-file-input {
     display: inline-flex;
     width: 100%;
     align-items: center;
@@ -2307,7 +2375,7 @@
       opacity: 50%;
     }
   }
-  .file-input-bordered {
+  ._ao-file-input-bordered {
     border-color: var(--color-border);
     &:hover {
       @media (hover: hover) {
@@ -2315,7 +2383,7 @@
       }
     }
   }
-  .file-input-ghost {
+  ._ao-file-input-ghost {
     background-color: transparent;
     &:hover {
       @media (hover: hover) {
@@ -2323,13 +2391,13 @@
       }
     }
   }
-  .file-input-danger {
+  ._ao-file-input-danger {
     border-color: var(--color-danger);
     &:focus-visible {
       outline-color: var(--color-danger);
     }
   }
-  .file-input-sm {
+  ._ao-file-input-sm {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
     &::file-selector-button {
@@ -2346,7 +2414,7 @@
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
   }
-  .file-input-lg {
+  ._ao-file-input-lg {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
     &::file-selector-button {
@@ -2365,7 +2433,7 @@
   }
 }
 @layer components {
-  .footer {
+  ._ao-footer {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -2381,13 +2449,13 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
     color: var(--color-text-muted);
   }
-  .footer-links {
+  ._ao-footer-links {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: calc(var(--spacing) * 3);
   }
-  .footer-link {
+  ._ao-footer-link {
     border-radius: var(--radius-sm);
     color: var(--color-text-muted);
     text-decoration-line: none;
@@ -2412,16 +2480,16 @@
       outline-color: var(--color-primary);
     }
   }
-  .footer-meta {
+  ._ao-footer-meta {
     color: var(--color-text-muted);
   }
 }
 @layer components {
-  .menu {
+  ._ao-menu {
     position: relative;
     display: inline-block;
   }
-  .menu-trigger {
+  ._ao-menu-trigger {
     display: inline-flex;
     cursor: pointer;
     align-items: center;
@@ -2445,10 +2513,10 @@
     }
     list-style: none;
   }
-  .menu-trigger::-webkit-details-marker {
+  ._ao-menu-trigger::-webkit-details-marker {
     display: none;
   }
-  .menu-trigger:not(.btn) {
+  ._ao-menu-trigger:not(._ao-btn) {
     border-radius: var(--radius-md);
     background-color: transparent;
     padding-inline: calc(var(--spacing) * 2.5);
@@ -2464,7 +2532,7 @@
       }
     }
   }
-  .menu-trigger::after {
+  ._ao-menu-trigger::after {
     content: "";
     width: 0.5em;
     height: 0.5em;
@@ -2474,13 +2542,13 @@
     transition: transform 150ms ease;
     flex-shrink: 0;
   }
-  .menu-trigger:empty {
+  ._ao-menu-trigger:empty {
     justify-content: center;
   }
-  .menu[open] > .menu-trigger::after {
+  ._ao-menu[open] > ._ao-menu-trigger::after {
     transform: rotate(-135deg);
   }
-  .menu-popup {
+  ._ao-menu-popup {
     position: absolute;
     top: 100%;
     left: calc(var(--spacing) * 0);
@@ -2499,7 +2567,7 @@
     --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));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .menu-item {
+  ._ao-menu-item {
     display: flex;
     width: 100%;
     cursor: pointer;
@@ -2538,22 +2606,22 @@
       opacity: 50%;
     }
   }
-  .menu-item[aria-disabled="true"] {
+  ._ao-menu-item[aria-disabled="true"] {
     cursor: not-allowed;
     opacity: 50%;
   }
-  .menu-separator {
+  ._ao-menu-separator {
     margin-block: calc(var(--spacing) * 1);
     height: 1px;
     border-style: var(--tw-border-style);
     border-width: 0px;
     background-color: var(--color-border);
   }
-  .menu-group {
+  ._ao-menu-group {
     display: flex;
     flex-direction: column;
   }
-  .menu-group-label {
+  ._ao-menu-group-label {
     padding-inline: calc(var(--spacing) * 3);
     padding-top: calc(var(--spacing) * 2);
     padding-bottom: calc(var(--spacing) * 1);
@@ -2566,7 +2634,7 @@
   }
 }
 @layer components {
-  .navbar {
+  ._ao-navbar {
     display: flex;
     height: calc(var(--spacing) * 12);
     align-items: center;
@@ -2578,7 +2646,7 @@
     padding-inline: calc(var(--spacing) * 4);
     color: var(--color-text);
   }
-  .navbar-brand {
+  ._ao-navbar-brand {
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -2589,12 +2657,12 @@
     font-weight: var(--font-weight-semibold);
     color: var(--color-text);
   }
-  .navbar-items {
+  ._ao-navbar-items {
     display: flex;
     align-items: center;
     gap: calc(var(--spacing) * 0.5);
   }
-  .navbar-item {
+  ._ao-navbar-item {
     display: inline-flex;
     cursor: pointer;
     align-items: center;
@@ -2631,17 +2699,17 @@
       outline-color: var(--color-primary);
     }
   }
-  .navbar-item[aria-current="page"], .navbar-item[data-active] {
+  ._ao-navbar-item[aria-current="page"], ._ao-navbar-item[data-active] {
     background-color: var(--color-primary-muted);
     color: var(--color-primary);
   }
-  .navbar-actions {
+  ._ao-navbar-actions {
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: calc(var(--spacing) * 2);
   }
-  .navbar-mobile-toggle {
+  ._ao-navbar-mobile-toggle {
     margin-left: calc(var(--spacing) * -2);
     display: inline-flex;
     width: calc(var(--spacing) * 9);
@@ -2668,7 +2736,7 @@
       outline-color: var(--color-primary);
     }
   }
-  .navbar-mobile-toggle::before {
+  ._ao-navbar-mobile-toggle::before {
     content: "";
     display: block;
     width: 18px;
@@ -2678,13 +2746,13 @@
     box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
   }
   @media (min-width: 48rem) {
-    .navbar-mobile-toggle {
+    ._ao-navbar-mobile-toggle {
       display: none;
     }
   }
 }
 @layer components {
-  .sidebar {
+  ._ao-sidebar {
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
@@ -2696,7 +2764,7 @@
     width: var(--app-shell-sidebar-w, 240px);
     transition: width 150ms ease;
   }
-  .sidebar-toggle {
+  ._ao-sidebar-toggle {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -2706,17 +2774,17 @@
     opacity: 0;
     pointer-events: none;
   }
-  .sidebar:has(.sidebar-toggle:checked) {
+  ._ao-sidebar:has(._ao-sidebar-toggle:checked) {
     width: var(--app-shell-sidebar-w-collapsed, 56px);
   }
-  .sidebar:has(.sidebar-toggle:checked) .sidebar-label, .sidebar:has(.sidebar-toggle:checked) .sidebar-group-label, .sidebar:has(.sidebar-toggle:checked) .sidebar-badge, .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-panel, .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-trigger::after {
+  ._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 {
     display: none;
   }
-  .sidebar:has(.sidebar-toggle:checked) .sidebar-item, .sidebar:has(.sidebar-toggle:checked) .sidebar-subitem, .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-trigger {
+  ._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 {
     justify-content: center;
     padding-inline: calc(var(--spacing) * 1);
   }
-  .sidebar-header {
+  ._ao-sidebar-header {
     display: flex;
     height: calc(var(--spacing) * 12);
     flex-shrink: 0;
@@ -2727,7 +2795,7 @@
     border-color: var(--color-border);
     padding-inline: calc(var(--spacing) * 3);
   }
-  .sidebar-nav {
+  ._ao-sidebar-nav {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -2736,15 +2804,15 @@
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 2);
   }
-  .sidebar-group {
+  ._ao-sidebar-group {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 0.5);
   }
-  .sidebar-group + .sidebar-group {
+  ._ao-sidebar-group + ._ao-sidebar-group {
     margin-top: calc(var(--spacing) * 2);
   }
-  .sidebar-group-label {
+  ._ao-sidebar-group-label {
     padding-inline: calc(var(--spacing) * 2);
     padding-top: calc(var(--spacing) * 2);
     padding-bottom: calc(var(--spacing) * 1);
@@ -2755,7 +2823,7 @@
     color: var(--color-text-muted);
     text-transform: uppercase;
   }
-  .sidebar-item {
+  ._ao-sidebar-item {
     display: flex;
     cursor: pointer;
     align-items: center;
@@ -2793,13 +2861,13 @@
       outline-color: var(--color-primary);
     }
   }
-  .sidebar-item[aria-current="page"], .sidebar-item[data-active] {
+  ._ao-sidebar-item[aria-current="page"], ._ao-sidebar-item[data-active] {
     background-color: var(--color-primary-muted);
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
     color: var(--color-primary);
   }
-  .sidebar-icon {
+  ._ao-sidebar-icon {
     display: inline-flex;
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -2808,17 +2876,17 @@
     justify-content: center;
     color: var(--color-text-muted);
   }
-  .sidebar-item[aria-current="page"] .sidebar-icon, .sidebar-item[data-active] .sidebar-icon {
+  ._ao-sidebar-item[aria-current="page"] ._ao-sidebar-icon, ._ao-sidebar-item[data-active] ._ao-sidebar-icon {
     color: var(--color-primary);
   }
-  .sidebar-label {
+  ._ao-sidebar-label {
     min-width: calc(var(--spacing) * 0);
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .sidebar-badge {
+  ._ao-sidebar-badge {
     margin-left: auto;
     display: inline-flex;
     height: calc(var(--spacing) * 5);
@@ -2834,12 +2902,12 @@
     font-weight: var(--font-weight-medium);
     color: var(--color-text-muted);
   }
-  .sidebar-collapsible {
+  ._ao-sidebar-collapsible {
     display: flex;
     flex-direction: column;
     interpolate-size: allow-keywords;
   }
-  .sidebar-collapsible-trigger {
+  ._ao-sidebar-collapsible-trigger {
     display: flex;
     width: 100%;
     cursor: pointer;
@@ -2879,10 +2947,10 @@
     }
     list-style: none;
   }
-  .sidebar-collapsible-trigger::-webkit-details-marker {
+  ._ao-sidebar-collapsible-trigger::-webkit-details-marker {
     display: none;
   }
-  .sidebar-collapsible-trigger::after {
+  ._ao-sidebar-collapsible-trigger::after {
     content: "";
     margin-left: auto;
     width: 0.375rem;
@@ -2894,10 +2962,10 @@
     transition: transform 150ms ease;
     flex-shrink: 0;
   }
-  .sidebar-collapsible[open] > .sidebar-collapsible-trigger::after {
+  ._ao-sidebar-collapsible[open] > ._ao-sidebar-collapsible-trigger::after {
     transform: rotate(45deg);
   }
-  .sidebar-collapsible-panel {
+  ._ao-sidebar-collapsible-panel {
     margin-top: calc(var(--spacing) * 0.5);
     display: flex;
     flex-direction: column;
@@ -2905,18 +2973,18 @@
     padding-left: calc(var(--spacing) * 4);
     overflow: hidden;
   }
-  .sidebar-collapsible::details-content {
+  ._ao-sidebar-collapsible::details-content {
     opacity: 0;
     height: 0;
     overflow: clip;
     transition: opacity 150ms ease, height 150ms ease, content-visibility 150ms;
     transition-behavior: allow-discrete;
   }
-  .sidebar-collapsible[open]::details-content {
+  ._ao-sidebar-collapsible[open]::details-content {
     opacity: 1;
     height: auto;
   }
-  .sidebar-subitem {
+  ._ao-sidebar-subitem {
     display: flex;
     cursor: pointer;
     align-items: center;
@@ -2954,13 +3022,13 @@
       outline-color: var(--color-primary);
     }
   }
-  .sidebar-subitem[aria-current="page"], .sidebar-subitem[data-active] {
+  ._ao-sidebar-subitem[aria-current="page"], ._ao-sidebar-subitem[data-active] {
     background-color: var(--color-primary-muted);
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
     color: var(--color-primary);
   }
-  .sidebar-footer {
+  ._ao-sidebar-footer {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 1);
@@ -2970,7 +3038,7 @@
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 2);
   }
-  .sidebar-collapse-toggle {
+  ._ao-sidebar-collapse-toggle {
     position: relative;
     display: inline-flex;
     width: calc(var(--spacing) * 7);
@@ -2999,13 +3067,13 @@
       }
     }
   }
-  .sidebar-collapse-toggle:has(.sidebar-toggle:focus-visible) {
+  ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible) {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
     outline-color: var(--color-primary);
   }
-  .sidebar-collapse-toggle::before {
+  ._ao-sidebar-collapse-toggle::before {
     content: "";
     width: 0.5rem;
     height: 0.5rem;
@@ -3014,10 +3082,10 @@
     transform: rotate(45deg);
     transition: transform 150ms ease;
   }
-  .sidebar:has(.sidebar-toggle:checked) .sidebar-collapse-toggle::before {
+  ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle::before {
     transform: rotate(-135deg);
   }
-  .sidebar-drawer-backdrop {
+  ._ao-sidebar-drawer-backdrop {
     position: fixed;
     inset: calc(var(--spacing) * 0);
     z-index: 40;
@@ -3031,10 +3099,10 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
-  .sidebar-drawer-backdrop[data-starting-style], .sidebar-drawer-backdrop[data-ending-style] {
+  ._ao-sidebar-drawer-backdrop[data-starting-style], ._ao-sidebar-drawer-backdrop[data-ending-style] {
     opacity: 0%;
   }
-  .sidebar-drawer {
+  ._ao-sidebar-drawer {
     position: fixed;
     inset-block: calc(var(--spacing) * 0);
     left: calc(var(--spacing) * 0);
@@ -3053,17 +3121,17 @@
     transition-duration: 150ms;
     width: min(var(--app-shell-sidebar-w, 240px), 80vw);
   }
-  .sidebar-drawer[data-starting-style], .sidebar-drawer[data-ending-style] {
+  ._ao-sidebar-drawer[data-starting-style], ._ao-sidebar-drawer[data-ending-style] {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
 @layer components {
-  .tabs {
+  ._ao-tabs {
     display: flex;
     flex-direction: column;
   }
-  .tabs .tab-list {
+  ._ao-tabs ._ao-tab-list {
     display: inline-flex;
     align-items: center;
     gap: calc(var(--spacing) * 1);
@@ -3072,7 +3140,7 @@
     border-color: var(--color-border);
     position: relative;
   }
-  .tabs .tab {
+  ._ao-tabs ._ao-tab {
     display: inline-flex;
     height: calc(var(--spacing) * 9);
     cursor: pointer;
@@ -3118,10 +3186,10 @@
       opacity: 50%;
     }
   }
-  .tabs .tab[data-selected], .tabs .tab[aria-selected="true"] {
+  ._ao-tabs ._ao-tab[data-selected], ._ao-tabs ._ao-tab[aria-selected="true"] {
     color: var(--color-text);
   }
-  .tabs .tab-input {
+  ._ao-tabs ._ao-tab-input {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -3131,19 +3199,19 @@
     opacity: 0;
     pointer-events: none;
   }
-  .tabs .tab-input:checked + .tab {
+  ._ao-tabs ._ao-tab-input:checked + ._ao-tab {
     color: var(--color-text);
   }
-  .tabs .tab-input:focus-visible + .tab {
+  ._ao-tabs ._ao-tab-input:focus-visible + ._ao-tab {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
     outline-color: var(--color-primary);
   }
-  .tabs-bordered .tab, .tabs:not(.tabs-boxed) .tab {
+  ._ao-tabs-bordered ._ao-tab, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab {
     position: relative;
   }
-  .tabs-bordered .tab::after, .tabs:not(.tabs-boxed) .tab::after {
+  ._ao-tabs-bordered ._ao-tab::after, ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after {
     content: "";
     position: absolute;
     inset-inline: 0;
@@ -3153,10 +3221,10 @@
     transform: scaleX(0);
     transition: transform 150ms ease;
   }
-  .tabs-bordered .tab[data-selected]::after, .tabs-bordered .tab[aria-selected="true"]::after, .tabs-bordered .tab-input:checked + .tab::after, .tabs:not(.tabs-boxed) .tab[data-selected]::after, .tabs:not(.tabs-boxed) .tab[aria-selected="true"]::after, .tabs:not(.tabs-boxed) .tab-input:checked + .tab::after {
+  ._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 {
     transform: scaleX(1);
   }
-  .tabs-boxed .tab-list {
+  ._ao-tabs-boxed ._ao-tab-list {
     gap: calc(var(--spacing) * 0);
     border-radius: var(--radius-md);
     border-style: var(--tw-border-style);
@@ -3165,54 +3233,54 @@
     background-color: var(--color-surface-muted);
     padding: calc(var(--spacing) * 0.5);
   }
-  .tabs-boxed .tab {
+  ._ao-tabs-boxed ._ao-tab {
     border-radius: 0.25rem;
   }
-  .tabs-boxed .tab[data-selected], .tabs-boxed .tab[aria-selected="true"], .tabs-boxed .tab-input:checked + .tab {
+  ._ao-tabs-boxed ._ao-tab[data-selected], ._ao-tabs-boxed ._ao-tab[aria-selected="true"], ._ao-tabs-boxed ._ao-tab-input:checked + ._ao-tab {
     background-color: var(--color-surface);
     color: var(--color-text);
     --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));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .tabs-full-width:not([data-orientation="vertical"]) .tab-list {
+  ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list {
     display: flex;
     width: 100%;
   }
-  .tabs-full-width:not([data-orientation="vertical"]) .tab {
+  ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab {
     flex: 1;
     justify-content: center;
   }
-  .tabs-sm .tab {
+  ._ao-tabs-sm ._ao-tab {
     height: calc(var(--spacing) * 7);
     padding-inline: calc(var(--spacing) * 2);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .tabs-lg .tab {
+  ._ao-tabs-lg ._ao-tab {
     height: calc(var(--spacing) * 11);
     padding-inline: calc(var(--spacing) * 4);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
-  .tabs .tab-panel {
+  ._ao-tabs ._ao-tab-panel {
     padding-top: calc(var(--spacing) * 3);
     --tw-outline-style: none;
     outline-style: none;
   }
-  .tabs .tab-panel {
+  ._ao-tabs ._ao-tab-panel {
     display: none;
   }
-  .tabs:has(.tab-input[value="1"]:checked) .tab-panel[data-value="1"], .tabs:has(.tab-input[value="2"]:checked) .tab-panel[data-value="2"], .tabs:has(.tab-input[value="3"]:checked) .tab-panel[data-value="3"], .tabs:has(.tab-input[value="4"]:checked) .tab-panel[data-value="4"], .tabs:has(.tab-input[value="5"]:checked) .tab-panel[data-value="5"], .tabs:has(.tab-input[value="6"]:checked) .tab-panel[data-value="6"] {
+  ._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"] {
     display: block;
   }
-  .tabs .tab-panel:not([hidden]):not([data-value]) {
+  ._ao-tabs ._ao-tab-panel:not([hidden]):not([data-value]) {
     display: block;
   }
-  .tabs[data-orientation="vertical"] {
+  ._ao-tabs[data-orientation="vertical"] {
     flex-direction: row;
     gap: calc(var(--spacing) * 3);
   }
-  .tabs[data-orientation="vertical"] .tab-list {
+  ._ao-tabs[data-orientation="vertical"] ._ao-tab-list {
     flex-direction: column;
     align-items: stretch;
     border-right-style: var(--tw-border-style);
@@ -3221,11 +3289,11 @@
     border-bottom-width: 0px;
     border-color: var(--color-border);
   }
-  .tabs[data-orientation="vertical"] .tab {
+  ._ao-tabs[data-orientation="vertical"] ._ao-tab {
     width: 100%;
     justify-content: flex-start;
   }
-  .tabs[data-orientation="vertical"].tabs-bordered .tab::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab::after {
+  ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab::after, ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after {
     inset-inline: auto;
     inset-inline-end: -1px;
     inset-block: 0;
@@ -3233,19 +3301,19 @@
     block-size: auto;
     transform: scaleY(0);
   }
-  .tabs[data-orientation="vertical"].tabs-bordered .tab[data-selected]::after, .tabs[data-orientation="vertical"].tabs-bordered .tab[aria-selected="true"]::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[data-selected]::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[aria-selected="true"]::after {
+  ._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 {
     transform: scaleY(1);
   }
 }
 @layer components {
-  .table {
+  ._ao-table {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text);
   }
-  .table :where(th, td), .table-cell, .table-header-cell {
+  ._ao-table :where(th, td), ._ao-table-cell, ._ao-table-header-cell {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
     border-color: var(--color-border);
@@ -3254,7 +3322,7 @@
     text-align: left;
     vertical-align: middle;
   }
-  .table :where(thead th), .table-header-cell {
+  ._ao-table :where(thead th), ._ao-table-header-cell {
     border-bottom-color: var(--color-border-strong);
     background-color: var(--color-surface-muted);
     --tw-font-weight: var(--font-weight-medium);
@@ -3262,93 +3330,194 @@
     white-space: nowrap;
     color: var(--color-text-muted);
   }
-  .table > :last-child > tr:last-child :where(td), .table > :last-child > tr:last-child .table-cell {
+  ._ao-table > :last-child > tr:last-child :where(td), ._ao-table > :last-child > tr:last-child ._ao-table-cell {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
   }
-  .table :where(th, td)[data-align="right"] {
+  ._ao-table :where(th, td)[data-align="right"] {
     text-align: right;
   }
-  .table :where(th, td)[data-align="center"] {
+  ._ao-table :where(th, td)[data-align="center"] {
     text-align: center;
   }
-  .table-cell-numeric {
+  ._ao-table-cell-numeric {
     text-align: right;
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .table-cell-gutter {
+  ._ao-table-cell-gutter {
     width: calc(var(--spacing) * 6);
     padding-inline: calc(var(--spacing) * 0);
     text-align: center;
     color: var(--color-text-muted);
   }
-  .table-cell-gutter > :is(i, svg) {
+  ._ao-table-cell-gutter > :is(i, svg) {
     font-size: 1rem;
     line-height: 1;
     vertical-align: middle;
   }
-  .table-striped tbody tr:nth-child(even) :where(td) {
+  ._ao-table-striped tbody tr:nth-child(even) :where(td) {
     background-color: var(--color-surface-muted);
   }
-  .table-bordered {
+  ._ao-table-bordered {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-border);
   }
-  .table-bordered :where(th, td) {
+  ._ao-table-bordered :where(th, td) {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-border);
   }
-  .table-relaxed :where(th, td) {
+  ._ao-table-relaxed :where(th, td) {
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 3);
   }
-  .table-sticky thead :where(th) {
+  ._ao-table-sticky thead :where(th) {
     position: sticky;
     top: calc(var(--spacing) * 0);
     z-index: 10;
     background-color: var(--color-surface-muted);
   }
-  .table tbody tr {
+  ._ao-table tbody tr {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 75ms;
     transition-duration: 75ms;
   }
-  .table tbody tr:hover :where(td) {
+  ._ao-table tbody tr:hover :where(td) {
     background-color: var(--color-surface-muted);
   }
-  .table tbody tr:has(input[type="checkbox"]:checked), .table tbody tr:has(.checkbox[data-checked]), .table tbody tr[data-selected] {
+  ._ao-table tbody tr:has(input[type="checkbox"]:checked), ._ao-table tbody tr:has(._ao-checkbox[data-checked]), ._ao-table tbody tr[data-selected] {
     background-color: var(--color-primary-muted);
   }
-  .table tbody tr:has(input[type="checkbox"]:checked):hover :where(td), .table tbody tr:has(.checkbox[data-checked]):hover :where(td), .table tbody tr[data-selected]:hover :where(td) {
+  ._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) {
     background-color: var(--color-primary-muted);
   }
-  .table-row-link {
+  ._ao-table-row-link {
     position: relative;
     cursor: pointer;
   }
-  .table-row-link:hover :where(td) {
+  ._ao-table-row-link:hover :where(td) {
     background-color: var(--color-surface-muted);
   }
-  .table-row-link a:first-of-type::after {
+  ._ao-table-row-link a:first-of-type::after {
     content: "";
     position: absolute;
     inset: calc(var(--spacing) * 0);
   }
-  .table-row-link:focus-within {
+  ._ao-table-row-link:focus-within {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: calc(2px * -1);
     outline-color: var(--color-primary);
   }
 }
+@layer components {
+  ._ao-tooltip {
+    pointer-events: none;
+    display: inline-block;
+    max-width: var(--container-xs);
+    border-radius: var(--radius-md);
+    background-color: var(--color-text);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-surface);
+    --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));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    text-wrap: balance;
+  }
+  ._ao-tooltip-sm {
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  ._ao-tooltip {
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+  }
+  ._ao-tooltip[data-starting-style], ._ao-tooltip[data-ending-style] {
+    opacity: 0;
+  }
+  ._ao-tooltip[data-side="top"][data-starting-style], ._ao-tooltip[data-side="top"][data-ending-style] {
+    transform: translateY(0.25rem);
+  }
+  ._ao-tooltip[data-side="bottom"][data-starting-style], ._ao-tooltip[data-side="bottom"][data-ending-style] {
+    transform: translateY(-0.25rem);
+  }
+  ._ao-tooltip[data-side="left"][data-starting-style], ._ao-tooltip[data-side="left"][data-ending-style] {
+    transform: translateX(0.25rem);
+  }
+  ._ao-tooltip[data-side="right"][data-starting-style], ._ao-tooltip[data-side="right"][data-ending-style] {
+    transform: translateX(-0.25rem);
+  }
+  ._ao-tooltip-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  ._ao-tooltip-wrap > ._ao-tooltip {
+    visibility: hidden;
+    position: absolute;
+    opacity: 0%;
+    left: 50%;
+    bottom: 100%;
+    margin-bottom: calc(var(--spacing) * 1.5);
+    transform: translateX(-50%);
+    transition: opacity 150ms ease-out 0ms, visibility 0s linear 150ms;
+  }
+  ._ao-tooltip-wrap-bottom > ._ao-tooltip {
+    top: 100%;
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    margin-top: calc(var(--spacing) * 1.5);
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    transform: translateX(-50%);
+  }
+  ._ao-tooltip-wrap-left > ._ao-tooltip {
+    top: 50%;
+    right: 100%;
+    bottom: auto;
+    left: auto;
+    margin-top: 0;
+    margin-right: calc(var(--spacing) * 1.5);
+    margin-bottom: 0;
+    margin-left: 0;
+    transform: translateY(-50%);
+  }
+  ._ao-tooltip-wrap-right > ._ao-tooltip {
+    top: 50%;
+    right: auto;
+    bottom: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: calc(var(--spacing) * 1.5);
+    transform: translateY(-50%);
+  }
+  ._ao-tooltip-wrap:hover > ._ao-tooltip, ._ao-tooltip-wrap:focus-within > ._ao-tooltip {
+    visibility: visible;
+    opacity: 100%;
+    transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -3372,11 +3541,6 @@
       --tw-translate-y: 0;
       --tw-translate-z: 0;
       --tw-tracking: initial;
-      --tw-ordinal: initial;
-      --tw-slashed-zero: initial;
-      --tw-numeric-figure: initial;
-      --tw-numeric-spacing: initial;
-      --tw-numeric-fraction: initial;
     }
   }
 }