style: MD3 scrollbar — thin 6px rounded thumb, theme-aware colors

- Webkit: custom ::-webkit-scrollbar with outline color, hover darkens
- Firefox: scrollbar-width: thin + scrollbar-color
- Transparent track, transparent corner
- Uses MD3 tokens (outline, on-surface-variant, shape-corner-full)

Author: GiuseppeScottoLavina

demo/index.html

@@ -76,10 +76,10 @@
         /* Material Symbols font removed - icons use inline SVG now */
     </style>
     <!-- Preload + async CSS: 12KB loads instantly from preload, media trick prevents render-blocking -->
-    <link rel="preload" as="style" href="../dist/agentui.css?v=0.1.201">
-    <link rel="stylesheet" href="../dist/agentui.css?v=0.1.201" media="print" onload="this.media='all'">
+    <link rel="preload" as="style" href="../dist/agentui.css?v=0.1.202">
+    <link rel="stylesheet" href="../dist/agentui.css?v=0.1.202" media="print" onload="this.media='all'">
     <noscript>
-        <link rel="stylesheet" href="../dist/agentui.css?v=0.1.201">
+        <link rel="stylesheet" href="../dist/agentui.css?v=0.1.202">
     </noscript>
     <style>
         /* Size-adjusted Arial fallback to match Roboto metrics (from Capsize) */
@@ -508,7 +508,7 @@ <h1 class="page-title" style="text-align: center;">AgentUI</h1>
 
         <!-- Footer -->
         <footer slot="footer" class="app-footer">
-            <p>AgentUI <span id="app-version" style="opacity: 0.5; font-size: 0.75rem;">v0.1.201</span> • Apache-2.0 •
+            <p>AgentUI <span id="app-version" style="opacity: 0.5; font-size: 0.75rem;">v0.1.202</span> • Apache-2.0 •
                 Made with ❤️</p>
         </footer>
     </au-layout>
@@ -527,7 +527,7 @@ <h1 class="page-title" style="text-align: center;">AgentUI</h1>
             if (loadedRoutes.has(name)) return;
             loadedRoutes.add(name);
             const start = performance.now();
-            await import('../dist/routes/' + name + '.js?v=0.1.201');
+            await import('../dist/routes/' + name + '.js?v=0.1.202');
             console.log('[Shell] Route ' + name + '.js loaded in ' + (performance.now() - start).toFixed(0) + 'ms');
         }
 

dist/component-schema.json

@@ -4,7 +4,7 @@
   "title": "AgentUI Component Schema",
   "description": "Machine-readable schema for AI agent component discovery",
   "version": "0.1.147",
-  "generatedAt": "2026-02-15T10:01:26.080Z",
+  "generatedAt": "2026-02-15T10:14:08.758Z",
   "componentCount": 50,
   "components": {
     "au-card": {

dist/styles/common.css

@@ -19,6 +19,43 @@ body {
     margin: 0;
 }
 
+/* ============================================================================
+   MD3 SCROLLBAR STYLING
+   Thin overlay scrollbars with Material Design aesthetics.
+   Supports Webkit (Chrome/Safari/Edge) and Firefox.
+   ============================================================================ */
+
+/* Firefox: thin scrollbar with theme-aware colors */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--md-sys-color-outline) transparent;
+}
+
+/* Webkit: custom scrollbar styling */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--md-sys-color-outline);
+    border-radius: var(--md-sys-shape-corner-full);
+    transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--md-sys-color-on-surface-variant);
+}
+
+/* Hide scrollbar on very small containers (e.g., chips, buttons) */
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
 /* ============================================================================
    MD3 STATE LAYER UTILITIES (Reusable across components)
    Reference: https://m3.material.io/foundations/interaction/states