Update changelog

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [x.x.x] - xxxx-xx-xx
 
+## [2.2.2] - 2026-05-08
+- Add `[title]` attribute by default
+- Update showcase page to show semantic colours
+
 ## [2.2.1] - 2026-05-07
 - Fix `BROWN` colour classes
 

Resources/views/Badge.html.twig

@@ -1,4 +1,4 @@
-<div {{ attributes }} class="{{ this.finalClasses }}"{% if this.label %} aria-label="{{ this.label }}"{% endif %}>
+<div {{ attributes.defaults({ "aria-label": this.label ?? "", "title": this.label ?? "", "class": this.finalClasses }) }}>
     <span class="inline-flex gap-1 items-center justify-center">
         {% if this.icon %}
             <twig:ux:icon name="{{ this.icon }}" class="size-[1em] shrink-0" aria-hidden="true" />

dev/templates/showcase.html.twig

@@ -11,6 +11,9 @@
                     colors: {
                         accent: '#7c3aed',
                         primary: '#0f172a',
+                        danger: '#cc0000',
+                        warning: '#df5010',
+                        success: '#00d00a',
                     },
                     fontSize: {
                         '2xs': ['0.625rem', '0.875rem'],
@@ -28,7 +31,7 @@
         <h2 class="text-lg font-semibold mb-3">Solid</h2>
         <div class="flex flex-wrap gap-2">
             {% for colour in colours %}
-                <twig:Pcm:Badge colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
+                <twig:Pcm:Badge colour="{{ colour }}" :label="colour" />
             {% endfor %}
         </div>
     </section>