jekyll-theme-centos 2.52.0.beta.102 → 2.52.0.beta.103

data/_data/base/link_schema.yml

@@ -49,7 +49,7 @@ properties:
           - _blank
       class:
         type: string
-        default: "link link-{color} link-offset-3 link-offset-3-hover link-underline-{color} link-underline-opacity-0 link-underline-opacity-100-hover"
+        default: "link link-{color} link-offset-3 link-offset-3-hover link-underline-{color} link-underline-opacity-0 link-underline-opacity-100-hover focus-ring"
         description: >-
           One or more CSS classes to apply to the link element. Use this
           to override default link styling and apply component styles like

data/_data/base/preview_schema.yml

@@ -0,0 +1,88 @@
+title: Preview Box Component Configuration
+description: >-
+  Schema for configuring the preview box wrapper. `preview.html.liquid`
+  renders a bordered container around up to three independently optional
+  rows, stacked flush against the container and each other (zero margin
+  between rows, though individual rows may carry their own padding) in
+  this order — a live-rendered demo, a thin toolbar divider (language
+  label, copy button), and a syntax-highlighted code sample — modeled on
+  Bootstrap's own documentation snippet pattern
+  (https://getbootstrap.com/docs/5.3/components/accordion/).
+  Used by documentation pages to visually set off a component's rendered
+  output and the source that produced it as one unit. When only `content`
+  is supplied, this component renders exactly as it always has: a single
+  bordered/padded `<div>` with no toolbar or code row, for backward
+  compatibility with existing call sites.
+type: object
+properties:
+  class:
+    type: string
+    default: "mb-3 p-3 text-bg-light border border-1 rounded"
+    description: >-
+      CSS classes applied to the wrapper `<div>` (e.g., `mb-3 p-3 border
+      border-1 rounded` for a plain box without the light background, or
+      `mb-3 p-3 text-bg-light border border-1 border-primary-subtle
+      rounded` for a primary-tinted border).
+  content:
+    type: string
+    default: ""
+    description: >-
+      Pre-rendered HTML string for the demo row's contents, built by the
+      caller via a `capture` tag around one or more sibling includes. Set
+      off with `content_class`'s background to read as distinct from the
+      code row below it. When empty, this row does not render.
+  content_class:
+    type: string
+    default: "bg-body pt-2 px-2"
+    description: >-
+      CSS classes applied to the demo row's `<div class="preview-content">`
+      wrapper (e.g., `bg-body pt-2 px-2` for the page's own background with
+      top/side breathing room and no bottom padding, so it sits flush
+      against the toolbar row below; the outer `.preview` container
+      supplies the box's border, rounding, and corner-clipping — this row
+      does no rounding of its own).
+  language:
+    type: string
+    default: ""
+    description: >-
+      Language identifier for the code sample (e.g., `liquid`, `html`, `js`,
+      `yaml`), kept lowercase. Shown on the toolbar's left side (visually
+      uppercased via `language_class`'s `text-uppercase`, the value itself
+      stays lowercase) and also applied as the `language-{{ language }}`
+      class on the code row's `<code>` element so highlight.js colorizes it
+      correctly (see base/highlight.html.liquid). When empty and `code` is
+      also empty, the toolbar row does not render; when empty but `code` is
+      set, no language label renders and highlight.js falls back to
+      language auto-detection.
+  language_class:
+    type: string
+    default: "small font-monospace text-body-secondary text-uppercase"
+    description: >-
+      CSS classes applied to the language label `<span>` (e.g., `small
+      font-monospace text-body-secondary text-uppercase`).
+  copy_class:
+    type: string
+    default: ""
+    description: >-
+      Extra CSS classes applied to the toolbar's copy-button `<span>`. Set
+      to `d-none` to hide the button without removing `code` (e.g., a
+      snippet that's intentionally not meant to be copied). The button
+      itself only renders when `code` is supplied — there is nothing to
+      copy otherwise.
+  code:
+    type: string
+    default: ""
+    description: >-
+      Raw code sample text for the code row, escaped at render time (via
+      Liquid's `escape` filter) before being placed inside `<code>` and
+      inside the copy button's `data-copy-value` attribute. When empty,
+      this row does not render, and the toolbar's copy button does not
+      render either.
+  code_class:
+    type: string
+    default: "p-0 m-0"
+    description: >-
+      Extra CSS classes applied to the code row's `<div class="preview-code">`
+      wrapper. The `<pre>` inside it carries its own fixed `p-2` padding,
+      separate from this property.
+additionalProperties: false

data/_includes/base/color-table.html.liquid

@@ -24,10 +24,10 @@
 {%- capture _webaim_link %}https://webaim.org/resources/contrastchecker/?fcolor={{ _webaim_fcolor }}&bcolor={{ _webaim_bcolor }}{%- endcapture %}
     <tr>
       <td class="text-nowrap">{{ _item_name }}</td>
-      <td class="text-nowrap"><i class="fas fa-circle fa-xl" style="color: {{ item.hex }}"></i><span role="button" class="copy-btn" data-bs-toggle="tooltip" data-bs-title="Copy hex value" data-copy-value="{{ item.hex }}" aria-label="Copy hex value {{ item.hex }}"><code>{{ item.hex }}</code> <span class="fa-regular fa-copy"></span></span></td>
-      <td class="text-nowrap"><span role="button" class="copy-btn" data-bs-toggle="tooltip" data-bs-title="Copy RGB value" data-copy-value="{{ item.rgb }}" aria-label="Copy RGB value {{ item.rgb }}"><code>{{ item.rgb }}</code> <span class="fa-regular fa-copy"></span></span></td>
-      <td class="text-nowrap"><span role="button" class="copy-btn" data-bs-toggle="tooltip" data-bs-title="Copy HSV value" data-copy-value="{{ item.hsv }}" aria-label="Copy HSV value {{ item.hsv }}"><code>{{ item.hsv }}</code> <span class="fa-regular fa-copy"></span></span></td>
-      <td class="text-nowrap">{% if item.text_color == "Black" %}<span class="badge {{ item.text_badge }}" data-bs-toggle="tooltip" data-bs-title="{{ item.text_color }} — near-black brand color, not literal black"><span aria-hidden="true">{{ item.text_color | slice: 0, 1 }}</span><span class="visually-hidden">{{ item.text_color }}</span></span>{% else %}<span class="badge {{ item.text_badge }}" data-bs-toggle="tooltip" data-bs-title="{{ item.text_color }}"><span aria-hidden="true">{{ item.text_color | slice: 0, 1 }}</span><span class="visually-hidden">{{ item.text_color }}</span></span>{% endif %} <span role="button" class="copy-btn" data-bs-toggle="tooltip" data-bs-title="Copy text color hex value" data-copy-value="{{ item.text_color_hex }}" aria-label="Copy text color hex value {{ item.text_color_hex }}"><code>{{ item.text_color_hex }}</code> <span class="fa-regular fa-copy"></span></span></td>
+      <td class="text-nowrap"><i class="fas fa-circle fa-xl" style="color: {{ item.hex }}"></i><button type="button" class="copy-btn focus-ring" data-bs-toggle="tooltip" data-bs-title="Copy hex value" data-copy-value="{{ item.hex }}" aria-label="Copy hex value {{ item.hex }}"><code>{{ item.hex }}</code> <span class="fa-regular fa-copy"></span></button></td>
+      <td class="text-nowrap"><button type="button" class="copy-btn focus-ring" data-bs-toggle="tooltip" data-bs-title="Copy RGB value" data-copy-value="{{ item.rgb }}" aria-label="Copy RGB value {{ item.rgb }}"><code>{{ item.rgb }}</code> <span class="fa-regular fa-copy"></span></button></td>
+      <td class="text-nowrap"><button type="button" class="copy-btn focus-ring" data-bs-toggle="tooltip" data-bs-title="Copy HSV value" data-copy-value="{{ item.hsv }}" aria-label="Copy HSV value {{ item.hsv }}"><code>{{ item.hsv }}</code> <span class="fa-regular fa-copy"></span></button></td>
+      <td class="text-nowrap">{% if item.text_color == "Black" %}<span class="badge {{ item.text_badge }}" data-bs-toggle="tooltip" data-bs-title="{{ item.text_color }} — near-black brand color, not literal black"><span aria-hidden="true">{{ item.text_color | slice: 0, 1 }}</span><span class="visually-hidden">{{ item.text_color }}</span></span>{% else %}<span class="badge {{ item.text_badge }}" data-bs-toggle="tooltip" data-bs-title="{{ item.text_color }}"><span aria-hidden="true">{{ item.text_color | slice: 0, 1 }}</span><span class="visually-hidden">{{ item.text_color }}</span></span>{% endif %} <button type="button" class="copy-btn focus-ring" data-bs-toggle="tooltip" data-bs-title="Copy text color hex value" data-copy-value="{{ item.text_color_hex }}" aria-label="Copy text color hex value {{ item.text_color_hex }}"><code>{{ item.text_color_hex }}</code> <span class="fa-regular fa-copy"></span></button></td>
       <td class="text-nowrap"><code>{{ item.contrast_ratio | remove: '`' }}</code> {% include base/link.html.liquid link=_webaim_link target="_blank" class="text-decoration-none" icon="fas fa-external-link-alt" data_bs_toggle="tooltip" data_bs_title="Verify with WebAIM" aria_label="Verify contrast ratio with WebAIM" %}</td>
       <td class="text-nowrap">{% if item.wcag_2_2_aa %}<span class="d-inline-block" data-bs-toggle="tooltip" title="Exceeds WCAG 2.2 AA standard (4.5:1 minimum)"><i class="fas fa-circle-check text-success"></i></span>{% else %}<span class="d-inline-block" data-bs-toggle="tooltip" title="Underperforms WCAG 2.2 AA standard (4.5:1 minimum)"><i class="fas fa-circle-xmark text-danger"></i></span>{% endif %} <code>{{ item.wcag_2_2_aa_margin | remove: '`' }}</code></td>
       <td class="text-nowrap">{% if item.wcag_2_2_aaa %}<span class="d-inline-block" data-bs-toggle="tooltip" title="Exceeds WCAG 2.2 AAA standard (7.0:1 minimum)"><i class="fas fa-circle-check text-success"></i></span>{% else %}<span class="d-inline-block" data-bs-toggle="tooltip" title="Underperforms WCAG 2.2 AAA standard (7.0:1 minimum)"><i class="fas fa-circle-xmark text-danger"></i></span>{% endif %} <code>{{ item.wcag_2_2_aaa_margin | remove: '`' }}</code></td>

data/_includes/base/configuration_variables-nested.html.liquid

@@ -17,14 +17,12 @@ others. Requires two distinct loops for valid HTML structure.
 
 {% if current_properties %}
 
-  {% comment %} 1. Calculate the property count for THIS specific set of data using | size. {% endcomment %}
   {% assign current_property_count = current_properties | size %}
 
-  {% comment %} 2. Determine CSS classes and ID for THIS table {% endcomment %}
   {% assign table_classes = "table dataTable" %}
   {% assign table_id = parent_name | slugify | append: '-nested-' | append: current_level %}
 
-  {% comment %} 3. Render the current nested table (Loop 1: Rendering) {% endcomment %}
+  {% comment %} Loop 1: render this table {% endcomment %}
   <p class="my-3">The <code>{{ parent_name }}</code> variable is a {{ type_desc }} with the following properties:</p>
 
   <table id="{{ table_id }}" class="{{ table_classes }}">
@@ -44,15 +42,39 @@ others. Requires two distinct loops for valid HTML structure.
       {% for property in current_properties -%}
         {% assign prop_key = property[0] %}
         {% assign prop_details = property[1] %}
-        {% assign default_value = prop_details.default | default: "—" %}
+        {% comment %}
+        Liquid's `default` filter treats `false` as blank, so a plain
+        `prop_details.default | default: "—"` would hide a real `false`
+        value. This nil check keeps `false` distinct from no default set.
+        {% endcomment %}
+        {% if prop_details.default == nil %}
+          {% assign default_value = "—" %}
+        {% else %}
+          {% assign default_value = prop_details.default %}
+        {% endif %}
 
         <tr>
           <td><code>{{ prop_key }}</code></td>
           {% if columns %}
             {% for col in columns %}<td>{{ prop_details[col.key] | strip_newlines | markdownify | default: "—" }}</td>{% endfor %}
           {% else %}
-            <td>{{ prop_details.type        | strip_newlines | markdownify | default: "—" }}</td>
-            <td>{{ default_value            | strip_newlines | markdownify | default: "—" }}</td>
+            <td>{{ prop_details.type | strip_newlines | markdownify | default: "—" }}</td>
+            {% comment %}
+            A long SRI hash as plain text stretches this column past the
+            others. format: sri-hash renders it as a copyable value
+            instead, the same pattern download_filevalue.html.liquid uses
+            for checksums.
+            {% endcomment %}
+            {% if prop_details.format == "sri-hash" %}
+            <td>
+              <div class="input-group input-group-sm">
+                <input type="text" class="form-control font-monospace" readonly value="{{ default_value | escape }}" aria-label="Value for {{ prop_key }}">
+                <button type="button" class="input-group-text copy-btn focus-ring" data-copy-value="{{ default_value | escape }}" data-bs-toggle="tooltip" data-bs-title="Copy value" aria-label="Copy value for {{ prop_key }}"><span class="fa-regular fa-copy"></span></button>
+              </div>
+            </td>
+            {% else %}
+            <td>{{ default_value | strip_newlines | markdownify | default: "—" }}</td>
+            {% endif %}
             <td>{{ prop_details.description | strip_newlines | markdownify | default: "—" }}</td>
           {% endif %}
         </tr>
@@ -60,14 +82,13 @@ others. Requires two distinct loops for valid HTML structure.
     </tbody>
   </table>
 
-  {% comment %} 4. Run recursion check (Loop 2: Initiation, must run AFTER </table>) {% endcomment %}
+  {% comment %} Loop 2: recurse into nested properties, run only after </table> closes {% endcomment %}
   {% for property in current_properties %}
     {% assign prop_key = property[0] %}
     {% assign prop_details = property[1] %}
 
     {% assign nested_properties = nil %}
 
-    {% comment %} Check if the current property requires further recursion {% endcomment %}
     {% if prop_details.type == "object" and prop_details.properties %}
       {% assign nested_properties = prop_details.properties %}
       {% assign next_type_desc = "dictionary (map)" %}

data/_includes/base/copyvalue.html.liquid

@@ -2,35 +2,41 @@
 ================================================================================
 Template: Copy Value Component
 Purpose: Copy to clipboard with visual feedback (checkmark + tooltip).
-Decodes HTML-entity-escaped values back to plain text before copying.
 ================================================================================
 
 Required Usage (in template):
-  <span role="button" class="copy-btn" data-copy-value="{{ command | escape }}"
-        data-bs-toggle="tooltip" data-bs-title="Copy command">
+  <button type="button" class="copy-btn focus-ring" data-copy-value="{{ command | escape }}"
+          data-bs-toggle="tooltip" data-bs-title="Copy command">
     <span class="fa-regular fa-copy"></span>
-  </span>
+  </button>
+
+ACCESSIBILITY — every `.copy-btn` must be a `<button type="button">`. This
+gives it keyboard focus and Enter/Space activation automatically.
+`_customization.scss` resets the button's default border, background, and
+padding back to a plain icon trigger. `.input-group-text.copy-btn`
+(checksum and SRI-hash rows) is the exception — it keeps Bootstrap's own
+addon box styling instead. Every `.copy-btn` also carries `focus-ring` so
+its keyboard-focus ring matches the rest of the theme's interactive
+elements — see `.focus-ring:focus:not(:focus-visible)` in
+`_customization.scss`.
 
 SECURITY — `data-copy-value` MUST always go through Liquid's `| escape` (or
 equivalent HTML-attribute encoding) at the point where it is written, with no
-exception for values that "look safe". The JS below decodes HTML entities
-(&quot;, &amp;, &#39;, …) back to plain text before copying so the clipboard
-receives the original string rather than its escaped form — this decoding is
-a UX convenience, not sanitization, and provides no protection if the value
-was interpolated unescaped in the first place. An unescaped, attacker-
-influenced value (a query parameter, CMS field, etc.) placed directly in
-data-copy-value breaks out of the HTML attribute at render time, before this
-script ever runs.
-
-Strategic Design Logic:
-- HTML entity decoding: reverses &quot;, &amp;, &#39; encoding so the
-  clipboard receives plain text, independent of how the value was escaped
+exception for values that "look safe". The browser's own HTML parser decodes
+entities (&quot;, &amp;, &#39;, …) in an attribute value as it parses the
+tag, so by the time the JS reads `data-copy-value` it is already plain text —
+there is no separate decoding step to rely on for sanitization. An unescaped,
+attacker-influenced value (a query parameter, CMS field, etc.) placed
+directly in data-copy-value breaks out of the HTML attribute at render time,
+before this script ever runs.
+
+Behavior:
 - Visual feedback: checkmark icon + success tooltip
 - Auto-reset: returns to original state after delay
 - Clipboard API: native browser copy functionality
 
 Required Inputs (from HTML element):
-- class="copy-btn": Element to attach handler
+- class="copy-btn": Marks the element as a copy trigger
 - data-copy-value: Text to copy to clipboard
 
 Optional Inputs (from data objects):

data/_includes/base/download_architecture.html.liquid

@@ -147,10 +147,12 @@ content — see examples/components/download-alternative-images.md.
   {%- if arch_data.mirrors.iso and arch_data.mirrors.iso != "" or arch_data.mirrors.rpm and arch_data.mirrors.rpm != "" or arch_data.mirrors.cloud and arch_data.mirrors.cloud != "" or arch_data.mirrors.containers and arch_data.mirrors.containers != "" or arch_data.mirrors.vagrant and arch_data.mirrors.vagrant != "" or arch_data.mirrors.torrent and arch_data.mirrors.torrent != "" %}
     {%- assign has_mirrors = true %}
   {%- endif %}
-  {%- comment %} arch_name is a raw YAML map key — strip the same
-  attribute/markup-breaking characters entry_title_id_safe strips in
-  download.html.liquid before it seeds arch_id_prefix, which in turn
-  becomes id/data-copy-value scoping in download_filevalue.html.liquid. {% endcomment %}
+  {%- comment %} arch_name is a raw YAML map key, so strip
+  attribute/markup-breaking characters before it seeds arch_id_prefix, which
+  in turn becomes id/data-copy-value scoping in download_filevalue.html.liquid.
+  Note: download.html.liquid's own entry_title_id_safe now uses `slugify`
+  instead of this remove: chain, since slugify catches characters (e.g. em
+  dashes) the chain below doesn't. {% endcomment %}
   {%- assign arch_name_id_safe = arch_name | remove: '"' | remove: "'" | remove: '<' | remove: '>' | remove: '&' | remove: '#' | remove: '?' | remove: '/' %}
   {%- assign arch_id_prefix = include.release_id | default: "download" | append: "-" | append: arch_name_id_safe | downcase | replace: " ", "-" %}
   <div class="{{ arch_col_class }}"{% if arch_orphan_style != "" %} style="{{ arch_orphan_style }}"{% endif %}>
@@ -190,7 +192,7 @@ content — see examples/components/download-alternative-images.md.
         4-column arrangement). Reuses base/link.html.liquid, the theme's
         canonical link/button component. {% endcomment %}
         <div class="d-flex flex-wrap gap-2" role="group" aria-label="Primary download actions">
-          {%- include base/link.html.liquid class="btn btn-primary flex-fill text-start" role="button" name="Download" link=arch_data.download icon="fa-solid fa-download" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn focus-ring btn-primary flex-fill text-start" role="button" name="Download" link=arch_data.download icon="fa-solid fa-download" icon_position="start" -%}
         </div>
         {%- endif %}
 
@@ -222,22 +224,22 @@ content — see examples/components/download-alternative-images.md.
       the site". {% endcomment %}
       <div class="d-flex flex-wrap gap-2">
         {%- if arch_data.mirrors.iso and arch_data.mirrors.iso != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="ISO Mirrors" link=arch_data.mirrors.iso target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+          {%- include base/link.html.liquid class="btn focus-ring btn-outline-primary flex-fill text-start" role="button" name="ISO Mirrors" link=arch_data.mirrors.iso target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.rpm and arch_data.mirrors.rpm != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="RPM Mirrors" link=arch_data.mirrors.rpm target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+          {%- include base/link.html.liquid class="btn focus-ring btn-outline-primary flex-fill text-start" role="button" name="RPM Mirrors" link=arch_data.mirrors.rpm target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.cloud and arch_data.mirrors.cloud != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Cloud Images" link=arch_data.mirrors.cloud target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+          {%- include base/link.html.liquid class="btn focus-ring btn-outline-primary flex-fill text-start" role="button" name="Cloud Images" link=arch_data.mirrors.cloud target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.containers and arch_data.mirrors.containers != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Container Images" link=arch_data.mirrors.containers target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+          {%- include base/link.html.liquid class="btn focus-ring btn-outline-primary flex-fill text-start" role="button" name="Container Images" link=arch_data.mirrors.containers target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.vagrant and arch_data.mirrors.vagrant != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Vagrant Boxes" link=arch_data.mirrors.vagrant target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+          {%- include base/link.html.liquid class="btn focus-ring btn-outline-primary flex-fill text-start" role="button" name="Vagrant Boxes" link=arch_data.mirrors.vagrant target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.torrent and arch_data.mirrors.torrent != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Torrent" link=arch_data.mirrors.torrent target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+          {%- include base/link.html.liquid class="btn focus-ring btn-outline-primary flex-fill text-start" role="button" name="Torrent" link=arch_data.mirrors.torrent target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
       </div>
       {%- endif %}

data/_includes/base/download_documentation.html.liquid

@@ -45,7 +45,7 @@ kinds doesn't end up with paragraphs breaking up a button row.
       {%- assign has_description = true %}
     {%- endif %}
     {%- if row.title and row.title != "" and has_description == false %}
-    {%- include base/link.html.liquid class="btn btn-outline-primary text-start" role="button" name=row.title link=row.link target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+    {%- include base/link.html.liquid class="btn focus-ring btn-outline-primary text-start" role="button" name=row.title link=row.link target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
     {%- endif %}
   {%- endfor %}
 {%- endcapture -%}

data/_includes/base/download_filevalue.html.liquid

@@ -64,5 +64,5 @@ both an empty `field` and a with_link-disabled page.
   <input type="text" id="{{ download_filevalue_id }}" class="form-control font-monospace" readonly value="{{ include.field_value | escape }}" aria-label="{{ download_filevalue_label_cap }} value for {{ include.arch_name | escape }}">
   {%- comment %} data-copy-value MUST go through `| escape` — see
   base/copyvalue.html.liquid's own security note. {% endcomment %}
-  <span class="input-group-text copy-btn" role="button" data-copy-value="{{ include.field_value | escape }}" data-bs-toggle="tooltip" data-bs-title="Copy {{ include.label }} value" aria-label="Copy {{ include.label }} value"><span class="fa-regular fa-copy"></span></span>
+  <button type="button" class="input-group-text copy-btn focus-ring" data-copy-value="{{ include.field_value | escape }}" data-bs-toggle="tooltip" data-bs-title="Copy {{ include.label }} value" aria-label="Copy {{ include.label }} value"><span class="fa-regular fa-copy"></span></button>
 </div>

data/_includes/base/footer.html.liquid

@@ -25,7 +25,7 @@
   <div class="row justify-content-between align-items-start gx-5">
     <div class="col-sm-12 col-lg-4">
       {%- if footer_brand_image != "" %}
-        <a class="navbar-brand" href="{{ site.baseurl }}/">
+        <a class="navbar-brand focus-ring" href="{{ site.baseurl }}/">
           <img
               class="d-inline-block align-text-middle me-2{% if footer_brand_image_class != "" %} {{ footer_brand_image_class }}{% endif %}"
               src="{{ site.baseurl }}/assets/img/{{ footer_brand_image }}"

data/_includes/base/head.html.liquid

@@ -29,7 +29,9 @@ Optional Inputs:
 - page.with_breakingnews_data: Array of breaking news items
 - page.with_backtotop: Include back-to-top button (boolean)
 - page.with_copyvalue: Include copy-to-clipboard behavior (boolean)
-- page.theme_color, site.theme_color: Override browser chrome color (default: #A54C93)
+- page.theme_color, site.theme_color: Override browser chrome color. The
+  fallback below is a literal, not read from head_schema.yml — keep both in
+  sync if the default ever changes.
 ================================================================================
 {% endcomment %}
 
@@ -59,7 +61,7 @@ Optional Inputs:
 <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
 <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" />
 {%- endif %}
-{%- if page.with_highlight or page.with_backtotop %}
+{%- if page.with_backtotop %}
 <link rel="preconnect" href="https://unpkg.com" crossorigin />
 <link rel="dns-prefetch" href="https://unpkg.com" />
 {%- endif %}
@@ -76,11 +78,9 @@ Optional Inputs:
 <link rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Source+Code+Pro:ital,wght@0,400;0,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
 <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Source+Code+Pro:ital,wght@0,400;0,700&display=swap" /></noscript>
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/base/stylesheet.min.css" />
-{%- comment %}
-Dynamic Breaking News Offset CSS
-Adjust scroll-margin-top values based on the number of breaking news items.
-Uses CSS custom properties for cleaner, more maintainable dynamic styling.
-{%- endcomment %}
+{%- comment %} Sets scroll-margin-top via CSS custom properties, sized to
+the current number of breaking news items, so anchor links land below the
+breaking news bar (and navbar, if present) instead of under it. {%- endcomment %}
 {%- assign breakingnews = page.with_breakingnews_data | default: site.data.breakingnews | default: site.data.base.breakingnews %}
 {%- if page.with_breakingnews == true and breakingnews.size > 0 %}
   {%- assign breakingnews_alert_height = site.data.base.breakingnews_schema.properties.breakingnews_alert_height.default %}
@@ -123,7 +123,6 @@ Uses CSS custom properties for cleaner, more maintainable dynamic styling.
 
 {%- comment %} CSS dependencies {%- endcomment %}
 {%- include base/fontawesome.html.liquid type="head" %}
-{%- include base/highlight.html.liquid type="head" %}
 {%- include base/datatable.html.liquid type="head" %}
 {%- include base/calendar.html.liquid type="head" %}
 
@@ -133,7 +132,7 @@ Uses CSS custom properties for cleaner, more maintainable dynamic styling.
 
 {%- comment %} JavaScript optional library extensions {%- endcomment %}
 {%- include base/fontawesome.html.liquid type="script" %}
-{%- include base/highlight.html.liquid type="script" %}
+{%- include base/highlight.html.liquid %}
 {%- include base/datatable.html.liquid type="script" %}
 {%- include base/calendar.html.liquid type="script" %}
 

data/_includes/base/highlight.html.liquid

@@ -1,23 +1,24 @@
 {% comment %}
 ================================================================================
 Template: Highlight.js Code Syntax Highlighting Component
-Purpose: Loads Highlight.js library CSS and JavaScript from CDN with
-copy-to-clipboard functionality for code blocks.
-================================================================================
+Purpose: Loads Highlight.js from a CDN to color code blocks in the browser.
+
+This template only loads the JS library. It never loads a CSS theme file —
+the colors come from this site's own theme, _highlight-theme.scss, already
+part of the compiled stylesheet. It also doesn't add a copy button; that's
+base/highlight.js's job, which wraps every code block (plain Markdown or
+one built with base/preview.html.liquid) in the same toolbar, reusing the
+site-wide `.copy-btn` handler (src/JS/copyvalue.js).
 
-Design Logic:
-- CDN-based library: Highlight.js from cdnjs
-- Copy plugin: additional plugin for code clipboard functionality
-- Format switching: separate head (CSS) and script (JS) includes
-- Automatic initialization: on document load
-- Configurable theme: different color schemes available
-- 190+ languages supported
+Cdnjs's default build covers about 40 common languages. A block whose
+language isn't in that build renders as plain, uncolored text instead of
+erroring. Load any other language by setting
+with_highlight_data.languages.<id>: true in a page's front matter — see
+src/YAML/highlight_schema.yml for the full list of language ids.
 
 Optional Inputs:
-- type: "head" for CSS, "script" for JavaScript
-- theme: Syntax highlighting theme (default: "default")
-- version: Highlight.js version (e.g., "11.9.0")
-- data: Highlight.js configuration object
+- data: Highlight.js configuration object — version, script_integrity,
+  and languages (see above)
 
 Data Source Hierarchy (priority):
 1. include.data
@@ -41,44 +42,33 @@ Data Source Hierarchy (priority):
 
 {%- if with_highlight %}
 
-{%- assign highlight_theme          = with_highlight_data.theme                         | default: with_highlight_schema.theme.default %}
-{%- assign highlight_version        = with_highlight_data.version                       | default: with_highlight_schema.version.default %}
-{%- assign highlight_css_sri        = with_highlight_data.css_integrity                 | default: with_highlight_schema.css_integrity.default %}
-{%- assign highlight_script_sri     = with_highlight_data.script_integrity              | default: with_highlight_schema.script_integrity.default %}
-{%- assign copy_version             = with_highlight_data.copy_version                  | default: with_highlight_schema.copy_version.default %}
-{%- assign copy_script_sri          = with_highlight_data.copy_script_integrity         | default: with_highlight_schema.copy_script_integrity.default %}
-{%- assign copy_css_sri             = with_highlight_data.copy_css_integrity            | default: with_highlight_schema.copy_css_integrity.default %}
-{%- assign copy_icon_svg            = with_highlight_data.copy_button_icons.copy.svg    | default: with_highlight_schema.copy_button_icons.properties.copy.properties.svg.default %}
-{%- assign success_icon_svg         = with_highlight_data.copy_button_icons.success.svg | default: with_highlight_schema.copy_button_icons.properties.success.properties.svg.default %}
+{%- assign highlight_version    = with_highlight_data.version          | default: with_highlight_schema.version.default %}
+{%- assign highlight_script_sri = with_highlight_data.script_integrity | default: with_highlight_schema.script_integrity.default %}
 
-{%- capture html_highlight_head %}
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/styles/{{ highlight_theme | replace_first: 'base16-', 'base16/' | default: 'default' }}.min.css" integrity="{{ highlight_css_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <link rel="stylesheet" href="https://unpkg.com/highlightjs-copy@{{ copy_version }}/dist/highlightjs-copy.min.css" integrity="{{ copy_css_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <!-- Highlight.js Copy Button Icon Customization (from schema) -->
-  <style>
-    .hljs-copy-button:not([data-copied="true"])::before {
-      mask: url('data:image/svg+xml;utf-8,{{ copy_icon_svg }}');
-    }
-    .hljs-copy-button[data-copied='true']::after {
-      background-image: url('data:image/svg+xml;utf-8,{{ success_icon_svg }}');
-    }
-  </style>
-{%- endcapture %}
+<!-- Highlight.js Library -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/highlight.min.js" integrity="{{ highlight_script_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
 
-{%- capture html_highlight_script %}
-  <!-- Highlight.js Library and Copy Plugin -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/highlight.min.js" integrity="{{ highlight_script_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
-  <script src="https://unpkg.com/highlightjs-copy@{{ copy_version }}/dist/highlightjs-copy.min.js" integrity="{{ copy_script_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
-  <!-- Initialize Highlight.js -->
-  <script src="{{ site.baseurl }}/assets/js/base/highlight.min.js" defer></script>
-{%- endcapture %}
+{%- comment %}
+Optional per-language modules. Each script tag must come after the core
+library above, so its `hljs.registerLanguage` call has a global `hljs` to
+register against. A language's toggle lives in with_highlight_data.languages,
+set in a page's front matter. Its SRI hash comes from the schema's own
+x_integrity map — a page only names the languages it wants, never their
+hashes.
+{%- endcomment %}
+{%- assign highlight_languages   = with_highlight_data.languages %}
+{%- assign language_integrity    = with_highlight_schema.languages.properties.x_integrity.properties %}
+{%- if highlight_languages %}
+  {%- for language in highlight_languages %}
+    {%- assign language_id      = language[0] %}
+    {%- assign language_enabled = language[1] %}
+    {%- if language_enabled %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/languages/{{ language_id }}.min.js" integrity="{{ language_integrity[language_id].default }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
+    {%- endif %}
+  {%- endfor %}
+{%- endif %}
 
-{%- assign type = include.type %}
-{%- case type %}
-{%- when "head" %}
-  {{ html_highlight_head }}
-{%- when "script" %}
-  {{ html_highlight_script }}
-{%- endcase %}
+<!-- Initialize Highlight.js and wrap code blocks in the shared preview toolbar -->
+<script src="{{ site.baseurl }}/assets/js/base/highlight.min.js" defer></script>
 
 {%- endif %}

data/_includes/base/navbar.html.liquid

@@ -58,7 +58,7 @@ Data Source Hierarchy (priority):
 
     {%- if navbar_brand_image != "" %}
       {%- assign navbar_brand_link = "/" | locale_url: page.locale %}
-      <a class="navbar-brand" href="{{ site.baseurl }}{{ navbar_brand_link }}">
+      <a class="navbar-brand focus-ring" href="{{ site.baseurl }}{{ navbar_brand_link }}">
 
         <img
             class="d-inline-block align-text-middle me-2{% if navbar_brand_image_class != "" %} {{ navbar_brand_image_class }}{% endif %}"
@@ -85,7 +85,7 @@ Data Source Hierarchy (priority):
             {%- if navitem.menu.size == 0 %}
               <li class="nav-item">
                 {%- include base/link.html.liquid
-                class = "nav-link"
+                class = "nav-link focus-ring"
                 name  = navitem.name
                 link  = navitem_link
                 role  = "presentation"
@@ -94,7 +94,7 @@ Data Source Hierarchy (priority):
               </li>
             {%- else %}
               <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <a class="nav-link dropdown-toggle focus-ring" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="{{ navitem.icon }} me-1" aria-hidden="true"></i>{{ navitem.name }}
                 </a>
                 <ul class="dropdown-menu dropdown-menu-dark shadow">
@@ -102,7 +102,7 @@ Data Source Hierarchy (priority):
                     {%- assign dropdownitem_link = dropdownitem.link | locale_url: page.locale %}
                     <li>
                       {%- include base/link.html.liquid
-                      class = "dropdown-item"
+                      class = "dropdown-item focus-ring"
                       name  = dropdownitem.name
                       link  = dropdownitem_link
                       role  = "presentation"