Merge pull request #17 from shellui-dev/feat/animation-polish

feat: animation polish — view-transitions, sidebar collapse animation, reduced-motion guard, copy-icon bounce

Author: Shewart

src/ShellDocs.Components/Chrome/DocsSidebar.razor.css

@@ -120,6 +120,22 @@
     transform: rotate(90deg);
 }
 
+/* Toggleable section content — grid-rows 0fr→1fr animates to natural height
+   without needing a fixed max-height. The inner wrapper carries the actual
+   items and MUST have `min-height: 0` so it can collapse cleanly. */
+::deep .sidebar-section-shell {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+::deep .sidebar-section-shell[data-open="true"] {
+    grid-template-rows: 1fr;
+}
+::deep .sidebar-section-shell > .sidebar-section-items {
+    overflow: hidden;
+    min-height: 0;
+}
+
 ::deep .sidebar-section-items {
     display: flex;
     flex-direction: column;

src/ShellDocs.Components/Chrome/DocsSidebarNode.razor

@@ -23,7 +23,18 @@ else if (Node.Kind == NodeKind.Section)
                 </div>
             }
         }
-        @if (!_isToggleable || _isOpen)
+        @if (_isToggleable)
+        {
+            <div class="sidebar-section-shell" data-open="@(_isOpen ? "true" : "false")">
+                <div class="sidebar-section-items">
+                    @foreach (var child in Node.Children)
+                    {
+                        <DocsSidebarNode Node="child" Depth="@(Depth + 1)" CurrentPath="@CurrentPath" />
+                    }
+                </div>
+            </div>
+        }
+        else
         {
             <div class="sidebar-section-items">
                 @foreach (var child in Node.Children)

src/ShellDocs.Components/Content/ComponentPreview.razor.css

@@ -127,4 +127,5 @@
     border-color: color-mix(in oklch, var(--border) 60%, var(--foreground));
 }
 .component-preview-copy.copied { color: var(--success, oklch(0.723 0.219 149.579)); }
-.component-preview-copy svg { width: 0.8125rem; height: 0.8125rem; }
+.component-preview-copy svg { width: 0.8125rem; height: 0.8125rem; transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1); }
+.component-preview-copy.copied svg { transform: scale(1.15); }

src/ShellDocs.Components/Content/PreviewFrame.razor.css

@@ -116,4 +116,5 @@
     border-color: color-mix(in oklch, var(--border) 60%, var(--foreground));
 }
 .preview-copy.copied { color: var(--success, oklch(0.723 0.219 149.579)); }
-.preview-copy svg { width: 0.8125rem; height: 0.8125rem; }
+.preview-copy svg { width: 0.8125rem; height: 0.8125rem; transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1); }
+.preview-copy.copied svg { transform: scale(1.15); }

src/ShellDocs.Components/wwwroot/shelldocs-theme.css

@@ -193,3 +193,26 @@ pre.shiki,
 pre.shiki span { color: var(--shiki-light); }
 :root.dark pre.shiki,
 :root.dark pre.shiki span { color: var(--shiki-dark); }
+
+/* View-transitions — the browser diffs old vs new page and cross-fades
+   automatically when Blazor enhanced navigation swaps the DOM. Progressive:
+   Chromium supports today; other engines just no-op the pseudo rules. */
+@view-transition { navigation: auto; }
+::view-transition-old(root),
+::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
+
+/* Global reduced-motion guard — respects the OS preference so animations
+   collapse to instant while transitions still fire (kept at 0.01ms so JS
+   `transitionend` handlers still trigger). */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+    ::view-transition-old(root),
+    ::view-transition-new(root) { animation: none !important; }
+}