@aortl/admin-css 0.15.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -64,7 +64,9 @@
64
64
  :scope[data-theme=dark], :scope [data-theme=dark]{color-scheme:dark}
65
65
  :scope[data-theme=light], :scope [data-theme=light]{color-scheme:light}
66
66
  @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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-tracking:initial}}
67
- :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-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--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-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%)}
67
+ :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-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}
68
+ @supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-scrim:color-mix(in oklab, var(--color-black) 40%, transparent)}}
69
+ :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%)}
68
70
  @supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-system-accent-hover:color-mix(in oklch, var(--color-system-accent), var(--color-text) 12%)}}
69
71
  :scope, :scope:host, :scope :host{--color-system-accent-muted:color-mix(in oklch, light-dark(var(--color-base-600),var(--color-base-400)) 12%, light-dark(var(--color-paper),var(--color-black)))}
70
72
  @supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-system-accent-muted:color-mix(in oklch, var(--color-system-accent) 12%, var(--color-surface))}}
@@ -173,7 +175,7 @@
173
175
  :scope._ao-badge-sm, :scope ._ao-badge-sm{height:calc(var(--spacing) * 4);gap:calc(var(--spacing) * .5);padding-inline:calc(var(--spacing) * 1.5);font-size:.625rem}
174
176
  :scope._ao-badge-lg, :scope ._ao-badge-lg{height:calc(var(--spacing) * 6);gap:calc(var(--spacing) * 1.5);padding-inline:calc(var(--spacing) * 2.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
175
177
  :scope._ao-brand-tile, :scope ._ao-brand-tile{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);background-color:var(--color-system-accent);--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);font-size:11px;line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-system-accent-content);-webkit-user-select:none;user-select:none;border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}
176
- :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);font-variant-numeric:tabular-nums;border-radius:.25rem;justify-content:center;align-items:center;padding-inline:.35em;font-size:.75em;line-height:1;display:inline-flex}
178
+ :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}
177
179
  :scope._ao-kbd-group, :scope ._ao-kbd-group{align-items:center;gap:calc(var(--spacing) * 1);vertical-align:middle;display:inline-flex}
178
180
  :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}
179
181
  @supports (color:color-mix(in lab, red, red)){:scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd{background-color:color-mix(in srgb, currentColor 12%, transparent)}}
@@ -243,11 +245,11 @@
243
245
  :scope._ao-property-list, :scope ._ao-property-list{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);flex-direction:column;display:flex}
244
246
  :scope._ao-property-list-title, :scope ._ao-property-list-title{margin-bottom:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-text)}
245
247
  :scope._ao-property-list-items, :scope ._ao-property-list-items{grid-template-columns:max-content 1fr;display:grid}
246
- :scope._ao-property-list-label, :scope ._ao-property-list-label, :scope._ao-property-list-value, :scope ._ao-property-list-value{align-items:center;min-height:2rem;padding:.375rem .75rem;display:flex}
248
+ :scope._ao-property-list-label, :scope ._ao-property-list-label, :scope._ao-property-list-value, :scope ._ao-property-list-value{min-height:calc(var(--spacing) * 8);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);align-items:center;display:flex}
247
249
  :scope._ao-property-list-label, :scope ._ao-property-list-label{color:var(--color-text-muted)}
248
- :scope._ao-property-list-value, :scope ._ao-property-list-value{overflow-wrap:break-word;gap:.5rem;min-width:0}
250
+ :scope._ao-property-list-value, :scope ._ao-property-list-value{min-width:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 2);overflow-wrap:break-word}
249
251
  :scope._ao-property-list-compact ._ao-property-list-title, :scope ._ao-property-list-compact ._ao-property-list-title{margin-bottom:calc(var(--spacing) * 1)}
250
- :scope._ao-property-list-compact ._ao-property-list-label, :scope ._ao-property-list-compact ._ao-property-list-label, :scope._ao-property-list-compact ._ao-property-list-value, :scope ._ao-property-list-compact ._ao-property-list-value{min-height:1.5rem;padding:.125rem .5rem}
252
+ :scope._ao-property-list-compact ._ao-property-list-label, :scope ._ao-property-list-compact ._ao-property-list-label, :scope._ao-property-list-compact ._ao-property-list-value, :scope ._ao-property-list-compact ._ao-property-list-value{min-height:calc(var(--spacing) * 6);padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * .5)}
251
253
  :scope._ao-property-list-value-numeric, :scope ._ao-property-list-value-numeric{--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,);justify-content:flex-end}
252
254
  :scope._ao-property-list-striped dt:nth-of-type(2n+2), :scope ._ao-property-list-striped dt:nth-of-type(2n+2), :scope._ao-property-list-striped dd:nth-of-type(2n+2), :scope ._ao-property-list-striped dd:nth-of-type(2n+2){background-color:var(--color-surface-muted)}
253
255
  :scope._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))), :scope ._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))){display:none}
@@ -296,14 +298,14 @@
296
298
  :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:first-child>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:first-child>._ao-menu-trigger{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}
297
299
  :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:last-child>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:last-child>._ao-menu-trigger{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}
298
300
  :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger{border-left-color:currentColor}
299
- @supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger{border-left-color:color-mix(in srgb, currentColor 25%, transparent)}}
301
+ @supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger{border-left-color:color-mix(in oklab, currentColor 25%, transparent)}}
300
302
  :scope._ao-btn-group-vertical, :scope ._ao-btn-group-vertical{flex-direction:column;display:inline-flex}
301
303
  :scope._ao-btn-group-vertical>._ao-btn, :scope ._ao-btn-group-vertical>._ao-btn{justify-content:flex-start}
302
304
  :scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child), :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child){margin-top:-1px}
303
305
  :scope._ao-btn-group-vertical>._ao-btn:first-child, :scope ._ao-btn-group-vertical>._ao-btn:first-child, :scope._ao-btn-group-vertical>._ao-menu:first-child>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:first-child>._ao-menu-trigger{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}
304
306
  :scope._ao-btn-group-vertical>._ao-btn:last-child, :scope ._ao-btn-group-vertical>._ao-btn:last-child, :scope._ao-btn-group-vertical>._ao-menu:last-child>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:last-child>._ao-menu-trigger{border-bottom-right-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}
305
307
  :scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger{border-top-color:currentColor}
306
- @supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger{border-top-color:color-mix(in srgb, currentColor 25%, transparent)}}
308
+ @supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger{border-top-color:color-mix(in oklab, currentColor 25%, transparent)}}
307
309
  :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical), :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical){width:100%;display:flex}
308
310
  :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-menu{flex:1}
309
311
  :scope._ao-btn-group-full-width._ao-btn-group-vertical, :scope ._ao-btn-group-full-width._ao-btn-group-vertical{width:100%}
@@ -374,6 +376,12 @@
374
376
  @media (hover:hover){:scope:is(._ao-checkbox[data-checked],._ao-checkbox[data-indeterminate]):hover, :scope :is(._ao-checkbox[data-checked],._ao-checkbox[data-indeterminate]):hover{background-color:var(--color-primary-hover)}}
375
377
  :scope._ao-checkbox[data-disabled], :scope ._ao-checkbox[data-disabled]{cursor:not-allowed;opacity:.5}
376
378
  :scope._ao-checkbox-indicator, :scope ._ao-checkbox-indicator{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);color:var(--color-primary-content);justify-content:center;align-items:center;display:inline-flex}
379
+ :scope input._ao-checkbox{appearance:none;border-color:var(--color-border-strong)}
380
+ @media (hover:hover){:scope input._ao-checkbox:hover{border-color:var(--color-text-muted)}}
381
+ :scope input._ao-checkbox{--checkbox-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
382
+ :scope input._ao-checkbox:checked, :scope input._ao-checkbox:indeterminate{border-color:var(--color-primary);background-color:var(--color-primary)}
383
+ @media (hover:hover){:scope:is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover, :scope :is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover{background-color:var(--color-primary-hover)}}
384
+ :scope input._ao-checkbox:checked:after, :scope input._ao-checkbox:indeterminate:after{content:"";width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);background-color:var(--color-primary-content);-webkit-mask:var(--checkbox-check) center / contain no-repeat;-webkit-mask:var(--checkbox-check) center / contain no-repeat;-webkit-mask:var(--checkbox-check) center / contain no-repeat;mask:var(--checkbox-check) center / contain no-repeat}
377
385
  :scope label:has(>._ao-checkbox){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);display:inline-flex}
378
386
  :scope label:has(>._ao-checkbox:disabled), :scope label:has(>._ao-checkbox[data-disabled]){cursor:not-allowed;opacity:.6}
379
387
  :scope._ao-radio, :scope ._ao-radio{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-surface);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-width:1px;border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
@@ -385,6 +393,11 @@
385
393
  @media (hover:hover){:scope._ao-radio[data-checked]:hover, :scope ._ao-radio[data-checked]:hover{background-color:var(--color-primary-hover)}}
386
394
  :scope._ao-radio[data-disabled], :scope ._ao-radio[data-disabled]{cursor:not-allowed;opacity:.5}
387
395
  :scope._ao-radio-indicator, :scope ._ao-radio-indicator{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5);background-color:var(--color-primary-content);border-radius:3.40282e38px;display:inline-flex}
396
+ :scope input._ao-radio{appearance:none;border-color:var(--color-border-strong)}
397
+ @media (hover:hover){:scope input._ao-radio:hover{border-color:var(--color-text-muted)}}
398
+ :scope input._ao-radio:checked{border-color:var(--color-primary);background-color:var(--color-primary)}
399
+ @media (hover:hover){:scope input._ao-radio:checked:hover{background-color:var(--color-primary-hover)}}
400
+ :scope input._ao-radio:checked:after{content:"";width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5);background-color:var(--color-primary-content);border-radius:3.40282e38px}
388
401
  :scope._ao-radio-group, :scope ._ao-radio-group{gap:calc(var(--spacing) * 4);flex-wrap:wrap;display:inline-flex}
389
402
  :scope._ao-radio-group-vertical, :scope ._ao-radio-group-vertical{align-items:flex-start;gap:calc(var(--spacing) * 2);flex-direction:column}
390
403
  :scope label:has(>._ao-radio){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);display:inline-flex}
@@ -416,7 +429,7 @@
416
429
  :scope._ao-select-danger:focus-visible, :scope ._ao-select-danger:focus-visible{outline-color:var(--color-danger)}
417
430
  :scope._ao-select-sm, :scope ._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))}
418
431
  :scope._ao-select-lg, :scope ._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))}
419
- :scope select._ao-select{appearance:none;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>");background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2rem}
432
+ :scope select._ao-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2rem}
420
433
  :scope select._ao-select-sm{background-size:.875rem;padding-right:1.75rem}
421
434
  :scope select._ao-select-lg{padding-right:2.25rem}
422
435
  :scope._ao-select-icon, :scope ._ao-select-icon{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);color:var(--color-text-muted);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
@@ -430,7 +443,7 @@
430
443
  :scope._ao-select-item[data-disabled], :scope ._ao-select-item[data-disabled]{cursor:not-allowed;opacity:.5}
431
444
  :scope._ao-select-item-indicator, :scope ._ao-select-item-indicator{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);color:var(--color-primary);justify-content:center;align-items:center;margin-left:auto;display:inline-flex}
432
445
  :scope._ao-select-group-label, :scope ._ao-select-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}
433
- :scope._ao-card, :scope ._ao-card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);color:var(--color-text);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);flex-direction:column;display:flex;overflow:auto}
446
+ :scope._ao-card, :scope ._ao-card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);color:var(--color-text);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);flex-direction:column;display:flex}
434
447
  :scope._ao-card-body, :scope ._ao-card-body{gap:calc(var(--spacing) * 3);padding:calc(var(--spacing) * 5);flex-direction:column;display:flex}
435
448
  :scope._ao-card-title, :scope ._ao-card-title{align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);display:flex}
436
449
  :scope._ao-card-header, :scope ._ao-card-header{align-items:center;gap:calc(var(--spacing) * 2);display:flex}
@@ -462,14 +475,15 @@
462
475
  :scope._ao-card-danger ._ao-stat-card-value, :scope ._ao-card-danger ._ao-stat-card-value{color:var(--color-danger)}
463
476
  :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);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)}
464
477
  :scope._ao-dialog[open], :scope ._ao-dialog[open]{display:flex}
465
- :scope._ao-dialog::backdrop, :scope ._ao-dialog::backdrop{transition:display .15s allow-discrete, overlay .15s allow-discrete, background .15s ease-out;background:#0006}
478
+ :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}
466
479
  @starting-style{:scope._ao-dialog[open], :scope ._ao-dialog[open]{opacity:0;transform:translateY(-.5rem)scale(.98)}:scope._ao-dialog[open]::backdrop, :scope ._ao-dialog[open]::backdrop{background:0 0}}
467
480
  :scope._ao-dialog-sm, :scope ._ao-dialog-sm{max-width:24rem}
468
481
  :scope._ao-dialog-lg, :scope ._ao-dialog-lg{max-width:48rem}
469
482
  :scope._ao-dialog-header, :scope ._ao-dialog-header{align-items:flex-start;gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);padding-top:calc(var(--spacing) * 5);padding-bottom:calc(var(--spacing) * 3);display:flex}
470
483
  :scope._ao-dialog-title, :scope ._ao-dialog-title{margin:calc(var(--spacing) * 0);align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);flex:1;display:flex}
471
484
  :scope._ao-dialog-description, :scope ._ao-dialog-description{margin-top:calc(var(--spacing) * -2);margin-bottom:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted)}
472
- :scope._ao-dialog-body, :scope ._ao-dialog-body{gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-direction:column;display:flex;overflow-y:auto}
485
+ :scope._ao-dialog-body, :scope ._ao-dialog-body{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-direction:column;flex:1;display:flex;overflow-y:auto}
486
+ :scope._ao-dialog>form, :scope ._ao-dialog>form{min-height:calc(var(--spacing) * 0);flex-direction:column;flex:1;display:flex}
473
487
  :scope._ao-dialog-footer, :scope ._ao-dialog-footer{justify-content:flex-end;align-items:center;gap:calc(var(--spacing) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;flex-wrap:wrap;display:flex}
474
488
  :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}
475
489
  @media (hover:hover){:scope._ao-dialog-close:hover, :scope ._ao-dialog-close:hover{background-color:var(--color-surface-strong);color:var(--color-text)}}
@@ -594,9 +608,7 @@
594
608
  :scope._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible), :scope ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible){outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
595
609
  :scope._ao-sidebar-collapse-toggle:before, :scope ._ao-sidebar-collapse-toggle:before{content:"";border-bottom:2px solid;border-left:2px solid;width:.5rem;height:.5rem;transition:transform .15s;transform:rotate(45deg)}
596
610
  :scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle:before, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle:before{transform:rotate(-135deg)}
597
- :scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop{inset:calc(var(--spacing) * 0);z-index:40;background-color:#0f0f0f66;position:fixed}
598
- @supports (color:color-mix(in lab, red, red)){:scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop{background-color:color-mix(in oklab, var(--color-black) 40%, transparent)}}
599
- :scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop{transition-property:opacity;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}
611
+ :scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop{inset:calc(var(--spacing) * 0);z-index:40;background-color:var(--color-scrim);transition-property:opacity;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;position:fixed}
600
612
  :scope._ao-sidebar-drawer-backdrop[data-starting-style], :scope ._ao-sidebar-drawer-backdrop[data-starting-style], :scope._ao-sidebar-drawer-backdrop[data-ending-style], :scope ._ao-sidebar-drawer-backdrop[data-ending-style]{opacity:0}
601
613
  :scope._ao-sidebar-drawer, :scope ._ao-sidebar-drawer{inset-block:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0);z-index:50;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);color:var(--color-text);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;width:min(var(--app-shell-sidebar-w,240px), 80vw);flex-direction:column;transition-duration:.15s;display:flex;position:fixed}
602
614
  :scope._ao-sidebar-drawer[data-starting-style], :scope ._ao-sidebar-drawer[data-starting-style], :scope._ao-sidebar-drawer[data-ending-style], :scope ._ao-sidebar-drawer[data-ending-style]{--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}
@@ -615,8 +627,9 @@
615
627
  :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after{content:"";background-color:var(--color-primary);block-size:2px;transition:transform .15s;position:absolute;inset-block-end:-1px;inset-inline:0;transform:scaleX(0)}
616
628
  :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]:after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected=true]:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected=true]:after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked+._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked+._ao-tab:after{transform:scaleX(1)}
617
629
  :scope._ao-tabs-boxed ._ao-tab-list, :scope ._ao-tabs-boxed ._ao-tab-list{gap:calc(var(--spacing) * 0);border-radius:var(--radius-md);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding:calc(var(--spacing) * .5)}
618
- :scope._ao-tabs-boxed ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab{border-radius:.25rem}
630
+ :scope._ao-tabs-boxed ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab{z-index:1;border-radius:.25rem;position:relative}
619
631
  :scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope ._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab{background-color:var(--color-surface);color:var(--color-text);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px 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)}
632
+ @supports (anchor-scope:--x){:scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list{anchor-scope:--tab-thumb}:scope._ao-tabs ._ao-tab[data-selected], :scope ._ao-tabs ._ao-tab[data-selected], :scope._ao-tabs ._ao-tab[aria-selected=true], :scope ._ao-tabs ._ao-tab[aria-selected=true], :scope._ao-tabs ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs ._ao-tab-input:checked+._ao-tab{anchor-name:--tab-thumb}:scope._ao-tabs ._ao-tab-list:before, :scope ._ao-tabs ._ao-tab-list:before{content:"";position-anchor:--tab-thumb;position:absolute}:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after{display:none}:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-list:before, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-list:before{background-color:var(--color-primary);left:anchor(left);right:anchor(right);block-size:2px;transition:left .18s,right .18s;inset-block-end:-1px}:scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab-list:before, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab-list:before{inline-size:2px;inset-inline:auto -1px;top:anchor(top);bottom:anchor(bottom);block-size:auto;transition:top .18s,bottom .18s}:scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope ._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab{--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);background-color:#0000}:scope._ao-tabs-boxed ._ao-tab-list:before, :scope ._ao-tabs-boxed ._ao-tab-list:before{top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);z-index:0;background-color:var(--color-surface);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px 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);border-radius:.25rem;transition:top .18s,right .18s,bottom .18s,left .18s}}
620
633
  :scope._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab-list, :scope ._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab-list{width:100%;display:flex}
621
634
  :scope._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab, :scope ._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab{flex:1;justify-content:center}
622
635
  :scope._ao-tabs-sm ._ao-tab, :scope ._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))}
@@ -628,6 +641,7 @@
628
641
  :scope._ao-tabs[data-orientation=vertical] ._ao-tab, :scope ._ao-tabs[data-orientation=vertical] ._ao-tab{justify-content:flex-start;width:100%}
629
642
  :scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab:after{block-size:auto;inline-size:2px;inset-block:0;inset-inline:auto -1px;transform:scaleY(0)}
630
643
  :scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab[data-selected]:after, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab[data-selected]:after, :scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab[aria-selected=true]:after, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab[aria-selected=true]:after{transform:scaleY(1)}
644
+ @media (prefers-reduced-motion:reduce){:scope._ao-tabs ._ao-tab-list:before, :scope ._ao-tabs ._ao-tab-list:before, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after{transition:none}}
631
645
  :scope._ao-table, :scope ._ao-table{border-collapse:collapse;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text)}
632
646
  :scope._ao-table :where(th,td), :scope ._ao-table :where(th,td), :scope._ao-table-cell, :scope ._ao-table-cell, :scope._ao-table-header-cell, :scope ._ao-table-header-cell{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);text-align:left;vertical-align:middle}
633
647
  :scope._ao-table :where(thead th), :scope ._ao-table :where(thead th), :scope._ao-table-header-cell, :scope ._ao-table-header-cell{border-bottom-color:var(--color-border-strong);background-color:var(--color-surface-muted);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-text-muted)}
@@ -664,11 +678,34 @@
664
678
  :scope._ao-tooltip-wrap:hover>._ao-tooltip, :scope ._ao-tooltip-wrap:hover>._ao-tooltip, :scope._ao-tooltip-wrap:focus-within>._ao-tooltip, :scope ._ao-tooltip-wrap:focus-within>._ao-tooltip{visibility:visible;opacity:1;transition:opacity .15s ease-out .2s,visibility 0s linear .2s}
665
679
  :scope._ao-code-block, :scope ._ao-code-block{border-radius:var(--radius-lg);background-color:var(--color-code-surface);padding:calc(var(--spacing) * 3);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-code-text);white-space:pre-wrap;word-wrap:break-word;overflow:auto}
666
680
  :scope._ao-code-block-nowrap, :scope ._ao-code-block-nowrap{white-space:pre;word-wrap:normal}
681
+ :scope._ao-prose, :scope ._ao-prose{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-normal);line-height:var(--leading-normal);color:var(--color-text)}
682
+ :scope._ao-prose :where(p,ul,ol,blockquote,pre,table,figure), :scope ._ao-prose :where(p,ul,ol,blockquote,pre,table,figure){margin-block:calc(var(--spacing) * 3)}
683
+ :scope._ao-prose>:first-child, :scope ._ao-prose>:first-child{margin-top:0}
684
+ :scope._ao-prose>:last-child, :scope ._ao-prose>:last-child{margin-bottom:0}
685
+ :scope._ao-prose :where(h1,h2,h3,h4,h5,h6), :scope ._ao-prose :where(h1,h2,h3,h4,h5,h6){margin-top:calc(var(--spacing) * 6);margin-bottom:calc(var(--spacing) * 2);--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
686
+ :scope._ao-prose :where(h4), :scope ._ao-prose :where(h4){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
687
+ :scope._ao-prose :where(h5,h6), :scope ._ao-prose :where(h5,h6){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}
688
+ :scope._ao-prose :where(ul), :scope ._ao-prose :where(ul){padding-inline-start:calc(var(--spacing) * 5);list-style-type:disc}
689
+ :scope._ao-prose :where(ol), :scope ._ao-prose :where(ol){padding-inline-start:calc(var(--spacing) * 5);list-style-type:decimal}
690
+ :scope._ao-prose :where(li), :scope ._ao-prose :where(li), :scope._ao-prose :where(li) :where(p), :scope ._ao-prose :where(li) :where(p), :scope._ao-prose :where(li>ul,li>ol), :scope ._ao-prose :where(li>ul,li>ol){margin-block:calc(var(--spacing) * 1)}
691
+ :scope._ao-prose :where(a), :scope ._ao-prose :where(a){border-radius:var(--radius-sm);color:var(--color-link);text-underline-offset:2px;text-decoration-line:underline}
692
+ @media (hover:hover){:scope._ao-prose :where(a):hover, :scope ._ao-prose :where(a):hover{color:var(--color-link-hover)}}
693
+ :scope._ao-prose :where(a):focus-visible, :scope ._ao-prose :where(a):focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
694
+ :scope._ao-prose :where(code), :scope ._ao-prose :where(code){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-code-surface);padding-inline:calc(var(--spacing) * 1);padding-block:calc(var(--spacing) * .5);font-family:var(--font-mono);color:var(--color-code-text);border-radius:.25rem;font-size:.85em}
695
+ :scope._ao-prose :where(pre), :scope ._ao-prose :where(pre){border-radius:var(--radius-lg);background-color:var(--color-code-surface);padding:calc(var(--spacing) * 3);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-code-text);white-space:pre;overflow-x:auto}
696
+ :scope._ao-prose :where(pre) code, :scope ._ao-prose :where(pre) code{border-style:var(--tw-border-style);padding:calc(var(--spacing) * 0);font-size:inherit;background-color:#0000;border-width:0;border-radius:0}
697
+ :scope._ao-prose :where(blockquote), :scope ._ao-prose :where(blockquote){border-inline-start-style:var(--tw-border-style);border-inline-start-width:2px;border-color:var(--color-border-strong);color:var(--color-text-muted);padding-inline-start:calc(var(--spacing) * 3)}
698
+ :scope._ao-prose :where(hr), :scope ._ao-prose :where(hr){margin-block:calc(var(--spacing) * 6);border-style:var(--tw-border-style);border-width:0;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border)}
699
+ :scope._ao-prose :where(table), :scope ._ao-prose :where(table){border-collapse:collapse;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
700
+ :scope._ao-prose :where(th,td), :scope ._ao-prose :where(th,td){border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);text-align:start;vertical-align:top}
701
+ :scope._ao-prose :where(thead th), :scope ._ao-prose :where(thead th){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}
702
+ :scope._ao-prose :where(img), :scope ._ao-prose :where(img){border-radius:var(--radius-md);max-width:100%;height:auto}
703
+ :scope._ao-prose :where(figcaption), :scope ._ao-prose :where(figcaption){margin-top:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}
704
+ :scope._ao-prose :where(strong), :scope ._ao-prose :where(strong){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
667
705
  :scope._ao-chart, :scope ._ao-chart{--chart-max:100;--chart-height:8rem;--chart-size:8rem;--chart-gap:.25rem;color:var(--color-info)}
668
706
  :scope._ao-chart-success, :scope ._ao-chart-success{color:var(--color-success)}
669
707
  :scope._ao-chart-warning, :scope ._ao-chart-warning{color:var(--color-warning)}
670
708
  :scope._ao-chart-danger, :scope ._ao-chart-danger{color:var(--color-danger)}
671
- :scope._ao-chart-info, :scope ._ao-chart-info{color:var(--color-info)}
672
709
  :scope._ao-chart-bars, :scope ._ao-chart-bars{row-gap:var(--chart-gap);grid-template-columns:auto 1fr auto;align-items:center;inline-size:100%;display:grid}
673
710
  :scope._ao-chart-bar, :scope ._ao-chart-bar{grid-template-columns:subgrid;grid-column:1/-1;align-items:center;display:grid}
674
711
  :scope._ao-chart-bar-label, :scope ._ao-chart-bar-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted);text-align:end;white-space:nowrap;grid-column:1;padding-inline-end:.5rem}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aortl/admin-css",
3
- "version": "0.15.0",
3
+ "version": "0.16.0",
4
4
  "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
5
5
  "keywords": [
6
6
  "components",
@@ -47,7 +47,7 @@
47
47
  rules. */
48
48
  .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
49
49
  .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger {
50
- border-left-color: color-mix(in srgb, currentColor 25%, transparent);
50
+ border-left-color: color-mix(in oklab, currentColor 25%, transparent);
51
51
  }
52
52
 
53
53
  .btn-group-vertical {
@@ -75,7 +75,7 @@
75
75
 
76
76
  .btn-group-vertical > .btn:not(:first-child),
77
77
  .btn-group-vertical > .menu:not(:first-child) > .menu-trigger {
78
- border-top-color: color-mix(in srgb, currentColor 25%, transparent);
78
+ border-top-color: color-mix(in oklab, currentColor 25%, transparent);
79
79
  }
80
80
 
81
81
  /* Full width — the group stretches across its container instead of
@@ -4,8 +4,7 @@
4
4
  bg-surface-muted text-text
5
5
  border border-border
6
6
  rounded-xl
7
- shadow-xs
8
- overflow-auto;
7
+ shadow-xs;
9
8
  }
10
9
 
11
10
  .card-body {
@@ -55,7 +54,7 @@
55
54
  }
56
55
 
57
56
  /* Neutral variant — sits flush with the page (`--color-surface`, the same
58
- fill as `html`/`.app-shell`) instead of the raised `surface-strong` of a
57
+ fill as `html`/`.app-shell`) instead of the raised `surface-muted` of a
59
58
  default card. For de-emphasised or grouped panels that shouldn't pop off
60
59
  the background. No accent, no status meaning. */
61
60
  .card-muted {
@@ -33,7 +33,9 @@
33
33
  color: var(--color-info);
34
34
  }
35
35
 
36
- /* Single-series semantic variants — recolour currentColor, like progress. */
36
+ /* Single-series semantic variants — recolour currentColor, like progress.
37
+ `info` is the base colour (`.chart` above), so it needs no class — the
38
+ default `variant="info"` simply emits no modifier. */
37
39
  .chart-success {
38
40
  color: var(--color-success);
39
41
  }
@@ -43,9 +45,6 @@
43
45
  .chart-danger {
44
46
  color: var(--color-danger);
45
47
  }
46
- .chart-info {
47
- color: var(--color-info);
48
- }
49
48
 
50
49
  /* --------------------------------------------------------------------- *
51
50
  * BAR CHART — horizontal (default) *
@@ -25,6 +25,30 @@
25
25
  @apply inline-flex items-center justify-center size-3 text-primary-content;
26
26
  }
27
27
 
28
+ /* Native input variant: state is driven by :checked / :indeterminate, the
29
+ glyph is masked onto ::after. Mirrors the Base UI button variant above so a
30
+ vanilla <input class="checkbox"> renders identically (indeterminate reads
31
+ the same as checked, matching the data-* rule). The mask is the same
32
+ checkmark polyline the React indicator draws. */
33
+ input.checkbox {
34
+ @apply appearance-none border-border-strong hover:border-text-muted;
35
+ --checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
36
+ }
37
+
38
+ input.checkbox:checked,
39
+ input.checkbox:indeterminate {
40
+ @apply bg-primary border-primary hover:bg-primary-hover;
41
+ }
42
+
43
+ input.checkbox:checked::after,
44
+ input.checkbox:indeterminate::after {
45
+ content: "";
46
+ @apply size-3;
47
+ background-color: var(--color-primary-content);
48
+ -webkit-mask: var(--checkbox-check) center / contain no-repeat;
49
+ mask: var(--checkbox-check) center / contain no-repeat;
50
+ }
51
+
28
52
  /* A <label> wrapping a checkbox + text lays out inline with a small gap.
29
53
  Covers both the vanilla input.checkbox and Base UI's button.checkbox. */
30
54
  label:has(> .checkbox) {
@@ -26,7 +26,7 @@
26
26
  }
27
27
 
28
28
  .dialog::backdrop {
29
- background: rgb(0 0 0 / 0.4);
29
+ background: var(--color-scrim);
30
30
  transition:
31
31
  display 150ms allow-discrete,
32
32
  overlay 150ms allow-discrete,
@@ -40,7 +40,7 @@
40
40
  transform: translateY(-0.5rem) scale(0.98);
41
41
  }
42
42
  .dialog[open]::backdrop {
43
- background: rgb(0 0 0 / 0);
43
+ background: transparent;
44
44
  }
45
45
  }
46
46
 
@@ -66,8 +66,18 @@
66
66
  @apply px-5 -mt-2 mb-3 text-sm text-text-muted;
67
67
  }
68
68
 
69
+ /* `flex-1 min-h-0` lets the body fill the remaining height and shrink below
70
+ its content (a flex item's default `min-height: auto` would refuse to), so
71
+ tall content scrolls here while the header/footer stay pinned. */
69
72
  .dialog-body {
70
- @apply px-5 py-3 overflow-y-auto flex flex-col gap-3;
73
+ @apply flex-1 min-h-0 px-5 py-3 overflow-y-auto flex flex-col gap-3;
74
+ }
75
+
76
+ /* When the body is wrapped in a `<form>` (the form-dialog pattern), the form
77
+ becomes the dialog's sole flex child — make it the flex column so the body's
78
+ `flex-1 min-h-0` still resolves and scrolls. */
79
+ .dialog > form {
80
+ @apply flex flex-col min-h-0 flex-1;
71
81
  }
72
82
 
73
83
  .dialog-footer {
@@ -34,4 +34,5 @@
34
34
  @import "./table.css";
35
35
  @import "./tooltip.css";
36
36
  @import "./code-block.css";
37
+ @import "./prose.css";
37
38
  @import "./chart.css";
@@ -7,8 +7,7 @@
7
7
  rounded border border-border
8
8
  bg-surface-strong text-text-muted
9
9
  text-[0.75em] font-mono leading-none align-middle
10
- whitespace-nowrap;
11
- font-variant-numeric: tabular-nums;
10
+ whitespace-nowrap tabular-nums;
12
11
  }
13
12
 
14
13
  /* Cluster of `.kbd` chips. Always emitted by the React `<Kbd>` component so
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- /* Outer section — owns striped, copyable, hide-if-empty modifiers. Title
2
+ /* Outer section — owns striped, hide-if-empty modifiers. Title
3
3
  (optional) and the items grid stack vertically. */
4
4
  .property-list {
5
5
  @apply flex flex-col text-sm text-text;
@@ -18,23 +18,18 @@
18
18
 
19
19
  .property-list-label,
20
20
  .property-list-value {
21
- display: flex;
22
- align-items: center;
23
- padding: 0.375rem 0.75rem;
24
- min-height: 2rem;
21
+ @apply flex items-center px-3 py-1.5 min-h-8;
25
22
  }
26
23
 
27
24
  .property-list-label {
28
25
  @apply text-text-muted;
29
26
  }
30
27
 
31
- /* `min-width: 0` lets the value's grid track shrink below its content; pair
32
- it with `overflow-wrap` so long unbreakable values (IDs, hashes, emails,
33
- URLs, file paths) break instead of overflowing the column. */
28
+ /* `min-w-0` lets the value's grid track shrink below its content; pair it
29
+ with `break-words` so long unbreakable values (IDs, hashes, emails, URLs,
30
+ file paths) break instead of overflowing the column. */
34
31
  .property-list-value {
35
- gap: 0.5rem;
36
- min-width: 0;
37
- overflow-wrap: break-word;
32
+ @apply gap-2 min-w-0 break-words;
38
33
  }
39
34
 
40
35
  /* Compact density — tighter rows for sidebar info blocks or very many
@@ -45,8 +40,7 @@
45
40
 
46
41
  .property-list-compact .property-list-label,
47
42
  .property-list-compact .property-list-value {
48
- padding: 0.125rem 0.5rem;
49
- min-height: 1.5rem;
43
+ @apply px-2 py-0.5 min-h-6;
50
44
  }
51
45
 
52
46
  /* Numeric — right-align + tabular-nums on the value. */
@@ -0,0 +1,115 @@
1
+ @layer components {
2
+ /*
3
+ * Long-form rendered HTML — markdown output, CMS bodies, anything you can't
4
+ * annotate with the system's semantic class names. The global reset strips
5
+ * margins, list markers, and link styling from bare elements (so admin chrome
6
+ * stays neutral); `.prose` re-establishes them for its descendants only, using
7
+ * the semantic tokens so it follows dark mode and `--color-*` overrides.
8
+ *
9
+ * Descendant rules use `:where()` to stay at specificity 0 — a consumer's own
10
+ * `.prose a { … }` wins without `!important`.
11
+ */
12
+ .prose {
13
+ @apply text-sm leading-normal text-text;
14
+ }
15
+
16
+ /* Vertical rhythm — space between flow blocks, none at the container edges. */
17
+ .prose :where(p, ul, ol, blockquote, pre, table, figure) {
18
+ @apply my-3;
19
+ }
20
+ .prose > :first-child {
21
+ margin-top: 0;
22
+ }
23
+ .prose > :last-child {
24
+ margin-bottom: 0;
25
+ }
26
+
27
+ /* Headings — base.css already sizes h1–h3; here we add h4–h6 and the
28
+ sectioning rhythm. The edge reset above zeroes a leading heading's margin. */
29
+ .prose :where(h1, h2, h3, h4, h5, h6) {
30
+ @apply mt-6 mb-2 font-semibold leading-tight;
31
+ }
32
+ .prose :where(h4) {
33
+ @apply text-sm;
34
+ }
35
+ .prose :where(h5, h6) {
36
+ @apply text-xs uppercase tracking-wide text-text-muted;
37
+ }
38
+
39
+ /* Lists — restore the markers the reset removes. */
40
+ .prose :where(ul) {
41
+ @apply list-disc ps-5;
42
+ }
43
+ .prose :where(ol) {
44
+ @apply list-decimal ps-5;
45
+ }
46
+ .prose :where(li) {
47
+ @apply my-1;
48
+ }
49
+ /* Loose lists wrap each item's text in <p> — tighten those back down. */
50
+ .prose :where(li) :where(p) {
51
+ @apply my-1;
52
+ }
53
+ /* Nested lists hug their parent item rather than taking full block spacing. */
54
+ .prose :where(li > ul, li > ol) {
55
+ @apply my-1;
56
+ }
57
+
58
+ /* Links — the .link treatment without needing the class on every anchor. */
59
+ .prose :where(a) {
60
+ @apply rounded-sm text-link underline underline-offset-2
61
+ hover:text-link-hover
62
+ focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
63
+ }
64
+
65
+ /* Inline code — a tinted chip. */
66
+ .prose :where(code) {
67
+ @apply rounded border border-border bg-code-surface px-1 py-0.5
68
+ font-mono text-code-text;
69
+ font-size: 0.85em;
70
+ }
71
+
72
+ /* Code blocks — the .code-block surface; strip the inline chip off nested
73
+ <code> so a highlighter's own tokens show through. */
74
+ .prose :where(pre) {
75
+ @apply rounded-lg bg-code-surface p-3 font-mono text-sm text-code-text;
76
+ white-space: pre;
77
+ overflow-x: auto;
78
+ }
79
+ .prose :where(pre) code {
80
+ @apply rounded-none border-0 bg-transparent p-0;
81
+ font-size: inherit;
82
+ }
83
+
84
+ /* Blockquote — a quiet inline-start rule. */
85
+ .prose :where(blockquote) {
86
+ @apply border-s-2 border-border-strong ps-3 text-text-muted;
87
+ }
88
+
89
+ /* Thematic break. */
90
+ .prose :where(hr) {
91
+ @apply my-6 border-0 border-t border-border;
92
+ }
93
+
94
+ /* Tables — adopt the .table look for markdown's simple grids. */
95
+ .prose :where(table) {
96
+ @apply w-full border-collapse text-sm;
97
+ }
98
+ .prose :where(th, td) {
99
+ @apply border-b border-border px-3 py-2 text-start align-top;
100
+ }
101
+ .prose :where(thead th) {
102
+ @apply font-semibold text-text-muted;
103
+ }
104
+
105
+ /* Media + emphasis. */
106
+ .prose :where(img) {
107
+ @apply h-auto max-w-full rounded-md;
108
+ }
109
+ .prose :where(figcaption) {
110
+ @apply mt-1 text-xs text-text-muted;
111
+ }
112
+ .prose :where(strong) {
113
+ @apply font-semibold;
114
+ }
115
+ }
@@ -24,6 +24,23 @@
24
24
  @apply inline-flex size-1.5 rounded-full bg-primary-content;
25
25
  }
26
26
 
27
+ /* Native input variant: state is driven by :checked, the dot is ::after.
28
+ Mirrors the Base UI span variant above so a vanilla <input class="radio">
29
+ renders identically (the dot matches .radio-indicator's size + colour). */
30
+ input.radio {
31
+ @apply appearance-none border-border-strong hover:border-text-muted;
32
+ }
33
+
34
+ input.radio:checked {
35
+ @apply bg-primary border-primary hover:bg-primary-hover;
36
+ }
37
+
38
+ input.radio:checked::after {
39
+ content: "";
40
+ @apply size-1.5 rounded-full;
41
+ background-color: var(--color-primary-content);
42
+ }
43
+
27
44
  .radio-group {
28
45
  @apply inline-flex flex-wrap gap-4;
29
46
  }
@@ -37,12 +37,16 @@
37
37
 
38
38
  /* Native <select> usage: same class, but suppress the native chevron and
39
39
  supply our own via background-image so the look matches the Base UI
40
- trigger. Chevron stroke uses Flexoki base-500, which reads as neutral
41
- in both light and dark mode. */
40
+ trigger. A bare native <select> is a replaced element and can't host a
41
+ tinted `::after` (the React trigger uses a real `.select-icon` SVG), and
42
+ data URIs can't read CSS variables — so the chevron can't ride the
43
+ `--color-text-muted` token directly. The stroke is Flexoki `base-500`
44
+ (#848484), the same mid-gray as the token's dark-mode value, which reads
45
+ as a neutral chevron in both light and dark mode. */
42
46
  select.select {
43
47
  appearance: none;
44
48
  padding-right: 2rem;
45
- 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>");
49
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
46
50
  background-repeat: no-repeat;
47
51
  background-position: right 0.5rem center;
48
52
  background-size: 1rem;
@@ -202,7 +202,7 @@
202
202
 
203
203
  /* Mobile drawer surface (rendered inside a Base UI Dialog) */
204
204
  .sidebar-drawer-backdrop {
205
- @apply fixed inset-0 z-40 bg-black/40
205
+ @apply fixed inset-0 z-40 bg-scrim
206
206
  transition-opacity duration-150;
207
207
  }
208
208