@pnx-mixtape/mxds 0.1.0-rc.0 → 0.1.0-rc.2

package/src/Component/ProgressIndicator/__snapshots__/ProgressIndicator.stories.ts.snap

@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Last Step 1`] = `
+"
+<div class="mx-progress-indicator">
+  <p class="mx-progress-indicator__count">Step 5 of 5 — Review and submit</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i>
+      </div>
+  <ol class="mx-progress-indicator__steps">
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li>
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your details</li>
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your income</li>
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Evidence</li>
+          <li class="mx-progress-indicator__step" aria-current="step">Review and submit</li>
+      </ol>
+</div>
+"
+`;
+
+exports[`Middle Step 1`] = `
+"
+<div class="mx-progress-indicator">
+  <p class="mx-progress-indicator__count">Step 3 of 5 — Your income</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+      </div>
+  <ol class="mx-progress-indicator__steps">
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li>
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your details</li>
+          <li class="mx-progress-indicator__step" aria-current="step">Your income</li>
+          <li class="mx-progress-indicator__step">Evidence</li>
+          <li class="mx-progress-indicator__step">Review and submit</li>
+      </ol>
+</div>
+"
+`;
+
+exports[`Progress Indicator 1`] = `
+"
+<div class="mx-progress-indicator">
+  <p class="mx-progress-indicator__count">Step 1 of 5 — Your card</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+      </div>
+  <ol class="mx-progress-indicator__steps">
+          <li class="mx-progress-indicator__step" aria-current="step">Your card</li>
+          <li class="mx-progress-indicator__step">Your details</li>
+          <li class="mx-progress-indicator__step">Your income</li>
+          <li class="mx-progress-indicator__step">Evidence</li>
+          <li class="mx-progress-indicator__step">Review and submit</li>
+      </ol>
+</div>
+"
+`;

package/src/Component/ProgressIndicator/__snapshots__/ProgressIndicator.stories.tsx.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Last Step 1`] = `"<div class="mx-progress-indicator"><p class="mx-progress-indicator__count">Step 5 of 5 — Review and submit</p><div class="mx-progress-indicator__track" aria-hidden="true"><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i></div><ol class="mx-progress-indicator__steps"><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your details</li><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your income</li><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Evidence</li><li class="mx-progress-indicator__step" aria-current="step">Review and submit</li></ol></div>"`;
+
+exports[`Middle Step 1`] = `"<div class="mx-progress-indicator"><p class="mx-progress-indicator__count">Step 3 of 5 — Your income</p><div class="mx-progress-indicator__track" aria-hidden="true"><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i><i class="mx-progress-indicator__marker"></i><i class="mx-progress-indicator__marker"></i></div><ol class="mx-progress-indicator__steps"><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your details</li><li class="mx-progress-indicator__step" aria-current="step">Your income</li><li class="mx-progress-indicator__step">Evidence</li><li class="mx-progress-indicator__step">Review and submit</li></ol></div>"`;
+
+exports[`Progress Indicator 1`] = `"<div class="mx-progress-indicator"><p class="mx-progress-indicator__count">Step 1 of 5 — Your card</p><div class="mx-progress-indicator__track" aria-hidden="true"><i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i><i class="mx-progress-indicator__marker"></i><i class="mx-progress-indicator__marker"></i><i class="mx-progress-indicator__marker"></i><i class="mx-progress-indicator__marker"></i></div><ol class="mx-progress-indicator__steps"><li class="mx-progress-indicator__step" aria-current="step">Your card</li><li class="mx-progress-indicator__step">Your details</li><li class="mx-progress-indicator__step">Your income</li><li class="mx-progress-indicator__step">Evidence</li><li class="mx-progress-indicator__step">Review and submit</li></ol></div>"`;

package/src/Component/ProgressIndicator/progress-indicator.css

@@ -0,0 +1,59 @@
+/**
+ * ProgressIndicator
+ */
+
+@layer design-system.components {
+  .mx-progress-indicator {
+    /* @public --gap */
+    display: grid;
+    gap: var(--gap, var(--spacing-xs));
+  }
+
+  .mx-progress-indicator__count {
+    margin: 0;
+    font-size: var(--font-size-s);
+    font-weight: var(--font-weight-bold);
+    color: var(--colour-foreground-alt);
+  }
+
+  .mx-progress-indicator__track {
+    /* @public --track-gap --marker-size --marker-colour --marker-colour-complete --marker-colour-active */
+    display: flex;
+    gap: var(--track-gap, var(--spacing-xxxs));
+  }
+
+  .mx-progress-indicator__marker {
+    flex: 1;
+    block-size: var(--marker-size, var(--spacing-xxxs));
+    border-radius: var(--border-radius);
+    background-color: var(--marker-colour, var(--colour-border));
+  }
+
+  .mx-progress-indicator__marker--done {
+    background-color: var(--marker-colour-complete, var(--colour-primary));
+  }
+
+  .mx-progress-indicator__marker--now {
+    background-color: var(--marker-colour-active, var(--colour-primary));
+  }
+
+  .mx-progress-indicator__steps {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xxxs) var(--spacing-m);
+    margin: 0;
+    padding-inline-start: 0;
+    list-style: none;
+    font-size: var(--font-size-xs);
+    color: var(--colour-foreground-alt);
+  }
+
+  .mx-progress-indicator__step[aria-current="step"] {
+    color: var(--marker-colour-active, var(--colour-primary));
+    font-weight: var(--font-weight-bold);
+  }
+
+  .mx-progress-indicator__step--done::before {
+    content: "✓ ";
+  }
+}

package/src/Component/ProgressIndicator/progress-indicator.twig

@@ -0,0 +1,22 @@
+{% set attributes = (attributes ?? create_attribute()).addClass('mx-progress-indicator') %}
+{% set total = steps|length %}
+
+<div{{ attributes }}>
+  <p class="mx-progress-indicator__count">Step {{ current }} of {{ total }} — {{ steps[current - 1] }}</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+    {% for step in steps %}
+      {% set markerClass = 'mx-progress-indicator__marker' %}
+      {% if loop.index < current %}
+        {% set markerClass = markerClass ~ ' mx-progress-indicator__marker--done' %}
+      {% elseif loop.index == current %}
+        {% set markerClass = markerClass ~ ' mx-progress-indicator__marker--now' %}
+      {% endif %}
+      <i class="{{ markerClass }}"></i>
+    {% endfor %}
+  </div>
+  <ol class="mx-progress-indicator__steps">
+    {% for step in steps %}
+      <li class="mx-progress-indicator__step{% if loop.index < current %} mx-progress-indicator__step--done{% endif %}"{% if loop.index == current %} aria-current="step"{% endif %}>{{ step }}</li>
+    {% endfor %}
+  </ol>
+</div>

package/src/Component/Sticky/Elements/Sticky.ts

@@ -25,7 +25,7 @@ export default class Sticky extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.offsetPropName = this.getAttribute("offsetpropname")
+    this.offsetPropName = this.getAttribute("offsetpropname") || "--sticky-offset"
     const options: IOOptions = {
       root: this.root,
       rootMargin: this.rootMargin,

package/src/Component/Sticky/sticky.css

@@ -16,18 +16,18 @@
 
 @layer design-system.components {
   .mx-sticky {
-    @mixin sticky;
+    @add-mixin sticky;
   }
 
   .mx-sticky--m {
     @media (--medium-up) {
-      @mixin sticky;
+      @add-mixin sticky;
     }
   }
 
   .mx-sticky--l {
     @media (--large-up) {
-      @mixin sticky;
+      @add-mixin sticky;
     }
   }
 

package/src/Component/Tabs/Elements/Tabs.ts

@@ -227,14 +227,16 @@ export default class Tabs extends HTMLElement {
   }
 
   set active(id: string) {
-    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {
+    this.tabs.forEach(({ tab, button, panel }: TabsType, key: string): void => {
       if (key === id) {
         tab.setAttribute("aria-selected", "true")
+        button.setAttribute("aria-selected", "true")
         tab.setAttribute("tabindex", "0")
         panel.removeAttribute("inert")
         this.dropMenuTrigger.textContent = tab.textContent
       } else {
         tab.setAttribute("aria-selected", "false")
+        button.setAttribute("aria-selected", "false")
         tab.setAttribute("tabindex", "-1")
         panel.setAttribute("inert", "")
       }

package/src/Component/Tabs/Tabs.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
-import { expect } from "storybook/test"
+import { expect, waitFor } from "storybook/test"
 import Component from "./tabs.twig"
 import TabItem from "./tab-item.twig"
 import { HeadingTypes, Tabs as TabsType } from "@pnx-mixtape/ids-shape"
@@ -98,47 +98,81 @@ type Story = StoryObj<TabsType>
 
 export const Tabs: Story = {
   play: async ({ canvas, canvasElement, userEvent, step }) => {
-    const tab1 = canvas.getByRole("tab", { name: "Funk" })
-    const tab2 = canvas.getByRole("tab", { name: "Soul" })
-    const tab3 = canvas.getByRole("tab", { name: "Motown" })
+    const isMobile = matchMedia("(max-width: 767px)").matches
+    const [button1, tab1] = canvas.getAllByRole("tab", { name: "Funk", hidden: true })
+    const [button2, tab2] = canvas.getAllByRole("tab", { name: "Soul", hidden: true })
+    const [button3, tab3] = canvas.getAllByRole("tab", { name: "Motown", hidden: true })
     const panel = (id: string): HTMLElement => canvasElement.querySelector(`#${id}`) as HTMLElement
 
     await step("Funk starts selected", async () => {
-      await expect(tab1).toHaveAttribute("aria-selected", "true")
+      if (isMobile) {
+        await expect(button1).toHaveAttribute("aria-selected", "true")
+      } else {
+        await expect(tab1).toHaveAttribute("aria-selected", "true")
+      }
       await expect(panel("tab-1")).not.toHaveAttribute("inert")
       await expect(panel("tab-2")).toHaveAttribute("inert")
     })
 
     await step("Click selects a tab and moves focus to its panel", async () => {
-      await userEvent.click(tab2)
-      await expect(tab2).toHaveAttribute("aria-selected", "true")
-      await expect(tab1).toHaveAttribute("aria-selected", "false")
+      if (isMobile) {
+        await userEvent.click(button2)
+        await waitFor(() => expect(button2).toHaveAttribute("aria-selected", "true"))
+        await expect(button1).toHaveAttribute("aria-selected", "false")
+      } else {
+        await userEvent.click(tab2)
+        await waitFor(() => expect(tab2).toHaveAttribute("aria-selected", "true"))
+        await expect(tab1).toHaveAttribute("aria-selected", "false")
+      }
       await expect(panel("tab-2")).not.toHaveAttribute("inert")
       await expect(panel("tab-1")).toHaveAttribute("inert")
       await expect(panel("tab-2")).toHaveFocus()
     })
 
     await step("ArrowRight/ArrowLeft move focus, with wraparound", async () => {
-      tab2.focus()
-      await userEvent.keyboard("{ArrowRight}")
-      await expect(tab3).toHaveFocus()
-      await userEvent.keyboard("{ArrowRight}")
-      await expect(tab1).toHaveFocus()
-      await userEvent.keyboard("{ArrowLeft}")
-      await expect(tab3).toHaveFocus()
+      if (isMobile) {
+        button2.focus()
+        await userEvent.keyboard("{ArrowRight}")
+        await expect(button3).toHaveFocus()
+        await userEvent.keyboard("{ArrowRight}")
+        await expect(button1).toHaveFocus()
+        await userEvent.keyboard("{ArrowLeft}")
+        await expect(button3).toHaveFocus()
+      } else {
+        tab2.focus()
+        await userEvent.keyboard("{ArrowRight}")
+        await expect(tab3).toHaveFocus()
+        await userEvent.keyboard("{ArrowRight}")
+        await expect(tab1).toHaveFocus()
+        await userEvent.keyboard("{ArrowLeft}")
+        await expect(tab3).toHaveFocus()
+      }
     })
 
     await step("Home/End jump to first/last tab", async () => {
-      await userEvent.keyboard("{Home}")
-      await expect(tab1).toHaveFocus()
-      await userEvent.keyboard("{End}")
-      await expect(tab3).toHaveFocus()
+      if (isMobile) {
+        await userEvent.keyboard("{Home}")
+        await expect(button1).toHaveFocus()
+        await userEvent.keyboard("{End}")
+        await expect(button3).toHaveFocus()
+      } else {
+        await userEvent.keyboard("{Home}")
+        await expect(tab1).toHaveFocus()
+        await userEvent.keyboard("{End}")
+        await expect(tab3).toHaveFocus()
+      }
     })
 
     await step("Reset: reselect Funk and clear the ?tab= param", async () => {
-      await userEvent.click(tab1)
-      await expect(tab1).toHaveAttribute("aria-selected", "true")
+      if (isMobile) {
+        await userEvent.click(button1)
+        await expect(button1).toHaveAttribute("aria-selected", "true")
+      } else {
+        await userEvent.click(tab1)
+        await expect(tab1).toHaveAttribute("aria-selected", "true")
+      }
       window.history.replaceState({}, "", window.location.pathname)
+      await userEvent.click(canvasElement)
     })
   },
 }

package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap

@@ -3,7 +3,7 @@
 exports[`Tabs 1`] = `
 "
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
 </div>
@@ -23,7 +23,7 @@ exports[`With Heading 1`] = `
 
 <h2>Tabs heading</h2>
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
 </div>

package/src/Component/Tag/README.md

@@ -39,14 +39,15 @@ A small inline label used to categorise content. Renders as plain text metadata,
 
 **tags.twig props** (`Tags` type from `ids-shape`):
 
-| Prop            | Type                                  | Description                                                                                                                                  |
-| --------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`          | `TagTypes`                            | Controls which markup is rendered per item. One of `text`, `link`, `checkbox`. Changing the type also changes the required shape of `items`. |
-| `items`         | `string[] \| Link[] \| FormControl[]` | List of tag items. Shape depends on `type` — see below.                                                                                      |
-| `attributes`    | `Attribute`                           | Extra attributes on the outer `<ul class="mx-tags">`                                                                                         |
-| `tagAttributes` | `Attribute`                           | Extra attributes on each `.mx-tag` element                                                                                                   |
-| `dismissible`   | `boolean`                             | When true, plain (`text`) tags render a remove button (`mx-tag--dismissible`). Wire up removal behaviour in the consuming app.               |
-| `removeLabel`   | `string`                              | Accessible label for the remove button. Defaults to `"Remove"`.                                                                              |
+| Prop            | Type                                  | Description                                                                                                                                     |
+| --------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`          | `TagTypes`                            | Controls which markup is rendered per item. One of `text`, `link`, `checkbox`. Changing the type also changes the required shape of `items`.    |
+| `items`         | `string[] \| Link[] \| FormControl[]` | List of tag items. Shape depends on `type` — see below.                                                                                         |
+| `attributes`    | `Attribute`                           | Extra attributes on the outer `<ul class="mx-tags">`                                                                                            |
+| `tagAttributes` | `Attribute`                           | Extra attributes on each `.mx-tag` element                                                                                                      |
+| `dismissible`   | `boolean`                             | When true, plain (`text`) tags render a remove button (`mx-tag--dismissible`). Wire up removal behaviour in the consuming app.                  |
+| `removeLabel`   | `string`                              | Accessible label for the remove button. Defaults to `"Remove"`.                                                                                 |
+| `variant`       | `TagVariants`                         | Colour variant: `info`, `success`, `warning`, `error`, `featured`. Applied per-item via `tag-item.twig`. Defaults to the neutral, unstyled tag. |
 
 **Item shapes per `type`:**
 
@@ -78,20 +79,20 @@ Link tags:
 </ul>
 ```
 
-Checkbox tags (the `<input>` is visually hidden off-screen; the `<label>` is the click target):
+Checkbox tags (the `<input>` is visually hidden off-screen; the `<label>` is the click target). The `mx-icon mx-icon--tick` classes on the label render the shared checkmark icon (from `@pnx-mixtape/mxds/src/Atom/Icon/icon.css`) — its space is always reserved, but it's only visible once the input is checked, so checking a tag doesn't change its size:
 
 ```html
 <ul class="mx-tags">
   <li>
     <div class="mx-tag">
       <input type="checkbox" id="music" name="tag" value="music" />
-      <label for="music">Music</label>
+      <label class="mx-icon mx-icon--tick" for="music">Music</label>
     </div>
   </li>
   <li>
     <div class="mx-tag">
       <input type="checkbox" id="news" name="tag" value="news" checked />
-      <label for="news">News</label>
+      <label class="mx-icon mx-icon--tick" for="news">News</label>
     </div>
   </li>
 </ul>
@@ -131,7 +132,7 @@ import { AsTags } from "@pnx-mixtape/mxds/src/enums"
   <li>
     <div className="mx-tag">
       <input type="checkbox" id="music" name="tag" value="music" />
-      <label htmlFor="music">Music</label>
+      <label className="mx-icon mx-icon--tick" htmlFor="music">Music</label>
     </div>
   </li>
 </ul>
@@ -139,13 +140,14 @@ import { AsTags } from "@pnx-mixtape/mxds/src/enums"
 
 **`Tag` props:**
 
-| Prop          | Type         | Default    | Description                                                                                     |
-| ------------- | ------------ | ---------- | ----------------------------------------------------------------------------------------------- |
-| `as`          | `AsTags`     | `div`      | Semantic element for the tag: `div`, `li`, `article`, `aside`, `section`                        |
-| `className`   | `string`     | —          | Extra class on the tag element                                                                  |
-| `children`    | `ReactNode`  | —          | Tag label content                                                                               |
-| `onRemove`    | `() => void` | —          | When set, renders a remove button (`mx-tag--dismissible`). Consumer removes the tag from state. |
-| `removeLabel` | `string`     | `"Remove"` | Accessible label for the remove button                                                          |
+| Prop          | Type          | Default    | Description                                                                                               |
+| ------------- | ------------- | ---------- | --------------------------------------------------------------------------------------------------------- |
+| `as`          | `AsTags`      | `div`      | Semantic element for the tag: `div`, `li`, `article`, `aside`, `section`                                  |
+| `className`   | `string`      | —          | Extra class on the tag element                                                                            |
+| `children`    | `ReactNode`   | —          | Tag label content                                                                                         |
+| `onRemove`    | `() => void`  | —          | When set, renders a remove button (`mx-tag--dismissible`). Consumer removes the tag from state.           |
+| `removeLabel` | `string`      | `"Remove"` | Accessible label for the remove button                                                                    |
+| `variant`     | `TagVariants` | —          | Colour variant: `info`, `success`, `warning`, `error`, `featured`. Defaults to the neutral, unstyled tag. |
 
 > For filter UIs, tag removal can also be handled upstream (e.g. via the checkbox type toggling its checked state, or via the Filters component). Use `onRemove` when you need a self-contained dismissible chip.
 
@@ -155,11 +157,11 @@ import { AsTags } from "@pnx-mixtape/mxds/src/enums"
 
 The `type` prop on the Twig template maps to `TagTypes` values from `@pnx-mixtape/ids-shape`. The same base `mx-tag` class is used for all variants — the variant changes the inner element, not the class.
 
-| `TagTypes` value | Element rendered                                                      | Visual intent                                                                                        |
-| ---------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `text`           | `<span class="mx-tag">`                                               | Read-only metadata label (e.g. category shown on a Card)                                             |
-| `link`           | `<a class="mx-tag" href>`                                             | Navigational tag — clicking takes the user to a filtered / category view                             |
-| `checkbox`       | `<div class="mx-tag">` wrapping `<input type="checkbox">` + `<label>` | Toggleable filter tag inside a form; checked state is visually indicated via the primary link colour |
+| `TagTypes` value | Element rendered                                                      | Visual intent                                                                                                                                                            |
+| ---------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `text`           | `<span class="mx-tag">`                                               | Read-only metadata label (e.g. category shown on a Card)                                                                                                                 |
+| `link`           | `<a class="mx-tag" href>`                                             | Navigational tag — clicking takes the user to a filtered / category view                                                                                                 |
+| `checkbox`       | `<div class="mx-tag">` wrapping `<input type="checkbox">` + `<label>` | Toggleable filter tag inside a form; checked state fills the tag with the primary link colour (or the variant's own colour) and prefixes the label with a checkmark icon |
 
 ---
 
@@ -168,7 +170,7 @@ The `type` prop on the Twig template maps to `TagTypes` values from `@pnx-mixtap
 - **Text tags** are plain `<span>` elements — they are metadata, not interactive. Do not add click handlers or `role` attributes; if a tag needs to be clickable, use the `link` or `checkbox` variant.
 - **Link tags** use a real `<a href>`. Ensure the destination makes sense out of context — the visible label is the accessible name, so labels like "Music" should lead to an unambiguous page (e.g. `/category/music`).
 - **Checkbox tags** rely on a native `<input type="checkbox">` paired with a `<label for="…">`. The `<input>` is positioned off-screen (not `display: none`) so it remains focusable and announceable. The whole `.mx-tag` gets a focus outline via `:has(input:focus)` — do not remove this selector.
-- The checked state is communicated by colour alone in the default styling. When rendering checkbox tags in a form, ensure surrounding context (a fieldset legend, heading, or `aria-label`) describes what group of filters the tags belong to.
+- The checked state is communicated by colour (a solid fill) **and** a checkmark icon prefixed to the label — not colour alone. When rendering checkbox tags in a form, ensure surrounding context (a fieldset legend, heading, or `aria-label`) describes what group of filters the tags belong to.
 - If you need to render a list of tags for assistive-tech as a single labelled group, add `aria-label` (or `aria-labelledby`) to the `<ul class="mx-tags">`:
 
 ```html
@@ -201,7 +203,31 @@ The `type` prop on the Twig template maps to `TagTypes` values from `@pnx-mixtap
 }
 ```
 
-Hover (on `a.mx-tag`) and checked (`:has(input:checked)`) states both set `--tag-foreground` to `--link-colour` (falls back to `--colour-primary`).
+Hover (on `a.mx-tag`) sets `--tag-foreground` to `--link-colour` (falls back to `--colour-primary`). Checked (`:has(input:checked)`) fills `--tag-background`/`--line-colour` with that same colour and switches `--tag-foreground` to `--colour-foreground-reverse`, plus prefixes the label with a checkmark icon — except on a colour variant (see below), where checked keeps the variant's own colours and hover darkens them instead.
+
+---
+
+## Colour variants — `TagVariants` enum
+
+Apply `mx-tag--{variant}` for `info`, `success`, `warning`, `error`, or `featured`. Each variant fills `--tag-background` and sets the border/outline to match; foreground uses `--colour-foreground-reverse` (`featured` excepted, which stays dark-on-light).
+
+```tsx
+<Tag variant={TagVariants.INFO}>New</Tag>
+```
+
+`tags.twig` itself only prints pre-rendered `items` markup — `variant`, like `dismissible`, is applied per item when building that markup with `tag-item.twig`:
+
+```twig
+{{ include('@mixtape/Component/Tag/tag-item.twig', {
+  type: 'text',
+  item: 'New',
+  variant: 'info',
+}) }}
+```
+
+- A checked variant tag keeps its own colours (the solid fill and "checked" link colour swap only apply to non-variant tags) — it's already a solid fill. The checkmark icon on checked still applies.
+- The focus outline (`:has(input:focus)`) on a variant tag uses the variant's own colour instead of the standard blue.
+- Hovering a variant **link** tag darkens its background/border by 20% (via `color-mix`) rather than switching to the link hover colour; the text colour is unchanged. `featured` only darkens by 10% — it keeps dark text on its light background, so a smaller step protects contrast.
 
 ---
 

package/src/Component/Tag/Tag.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Tag"
 import "./tag.css"
 import { Page } from "../../../.storybook-react/decorators"
+import { TagVariants } from "../../enums"
 
 const meta: Meta<typeof Component> = {
   component: Component,
@@ -9,7 +10,30 @@ const meta: Meta<typeof Component> = {
   args: {
     children: "Tag name",
   },
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        labels: { undefined: "default" },
+      },
+      options: [undefined, ...Object.values(TagVariants)],
+    },
+  },
 }
 
 export default meta
 export const Tag: StoryObj<typeof meta> = {}
+
+const variantsListStyle = { display: "flex", gap: "1rem" }
+
+export const Variants: StoryObj<typeof meta> = {
+  render: args => (
+    <div style={variantsListStyle}>
+      {Object.values(TagVariants).map(variant => (
+        <Component key={variant} {...args} variant={variant}>
+          {variant}
+        </Component>
+      ))}
+    </div>
+  ),
+}

package/src/Component/Tag/Tag.tsx

@@ -1,10 +1,12 @@
 import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
-import { AsTags, Icons } from "../../enums"
+import { AsTags, Icons, TagVariants } from "../../enums"
 
 type TagProps = PropsWithChildren & {
   className?: string
   as?: AsTags
+  /** Colour variant. Defaults to the neutral, unstyled tag. */
+  variant?: TagVariants
   /**
    * When provided, renders a remove button. Called when the button is
    * activated — the consumer is responsible for removing the tag from state.
@@ -18,12 +20,20 @@ const Tag = ({
   children,
   className,
   as = AsTags.DIV,
+  variant,
   onRemove,
   removeLabel = "Remove",
 }: TagProps): JSX.Element => {
   const TagEl: JSX.ElementType = `${as}` as unknown as JSX.ElementType
   return (
-    <TagEl className={classNames("mx-tag", { "mx-tag--dismissible": onRemove }, className)}>
+    <TagEl
+      className={classNames(
+        "mx-tag",
+        { "mx-tag--dismissible": onRemove },
+        variant && `mx-tag--${variant}`,
+        className,
+      )}
+    >
       {children}
       {onRemove && (
         <button

package/src/Component/Tag/TagItem.stories.ts

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./tag-item.twig"
 import "./tag.css"
 import { TagTypes } from "@pnx-mixtape/ids-shape"
+import { TagVariants } from "../../enums"
 
 type TagItemType = {
   type: TagTypes
@@ -11,6 +12,7 @@ type TagItemType = {
     | { label: string; id: string; name: string; value: string; checked?: boolean }
   dismissible?: boolean
   removeLabel?: string
+  variant?: TagVariants
 }
 
 /**
@@ -49,6 +51,17 @@ const meta: Meta<TagItemType> = {
         "When true, plain (text) tags render a remove button. Wire up removal behaviour in the consuming app.",
       control: "boolean",
     },
+    variant: {
+      description: "Colour variant.",
+      control: {
+        type: "select",
+        labels: { undefined: "default" },
+      },
+      options: [undefined, ...Object.values(TagVariants)],
+      table: {
+        type: { summary: "enum" },
+      },
+    },
   },
   render: args => {
     return `<ul class="mx-tags">${Component({ ...args })}</ul>`
@@ -99,3 +112,15 @@ export const Checkbox: Story = {
     },
   },
 }
+
+/**
+ * Colour variants for conveying status or emphasis.
+ */
+export const Variants: Story = {
+  render: () => {
+    const items = Object.values(TagVariants)
+      .map(variant => Component({ type: TagTypes.TEXT, item: variant, variant }))
+      .join("")
+    return `<ul class="mx-tags">${items}</ul>`
+  },
+}