vanilla-framework 4.25.0 → 4.26.1

package/package.json

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

package/scss/_base_icon-definitions.scss

@@ -1513,3 +1513,16 @@
 @mixin vf-icon-quote-themed {
   @include vf-themed-icon($light-value: vf-icon-quote-url($colors--light-theme--icon), $dark-value: vf-icon-quote-url($colors--dark-theme--icon));
 }
+
+// history
+@function vf-icon-history-url($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='#{vf-url-friendly-color($color)}' stroke-width='1.5' d='M2.482 5.066a6.25 6.25 0 1 1 .288 6.356'/%3E%3Cpath stroke='#{vf-url-friendly-color($color)}' stroke-width='1.5' d='M1.75 1.75v4h4M8 4v4l2 2'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-history($color: $colors--light-theme--icon) {
+  background-image: vf-icon-history-url($color);
+}
+
+@mixin vf-icon-history-themed {
+  @include vf-themed-icon($light-value: vf-icon-history-url($colors--light-theme--icon), $dark-value: vf-icon-history-url($colors--dark-theme--icon));
+}

package/scss/_patterns_badge.scss

@@ -6,11 +6,17 @@
     background-color: $colors--theme--text-default; // inverse the theme by using the text color
     border-radius: 1rem;
     box-sizing: content-box;
-    color: $colors--theme--background-default; // inverse the theme by using the baackground color
+    color: $colors--theme--background-default; // inverse the theme by using the background color
+    display: inline-block;
     margin-bottom: 0;
     max-width: 4ch;
+    // the minimum content width should be the total desired width (the line-height)
+    // minus the space already taken up by the left and right padding
+    // Makes the shortest badge a perfect circle and keeps it related to line-height (of %x-small-text) and padding (below)
+    min-width: map-get($line-heights, x-small) - (2 * $spv--x-small);
     overflow: hidden;
     padding: 0 $spv--x-small;
+    text-align: center;
   }
 
   .p-badge,

package/scss/_patterns_chip.scss

@@ -7,8 +7,6 @@
     align-self: center;
     background-size: map-get($icon-sizes, small);
     flex: 0 0 auto;
-    // Space chip away from the content preceding it in the chip body
-    margin-left: $sph--x-small;
     @media (min-width: $breakpoint-x-large) {
       background-size: math.div(map-get($icon-sizes, small), $font-size-ratio--largescreen); //ensure no rounding happens as it positions the icon off center
     }
@@ -58,6 +56,8 @@
       @include vf-icon-close-themed;
 
       border-radius: 50%;
+      // Space away from the content preceding it in the chip body
+      margin-left: $sph--x-small;
     }
 
     & > [class*='p-icon--'] {

package/scss/_patterns_icons.scss

@@ -2067,4 +2067,11 @@
   }
 }
 
-// **Base and Pattern mixins accurate as of March 2025**
+@mixin vf-p-icon-history {
+  .p-icon--history {
+    @extend %icon;
+    @include vf-icon-history-themed;
+  }
+}
+
+// **Base and Pattern mixins accurate as of July 2025**

package/scss/_patterns_image.scss

@@ -25,25 +25,47 @@
         Image element within an image container.
 */
 
-@use 'sass:color';
+@use 'sass:math';
 @import 'settings';
 
-// Mapping of aspect ratio class names to their `aspect-ratio` values (width / height).
+// Mapping of aspect ratio class names to their values
 $aspect-ratios: (
-  '16-9': calc(16 / 9),
-  '3-2': calc(3 / 2),
-  '2-3': calc(2 / 3),
+  '16-9': math.div(16, 9),
+  '3-2': math.div(3, 2),
+  '2-3': math.div(2, 3),
   'cinematic': 2.4,
   'square': 1,
 );
 
+@mixin apply-aspect-ratio-styles($padding-value) {
+  &::before {
+    content: '';
+    display: block;
+    padding-bottom: $padding-value;
+  }
+
+  .p-image-container__image {
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
 @mixin aspect-ratio-classes {
   @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+    $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
     .p-image-container--#{$aspect-ratio} {
-      aspect-ratio: $aspect-ratio-value;
+      @include apply-aspect-ratio-styles($padding-percentage);
     }
   }
 
+  // Responsive aspect ratios
   @each $breakpoint-name, $breakpoint-bounds-pair in $breakpoint-bounds {
     $min-width: map-get($breakpoint-bounds-pair, min);
     $max-width: map-get($breakpoint-bounds-pair, max);
@@ -51,24 +73,27 @@ $aspect-ratios: (
     @if $min-width and $max-width {
       @media ($min-width <= width < $max-width) {
         @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
           .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
-            aspect-ratio: $aspect-ratio-value;
+            @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
       }
     } @else if $min-width {
       @media (width >= $min-width) {
         @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
           .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
-            aspect-ratio: $aspect-ratio-value;
+            @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
       }
     } @else if $max-width {
       @media (width < $max-width) {
         @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
           .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
-            aspect-ratio: $aspect-ratio-value;
+            @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
       }
@@ -79,32 +104,33 @@ $aspect-ratios: (
 @mixin vf-p-image {
   .p-image-container,
   [class^='p-image-container--'] {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    text-align: center;
+    display: block;
+    position: relative;
+    width: 100%;
 
-    // If there is a child lazyloaded image, don't let it affect the layout
-    & > .lazyloaded {
-      display: contents;
+    .p-image-container__image {
+      display: block;
+      margin: auto;
     }
 
     &.is-highlighted {
       background: $colors--theme--background-alt;
     }
 
-    .p-image-container__image {
-      // max height prevents the image from stretching the container
-      // when the aspect ratio is set, and object-fit ensures the aspect ratio
-      // of the image content is maintained
-      max-height: 100%;
-      object-fit: contain;
+    // If there is a child lazyloaded image, don't let it affect the layout.
+    & > .lazyloaded {
+      display: contents;
     }
 
     &.is-cover {
       .p-image-container__image {
         height: 100%;
+        left: 0;
+        margin: 0;
         object-fit: cover;
+        position: absolute;
+        top: 0;
+        transform: none;
         width: 100%;
       }
     }

package/templates/_macros/vf_cta-section.jinja

@@ -0,0 +1,100 @@
+# All Params
+  # title_text: H2 title text
+  # variant: variant for the cta section. Options are "default", "block". Default is "default".
+  # layout: Layout type of cta section. Options are "100", "25-75".
+
+# All Slots
+  # description: Paragraph-style (one or more) content below the title. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
+  # cta: Call-to-action block with action links/buttons. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
+
+# Variants:
+  # default-100: Full-width CTA with title and link text
+    # Params:
+        # title_text: H2 title text - optional
+        # variant: default
+        # layout: 100
+
+    # Slots:
+        # cta: The cta link - required
+
+  # default-25-75: 25-75 percent width CTA with title and link text
+    # Params:
+        # title_text: H2 title text - optional
+        # variant: default
+        # layout: 25-75
+
+      # Slots:
+        # cta: The cta link - required
+
+  # block-100: Full width CTA with title, description and cta block with action links
+    # Params:
+        # title_text: H2 title text - required
+        # variant: block
+        # layout: 100
+
+    # Slots:
+        # description: Paragraph-style (one or more) content below the title - Optional
+        # cta: Call-to-action block (required)
+
+  # block-25-75: 25-75 percent width CTA with title, description and cta block with action links
+    # Params:
+        # title_text: H2 title text - required
+        # variant: block
+        # layout: 25-75
+
+    # Slots:
+        # description: Paragraph-style (one or more) content below the title - Optional
+        # cta: Call-to-action block (required)
+
+{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None) -%}
+  {% set description_content = caller('description') %}
+  {% set has_description = description_content|trim|length > 0 %}
+  {% set cta_content = caller('cta') %}
+  {% set has_cta = cta_content|trim|length > 0 %}
+  {#- User can pass layout as "X-Y" or "X/Y" -#}
+  {% set layout = layout | trim | replace('/', '-') %}
+  {% if layout not in ['100', '25-75'] %}
+    {% set layout = "100" %}
+  {% endif %}
+  {% set variant = variant | trim %}
+  {% if variant not in ['default', 'block'] %}
+    {% set variant = "default" %}
+  {% endif %}
+  {%- macro _description_block() -%}
+    {% if has_description %}{{ description_content }}{% endif %}
+  {%- endmacro -%}
+  {%- macro _cta_block() -%}
+    {% if has_cta -%}<div class="p-cta-block">{{ cta_content }}</div>{% endif %}
+  {%- endmacro -%}
+  {%- macro _cta_default_variant() -%}
+    <h2>
+      {%- if title_text -%}
+        {{ title_text }}
+        <br />
+      {%- endif -%}
+      {{ cta_content }}
+    </h2>
+  {%- endmacro -%}
+  {%- macro _cta_block_variant() -%}
+    <h2>{{ title_text }}</h2>
+    {{ _description_block() -}}
+    {{ _cta_block() }}
+  {%- endmacro -%}
+  {%- macro _cta_variant() -%}
+    {%- if variant == 'default' -%}
+      {{ _cta_default_variant() }}
+    {%- elif variant == 'block' -%}
+      {{ _cta_block_variant() }}
+    {%- endif -%}
+  {%- endmacro -%}
+  <hr class="p-rule is-fixed-width u-no-margin--bottom" />
+  <section class="p-strip is-deep">
+    {%- if layout == "25-75" -%}
+      <div class="grid-row">
+        <div class="grid-col-start-large-3 grid-col-9">{{ _cta_variant() }}</div>
+      </div>
+    {%- elif layout == "100" -%}
+      <div class="u-fixed-width">{{ _cta_variant() }}</div>
+    {%- endif -%}
+  </section>
+{%- endmacro -%}

package/templates/_macros/vf_text-spotlight.jinja

@@ -0,0 +1,32 @@
+{#
+    All Params:
+      @param title_text: H2 title text
+      @param list_items (Array<string>)
+      An array of HTML strings to be rendered
+#}
+{%- macro vf_text_spotlight(title_text, list_items=[], caller=None) -%}
+  {% set has_list = list_items | length >= 2 and list_items | length <= 7 %}
+  <section class="p-section">
+    <hr class="p-rule is-fixed-width" />
+    <div class="row--25-75-on-large">
+      <div class="col">
+        <h2 class="p-text--small-caps">{{ title_text }}</h2>
+      </div>
+      <div class="col">
+        {%- if has_list -%}
+          {%- for list_item in list_items -%}
+            <p class="p-heading--2">{{- list_item -}}</p>
+            {%- if not loop.last %}<hr class="p-rule--muted" />{%- endif %}
+          {%- endfor -%}
+        {%- else -%}
+          <div class="p-notification--caution">
+            <div class="p-notification__content">
+              <h5 class="p-notification__title">Caution</h5>
+              <p class="p-notification__message">List items must be between 2 and 7.</p>
+            </div>
+          </div>
+        {%- endif -%}
+      </div>
+    </div>
+  </section>
+{%- endmacro -%}

package/templates/_macros/vf_tiered-list.jinja

@@ -20,48 +20,43 @@
 
   <div class="p-section u-fixed-width">
     <hr class="p-rule">
-
-    {% if has_description == true -%}
-      {%- if is_description_full_width_on_desktop == true -%}
-        <div class="u-fixed-width">
-          <div class="p-section--shallow">
+    <div class="p-section--shallow">
+      {% if has_description == true -%}
+        {%- if is_description_full_width_on_desktop == true -%}
+          <div class="u-fixed-width">
             {{ title_content }}
           </div>
-        </div>
 
-        <div class="row">
-          <div class="col-6 col-start-large-7">
-            {{ description_content }}
+          <div class="row">
+            <div class="col-6 col-start-large-7">
+              {{ description_content }}
+            </div>
           </div>
-        </div>
-      {%- else -%}
-        <div class="row">
-          <div class="col-6">
-            <div class="p-section--shallow">
+        {%- else -%}
+          <div class="row">
+            <div class="col-6">
               {{ title_content }}
             </div>
-          </div>
 
-          <div class="col-6">
-            {{ description_content }}
+            <div class="col-6">
+              {{ description_content }}
+            </div>
           </div>
-        </div>
-      {%- endif -%}
-    {%- else -%}
-      <div class="u-fixed-width">
-        <div class="p-section--shallow">
+        {%- endif -%}
+      {%- else -%}
+        <div class="u-fixed-width">
           {{ title_content }}
         </div>
-      </div>
-    {%- endif %}
+      {%- endif %}
+    </div>
 
     {#-
       When there is a CTA, we use shallow spacing to space the list away from the CTA.
       When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space.
     -#}
     {%- if has_cta -%}
-    <div class="p-section--shallow">
-    {%- endif -%}
+      <div class="p-section--shallow">
+      {%- endif -%}
       {%- for number in range(1, 25) -%}
         {%- set list_item_title_content = caller('list_item_title_' + number|string) -%}
         {%- set has_title_content = list_item_title_content|trim|length > 0 -%}
@@ -72,27 +67,29 @@
             iterating through 25 potential list items -#}
         {%- if has_title_content and has_description_content -%}
           {%- if is_list_full_width_on_tablet == true %}
-            <div class="row">
-              <div class="col-9 col-start-large-4">
-                <hr class="is-muted">
+            {#- Skip the first HR -#}
+            {%- if number != 1 %}
+              <div class="row">
+                <div class="col-9 col-start-large-4">
+                  <hr class="is-muted">
+                </div>
               </div>
-            </div>
+            {%- endif -%}
 
             <div class="row">
-              <div class="col-3 col-start-large-4">
-                {{ list_item_title_content }}
-              </div>
+              <div class="col-3 col-start-large-4">{{ list_item_title_content }}</div>
 
-              <div class="col-6">
-                {{ list_item_description_content }}
-              </div>
+              <div class="col-6">{{ list_item_description_content }}</div>
             </div>
           {%- else %}
-            <div class="row">
-              <div class="col-9 col-start-large-4">
-                <hr class="is-muted">
+            {#- Skip the first HR -#}
+            {%- if number != 1 %}
+              <div class="row">
+                <div class="col-9 col-start-large-4">
+                  <hr class="is-muted">
+                </div>
               </div>
-            </div>
+            {%- endif -%}
 
             <div class="row">
               <div class="col-medium-3 col-3 col-start-large-4">
@@ -106,13 +103,13 @@
           {%- endif -%}
         {%- endif -%}
       {% endfor %}
-    {%- if has_cta -%}
-    </div>
+      {%- if has_cta -%}
+      </div>
     {%- endif -%}
 
     {% if has_cta == true -%}
       <div class="row">
-        <hr class="p-rule--muted"/>
+        <hr class="p-rule--muted">
         <div class="col-6 col-start-large-7">
           <p>
             {{ cta_content }}
@@ -121,4 +118,4 @@
       </div>
     {%- endif %}
   </div>
-{%- endmacro %}
+{%- endmacro %}