hdoc-tools 0.62.4 → 0.63.0

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

@@ -112,7 +112,7 @@ samp {
 
 img,
 svg {
-  display: inline-block;
+  display: inline;
 }
 
 video,
@@ -157,22 +157,52 @@ button:enabled,
   cursor: pointer;
 }
 
-button:focus,
-button:focus-visible {
-  outline: 1px dotted;
-  outline: 4px auto -webkit-focus-ring-color;
+/* WCAG 2.4.13: Focus Appearance - clear, visible focus indicators */
+button:focus-visible,
+[role='button']:focus-visible {
+  outline: 2px solid var(--htl-c-brand);
+  outline-offset: 2px;
 }
 
-button:focus:not(:focus-visible) {
-  outline: none !important;
+button:focus:not(:focus-visible),
+[role='button']:focus:not(:focus-visible) {
+  outline: none;
+}
+
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--htl-c-brand);
+  outline-offset: 2px;
+}
+
+input:focus:not(:focus-visible),
+textarea:focus:not(:focus-visible),
+select:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Links focus indicator */
+a:focus-visible {
+  outline: 2px solid var(--htl-c-brand);
+  outline-offset: 2px;
+  border-radius: 2px;
 }
 
-input:focus,
-textarea:focus,
-select:focus {
+a:focus:not(:focus-visible) {
   outline: none;
 }
 
+/* Dark mode: Lighter focus colour for visibility */
+.dark button:focus-visible,
+.dark [role='button']:focus-visible,
+.dark input:focus-visible,
+.dark textarea:focus-visible,
+.dark select:focus-visible,
+.dark a:focus-visible {
+  outline-color: var(--htl-c-blue-light);
+}
+
 table {
   border-collapse: collapse;
 }
@@ -206,6 +236,12 @@ input[type='number'] {
   -moz-appearance: textfield;
 }
 
+html.dark input[type='search'] {
+  color:#ffffff;
+  background-color: #000000;
+}
+
+
 textarea {
   resize: vertical;
 }
@@ -229,10 +265,11 @@ p {
   overflow-wrap: break-word;
 }
 
+
 :root{
   /* Tweak the min/max to taste; ratio ≈ 1.25 across levels */
   --h1-min: 2.0rem;  --h1-max: 3.0rem;   /* 32–48 */
-  --h2-min: 1.6rem;  --h2-max: 2.25rem;  /* 25.6–36 */
+  --h2-min: 1.6rem;  --h2-max: 2.0rem;  /* 25.6–36 */
   --h3-min: 1.35rem; --h3-max: 1.8rem;   /* 21.6–28.8 */
   --h4-min: 1rem; --h4-max: 1.35rem;  /* 18.4–23.2 */
   --h5-min: 1.05rem; --h5-max: 1.2rem;   /* 16.8–19.2 */
@@ -250,33 +287,61 @@ h1:not(.mb-2):not(.display-4){
   line-height: 1.1;
   margin-top: 0;          /* article title at top */
 }
-h2:not(.title){
+h2:not(.title):not(.d-inline){
   font-size: clamp(var(--h2-min), 1.5vw + 0.9rem, var(--h2-max));
-  font-weight: 650;
+  font-weight: 600;
   /*border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);*/
   /*padding-bottom: 0.2em;*/
 }
 h3{
   font-size: clamp(var(--h3-min), 1.2vw + 0.7rem, var(--h3-max));
-  font-weight: 600;
+  font-weight: 570;
 }
 h4{
   font-size: clamp(var(--h4-min), 0.8vw + 0.6rem, var(--h4-max));
   font-weight: 550;
 }
-h5:not(.description){
+/* the excluded class is description2 - the toolbar description span; ":not(.description)"
+   excluded a class no markup carries */
+h5:not(.description2){
   font-size: clamp(var(--h5-min), 0.6vw + 0.6rem, var(--h5-max));
-  font-weight: 500;
+  font-weight: 550;
   color: color-mix(in srgb, currentColor 85%, #000 15%);
 }
-h6:not(.description){
-  font-size: clamp(var(--h6-min), 0.5vw + 0.55rem, var(--h6-max));
-  font-weight: 600;
+h6:not(.description2){
+  /* "0.vw" (no digit after the point) invalidated the whole clamp() at computed-value time,
+     so h6 font-size fell back to inherit - the dropped digit was 0.4 to fit the h4/h5 series */
+  font-size: clamp(var(--h6-min), 0.4vw + 0.55rem, var(--h6-max));
+  font-weight: 500;
   /*text-transform: uppercase;    */    /* differentiate without shrinking */
   letter-spacing: 0.06em;
   color: color-mix(in srgb, currentColor 70%, #000 30%);
 }
+/* WCAG 2.4.12: Focus Not Obscured - ensure focused elements aren't hidden */
 /* Better anchor linking with fixed headers/ToC */
-/*:where(h1,h2,h3,h4,h5,h6){ scroll-margin-top: 96px; }*/
+:where(h1,h2,h3,h4,h5,h6) { scroll-margin-top: 80px; }
+:target { scroll-margin-top: 80px; }
+
+/* Ensure focused elements have scroll margin to avoid being obscured */
+:focus { scroll-margin: 80px 0; }
 /* Tighten multi-line large headings */
-h1, h2 { hyphens: auto; }
+h1, h2 { hyphens: auto; }
+
+.text-success {
+  color: var(--htl-c-green-darker) !important;
+}
+
+.bg-secondary {
+  background-color: var(--htl-c-gray-dark-2) !important;
+}
+
+.description2 {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: #000000;
+  margin-bottom: 0.5rem;
+}
+
+.dark .description2 {
+  color: var(--htl-c-text-dark-1);
+}

package/ui/css/theme-default/styles/components/api-doc.css

@@ -23,6 +23,7 @@ api-param-name {
     font-family: "courier new";
     font-weight: 700;
   }
+  
   api-param-type {
     display: inline;
     border-radius: 4px;
@@ -34,6 +35,7 @@ api-param-name {
     font-style: italic;
     font-weight: 600;
   }
+  
   api-param-type:before {
     font-style: normal;
     font-weight: 400;
@@ -76,9 +78,9 @@ api-param-name {
   /* API parameter description block */
   api-param-desc {
     display: block;
-    padding-top: 1em; 
-    padding-bottom: 2em;
-    padding-left: 2em;
+    margin-top: 1em; 
+    margin-bottom: 2em;
+    margin-left: 2em;
   }
 
   /* GS: We need this for now as the custom element above does 
@@ -89,6 +91,7 @@ api-param-name {
     padding-bottom: 2em;
     padding-left: 2em;
   }
+  
 
   api-prop-name {
     display: inline;

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

@@ -1,7 +1,7 @@
 /* base doc content classes*/
 .DocContent .content-wrapper
 {
-  padding: 20px 0px;
+  padding: 10px 0px;
   margin: 0 0;
   overflow: initial;
   max-width:1500px;
@@ -13,15 +13,9 @@
   position:relative;
 }
 
-/* The container is a flex row holding the content pane and the TOC. The
-   content pane does all the flexing (basis 0, min-width 0 so wide content -
-   tables, code blocks - cannot force it wider); the TOC keeps a fixed,
-   non-shrinking basis. Giving both children a width made the row
-   over-committed, so both shrank pro-rata and the TOC collapsed to ~118px. */
 .DocContent .injected-document-content
 {
-  flex: 1 1 0;
-  min-width: 0;
+  width: 100%;
 }
 
 .DocContent .injected-document-toc
@@ -29,12 +23,9 @@
   height: fit-content;
   display:none;
   margin:0 0 0 50px;
-  flex: 0 0 clamp(260px, 26%, 400px);
+  width:400px;
 }
 
-.DocContent .injected-document-toc .H2{
-
-}
 .DocContent .injected-document-toc .H3{
   padding-left:10px;
 
@@ -69,59 +60,169 @@
 }
 /* eof nav tabs in doc content */
 
+/* No ".tab-content" rules here any more. The local <tabs> transformer in doc.hornbill.js emits
+   ul.nav.nav-tabs and toggles d-none on the <tab> elements directly - it never creates the
+   Bootstrap .tab-content/.tab-pane wrappers those four rules were scoped to, so they could not
+   match under any content. (.code-badge itself is styled in htl-doc.css and is live.) */
 
+/* WCAG AAA: Improve contrast for inactive code tab buttons */
+.DocContent .nav-tabs .nav-link {
+  color: #0050c7;
+}
+
+.DocContent .nav-tabs .nav-link.active {
+  color: #000000;
+}
+
+/* CODE BLOCK - make sure doesn't escape parent container width */
 .DocContent .code-badge-pre
 {
   max-width: 100%!important;
   min-width: 100%!important;
 }
 
-@media (min-width: 1000px) {
-  
-  .DocContent .injected-document-content
-  {
-    /*width: 900px;*/
-  }
+
+
+/* LAYOUT MODS */
+
+/* table-list*/
+.DocContent.article-wide .injected-document-content
+{
+    /* take up max width - overrides max-width set in [.DocContent .injected-document-content] */
+    max-width:100%;
 }
 
+.DocContent.article-wide .injected-document-content table
+{
+    /* make all tables 100% */
+    width:100%;
+    display:table;
+}
 
-/* style overrides to apply on screens that are 1500px and wider */
+/* style overrides to apply on screens that are 1790px and wider */
 @media (min-width: 1500px) {
-  
+
   .DocContent .injected-document-toc
   {
     display:inline-block;
+    /* Do NOT let the TOC flex-shrink. .injected-document-container is a flex row
+       (.hb-container-horizontal) whose children inherit flex-shrink:1 from
+       htldoc.layouts.css. The content pane declares width:100%, so its flex-basis is the
+       full container width; add the TOC's 400px basis and the row is over-committed on every
+       screen, so BOTH items shrank pro-rata and the TOC collapsed to ~118px - the "squished
+       table of contents". The 900px content cap below only fires for .article-toc, i.e. only
+       when a page's frontmatter declares layout: article-toc, which most pages do not - so
+       the cap cannot be relied on to keep the row within budget. Fixed here instead: the TOC
+       takes a non-shrinking basis and the content pane absorbs all of the flexing.
+       clamp() rather than a flat 400px so the TOC gives some width back at the low end of
+       this breakpoint (400px flat left the content pane at 650px at exactly 1500px). Wide
+       content does not need the content pane to grow - code blocks and tables scroll
+       themselves (overflow-x:auto in htl-doc.css). */
+    flex: 0 0 clamp(260px, 26%, 400px);
+    width: auto;
+    margin-left: clamp(24px, 3%, 50px);
+  }
+
+  .DocContent .injected-document-content
+  {
+      /* basis 0 + grow, not the declared width:100%, so this pane is what yields width;
+         min-width:0 defeats the automatic minimum size (max-content), which a long
+         unwrapped code line would otherwise use to push the TOC out again */
+      flex: 1 1 0;
+      min-width: 0;
+      width: auto;
+  }
+
+  .DocContent.article-toc .injected-document-content
+  {
+      width: 900px;
   }
 
-  /* Room for the TOC comes from its own flex basis now - a width here would be
-     ignored anyway (flex-basis 0 on the content pane wins over width). */
 
 }
 
-/* style overrides to apply on screens that are 1920px and wider */
-@media (min-width: 1790px) {
-  
-  .DocContent .content-wrapper
+/* ---- Narrow-screen TOC (hamburger fallback) ---- */
+/* Hidden by default; at >=1500px the inline .injected-document-toc is shown instead (see media query above) */
+.DocContent .toc-mobile
+{
+  display:none;
+}
+
+@media (max-width: 1499.98px) {
+
+  .DocContent .toc-mobile
   {
-    /*margin-left: 20px*/
+    display:block;
   }
-}
 
+  .DocContent .toc-mobile-btn
+  {
+    position:fixed;
+    right:20px;
+    /* tablet / small-laptop: vertically centred on the book title band. The variable is
+       measured and set by positionTocMobileBtn() (doc.hornbill.js); 74px is the fallback
+       before the first measure (dock just below the 58px toolbar) */
+    top:var(--toc-mobile-btn-top, 74px);
+    z-index:1000;
+    width:48px;
+    height:48px;
+    border-radius:50%;
+    border:none;
+    background:var(--htl-c-brand);
+    color:var(--htl-c-text-dark-1);
+    box-shadow:var(--htl-shadow-3);
+    font-size:1.4rem;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    cursor:pointer;
+  }
 
+  .DocContent .toc-mobile-btn:hover
+  {
+    filter:brightness(1.05);
+  }
 
-/* LAYOUT MODS */
+  .DocContent .toc-mobile-backdrop
+  {
+    position:fixed;
+    inset:0;
+    background:rgba(0,0,0,0.4);
+    z-index:1000;
+  }
 
-/* table-list*/
-.DocContent.article-wide .injected-document-content
-{
-    /* take up max width - overrides max-width set in [.DocContent .injected-document-content] */
-    max-width:100%;
+  .DocContent .toc-mobile-panel
+  {
+    position:fixed;
+    top:0;
+    right:0;
+    height:100%;
+    width:85%;
+    max-width:360px;
+    background:var(--htl-c-bg);
+    box-shadow:var(--htl-shadow-3);
+    z-index:1001;
+    overflow-y:auto;
+    padding:20px;
+    transform:translateX(100%);
+    transition:transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  .DocContent .toc-mobile-panel.open
+  {
+    transform:translateX(0);
+  }
 }
 
-.DocContent.article-wide .injected-document-content table
-{
-    /* make all tables 100% */
-    width:100%;
-    display:table;
+/* mobile: move the floating button to the bottom (thumb reach), toolbar search is hidden here */
+@media (max-width: 602px) {
+
+  .DocContent .toc-mobile-btn
+  {
+    top:auto;
+    bottom:20px;
+  }
 }
 
+
+

package/ui/css/theme-default/styles/components/custom-block.css

@@ -1,6 +1,6 @@
 .custom-block {
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: var(--htl-box-radius);
   padding: 16px 16px 8px;
   line-height: 24px;
   font-size: var(--htl-default-font-size);