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

data/_includes/base/breadcrumb.html.liquid

@@ -1,35 +1,7 @@
 {% comment %}
-================================================================================
-Template: Breadcrumb Navigation Component
-Purpose: Renders hierarchical breadcrumb navigation showing page location
-in the site's URL structure. Excludes locale codes from the visible trail.
-================================================================================
-
-Design Logic:
-- Automatic breadcrumb generation from page URL (no data config)
-- Hierarchical path visualization using URL splitting
-- Skips locale codes (e.g., /es/, /fr/) from visible breadcrumb
-- Home link always appears first as root
-- Current page title as active final item (non-clickable)
-- URL reconstruction preserves locale prefix in links
-
-Required Inputs:
-- page.url: Current page URL path (may include locale prefix)
-- page.original_url: URL without locale prefix (used for breadcrumb structure)
-- page.title: Display text for active breadcrumb
-
-Optional Inputs:
-- with_breadcrumb_data.arialabel: aria-label for the <nav> element (default: "breadcrumb")
-- column_class (include param): Bootstrap column class for the row wrapper (set by
-  the layout to keep this component aligned with the content column; defaults to "col")
-- row_class (include param): Bootstrap class(es) for the row wrapper (set by
-  the layout to keep this component's row aligned with title, artwork, toc,
-  and content; defaults to "row mb-3")
-
-Data Source Hierarchy:
-- with_breadcrumb: include.with_breadcrumb → page.with_breadcrumb
-- with_breadcrumb_data: include.data → page.with_breadcrumb_data → site.data.breadcrumb → site.data.base.breadcrumb
-================================================================================
+breadcrumb: renders a Home-rooted breadcrumb trail from the page URL, keeping the locale prefix in links; content.html.liquid sets row_class and column_class.
+Data: include.data > page.with_breadcrumb_data > site.data.breadcrumb > site.data.base.breadcrumb
+Schema: src/YAML/breadcrumb_schema.yml
 {% endcomment %}
 
 {%- assign with_breadcrumb = include.with_breadcrumb
@@ -46,39 +18,33 @@ Data Source Hierarchy:
 
 {%- assign with_breadcrumb_schema = site.data.base.breadcrumb_schema.properties.with_breadcrumb_data.properties %}
 
-{%- comment %} Use original_url if available (without locale), otherwise use full url {%- endcomment %}
+{%- comment %} page.original_url is the URL without the jekyll-l10n locale prefix. {%- endcomment %}
 {%- assign breadcrumb_url = page.original_url | default: page.url %}
 
-{%- comment %} Use plugin-provided locale (set for localized pages, defaults to 'en') {%- endcomment %}
+{%- comment %} jekyll-l10n sets page.locale only on localized pages. {%- endcomment %}
 {%- assign detected_locale = page.locale | default: 'en' %}
+{%- if detected_locale == 'en' %}
+  {%- assign crumb_prefix = '' %}
+{%- else %}
+  {%- assign crumb_prefix = detected_locale | prepend: '/' %}
+{%- endif %}
 
-{%- assign column_class = include.column_class | default: 'col' %}
-{%- assign row_class = include.row_class | default: 'row mb-3' %}
+{%- assign column_class = include.column_class | default: site.data.base.content_schema.properties.with_content_data.properties.col_class.default %}
+{%- assign row_class = include.row_class | default: site.data.base.content_schema.properties.with_content_data.properties.row_class.default %}
 
 <div class="{{ row_class }}">
   <div class="{{ column_class }}">
-    <nav class="small" aria-label="{{ with_breadcrumb_data.arialabel | default: with_breadcrumb_schema.arialabel.default | default: 'breadcrumb' }}">
+    <nav class="small" aria-label="{{ with_breadcrumb_data.arialabel | default: with_breadcrumb_schema.arialabel.default }}">
       <ol class="breadcrumb mb-0">
-        {%- comment %} Home link - adjust for locale {%- endcomment %}
-        {%- if detected_locale == 'en' or detected_locale == '' %}
-          <li class="breadcrumb-item"><a class="{{ site.with_link_decorator_data.default_link_classes }}" href="{{ site.baseurl }}/">Home</a></li>
-        {%- else %}
-          <li class="breadcrumb-item"><a class="{{ site.with_link_decorator_data.default_link_classes }}" href="{{ site.baseurl }}/{{ detected_locale }}/">Home</a></li>
-        {%- endif %}
+        <li class="breadcrumb-item"><a class="{{ site.with_link_decorator_data.default_link_classes }}" href="{{ site.baseurl }}{{ crumb_prefix }}/">Home</a></li>
 
         {%- assign crumbs = breadcrumb_url | remove:'/index.html' | split: '/' %}
         {%- for crumb in crumbs offset: 1 %}
           {%- if forloop.last %}
             <li class="breadcrumb-item active">{{ page.title }}</li>
           {%- else %}
-            {%- comment %} Build URL with locale prefix if not English {%- endcomment %}
             {%- assign crumb_limit = forloop.index | plus: 1 %}
-            {%- if detected_locale == 'en' or detected_locale == '' %}
-              {%- assign crumb_prefix = '' %}
-            {%- else %}
-              {%- assign crumb_prefix = detected_locale | prepend: '/' %}
-            {%- endif %}
-            <li class="breadcrumb-item"><a class="{{ site.with_link_decorator_data.default_link_classes }}" href="{{ site.baseurl }}{{ crumb_prefix }}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
+            <li class="breadcrumb-item"><a class="{{ site.with_link_decorator_data.default_link_classes }}" href="{{ site.baseurl }}{{ crumb_prefix }}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
           {%- endif %}
         {%- endfor %}
       </ol>

data/_includes/base/breakingnews.html.liquid

@@ -1,32 +1,7 @@
 {% comment %}
-================================================================================
-Template: Breaking News Component
-Purpose: Renders sticky alert banners for breaking news with multiple
-stacked alerts, colors, icons, and optional action links.
-================================================================================
-
-Design Logic:
-- Sticky positioning: stays visible during page scroll
-- Stacking support: multiple alerts stack vertically
-- Dynamic scroll offset calculation: prevents header hiding
-- Icon and color support: visual categorization
-- Optional action links: "Know more" button
-
-Required Inputs:
-- content: Alert message text/HTML
-
-Optional Inputs:
-- color: Alert color scheme (default: "primary")
-- icon: Icon class for Font Awesome (default: "fa-solid fa-bullhorn")
-- link: URL for "Know more" button (optional)
-- data: Array of breaking news items
-
-Data Source Hierarchy (priority):
-1. include.data
-2. page.with_breakingnews_data
-3. site.data.breakingnews
-4. site.data.base.breakingnews
-================================================================================
+breakingnews: renders a sticky stack of alerts, one per item, each with an optional "Know more" button.
+Data: include.data > page.with_breakingnews_data > site.data.breakingnews > site.data.base.breakingnews
+Schema: src/YAML/breakingnews_schema.yml
 {% endcomment %}
 
 {%- assign with_breakingnews = include.with_breakingnews
@@ -43,38 +18,26 @@ Data Source Hierarchy (priority):
 
 {%- assign with_breakingnews_schema = site.data.base.breakingnews_schema.properties.with_breakingnews_data.items.properties %}
 
-{%- comment %} === Presentation === {% endcomment %}
-{%- assign breakingnews_alert_height = site.data.base.breakingnews_schema.properties.breakingnews_alert_height.default %}
-{%- assign navbar_height = site.data.base.navbar_schema.properties.navbar_height.default %}
-
 {%- if with_breakingnews_data.size > 0 %}
 <div class="sticky-top sticky-top-breakingnews">
   {% for item in with_breakingnews_data %}
-
-    {%- comment %} --- Defaults --- {% endcomment %}
-    {% if forloop.first %}
-      {% assign breakingnews_alerts_height = breakingnews_alert_height | plus: navbar_height %}
-    {% else %}
-      {% assign breakingnews_alerts_height = breakingnews_alerts_height | plus: breakingnews_alert_height %}
-    {% endif %}
     {%- assign breakingnews_color     = item.color                    | default: with_breakingnews_schema.color.default %}
     {%- assign breakingnews_btn_class = "btn btn-sm text-nowrap btn-" | append: breakingnews_color %}
     {%- assign breakingnews_icon      = item.icon                     | default: with_breakingnews_schema.icon.default %}
-
-    {%- comment %} --- HTML --- {% endcomment %}
+    {%- comment %} The pinned Liquid has no remove_last, so split/join drops the trailing "</p>" markdownify adds. {% endcomment %}
+    {%- assign breakingnews_content_html = item.content | markdownify | strip | remove_first: "<p>" | split: "</p>" | join: "</p>" | strip %}
     <div class="breakingnews alert alert-{{ breakingnews_color }} p-2 rounded-0 m-0 border-start-0 border-end-0 shadow" role="alert">
       <div class="container d-flex justify-content-between align-items-center">
         <div class="me-3">
           <div class="h6 mb-0"><i class="{{ breakingnews_icon }}"></i></div>
         </div>
-        <p class="flex-fill text-start mb-0">{{ item.content }}</p>
+        <p class="flex-fill text-start mb-0">{{ breakingnews_content_html }}</p>
         {%- if item.link %}
           <div>
             {% include base/link.html.liquid
             name          = "Know more"
             icon          = "fa-solid fa-arrow-right"
             icon_position = "end"
-            role          = "button"
             class         = breakingnews_btn_class
             color         = breakingnews_color
             link          = item.link

data/_includes/base/calendar-events.html.liquid

@@ -1,41 +1,7 @@
 {% comment %}
-================================================================================
-Template: Calendar Event Data Bridge
-Purpose: Emits the SAME event data the `event` component reads (with_event_data)
-as a JSON script tag, so a page can populate an Event Calendar instance
-without hand-writing (and duplicating) a separate JS events array. Data
-loading only — mapping this JSON into the Event Calendar library's own event
-shape, and calling EventCalendar.create(), stays the responsibility of
-whatever page or layout uses it (see calendar.html.liquid, which follows the
-same "loading only" split for the library itself).
-
-Design Logic:
-- Data bridge only: re-emits with_event_data as JSON, no field mapping or
-  rendering — see calendar-init.html.liquid for the mapping/rendering step
-- Shared data source: reuses event.html.liquid's exact fallback chain, so
-  both components always agree on the same resolved events
-- JSON script tag output: consumable by inline JS without hand-duplicating
-  the events array
-- Multi-instance support: "id" override lets multiple bridges coexist on
-  one page
-
-Optional Inputs:
-- id: script tag id (default: "centos-calendar-events") — override to run
-  more than one instance of this bridge on the same page (see
-  calendar-init.html.liquid, which derives a unique id per instance).
-
-Data Source Hierarchy (priority) — identical to event.html.liquid, so this
-bridge always reflects whatever with_event_data the page actually resolved:
-1. include.data
-2. page.with_event_data
-3. site.data.event
-4. site.data.base.event
-
-Output: <script type="application/json" id="...">, holding the with_event_data
-array unchanged (title, start, end, color, icon, link, description,
-location) — see the calendar component's event data contract documentation
-for how a page maps these fields into Event Calendar events.
-================================================================================
+calendar-events: renders the resolved event data as a JSON script tag for a calendar instance to read.
+Data: include.data > page.with_event_data > site.data.event > site.data.base.event
+Schema: src/YAML/event_schema.yml
 {% endcomment %}
 
 {%- assign with_event_data = include.data

data/_includes/base/calendar-init.html.liquid

@@ -1,63 +1,9 @@
 {% comment %}
-================================================================================
-Template: Calendar Instance Initializer
-Purpose: Renders a ready-to-use Event Calendar instance — the events data
-(via calendar-events.html.liquid), a container element, and the
-initialization script that maps that data into the library's own event
-shape (see the calendar component's event data contract documentation) and
-calls EventCalendar.create(). Configured entirely from with_calendar_data /
-calendar_schema.yml, so customizing view, toolbar, or button labels is a
-front matter change — no script editing required.
-
-Design Logic:
-- Composition: wires together the events bridge, a container element, and
-  the initialization script — each piece stays a separate, single-purpose
-  include
-- Self-contained with graceful fallback: works standalone via
-  with_calendar_data.events, or falls back to the event component's
-  with_event_data when that's absent (see Event data source, below)
-- Config-driven: view, toolbar, and button labels all come from
-  with_calendar_data — no script editing required
-- Multi-instance support: a distinct "id" per include call renders
-  independent calendars on one page
-- Security: blocks javascript:/data:/vbscript: URIs before eventClick
-  navigation
-
-Required Inputs (per event item, from whichever event data source resolves
-below — the init script below reads event.title/event.start directly):
-- title: Event name/title
-- start: Event start (YYYY-MM-DD for an all-day event, or
-  YYYY-MM-DDTHH:MM to give it a specific start time on that same day)
-
-Optional Inputs:
-- id: container element id (default: "centos-calendar")
-- data: with_calendar_data override
-- event_data: explicit per-instance event array — highest priority, mainly
-  for running multiple independent calendars on one page (see below).
-  Forwarded to calendar-events.html.liquid's own "data" param.
-
-Data Source Hierarchy (priority) — identical to calendar.html.liquid:
-1. include.data
-2. page.with_calendar_data
-3. site.data.calendar
-4. site.data.base.calendar
-
-Event data source (priority) — this is what makes the component
-self-contained: a calendar-only page never has to touch with_event_data,
-but pages that already use the event component keep working unchanged:
-1. include.event_data — explicit override for this include call.
-2. with_calendar_data.events — calendar-specific events, resolved above.
-3. with_event_data — the event component's own data (via
-   calendar-events.html.liquid's own fallback chain: include.data (unused
-   here) → page.with_event_data → site.data.event → site.data.base.event).
-
-Multiple instances per page: pass a distinct id to each include call. The
-events bridge id is derived from it ("<id>-events"), so each instance's
-event data (and the events script tag emitting it) stays independent. Pass
-event_data (or a distinct with_calendar_data.events via data=) alongside a
-distinct id when instances should show different events; omit both to have
-every instance fall back to the same shared event source.
-================================================================================
+calendar-init: renders a calendar container, its events JSON, and the script that creates the Event Calendar instance.
+Data config: include.data > page.with_calendar_data > site.data.calendar > site.data.base.calendar
+Data events: include.event_data > with_calendar_data.events > page.with_event_data > site.data.event > site.data.base.event
+Schema: src/YAML/calendar_schema.yml
+Requires: base/calendar.html.liquid type="script" (the EventCalendar global)
 {% endcomment %}
 
 {%- assign with_calendar = include.with_calendar
@@ -76,8 +22,6 @@ every instance fall back to the same shared event source.
 %}
 
 {%- assign with_calendar_schema = site.data.base.calendar_schema.properties.with_calendar_data.properties %}
-
-{%- comment %} --- Defaults --- {% endcomment %}
 {%- assign calendar_view           = with_calendar_data.view                 | default: with_calendar_schema.view.default %}
 {%- assign calendar_toolbar_start  = with_calendar_data.header_toolbar_start  | default: with_calendar_schema.header_toolbar_start.default %}
 {%- assign calendar_toolbar_center = with_calendar_data.header_toolbar_center | default: with_calendar_schema.header_toolbar_center.default %}
@@ -89,6 +33,7 @@ every instance fall back to the same shared event source.
 {%- assign calendar_btn_today      = with_calendar_data.button_text_today     | default: with_calendar_schema.button_text_today.default %}
 
 {%- assign calendar_events_data = include.event_data | default: with_calendar_data.events %}
+{%- assign calendar_event_color = site.data.base.event_schema.properties.with_event_data.items.properties.color.default %}
 
 {% include base/calendar-events.html.liquid id=calendar_events_id data=calendar_events_data %}
 <div id="{{ calendar_id }}"></div>
@@ -113,7 +58,7 @@ document.addEventListener('DOMContentLoaded', function () {
       start: start,
       end: end,
       allDay: allDay,
-      backgroundColor: 'var(--bs-' + (event.color || 'secondary') + ')',
+      backgroundColor: 'var(--bs-' + (event.color || {{ calendar_event_color | jsonify }}) + ')',
       extendedProps: { url: event.link }
     };
   });
@@ -134,7 +79,6 @@ document.addEventListener('DOMContentLoaded', function () {
     },
     events: events,
     eventClick: function (info) {
-      // --- Security: block javascript:/data:/vbscript: URIs before navigation ---
       var url = info.event.extendedProps.url;
       var normalized = url ? String(url).replace(/[\x00-\x20]/g, '') : '';
       if (url && !/^(javascript|data|vbscript):/i.test(normalized)) {

data/_includes/base/calendar.html.liquid

@@ -1,32 +1,7 @@
 {% comment %}
-================================================================================
-Template: Event Calendar Library Initialization Component
-Purpose: Loads the Event Calendar JS library (@event-calendar/build, formerly
-vkurko/calendar) from CDN with SRI integrity checks. Library loading only —
-initializing a calendar instance (mounting an element and supplying its
-events data) is the responsibility of whatever page or layout uses it.
-================================================================================
-
-Design Logic:
-- Library loading only: does not mount or configure a calendar instance —
-  see calendar-init.html.liquid for that
-- Split head/script output: "type" selects the CSS <link> (head) or JS
-  <script> (body) tag, capturing both fragments once and rendering by type
-- CDN-hosted with Subresource Integrity (SRI): version-pinned, integrity-
-  checked delivery
-
-Optional Inputs:
-- type: "head" for CSS include, "script" for JavaScript
-- version: Event Calendar version (e.g., "5.12.0")
-- css_integrity, script_integrity: SRI integrity hashes
-- data: Event Calendar configuration object
-
-Data Source Hierarchy (priority):
-1. include.data
-2. page.with_calendar_data
-3. site.data.calendar
-4. site.data.base.calendar
-================================================================================
+calendar: loads the Event Calendar library from the CDN. head.html.liquid calls it with type="head" (CSS) and type="script" (JS).
+Data: include.data > page.with_calendar_data > site.data.calendar > site.data.base.calendar
+Schema: src/YAML/calendar_schema.yml
 {% endcomment %}
 
 {%- assign with_calendar = include.with_calendar
@@ -42,9 +17,6 @@ Data Source Hierarchy (priority):
 {%- assign with_calendar_schema = site.data.base.calendar_schema.properties.with_calendar_data.properties %}
 
 {%- if with_calendar %}
-
-{%- comment %} === Presentation === {% endcomment %}
-{%- comment %} --- Defaults --- {% endcomment %}
 {%- assign calendar_version          = with_calendar_data.version          | default: with_calendar_schema.version.default %}
 {%- assign calendar_css_integrity    = with_calendar_data.css_integrity    | default: with_calendar_schema.css_integrity.default %}
 {%- assign calendar_script_integrity = with_calendar_data.script_integrity | default: with_calendar_schema.script_integrity.default %}
@@ -54,11 +26,8 @@ Data Source Hierarchy (priority):
 {%- endcapture %}
 
 {%- capture html_calendar_script %}
-  <!-- Event Calendar Library -->
   <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@{{ calendar_version }}/dist/event-calendar.min.js" integrity="{{ calendar_script_integrity }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
 {%- endcapture %}
-
-{%- comment %} --- HTML --- {% endcomment %}
 {%- assign type = include.type %}
 {%- case type %}
 {%- when "head" %}

data/_includes/base/card.html.liquid

@@ -1,37 +1,6 @@
 {% comment %}
-================================================================================
-Template: Flexible Card Component
-Purpose: Renders highly configurable card layouts with optional image,
-icon, title, description, and action buttons.
-================================================================================
-
-Design Logic:
-- Modular design: each section is optional
-- Capture-block approach: builds HTML fragments for reusability
-- Conditional rendering: only renders sections with content
-- Bootstrap flexbox-based layout for responsive design
-- Reuses link component for action buttons
-
-Optional Inputs:
-- class: Card container CSS classes
-- color: Color scheme for styling (default: "primary")
-- image, icon, screenshot: Visual elements
-- name, description: Text content, run through Liquid's `markdownify` filter
-  so inline Markdown (e.g. `` `code` `` spans) renders as HTML. The
-  paragraph wrapper kramdown adds is stripped, since each already renders
-  inside its own `<p>`.
-- name_link: URL to wrap `name` in a link, rendered via
-  base/link.html.liquid. Empty by default (name renders as plain text).
-- name_link_class: CSS classes for the name_link anchor (e.g. "link-dark").
-  Ignored when name_link is empty; when left empty, falls back to
-  base/link.html.liquid's own color-driven default styling, driven by this
-  card's own `color` parameter (not a hardcoded "primary").
-- actions: Array of action buttons [{name, link, icon}]
-- All image/icon/name/description have customizable CSS classes
-
-Data Source:
-- Derived from include parameters only
-================================================================================
+card: renders a card with an optional image, icon, name, description, screenshot, and action buttons.
+Schema: src/YAML/card_schema.yml
 {% endcomment %}
 
 {%- assign with_card_schema = site.data.base.card_schema.properties %}
@@ -56,11 +25,8 @@ Data Source:
 {%- assign card_description_class  = include.description_class | default: with_card_schema.description_class.default %}
 {%- assign card_actions            = include.actions           | default: with_card_schema.actions.default %}
 {%- assign card_actions_class      = include.actions_class     | default: with_card_schema.actions_class.default %}
-{%- assign card_actions_btn_class  = include.actions_btn_class | default: "btn m-1 btn-" | append: card_color %}
-
-{%- comment %} === Presentation === {% endcomment %}
+{%- assign card_actions_btn_class  = include.actions_btn_class | default: with_card_schema.actions_btn_class.default | replace: "{color}", card_color %}
 
-{%- comment %} --- Defaults --- {% endcomment %}
 {%- capture html_card_screenshot -%}
   {% if card_screenshot != "" %}
     <div class="bg-{{ card_color }} rounded mb-3">
@@ -81,11 +47,7 @@ Data Source:
   {% endif %}
 {%- endcapture %}
 
-{%- comment %} Liquid 4.0.4 (this project's pinned version) has no remove_last/replace_last
-  filter, so the trailing "</p>" kramdown adds is stripped via split/join
-  instead: splitting on "</p>" drops the trailing empty segment left by the
-  closing tag at the very end of the string, and joining the remaining parts
-  back with "</p>" reconstructs everything except that final occurrence. {% endcomment %}
+{%- comment %} The pinned Liquid has no remove_last, so split/join drops the trailing "</p>" kramdown adds. {% endcomment %}
 {%- capture card_name_markdown -%}{{ card_name | markdownify }}{%- endcapture -%}
 {%- assign card_name_html = card_name_markdown | strip | remove_first: "<p>" | split: "</p>" | join: "</p>" | strip -%}
 
@@ -110,7 +72,6 @@ Data Source:
     {%- for action in card_actions %}
       {%- include base/link.html.liquid
       class         = card_actions_btn_class
-      role          = "button"
       name          = action.name
       link          = action.link
       icon          = action.icon
@@ -121,7 +82,6 @@ Data Source:
   {% endif %}
 {%- endcapture %}
 
-{%- comment %} --- HTML --- {% endcomment -%}
 <div class="d-flex{% if card_class != "" %} {{ card_class }}{% endif %}">
 {{- html_card_image | strip -}}
 {{- html_card_icon | strip -}}

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

@@ -1,3 +1,8 @@
+{% comment %}
+color-table: renders a table with one row per color in include.collection, with its color values, WCAG results, and a WebAIM check link; each value is a copy button when page.with_copyvalue is on, or plain code otherwise.
+Schema: src/YAML/color_schema.yml
+{% endcomment %}
+{%- comment %} trim leading output {% endcomment -%}
 <div class="table-responsive bg-light border rounded mb-3">
 <table class="table dataTable">
   <thead>
@@ -13,6 +18,11 @@
     </tr>
   </thead>
   <tbody>
+{%- comment %} Same gate as base/copyvalue.html.liquid: no copy script means no copy buttons. {% endcomment %}
+{%- assign color_table_copy = false %}
+{%- if page.with_copyvalue %}
+{%- assign color_table_copy = true %}
+{%- endif %}
 {%- for item in include.collection %}
 {%- if include.name_field == "full_name" %}
 {%- assign _item_name = item.full_name | remove: '$' %}
@@ -22,12 +32,16 @@
 {%- assign _webaim_fcolor = item.text_color_hex | remove: '#' | upcase %}
 {%- assign _webaim_bcolor = item.hex | remove: '#' | upcase %}
 {%- capture _webaim_link %}https://webaim.org/resources/contrastchecker/?fcolor={{ _webaim_fcolor }}&bcolor={{ _webaim_bcolor }}{%- endcapture %}
+{%- assign text_color_tooltip = item.text_color %}
+{%- if item.text_color == "Black" %}
+  {%- assign text_color_tooltip = item.text_color | append: " — near-black brand color, not literal black" %}
+{%- endif %}
     <tr>
       <td class="text-nowrap">{{ _item_name }}</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"><i class="fas fa-circle fa-xl" style="color: {{ item.hex }}"></i>{% if color_table_copy %}<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>{% else %}<code>{{ item.hex }}</code>{% endif %}</td>
+      <td class="text-nowrap">{% if color_table_copy %}<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>{% else %}<code>{{ item.rgb }}</code>{% endif %}</td>
+      <td class="text-nowrap">{% if color_table_copy %}<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>{% else %}<code>{{ item.hsv }}</code>{% endif %}</td>
+      <td class="text-nowrap"><span class="badge {{ item.text_badge }}" data-bs-toggle="tooltip" data-bs-title="{{ text_color_tooltip }}"><span aria-hidden="true">{{ item.text_color | slice: 0, 1 }}</span><span class="visually-hidden">{{ item.text_color }}</span></span> {% if color_table_copy %}<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>{% else %}<code>{{ item.text_color_hex }}</code>{% endif %}</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

@@ -1,56 +1,10 @@
 {% 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".
-================================================================================
+configuration_variables-default-cell: renders one Default cell as a dash, an empty-string marker, or the escaped value in code, letting long unbroken values wrap.
 {% endcomment %}
 
+{% comment %} Include variables persist between calls, so reset the flag before any branch sets it. {% endcomment -%}
+{% assign is_empty_string = false -%}
+{% comment %} == nil keeps an explicit false default distinct from no default; the default filter treats false as blank. {% endcomment -%}
 {% if include.default == nil %}
   {% assign default_value = "—" %}
 {% elsif include.default == "" %}
@@ -60,6 +14,7 @@ Required Inputs:
   {% assign default_value = include.default %}
 {% endif %}
 
+{% comment %} Only the longest unbroken token of a string forces its column wide; past the threshold it gets .long-value so it wraps. {% endcomment -%}
 {% assign long_value_threshold = 24 %}
 {% assign max_token_length = 0 %}
 {% if include.type == "string" and default_value != "—" %}
@@ -72,6 +27,7 @@ Required Inputs:
   {% endfor %}
 {% endif %}
 
+{% comment %} An explicit "" default gets a visible marker and a screen-reader note instead of an empty code element. {% endcomment -%}
 {% if default_value == "—" %}
 —
 {% elsif is_empty_string %}

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

@@ -1,6 +1,6 @@
 {% comment %}
-Generates one separate table and then triggers subsequent recursion to produce
-others. Requires two distinct loops for valid HTML structure.
+configuration_variables-nested: renders one table for a nested property, then recurses into its own nested properties.
+Schema: src/YAML/configuration_variables_schema.yml
 {% endcomment %}
 
 {% assign current_properties = include.properties %}
@@ -8,10 +8,10 @@ others. Requires two distinct loops for valid HTML structure.
 {% assign current_level      = include.level | plus: 0 %}
 {% assign type_desc          = include.type_desc %}
 
-{% assign col_name        = include.col_name        | default: "Name" %}
-{% assign col_type        = include.col_type        | default: "Type" %}
-{% assign col_default     = include.col_default     | default: "Default" %}
-{% assign col_description = include.col_description | default: "Description" %}
+{% assign col_name        = include.col_name %}
+{% assign col_type        = include.col_type %}
+{% assign col_default     = include.col_default %}
+{% assign col_description = include.col_description %}
 
 {% assign columns = include.columns %}
 
@@ -20,7 +20,6 @@ others. Requires two distinct loops for valid HTML structure.
   {% assign table_classes = "table dataTable" %}
   {% assign table_id = parent_name | slugify | append: '-nested-' | append: current_level %}
 
-  {% 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 }}">