docyard 0.7.0 → 0.8.0

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

@@ -1,199 +1,255 @@
-/* Navigation Components */
-
-/* Sidebar navigation */
 .sidebar nav {
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
-/* Section headers */
 .nav-section {
-  margin-bottom: 0;
-  padding-bottom: var(--space-5);
-}
-
-.nav-section:last-child {
-  padding-bottom: 0;
-}
-
-.nav-section:first-child {
-  margin-top: 0;
+  padding: var(--spacing-2);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  position: relative;
+  overflow: hidden;
 }
 
 .nav-section-title {
-  font-size: 0.6875rem;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  padding: 0 var(--space-3);
-  margin-bottom: var(--space-3);
-  margin-top: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: 2rem;
+  padding: 0 var(--spacing-2);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: oklch(from var(--sidebar-foreground) l c h / 70%);
+  border-radius: var(--radius-md);
+  margin: 0;
+  flex-shrink: 0;
+  outline: none;
+  transition: margin var(--transition-base), opacity var(--transition-base);
   pointer-events: none;
   user-select: none;
 }
 
-.nav-section:not(:first-child) {
-  margin-top: var(--space-3);
-  padding-top: 0;
+.nav-section-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-.nav-section:not(:first-child) .nav-section-title {
-  margin-top: 0;
+.nav-section-icon .docyard-icon {
+  width: 1rem;
+  height: 1rem;
 }
 
 .sidebar nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  gap: var(--spacing-1);
 }
 
 .sidebar nav li {
   margin: 0;
+  position: relative;
+  min-width: 0;
 }
 
 .sidebar nav a {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  padding: 0.5rem var(--space-3);
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  gap: var(--spacing-2);
+  height: 2.25rem;
+  padding: var(--spacing-2);
+  font-size: var(--text-sm);
+  color: var(--sidebar-foreground);
   text-decoration: none;
-  border-radius: var(--radius-md);
-  transition: color var(--transition-fast);
-  line-height: 1.4;
-  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-fast);
+  line-height: 1.5;
+  font-weight: var(--font-normal);
+  width: 100%;
+  text-align: left;
+  overflow: hidden;
+  outline: none;
 }
 
 .sidebar nav a:hover {
-  color: var(--color-text);
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
   text-decoration: none;
 }
 
+.sidebar nav a:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
 .sidebar nav a.active {
-  color: var(--color-primary);
-  font-weight: var(--font-weight-semibold);
+  background-color: oklch(from var(--sidebar-primary) l c h / 10%);
+  color: var(--sidebar-primary);
+  text-shadow: -0.2px 0 0 currentColor, 0.2px 0 0 currentColor;
 }
 
-/* Nested navigation */
-.sidebar nav ul ul {
-  margin-left: var(--space-3);
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
-  padding-left: var(--space-4);
-  position: relative;
+.sidebar nav a.active:hover {
+  background-color: oklch(from var(--sidebar-primary) l c h / 10%);
+  color: var(--sidebar-primary);
 }
 
-.sidebar nav ul ul::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background-color: rgba(148, 163, 184, 0.24);
+.sidebar nav ul ul {
+  margin-left: 0.875rem;
+  margin-right: 0.875rem;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-left: 1px solid var(--sidebar-border);
+  gap: var(--spacing-1);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: auto;
 }
 
 .sidebar nav ul ul li {
   position: relative;
-}
-
-/* Active indicator with :has() support */
-@supports selector(:has(*)) {
-  .sidebar nav ul ul li:has(> a.active)::before {
-    content: '';
-    position: absolute;
-    left: calc(-1 * var(--space-4));
-    top: 0;
-    bottom: 0;
-    width: 2px;
-    background-color: var(--color-primary);
-    z-index: 1;
-  }
+  min-width: 0;
 }
 
 .sidebar nav ul ul a {
-  font-size: 0.8125rem;
-  padding: 0.375rem var(--space-3);
-  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: 1.75rem;
+  padding: 0 var(--spacing-2);
+  font-size: var(--text-sm);
+  color: var(--sidebar-foreground);
   line-height: 1.5;
-  font-weight: var(--font-weight-normal);
-  position: relative;
+  font-weight: var(--font-normal);
+  border-radius: var(--radius-md);
+  min-width: 0;
+  overflow: hidden;
 }
 
 .sidebar nav ul ul a:hover {
-  color: var(--color-text);
-  background-color: transparent;
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
 }
 
 .sidebar nav ul ul a.active {
-  color: var(--color-primary);
-  background-color: transparent;
-  font-weight: var(--font-weight-semibold);
+  background-color: oklch(from var(--sidebar-primary) l c h / 10%);
+  color: var(--sidebar-primary);
+  text-shadow: -0.2px 0 0 currentColor, 0.2px 0 0 currentColor;
 }
 
-/* Top level nav items spacing */
-.sidebar nav>ul>li {
-  margin-bottom: 0.125rem;
+.nav-nested-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-nested-section-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: 2rem;
+  padding: 0 var(--spacing-2);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: oklch(from var(--sidebar-foreground) l c h / 70%);
+  margin: var(--spacing-2) 0 0 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  user-select: none;
 }
 
-.sidebar nav ul li {
-  margin-bottom: 0;
+.nav-nested-section-children {
+  display: flex;
+  flex-direction: column;
 }
 
-/* Collapsible/Accordion items */
-.nav-group-toggle {
+.nav-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-group-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 0;
   width: 100%;
-  padding: 0.5rem var(--space-3);
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  border-radius: var(--radius-md);
-  transition: color var(--transition-fast);
-  line-height: 1.4;
-  font-weight: var(--font-weight-medium);
-  background: none;
-  border: none;
+  height: 2.25rem;
+  padding: var(--spacing-2);
+  font-size: var(--text-sm);
+  color: var(--sidebar-foreground);
+  border-radius: var(--radius-lg);
+  line-height: 1.5;
+  font-weight: var(--font-normal);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
+  outline: none;
+  transition: all var(--transition-fast);
 }
 
-.nav-group-title {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex: 1;
+.nav-group-header--link {
+  background: transparent;
+}
+
+.nav-group-header--button {
+  background: transparent;
+  border: none;
+}
+
+.nav-group-header:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+  text-decoration: none;
+}
+
+.nav-group-header:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
 }
 
-.nav-group-toggle:hover {
-  color: var(--color-text);
+.nav-group-header.active {
+  background-color: oklch(from var(--sidebar-primary) l c h / 10%);
+  color: var(--sidebar-primary);
+  text-shadow: -0.2px 0 0 currentColor, 0.2px 0 0 currentColor;
 }
 
-.nav-group-toggle:focus-visible {
-  outline: 0.125rem solid var(--color-primary);
-  outline-offset: 0.125rem;
+.nav-group-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex: 1;
+  min-width: 0;
 }
 
 .nav-group-icon {
   display: inline-flex;
-  color: var(--color-text-tertiary);
+  color: var(--muted-foreground);
   flex-shrink: 0;
 }
 
 .nav-group-icon .docyard-icon {
   width: 1rem;
   height: 1rem;
-  transition: transform var(--transition-fast);
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-.nav-group-toggle[aria-expanded="true"] .nav-group-icon .docyard-icon {
+[data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon {
   transform: rotate(90deg);
 }
 
+[data-nav-toggle][aria-expanded="false"] .nav-group-icon .docyard-icon {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
+}
+
 .nav-group-children {
   overflow: hidden;
   transition: max-height var(--transition-base);
@@ -203,81 +259,42 @@
   max-height: 0;
 }
 
-/* Mobile menu toggle button */
 .mobile-menu-toggle {
   display: none;
   background: transparent;
   border: none;
-  padding: var(--space-2);
+  padding: var(--spacing-2);
   cursor: pointer;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-fast);
+  border-radius: var(--radius-4xl);
+  color: var(--muted-foreground);
+  transition: all var(--transition-fast);
 }
 
 .mobile-menu-toggle:hover {
-  background: var(--color-bg-secondary);
+  background: var(--muted);
+  color: var(--foreground);
+}
+
+.mobile-menu-toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ring-width) oklch(from var(--ring) l c h / 50%);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
   .mobile-menu-toggle {
     display: flex;
   }
 }
 
-/* Sidebar footer */
-.sidebar-footer {
-  margin-top: auto;
-  padding: var(--space-3) var(--space-5) var(--space-5);
-}
-
-.sidebar-footer-link {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  text-decoration: none;
-  padding: var(--space-2);
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-fast);
-}
-
-.sidebar-footer-link:hover {
-  text-decoration: none;
-}
-
-.sidebar-footer-link:hover .external-icon {
-  opacity: 0.5;
-}
-
-.sidebar-footer-text {
-  flex: 1;
-}
-
-.sidebar-footer-title {
-  margin: 0;
-  font-size: 0.6875rem;
-  color: var(--color-text-tertiary);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.4;
-}
-
-.external-icon {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--color-text-secondary);
-  opacity: 0;
-  transition: opacity var(--transition-fast);
-  flex-shrink: 0;
-}
-
-/* Icon styling */
 .nav-item-icon {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
+  color: inherit;
 }
 
 .nav-item-icon .docyard-icon {
@@ -287,6 +304,10 @@
 
 .nav-item-text {
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .nav-item-external {
@@ -301,19 +322,17 @@
   height: 0.75rem;
 }
 
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
+
   .sidebar nav a,
-  .nav-group-toggle,
+  .nav-group-header,
   .nav-group-icon .docyard-icon,
   .nav-group-children,
-  .mobile-menu-toggle,
-  .sidebar-footer-link,
-  .external-icon {
+  .mobile-menu-toggle {
     transition: none;
   }
 
-  .nav-group-toggle[aria-expanded="true"] .nav-group-icon .docyard-icon {
+  [data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon {
     transform: none;
   }
 }

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

@@ -1,83 +1,114 @@
-/* Previous/Next Navigation Footer */
-
 .doc-footer {
-  margin-top: 48px;
-  padding-top: 24px;
-  border-top: 1px solid var(--color-border);
+  margin-top: var(--spacing-12);
+  padding-top: var(--spacing-8);
+  border-top: 1px solid var(--hr-color);
 }
 
 .pager {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
+  display: flex;
+  gap: var(--spacing-4);
 }
 
 .pager-link {
-  display: block;
-  padding: 16px;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  text-decoration: none !important;
-  transition: border-color 0.25s ease, background-color 0.25s ease;
-  outline: none;
-  background-color: transparent;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  padding: var(--spacing-4) var(--spacing-5);
+  border-radius: var(--radius-xl);
+  text-decoration: none;
+  background: transparent;
+  transition: background 0.3s ease;
 }
 
 .pager-link:hover {
-  border-color: var(--color-primary);
-  background-color: var(--color-background-soft);
+  background: var(--muted);
+}
+
+.pager-link:active {
+  background: oklch(from var(--muted) calc(l - 0.02) c h);
 }
 
 .pager-link:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-  border-radius: 8px;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .pager-link.prev {
-  text-align: left;
+  align-items: flex-start;
 }
 
 .pager-link.next {
+  align-items: flex-end;
   text-align: right;
 }
 
 .pager-label {
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  margin-bottom: 0px;
-  text-decoration: none !important;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--muted-foreground);
+}
+
+.pager-link.next .pager-label {
+  justify-content: flex-end;
+}
+
+.pager-label .docyard-icon {
+  display: inline-flex;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.pager-label .docyard-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.pager-link.prev .pager-label .docyard-icon {
+  transform: translateX(6px);
+}
+
+.pager-link.next .pager-label .docyard-icon {
+  transform: translateX(-6px);
+}
+
+.pager-link:hover .pager-label .docyard-icon {
+  opacity: 1;
+  transform: translateX(0);
 }
 
 .pager-title {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-primary);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--foreground);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  text-decoration: none !important;
 }
 
-/* Mobile responsive */
-@media (max-width: 640px) {
-  .doc-footer {
-    margin-top: 48px;
+@media (max-width: 1024px) {
+  .pager {
+    flex-direction: column;
+    gap: var(--spacing-2);
   }
 
-  .pager {
-    grid-template-columns: 1fr;
+  .pager-link {
+    padding: var(--spacing-3) var(--spacing-4);
   }
 
-  .pager-link.next {
-    margin-left: 0;
+  
+  .pager-label .docyard-icon {
+    opacity: 0.6;
+    transform: translateX(0);
   }
 
-  .pager-link {
-    width: 100%;
+  .pager-link:hover .pager-label .docyard-icon {
+    opacity: 1;
   }
 
   .pager-title {
@@ -86,21 +117,19 @@
   }
 }
 
-/* Reduced motion accessibility */
 @media (prefers-reduced-motion: reduce) {
-  .pager-link {
+  .pager-link,
+  .pager-label .docyard-icon {
     transition: none;
   }
 }
 
-/* Print: hide navigation */
 @media print {
   .doc-footer {
     display: none;
   }
 }
 
-/* Visually hidden utility (for screen readers) */
 .visually-hidden {
   position: absolute;
   width: 1px;