vanilla-framework 4.37.2 → 4.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.37.2",
+  "version": "4.39.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

package/scss/_patterns_data-spotlight.scss

@@ -15,8 +15,7 @@
     }
 
     .p-data-spotlight--2-blocks .p-data-spotlight__title-col {
-      // TODO: update the following after the equal height row is updated to use the new grid system
-      grid-column: span 6 !important;
+      grid-column: span 4 !important;
     }
   }
 
@@ -44,7 +43,7 @@
 
     .p-data-spotlight--2-blocks .p-data-spotlight__title-col {
       // TODO: update the following after the equal height row is updated to use the new grid system
-      grid-column: span 6 !important;
+      grid-column: span 4 !important;
     }
   }
 }

package/scss/_patterns_equal-height-row.scss

@@ -22,13 +22,13 @@
         Item element within an equal height row column.
 */
 
+@use 'sass:math';
 @import 'settings';
 
 @mixin vf-p-equal-height-row {
   .p-equal-height-row,
   .p-equal-height-row--wrap {
-    // TODO use new 4/4/8 grid (`%vf-grid-row`)
-    @extend %vf-row;
+    @extend %vf-grid-row;
 
     position: relative;
 
@@ -38,20 +38,20 @@
       border-top-style: solid;
       border-top-width: 1px;
       display: grid;
-      grid-column: span $grid-columns-small;
+      grid-column: span $grid-8-columns-small;
       grid-row: span 4;
       grid-template-rows: subgrid;
       margin-bottom: $spv--small;
       position: relative;
 
       @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-        grid-column: span $grid-columns-medium;
+        grid-column: span $grid-8-columns-medium;
         grid-template-columns: subgrid;
 
         // At medium size, each column item will take half of the available
         // cols from the parent grid
         .p-equal-height-row__item {
-          grid-column: span calc($grid-columns-medium / 2);
+          grid-column: span calc($grid-8-columns-medium / 2);
         }
 
         // At medium size, position the first column item on the left of the
@@ -65,7 +65,7 @@
 
       @media screen and (width >= $breakpoint-large) {
         border: none;
-        grid-column: span calc($grid-columns / 4);
+        grid-column: span calc($grid-8-columns / 4);
         margin-bottom: 0;
       }
     }
@@ -89,7 +89,7 @@
       background-color: $colors--theme--border-low-contrast;
       // Row-level dividers are not visible on smaller screen sizes
       display: none;
-      grid-column-end: span 12;
+      grid-column-end: span $grid-8-columns;
       grid-column-start: 1;
       margin: auto;
 
@@ -129,7 +129,7 @@
     .p-equal-height-row__col {
       @media screen and ($breakpoint-small <= width < $breakpoint-large) {
         // Fit 2 columns onto each row at medium size
-        grid-column: span calc($grid-columns-medium / 2);
+        grid-column: span calc($grid-8-columns-medium / 2);
         grid-template-columns: none;
 
         .p-equal-height-row__item {
@@ -146,23 +146,30 @@
   // ADVANCED GRID SUPPORT
 
   // Support for 25-75 split on large screen size
-  // TODO implement with new 4/4/8 grid (.grid-row)
+  // The equal height row has been moved to the 8-column grid, but we still support the equal height row component
+  // being placed inside legacy grid row to ensure backward compatibility, this works since the ratio of columns
+  // remains the same.
+  // This would break if legacy grid is used inside the component itself.
+  .grid-row--25-75-on-large > .grid-col,
+  .grid-row > .grid-col-6,
   .row--25-75-on-large > .col,
   .row > .col-9 {
     & .p-equal-height-row,
     & .p-equal-height-row--wrap {
       @media screen and (width >= $breakpoint-large) {
-        grid-template-columns: repeat(9, minmax(0, 1fr));
+        grid-template-columns: repeat(#{(math.div($grid-8-columns, 4) * 3)}, minmax(0, 1fr));
       }
     }
   }
 
+  .grid-row--50-50-on-large > .grid-col,
+  .grid-row > .grid-col-4,
   .row--50-50-on-large > .col,
   .row > .col-6 {
     & .p-equal-height-row,
     & .p-equal-height-row--wrap {
       @media screen and (width >= $breakpoint-large) {
-        grid-template-columns: repeat(6, minmax(0, 1fr));
+        grid-template-columns: repeat(#{math.div($grid-8-columns, 2)}, minmax(0, 1fr));
       }
     }
   }

package/templates/_macros/shared/vf_article_block.jinja

@@ -1,4 +1,5 @@
 {#
+  TODO this file should be renamed `vf_article-block.jinja` for consistency with the other patterns.
   Helper macro to render the article title with optional link and attributes.
 
   Parameters:

package/templates/_macros/shared/vf_blog-block.jinja

@@ -0,0 +1,60 @@
+{% from "_macros/shared/vf_article_block.jinja" import vf_article_block %}
+
+{#
+  Shared embeddable blog block.
+  Exposes `vf_blog_block(articles, template_config, template_mode, fallback_image_url)`
+  which renders the articles container (template mode or list) and uses the
+  internal `_blog_article` helper to render each article (image/title/description).
+#}
+
+{%- macro _blog_article(article_config={}, template_mode=False, fallback_image_url="https://assets.ubuntu.com/v1/94c82a15-blog_fallback_image.png") -%}
+  {%- set base_image_container_classes = "p-image-container--16-9 is-cover article-image" -%}
+  {%- if not template_mode -%}
+    {%- set default_image_attrs = {
+      'src': fallback_image_url,
+      'alt': 'Blog fallback image'
+      }
+    -%}
+    {%- set input_image_attrs = article_config.get('image', {}).get('attrs', {}) -%}
+    {#- Merge user attributes over the defaults -#}
+    {%- set img_attrs = default_image_attrs.copy() -%}
+    {%- set _ = img_attrs.update(input_image_attrs) -%}
+    {#- class merging -#}
+    {%- set base_image_class = 'p-image-container__image' -%}
+    {%- set input_image_class = input_image_attrs.get('class', '') -%}
+    {%- if input_image_class -%}
+      {%- set final_image_classes = base_image_class + ' ' + input_image_class -%}
+    {%- else -%}
+      {%- set final_image_classes = base_image_class -%}
+    {%- endif -%}
+    {%- set _ = img_attrs.update({'class': final_image_classes}) -%}
+    {#- Build the HTML tag -#}
+    {%- set ns = namespace(image_html="<img") -%}
+    {%- for attr, value in img_attrs.items() -%}
+      {%- set ns.image_html = ns.image_html + " " + attr + "=\"" + value + "\"" -%}
+    {%- endfor -%}
+    {%- set image_html = ns.image_html + ">" -%}
+    {%- set _ = article_config.update({'image_html': '<div class="' + base_image_container_classes + '">\n            ' + image_html + '\n          </div>'}) -%}
+  {%- else -%}
+    {#- template mode - the template JS will fill in the image slot. -#}
+    {%- set _ = article_config.update({'image_html': '<div class="' + base_image_container_classes + '"></div>'}) -%}
+  {%- endif -%}
+  {{ vf_article_block(article_config=article_config, attrs={"class": "grid-col-2 grid-col-medium-2"}, template_mode=template_mode) }}
+
+{%- endmacro -%}
+
+{%- macro vf_blog_block(articles=[], template_config={}, fallback_image_url="https://assets.ubuntu.com/v1/94c82a15-blog_fallback_image.png") -%}
+  {%- if template_config.get("enabled", False) -%}
+    <div id="{{ template_config.get('template_container_id', 'articles') }}" class="p-blog__articles"></div>
+    <template style="display: none;" id="{{ template_config.get('template_id', 'template') }}">
+      {{ _blog_article(template_mode=True) }}
+    </template>
+  {%- else -%}
+    <div class="p-blog__articles grid-row">
+      {%- for article in articles -%}
+        {{ _blog_article(article_config=article, fallback_image_url=fallback_image_url) }}
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+
+{%- endmacro -%}

package/templates/_macros/shared/vf_cta-block.jinja

@@ -0,0 +1,93 @@
+{#-
+    Params
+        - content_html: The inner HTML for the call-to-action button.
+        - button_type: "primary" | "secondary" (default is "primary")
+        - attrs: A dictionary of attributes to apply to the button or link.
+ #}
+{% macro _cta_button(content_html, button_type="", attrs={}) %}
+    {%- set cta_element_tag = "button" -%}
+    {%- if "href" in attrs and attrs.get("href", "") | length > 0 -%}
+        {%- set cta_element_tag = "a" -%}
+    {%- endif -%}
+
+    {%- if button_type not in ["primary", "secondary"] -%}
+        {%- set button_type = "" -%}
+    {%- endif -%}
+
+    {%- set cta_class = "" -%}
+    {%- if button_type == "primary" -%}
+        {%- set cta_class = "p-button--positive" -%}
+    {%- elif button_type == "secondary" -%}
+        {%- set cta_class = "p-button" -%}
+    {%- endif -%}
+
+    <{{ cta_element_tag }} class="{{ cta_class }} {{ attrs.get("class", "") }}"
+    {%- for attr, value in attrs.items() -%}
+        {% if attr != "class" %}
+            {{ attr }}="{{ value }}"
+        {%- endif -%}
+    {%- endfor -%}
+    >
+    {{- content_html | safe -}}
+    </{{ cta_element_tag }}>
+{% endmacro %}
+
+{#-
+Helper macro to render a container with primary, secondary, and link CTA elements.
+
+Parameters:
+- primary (Object, Optional) - Primary call-to-action button configuration. Properties:
+    - content_html (String, Required) - The inner HTML for the primary button
+    - attrs (Object, Optional) - HTML attributes for the button (e.g., href, class)
+    Default: {} (no primary CTA rendered)
+
+- secondaries (Array, Optional) - Array of secondary CTA buttons (typically 2 recommended).
+  Each item has the same structure as primary:
+    - content_html (String, Required) - The inner HTML for the secondary button
+    - attrs (Object, Optional) - HTML attributes for the button
+    Default: [] (no secondary CTAs rendered)
+
+- link (Object, Optional) - Text link configuration. Properties:
+    - content_html (String, Required) - The inner HTML for the link
+    - attrs (Object, Optional) - HTML attributes for the link (e.g., href, class)
+    Default: {} (no link rendered)
+
+Note: If any 'attrs' contains an 'href' attribute, that element will render as an <a> tag.
+Otherwise, it renders as a <button> tag.
+-#}
+{% macro vf_cta_block(primary={}, secondaries=[], link={}) %}
+    {%- if not primary -%}{%- set primary = {} -%}{%- endif -%}
+    {%- if not secondaries -%}{%- set secondaries = [] -%}{%- endif -%}
+    {%- if not link -%}{%- set link = {} -%}{%- endif -%}
+    {%- set primary_content_html = primary.get("content_html", "") | trim -%}
+    {%- set has_primary = primary_content_html | length > 0 -%}
+    {%- set has_secondaries = secondaries | length > 0 -%}
+    {%- set link_content_html = link.get("content_html", "") | trim -%}
+    {%  set has_link = link_content_html | length > 0 -%}
+    {%- if has_primary or has_secondaries or has_link -%}
+        <div class="p-cta-block u-no-padding--bottom">
+            {%- if has_primary  %}
+                {{ _cta_button(
+                    content_html=primary_content_html,
+                    attrs=primary.get("attrs", {}),
+                    button_type="primary"
+                ) }}
+            {%- endif -%}
+            {%- if has_secondaries %}
+                {%- for secondary in secondaries -%}
+                    {{ _cta_button(
+                      content_html=secondary.get("content_html", ""),
+                      attrs=secondary.get("attrs", {}),
+                      button_type="secondary"
+                    ) }}
+                {%- endfor -%}
+            {%- endif -%}
+            {%- if has_link %}
+                {{ _cta_button(
+                    content_html=link_content_html,
+                    attrs=link.get("attrs", {})
+                ) }}
+            {%- endif -%}
+        </div>
+    {%- endif -%}
+{% endmacro %}

package/templates/_macros/shared/vf_description-block.jinja

@@ -0,0 +1,33 @@
+{#-
+Helper macro to render description/subtitle text content within a section.
+Supports both plain text (wrapped in <p>) and raw HTML rendering.
+
+Parameters:
+- type (String, Optional): Content type. One of:
+    - "text" (default) - Content is rendered within a <p> tag
+    - "html" - Content is rendered as raw HTML without wrapping
+    Default: "text"
+
+- content (String, Optional): The description content.
+  If type is "text", plain text is safe to use.
+  If type is "html", pass HTML markup that should be rendered as-is.
+  Default: ""
+-#}
+{% macro vf_description_block(type="text", content="") %}
+    {%- if not type -%}{%- set type = "text" -%}{%- endif -%}
+    {%- if not content -%}{%- set content = "" -%}{%- endif -%}
+
+    {%- set type = type | trim -%}
+    {%- set content = content | trim -%}
+    {%- if type not in ["text", "html"] -%}
+        {%- set type = "text" -%}
+    {%- endif -%}
+
+    {%- if content | length > 0 -%}
+        {%- if type == "text" -%}
+            <p>{{- content -}}</p>
+        {%- elif type == "html" -%}
+            {{- content | safe -}}
+        {%- endif -%}
+    {%- endif -%}
+{% endmacro %}

package/templates/_macros/shared/vf_divided-section-block.jinja

@@ -0,0 +1,67 @@
+{% from "_macros/vf_basic-section.jinja" import basic_section_item %}
+
+{#
+  Embeddable right-hand column renderer for divided-section.
+  Renders optional description-block items, then divided-blocks with
+  muted rules between items. Uses shallow bottom padding for items,
+  and ensures the last item of the last block has no bottom padding.
+
+  Params:
+    - blocks: array (same shape as vf_divided_section's `blocks` param)
+#}
+
+{% macro _get_item_padding_classes_divided(item_config={}, isLastLoopItr=False, isLastBlockItr=False) -%}
+  {%- set item_padding = (item_config.get("padding", "")) | trim -%}
+  {%- if item_padding not in ["shallow"] -%}
+    {%- set item_padding = "" -%}
+  {%- endif -%}
+  {%- set item_classes = "" -%}
+  {%- if item_padding | length > 0 -%}
+    {%- set item_classes = "p-section--" + item_padding -%}
+  {%- endif -%}
+  {%- if isLastLoopItr and isLastBlockItr -%}
+    {%- set item_classes = "" -%}
+  {%- endif -%}
+  {{ item_classes | trim }}
+{%- endmacro %}
+
+{% macro vf_divided_section_block(blocks=[]) -%}
+  {%- set description_block = blocks | selectattr("type", "equalto", "description-block") | first -%}
+  {%- set divided_blocks = blocks | selectattr("type", "equalto", "divided-block") | list -%}
+
+  {%- if description_block | length > 0 -%}
+    {%- for item in description_block.get("items", []) -%}
+      {%- set item_classes = _get_item_padding_classes_divided(item, loop.last, (divided_blocks|length == 0)) -%}
+      <div {%- if item_classes | length > 0 %} class="{{ item_classes }}"{%- endif -%}>{{- basic_section_item(item) -}}</div>
+    {%- endfor -%}
+     {%- if divided_blocks | length > 0 -%}<hr class="p-rule--muted" />{%- endif %}
+  {%- endif -%}
+
+  {%- for block in divided_blocks -%}
+    {%- set outer_last = loop.last -%}
+    {%- set ns = namespace(list_element="ul", list_class="p-list") -%}
+    {%- if block.get("bullet_type") == "number" -%}
+      {%- set ns.list_element = "ol" -%}
+      {%- set ns.list_class = "p-stepped-list" -%}
+    {%- endif -%}
+
+    <{{ ns.list_element }} class="p-divided__block {{ ns.list_class }} u-no-padding">
+    {%- for item in block.get("items", []) -%}
+      {%- set list_bullet_type = "has-bullet" if block.bullet_type == "bullet" else "is-ticked" if block.bullet_type == "status" -%}
+      <li class="p-divided__heading u-no-padding--bottom {{ list_bullet_type }}{% if ns.list_class == 'p-stepped-list' %} p-stepped-list__item{% else %} p-list__item{% endif %}">
+        <div class="{%- if not loop.last -%}p-section--shallow{%- endif -%}{% if ns.list_class == 'p-stepped-list' %} p-stepped-list__title{% endif %}">
+          {%- if item.title_text -%}
+            <h3 class="p-heading--5 u-no-padding">{{ item.title_text }}</h3>
+          {%- endif -%}
+          {%- for content in item.contents -%}
+            {%- set item_classes = _get_item_padding_classes_divided(content, loop.last, outer_last) -%}
+            <div {%- if item_classes | length > 0 %} class="{{ item_classes }}"{%- endif -%}>{{- basic_section_item(content) -}}</div>
+          {%- endfor -%}
+        </div>
+      </li>
+      {%- if not loop.last %}<hr class="p-rule--muted" />{% endif %}
+    {%- endfor -%}
+    </{{ ns.list_element }}>
+  {%- endfor -%}
+
+{%- endmacro %}

package/templates/_macros/shared/vf_equal-heights-block.jinja

@@ -0,0 +1,68 @@
+{#-
+  vf_equal_heights_block
+  Renders the inner Equal Heights grid (no outer section/rows), suitable for embedding in other patterns (e.g. tab panels).
+
+  Params:
+  - items (array) (required): Each item may include 'image_html', 'title_text', 'title_link', 'description_html', and 'cta_html'.
+  - subtitle_heading_level (int) (optional): 4 or 5 (default 5) — used for item titles.
+  - highlight_images (boolean) (optional): Whether to add a subtle grey background behind images.
+  - image_aspect_ratio_small (string) (optional): "square" | "2-3" | "3-2" | "16-9" | "cinematic" | "auto" (default: "square").
+  - image_aspect_ratio_medium (string) (optional): same options as above (default: "square").
+  - image_aspect_ratio_large (string) (optional): same options as above (default: "2-3").
+-#}
+{%- macro vf_equal_heights_block(
+  items=[],
+  subtitle_heading_level=5,
+  highlight_images=false,
+  image_aspect_ratio_small="square",
+  image_aspect_ratio_medium="square",
+  image_aspect_ratio_large="2-3"
+) -%}
+  <div class="p-equal-height-row--wrap">
+    {%- for item in items -%}
+      {%- set image = item.get("image_html", "") | trim -%}
+      {%- set title = item.get("title_text", "") | trim -%}
+      {%- set title_link_attrs = item.get("title_link_attrs", {}) -%}
+      {%- set description = item.get("description_html", "") | trim -%}
+      {%- set cta = item.get("cta_html", "") | trim -%}
+      <div class="p-equal-height-row__col is-borderless">
+        {#- Image item -#}
+        <div class="p-equal-height-row__item">
+          {%- if image | length > 0 %}
+            <div
+              class="p-image-container{% if image_aspect_ratio_small != 'auto' %} p-image-container--{{ image_aspect_ratio_small }}-on-small{% endif %}{% if image_aspect_ratio_medium != 'auto' %} p-image-container--{{ image_aspect_ratio_medium }}-on-medium{% endif %}{% if image_aspect_ratio_large != 'auto' %} p-image-container--{{ image_aspect_ratio_large }}-on-large{% endif %} is-cover{% if highlight_images %} is-highlighted{% endif %}">
+              {{- image | safe -}}
+            </div>
+            <hr class="p-rule--highlight"/>
+          {%- endif -%}
+        </div>
+        {#- Title item -#}
+        <div class="p-equal-height-row__item">
+          {%- if title | length > 0 -%}
+            <p class="p-heading--{{ subtitle_heading_level }}">
+              {%- if title_link_attrs and "href" in title_link_attrs -%}
+                <a {% for attr, value in title_link_attrs.items() -%} {{ attr }}="{{ value }}" {%- endfor -%}>
+              {%- endif -%}
+                  {{- title -}}
+              {%- if title_link_attrs and "href" in title_link_attrs -%}
+                </a>
+              {%- endif -%}
+            </p>
+          {%- endif -%}
+        </div>
+        {#- Description item (optional) -#}
+        <div class="p-equal-height-row__item">
+          {{- description | safe -}}
+        </div>
+        {#- CTA item (optional) -#}
+        <div class="p-equal-height-row__item">
+          {%- if cta | length > 0 -%}
+            <p>
+              {{- cta | safe -}}
+            </p>
+          {%- endif -%}
+        </div>
+      </div>
+    {%- endfor -%}
+  </div>
+{%- endmacro -%}

package/templates/_macros/shared/vf_linked-logo-block.jinja

@@ -0,0 +1,34 @@
+{#
+  - links: array of link objects
+  - cols_per_item: How many columns each logo should use. Defaults to 2.
+#}
+{% macro vf_linked_logo_block(linked_logo_config={}) -%}
+  {%- set links = linked_logo_config.get("links", []) -%}
+  {%- set cols_per_item = linked_logo_config.get("cols_per_item", 2) -%}
+  {%- if links|length > 1 -%}
+    <div class="grid-row">
+      {%- for link in links -%}
+        <div class="grid-col-{{ cols_per_item }} grid-col-medium-{{ cols_per_item }}">
+          <a href="{{ link.href }}" aria-label="{{ link.label }}">
+            <div class="p-image-container--16-9 is-highlighted">
+              {#- If image_attrs is present, use it to generate the image HTML -#}
+              {%- if "image_attrs" in link -%}
+                <img class="p-image-container__image {{ link["image_attrs"]["class"] }}"
+                {% for attr, value in link["image_attrs"].items() %}
+                  {% if attr != "class" %}
+                    {{ attr }}="{{ value }}"
+                  {% endif %}
+                {% endfor %}
+                >
+              {% else %}
+                {{ link.image_html | safe }}
+              {% endif %}
+            </div>
+            <hr class="p-rule--muted">
+            <p>{{ link.text }}</p>
+          </a>
+        </div>
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+{%- endmacro %}

package/templates/_macros/shared/vf_logo-block.jinja

@@ -0,0 +1,29 @@
+{% from "_macros/shared/vf_dedent.jinja" import vf_dedent %}
+
+# logo_block_config
+# - logos: A list of logos to be displayed in the section.
+# - - attrs: A dictionary of attributes to apply to the logo
+# - - is_fixed_width: Boolean to indicate if the logo should be wrapped in a fixed-width container (default is true).
+# - - has_line_break_after: Boolean to indicate if a line break should be included after the logo (default is false). This will be hidden on small screens.
+#       See https://vanillaframework.io/docs/patterns/logo-section#line-breaks
+{% macro vf_logo_block(logo_block_config={}) %}
+  {%- set is_fixed_width = logo_block_config.get("is_fixed_width", true) != false -%}
+  {%- if is_fixed_width -%}<div class="u-fixed-width">{%- endif -%}
+  <div class="p-logo-section">
+    {%- for logo in logo_block_config.get("logos", []) -%}
+      <div class="p-logo-section__item">
+        <img class="p-logo-section__logo {{ logo.get("attrs", {}).get("class", "") -}}"
+        {%- for attr, value in logo.get("attrs", {}).items() -%}
+          {% if attr != "class" %}
+            {{ attr }}="{{ value }}"
+          {%- endif -%}
+        {%- endfor -%}
+        />
+        {%- if logo.get("has_line_break_after", false) -%}
+          <br class="u-hide--small">
+        {%- endif -%}
+      </div>
+    {%- endfor -%}
+  </div>
+  {%- if is_fixed_width -%}</div>{%- endif -%}
+{% endmacro %}

package/templates/_macros/shared/vf_section_top_rule.jinja

@@ -1,7 +1,26 @@
-# Helper macro to render a top rule for a section.
-# Parameters:
-#  - top_rule_variant: string, one of "default", "muted", "highlighted", "none"
-{%- macro vf_section_top_rule(top_rule_variant="default") -%}
+{#-
+
+Helper macro to render a horizontal rule at the top of a section.
+This macro is used by various section patterns to add visual separation.
+
+Note: This file should be renamed to `vf_section-top-rule.jinja` for consistency with other patterns.
+
+Parameters:
+- top_rule_variant (String, Optional): Variant of horizontal rule to use. One of:
+    - "default" - Standard horizontal rule
+    - "muted" - Muted/lighter horizontal rule
+    - "highlighted" - Highlighted/emphasized horizontal rule (internally uses p-rule--highlight)
+    - "none" - No rule rendered
+    Default: "default"
+
+- is_fixed_width (Boolean, Optional): Whether to constrain the rule to fixed content width.
+    When false (default), the rule should be wrapped in a .grid-row element.
+    Default: False
+-#}
+{%- macro vf_section_top_rule(
+  top_rule_variant="default",
+  is_fixed_width=False
+) -%}
   {%- set top_rule_variant = top_rule_variant | trim | lower -%}
   {%- if top_rule_variant not in ["default", "muted", "highlighted", "none"] -%}
     {%- set top_rule_variant = "default" -%}
@@ -23,6 +42,10 @@
     {%- endif -%}
   {%- endif -%}
 
+  {%- if is_fixed_width -%}
+    {%- set top_rule_classes = top_rule_classes + " " + "is-fixed-width" -%}
+  {%- endif -%}
+
   {%- if top_rule_variant != "none" -%}
     <hr class="{{- top_rule_classes -}}"/>
   {%- endif -%}

package/templates/_macros/shared/vf_tabs.jinja

@@ -0,0 +1,78 @@
+{#-
+Helper macro to render a tabbed interface with tabs and associated content panels.
+This is a low-level building block used by higher-order components like vf_tab_section
+to manage tab rendering and accessibility.
+
+Parameters:
+- list (Object) - Configuration object with the following properties:
+    - tabs_list_attrs (Object, Optional) - HTML attributes to forward to the p-tabs__list element.
+      Note: The 'role' attribute is always set to 'tablist' and cannot be customized.
+      See attribute forwarding docs for more info.
+
+    - tabs (Array, Required) - Array of tab configurations. Each tab must have:
+        - name (String, Required) - Unique identifier for the tab.
+          Used to link tab buttons and content via id and aria-controls attributes.
+          Must be unique within the tabs array.
+
+        - tab_html (String, Required) - HTML content for the tab button/label.
+          This is the visible text/markup shown in the tab bar.
+
+        - content_html (String, Required) - HTML content for the tab panel.
+          This is the content shown when the tab is active.
+
+Accessibility: The macro automatically renders proper ARIA attributes for tab management:
+- First tab is rendered as selected (aria-selected="true")
+- Tab buttons have role="tab" and aria-controls linking to their content panels
+- Content panels have role="tabpanel" and aria-labelledby linking to their tab button
+- All but the first panel are initially hidden with hidden="hidden"
+-#}
+{%- macro vf_tabs(list={}) -%}
+    {%- set tabs_list_attrs = list.get("tabs_list_attrs", {}) -%}
+    {%- set list_class = tabs_list_attrs.get("class", "") | trim -%}
+    {%- set tabs = list.get("tabs", []) -%}
+    <div class="p-tabs">
+        <div
+            class="p-tabs__list{% if list_class | length > 0 %} {{ list_class -}}{% endif %}"
+            role="tablist"
+            {%- for attr, value in tabs_list_attrs.items() -%}
+                {% if attr not in ["class", "role", "tabs"] %}
+                    {{ attr }}="{{ value }}"
+                {%- endif -%}
+            {%- endfor -%}
+        >
+        {%- for tab in tabs -%}
+          {#-
+              Append the tab index to the name to ensure uniqueness within the tabs
+              If any names are duplicated, the generated IDs would not be unique, causing tabs to control the wrong panels.
+            -#}
+            {%- set name = tab.get("name", "") + "-" + (loop.index | string) -%}
+            <div class="p-tabs__item">
+                <button
+                    class="p-tabs__link"
+                    role="tab"
+                    aria-selected="{% if loop.first %}true{% else %}false{% endif %}"
+                    aria-controls="{{ name }}-tab" id="{{ name }}"
+                >
+                    {{ tab.get("tab_html", "") | trim | safe }}
+                </button>
+            </div>
+        {%- endfor -%}
+        </div>
+        {%- for tab in tabs -%}
+            {#-
+              Append the tab index to the name to ensure uniqueness within the tabs
+              If any names are duplicated, the generated IDs would not be unique, causing tabs to control the wrong panels.
+            -#}
+            {%- set name = tab.get("name", "") + "-" + (loop.index | string) -%}
+            <div
+                tabindex="0"
+                role="tabpanel"
+                id="{{ name }}-tab"
+                aria-labelledby="{{ name }}"
+                {% if not loop.first %}hidden="hidden"{% endif %}
+            >
+               {{ tab.get("content_html", "") | trim | safe }}
+            </div>
+        {%- endfor -%}
+    </div>
+{%- endmacro -%}