vanilla-framework 4.36.0 → 4.37.1

package/package.json

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

package/scss/_base_icon-definitions.scss

@@ -1526,3 +1526,45 @@
 @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));
 }
+
+// generative-ai
+@function vf-icon-generative-ai-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 fill='#{vf-url-friendly-color($color)}'  d='m7.75 3 .007.27a5.25 5.25 0 0 0 4.973 4.973l.27.007v1.5a5.25 5.25 0 0 0-5.243 4.98L7.75 15h-1.5c0-2.9-2.35-5.25-5.25-5.25v-1.5C3.9 8.25 6.25 5.9 6.25 3zM7 6.09A6.78 6.78 0 0 1 4.09 9 6.78 6.78 0 0 1 7 11.908 6.78 6.78 0 0 1 9.908 9 6.78 6.78 0 0 1 7 6.09M15.5 3.103A2.704 2.704 0 0 1 12.898.5h-.796A2.704 2.704 0 0 1 9.5 3.103v.794A2.704 2.704 0 0 1 12.102 6.5h.796A2.704 2.704 0 0 1 15.5 3.897z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-generative-ai($color: $colors--light-theme--icon) {
+  background-image: vf-icon-generative-ai-url($color);
+}
+
+@mixin vf-icon-generative-ai-themed {
+  @include vf-themed-icon($light-value: vf-icon-generative-ai-url($colors--light-theme--icon), $dark-value: vf-icon-generative-ai-url($colors--dark-theme--icon));
+}
+
+// ignored
+@function vf-icon-ignored-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 fill='#{vf-url-friendly-color($color)}'  d='m10.47 4.47 1.06 1.06-6 6-1.06-1.06z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1m0 1.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-ignored($color: $colors--light-theme--icon) {
+  background-image: vf-icon-ignored-url($color);
+}
+
+@mixin vf-icon-ignored-themed {
+  @include vf-themed-icon($light-value: vf-icon-ignored-url($colors--light-theme--icon), $dark-value: vf-icon-ignored-url($colors--dark-theme--icon));
+}
+
+// vulnerable
+@function vf-icon-vulnerable-url($color: $color-negative, $color-symbol: $color-x-light) {
+  @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 fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color-symbol)}'  fill-rule='evenodd' d='M9 8.5V4H7v4.5zm-.008 1.91A.5.5 0 0 0 8.5 10h-1l-.09.008A.5.5 0 0 0 7 10.5v1l.008.09A.5.5 0 0 0 7.5 12h1l.09-.008A.5.5 0 0 0 9 11.5v-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-vulnerable($color: $color-negative, $color-symbol: $color-x-light) {
+  background-image: vf-icon-vulnerable-url($color, $color-symbol);
+}
+
+@mixin vf-icon-vulnerable-themed {
+  @include vf-themed-icon(
+    $light-value: vf-icon-vulnerable-url($color: map-get($colors-light-theme--tinted-borders, negative), $color-symbol: $colors--light-theme--background-default),
+    $dark-value: vf-icon-vulnerable-url($color: map-get($colors-dark-theme--tinted-borders, negative), $color-symbol: $colors--dark-theme--background-default)
+  );
+}

package/scss/_patterns_equal-height-row.scss

@@ -156,4 +156,14 @@
       }
     }
   }
+
+  .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));
+      }
+    }
+  }
 }

package/scss/_patterns_icons.scss

@@ -2074,4 +2074,25 @@
   }
 }
 
-// **Base and Pattern mixins accurate as of July 2025**
+@mixin vf-p-icon-generative-ai {
+  .p-icon--generative-ai {
+    @extend %icon;
+    @include vf-icon-generative-ai-themed;
+  }
+}
+
+@mixin vf-p-icon-ignored {
+  .p-icon--ignored {
+    @extend %icon;
+    @include vf-icon-ignored-themed;
+  }
+}
+
+@mixin vf-p-icon-vulnerable {
+  .p-icon--vulnerable {
+    @extend %icon;
+    @include vf-icon-vulnerable-themed;
+  }
+}
+
+// **Base and Pattern mixins accurate as of October 2025**

package/templates/_macros/vf_equal-heights.jinja

@@ -58,26 +58,30 @@
     </div>
 
     <div class="row">
-      <div class="{%- if items | length % 3 == 0 and items | length % 4 != 0 -%}col-9 col-start-large-4{%- else -%}col{%- endif -%}">
+      <div class="{%- if items | length == 2 -%}col-6 col-start-large-7{%- elif items | length % 3 == 0 and items | length % 4 != 0 -%}col-9 col-start-large-4{%- else -%}col{%- endif -%}">
         <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 description = item.get("description_html") or "" | trim %}
-            {% set cta = item.get("cta_html") or "" | trim %}
+            {% set image = item.get("image_html", "") | trim %}
+            {% set title = item.get("title_text", "") | trim %}
+            {% 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 (required) -#}
+              {#- Image item -#}
               <div class="p-equal-height-row__item">
-                <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 %}" >
-                  {#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
-                  {{- image | safe -}}
-                </div>
+                {%- 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 %}" >
+                    {#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
+                    {{- image | safe -}}
+                  </div>
+                  <hr class="p-rule--highlight"/>
+                {%- endif -%}
               </div>
-              {#- Title item (required) -#}
+              {#- Title item -#}
               <div class="p-equal-height-row__item">
-                <hr class="p-rule--highlight"/>
-                <p class="p-heading--{{ subtitle_heading_level }}">{{- title -}}</p>
+                {%- if title | length > 0 -%}
+                  <p class="p-heading--{{ subtitle_heading_level }}">{{- title -}}</p>
+                {%- endif -%}
               </div>
               {#- Description item (optional) -#}
               <div class="p-equal-height-row__item">

package/templates/_macros/vf_pricing-block.jinja

@@ -45,10 +45,11 @@
           {% set item_class = "is-ticked" -%}
         {% elif item_style == 'crossed' -%}
           {% set item_class = "is-crossed u-text--muted" -%}
+          {% set sr_prefix = '<span class="u-off-screen">Does not include</span>' -%}
         {% else -%}
           {% set item_class = "has-bullet" -%}
         {%- endif -%}
-        <li class="p-list__item {{ item_class }}">{{ offering.list_item_content_html }}</li>
+        <li class="p-list__item {{ item_class }}">{{ sr_prefix }}{{ offering.list_item_content_html }}</li>
       {% endfor -%}
     </ul>
   {%- endmacro -%}