@aortl/admin-css 0.17.0 → 0.18.1

package/dist/admin.scoped.min.css

@@ -32,10 +32,10 @@
 @property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}
 @property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}
 @property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
+@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
 @property --tw-leading{syntax:"*";inherits:false}
 @property --tw-font-weight{syntax:"*";inherits:false}
 @property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
-@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
 @property --tw-duration{syntax:"*";inherits:false}
 @property --tw-tracking{syntax:"*";inherits:false}
 @property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}
@@ -63,7 +63,7 @@
 :scope{color-scheme:light dark}
 :scope[data-theme=dark], :scope [data-theme=dark]{color-scheme:dark}
 :scope[data-theme=light], :scope [data-theme=light]{color-scheme:light}
-@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:scope, :scope *, :scope:before, :scope :before, :scope:after, :scope :after, :scope::backdrop, :scope ::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--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%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-duration:initial;--tw-tracking:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}
+@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:scope, :scope *, :scope:before, :scope :before, :scope:after, :scope :after, :scope::backdrop, :scope ::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--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%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-border-style:solid;--tw-duration:initial;--tw-tracking:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}
 :scope, :scope:host, :scope :host{--font-sans:"IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-paper:#fff;--color-black:#0f0f0f;--color-base-50:#fafafa;--color-base-100:#f4f4f4;--color-base-150:#e7e7e7;--color-base-200:#d4d4d4;--color-base-300:#b3b3b3;--color-base-400:#9b9b9b;--color-base-500:#848484;--color-base-600:#6c6c6c;--color-base-700:#555;--color-base-800:#3e3e3e;--color-base-850:#333;--color-base-900:#272727;--color-base-950:#1b1b1b;--color-red-50:#ffe1d5;--color-red-100:#ffcabb;--color-red-150:#fdb2a2;--color-red-200:#f89a8a;--color-red-300:#e8705f;--color-red-400:#d14d41;--color-red-500:#c03e35;--color-red-600:#af3029;--color-red-700:#942822;--color-red-800:#6c201c;--color-red-850:#551b18;--color-red-900:#3e1715;--color-red-950:#261312;--color-orange-50:#ffe7ce;--color-orange-100:#fed3af;--color-orange-150:#fcc192;--color-orange-200:#f9ae77;--color-orange-300:#ec8b49;--color-orange-400:#da702c;--color-orange-500:#cb6120;--color-orange-600:#bc5215;--color-orange-700:#9d4310;--color-orange-800:#71320d;--color-orange-850:#59290d;--color-orange-900:#40200d;--color-orange-950:#27180e;--color-yellow-50:#faeec6;--color-yellow-100:#f6e2a0;--color-yellow-150:#f1d67e;--color-yellow-200:#eccb60;--color-yellow-300:#dfb431;--color-yellow-400:#d0a215;--color-yellow-500:#be9207;--color-yellow-600:#ad8301;--color-yellow-700:#8e6b01;--color-yellow-800:#664d01;--color-yellow-850:#503d02;--color-yellow-900:#3a2d04;--color-yellow-950:#241e08;--color-green-50:#edeecf;--color-green-100:#dde2b2;--color-green-150:#cdd597;--color-green-200:#bec97e;--color-green-300:#a0af54;--color-green-400:#879a39;--color-green-500:#768d21;--color-green-600:#66800b;--color-green-700:#536907;--color-green-800:#3d4c07;--color-green-850:#313d07;--color-green-900:#252d09;--color-green-950:#1a1e0c;--color-cyan-50:#ddf1e4;--color-cyan-100:#bfe8d9;--color-cyan-150:#a2dece;--color-cyan-200:#87d3c3;--color-cyan-300:#5abdac;--color-cyan-400:#3aa99f;--color-cyan-500:#2f968d;--color-cyan-600:#24837b;--color-cyan-700:#1c6c66;--color-cyan-800:#164f4a;--color-cyan-850:#143f3c;--color-cyan-900:#122f2c;--color-cyan-950:#101f1d;--color-blue-50:#e1eceb;--color-blue-100:#c6dde8;--color-blue-150:#abcfe2;--color-blue-200:#92bfdb;--color-blue-300:#66a0c8;--color-blue-400:#4385be;--color-blue-500:#3171b2;--color-blue-600:#205ea6;--color-blue-700:#1a4f8c;--color-blue-800:#163b66;--color-blue-850:#133051;--color-blue-900:#12253b;--color-blue-950:#101a24;--color-purple-50:#f0eaec;--color-purple-100:#e2d9e9;--color-purple-150:#d3cae6;--color-purple-200:#c4b9e0;--color-purple-300:#a699d0;--color-purple-400:#8b7ec8;--color-purple-500:#735eb5;--color-purple-600:#5e409d;--color-purple-700:#4f3685;--color-purple-800:#3c2a62;--color-purple-850:#31234e;--color-purple-900:#261c39;--color-purple-950:#1a1623;--color-magenta-50:#fee4e5;--color-magenta-100:#fccfda;--color-magenta-150:#f9b9cf;--color-magenta-200:#f4a4c2;--color-magenta-300:#e47da8;--color-magenta-400:#ce5d97;--color-magenta-500:#b74583;--color-magenta-600:#a02f6f;--color-magenta-700:#87285e;--color-magenta-800:#641f46;--color-magenta-850:#4f1b39;--color-magenta-900:#39172b;--color-magenta-950:#24131d;--color-surface:light-dark(var(--color-paper),var(--color-black));--color-surface-muted:light-dark(var(--color-base-50),var(--color-base-950));--color-surface-strong:light-dark(var(--color-base-100),var(--color-base-900));--color-text:light-dark(var(--color-black),var(--color-base-200));--color-text-muted:light-dark(var(--color-base-600),var(--color-base-500));--color-border:light-dark(var(--color-base-150),var(--color-base-850));--color-border-strong:light-dark(var(--color-base-300),var(--color-base-700));--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:#0f0f0f66}
 @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));--color-primary-content:light-dark(var(--color-paper),var(--color-black));--color-link:light-dark(var(--color-blue-600),var(--color-blue-400));--color-link-hover:light-dark(var(--color-blue-700),var(--color-blue-300));--color-focus:light-dark(var(--color-blue-600),var(--color-blue-400));--color-system-accent:light-dark(var(--color-base-600),var(--color-base-400));--color-system-accent-hover:color-mix(in oklch, light-dark(var(--color-base-600),var(--color-base-400)), light-dark(var(--color-black),var(--color-base-200)) 12%)}
@@ -142,20 +142,29 @@
 :scope._ao-accordion-item[open]::details-content, :scope ._ao-accordion-item[open]::details-content{opacity:1;height:auto}
 :scope._ao-alert, :scope ._ao-alert{gap:calc(var(--spacing) * 1);border-radius:var(--radius-md);border-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);overflow-wrap:break-word;border-width:1px;flex-direction:column;display:flex}
 :scope._ao-alert:has(>:is(i,svg):first-child), :scope ._ao-alert:has(>:is(i,svg):first-child){grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.25rem .5rem;display:grid}
-:scope._ao-alert:has(>._ao-alert-action), :scope ._ao-alert:has(>._ao-alert-action){grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .5rem;display:grid}
-:scope._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-action), :scope ._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-action){grid-template-columns:auto minmax(0,1fr) auto}
+:scope._ao-alert:has(>._ao-alert-action), :scope ._ao-alert:has(>._ao-alert-action), :scope._ao-alert:has(>._ao-alert-dismiss), :scope ._ao-alert:has(>._ao-alert-dismiss){grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .5rem;display:grid}
+:scope._ao-alert:has(>._ao-alert-action):has(>._ao-alert-dismiss), :scope ._ao-alert:has(>._ao-alert-action):has(>._ao-alert-dismiss){grid-template-columns:minmax(0,1fr) auto auto}
+:scope._ao-alert:has(>:is(i,svg):first-child):is(:has(>._ao-alert-action),:has(>._ao-alert-dismiss)), :scope ._ao-alert:has(>:is(i,svg):first-child):is(:has(>._ao-alert-action),:has(>._ao-alert-dismiss)){grid-template-columns:auto minmax(0,1fr) auto}
+:scope._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-action):has(>._ao-alert-dismiss), :scope ._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-action):has(>._ao-alert-dismiss){grid-template-columns:auto minmax(0,1fr) auto auto}
 :scope._ao-alert>:is(i,svg):first-child, :scope ._ao-alert>:is(i,svg):first-child{font-size:1rem;line-height:1.25}
-:scope._ao-alert:has(>._ao-alert-title):is(:has(>:is(i,svg):first-child),:has(>._ao-alert-action)), :scope ._ao-alert:has(>._ao-alert-title):is(:has(>:is(i,svg):first-child),:has(>._ao-alert-action)){grid-template-rows:auto auto;align-items:start}
+:scope._ao-alert:has(>._ao-alert-title):is(:has(>:is(i,svg):first-child),:has(>._ao-alert-action),:has(>._ao-alert-dismiss)), :scope ._ao-alert:has(>._ao-alert-title):is(:has(>:is(i,svg):first-child),:has(>._ao-alert-action),:has(>._ao-alert-dismiss)){grid-template-rows:auto auto;align-items:start}
 :scope._ao-alert:has(>._ao-alert-title)>:is(i,svg):first-child, :scope ._ao-alert:has(>._ao-alert-title)>:is(i,svg):first-child{grid-row:1/-1}
 :scope._ao-alert>:is(._ao-alert-title,._ao-alert-description), :scope ._ao-alert>:is(._ao-alert-title,._ao-alert-description){min-width:0}
 :scope._ao-alert:has(>:is(i,svg):first-child)>:is(._ao-alert-title,._ao-alert-description), :scope ._ao-alert:has(>:is(i,svg):first-child)>:is(._ao-alert-title,._ao-alert-description){grid-column:2}
-:scope._ao-alert>._ao-alert-action, :scope ._ao-alert>._ao-alert-action{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;grid-area:1/-2/-1;place-self:center end}
+:scope._ao-alert>:is(._ao-alert-action,._ao-alert-dismiss), :scope ._ao-alert>:is(._ao-alert-action,._ao-alert-dismiss){grid-row:1/-1;place-self:center end}
+:scope._ao-alert>._ao-alert-action, :scope ._ao-alert>._ao-alert-action{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;grid-column:-2}
+:scope._ao-alert>._ao-alert-dismiss, :scope ._ao-alert>._ao-alert-dismiss{grid-column:-2}
+:scope._ao-alert:has(>._ao-alert-dismiss)>._ao-alert-action, :scope ._ao-alert:has(>._ao-alert-dismiss)>._ao-alert-action{grid-column:-3}
 :scope._ao-alert-info, :scope ._ao-alert-info{border-color:var(--color-info);background-color:var(--color-info);color:var(--color-info-content)}
 :scope._ao-alert-success, :scope ._ao-alert-success{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-success-content)}
 :scope._ao-alert-warning, :scope ._ao-alert-warning{border-color:var(--color-warning);background-color:var(--color-warning);color:var(--color-warning-content)}
 :scope._ao-alert-danger, :scope ._ao-alert-danger{border-color:var(--color-danger);background-color:var(--color-danger);color:var(--color-danger-content)}
 :scope._ao-alert-title, :scope ._ao-alert-title{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
 :scope._ao-alert-description, :scope ._ao-alert-description{opacity:.85}
+:scope._ao-alert-dismiss, :scope ._ao-alert-dismiss{margin-right:calc(var(--spacing) * -1);width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5);cursor:pointer;color:inherit;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:.15s;border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
+:scope._ao-alert-dismiss:focus-visible, :scope ._ao-alert-dismiss:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;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)){: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}
 @media (hover:hover){:scope._ao-alert ._ao-link:hover, :scope ._ao-alert ._ao-link:hover{color:currentColor;opacity:.85}}
 :scope._ao-alert ._ao-link:focus-visible, :scope ._ao-alert ._ao-link:focus-visible{outline-color:currentColor}
@@ -210,6 +219,7 @@
 :scope._ao-avatar-group, :scope ._ao-avatar-group{align-items:center;display:inline-flex}
 :scope._ao-avatar-group>._ao-avatar, :scope ._ao-avatar-group>._ao-avatar{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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-surface)}
 :scope._ao-avatar-group>._ao-avatar+._ao-avatar, :scope ._ao-avatar-group>._ao-avatar+._ao-avatar{margin-inline-start:calc(var(--spacing) * -2)}
+:scope._ao-avatar-more, :scope ._ao-avatar-more{background-color:var(--color-surface-strong);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
 :scope._ao-kbd, :scope ._ao-kbd{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-strong);vertical-align:middle;min-width:1.25em;height:1.4em;font-family:var(--font-mono);--tw-leading:1;white-space:nowrap;color:var(--color-text-muted);--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,);border-radius:.25rem;justify-content:center;align-items:center;padding-inline:.35em;font-size:.75em;line-height:1;display:inline-flex}
 :scope._ao-kbd-group, :scope ._ao-kbd-group{align-items:center;gap:calc(var(--spacing) * 1);vertical-align:middle;display:inline-flex}
 :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}
@@ -392,10 +402,36 @@
 :scope._ao-input-icon:has(>._ao-input-lg), :scope ._ao-input-icon:has(>._ao-input-lg){font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--input-icon-inset:calc(var(--spacing) * 4);--input-icon-pad:calc(var(--spacing) * 10)}
 :scope._ao-input-icon>:where(i,svg), :scope ._ao-input-icon>:where(i,svg){pointer-events:none;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y);position:absolute;top:50%}
 :scope._ao-input-icon>:where(i,svg):first-child, :scope ._ao-input-icon>:where(i,svg):first-child{left:var(--input-icon-inset)}
-:scope._ao-input-icon>._ao-input~:where(i,svg), :scope ._ao-input-icon>._ao-input~:where(i,svg){right:var(--input-icon-inset)}
+:scope._ao-input-icon>._ao-input~:where(i,svg,._ao-input-action), :scope ._ao-input-icon>._ao-input~:where(i,svg,._ao-input-action){right:var(--input-icon-inset)}
 :scope._ao-input-icon:has(>:where(i,svg):first-child)>._ao-input, :scope ._ao-input-icon:has(>:where(i,svg):first-child)>._ao-input{padding-left:var(--input-icon-pad)}
-:scope._ao-input-icon:has(>._ao-input~:where(i,svg))>._ao-input, :scope ._ao-input-icon:has(>._ao-input~:where(i,svg))>._ao-input{padding-right:var(--input-icon-pad)}
+:scope._ao-input-icon:has(>._ao-input~:where(i,svg,._ao-input-action))>._ao-input, :scope ._ao-input-icon:has(>._ao-input~:where(i,svg,._ao-input-action))>._ao-input{padding-right:var(--input-icon-pad)}
 :scope._ao-input-icon:has(>._ao-input:disabled)>:where(i,svg), :scope ._ao-input-icon:has(>._ao-input:disabled)>:where(i,svg){opacity:.5}
+:scope._ao-input-action, :scope ._ao-input-action{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;border-style:var(--tw-border-style);color:var(--color-text-muted);background-color:#0000;border-width:0;border-radius:.25rem;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%}
+@media (hover:hover){:scope._ao-input-action:hover, :scope ._ao-input-action:hover{color:var(--color-text)}}
+:scope._ao-input-action:focus-visible, :scope ._ao-input-action:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;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)){: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:.5}
+:scope._ao-number-input-root, :scope ._ao-number-input-root{display:contents}
+:scope._ao-number-input, :scope ._ao-number-input{border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);width:100%;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:.15s;align-items:stretch;transition-duration:.15s;display:inline-flex}
+:scope._ao-number-input:focus-within, :scope ._ao-number-input:focus-within{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
+:scope._ao-number-input:hover, :scope ._ao-number-input:hover{border-color:var(--color-border-strong)}
+:scope._ao-number-input-field, :scope ._ao-number-input-field{width:100%;min-width:calc(var(--spacing) * 0);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);text-align:right;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;color:var(--color-text);--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,);--tw-outline-style:none;background-color:#0000;border-width:0;outline-style:none;flex:1;line-height:1}
+:scope._ao-number-input-field::placeholder, :scope ._ao-number-input-field::placeholder{color:var(--color-text-muted)}
+:scope._ao-number-input-field:disabled, :scope ._ao-number-input-field:disabled{cursor:not-allowed;opacity:.5}
+: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{-webkit-appearance:none;margin:0}
+:scope._ao-number-input-field::-webkit-outer-spin-button, :scope ._ao-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
+:scope._ao-number-input-step, :scope ._ao-number-input-step{width:calc(var(--spacing) * 8);cursor:pointer;border-style:var(--tw-border-style);color:var(--color-text-muted);-webkit-user-select:none;user-select:none;background-color:#0000;border-width:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}
+@media (hover:hover){:scope._ao-number-input-step:hover, :scope ._ao-number-input-step:hover{background-color:var(--color-surface-muted);color:var(--color-text)}}
+:scope._ao-number-input-step:disabled, :scope ._ao-number-input-step:disabled{cursor:not-allowed;opacity:.5}
+: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);border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--color-border)}
+:scope._ao-number-input-step:last-child, :scope ._ao-number-input-step:last-child{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--color-border)}
+:scope._ao-number-input-step>:is(i,svg), :scope ._ao-number-input-step>:is(i,svg){font-size:.875rem}
+:scope._ao-number-input-sm ._ao-number-input-field, :scope ._ao-number-input-sm ._ao-number-input-field{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))}
+:scope._ao-number-input-sm ._ao-number-input-step, :scope ._ao-number-input-sm ._ao-number-input-step{width:calc(var(--spacing) * 7)}
+:scope._ao-number-input-lg ._ao-number-input-field, :scope ._ao-number-input-lg ._ao-number-input-field{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))}
+:scope._ao-number-input-lg ._ao-number-input-step, :scope ._ao-number-input-lg ._ao-number-input-step{width:calc(var(--spacing) * 9)}
 :scope._ao-textarea, :scope ._ao-textarea{min-height:calc(var(--spacing) * 20);resize:vertical;border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);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:.15s;transition-duration:.15s;display:block}
 :scope._ao-textarea::placeholder, :scope ._ao-textarea::placeholder{color:var(--color-text-muted)}
 @media (hover:hover){:scope._ao-textarea:hover, :scope ._ao-textarea:hover{border-color:var(--color-border-strong)}}
@@ -528,11 +564,56 @@
 :scope._ao-stat-card-label>:is(i,svg), :scope ._ao-stat-card-label>:is(i,svg){flex-shrink:0}
 :scope._ao-stat-card-value, :scope ._ao-stat-card-value{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--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,)}
 :scope._ao-stat-card-detail, :scope ._ao-stat-card-detail{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted)}
+:scope._ao-stat-card-trend, :scope ._ao-stat-card-trend{align-items:center;gap:calc(var(--spacing) * 1);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-text-muted);--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,);display:inline-flex}
+:scope._ao-stat-card-trend:before, :scope ._ao-stat-card-trend:before{content:"";border-block-end:.42em solid;border-inline:.3em solid #0000;width:0;height:0}
+:scope._ao-stat-card-trend[data-trend=down]:before, :scope ._ao-stat-card-trend[data-trend=down]:before{border-block-start:.42em solid;border-block-end:0}
+:scope._ao-stat-card-trend[data-trend=flat]:before, :scope ._ao-stat-card-trend[data-trend=flat]:before{border:0;border-block-start:.16em solid;width:.55em}
+:scope._ao-stat-card-trend[data-intent=positive], :scope ._ao-stat-card-trend[data-intent=positive]{color:var(--color-success)}
+:scope._ao-stat-card-trend[data-intent=negative], :scope ._ao-stat-card-trend[data-intent=negative]{color:var(--color-danger)}
+:scope._ao-stat-card-trend[data-intent=neutral], :scope ._ao-stat-card-trend[data-intent=neutral]{color:var(--color-text-muted)}
 :scope._ao-card-compact._ao-stat-card, :scope ._ao-card-compact._ao-stat-card{gap:calc(var(--spacing) * .5);padding:calc(var(--spacing) * 3)}
 :scope._ao-card-primary ._ao-stat-card-value, :scope ._ao-card-primary ._ao-stat-card-value{color:var(--color-primary)}
 :scope._ao-card-info ._ao-stat-card-value, :scope ._ao-card-info ._ao-stat-card-value{color:var(--color-info)}
 :scope._ao-card-success ._ao-stat-card-value, :scope ._ao-card-success ._ao-stat-card-value{color:var(--color-success)}
 :scope._ao-card-danger ._ao-stat-card-value, :scope ._ao-card-danger ._ao-stat-card-value{color:var(--color-danger)}
+:scope._ao-item, :scope ._ao-item{align-items:center;gap:calc(var(--spacing) * 3);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);display:flex}
+:scope._ao-item-media, :scope ._ao-item-media{color:var(--color-text-muted);flex-shrink:0;align-items:center;display:flex}
+:scope._ao-item-media>:is(i,svg), :scope ._ao-item-media>:is(i,svg){font-size:1.25rem}
+:scope._ao-item-content, :scope ._ao-item-content{min-width:calc(var(--spacing) * 0);gap:calc(var(--spacing) * .5);flex-direction:column;flex:1;display:flex}
+:scope._ao-item-title, :scope ._ao-item-title{--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);overflow-wrap:break-word}
+:scope._ao-item-description, :scope ._ao-item-description{--tw-leading:var(--leading-snug);line-height:var(--leading-snug);color:var(--color-text-muted);text-wrap:pretty}
+:scope._ao-item-actions, :scope ._ao-item-actions{z-index:1;align-items:center;gap:calc(var(--spacing) * 2);flex-shrink:0;margin-inline-start:auto;display:flex;position:relative}
+:scope._ao-item-outline, :scope ._ao-item-outline{border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border)}
+:scope._ao-item-muted, :scope ._ao-item-muted{border-radius:var(--radius-lg);background-color:var(--color-surface-muted)}
+:scope._ao-item-sm, :scope ._ao-item-sm{gap:calc(var(--spacing) * 2);padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
+:scope._ao-item-lg, :scope ._ao-item-lg{gap:calc(var(--spacing) * 4);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}
+:scope._ao-item-group, :scope ._ao-item-group{flex-direction:column;display:flex}
+:scope._ao-item-group>._ao-item:not(:last-child), :scope ._ao-item-group>._ao-item:not(:last-child){border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border)}
+:scope._ao-item-group-bordered, :scope ._ao-item-group-bordered{border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);overflow:hidden}
+:scope._ao-item-link, :scope ._ao-item-link{cursor:pointer;position:relative}
+:scope._ao-item-link:hover, :scope ._ao-item-link:hover{background-color:var(--color-surface-muted)}
+:scope._ao-item-link a:first-of-type:after, :scope ._ao-item-link a:first-of-type:after{content:"";inset:calc(var(--spacing) * 0);position:absolute}
+:scope._ao-item-link:focus-within, :scope ._ao-item-link:focus-within{outline-style:var(--tw-outline-style);outline-offset:calc(2px * -1);outline-width:2px;outline-color:var(--color-focus)}
+:scope._ao-timeline, :scope ._ao-timeline{margin:0;padding:0;list-style:none}
+:scope._ao-timeline-item, :scope ._ao-timeline-item{grid-template-columns:1.5rem 1fr;column-gap:.75rem;padding-bottom:1rem;display:grid;position:relative}
+:scope._ao-timeline-item:last-child, :scope ._ao-timeline-item:last-child{padding-bottom:0}
+:scope._ao-timeline-item:not(:last-child):before, :scope ._ao-timeline-item:not(:last-child):before{content:"";background-color:var(--color-border);width:2px;position:absolute;inset-block:.75rem 0;inset-inline-start:.75rem;transform:translate(-50%)}
+:scope._ao-timeline-indicator, :scope ._ao-timeline-indicator{z-index:1;grid-column:1;justify-content:center;align-self:start;align-items:center;height:1.5rem;display:flex;position:relative}
+:scope._ao-timeline-dot, :scope ._ao-timeline-dot{background-color:var(--color-border-strong);width:.625rem;height:.625rem;box-shadow:0 0 0 3px var(--color-surface);border-radius:9999px;display:inline-block}
+:scope._ao-timeline-indicator>:is(i,svg), :scope ._ao-timeline-indicator>:is(i,svg){color:var(--color-text-muted);background-color:var(--color-surface);border-radius:9999px;font-size:1rem}
+:scope._ao-timeline-content, :scope ._ao-timeline-content{flex-direction:column;grid-column:2;gap:.125rem;min-width:0;padding-block:.125rem 0;display:flex}
+:scope._ao-timeline-title, :scope ._ao-timeline-title{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-text)}
+:scope._ao-timeline-time, :scope ._ao-timeline-time{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted);--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,)}
+:scope._ao-timeline-description, :scope ._ao-timeline-description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted);text-wrap:pretty}
+:scope._ao-timeline-item-info ._ao-timeline-dot, :scope ._ao-timeline-item-info ._ao-timeline-dot{background-color:var(--color-info)}
+:scope._ao-timeline-item-success ._ao-timeline-dot, :scope ._ao-timeline-item-success ._ao-timeline-dot{background-color:var(--color-success)}
+:scope._ao-timeline-item-warning ._ao-timeline-dot, :scope ._ao-timeline-item-warning ._ao-timeline-dot{background-color:var(--color-warning)}
+:scope._ao-timeline-item-danger ._ao-timeline-dot, :scope ._ao-timeline-item-danger ._ao-timeline-dot{background-color:var(--color-danger)}
+:scope._ao-timeline-numbered ._ao-timeline-item, :scope ._ao-timeline-numbered ._ao-timeline-item{grid-template-columns:1.75rem 1fr}
+:scope._ao-timeline-numbered ._ao-timeline-item:not(:last-child):before, :scope ._ao-timeline-numbered ._ao-timeline-item:not(:last-child):before{inset-block:1.75rem 0;inset-inline-start:.875rem}
+:scope._ao-timeline-numbered ._ao-timeline-indicator, :scope ._ao-timeline-numbered ._ao-timeline-indicator{height:1.75rem}
+:scope._ao-timeline-marker, :scope ._ao-timeline-marker{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7);background-color:var(--color-surface-strong);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);--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,);box-shadow:0 0 0 3px var(--color-surface);border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex}
+:scope._ao-timeline-item-success ._ao-timeline-marker, :scope ._ao-timeline-item-success ._ao-timeline-marker, :scope._ao-timeline-item-current ._ao-timeline-marker, :scope ._ao-timeline-item-current ._ao-timeline-marker{background-color:var(--color-primary);color:var(--color-primary-content)}
 :scope._ao-dialog, :scope ._ao-dialog{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);padding:calc(var(--spacing) * 0);color:var(--color-text);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);overflow-wrap:break-word;opacity:1;width:calc(100% - 2rem);max-width:32rem;max-height:calc(100dvh - 2rem);transition:display .15s allow-discrete, overlay .15s allow-discrete, opacity .15s ease-out, transform .15s ease-out;flex-direction:column;margin:auto;transform:translateY(0)scale(1)}
 :scope._ao-dialog[open], :scope ._ao-dialog[open]{display:flex}
 :scope._ao-dialog::backdrop, :scope ._ao-dialog::backdrop{background:var(--color-scrim);transition:display .15s allow-discrete, overlay .15s allow-discrete, background .15s ease-out}
@@ -548,6 +629,19 @@
 :scope._ao-dialog-close, :scope ._ao-dialog-close{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7);cursor:pointer;border-radius:var(--radius-md);color:var(--color-text-muted);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:.15s;background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
 @media (hover:hover){:scope._ao-dialog-close:hover, :scope ._ao-dialog-close:hover{background-color:var(--color-surface-strong);color:var(--color-text)}}
 :scope._ao-dialog-close:focus-visible, :scope ._ao-dialog-close:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
+:scope._ao-drawer, :scope ._ao-drawer{border-radius:0;width:min(28rem,100vw);max-width:none;height:100dvh;max-height:none;margin:0;margin-inline-start:auto;transform:translate(100%)}
+:scope._ao-drawer[open], :scope ._ao-drawer[open]{transform:translate(0)}
+@starting-style{:scope._ao-drawer[open], :scope ._ao-drawer[open]{transform:translate(100%)}}
+:scope._ao-drawer-start, :scope ._ao-drawer-start{margin-inline:0 auto;transform:translate(-100%)}
+@starting-style{:scope._ao-drawer-start[open], :scope ._ao-drawer-start[open]{transform:translate(-100%)}}
+:scope._ao-drawer-bottom, :scope ._ao-drawer-bottom{width:100vw;height:auto;max-height:85dvh;margin-block-start:auto;margin-inline:0;transform:translateY(100%)}
+:scope._ao-drawer-bottom[open], :scope ._ao-drawer-bottom[open]{transform:translateY(0)}
+@starting-style{:scope._ao-drawer-bottom[open], :scope ._ao-drawer-bottom[open]{transform:translateY(100%)}}
+:scope._ao-drawer-sm, :scope ._ao-drawer-sm{width:min(20rem,100vw)}
+:scope._ao-drawer-lg, :scope ._ao-drawer-lg{width:min(36rem,100vw)}
+:scope._ao-drawer-bottom._ao-drawer-sm, :scope ._ao-drawer-bottom._ao-drawer-sm{width:100vw;max-height:50dvh}
+:scope._ao-drawer-bottom._ao-drawer-lg, :scope ._ao-drawer-bottom._ao-drawer-lg{width:100vw;max-height:95dvh}
+@media (prefers-reduced-motion:reduce){:scope._ao-drawer, :scope ._ao-drawer{transition:display .15s allow-discrete, overlay .15s allow-discrete, opacity .15s ease-out}}
 :scope._ao-field, :scope ._ao-field{gap:calc(var(--spacing) * 1.5);overflow-wrap:break-word;flex-direction:column;display:flex}
 :scope._ao-field-row, :scope ._ao-field-row{align-items:center;gap:calc(var(--spacing) * 3);flex-direction:row}
 :scope._ao-field-label, :scope ._ao-field-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-medium);line-height:1;font-weight:var(--font-weight-medium);color:var(--color-text)}
@@ -614,6 +708,9 @@
 :scope._ao-menu-item, :scope ._ao-menu-item{overflow-wrap:break-word;min-width:0}
 :scope._ao-menu-item[aria-disabled=true], :scope ._ao-menu-item[aria-disabled=true]{cursor:not-allowed;opacity:.5}
 :scope._ao-menu-trigger>:is(i,svg), :scope ._ao-menu-trigger>:is(i,svg), :scope._ao-menu-item>:is(i,svg), :scope ._ao-menu-item>:is(i,svg){flex-shrink:0}
+:scope._ao-menu-item-indicator, :scope ._ao-menu-item-indicator{flex-shrink:0;justify-content:center;align-items:center;block-size:1rem;inline-size:1rem;display:inline-flex}
+:scope._ao-menu-item-indicator>:is(i,svg), :scope ._ao-menu-item-indicator>:is(i,svg){opacity:0}
+:scope._ao-menu-item[aria-checked=true] ._ao-menu-item-indicator>:is(i,svg), :scope ._ao-menu-item[aria-checked=true] ._ao-menu-item-indicator>:is(i,svg){opacity:1}
 :scope._ao-menu-separator, :scope ._ao-menu-separator{margin-block:calc(var(--spacing) * 1);border-style:var(--tw-border-style);background-color:var(--color-border);border-width:0;height:1px}
 :scope._ao-menu-group, :scope ._ao-menu-group{flex-direction:column;display:flex}
 :scope._ao-menu-group-label, :scope ._ao-menu-group-label{padding-inline:calc(var(--spacing) * 3);padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide);color:var(--color-text-muted);text-transform:uppercase}
@@ -727,6 +824,14 @@
 :scope._ao-table-row-link:hover :where(td), :scope ._ao-table-row-link:hover :where(td){background-color:var(--color-surface-muted)}
 :scope._ao-table-row-link a:first-of-type:after, :scope ._ao-table-row-link a:first-of-type:after{content:"";inset:calc(var(--spacing) * 0);position:absolute}
 :scope._ao-table-row-link:focus-within, :scope ._ao-table-row-link:focus-within{outline-style:var(--tw-outline-style);outline-offset:calc(2px * -1);outline-width:2px;outline-color:var(--color-focus)}
+:scope._ao-table-compact :where(th,td), :scope ._ao-table-compact :where(th,td), :scope._ao-table-compact ._ao-table-cell, :scope ._ao-table-compact ._ao-table-cell, :scope._ao-table-compact ._ao-table-header-cell, :scope ._ao-table-compact ._ao-table-header-cell{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))}
+:scope._ao-table :where(td)._ao-table-empty, :scope ._ao-table :where(td)._ao-table-empty, :scope._ao-table-empty, :scope ._ao-table-empty{padding-block:calc(var(--spacing) * 8);text-align:center;color:var(--color-text-muted)}
+:scope._ao-table tbody tr:has(>._ao-table-empty):hover :where(td), :scope ._ao-table tbody tr:has(>._ao-table-empty):hover :where(td){background-color:#0000}
+:scope._ao-table-pin-col :where(thead th,tbody td,tfoot :is(td,th)):first-child, :scope ._ao-table-pin-col :where(thead th,tbody td,tfoot :is(td,th)):first-child{position:sticky;inset-inline-start:0}
+:scope._ao-table-pin-col tbody td:first-child, :scope ._ao-table-pin-col tbody td:first-child{z-index:1;background-color:var(--color-surface)}
+:scope._ao-table-pin-col :where(thead th):first-child, :scope ._ao-table-pin-col :where(thead th):first-child{z-index:11}
+:scope._ao-table-pin-col._ao-table-striped tbody tr:nth-child(2n) td:first-child, :scope ._ao-table-pin-col._ao-table-striped tbody tr:nth-child(2n) td:first-child, :scope._ao-table-pin-col tbody tr:hover td:first-child, :scope ._ao-table-pin-col tbody tr:hover td:first-child{background-color:var(--color-surface-muted)}
+:scope._ao-table-pin-col tbody tr:has(input[type=checkbox]:checked) td:first-child, :scope ._ao-table-pin-col tbody tr:has(input[type=checkbox]:checked) td:first-child, :scope._ao-table-pin-col tbody tr:has(._ao-checkbox[data-checked]) td:first-child, :scope ._ao-table-pin-col tbody tr:has(._ao-checkbox[data-checked]) td:first-child, :scope._ao-table-pin-col tbody tr[data-selected] td:first-child, :scope ._ao-table-pin-col tbody tr[data-selected] td:first-child{background-color:var(--color-primary-muted)}
 :scope._ao-tooltip, :scope ._ao-tooltip{pointer-events:none;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,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);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;display:inline-block}
 :scope._ao-tooltip-sm, :scope ._ao-tooltip-sm{padding-inline:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * .5)}
 :scope._ao-tooltip, :scope ._ao-tooltip{transition:opacity .15s ease-out,transform .15s ease-out}
@@ -830,4 +935,5 @@
 :scope._ao-text-right, :scope ._ao-text-right{text-align:right}
 :scope._ao-tabular-nums, :scope ._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,)}
 :scope._ao-ring, :scope ._ao-ring{--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)}
+:scope._ao-outline, :scope ._ao-outline{outline-style:var(--tw-outline-style);outline-width:1px}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
   "keywords": [
     "components",
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@tailwindcss/cli": "4.3.0",
     "postcss": "8.5.15",
+    "postcss-nesting": "14.0.0",
     "postcss-selector-parser": "6.1.2",
     "tailwindcss": "4.3.0",
     "vitest": "4.1.6"

package/src/components/alert.css

@@ -14,17 +14,26 @@
     align-items: center;
   }
 
-  /* A trailing action switches to grid even without an icon. */
-  .alert:has(> .alert-action) {
+  /* A trailing action or dismiss switches to grid even without an icon. */
+  .alert:has(> .alert-action),
+  .alert:has(> .alert-dismiss) {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     column-gap: 0.5rem;
     row-gap: 0.25rem;
     align-items: center;
   }
-  .alert:has(> :is(i, svg):first-child):has(> .alert-action) {
+  /* Action + dismiss together need two trailing columns. */
+  .alert:has(> .alert-action):has(> .alert-dismiss) {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+  }
+  /* A leading icon prepends an auto column to whichever trailing layout applies. */
+  .alert:has(> :is(i, svg):first-child):is(:has(> .alert-action), :has(> .alert-dismiss)) {
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
+  .alert:has(> :is(i, svg):first-child):has(> .alert-action):has(> .alert-dismiss) {
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+  }
 
   .alert > :is(i, svg):first-child {
     font-size: 1rem;
@@ -32,7 +41,11 @@
   }
 
   /* Replaces the icon-gated explicit-rows rule — rows whenever anything spans them. */
-  .alert:has(> .alert-title):is(:has(> :is(i, svg):first-child), :has(> .alert-action)) {
+  .alert:has(> .alert-title):is(
+      :has(> :is(i, svg):first-child),
+      :has(> .alert-action),
+      :has(> .alert-dismiss)
+    ) {
     grid-template-rows: auto auto;
     align-items: start;
   }
@@ -50,14 +63,24 @@
     grid-column: 2;
   }
 
-  /* `-2` is the last explicit column in both grids; spans both rows, centered. */
-  .alert > .alert-action {
-    @apply font-medium whitespace-nowrap;
-    grid-column: -2;
+  /* Trailing controls pin to the last column(s), spanning both rows, centered.
+     `-2` is the last column in the single-trailing grids; with both present the
+     dismiss keeps `-2` and the action shifts one column left to `-3`. */
+  .alert > :is(.alert-action, .alert-dismiss) {
     grid-row: 1 / -1;
     justify-self: end;
     align-self: center;
   }
+  .alert > .alert-action {
+    @apply font-medium whitespace-nowrap;
+    grid-column: -2;
+  }
+  .alert > .alert-dismiss {
+    grid-column: -2;
+  }
+  .alert:has(> .alert-dismiss) > .alert-action {
+    grid-column: -3;
+  }
 
   /* Solid status fills. Title and icon inherit the `-content` color from the
      root, so no per-variant text rule is needed. */
@@ -85,6 +108,19 @@
     opacity: 0.85;
   }
 
+  /* Dismiss button — currentColor hover wash works on the solid fills (where
+     text is `-content`) and the bordered neutral alert alike, like badge-remove. */
+  .alert-dismiss {
+    @apply inline-flex items-center justify-center shrink-0
+           size-5 -mr-1 rounded
+           text-inherit cursor-pointer
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus;
+  }
+  .alert-dismiss:hover {
+    background-color: color-mix(in oklab, currentColor 15%, transparent);
+  }
+
   /* `.link`'s blue is illegible on the solid fills; inherit the variant's content
      color. Underline + weight carry the affordance. */
   .alert .link {

package/src/components/avatar.css

@@ -33,4 +33,10 @@
   .avatar-group > .avatar + .avatar {
     @apply -ms-2;
   }
+
+  /* Surplus tile closing an overflowing group (e.g. "+3"). */
+  .avatar-more {
+    @apply bg-surface-strong text-text-muted font-medium;
+    font-variant-numeric: tabular-nums;
+  }
 }

package/src/components/drawer.css

@@ -0,0 +1,81 @@
+@layer components {
+  /* A Dialog variant: the same native <dialog> machinery (showModal, ::backdrop,
+     @starting-style, allow-discrete transitions), edge-anchored instead of
+     centred. `.drawer` overrides `.dialog`'s centring; it imports after dialog.css
+     so equal-specificity rules win. The base opacity fade still applies. */
+  .drawer {
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    border-radius: 0;
+    height: 100dvh;
+    width: min(28rem, 100vw);
+    /* Default: anchored to the inline-end (right in LTR) edge. */
+    margin-inline-start: auto;
+    transform: translateX(100%);
+  }
+  .drawer[open] {
+    transform: translateX(0);
+  }
+  @starting-style {
+    .drawer[open] {
+      transform: translateX(100%);
+    }
+  }
+
+  /* Inline-start (left in LTR) edge. */
+  .drawer-start {
+    margin-inline-start: 0;
+    margin-inline-end: auto;
+    transform: translateX(-100%);
+  }
+  @starting-style {
+    .drawer-start[open] {
+      transform: translateX(-100%);
+    }
+  }
+
+  /* Bottom sheet. */
+  .drawer-bottom {
+    width: 100vw;
+    height: auto;
+    max-height: 85dvh;
+    margin-block-start: auto;
+    margin-inline: 0;
+    transform: translateY(100%);
+  }
+  .drawer-bottom[open] {
+    transform: translateY(0);
+  }
+  @starting-style {
+    .drawer-bottom[open] {
+      transform: translateY(100%);
+    }
+  }
+
+  /* Sizes adjust the cross-axis extent. */
+  .drawer-sm {
+    width: min(20rem, 100vw);
+  }
+  .drawer-lg {
+    width: min(36rem, 100vw);
+  }
+  .drawer-bottom.drawer-sm {
+    width: 100vw;
+    max-height: 50dvh;
+  }
+  .drawer-bottom.drawer-lg {
+    width: 100vw;
+    max-height: 95dvh;
+  }
+
+  /* Slide is decorative — drop it under reduced motion, keep the opacity fade. */
+  @media (prefers-reduced-motion: reduce) {
+    .drawer {
+      transition:
+        display 150ms allow-discrete,
+        overlay 150ms allow-discrete,
+        opacity 150ms ease-out;
+    }
+  }
+}

package/src/components/index.css

@@ -19,6 +19,7 @@
 @import "./input.css";
 @import "./input-group.css";
 @import "./input-icon.css";
+@import "./number-input.css";
 @import "./textarea.css";
 @import "./checkbox.css";
 @import "./radio.css";
@@ -26,7 +27,10 @@
 @import "./select.css";
 @import "./card.css";
 @import "./stat-card.css";
+@import "./item.css";
+@import "./timeline.css";
 @import "./dialog.css";
+@import "./drawer.css";
 @import "./field.css";
 @import "./file-input.css";
 @import "./footer.css";

package/src/components/input-icon.css

@@ -19,7 +19,7 @@
     --input-icon-pad: calc(var(--spacing) * 10);
   }
 
-  /* Clicks pass through the icon to the input beneath it. */
+  /* Decorative glyphs pass clicks through; an interactive trailing button doesn't. */
   .input-icon > :where(i, svg) {
     @apply absolute top-1/2 -translate-y-1/2 pointer-events-none;
   }
@@ -28,7 +28,8 @@
     left: var(--input-icon-inset);
   }
 
-  .input-icon > .input ~ :where(i, svg) {
+  /* Trailing slot — a glyph or an interactive `.input-action` button after the input. */
+  .input-icon > .input ~ :where(i, svg, .input-action) {
     right: var(--input-icon-inset);
   }
 
@@ -36,11 +37,29 @@
     padding-left: var(--input-icon-pad);
   }
 
-  .input-icon:has(> .input ~ :where(i, svg)) > .input {
+  .input-icon:has(> .input ~ :where(i, svg, .input-action)) > .input {
     padding-right: var(--input-icon-pad);
   }
 
   .input-icon:has(> .input:disabled) > :where(i, svg) {
     @apply opacity-50;
   }
+
+  /* Interactive trailing control (clear, password reveal). Positioned like the
+     trailing glyph but clickable, with a currentColor hover wash. */
+  .input-action {
+    @apply absolute top-1/2 -translate-y-1/2
+           inline-flex items-center justify-center
+           size-5 rounded
+           text-text-muted cursor-pointer
+           bg-transparent border-0
+           hover:text-text
+           focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus;
+  }
+  .input-action:hover {
+    background-color: color-mix(in oklab, currentColor 12%, transparent);
+  }
+  .input-icon:has(> .input:disabled) > .input-action {
+    @apply opacity-50 pointer-events-none;
+  }
 }

package/src/components/item.css

@@ -0,0 +1,76 @@
+@layer components {
+  /* Compact low-chrome row between Table and Card: media | content | actions.
+     For settings rows, member lists, notifications, search results. */
+  .item {
+    @apply flex items-center gap-3 w-full px-3 py-2 text-sm text-text;
+  }
+
+  .item-media {
+    @apply flex items-center shrink-0 text-text-muted;
+  }
+  .item-media > :is(i, svg) {
+    font-size: 1.25rem;
+  }
+
+  /* min-w-0 lets the text column shrink so long values wrap instead of pushing
+     the actions off the row. */
+  .item-content {
+    @apply flex flex-col gap-0.5 flex-1 min-w-0;
+  }
+  .item-title {
+    @apply font-medium leading-tight;
+    overflow-wrap: break-word;
+  }
+  .item-description {
+    @apply text-text-muted leading-snug;
+    text-wrap: pretty;
+  }
+
+  .item-actions {
+    @apply flex items-center gap-2 shrink-0 relative z-[1];
+    margin-inline-start: auto;
+  }
+
+  /* Variants — keep it flat: default / outline / muted only. */
+  .item-outline {
+    @apply border border-border rounded-lg;
+  }
+  .item-muted {
+    @apply bg-surface-muted rounded-lg;
+  }
+
+  /* Sizes */
+  .item-sm {
+    @apply gap-2 px-2 py-1.5 text-xs;
+  }
+  .item-lg {
+    @apply gap-4 px-4 py-3 text-base;
+  }
+
+  /* Divided stack. */
+  .item-group {
+    @apply flex flex-col;
+  }
+  .item-group > .item:not(:last-child) {
+    @apply border-b border-border;
+  }
+  .item-group-bordered {
+    @apply border border-border rounded-lg overflow-hidden;
+  }
+
+  /* Clickable row — the first nested <a> fills the row via ::after; actions keep
+     their own stacking context so they stay clickable (same trick as table-row-link). */
+  .item-link {
+    @apply relative cursor-pointer;
+  }
+  .item-link:hover {
+    @apply bg-surface-muted;
+  }
+  .item-link a:first-of-type::after {
+    content: "";
+    @apply absolute inset-0;
+  }
+  .item-link:focus-within {
+    @apply outline-2 -outline-offset-2 outline-focus;
+  }
+}

package/src/components/menu.css

@@ -102,6 +102,21 @@
     flex-shrink: 0;
   }
 
+  /* Checkbox/radio items — a leading indicator column whose check shows only when
+     aria-checked. In vanilla, set role=menuitemcheckbox/menuitemradio + aria-checked;
+     the gutter is always reserved so labels stay aligned across the group. */
+  .menu-item-indicator {
+    @apply inline-flex items-center justify-center shrink-0;
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+  .menu-item-indicator > :is(i, svg) {
+    opacity: 0;
+  }
+  .menu-item[aria-checked="true"] .menu-item-indicator > :is(i, svg) {
+    opacity: 1;
+  }
+
   .menu-separator {
     @apply h-px my-1 bg-border border-0;
   }