docyard 0.9.0 → 1.0.0

data/lib/docyard/templates/assets/css/components/feedback.css

@@ -0,0 +1,126 @@
+.feedback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-3);
+  margin-top: var(--spacing-10);
+  padding-top: var(--spacing-6);
+}
+
+.feedback__question {
+  margin: 0;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--foreground);
+}
+
+.feedback__buttons {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.feedback__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  background-color: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition:
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.feedback__btn:hover {
+  background-color: var(--background);
+  border-color: var(--foreground);
+  color: var(--foreground);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.feedback__btn:active {
+  transform: scale(0.92);
+  transition:
+    transform 0.1s cubic-bezier(0.4, 0, 1, 1),
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+.feedback__btn:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.feedback__btn i[class*="ph-"] {
+  font-size: 1.125rem;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.feedback__btn.is-selected {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--primary-foreground);
+  pointer-events: none;
+}
+
+.feedback__btn.is-selected i[class*="ph-"] {
+  animation: feedbackPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.feedback__btn.is-not-selected {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+@keyframes feedbackPop {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.feedback__thanks {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  animation: feedbackFadeIn 0.3s ease;
+}
+
+.feedback__thanks[hidden] {
+  display: none;
+}
+
+@keyframes feedbackFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.feedback.is-submitted .feedback__question {
+  display: none;
+}
+
+.feedback.is-submitted .feedback__buttons {
+  display: none;
+}

data/lib/docyard/templates/assets/css/components/file-tree.css

@@ -51,7 +51,8 @@
   transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), background-color 0.1s ease;
 }
 
-.docyard-filetree__entry .docyard-icon {
+.docyard-filetree__entry .docyard-icon,
+.docyard-filetree__entry i[class*="ph-"] {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -66,12 +67,12 @@
   height: 100%;
 }
 
-.docyard-filetree__entry .docyard-icon-folder-open,
-.docyard-filetree__entry .docyard-icon-folder {
+.docyard-filetree__entry .ph-folder-open,
+.docyard-filetree__entry .ph-folder {
   color: var(--muted-foreground);
 }
 
-.docyard-filetree__entry .docyard-icon-file-text {
+.docyard-filetree__entry .ph-file-text {
   color: var(--muted-foreground);
   opacity: 0.6;
 }

data/lib/docyard/templates/assets/css/components/icon.css

@@ -1,3 +1,8 @@
+i[class*="ph-"] {
+  font-size: 1.15em;
+  vertical-align: -0.15em;
+}
+
 .docyard-icon {
   display: inline-flex;
   align-items: center;

data/lib/docyard/templates/assets/css/components/nav-menu.css

@@ -33,17 +33,23 @@
   background: var(--background);
   border-bottom: 1px solid var(--border);
   z-index: calc(var(--z-dropdown) + 1);
-  transform: translateY(-8px);
+  transform: scale(0.98) translateY(-8px);
+  transform-origin: top center;
   opacity: 0;
   pointer-events: none;
-  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
+  transition:
+    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.12s ease-out;
   box-shadow: var(--shadow-lg);
 }
 
 .nav-menu-dropdown.is-open {
-  transform: translateY(0);
+  transform: scale(1) translateY(0);
   opacity: 1;
   pointer-events: auto;
+  transition:
+    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.15s ease-out;
 }
 
 .nav-menu-content {
@@ -96,7 +102,8 @@
   opacity: 0.7;
 }
 
-.nav-menu-item-icon .docyard-icon {
+.nav-menu-item-icon .docyard-icon,
+.nav-menu-item-icon i[class*="ph-"] {
   width: 18px;
   height: 18px;
 }
@@ -225,6 +232,15 @@
   }
 }
 
+/* Adjust dropdown position when announcement banner is visible */
+body.has-announcement .nav-menu-overlay {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
+body.has-announcement .nav-menu-dropdown {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
 /* Reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   .nav-menu-overlay,

data/lib/docyard/templates/assets/css/components/navigation.css

@@ -43,6 +43,10 @@
   height: 1rem;
 }
 
+.nav-section-icon i[class*="ph-"] {
+  font-size: 1rem;
+}
+
 .sidebar nav ul {
   list-style: none;
   padding: 0;
@@ -242,11 +246,19 @@
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-[data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon {
+.nav-group-icon i[class*="ph-"] {
+  display: inline-block;
+  font-size: 1rem;
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+[data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon,
+[data-nav-toggle][aria-expanded="true"] .nav-group-icon i[class*="ph-"] {
   transform: rotate(90deg);
 }
 
-[data-nav-toggle][aria-expanded="false"] .nav-group-icon .docyard-icon {
+[data-nav-toggle][aria-expanded="false"] .nav-group-icon .docyard-icon,
+[data-nav-toggle][aria-expanded="false"] .nav-group-icon i[class*="ph-"] {
   transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
 }
 
@@ -302,6 +314,10 @@
   height: 1rem;
 }
 
+.nav-item-icon i[class*="ph-"] {
+  font-size: 1rem;
+}
+
 .nav-item-text {
   flex: 1;
   min-width: 0;
@@ -322,17 +338,23 @@
   height: 0.75rem;
 }
 
+.nav-item-external i[class*="ph-"] {
+  font-size: 0.75rem;
+}
+
 @media (prefers-reduced-motion: reduce) {
 
   .sidebar nav a,
   .nav-group-header,
   .nav-group-icon .docyard-icon,
+  .nav-group-icon i[class*="ph-"],
   .nav-group-children,
   .mobile-menu-toggle {
     transition: none;
   }
 
-  [data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon {
+  [data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon,
+  [data-nav-toggle][aria-expanded="true"] .nav-group-icon i[class*="ph-"] {
     transform: none;
   }
 }

data/lib/docyard/templates/assets/css/components/page-actions.css

@@ -0,0 +1,131 @@
+.page-actions {
+  margin-top: var(--spacing-6);
+  padding-top: var(--spacing-4);
+  border-top: 1px solid var(--border);
+}
+
+.page-actions__copy-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: 0;
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.page-actions__copy-btn:hover {
+  color: var(--foreground);
+}
+
+.page-actions__copy-btn .docyard-icon,
+.page-actions__copy-btn i[class*="ph-"] {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.page-actions__copy-btn i[class*="ph-"] {
+  display: inline-block;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.page-actions__copy-btn.is-copied i[class*="ph-"] {
+  color: var(--success, #22c55e);
+}
+
+.page-actions__copy-btn.is-copied .page-actions__copy-text {
+  color: var(--success, #22c55e);
+}
+
+.page-actions__copy-btn i.icon-animate-in {
+  animation: iconPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.page-actions__copy-btn i.icon-animate-out {
+  animation: iconPopOut 0.15s cubic-bezier(0.4, 0, 1, 1);
+}
+
+@keyframes iconPopIn {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes iconPopOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
+.page-actions__edit-link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.page-actions__edit-link:hover {
+  color: var(--foreground);
+}
+
+.page-actions__edit-link .docyard-icon,
+.page-actions__edit-link i[class*="ph-"] {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.page-actions__last-updated {
+  margin-top: var(--spacing-3);
+  font-size: var(--text-xs);
+  color: oklch(from var(--muted-foreground) l c h / 80%);
+}
+
+.page-actions__last-updated time {
+  cursor: help;
+  border-bottom: 1px dotted currentColor;
+}
+
+.page-actions-mobile {
+  display: none;
+}
+
+@media (max-width: 1280px) {
+  .page-actions-mobile {
+    display: block;
+    margin-top: var(--spacing-12);
+    text-align: center;
+  }
+
+  .page-actions-mobile .page-actions {
+    border-top: none;
+    padding-top: 0;
+    margin-top: 0;
+  }
+
+  .page-actions-mobile .page-actions__copy-btn,
+  .page-actions-mobile .page-actions__edit-link {
+    width: 100%;
+    justify-content: center;
+  }
+}

data/lib/docyard/templates/assets/css/components/prev-next.css

@@ -56,26 +56,31 @@
   justify-content: flex-end;
 }
 
-.pager-label .docyard-icon {
+.pager-label .docyard-icon,
+.pager-label i[class*="ph-"] {
   display: inline-flex;
   opacity: 0.5;
   transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-.pager-label .docyard-icon svg {
+.pager-label .docyard-icon svg,
+.pager-label i[class*="ph-"] {
   width: 1rem;
   height: 1rem;
 }
 
-.pager-link:hover .pager-label .docyard-icon {
+.pager-link:hover .pager-label .docyard-icon,
+.pager-link:hover .pager-label i[class*="ph-"] {
   opacity: 1;
 }
 
-.pager-link.prev:hover .pager-label .docyard-icon {
+.pager-link.prev:hover .pager-label .docyard-icon,
+.pager-link.prev:hover .pager-label i[class*="ph-"] {
   transform: translateX(-4px);
 }
 
-.pager-link.next:hover .pager-label .docyard-icon {
+.pager-link.next:hover .pager-label .docyard-icon,
+.pager-link.next:hover .pager-label i[class*="ph-"] {
   transform: translateX(4px);
 }
 
@@ -98,7 +103,8 @@
     padding: var(--spacing-3) var(--spacing-4);
   }
 
-  .pager-label .docyard-icon {
+  .pager-label .docyard-icon,
+  .pager-label i[class*="ph-"] {
     opacity: 0.5;
   }
 
@@ -110,7 +116,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .pager-link,
-  .pager-label .docyard-icon {
+  .pager-label .docyard-icon,
+  .pager-label i[class*="ph-"] {
     transition: none;
   }
 }

data/lib/docyard/templates/assets/css/components/search.css

@@ -134,6 +134,7 @@
   transform: scale(0.95) translateY(-10px);
   opacity: 0;
   transition: transform var(--transition-base), opacity var(--transition-fast);
+  will-change: transform, opacity;
 }
 
 .search-modal.is-open .search-modal-container {
@@ -247,14 +248,8 @@
   opacity: 0.4;
 }
 
-.search-empty-icon .docyard-icon {
-  width: 4rem;
-  height: 4rem;
-}
-
-.search-empty-icon .docyard-icon svg {
-  width: 100%;
-  height: 100%;
+.search-empty-icon {
+  font-size: var(--text-3xl);
 }
 
 .search-empty-title {
@@ -490,7 +485,7 @@
 
 @media (max-width: 1024px) {
 
-  
+
   .search-trigger {
     min-width: auto;
     width: 2.25rem;
@@ -515,7 +510,8 @@
     display: none;
   }
 
-  .search-trigger-icon .docyard-icon {
+  .search-trigger-icon .docyard-icon,
+  .search-trigger-icon i[class*="ph-"] {
     width: 1.25rem;
     height: 1.25rem;
   }

data/lib/docyard/templates/assets/css/components/tab-bar.css

@@ -62,7 +62,8 @@
   opacity: 0.7;
 }
 
-.tab-icon .docyard-icon {
+.tab-icon .docyard-icon,
+.tab-icon i[class*="ph-"] {
   width: 16px;
   height: 16px;
 }
@@ -89,10 +90,12 @@
   border-radius: 2px 2px 0 0;
   pointer-events: none;
   view-transition-name: tab-indicator;
+  opacity: 0;
 }
 
 .tab-indicator.is-ready {
-  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
 }
 
 /* View Transitions API - animate indicator between pages */
@@ -133,9 +136,9 @@
   top: calc(var(--header-height) + var(--tab-bar-height));
 }
 
-/* Hide tab bar on mobile */
+/* Hide tab bar on mobile - use .has-tabs for specificity to override .has-tabs .tab-bar { display: block } */
 @media (max-width: 1024px) {
-  .tab-bar {
+  .has-tabs .tab-bar {
     display: none;
   }
 

data/lib/docyard/templates/assets/css/components/table-of-contents.css

@@ -107,12 +107,19 @@
     box-shadow: 0 0 0 var(--ring-width) oklch(from var(--ring) l c h / 50%);
   }
 
-  .secondary-header-toc-toggle svg {
+  .secondary-header-toc-toggle .docyard-icon {
     transform: rotate(-90deg);
     transition: transform var(--transition-base);
   }
 
-  .secondary-header-toc-toggle[aria-expanded="true"] svg {
+  .secondary-header-toc-toggle i[class*="ph-"] {
+    display: inline-block;
+    transform: rotate(-90deg);
+    transition: transform var(--transition-base);
+  }
+
+  .secondary-header-toc-toggle[aria-expanded="true"] .docyard-icon,
+  .secondary-header-toc-toggle[aria-expanded="true"] i[class*="ph-"] {
     transform: rotate(0deg);
   }
 }
@@ -216,7 +223,6 @@
   }
 
   .docyard-toc__nav {
-    display: none;
     position: fixed;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -226,19 +232,26 @@
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
     z-index: 9999;
-    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 0.2s ease,
-      transform 0.2s ease;
-    transform: translateY(-8px);
+    transform: scale(0.95) translateY(-8px);
+    transform-origin: top right;
     opacity: 0;
+    visibility: hidden;
     pointer-events: none;
+    transition:
+      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.15s ease-out,
+      visibility 0.2s;
   }
 
   .docyard-toc__nav.is-expanded {
-    display: block;
+    transform: scale(1) translateY(0);
     opacity: 1;
-    transform: translateY(0);
+    visibility: visible;
     pointer-events: auto;
+    transition:
+      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+      opacity 0.2s ease-out,
+      visibility 0s;
   }
 }
 
@@ -249,6 +262,11 @@
     width: 280px;
     max-height: calc(100vh - var(--header-height) - 3rem - var(--spacing-8));
   }
+
+  .has-tabs .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--tab-bar-height) + 3rem + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--tab-bar-height) - 3rem - var(--spacing-8));
+  }
 }
 
 @media (max-width: 1024px) {
@@ -257,6 +275,7 @@
     left: var(--spacing-4);
     right: var(--spacing-4);
     max-height: calc(100vh - var(--header-height) - 3rem - var(--spacing-2));
+    transform-origin: top center;
   }
 
   .secondary-header.shift-up ~ .layout .docyard-toc__nav {
@@ -270,13 +289,40 @@
   }
 }
 
+/* Adjust TOC dropdown position when announcement banner is visible */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  body.has-announcement .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--announcement-height) + 3rem + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--announcement-height) - 3rem - var(--spacing-8));
+  }
+
+  body.has-announcement.has-tabs .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height) + 3rem + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--tab-bar-height) - var(--announcement-height) - 3rem - var(--spacing-8));
+  }
+}
+
+@media (max-width: 1024px) {
+  body.has-announcement .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--announcement-height) + 3rem - 2px);
+    max-height: calc(100vh - var(--header-height) - var(--announcement-height) - 3rem - var(--spacing-2));
+  }
+
+  body.has-announcement .secondary-header.shift-up ~ .layout .docyard-toc__nav {
+    top: calc(var(--announcement-height) + 3rem - 2px);
+    max-height: calc(100vh - var(--announcement-height) - 3rem - var(--spacing-2));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .docyard-toc__link,
-  .docyard-toc__indicator {
+  .docyard-toc__indicator,
+  .docyard-toc__nav {
     transition: none;
   }
 
-  .secondary-header-toc-toggle svg {
+  .secondary-header-toc-toggle .docyard-icon,
+  .secondary-header-toc-toggle i[class*="ph-"] {
     transition: none;
   }
 }