hdoc-tools 0.62.4 → 0.63.0

package/ui/css/theme-default/styles/components/htl-search.css

@@ -0,0 +1,267 @@
+.LibrarySearch .searchResultsContainer
+{
+    max-width: 1080px;
+}
+
+.LibrarySearch .searchResults > li .title
+{
+    align-items: center;
+    color:var(--htl-c-blue);
+    cursor:pointer;
+}
+
+/* The results list stays mounted while a new query is in flight (it used to be swapped for the
+   skeleton, which destroyed and rebuilt all 300 rows per search). Dim it so the state is obvious,
+   and stop clicks landing on results that are about to be replaced. aria-busy is set alongside. */
+.LibrarySearch .searchResults.is-searching,
+.LibrarySearch h3.is-searching
+{
+    opacity: 0.55;
+    pointer-events: none;
+}
+
+/* The filter sidebar dims too - its counts belong to the previous response - but keeps
+   pointer events: choosing another filter mid-flight is valid (the in-flight request is
+   superseded), and the close button must stay usable on narrow viewports. */
+.LibrarySearch .DocSidebar.is-searching
+{
+    opacity: 0.55;
+}
+
+/* Always reserve the scrollbar's width. The panel is overflow-auto, so the bar appears
+   only when the facet lists outgrow the viewport - and every filter change alters those
+   lists, so the bar popped in and out, shifting the right-aligned count pills sideways
+   by its width between one response and the next. Browsers with overlay scrollbars
+   (which take no layout space) treat this as a no-op. */
+.LibrarySearch .DocSidebar
+{
+    scrollbar-gutter: stable;
+}
+
+/* Skip layout and paint for off-screen rows. 300 results are rendered at once and the server
+   caps there (maximum_results_returned in doc_search.cpp), so this is the cheapest way to stop
+   paying for the ~290 nobody is looking at: measured 102-120ms -> 20-44ms per full render.
+   - "auto", never "hidden": find-in-page and assistive tech activate auto subtrees, so off-screen
+     result text stays findable and readable.
+   - contain-intrinsic-size is a CONTENT-box estimate. Rows average 195px including their p-3
+     padding; feeding 195 in overshoots the scroll height by ~14%. The "auto" keyword makes each
+     row remember its real size once rendered, so the estimate only governs unvisited rows.
+   Scoped to .searchResultsList so the 8 skeleton rows are unaffected. */
+.LibrarySearch .searchResultsList > li
+{
+    content-visibility: auto;
+    contain-intrinsic-size: auto 160px;
+}
+
+/* Dark mode: Lighter blue for search result titles (WCAG AAA 7:1 on dark bg) */
+.dark .LibrarySearch .searchResults > li .title
+{
+    color: var(--htl-c-blue-light);
+}
+
+/* Dark mode: Lighter green for search result URLs (WCAG AAA 7:1 on dark bg) */
+.dark .LibrarySearch .searchResults .text-success
+{
+    color: var(--htl-c-green-light) !important;
+}
+
+/* Search result keyword highlights */
+.LibrarySearch .searchResults mark,
+.LibrarySearch .searchResults b
+{
+    background-color: #fff3cd;
+    color: #000000;
+    padding: 0.1em 0.2em;
+    border-radius: 4px;
+}
+
+/* Dark mode: Softer highlight for keywords */
+.dark .LibrarySearch .searchResults mark,
+.dark .LibrarySearch .searchResults b
+{
+    background-color: #5a4a00;
+    color: #ffffff;
+}
+
+/* Search channel badges - flags whether a result was found by keyword (FTS5),
+   semantic (vector) search, or both. Rendered inline after the result title. */
+.LibrarySearch .searchResults .search-match-badge
+{
+    display: inline-block;
+    margin-left: 0.5em;
+    padding: 0.1em 0.55em;
+    border-radius: 999px;
+    font-size: 0.62em;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    vertical-align: middle;
+    white-space: nowrap;
+    cursor: default;
+}
+
+.LibrarySearch .searchResults .search-match-keyword
+{
+    background-color: #eef1f4;
+    color: #55606b;
+}
+
+.LibrarySearch .searchResults .search-match-semantic
+{
+    background-color: #ede7f8;
+    color: #5e35b1;
+}
+
+.LibrarySearch .searchResults .search-match-both
+{
+    background-color: #e3f0fb;
+    color: #1565c0;
+}
+
+.dark .LibrarySearch .searchResults .search-match-keyword
+{
+    background-color: #3a4148;
+    color: #b8c1ca;
+}
+
+.dark .LibrarySearch .searchResults .search-match-semantic
+{
+    background-color: #45355e;
+    color: #cbb5f4;
+}
+
+.dark .LibrarySearch .searchResults .search-match-both
+{
+    background-color: #2c4361;
+    color: #a9cdf3;
+}
+
+.LibrarySearch .searchFilterProducts .form-check  .form-check-input
+{
+    margin-top: 0.18rem;
+}
+
+/* Vary skeleton widths for more natural appearance */
+.LibrarySearch .searchResults > li:nth-child(1) .HTL-skeleton-text-100:first-child { width: 65%; }
+.LibrarySearch .searchResults > li:nth-child(1) .HTL-skeleton-text-100:last-child { width: 85%; }
+
+.LibrarySearch .searchResults > li:nth-child(2) .HTL-skeleton-text-100:first-child { width: 45%; }
+.LibrarySearch .searchResults > li:nth-child(2) .HTL-skeleton-text-100:last-child { width: 70%; }
+
+.LibrarySearch .searchResults > li:nth-child(3) .HTL-skeleton-text-100:first-child { width: 80%; }
+.LibrarySearch .searchResults > li:nth-child(3) .HTL-skeleton-text-100:last-child { width: 55%; }
+
+.LibrarySearch .searchResults > li:nth-child(4) .HTL-skeleton-text-100:first-child { width: 55%; }
+.LibrarySearch .searchResults > li:nth-child(4) .HTL-skeleton-text-100:last-child { width: 90%; }
+
+.LibrarySearch .searchResults > li:nth-child(5) .HTL-skeleton-text-100:first-child { width: 70%; }
+.LibrarySearch .searchResults > li:nth-child(5) .HTL-skeleton-text-100:last-child { width: 60%; }
+
+.LibrarySearch .searchResults > li:nth-child(6) .HTL-skeleton-text-100:first-child { width: 40%; }
+.LibrarySearch .searchResults > li:nth-child(6) .HTL-skeleton-text-100:last-child { width: 75%; }
+
+.LibrarySearch .searchResults > li:nth-child(7) .HTL-skeleton-text-100:first-child { width: 60%; }
+.LibrarySearch .searchResults > li:nth-child(7) .HTL-skeleton-text-100:last-child { width: 50%; }
+
+.LibrarySearch .searchResults > li:nth-child(8) .HTL-skeleton-text-100:first-child { width: 75%; }
+.LibrarySearch .searchResults > li:nth-child(8) .HTL-skeleton-text-100:last-child { width: 65%; }
+
+
+/*--
+    Search filter rows (Information type, Books, Products).
+
+    The count badge was floated right, which drops onto its own line as soon as the
+    number is wide enough - three digits was enough ("API reference 140"), leaving the
+    count stranded above the next option. Books and Products carry the same latent bug
+    and are fixed by the same rule; they only looked fine because their counts happened
+    to be single digits.
+
+    Flex row instead: the label takes the slack and truncates, the badge keeps its
+    natural width and cannot wrap. The width:85% inline style on the label wrapper needs
+    !important to be overridden. --*/
+.searchFilterProducts .form-check {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    /*-- bootstrap reserves 1.5em here for the absolutely-positioned input. In a flex
+         row the input sits in normal flow, so that padding is dead space that indents
+         every option past its own section heading --*/
+    padding-left: 0;
+}
+
+.searchFilterProducts .form-check .form-check-input {
+    flex: 0 0 auto;
+    margin-top: 0;
+    margin-left: 0;
+}
+
+.searchFilterProducts .form-check > div {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto !important;
+}
+
+.searchFilterProducts .form-check label {
+    min-width: 0;
+}
+
+.searchFilterProducts .form-check .badge {
+    flex: 0 0 auto;
+    margin-left: auto;
+    float: none !important;
+}
+
+/*--
+    Search filter sidebar: width and mobile access.
+
+    Scoped to .LibrarySearch so the book-page navigation sidebar, which shares the
+    .DocSidebar class, keeps its own behaviour.
+
+    WIDTH: sidebar.css widens .DocSidebar to 420px only at 1720px, so between 1020 and
+    1719 the filter list is squeezed into 320px and long book titles truncate. Filters
+    are the point of this view, so they get the wider treatment for the whole range in
+    which the sidebar is docked - 1020px, the same breakpoint at which sidebar.css stops
+    showing it inline and it becomes the slide-in panel. There is deliberately no middle
+    width: an intermediate step only moves the moment the titles start truncating rather
+    than removing it, which is what a 1400px threshold did. At the 1020px floor this
+    still leaves 600px for results.
+
+    MOBILE: sidebar.css hides .LibrarySearch .DocSidebar below 1020px, and unlike a book
+    page this view has no burger, so the filters were simply unreachable - the panel is
+    styled to slide in (.DocSidebar.open) but nothing here could open it. The Filters
+    button below does, and this re-enables display for the open state. --*/
+@media (min-width: 1020px) {
+    .LibrarySearch .DocSidebar {
+        min-width: 420px;
+        max-width: 420px;
+    }
+}
+
+@media (max-width: 1019px) {
+    .LibrarySearch .DocSidebar.open {
+        display: block;
+    }
+}
+
+/*-- only offered where the sidebar is hidden --*/
+.search-filter-btn {
+    display: none;
+}
+
+@media (max-width: 1019px) {
+    .search-filter-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.4rem;
+    }
+}
+
+.search-filter-close {
+    display: none;
+}
+
+@media (max-width: 1019px) {
+    .search-filter-close {
+        display: inline-flex;
+    }
+}

package/ui/css/theme-default/styles/components/sidebar.css

@@ -1,13 +1,19 @@
 .DocSidebar {
-    position:relative;  
+    position:relative;
     width: 0px;
     opacity: 0;
     box-shadow: var(--htl-c-shadow-3);
     transform: translateX(-100%);
-    --transition: opacity 0.5s, transform 0.25s ease;
+    /* no transition in the base state - a "--transition:" custom property sat here that no
+       var() ever consumed; the media queries below declare their own real transitions */
     border-right: 1px solid var(--htl-c-divider-light);
   }
-  
+
+  .LibrarySearch .DocSidebar
+  {
+    display:none;
+  }
+
   .dark .DocSidebar {
     box-shadow: var(--htl-shadow-1);
   }
@@ -24,7 +30,11 @@
     opacity: 1;
     position:absolute;
     z-index:999;
-    visibility: visible;
+    /* NO visibility:visible here. The base .DocSidebar rule never hides via visibility
+       (it uses opacity/transform), so this only ever did one thing: override the
+       inherited visibility:hidden of the .hb-hidden pre-Vue boot guard on #vDocDevApp,
+       which made the sidebar paint its own uncompiled template - literal {{mustaches}} -
+       for the whole boot window. //-- SG */
     transform: translateX(0);
     transition: opacity 0.25s,
                 transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
@@ -35,16 +45,24 @@
   @media (min-width: 1020px) {
     .DocSidebar {
       min-width:320px;      
-      max-width:320px; 
+      max-width:320px;
       z-index: 1;
       opacity: 1;
-      visibility: visible;
+      /* no visibility:visible - see the note in the max-width:1019px block above */
       box-shadow: none;
       transform: translateX(0);
     }
 
-
-    .toolbar-layout .mobile-menu-btn
+    .LibrarySearch .DocSidebar
+    {
+      display:unset;
+    }
+  
+    /* covers the main app (title band) and settings (toolbar) locations. The .title-band
+       selector is needed at equal specificity to the display:flex in htldoc.layouts.css -
+       this file loads later, so source order makes the hide win on desktop */
+    .mobile-menu-btn,
+    .title-band .mobile-menu-btn
     {
       display:none;
     }
@@ -59,6 +77,7 @@
 
   }
   
+  
   .DocSidebar .hdoc-nav {
     background-color: var(--htl-c-bg);
     outline: 0;
@@ -80,7 +99,7 @@
   .DocSidebar .group + .group {
     margin-top: 5px;
     margin-bottom: 5px;
-    /*border-top: 1px solid var(--htl-c-divider-light);*/
+   /* border-top: 1px solid var(--htl-c-divider-light);*/
   }
  
 
@@ -105,6 +124,18 @@
     transition: color 0.5s;
     line-height: 20px;
   }
+
+  /* WCAG 2.5.5: 44px touch targets - only on touch devices */
+  @media (pointer: coarse) {
+    .DocSidebarGroup .title-text {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      margin: 2px 0;
+      line-height: 24px;
+      min-height: 44px;
+      box-sizing: border-box;
+    }
+  }
   
   .DocSidebarGroup .action {
     /*display: none;*/
@@ -129,7 +160,7 @@
   
   .DocSidebarGroup .icon {
     position: absolute;
-    top: 10px;
+    top: 4px;
     left: 0px;
     width: 16px;
     height: 16px;
@@ -143,7 +174,6 @@
   }
 
 
-  /*.DocLink */
   .DocLink.link {
     display: block;
     padding-top: 2px;
@@ -151,6 +181,17 @@
     margin: 4px 0;
     transition: color 0.5s;
   }
+
+  /* WCAG 2.5.5: 44px touch targets - only on touch devices */
+  @media (pointer: coarse) {
+    .DocLink.link {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      margin: 2px 0;
+      min-height: 44px;
+      box-sizing: border-box;
+    }
+  }
   
   .DocLink.link:hover {
     color: var(--htl-c-text-1);
@@ -160,13 +201,15 @@
   .DocLink.link.active {
     color: var(--htl-c-brand);
   }
-  
-  .DocLink.link :deep(.icon) {
-    width: 12px;
-    height: 12px;
-    fill: currentColor;
+
+  .dark .DocLink.link.active {
+    color: var(--htl-c-brand-light);
   }
   
+  /* A ".DocLink.link :deep(.icon)" rule sat here. :deep() is a Vue SFC scoped-style construct -
+     this no-build site has no SFCs, so the browser discarded the whole rule as invalid; it has
+     never applied and is removed rather than "fixed" into a new visual change. */
+
   .DocLink.noitems {
     margin-left: 23px;
   }

package/ui/css/theme-default/styles/fonts.css

@@ -1,6 +1,20 @@
-/* webfont-marker-begin */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
-/* webfont-marker-end */
+/* An @import of Google's Inter used to sit here. Removed: it was dead weight AND the single
+   worst-placed request on the site.
+
+   Dead, because it supplies the family 'Inter', which is only the THIRD entry in
+   --htl-font-family-base ('Inter var experimental', 'Inter var', 'Inter', ...) - and the 21
+   @font-face blocks below define 'Inter var' from 21 self-hosted woff2 files in ../fonts/, with
+   the same subset coverage Google serves (latin, latin-ext, greek, greek-ext, cyrillic,
+   cyrillic-ext, vietnamese; roman and italic). So 'Inter var' always wins and Google's copy was
+   never selected for any glyph.
+
+   Worst-placed, because a stylesheet @import is a CHAINED render-blocking request: the browser
+   cannot discover it until this file itself has arrived, so it could not start in parallel with
+   the other stylesheets and delayed first paint on its own. It showed up in the network panel
+   after vue.global.prod.js, which is what gave it away.
+
+   If a glyph ever does fall through, add it to the self-hosted set - do not put the @import
+   back. //-- SG */
 
 @font-face {
   font-family: 'Inter var';