hdoc-tools 0.62.5 → 0.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/editor/dist/assets/{index-BtxvGZHW.js → index-Dknn5g5A.js} +5 -4
  2. package/editor/dist/index.html +13 -13
  3. package/hdoc-build.js +5 -3
  4. package/hdoc-content-routes.js +136 -4
  5. package/hdoc-serve.js +26 -3
  6. package/package.json +1 -1
  7. package/ui/css/theme-default/styles/base.css +86 -21
  8. package/ui/css/theme-default/styles/components/api-doc.css +6 -3
  9. package/ui/css/theme-default/styles/components/content.css +140 -39
  10. package/ui/css/theme-default/styles/components/custom-block.css +1 -1
  11. package/ui/css/theme-default/styles/components/htl-doc.css +243 -64
  12. package/ui/css/theme-default/styles/components/htl-library.css +152 -0
  13. package/ui/css/theme-default/styles/components/htl-search.css +267 -0
  14. package/ui/css/theme-default/styles/components/sidebar.css +59 -16
  15. package/ui/css/theme-default/styles/fonts.css +17 -3
  16. package/ui/css/theme-default/styles/htldoc.layouts.css +756 -87
  17. package/ui/css/theme-default/styles/vars.css +40 -35
  18. package/ui/favicon.svg +64 -0
  19. package/ui/images/hornbill-logo-full-reversed.svg +92 -0
  20. package/ui/images/hornbill-logo-full.svg +92 -0
  21. package/ui/images/hug_library.jpg +0 -0
  22. package/ui/images/mcp-catalog.svg +9 -0
  23. package/ui/images/products/hornbill-square.svg +1 -0
  24. package/ui/index.html +1106 -342
  25. package/ui/js/bootstrap.js +89 -0
  26. package/ui/js/doc.hornbill.js +3156 -751
  27. package/ui/js/hb.vue.js +121 -0
  28. package/ui/js/highlightjs/highlight.pack.js +1513 -2
  29. package/ui/js/highlightjs/styles/vs2015-accessible.css +141 -0
  30. package/ui/js/highlightjs-badge.js +41 -58
  31. package/ui/js/mermaid.min.js +1447 -1295
  32. package/ui/js/webcomponents/hdocApprove.js +115 -0
  33. package/ui/js/highlightjs/styles/brown-paper.css +0 -64
  34. package/ui/js/highlightjs/styles/brown-papersq.png +0 -0
  35. package/ui/js/highlightjs/styles/codepen-embed.css +0 -60
  36. package/ui/js/highlightjs/styles/color-brewer.css +0 -71
  37. package/ui/js/highlightjs/styles/darcula.css +0 -77
  38. package/ui/js/highlightjs/styles/dark.css +0 -63
  39. package/ui/js/highlightjs/styles/darkula.css +0 -6
  40. package/ui/js/highlightjs/styles/default.css +0 -99
  41. package/ui/js/highlightjs/styles/dracula.css +0 -76
  42. package/ui/js/highlightjs/styles/far.css +0 -71
  43. package/ui/js/highlightjs/styles/foundation.css +0 -88
  44. package/ui/js/highlightjs/styles/github-gist.css +0 -71
  45. package/ui/js/highlightjs/styles/github-mm.css +0 -71
  46. package/ui/js/highlightjs/styles/github.css +0 -99
  47. package/ui/js/highlightjs/styles/googlecode.css +0 -89
  48. package/ui/js/highlightjs/styles/grayscale.css +0 -101
  49. package/ui/js/highlightjs/styles/idea.css +0 -97
  50. package/ui/js/highlightjs/styles/ir-black.css +0 -73
  51. package/ui/js/highlightjs/styles/kavadocs.css +0 -71
  52. package/ui/js/highlightjs/styles/kavadocsdark.css +0 -120
  53. package/ui/js/highlightjs/styles/kimbie.dark.css +0 -74
  54. package/ui/js/highlightjs/styles/kimbie.light.css +0 -74
  55. package/ui/js/highlightjs/styles/magula.css +0 -70
  56. package/ui/js/highlightjs/styles/mono-blue.css +0 -59
  57. package/ui/js/highlightjs/styles/monokai-sublime.css +0 -83
  58. package/ui/js/highlightjs/styles/monokai.css +0 -70
  59. package/ui/js/highlightjs/styles/obsidian.css +0 -88
  60. package/ui/js/highlightjs/styles/paraiso-dark.css +0 -72
  61. package/ui/js/highlightjs/styles/paraiso-light.css +0 -72
  62. package/ui/js/highlightjs/styles/railscasts.css +0 -106
  63. package/ui/js/highlightjs/styles/rainbow.css +0 -85
  64. package/ui/js/highlightjs/styles/solarized-dark.css +0 -84
  65. package/ui/js/highlightjs/styles/solarized-light.css +0 -84
  66. package/ui/js/highlightjs/styles/sunburst.css +0 -102
  67. package/ui/js/highlightjs/styles/twilight.css +0 -97
  68. package/ui/js/highlightjs/styles/vs.css +0 -68
  69. package/ui/js/highlightjs/styles/vs2015.css +0 -117
  70. package/ui/js/highlightjs/styles/xcode.css +0 -104
  71. package/ui/js/highlightjs/styles/zenburn.css +0 -80
@@ -63,8 +63,8 @@ Error generating stack: `+e.message+`
63
63
  }
64
64
  } catch (e) {}
65
65
  <\/script>
66
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
67
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
66
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css" integrity="sha384-Bk5cbLkZQ5raZ0+H2/+VbfYx3WpvxvQK4zqXZr7sYODuaX7bKXoSOnipQxkaS8sv" crossorigin="anonymous">
67
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
68
68
  <link rel="stylesheet" href="/_ui/css/theme-default/styles/fonts.css">
69
69
  <link rel="stylesheet" href="/_ui/css/theme-default/styles/vars.css">
70
70
  <link rel="stylesheet" href="/_ui/css/theme-default/styles/base.css">
@@ -74,7 +74,7 @@ Error generating stack: `+e.message+`
74
74
  <link rel="stylesheet" href="/_ui/css/theme-default/styles/components/content.css">
75
75
  <link rel="stylesheet" href="/_ui/css/theme-default/styles/components/custom-block.css">
76
76
  <link rel="stylesheet" href="/_ui/css/theme-default/styles/components/api-doc.css">
77
- <link rel="stylesheet" href="/_ui/js/highlightjs/styles/vs2015.css">
77
+ <link rel="stylesheet" href="/_ui/js/highlightjs/styles/vs2015-accessible.css">
78
78
  <style>html,body{margin:0;}</style>
79
79
  </head>
80
80
  <body>
@@ -98,7 +98,8 @@ Error generating stack: `+e.message+`
98
98
  try {
99
99
  if (window.hljs) {
100
100
  var blocks = root.querySelectorAll('pre>code');
101
- for (var i = 0; i < blocks.length; i++) window.hljs.highlightBlock(blocks[i]);
101
+ // highlight.js v11 API (highlightBlock was removed in v11)
102
+ for (var i = 0; i < blocks.length; i++) window.hljs.highlightElement(blocks[i]);
102
103
  }
103
104
  if (window.highlightJsBadge) {
104
105
  window.highlightJsBadge({ contentSelector: '#hdoc-preview-root' });
@@ -1,14 +1,14 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>hdoc edit</title>
8
- <script type="module" crossorigin src="/assets/index-BtxvGZHW.js"></script>
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>hdoc edit</title>
8
+ <script type="module" crossorigin src="/assets/index-Dknn5g5A.js"></script>
9
9
  <link rel="stylesheet" crossorigin href="/assets/index-Blewr90z.css">
10
- </head>
11
- <body>
12
- <div id="root"></div>
13
- </body>
14
- </html>
10
+ </head>
11
+ <body>
12
+ <div id="root"></div>
13
+ </body>
14
+ </html>
package/hdoc-build.js CHANGED
@@ -48,9 +48,11 @@
48
48
  "pdf-header-non-git.html",
49
49
  );
50
50
 
51
- // Mermaid theme SINGLE source shared with the client-side renderer
52
- // (ui/js/doc.hornbill.js fetches the same file). Emitted into each queued
53
- // diagram as YAML frontmatter; inline JSON is valid YAML, so no conversion.
51
+ // Mermaid theme for the PDF SVG bake. Emitted into each queued diagram as
52
+ // YAML frontmatter; inline JSON is valid YAML, so no conversion. NOTE: the
53
+ // viewer no longer fetches this file since the ui/ sync with the live
54
+ // htdocs viewer it embeds the same values as HB_MERMAID_CONFIG in
55
+ // ui/js/doc.hornbill.js. Keep the two in step when changing the theme.
54
56
  const mermaid_theme_path = path.resolve(
55
57
  __dirname,
56
58
  "ui",
@@ -21,6 +21,14 @@ const stream = require("node:stream");
21
21
  const hdoc = require(path.join(__dirname, "hdoc-module.js"));
22
22
  const mdfm = require("markdown-it-front-matter");
23
23
 
24
+ // Document header template baked around rendered markdown, so the local
25
+ // preview shows the same header (breadcrumbs/title/type/reading time) as
26
+ // published output. Package-static, so read once.
27
+ const doc_header_template = fs.readFileSync(
28
+ path.join(__dirname, "templates", "doc-header-non-git.html"),
29
+ "utf8",
30
+ );
31
+
24
32
  // Escape a Mermaid definition for safe embedding as the text content of a
25
33
  // <pre> element. The viewer's client-side Mermaid plugin reads the element's
26
34
  // textContent and renders it in the browser, so we only need HTML-text safety
@@ -192,18 +200,81 @@ exports.create_content_handler = (ctx) => {
192
200
  const tips = require(`${__dirname}/custom_modules/tips.js`);
193
201
  md.use(tips, { links: true });
194
202
 
195
- const html = md.render(md_txt.toString());
203
+ // Wrap h2/h3 sections in anchor-id <div>s exactly as the build pipeline
204
+ // does (hdoc.wrapAndExtract) — the theme CSS targets that structure, and
205
+ // it also yields the reading time for the document header.
206
+ const rendered = md.render(md_txt.toString());
207
+ const extracted = hdoc.wrapAndExtract(rendered, ["h1"]);
208
+ const html = extracted.html;
196
209
 
197
210
  const frontmatter = frontmatter_content.length
198
211
  ? hdoc.parse_yaml(frontmatter_content)
199
212
  : null;
200
- return { html, frontmatter };
213
+ return { html, frontmatter, read_time: extracted.readTimeMins };
214
+ }
215
+
216
+ // Wrap rendered markdown with the same document header the build pipeline
217
+ // bakes into published pages (templates/doc-header-non-git.html): breadcrumb
218
+ // trail, first-<h1> title, doc type and reading time. Without this the viewer
219
+ // shows the raw body with the <h1> inline, which is not what publishing
220
+ // produces. logical_path is the extensionless book-relative request path
221
+ // (e.g. "my-book/some/page") used for the breadcrumb lookup.
222
+ function wrap_with_document_header(html, frontmatter, logical_path, read_time) {
223
+ let body = html;
224
+
225
+ // Pull the first <h1> out of the body — the header owns the title, exactly
226
+ // as hdoc-build does for published output.
227
+ let title = "";
228
+ const h1_match = body.match(/<h1[^>]*>([\s\S]*?)<\/h1>/);
229
+ if (h1_match) {
230
+ title = h1_match[1].trim();
231
+ body = body.replace(h1_match[0], "");
232
+ } else if (frontmatter?.title) {
233
+ title = frontmatter.title;
234
+ }
235
+
236
+ const reading_time = frontmatter?.["reading-time"] ?? read_time ?? 0;
237
+
238
+ // Breadcrumbs from the live nav (config re-read per request), emitted with
239
+ // the same <li> shape hdoc-build writes. Last crumb (the page itself) is
240
+ // dropped, matching the build pipeline.
241
+ let bc_tags = "\n";
242
+ try {
243
+ const bc = hdoc.build_breadcrumbs(
244
+ get_book_config().navigation.items,
245
+ ).bc;
246
+ const crumbs = bc[logical_path] || bc[`/${logical_path}`];
247
+ if (crumbs) {
248
+ for (let i = 0; i < crumbs.length - 1; i++) {
249
+ if (crumbs[i].link) {
250
+ const bc_link = crumbs[i].link.startsWith("/")
251
+ ? crumbs[i].link
252
+ : `/${crumbs[i].link}`;
253
+ bc_tags += `\t\t\t\t<li class="mt-0 nav-bar-item"><a href="${bc_link}" class="ps-0 pe-0 text-decoration-none">${crumbs[i].text}</a></li>\n`;
254
+ } else {
255
+ bc_tags += `\t\t\t\t<li class="mt-0 nav-bar-item">${crumbs[i].text}</li>\n`;
256
+ }
257
+ }
258
+ }
259
+ } catch {
260
+ // Bad/missing navigation is validate's problem to report, not the
261
+ // preview's — render the page with an empty trail.
262
+ }
263
+ bc_tags += "\t\t\t";
264
+
265
+ const header = doc_header_template
266
+ .replaceAll("{{title}}", title)
267
+ .replaceAll("{{doc-type}}", frontmatter?.type || "Article")
268
+ .replaceAll("{{reading-time}}", String(reading_time))
269
+ .replaceAll("{{breadcrumbs}}", bc_tags);
270
+
271
+ return `${header}\n${body}`;
201
272
  }
202
273
 
203
274
  async function transform_markdown_and_send_html(req, res, file_path) {
204
275
  if (!fs.existsSync(file_path)) return false;
205
276
 
206
- const { html, frontmatter } = await render_markdown(
277
+ const { html, frontmatter, read_time } = await render_markdown(
207
278
  file_path,
208
279
  fs.readFileSync(file_path).toString(),
209
280
  );
@@ -215,8 +286,20 @@ exports.create_content_handler = (ctx) => {
215
286
  res.setHeader("X-frontmatter", base64);
216
287
  }
217
288
 
289
+ // Inline (_inline/) fragments are embedded elsewhere and get no header,
290
+ // same as the build pipeline.
291
+ const logical_path = req.url
292
+ .replace(/^\/_books\//, "")
293
+ .split("?")[0]
294
+ .split("#")[0]
295
+ .replace(/\.(html|htm|md)$/i, "")
296
+ .replace(/\/+$/, "");
297
+ const out = logical_path.includes("/_inline/")
298
+ ? html
299
+ : wrap_with_document_header(html, frontmatter, logical_path, read_time);
300
+
218
301
  res.setHeader("Content-Type", "text/html");
219
- res.send(html);
302
+ res.send(out);
220
303
  return true;
221
304
  }
222
305
 
@@ -409,11 +492,22 @@ exports.create_content_handler = (ctx) => {
409
492
 
410
493
  function handle_library_request(req, res) {
411
494
  const book_config = get_book_config();
495
+ // Mirror the fields the production library.json carries so the viewer's
496
+ // library home can group/describe the book. audience is an array in
497
+ // hdocbook.json but a plain string in the production library feed.
412
498
  const library = {
413
499
  books: [
414
500
  {
415
501
  docId: book_config.docId,
502
+ version: book_config.version,
503
+ audience: Array.isArray(book_config.audience)
504
+ ? book_config.audience[0]
505
+ : book_config.audience,
416
506
  title: book_config.title,
507
+ description: book_config.description || "",
508
+ productFamilyId: book_config.productFamily,
509
+ tags: book_config.tags || [],
510
+ publicSource: book_config.publicSource,
417
511
  nav_inline: nav_inline,
418
512
  },
419
513
  ],
@@ -422,9 +516,47 @@ exports.create_content_handler = (ctx) => {
422
516
  res.send(JSON.stringify(library, null, 3));
423
517
  }
424
518
 
519
+ // The production viewer needs a valid products.json (its init dereferences
520
+ // data.products). Fetch the real product family list once in the background
521
+ // (same helper the build pipeline uses) and serve it; if docs.hornbill.com
522
+ // is unreachable, serve an empty list — the library page then groups the
523
+ // book under "Other" instead of failing to initialise.
524
+ let products_cache = null;
525
+ const products_fetch = hdoc
526
+ .load_product_families()
527
+ .then((p) => {
528
+ if (p.success) products_cache = p.prod_families;
529
+ else
530
+ console.log(
531
+ "[WARNING] Could not fetch product families from docs.hornbill.com — serving an empty product list to the viewer",
532
+ );
533
+ })
534
+ .catch(() => {});
535
+
536
+ async function handle_products_request(req, res) {
537
+ await products_fetch;
538
+ res.setHeader("Content-Type", "application/json");
539
+ res.send(JSON.stringify(products_cache || { products: [] }));
540
+ }
541
+
542
+ // Endpoints the production viewer probes but that have no local backing
543
+ // service (docs sign-in session, MCP catalog, full-text search). A JSON 404
544
+ // makes the viewer's fetchJsonFile resolve null and degrade gracefully;
545
+ // without these the SPA catch-all would answer with index.html instead.
546
+ function handle_unavailable_api(req, res) {
547
+ res.status(404);
548
+ res.setHeader("Content-Type", "application/json");
549
+ res.send(
550
+ JSON.stringify({ error: "Not available in the hdoc local preview" }),
551
+ );
552
+ }
553
+
425
554
  function register(app) {
555
+ app.get("/_books/products.json", handle_products_request);
426
556
  app.get("/_books/library.json", handle_library_request);
427
557
  app.get("/_books/*splat", handle_books_request);
558
+ app.get("/_api/{*splat}", handle_unavailable_api);
559
+ app.get("/_search", handle_unavailable_api);
428
560
  }
429
561
 
430
562
  return {
package/hdoc-serve.js CHANGED
@@ -92,6 +92,12 @@
92
92
  });
93
93
  content.register(app);
94
94
 
95
+ // Local preview serves exactly one book — skip the viewer's library home
96
+ // and land straight in the book.
97
+ app.get("/", (req, res) => {
98
+ res.redirect(`/${docId}`);
99
+ });
100
+
95
101
  // Catch all
96
102
  app.get("/{*splat}", (req, res) => {
97
103
 
@@ -110,9 +116,26 @@
110
116
 
111
117
  // If the file exists, send it.
112
118
  if (fs.existsSync(ui_file_path)) {
113
- // Stream the large Mermaid bundle (skips per-request variable
114
- // expansion over ~4.5MB) and let send_file set a long cache header.
115
- if (path.basename(ui_file_path) === "mermaid.min.js") {
119
+ // Only text assets go through send_content_file (which reads the
120
+ // file as a string for variable expansion) binary assets (fonts,
121
+ // images) are corrupted by that path, so stream them verbatim.
122
+ // mermaid.min.js is also streamed (skips per-request variable
123
+ // expansion over ~4.5MB, and send_file sets its cache header).
124
+ const text_exts = new Set([
125
+ ".html",
126
+ ".htm",
127
+ ".css",
128
+ ".js",
129
+ ".json",
130
+ ".svg",
131
+ ".txt",
132
+ ".md",
133
+ ".map",
134
+ ]);
135
+ if (
136
+ path.basename(ui_file_path) === "mermaid.min.js" ||
137
+ !text_exts.has(path.extname(ui_file_path).toLowerCase())
138
+ ) {
116
139
  content.send_file(req, res, ui_file_path);
117
140
  return;
118
141
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hdoc-tools",
3
- "version": "0.62.5",
3
+ "version": "0.63.0",
4
4
  "description": "Hornbill HDocBook Development Support Tool",
5
5
  "main": "hdoc.js",
6
6
  "bin": {
@@ -112,7 +112,7 @@ samp {
112
112
 
113
113
  img,
114
114
  svg {
115
- display: inline-block;
115
+ display: inline;
116
116
  }
117
117
 
118
118
  video,
@@ -157,22 +157,52 @@ button:enabled,
157
157
  cursor: pointer;
158
158
  }
159
159
 
160
- button:focus,
161
- button:focus-visible {
162
- outline: 1px dotted;
163
- outline: 4px auto -webkit-focus-ring-color;
160
+ /* WCAG 2.4.13: Focus Appearance - clear, visible focus indicators */
161
+ button:focus-visible,
162
+ [role='button']:focus-visible {
163
+ outline: 2px solid var(--htl-c-brand);
164
+ outline-offset: 2px;
164
165
  }
165
166
 
166
- button:focus:not(:focus-visible) {
167
- outline: none !important;
167
+ button:focus:not(:focus-visible),
168
+ [role='button']:focus:not(:focus-visible) {
169
+ outline: none;
170
+ }
171
+
172
+ input:focus-visible,
173
+ textarea:focus-visible,
174
+ select:focus-visible {
175
+ outline: 2px solid var(--htl-c-brand);
176
+ outline-offset: 2px;
177
+ }
178
+
179
+ input:focus:not(:focus-visible),
180
+ textarea:focus:not(:focus-visible),
181
+ select:focus:not(:focus-visible) {
182
+ outline: none;
183
+ }
184
+
185
+ /* Links focus indicator */
186
+ a:focus-visible {
187
+ outline: 2px solid var(--htl-c-brand);
188
+ outline-offset: 2px;
189
+ border-radius: 2px;
168
190
  }
169
191
 
170
- input:focus,
171
- textarea:focus,
172
- select:focus {
192
+ a:focus:not(:focus-visible) {
173
193
  outline: none;
174
194
  }
175
195
 
196
+ /* Dark mode: Lighter focus colour for visibility */
197
+ .dark button:focus-visible,
198
+ .dark [role='button']:focus-visible,
199
+ .dark input:focus-visible,
200
+ .dark textarea:focus-visible,
201
+ .dark select:focus-visible,
202
+ .dark a:focus-visible {
203
+ outline-color: var(--htl-c-blue-light);
204
+ }
205
+
176
206
  table {
177
207
  border-collapse: collapse;
178
208
  }
@@ -206,6 +236,12 @@ input[type='number'] {
206
236
  -moz-appearance: textfield;
207
237
  }
208
238
 
239
+ html.dark input[type='search'] {
240
+ color:#ffffff;
241
+ background-color: #000000;
242
+ }
243
+
244
+
209
245
  textarea {
210
246
  resize: vertical;
211
247
  }
@@ -229,10 +265,11 @@ p {
229
265
  overflow-wrap: break-word;
230
266
  }
231
267
 
268
+
232
269
  :root{
233
270
  /* Tweak the min/max to taste; ratio ≈ 1.25 across levels */
234
271
  --h1-min: 2.0rem; --h1-max: 3.0rem; /* 32–48 */
235
- --h2-min: 1.6rem; --h2-max: 2.25rem; /* 25.6–36 */
272
+ --h2-min: 1.6rem; --h2-max: 2.0rem; /* 25.6–36 */
236
273
  --h3-min: 1.35rem; --h3-max: 1.8rem; /* 21.6–28.8 */
237
274
  --h4-min: 1rem; --h4-max: 1.35rem; /* 18.4–23.2 */
238
275
  --h5-min: 1.05rem; --h5-max: 1.2rem; /* 16.8–19.2 */
@@ -250,33 +287,61 @@ h1:not(.mb-2):not(.display-4){
250
287
  line-height: 1.1;
251
288
  margin-top: 0; /* article title at top */
252
289
  }
253
- h2:not(.title){
290
+ h2:not(.title):not(.d-inline){
254
291
  font-size: clamp(var(--h2-min), 1.5vw + 0.9rem, var(--h2-max));
255
- font-weight: 650;
292
+ font-weight: 600;
256
293
  /*border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);*/
257
294
  /*padding-bottom: 0.2em;*/
258
295
  }
259
296
  h3{
260
297
  font-size: clamp(var(--h3-min), 1.2vw + 0.7rem, var(--h3-max));
261
- font-weight: 600;
298
+ font-weight: 570;
262
299
  }
263
300
  h4{
264
301
  font-size: clamp(var(--h4-min), 0.8vw + 0.6rem, var(--h4-max));
265
302
  font-weight: 550;
266
303
  }
267
- h5:not(.description){
304
+ /* the excluded class is description2 - the toolbar description span; ":not(.description)"
305
+ excluded a class no markup carries */
306
+ h5:not(.description2){
268
307
  font-size: clamp(var(--h5-min), 0.6vw + 0.6rem, var(--h5-max));
269
- font-weight: 500;
308
+ font-weight: 550;
270
309
  color: color-mix(in srgb, currentColor 85%, #000 15%);
271
310
  }
272
- h6:not(.description){
273
- font-size: clamp(var(--h6-min), 0.5vw + 0.55rem, var(--h6-max));
274
- font-weight: 600;
311
+ h6:not(.description2){
312
+ /* "0.vw" (no digit after the point) invalidated the whole clamp() at computed-value time,
313
+ so h6 font-size fell back to inherit - the dropped digit was 0.4 to fit the h4/h5 series */
314
+ font-size: clamp(var(--h6-min), 0.4vw + 0.55rem, var(--h6-max));
315
+ font-weight: 500;
275
316
  /*text-transform: uppercase; */ /* differentiate without shrinking */
276
317
  letter-spacing: 0.06em;
277
318
  color: color-mix(in srgb, currentColor 70%, #000 30%);
278
319
  }
320
+ /* WCAG 2.4.12: Focus Not Obscured - ensure focused elements aren't hidden */
279
321
  /* Better anchor linking with fixed headers/ToC */
280
- /*:where(h1,h2,h3,h4,h5,h6){ scroll-margin-top: 96px; }*/
322
+ :where(h1,h2,h3,h4,h5,h6) { scroll-margin-top: 80px; }
323
+ :target { scroll-margin-top: 80px; }
324
+
325
+ /* Ensure focused elements have scroll margin to avoid being obscured */
326
+ :focus { scroll-margin: 80px 0; }
281
327
  /* Tighten multi-line large headings */
282
- h1, h2 { hyphens: auto; }
328
+ h1, h2 { hyphens: auto; }
329
+
330
+ .text-success {
331
+ color: var(--htl-c-green-darker) !important;
332
+ }
333
+
334
+ .bg-secondary {
335
+ background-color: var(--htl-c-gray-dark-2) !important;
336
+ }
337
+
338
+ .description2 {
339
+ font-size: 0.8rem;
340
+ font-weight: 400;
341
+ color: #000000;
342
+ margin-bottom: 0.5rem;
343
+ }
344
+
345
+ .dark .description2 {
346
+ color: var(--htl-c-text-dark-1);
347
+ }
@@ -23,6 +23,7 @@ api-param-name {
23
23
  font-family: "courier new";
24
24
  font-weight: 700;
25
25
  }
26
+
26
27
  api-param-type {
27
28
  display: inline;
28
29
  border-radius: 4px;
@@ -34,6 +35,7 @@ api-param-name {
34
35
  font-style: italic;
35
36
  font-weight: 600;
36
37
  }
38
+
37
39
  api-param-type:before {
38
40
  font-style: normal;
39
41
  font-weight: 400;
@@ -76,9 +78,9 @@ api-param-name {
76
78
  /* API parameter description block */
77
79
  api-param-desc {
78
80
  display: block;
79
- padding-top: 1em;
80
- padding-bottom: 2em;
81
- padding-left: 2em;
81
+ margin-top: 1em;
82
+ margin-bottom: 2em;
83
+ margin-left: 2em;
82
84
  }
83
85
 
84
86
  /* GS: We need this for now as the custom element above does
@@ -89,6 +91,7 @@ api-param-name {
89
91
  padding-bottom: 2em;
90
92
  padding-left: 2em;
91
93
  }
94
+
92
95
 
93
96
  api-prop-name {
94
97
  display: inline;