Update changelog

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## [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
+
+## [2.2.0] - 2026-05-05
+- Add semantic badge colours (`SUCCESS`, `WARNING`, `DANGER`)
+- Fix typos
+
 ## [2.1.0] - 2026-05-01
 - Fix glossy badge border colour
 - Change default badge style to be fully rounded

README.md

@@ -116,7 +116,7 @@ obj="{{ job.kind }}"
 
 <twig:Pcm:Badge colour="red" label="Warning!" />
 
-<twig:Pcm:Badge colour="red">Warning!<twig:Pcm:Badge>
+<twig:Pcm:Badge colour="red">Warning!</twig:Pcm:Badge>
 ```
 
 <br>

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>

src/Enum/BadgeColour.php

@@ -14,6 +14,7 @@ enum BadgeColour
     case BLUE;
     case BROWN;
     case CYAN;
+    case DANGER;
     case DEFAULT;
     case EMERALD;
     case FOREST;
@@ -35,8 +36,10 @@ enum BadgeColour
     case SLATE;
     case STONE;
     case STRIPE;
+    case SUCCESS;
     case TEAL;
     case VIOLET;
+    case WARNING;
     case YELLOW;
     case ZINC;
 
@@ -47,8 +50,9 @@ enum BadgeColour
             $this::AMBER   => new BadgePalette('text-amber-600', 'border-amber-600/30', 'bg-amber-600'),
             $this::BLACK   => new BadgePalette('text-zinc-900', 'border-zinc-900/30', 'bg-zinc-900'),
             $this::BLUE    => new BadgePalette('text-blue-700', 'border-blue-700/30', 'bg-blue-700'),
-            $this::BROWN   => new BadgePalette('text-stone-700', 'border-stone-700/30', 'bg-stone-700'),
+            $this::BROWN   => new BadgePalette('text-amber-800', 'border-amber-800/30', 'bg-amber-800'),
             $this::CYAN    => new BadgePalette('text-cyan-600', 'border-cyan-600/30', 'bg-cyan-600'),
+            $this::DANGER  => new BadgePalette('text-danger', 'border-danger/30', 'bg-danger'),
             $this::DEFAULT => new BadgePalette('text-primary', 'border-primary/30', 'bg-primary'),
             $this::EMERALD => new BadgePalette('text-emerald-600', 'border-emerald-600/30', 'bg-emerald-600'),
             $this::FOREST  => new BadgePalette('text-green-800', 'border-green-800/30', 'bg-green-800'),
@@ -70,8 +74,10 @@ enum BadgeColour
             $this::SLATE   => new BadgePalette('text-slate-600', 'border-slate-600/30', 'bg-slate-600'),
             $this::STONE   => new BadgePalette('text-stone-500', 'border-stone-500/30', 'bg-stone-500'),
             $this::STRIPE  => new BadgePalette('text-indigo-500', 'border-indigo-500/30', 'bg-indigo-500'),
+            $this::SUCCESS => new BadgePalette('text-success', 'border-success/30', 'bg-success'),
             $this::TEAL    => new BadgePalette('text-teal-600', 'border-teal-600/30', 'bg-teal-600'),
             $this::VIOLET  => new BadgePalette('text-violet-600', 'border-violet-600/30', 'bg-violet-600'),
+            $this::WARNING => new BadgePalette('text-warning', 'border-warning/30', 'bg-warning'),
             $this::YELLOW  => new BadgePalette('text-yellow-600', 'border-yellow-600/30', 'bg-yellow-600'),
             $this::ZINC    => new BadgePalette('text-zinc-500', 'border-zinc-500/30', 'bg-zinc-500'),
         };

src/Twig/Component/Badge.php

@@ -54,7 +54,7 @@ final class Badge
         $this->label = $label;
 
         if (!$obj && !$colour) {
-            throw new \RuntimeException(sprintf('You must specify either a colour an instance of "%s".', BadgeableInterface::class));
+            throw new \RuntimeException(sprintf('You must specify either a colour or an instance of "%s".', BadgeableInterface::class));
         }
 
         if ($obj && $colour) {