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

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/_data/base/project.yml

@@ -16,7 +16,7 @@ description: Community Enterprise Operating System
 # Project Actions
 # -------------------------------------------------------------------------------
 # Use short verbs to tell users what they can do inside the project (e.g., Know
-# more, Contribute, etc.). Project actions
+# more, Contribute, etc.).
 actions:
   - name: Know more
     icon: fa-solid fa-arrow-right

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-default-cell.html.liquid

@@ -0,0 +1,83 @@
+{% comment %}
+================================================================================
+Template: Configuration Variables — Default Cell
+Purpose: Renders one Default-column cell's contents. Included from both
+configuration_variables.html.liquid (top-level table) and
+configuration_variables-nested.html.liquid (recursive nested tables) so every
+schema-driven Name/Type/Default/Description table presents a long default
+value the same way, with one shared rule instead of two copies that could
+drift apart.
+
+Behavior:
+- Liquid's `default` filter treats `false` as blank, so a plain
+  `include.default | default: "—"` would hide a real `false` value. This nil
+  check keeps `false` distinct from "no default set".
+- An explicit `default: ""` (e.g. download_schema.yml's `iso`/`rpm`/`link`
+  URLs, whose description already says "Empty hides the ... button") is a
+  real, intentional default — not the same as "no default declared". Left to
+  fall through to `<code>{{ default_value }}</code>`, it renders as a visibly
+  empty inline code element: sighted users read it as a rendering glitch, and
+  a screen reader announces an empty `<code>` with no indication a value is
+  even there, which fails WCAG 1.3.1 (the "default is an empty string" fact
+  is conveyed by absence alone, not programmatically). It gets its own
+  `<code>""</code>` rendering plus a `.visually-hidden` "(empty string)" note,
+  so the cell reads as a value distinct from both `—` (nil) and a populated
+  default.
+- Every real default value renders as `<code>`, the same as the Name and
+  Type columns — a config default is a literal value, not prose, so it's
+  shown raw (escaped, not markdownified) rather than interpreted as
+  Markdown. The nil placeholder `—` is left plain, since it isn't a value.
+- A default value with a long unbroken run of characters (an SRI hash, a
+  CDN URL, ...) forces its column wide under normal table auto-layout, at
+  the Description column's expense, regardless of how many columns the
+  table has. Truncating it into a fixed-width single-line box instead would
+  need scrolling or selecting to read the rest, which runs against WCAG
+  1.4.10 Reflow. Past `long_value_threshold` characters with no space to
+  wrap at, the *longest unbroken token* (not the value's total length —
+  see below) gets the extra `.long-value` class (breaks at any character
+  via `overflow-wrap: anywhere`, see _customization.scss): the full value
+  stays visible with no interaction required, and it takes only the width
+  it actually needs.
+- Checked by longest unbroken token, not total length: a value can be long
+  overall but still wrap fine on its own spaces (a class list, a sentence);
+  what actually forces a column wide is one run with nowhere to break.
+- Only `type: string` values are checked for length — a boolean or number
+  is never "long", and running `split`/`size` on a non-string isn't
+  reliable.
+
+Required Inputs:
+- default: The raw prop_details.default value (may be nil, false, a string, etc.)
+- type: The property's schema `type`, e.g. "string", "boolean".
+================================================================================
+{% endcomment %}
+
+{% if include.default == nil %}
+  {% assign default_value = "—" %}
+{% elsif include.default == "" %}
+  {% assign default_value = "" %}
+  {% assign is_empty_string = true %}
+{% else %}
+  {% assign default_value = include.default %}
+{% endif %}
+
+{% assign long_value_threshold = 24 %}
+{% assign max_token_length = 0 %}
+{% if include.type == "string" and default_value != "—" %}
+  {% assign default_tokens = default_value | split: " " %}
+  {% for token in default_tokens %}
+    {% assign token_length = token | size %}
+    {% if token_length > max_token_length %}
+      {% assign max_token_length = token_length %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% if default_value == "—" %}
+—
+{% elsif is_empty_string %}
+<code>""</code><span class="visually-hidden"> (empty string)</span>
+{% elsif max_token_length > long_value_threshold %}
+<code class="long-value">{{ default_value | escape }}</code>
+{% else %}
+<code>{{ default_value | escape }}</code>
+{% endif %}

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

@@ -17,14 +17,10 @@ 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 +40,14 @@ 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: "—" %}
 
         <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>{% if prop_details.type %}<code>{{ prop_details.type }}</code>{% else %}—{% endif %}</td>
+            <td>{% include base/configuration_variables-default-cell.html.liquid default=prop_details.default type=prop_details.type %}</td>
             <td>{{ prop_details.description | strip_newlines | markdownify | default: "—" }}</td>
           {% endif %}
         </tr>
@@ -60,14 +55,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)" %}
@@ -77,7 +71,6 @@ others. Requires two distinct loops for valid HTML structure.
     {% endif %}
 
     {% if nested_properties %}
-      {% comment %} Found deeper nesting: Call the next level {% endcomment %}
       {% assign next_parent_name = include.parent_name | append: "." | append: prop_key %}
       {% assign next_level_val = current_level | plus: 1 %}
 

data/_includes/base/configuration_variables.html.liquid

@@ -17,15 +17,10 @@ of separate, nested DataTables for complex properties.
 
 {% if property_schema.properties %}
 
-  {% comment %} 1. Calculate the property count for the top table using | size. {% endcomment %}
-  {% assign property_count = property_schema.properties | size %}
-
-  {% comment %} 2. Determine the CSS classes for the top-level table. {% endcomment %}
   {% assign table_classes = "table dataTable" %}
 
   <p>The <code>{{ page.component.name }}</code> {{ page.component.type }} understands the following configuration variables:</p>
 
-  {% comment %} 3. Render the top-level table completely {% endcomment %}
   <table class="{{ table_classes }}">
     <thead>
       <tr>
@@ -48,8 +43,8 @@ of separate, nested DataTables for complex properties.
           {% 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>{{ prop_details.default     | strip_newlines | markdownify | default: "—" }}</td>
+            <td>{% if prop_details.type %}<code>{{ prop_details.type }}</code>{% else %}—{% endif %}</td>
+            <td>{% include base/configuration_variables-default-cell.html.liquid default=prop_details.default type=prop_details.type %}</td>
             <td>{{ prop_details.description | strip_newlines | markdownify | default: "—" }}</td>
           {% endif %}
         </tr>
@@ -57,7 +52,7 @@ of separate, nested DataTables for complex properties.
     </tbody>
   </table>
 
-  {% comment %} 4. Initiate recursive nested table generation (separate loop) {% endcomment %}
+  {% comment %} Separate loop, run only after </table> closes above: recurses into any property that nests its own properties. {% endcomment %}
   {% for property in property_schema.properties -%}
     {% assign prop_key = property[0] %}
     {% assign prop_details = property[1] %}
@@ -65,12 +60,10 @@ of separate, nested DataTables for complex properties.
     {% assign nested_properties = nil %}
     {% assign type_desc = "" %}
 
-    {% comment %} Check for nested structures in the top-level properties {% endcomment %}
     {% if prop_details.type == "object" and prop_details.properties %}
       {% assign nested_properties = prop_details.properties %}
       {% assign type_desc = "dictionary (map)" %}
     {% elsif prop_details.type == "array" and prop_details.items.properties %}
-      {% comment %} Handle array of objects {% endcomment %}
       {% assign nested_properties = prop_details.items.properties %}
       {% assign type_desc = "list of dictionaries" %}
     {% endif %}
@@ -78,7 +71,6 @@ of separate, nested DataTables for complex properties.
     {% if nested_properties %}
       {% assign initial_level = 1 %}
 
-      {% comment %} Call the recursive include for the first level of nested properties. {% endcomment %}
       {% include base/configuration_variables-nested.html.liquid
       properties=nested_properties
       parent_name=prop_key

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

@@ -12,7 +12,10 @@ Design Logic:
 - Google Fonts: Montserrat (5 weights) and Source Code Pro (2 weights) via async stylesheet
 - Breakingnews scroll offset: dynamic CSS calculation
 - Conditional includes: OGP, Highlight.js, DataTables, FontAwesome (SVG+JS), Event Calendar
-- CSS prioritization: custom stylesheet last for override
+- CSS load order: theme stylesheet loads first, then per-component vendor
+  CSS (FontAwesome, DataTables, Event Calendar). Components whose vendor CSS
+  needs correcting win with higher-specificity selectors in their own SCSS
+  partial instead of load order — see _datatable.scss and _calendar.scss.
 - Script loading: Bootstrap base first (defer), then optional extensions, then UI behaviors
 - Bootstrap and FontAwesome preloaded (high-priority fetch); CDN origins preconnected + dns-prefetched per active component
 
@@ -29,7 +32,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 +64,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 +81,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 +126,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 +135,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" %}