docyard 0.4.0 → 0.6.0

data/lib/docyard/templates/assets/css/components/code-block.css

@@ -1,4 +1,4 @@
-/* Code Block Component with Copy Button */
+/* Code Block Component */
 
 .docyard-code-block {
   position: relative;
@@ -9,17 +9,410 @@
   margin: 0;
 }
 
-/* Inside tabs - remove wrapper margin when code block is only child */
-.docyard-tabs__panel:has(> [class*="language-"]:only-child) .docyard-code-block {
+/* Titled Code Block Layout */
+.docyard-code-block--titled {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background-color: var(--color-code-bg);
+}
+
+.docyard-code-block--titled .docyard-code-block__body {
+  display: block;
+}
+
+.docyard-code-block--titled .docyard-code-block__content {
+  display: block;
+}
+
+.docyard-code-block--titled .highlight {
   margin: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
 }
 
-/* Inside tabs with mixed content - use normal spacing */
-.docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) .docyard-code-block {
-  margin: var(--space-4) 0;
+.docyard-code-block--titled .highlight pre {
+  margin: 0;
+}
+
+.docyard-code-block--titled .highlight pre code {
+  display: block;
+  padding: var(--space-4);
+}
+
+/* Code Block Header */
+.docyard-code-block__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+}
+
+.docyard-code-block__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.docyard-code-block__icon .docyard-icon {
+  width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+}
+
+.docyard-code-block__icon .docyard-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.docyard-code-block__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Copy button in header */
+.docyard-code-block__header .docyard-code-block__copy {
+  position: relative;
+  top: auto;
+  right: auto;
+  flex-shrink: 0;
+}
+
+/* Body wrapper for titled blocks */
+.docyard-code-block__body {
+  position: relative;
+}
+
+/* Line Numbers Layout */
+.docyard-code-block--line-numbers {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-code-bg);
+  overflow: hidden;
+}
+
+.docyard-code-block--line-numbers .docyard-code-block__body {
+  display: flex;
+}
+
+.docyard-code-block--line-numbers .highlight {
+  border: none;
+  border-radius: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.docyard-code-block__lines {
+  flex-shrink: 0;
+  padding: var(--space-4) 0;
+  border-right: 1px solid var(--color-border);
+  text-align: right;
+  user-select: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+  background-color: var(--color-code-bg);
+}
+
+.docyard-code-block__lines span {
+  display: block;
+  padding: 0 var(--space-3);
+  min-width: 2.5rem;
+}
+
+.docyard-code-block__content {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+/* Line Highlighting */
+.docyard-code-line {
+  display: block;
+}
+
+.docyard-code-line--highlighted {
+  background-color: rgba(var(--color-primary-rgb), 0.1);
+  border-left: 3px solid var(--color-primary);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+/* Highlighted line number */
+.docyard-code-block__line--highlighted {
+  background-color: rgba(var(--color-primary-rgb), 0.15);
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+/* Diff line styles */
+.docyard-code-line--diff-add {
+  background-color: var(--color-diff-add-bg);
+  border-left: 3px solid var(--color-diff-add-border);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+.docyard-code-line--diff-remove {
+  background-color: var(--color-diff-remove-bg);
+  border-left: 3px solid var(--color-diff-remove-border);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+/* Error/Warning line styles */
+.docyard-code-line--error {
+  background-color: var(--color-code-error-bg, rgba(239, 68, 68, 0.15));
+  border-left: 3px solid var(--color-code-error-border, #ef4444);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+.docyard-code-line--warning {
+  background-color: var(--color-code-warning-bg, rgba(245, 158, 11, 0.15));
+  border-left: 3px solid var(--color-code-warning-border, #f59e0b);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+/* Diff gutter indicators */
+.docyard-code-block__line--diff-add {
+  background-color: var(--color-diff-add-gutter-bg);
+  color: var(--color-diff-add-indicator);
+  font-weight: 500;
+}
+
+.docyard-code-block__line--diff-remove {
+  background-color: var(--color-diff-remove-gutter-bg);
+  color: var(--color-diff-remove-indicator);
+  font-weight: 500;
+}
+
+/* Error/Warning line number indicators */
+.docyard-code-block__line--error {
+  background-color: var(--color-code-error-gutter-bg, rgba(239, 68, 68, 0.2));
+  color: var(--color-code-error-indicator, #991b1b);
+  font-weight: 500;
+}
+
+.docyard-code-block__line--warning {
+  background-color: var(--color-code-warning-gutter-bg, rgba(245, 158, 11, 0.2));
+  color: var(--color-code-warning-indicator, #78350f);
+  font-weight: 500;
+}
+
+/* Diff-only gutter */
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-code-bg);
+  overflow: hidden;
+}
+
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-block__body {
+  display: flex;
+}
+
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .highlight {
+  border: none;
+  border-radius: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.docyard-code-block__diff-gutter {
+  flex-shrink: 0;
+  padding: var(--space-4) 0;
+  border-right: 1px solid var(--color-border);
+  text-align: center;
+  user-select: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+  background-color: var(--color-code-bg);
+}
+
+.docyard-code-block__diff-gutter span {
+  display: block;
+  padding: 0 var(--space-2);
+  min-width: 1.5rem;
 }
 
-/* Inside callouts - use callout's spacing */
+.docyard-code-block__diff-indicator--add {
+  background-color: var(--color-diff-add-gutter-bg);
+  color: var(--color-diff-add-indicator);
+  font-weight: 600;
+}
+
+.docyard-code-block__diff-indicator--remove {
+  background-color: var(--color-diff-remove-gutter-bg);
+  color: var(--color-diff-remove-indicator);
+  font-weight: 600;
+}
+
+/* With line numbers - reset margins, they extend via negative margin */
+.docyard-code-block--line-numbers .docyard-code-line {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.docyard-code-block--line-numbers .docyard-code-line--highlighted,
+.docyard-code-block--line-numbers .docyard-code-line--diff-add,
+.docyard-code-block--line-numbers .docyard-code-line--diff-remove,
+.docyard-code-block--line-numbers .docyard-code-line--error,
+.docyard-code-block--line-numbers .docyard-code-line--warning {
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+}
+
+/* With diff gutter - reset margins, they extend via negative margin */
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line--diff-add,
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line--diff-remove {
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+}
+
+/* Error/Warning blocks without line numbers */
+.docyard-code-block--has-error:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff),
+.docyard-code-block--has-warning:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-code-bg);
+  overflow: hidden;
+}
+
+.docyard-code-block--has-error:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) .highlight,
+.docyard-code-block--has-warning:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) .highlight {
+  border: none;
+  border-radius: 0;
+}
+
+.docyard-code-block__content .highlight {
+  background-color: transparent;
+}
+
+/* Focus Effect */
+.docyard-code-block--has-focus .docyard-code-line {
+  opacity: 0.4;
+  filter: blur(0.5px);
+  transition: opacity 0.2s ease, filter 0.2s ease;
+}
+
+.docyard-code-block--has-focus .docyard-code-line.docyard-code-line--focus {
+  opacity: 1;
+  filter: none;
+}
+
+/* On hover, reveal all lines */
+.docyard-code-block--has-focus:hover .docyard-code-line {
+  opacity: 1;
+  filter: none;
+}
+
+/* Dark mode line numbers */
+.dark .docyard-code-block--line-numbers {
+  background-color: #161b22;
+}
+
+.dark .docyard-code-block__lines {
+  background-color: #161b22;
+  border-right-color: var(--color-border);
+}
+
+/* Dark mode diff */
+.dark .docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
+  background-color: #161b22;
+}
+
+.dark .docyard-code-block__diff-gutter {
+  background-color: #161b22;
+  border-right-color: var(--color-border);
+}
+
+/* Dark mode titled block */
+.dark .docyard-code-block--titled {
+  background-color: #161b22;
+}
+
+.dark .docyard-code-block__header {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* Titled block with line numbers */
+.docyard-code-block--titled.docyard-code-block--line-numbers {
+  display: block;
+  border: 1px solid var(--color-border);
+}
+
+.docyard-code-block--titled.docyard-code-block--line-numbers .docyard-code-block__body {
+  display: flex;
+}
+
+.docyard-code-block--titled.docyard-code-block--line-numbers .highlight {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Titled block with diff */
+.docyard-code-block--titled.docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
+  display: block;
+  border: 1px solid var(--color-border);
+}
+
+.docyard-code-block--titled.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-block__body {
+  display: flex;
+}
+
+.docyard-code-block--titled.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .highlight {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Inside tabs - with :has() support */
+@supports selector(:has(*)) {
+  .docyard-tabs__panel:has(> [class*="language-"]:only-child) .docyard-code-block {
+    margin: 0;
+  }
+
+  .docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) .docyard-code-block {
+    margin: var(--space-4) 0;
+  }
+}
+
+/* Inside tabs - fallback for browsers without :has() */
+@supports not selector(:has(*)) {
+  .docyard-tabs__panel .docyard-code-block {
+    margin: var(--space-4) 0;
+  }
+}
+
+/* Inside callouts */
 .docyard-callout__body .docyard-code-block {
   margin: var(--space-4) 0;
 }
@@ -47,14 +440,7 @@
   background-color: var(--color-bg);
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
-  opacity: 0;
-  visibility: hidden;
-}
-
-.docyard-code-block:hover .docyard-code-block__copy {
-  opacity: 1;
-  visibility: visible;
+  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
 }
 
 .docyard-code-block__copy:hover {
@@ -68,8 +454,6 @@
 }
 
 .docyard-code-block__copy:focus-visible {
-  opacity: 1;
-  visibility: visible;
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
@@ -147,11 +531,26 @@
   color: white;
 }
 
-/* Mobile: Always show copy button */
-@media (max-width: 1024px) {
-  .docyard-code-block__copy {
-    opacity: 1;
-    visibility: visible;
+/* Mobile responsive - header */
+@media (max-width: 640px) {
+  .docyard-code-block__header {
+    padding: var(--space-2) var(--space-3);
+    gap: var(--space-2);
+  }
+
+  .docyard-code-block__icon .docyard-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .docyard-code-block__header .docyard-code-block__copy {
+    width: 28px;
+    height: 28px;
+  }
+
+  .docyard-code-block__header .docyard-code-block__copy svg {
+    width: 14px;
+    height: 14px;
   }
 }
 
@@ -166,7 +565,7 @@
   border-color: var(--color-text-tertiary);
 }
 
-/* Keep success state using primary colors in dark mode */
+/* Dark mode success state */
 .dark .docyard-code-block__copy.is-success {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
@@ -182,7 +581,7 @@
   border-color: #ef4444;
 }
 
-/* Reduced motion support - WCAG accessibility requirement */
+/* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .docyard-code-block__copy,
   .docyard-code-block__copy svg {
@@ -193,4 +592,8 @@
   .docyard-code-block__copy:active {
     transform: none;
   }
+
+  .docyard-code-block--has-focus .docyard-code-line {
+    transition: none;
+  }
 }

data/lib/docyard/templates/assets/css/components/heading-anchor.css

@@ -0,0 +1,77 @@
+.content h2[id],
+.content h3[id],
+.content h4[id],
+.content h5[id],
+.content h6[id] {
+  position: relative;
+  scroll-margin-top: 100px;
+}
+
+/* Tablet: Account for both primary + secondary header */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  .content h2[id],
+  .content h3[id],
+  .content h4[id],
+  .content h5[id],
+  .content h6[id] {
+    scroll-margin-top: calc(var(--header-height) + 3rem + var(--space-4));
+  }
+}
+
+.heading-anchor {
+  float: left;
+  margin-left: -0.75em;
+  padding-right: 0.25em;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-primary);
+  text-decoration: none !important;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+  cursor: pointer;
+  user-select: none;
+}
+
+.heading-anchor:hover,
+.heading-anchor:focus {
+  opacity: 1;
+  text-decoration: none !important;
+}
+
+.heading-anchor:active,
+.heading-anchor:visited {
+  text-decoration: none !important;
+}
+
+.heading-anchor:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.content h2[id]:hover .heading-anchor,
+.content h3[id]:hover .heading-anchor,
+.content h4[id]:hover .heading-anchor,
+.content h5[id]:hover .heading-anchor,
+.content h6[id]:hover .heading-anchor {
+  opacity: 1;
+}
+
+@media (max-width: 1024px) {
+  .heading-anchor {
+    position: static;
+    margin-left: var(--space-2);
+    float: none;
+    opacity: 0.6;
+  }
+
+  .heading-anchor:hover,
+  .heading-anchor:focus {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .heading-anchor {
+    transition: none;
+  }
+}

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

@@ -99,15 +99,18 @@
   position: relative;
 }
 
-.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;
+/* 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;
+  }
 }
 
 .sidebar nav ul ul a {

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

@@ -0,0 +1,114 @@
+/* Previous/Next Navigation Footer */
+
+.doc-footer {
+  margin-top: 48px;
+  padding-top: 24px;
+  border-top: 1px solid var(--color-border);
+}
+
+.pager {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.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;
+}
+
+.pager-link:hover {
+  border-color: var(--color-primary);
+  background-color: var(--color-background-soft);
+}
+
+.pager-link:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+
+.pager-link.prev {
+  text-align: left;
+}
+
+.pager-link.next {
+  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;
+}
+
+.pager-title {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-decoration: none !important;
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .doc-footer {
+    margin-top: 48px;
+  }
+
+  .pager {
+    grid-template-columns: 1fr;
+  }
+
+  .pager-link.next {
+    margin-left: 0;
+  }
+
+  .pager-link {
+    width: 100%;
+  }
+
+  .pager-title {
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+
+/* Reduced motion accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .pager-link {
+    transition: none;
+  }
+}
+
+/* Print: hide navigation */
+@media print {
+  .doc-footer {
+    display: none;
+  }
+}
+
+/* Visually hidden utility (for screen readers) */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}