@aortl/admin-css 0.16.1 → 0.17.0

package/dist/admin.scoped.min.css

@@ -37,10 +37,10 @@
 @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}
 @property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}
 @property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}
-@property --tw-tracking{syntax:"*";inherits:false}
 @scope (._ao-admin-root) {
 :scope :where(
   h1, h2, h3, h4, h5, h6,
@@ -63,8 +63,8 @@
 :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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-tracking:initial}}
-: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}
+@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}}
+: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%)}
 @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%)}}
@@ -142,16 +142,23 @@
 :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>:is(i,svg):first-child, :scope ._ao-alert>:is(i,svg):first-child{font-size:1rem;line-height:1.25}
-:scope._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-title), :scope ._ao-alert:has(>:is(i,svg):first-child):has(>._ao-alert-title){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)), :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(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){grid-column:2;min-width:0}
+: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-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 ._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}
 :scope._ao-app-shell, :scope ._ao-app-shell{--app-shell-sidebar-w:240px;--app-shell-sidebar-w-collapsed:56px;background-color:var(--color-surface);width:100%;min-height:100vh;color:var(--color-text);grid-template:"header""main"1fr"footer"/1fr;display:grid}
 :scope._ao-app-shell>._ao-navbar, :scope ._ao-app-shell>._ao-navbar{grid-area:header}
 :scope._ao-app-shell>main, :scope ._ao-app-shell>main, :scope._ao-app-shell-main, :scope ._ao-app-shell-main{grid-area:main;min-width:0}
@@ -172,9 +179,37 @@
 :scope._ao-badge-warning, :scope ._ao-badge-warning{border-color:var(--color-warning);background-color:var(--color-warning);color:var(--color-warning-content)}
 :scope._ao-badge-danger, :scope ._ao-badge-danger{border-color:var(--color-danger);background-color:var(--color-danger);color:var(--color-danger-content)}
 :scope._ao-badge-primary, :scope ._ao-badge-primary{background-color:var(--color-primary);color:var(--color-primary-content)}
+:scope._ao-badge-soft._ao-badge-info, :scope ._ao-badge-soft._ao-badge-info{border-color:var(--color-info-muted);background-color:var(--color-info-muted);color:var(--color-info)}
+:scope._ao-badge-soft._ao-badge-success, :scope ._ao-badge-soft._ao-badge-success{border-color:var(--color-success-muted);background-color:var(--color-success-muted);color:var(--color-success)}
+:scope._ao-badge-soft._ao-badge-warning, :scope ._ao-badge-soft._ao-badge-warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-muted);color:var(--color-text)}
+:scope._ao-badge-soft._ao-badge-danger, :scope ._ao-badge-soft._ao-badge-danger{border-color:var(--color-danger-muted);background-color:var(--color-danger-muted);color:var(--color-danger)}
+:scope._ao-badge-soft._ao-badge-primary, :scope ._ao-badge-soft._ao-badge-primary{border-color:var(--color-primary-muted);background-color:var(--color-primary-muted);color:var(--color-text)}
+:scope._ao-badge-remove, :scope ._ao-badge-remove{margin-right:calc(var(--spacing) * -1);width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.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:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
+:scope._ao-badge-remove:focus-visible, :scope ._ao-badge-remove:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-focus)}
+:scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover{background-color:currentColor}
+@supports (color:color-mix(in lab, red, red)){:scope._ao-badge-remove:hover, :scope ._ao-badge-remove:hover{background-color:color-mix(in oklab, currentColor 15%, transparent)}}
+:scope._ao-badge-sm ._ao-badge-remove, :scope ._ao-badge-sm ._ao-badge-remove{margin-right:calc(var(--spacing) * -.5);width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}
+:scope._ao-badge-lg ._ao-badge-remove, :scope ._ao-badge-lg ._ao-badge-remove{margin-right:calc(var(--spacing) * -1.5);width:calc(var(--spacing) * 4.5);height:calc(var(--spacing) * 4.5)}
 :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}
 :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))}
 :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}
+:scope._ao-brand-tile>:is(i,svg), :scope ._ao-brand-tile>:is(i,svg){font-size:14px}
+:scope._ao-brand-tile-lg, :scope ._ao-brand-tile-lg{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10);border-radius:var(--radius-md);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
+:scope._ao-brand-tile-lg>:is(i,svg), :scope ._ao-brand-tile-lg>:is(i,svg){font-size:20px}
+:scope._ao-brand-tile-soft, :scope ._ao-brand-tile-soft{background-color:var(--color-system-accent-muted);color:var(--color-system-accent)}
+:scope._ao-brand-tile-info, :scope ._ao-brand-tile-info{background-color:var(--color-info-muted);color:var(--color-info)}
+:scope._ao-brand-tile-success, :scope ._ao-brand-tile-success{background-color:var(--color-success-muted);color:var(--color-success)}
+:scope._ao-brand-tile-danger, :scope ._ao-brand-tile-danger{background-color:var(--color-danger-muted);color:var(--color-danger)}
+:scope._ao-brand-tile:has(>img), :scope ._ao-brand-tile:has(>img){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);padding:calc(var(--spacing) * .5)}
+:scope._ao-brand-tile>img, :scope ._ao-brand-tile>img{border-radius:inherit;object-fit:contain;width:100%;height:100%}
+:scope._ao-avatar, :scope ._ao-avatar{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8);background-color:var(--color-surface-strong);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-medium);line-height:1;font-weight:var(--font-weight-medium);--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);color:var(--color-text-muted);-webkit-user-select:none;user-select:none;border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden}
+:scope._ao-avatar>img, :scope ._ao-avatar>img{inset:calc(var(--spacing) * 0);object-fit:cover;width:100%;height:100%;position:absolute}
+:scope._ao-avatar-square, :scope ._ao-avatar-square{border-radius:var(--radius-md)}
+:scope._ao-avatar-sm, :scope ._ao-avatar-sm{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);font-size:.625rem}
+:scope._ao-avatar-lg, :scope ._ao-avatar-lg{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
+: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-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}
@@ -186,6 +221,10 @@
 :scope._ao-indicator, :scope ._ao-indicator{width:max-content;display:inline-flex;position:relative}
 :scope._ao-indicator:has(>._ao-btn), :scope ._ao-indicator:has(>._ao-btn), :scope._ao-indicator:has(>._ao-input), :scope ._ao-indicator:has(>._ao-input){--indicator-offset:2px}
 :scope._ao-indicator:has(>._ao-card), :scope ._ao-indicator:has(>._ao-card){--indicator-offset:6px}
+:scope._ao-indicator:has(>._ao-avatar), :scope ._ao-indicator:has(>._ao-avatar){--indicator-offset:5px}
+:scope._ao-indicator:has(>._ao-avatar-sm), :scope ._ao-indicator:has(>._ao-avatar-sm){--indicator-offset:3px}
+:scope._ao-indicator:has(>._ao-avatar-lg), :scope ._ao-indicator:has(>._ao-avatar-lg){--indicator-offset:6px}
+:scope._ao-indicator:has(>._ao-avatar-square), :scope ._ao-indicator:has(>._ao-avatar-square){--indicator-offset:2px}
 :scope._ao-indicator-item, :scope ._ao-indicator-item{z-index:1;white-space:nowrap;top:var(--indicator-top,0);bottom:var(--indicator-bottom,auto);transform:translate(var(--indicator-tx,50%), var(--indicator-ty,-50%)) translate(var(--indicator-offset-x,calc(-1 * var(--indicator-offset,0px))), var(--indicator-offset-y,var(--indicator-offset,0px)));position:absolute;inset-inline-start:var(--indicator-start,auto);inset-inline-end:var(--indicator-end,0)}
 :scope._ao-indicator-start, :scope ._ao-indicator-start{--indicator-start:0;--indicator-end:auto;--indicator-tx:-50%;--indicator-offset-x:var(--indicator-offset,0px)}
 :scope._ao-indicator-center, :scope ._ao-indicator-center{--indicator-start:50%;--indicator-end:auto;--indicator-tx:-50%;--indicator-offset-x:0px}
@@ -262,6 +301,8 @@
 :scope._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon{display:none}
 :scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied{display:inline-flex}
 :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied]{color:var(--color-success)}
+:scope._ao-separator, :scope ._ao-separator{margin:calc(var(--spacing) * 0);border-style:var(--tw-border-style);background-color:var(--color-border);border-width:0;flex-shrink:0;width:100%;height:1px;display:block}
+:scope._ao-separator-vertical, :scope ._ao-separator-vertical{align-self:stretch;width:1px;height:auto;min-height:1lh}
 :scope._ao-btn, :scope ._ao-btn{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);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);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;-webkit-user-select:none;user-select:none;transition-duration:.15s;display:inline-flex}
 @media (hover:hover){:scope._ao-btn:hover, :scope ._ao-btn:hover{background-color:var(--color-surface-strong)}}
 :scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
@@ -346,6 +387,15 @@
 :scope._ao-input-group>:not(:first-child), :scope ._ao-input-group>:not(:first-child){margin-left:-1px}
 :scope._ao-input-group>:focus, :scope ._ao-input-group>:focus, :scope._ao-input-group>:focus-within, :scope ._ao-input-group>:focus-within{z-index:10;position:relative}
 :scope._ao-input-group-addon, :scope ._ao-input-group-addon{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding-inline:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;white-space:nowrap;color:var(--color-text-muted);align-items:center;line-height:1;display:inline-flex}
+:scope._ao-input-icon, :scope ._ao-input-icon{width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted);--input-icon-inset:calc(var(--spacing) * 3);--input-icon-pad:calc(var(--spacing) * 9);align-items:center;display:inline-flex;position:relative}
+:scope._ao-input-icon:has(>._ao-input-sm), :scope ._ao-input-icon:has(>._ao-input-sm){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--input-icon-inset:calc(var(--spacing) * 2.5);--input-icon-pad:calc(var(--spacing) * 8)}
+: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: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:disabled)>:where(i,svg), :scope ._ao-input-icon:has(>._ao-input:disabled)>:where(i,svg){opacity:.5}
 :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)}}
@@ -464,6 +514,15 @@
 :scope._ao-card-info ._ao-card-title, :scope ._ao-card-info ._ao-card-title{color:var(--color-info)}
 :scope._ao-card-success ._ao-card-title, :scope ._ao-card-success ._ao-card-title{color:var(--color-success)}
 :scope._ao-card-danger ._ao-card-title, :scope ._ao-card-danger ._ao-card-title{color:var(--color-danger)}
+:scope._ao-card-media, :scope ._ao-card-media{flex-shrink:0;width:100%;display:block;overflow:hidden}
+:scope._ao-card-media:first-child, :scope ._ao-card-media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
+:scope._ao-card-media:last-child, :scope ._ao-card-media:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
+:scope._ao-card-media>:is(img,video), :scope ._ao-card-media>:is(img,video){object-fit:cover;width:100%;height:100%;display:block}
+:scope._ao-card-scroll>._ao-card-header, :scope ._ao-card-scroll>._ao-card-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-shrink:0}
+:scope._ao-card-scroll>._ao-card-body, :scope ._ao-card-scroll>._ao-card-body{min-height:calc(var(--spacing) * 0);flex:1;overflow-y:auto}
+:scope._ao-card-scroll>._ao-card-body:last-child, :scope ._ao-card-scroll>._ao-card-body:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
+:scope._ao-card-scroll>._ao-card-actions, :scope ._ao-card-scroll>._ao-card-actions{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-shrink:0}
+:scope._ao-card-compact._ao-card-scroll>:is(._ao-card-header,._ao-card-actions), :scope ._ao-card-compact._ao-card-scroll>:is(._ao-card-header,._ao-card-actions){padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2)}
 :scope._ao-stat-card, :scope ._ao-stat-card{gap:calc(var(--spacing) * 1);padding:calc(var(--spacing) * 4)}
 :scope._ao-stat-card-label, :scope ._ao-stat-card-label{align-items:center;gap: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-medium);font-weight:var(--font-weight-medium);color:var(--color-text-muted);display:flex}
 :scope._ao-stat-card-label>:is(i,svg), :scope ._ao-stat-card-label>:is(i,svg){flex-shrink:0}
@@ -648,6 +707,8 @@
 :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)}
 :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}
 :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)}
+:scope._ao-table :where(tfoot :is(td,th)), :scope ._ao-table :where(tfoot :is(td,th)){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
+:scope._ao-table :where(tfoot tr:first-child :is(td,th)), :scope ._ao-table :where(tfoot tr:first-child :is(td,th)){border-top-style:var(--tw-border-style);border-top-width:2px;border-top-color:var(--color-border-strong)}
 :scope._ao-table :where(td), :scope ._ao-table :where(td), :scope._ao-table-cell, :scope ._ao-table-cell{overflow-wrap:break-word}
 :scope._ao-table>:last-child>tr:last-child :where(td), :scope ._ao-table>:last-child>tr:last-child :where(td), :scope._ao-table>:last-child>tr:last-child ._ao-table-cell, :scope ._ao-table>:last-child>tr:last-child ._ao-table-cell{border-bottom-style:var(--tw-border-style);border-bottom-width:0}
 :scope._ao-table :where(th,td)[data-align=right], :scope ._ao-table :where(th,td)[data-align=right]{text-align:right}
@@ -753,6 +814,7 @@
 @media (min-width:64rem){:scope._ao-container, :scope ._ao-container{max-width:64rem}}
 @media (min-width:80rem){:scope._ao-container, :scope ._ao-container{max-width:80rem}}
 @media (min-width:96rem){:scope._ao-container, :scope ._ao-container{max-width:96rem}}
+:scope._ao-my-4, :scope ._ao-my-4{margin-block:calc(var(--spacing) * 4)}
 :scope._ao-block, :scope ._ao-block{display:block}
 :scope._ao-flex, :scope ._ao-flex{display:flex}
 :scope._ao-grid, :scope ._ao-grid{display:grid}
@@ -768,5 +830,4 @@
 :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-select-all, :scope ._ao-select-all{-webkit-user-select:all;user-select:all}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
   "keywords": [
     "components",
@@ -19,7 +19,8 @@
   "files": [
     "dist",
     "src",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "type": "module",
   "sideEffects": [

package/src/components/accordion.css

@@ -28,8 +28,7 @@
            hover:bg-surface-muted
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
     list-style: none;
-    /* Let a long label break and shrink rather than forcing the row wider than
-       the item (the chevron sits at `margin-left: auto`). */
+    /* Let a long label break and shrink instead of widening the row. */
     overflow-wrap: break-word;
     min-width: 0;
   }
@@ -38,14 +37,11 @@
     display: none;
   }
 
-  /* Keep a leading icon at its intrinsic size; the chevron is the `::after`
-     below, which is already `flex-shrink: 0`. */
   .accordion-summary > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Chevron — pushed to the end with margin-left: auto so any number of
-     leading items (label, optional icon) sit together on the start side. */
+  /* Chevron */
   .accordion-summary::after {
     content: "";
     width: 0.5rem;
@@ -64,16 +60,11 @@
 
   .accordion-content {
     @apply px-4 py-3 text-sm text-text border-t border-border;
-    /* Arbitrary body text — break long tokens instead of overflowing. */
     overflow-wrap: break-word;
   }
 
-  /* Smooth open/close via ::details-content. With interpolate-size enabled
-     on the parent, the height auto ↔ 0 transition animates instead of
-     snapping. content-visibility is pinned to visible so the closed content
-     still contributes to intrinsic width — without this, a shrink-to-fit
-     parent reflows narrower on close. Browsers without ::details-content
-     degrade to the native instant toggle. */
+  /* content-visibility stays visible so the closed content still contributes
+     intrinsic width — without it a shrink-to-fit parent reflows narrower on close. */
   .accordion-item::details-content {
     opacity: 0;
     height: 0;

package/src/components/alert.css

@@ -1,35 +1,38 @@
 @layer components {
   .alert {
     @apply flex flex-col gap-1 w-full px-3 py-2 rounded-md border text-sm text-text;
-    /* Inherited by the title, description, and any bare-text body so long
-       words/URLs break instead of overflowing the (often grid-tracked) body. */
     overflow-wrap: break-word;
   }
 
-  /* Leading icon as a direct child switches the layout to a two-column grid:
-     icon spans all rows on the left, title/description stack on the right.
-     No wrapper needed — works with `<i class="ti …">`, `@tabler/icons-react`,
-     or any other inline SVG. */
+  /* A leading icon switches the layout to a two-column grid: icon left, text right. */
   .alert:has(> :is(i, svg):first-child) {
     display: grid;
-    /* `minmax(0, 1fr)` (not the default `minmax(auto, 1fr)`) lets the text
-       column shrink below its longest word so the body wraps. */
+    /* `minmax(0, 1fr)` lets the text column shrink below its longest word. */
     grid-template-columns: auto minmax(0, 1fr);
     column-gap: 0.5rem;
     row-gap: 0.25rem;
     align-items: center;
   }
 
+  /* A trailing action switches to grid even without an icon. */
+  .alert:has(> .alert-action) {
+    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) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
   .alert > :is(i, svg):first-child {
     font-size: 1rem;
     line-height: 1.25;
   }
 
-  /* With a title/description, declare two explicit rows so the icon can span
-     them (`grid-row: 1 / -1` only resolves correctly against an explicit grid)
-     and force the text parts into column 2 so the description doesn't wrap
-     under the icon. */
-  .alert:has(> :is(i, svg):first-child):has(> .alert-title) {
+  /* 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)) {
     grid-template-rows: auto auto;
     align-items: start;
   }
@@ -38,20 +41,26 @@
     grid-row: 1 / -1;
   }
 
-  /* Grid items default to `min-width: auto` and won't shrink below their
-     longest word; `min-width: 0` lets the title/description wrap inside the
-     text column. */
+  /* The column-2 pin becomes icon-gated so title/description auto-place into
+     column 1 in an action-only grid. min-width stays unconditional. */
   .alert > :is(.alert-title, .alert-description) {
-    grid-column: 2;
     min-width: 0;
   }
+  .alert:has(> :is(i, svg):first-child) > :is(.alert-title, .alert-description) {
+    grid-column: 2;
+  }
 
-  /* Solid status fill — the variant color carries the signal, and the title,
-     leading icon, and body all sit on top in the matching `-content` color
-     (white on the colored accents, black on bright yellow). Title/icon inherit
-     that content color from the root, so no per-variant text rule is needed.
-     The description drops to 85% opacity to read as secondary text without
-     introducing a second hue. */
+  /* `-2` is the last explicit column in both grids; spans both rows, centered. */
+  .alert > .alert-action {
+    @apply font-medium whitespace-nowrap;
+    grid-column: -2;
+    grid-row: 1 / -1;
+    justify-self: end;
+    align-self: center;
+  }
+
+  /* Solid status fills. Title and icon inherit the `-content` color from the
+     root, so no per-variant text rule is needed. */
   .alert-info {
     @apply bg-info border-info text-info-content;
   }
@@ -75,4 +84,10 @@
   .alert-description {
     opacity: 0.85;
   }
+
+  /* `.link`'s blue is illegible on the solid fills; inherit the variant's content
+     color. Underline + weight carry the affordance. */
+  .alert .link {
+    @apply text-current hover:text-current hover:opacity-85 focus-visible:outline-current;
+  }
 }

package/src/components/app-shell.css

@@ -1,8 +1,6 @@
 @layer components {
-  /* Layout container — CSS grid with named areas. Sidebar/footer slots are
-     optional; modifier classes adjust the template. The sidebar column uses
-     `auto` so the .sidebar's own width drives it — collapse/peek modes change
-     the sidebar's intrinsic width instead of recomputing the grid here. */
+  /* The sidebar column is `auto` so the .sidebar's own width drives it —
+     collapse/peek modes change the sidebar's intrinsic width, not this grid. */
   .app-shell {
     --app-shell-sidebar-w: 240px;
     --app-shell-sidebar-w-collapsed: 56px;

package/src/components/avatar.css

@@ -0,0 +1,36 @@
+@layer components {
+  .avatar {
+    @apply relative inline-flex items-center justify-center
+           size-8 rounded-full overflow-hidden
+           bg-surface-strong text-text-muted
+           text-xs font-medium leading-none tracking-tight
+           select-none shrink-0;
+  }
+
+  /* Layered over the initials so they show until the image loads (no JS). */
+  .avatar > img {
+    @apply absolute inset-0 size-full object-cover;
+  }
+
+  .avatar-square {
+    @apply rounded-md;
+  }
+
+  .avatar-sm {
+    @apply size-6 text-[0.625rem];
+  }
+  .avatar-lg {
+    @apply size-10 text-sm;
+  }
+
+  /* Overlapping stack — later siblings paint on top. */
+  .avatar-group {
+    @apply inline-flex items-center;
+  }
+  .avatar-group > .avatar {
+    @apply ring-2 ring-surface;
+  }
+  .avatar-group > .avatar + .avatar {
+    @apply -ms-2;
+  }
+}

package/src/components/badge.css

@@ -12,11 +12,7 @@
     flex-shrink: 0;
   }
 
-  /* Variants — solid status fills, matching the alert palette so danger/
-     success/etc. stay coherent across status indicators and chips in tables.
-     Each sits on the full-strength status color with the matching `-content`
-     text (white on the colored accents, black on bright yellow). The bare
-     `.badge` (no modifier) renders the neutral look, folded into the base. */
+  /* Variants — solid status fills matching the alert palette; bare `.badge` is the neutral look. */
   .badge-info {
     @apply bg-info text-info-content border-info;
   }
@@ -38,6 +34,42 @@
     @apply bg-primary text-primary-content;
   }
 
+  /* Soft — composable modifier, pairs with a variant class; bare `.badge` is already the soft neutral. */
+  .badge-soft.badge-info {
+    @apply bg-info-muted text-info border-info-muted;
+  }
+  .badge-soft.badge-success {
+    @apply bg-success-muted text-success border-success-muted;
+  }
+  /* Yellow accent text fails contrast on the tinted surface — same constraint as stat-card. */
+  .badge-soft.badge-warning {
+    @apply bg-warning-muted text-text border-warning-muted;
+  }
+  .badge-soft.badge-danger {
+    @apply bg-danger-muted text-danger border-danger-muted;
+  }
+  .badge-soft.badge-primary {
+    @apply bg-primary-muted text-text border-primary-muted;
+  }
+
+  /* Remove button — sized to the chip; hover wash from `currentColor` works on solid, soft, and neutral fills. */
+  .badge-remove {
+    @apply inline-flex items-center justify-center shrink-0
+           size-3.5 -mr-1 rounded-full
+           text-inherit cursor-pointer
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus;
+  }
+  .badge-remove:hover {
+    background-color: color-mix(in oklab, currentColor 15%, transparent);
+  }
+  .badge-sm .badge-remove {
+    @apply size-3 -mr-0.5;
+  }
+  .badge-lg .badge-remove {
+    @apply size-4.5 -mr-1.5;
+  }
+
   /* Sizes (md is the default; modifiers override) */
   .badge-sm {
     @apply h-4 px-1.5 text-[0.625rem] gap-0.5;

package/src/components/brand-tile.css

@@ -6,4 +6,40 @@
            bg-system-accent text-system-accent-content
            shrink-0 select-none;
   }
+
+  /* Glyph sizing moves into CSS so vanilla drops the inline font-size
+     and React renders icons at 1em. */
+  .brand-tile > :is(i, svg) {
+    font-size: 14px;
+  }
+
+  .brand-tile-lg {
+    @apply size-10 rounded-md text-sm;
+  }
+  .brand-tile-lg > :is(i, svg) {
+    font-size: 20px;
+  }
+
+  /* Soft tints — *-muted fill, colored glyph. */
+  .brand-tile-soft {
+    @apply bg-system-accent-muted text-system-accent;
+  }
+  .brand-tile-info {
+    @apply bg-info-muted text-info;
+  }
+  .brand-tile-success {
+    @apply bg-success-muted text-success;
+  }
+  .brand-tile-danger {
+    @apply bg-danger-muted text-danger;
+  }
+
+  /* Image tile (shop logo) — :has() flips the accent fill to a bordered
+     surface; object-contain keeps arbitrary-ratio logos uncropped. */
+  .brand-tile:has(> img) {
+    @apply bg-surface border border-border p-0.5;
+  }
+  .brand-tile > img {
+    @apply size-full object-contain rounded-[inherit];
+  }
 }

package/src/components/breadcrumbs.css

@@ -1,9 +1,6 @@
 @layer components {
   .breadcrumbs {
     @apply text-sm text-text-muted;
-    /* Crumb labels are often free-form entity names/slugs — let a long one
-       break rather than overflow the (flex-wrap) row. Inherited by every item;
-       crumb/separator icons stay `flex-shrink: 0` below. */
     overflow-wrap: break-word;
   }
 
@@ -18,15 +15,11 @@
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
-  /* `aria-current` on the last item promotes it to body text weight. Non-links
-     stay non-interactive — same selector matches both <a aria-current> and
-     <span aria-current>. */
   .breadcrumb-item[aria-current="page"] {
     @apply text-text font-medium pointer-events-none;
   }
 
-  /* Slash separator. Use `<span class="breadcrumb-separator">` between items;
-     swap content via a child icon when you want a chevron instead. */
+  /* An empty separator renders a slash; a child icon replaces it. */
   .breadcrumb-separator {
     @apply inline-flex items-center text-text-muted/60 select-none;
   }
@@ -40,9 +33,7 @@
     height: 0.875rem;
   }
 
-  /* Setting a width on a flex item doesn't stop it from shrinking, so pin the
-     shrink factor too — keeps crumb and separator icons from squishing when a
-     long label tightens the row. */
+  /* A width alone doesn't stop a flex item from shrinking. */
   .breadcrumb-item > :is(i, svg),
   .breadcrumb-separator > :is(i, svg) {
     flex-shrink: 0;

package/src/components/button-group.css

@@ -7,11 +7,8 @@
     @apply rounded-none relative focus-visible:z-10;
   }
 
-  /* Split-button support: a <details class="menu"> child sits in the strip
-     alongside .btn children, with its .menu-trigger getting the same edge
-     treatment as the buttons around it. inline-flex on the details makes
-     the <summary> stretch vertically to match sibling .btn heights, so an
-     icon-only trigger doesn't end up shorter than its neighbours. */
+  /* Split buttons: a <details class="menu"> sits in the strip; inline-flex
+     stretches its <summary> to match sibling .btn heights. */
   .btn-group > .menu {
     @apply relative focus-visible:z-10;
     display: inline-flex;
@@ -21,10 +18,7 @@
     @apply rounded-none;
   }
 
-  /* Horizontal-only: overlap left edges, round outer left/right corners,
-     and paint the seam between adjacent items as a left-side divider.
-     Scoped with :not(.btn-group-vertical) so vertical groups (which share
-     the .btn-group class) don't inherit horizontal edge treatment. */
+  /* Horizontal-only — vertical groups also carry .btn-group, hence the :not() scope. */
   .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
   .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) {
     @apply -ml-px;
@@ -40,11 +34,8 @@
     @apply rounded-r-lg;
   }
 
-  /* Divider between adjacent items so same-coloured siblings (e.g. a
-     split button) read as separate actions. currentColor + color-mix
-     means the divider works across every .btn variant — light on
-     coloured buttons, dark on ghost/secondary — without per-variant
-     rules. */
+  /* Seam divider — color-mix on currentColor adapts to every .btn variant
+     without per-variant rules. */
   .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
   .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger {
     border-left-color: color-mix(in oklab, currentColor 25%, transparent);
@@ -78,11 +69,8 @@
     border-top-color: color-mix(in oklab, currentColor 25%, transparent);
   }
 
-  /* Full width — the group stretches across its container instead of
-     shrinking to its content. Horizontal groups split the row evenly so
-     every item is the same width regardless of label length; vertical
-     groups already stretch their items to the group's width, so widening
-     the group is enough. Mirrors the `fullWidth` treatment on tabs. */
+  /* Full width — horizontal items split the row evenly; vertical items
+     already stretch, so widening the group is enough. */
   .btn-group-full-width:not(.btn-group-vertical) {
     @apply flex w-full;
   }