@nationalarchives/frontend 0.1.40 → 0.1.42

package/nationalarchives/components/card/fixtures.json

@@ -8,8 +8,7 @@
         "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with supertitle",
@@ -19,8 +18,7 @@
         "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "heading size",
@@ -30,8 +28,7 @@
         "headingSize": "xl",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "heading level",
@@ -40,8 +37,7 @@
         "headingLevel": 1,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading-s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading-s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with link",
@@ -51,8 +47,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with meta",
@@ -75,8 +70,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</div></li></ul><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</div></li></ul><p>Card body</p></div></div></div>"
     },
     {
       "name": "with text",
@@ -85,8 +79,7 @@
         "headingLevel": 3,
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with image",
@@ -99,8 +92,7 @@
         "imageHeight": 360,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with image and alternative sources",
@@ -119,8 +111,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with link and image",
@@ -134,8 +125,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with actions",
@@ -151,8 +141,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></div></div>"
     },
     {
       "name": "with a label",
@@ -162,8 +151,7 @@
         "label": "New",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with a contrast style",
@@ -173,8 +161,7 @@
         "body": "<p>Card body</p>",
         "style": "contrast"
       },
-      "html": "<div class=\"tna-card tna-card--contrast\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card tna-card--contrast\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with a accent style",
@@ -184,8 +171,7 @@
         "body": "<p>Card body</p>",
         "style": "accent"
       },
-      "html": "<div class=\"tna-card tna-card--accent\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card tna-card--accent\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with an unknown style",
@@ -195,8 +181,7 @@
         "body": "<p>Card body</p>",
         "style": "foobar"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with classes",
@@ -206,8 +191,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card card__test-class\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with attributes",
@@ -219,8 +203,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     }
   ]
 }

package/nationalarchives/components/checkboxes/analytics.js

@@ -0,0 +1,25 @@
+import { valueGetters } from "../../lib/analytics-helpers.mjs";
+
+export default [
+  {
+    scope: ".tna-checkboxes",
+    areaName: "checkboxes",
+    events: [
+      {
+        eventName: "toggle",
+        targetElement: ".tna-checkboxes__item input",
+        on: "change",
+        data: {
+          state: valueGetters.checked,
+          // eslint-disable-next-line no-unused-vars
+          value: ($el, $scope, event) => $el.parentNode.innerText,
+          // eslint-disable-next-line no-unused-vars
+          group: ($el, $scope, event) =>
+            $scope
+              .closest(".tna-form__group")
+              ?.querySelector(".tna-form__heading")?.innerText,
+        },
+      },
+    ],
+  },
+];

package/nationalarchives/components/checkboxes/checkboxes.css

@@ -1 +1 @@
-.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-checkboxes__item-label::before,.tna-template--high-contrast-theme .tna-checkboxes__item-label::after{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-checkboxes{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.tna-checkboxes__item{position:relative}.tna-checkboxes__item input{width:1px;height:1px;margin:0;padding:0;position:absolute;top:-1px;left:-1px;opacity:0}.tna-checkboxes__item-label{padding-left:3rem;display:block;line-height:2rem;cursor:pointer}.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{width:2rem;position:absolute;top:0;left:0;content:""}.tna-checkboxes__item-label::before{height:2rem;display:block;box-sizing:border-box;z-index:1;background-color:#fff;background-color:var(--input-background);border:1px #000 solid;border:1px var(--input-border) solid}.tna-checkboxes__item-label::after{width:1.25rem;height:.5rem;margin-top:-0.1875rem;display:none;top:1rem;left:1rem;z-index:2;border:0 #fff solid;border:0 var(--input-background) solid;border-width:0 0 .1875rem .1875rem;transform:translateX(-50%) translateY(-50%) rotate(-45deg)}.tna-checkboxes--small{gap:.5rem}.tna-checkboxes--small .tna-checkboxes__item-label{padding-left:2.25rem;line-height:1.5rem}.tna-checkboxes--small .tna-checkboxes__item-label::before{width:1.5rem;height:1.5rem}.tna-checkboxes--small .tna-checkboxes__item-label::after{width:.825rem;height:.375rem;margin-top:-0.125rem;top:.75rem;left:.75rem}.tna-checkboxes--inline{flex-flow:row wrap;align-items:center;gap:1rem 2rem}@media(max-width: 30em){.tna-checkboxes--inline{flex-direction:column;align-items:flex-start}}input:focus+.tna-checkboxes__item-label::before{outline:.3125rem #00b0ff solid;outline:.3125rem var(--focus-outline) solid;outline-offset:.125rem}input:checked+.tna-checkboxes__item-label::before{background-color:#000;background-color:var(--input-foreground)}input:checked+.tna-checkboxes__item-label::after{display:block}.tna-checkboxes--small .tna-checkboxes__item:hover .tna-checkboxes__item-label::before{box-shadow:0 0 0 .125rem var(--input-border)}/*# sourceMappingURL=checkboxes.css.map */
+.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-checkboxes__item-label::before,.tna-template--high-contrast-theme .tna-checkboxes__item-label::after{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-checkboxes{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.tna-checkboxes__item{position:relative}.tna-checkboxes__item input{width:1px;height:1px;margin:0;padding:0;position:absolute;top:-1px;left:-1px;opacity:0}.tna-checkboxes__item-label{padding-left:3rem;display:block;line-height:2rem;cursor:pointer}.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{width:2rem;position:absolute;top:0;left:0;content:""}.tna-checkboxes__item-label::before{height:2rem;display:block;box-sizing:border-box;z-index:1;background-color:#fff;background-color:var(--input-background);border:2px #000 solid;border:2px var(--input-border) solid;border-radius:.1px}.tna-checkboxes__item-label::after{width:1.25rem;height:.5rem;margin-top:-0.1875rem;display:none;top:1rem;left:1rem;z-index:2;border:0 #fff solid;border:0 var(--input-background) solid;border-width:0 0 .1875rem .1875rem;transform:translateX(-50%) translateY(-50%) rotate(-45deg)}.tna-checkboxes--small{gap:.5rem}.tna-checkboxes--small .tna-checkboxes__item-label{padding-left:2.25rem;line-height:1.5rem}.tna-checkboxes--small .tna-checkboxes__item-label::before{width:1.5rem;height:1.5rem}.tna-checkboxes--small .tna-checkboxes__item-label::after{width:.825rem;height:.375rem;margin-top:-0.125rem;top:.75rem;left:.75rem}.tna-checkboxes--inline{flex-flow:row wrap;align-items:center;gap:1rem 2rem}@media(max-width: 30em){.tna-checkboxes--inline{flex-direction:column;align-items:flex-start}}input:focus+.tna-checkboxes__item-label::before{outline:5px #00b0ff solid;outline:5px var(--focus-outline) solid;outline-offset:2px}input:checked+.tna-checkboxes__item-label::before{background-color:#000;background-color:var(--input-foreground)}input:checked+.tna-checkboxes__item-label::after{display:block}.tna-checkboxes--small .tna-checkboxes__item:hover .tna-checkboxes__item-label::before{box-shadow:0 0 0 .125rem var(--input-border)}/*# sourceMappingURL=checkboxes.css.map */

package/nationalarchives/components/checkboxes/checkboxes.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/checkboxes/checkboxes.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_a11y.scss"],"names":[],"mappings":"AAwJA,uEA9II,4hDAiJF,+BAHF,uEAlII,+9CAyIF,6IAzIE,89CCjBJ,gBACE,aACA,sBACA,uBACA,SAEA,sBACE,kBAEA,4BACE,UACA,WACA,SACA,UAEA,kBACA,SACA,UAEA,UAGF,4BACE,kBAEA,cAEA,iBAEA,eAEA,uEAEE,WAEA,kBACA,MACA,OAIA,WAGF,oCACE,YAEA,cACA,sBAEA,UD8BN,sBAEA,yCAgCI,sBAIA,qCC1DA,mCACE,cACA,aACA,sBAEA,aAEA,SACA,UACA,UD6CF,oBAIA,uCC9CE,mCAGA,2DAKN,uBACE,UAIA,mDACE,qBAEA,mBAEA,2DACE,aACA,cAGF,0DACE,cACA,eACA,qBAEA,WACA,YAKN,wBACE,mBACA,mBACA,cC/EF,wBD4EA,wBAMI,sBACA,wBAKF,gDDWA,+BAIA,4CGtIF,uBF6HE,kDD5CF,sBAEA,yCC8CE,iDACE,cAKF,uFACE","file":"checkboxes.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n  @each $name, $value in colour.$colour-palette-default {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-dark() {\n  @each $name, $value in colour.$colour-palette-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast() {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n\n.tna-checkboxes {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1rem;\n\n  &__item {\n    position: relative;\n\n    input {\n      width: 1px;\n      height: 1px;\n      margin: 0;\n      padding: 0;\n\n      position: absolute;\n      top: -1px;\n      left: -1px;\n\n      opacity: 0;\n    }\n\n    &-label {\n      padding-left: 3rem;\n\n      display: block;\n\n      line-height: 2rem;\n\n      cursor: pointer;\n\n      &::before,\n      &::after {\n        width: 2rem;\n\n        position: absolute;\n        top: 0;\n        left: 0;\n\n        @include colour.light;\n\n        content: \"\";\n      }\n\n      &::before {\n        height: 2rem;\n\n        display: block;\n        box-sizing: border-box;\n\n        z-index: 1;\n\n        @include colour.colour-background(\"input-background\");\n\n        @include colour.colour-border(\n          \"input-border\",\n          forms.$form-field-border-width\n        );\n      }\n\n      &::after {\n        width: 1.25rem;\n        height: 0.5rem;\n        margin-top: -0.1875rem;\n\n        display: none;\n\n        top: 1rem;\n        left: 1rem;\n        z-index: 2;\n\n        @include colour.colour-border(\"input-background\", 0, solid);\n        border-width: 0 0 forms.$checkbox-checkmark-width\n          forms.$checkbox-checkmark-width;\n\n        transform: translateX(-50%) translateY(-50%) rotate(-45deg);\n      }\n    }\n  }\n\n  &--small {\n    gap: 0.5rem;\n  }\n\n  &--small &__item {\n    &-label {\n      padding-left: 2.25rem;\n\n      line-height: 1.5rem;\n\n      &::before {\n        width: 1.5rem;\n        height: 1.5rem;\n      }\n\n      &::after {\n        width: 0.825rem;\n        height: 0.375rem;\n        margin-top: -0.125rem;\n\n        top: 0.75rem;\n        left: 0.75rem;\n      }\n    }\n  }\n\n  &--inline {\n    flex-flow: row wrap;\n    align-items: center;\n    gap: 1rem 2rem;\n\n    @include media.on-tiny {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n\n  input:focus + &__item-label {\n    &::before {\n      @include a11y.focus-outline;\n    }\n  }\n\n  input:checked + &__item-label {\n    &::before {\n      @include colour.colour-background(\"input-foreground\");\n    }\n\n    &::after {\n      display: block;\n    }\n  }\n\n  &--small &__item:hover &__item-label {\n    &::before {\n      box-shadow: 0 0 0 0.125rem var(--input-border);\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n","@use \"colour\";\n\n@mixin focus-outline {\n  @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n  outline-offset: 0.125rem;\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/checkboxes/checkboxes.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_a11y.scss"],"names":[],"mappings":"AAiKA,uEArJM,ygDAwJJ,+BAHF,uEArIM,48CA4IJ,6IA5II,28CCvBN,gBACE,aACA,sBACA,uBACA,SAEA,sBACE,kBAEA,4BACE,UACA,WACA,SACA,UAEA,kBACA,SACA,UAEA,UAGF,4BACE,kBAEA,cAEA,iBAEA,eAEA,uEAEE,WAEA,kBACA,MACA,OAIA,WAGF,oCACE,YAEA,cACA,sBAEA,UDuCN,sBAEA,yCAgCI,sBAIA,qCCrEE,mBAGF,mCACE,cACA,aACA,sBAEA,aAEA,SACA,UACA,UDqDF,oBAIA,uCCtDE,mCAGA,2DAKN,uBACE,UAIA,mDACE,qBAEA,mBAEA,2DACE,aACA,cAGF,0DACE,cACA,eACA,qBAEA,WACA,YAKN,wBACE,mBACA,mBACA,cChFF,wBD6EA,wBAMI,sBACA,wBAKF,gDDmBA,0BAIA,uCG/IF,mBF8HE,kDDpCF,sBAEA,yCCsCE,iDACE,cAKF,uFACE","file":"checkboxes.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n\n.tna-checkboxes {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1rem;\n\n  &__item {\n    position: relative;\n\n    input {\n      width: 1px;\n      height: 1px;\n      margin: 0;\n      padding: 0;\n\n      position: absolute;\n      top: -1px;\n      left: -1px;\n\n      opacity: 0;\n    }\n\n    &-label {\n      padding-left: 3rem;\n\n      display: block;\n\n      line-height: 2rem;\n\n      cursor: pointer;\n\n      &::before,\n      &::after {\n        width: 2rem;\n\n        position: absolute;\n        top: 0;\n        left: 0;\n\n        @include colour.light;\n\n        content: \"\";\n      }\n\n      &::before {\n        height: 2rem;\n\n        display: block;\n        box-sizing: border-box;\n\n        z-index: 1;\n\n        @include colour.colour-background(\"input-background\");\n\n        @include colour.colour-border(\n          \"input-border\",\n          forms.$form-field-border-width\n        );\n        border-radius: 0.1px;\n      }\n\n      &::after {\n        width: 1.25rem;\n        height: 0.5rem;\n        margin-top: -0.1875rem;\n\n        display: none;\n\n        top: 1rem;\n        left: 1rem;\n        z-index: 2;\n\n        @include colour.colour-border(\"input-background\", 0, solid);\n        border-width: 0 0 forms.$checkbox-checkmark-width\n          forms.$checkbox-checkmark-width;\n\n        transform: translateX(-50%) translateY(-50%) rotate(-45deg);\n      }\n    }\n  }\n\n  &--small {\n    gap: 0.5rem;\n  }\n\n  &--small &__item {\n    &-label {\n      padding-left: 2.25rem;\n\n      line-height: 1.5rem;\n\n      &::before {\n        width: 1.5rem;\n        height: 1.5rem;\n      }\n\n      &::after {\n        width: 0.825rem;\n        height: 0.375rem;\n        margin-top: -0.125rem;\n\n        top: 0.75rem;\n        left: 0.75rem;\n      }\n    }\n  }\n\n  &--inline {\n    flex-flow: row wrap;\n    align-items: center;\n    gap: 1rem 2rem;\n\n    @include media.on-tiny {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n\n  input:focus + &__item-label {\n    &::before {\n      @include a11y.focus-outline;\n    }\n  }\n\n  input:checked + &__item-label {\n    &::before {\n      @include colour.colour-background(\"input-foreground\");\n    }\n\n    &::after {\n      display: block;\n    }\n  }\n\n  &--small &__item:hover &__item-label {\n    &::before {\n      box-shadow: 0 0 0 0.125rem var(--input-border);\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n","@use \"colour\";\n\n@mixin focus-outline {\n  @include colour.colour-outline(\"focus-outline\", 5px, solid);\n  outline-offset: 2px;\n}\n"]}

package/nationalarchives/components/checkboxes/checkboxes.njk

@@ -0,0 +1,12 @@
+{% macro tnaCheckboxesElement(params, extraAttributes) %}
+  <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+    {%- for item in params.items %}
+    <div class="tna-checkboxes__item">
+      <input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
+      <label for="{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
+        {{ item.text }}
+      </label>
+    </div>
+    {%- endfor %}
+  </div>
+{% endmacro %}

package/nationalarchives/components/checkboxes/checkboxes.scss

@@ -61,6 +61,7 @@
           "input-border",
           forms.$form-field-border-width
         );
+        border-radius: 0.1px;
       }
 
       &::after {

package/nationalarchives/components/checkboxes/fixtures.json

@@ -24,8 +24,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"tna-form__categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-beta\" value=\"beta\" name=\"categories\"><label for=\"tna-form__categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"tna-form__categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "small checkboxes",
@@ -79,8 +78,7 @@
         ],
         "small": true
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"tna-form__categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"tna-form__categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-BT\" value=\"BT\" name=\"categories\"><label for=\"tna-form__categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-C\" value=\"C\" name=\"categories\"><label for=\"tna-form__categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-CO\" value=\"CO\" name=\"categories\"><label for=\"tna-form__categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-E\" value=\"E\" name=\"categories\"><label for=\"tna-form__categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-FO\" value=\"FO\" name=\"categories\"><label for=\"tna-form__categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-HO\" value=\"HO\" name=\"categories\"><label for=\"tna-form__categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"tna-form__categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-WO\" value=\"WO\" name=\"categories\"><label for=\"tna-form__categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-BT\" value=\"BT\" name=\"categories\"><label for=\"categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-C\" value=\"C\" name=\"categories\"><label for=\"categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-CO\" value=\"CO\" name=\"categories\"><label for=\"categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-E\" value=\"E\" name=\"categories\"><label for=\"categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-FO\" value=\"FO\" name=\"categories\"><label for=\"categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-HO\" value=\"HO\" name=\"categories\"><label for=\"categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-WO\" value=\"WO\" name=\"categories\"><label for=\"categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
     },
     {
       "name": "checkboxes with a preselected value",
@@ -106,8 +104,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"tna-form__categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"tna-form__categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"tna-form__categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "checkboxes with a hint",
@@ -133,8 +130,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"tna-form__categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"tna-form__categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"tna-form__categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-beta\" value=\"beta\" name=\"categories\"><label for=\"tna-form__categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"tna-form__categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "checkboxes with an error",
@@ -162,8 +158,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" tna-form__categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"tna-form__categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"tna-form__categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-beta\" value=\"beta\" name=\"categories\"><label for=\"tna-form__categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"tna-form__categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "inline checkboxes",
@@ -189,8 +184,7 @@
         ],
         "inline": true
       },
-      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small tna-checkboxes--inline\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"tna-form__categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-beta\" value=\"beta\" name=\"categories\"><label for=\"tna-form__categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"tna-form__categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"tna-form__categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small tna-checkboxes--inline\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     }
   ]
 }

package/nationalarchives/components/checkboxes/template.njk

@@ -1,33 +1,36 @@
+{% from "nationalarchives/components/checkboxes/checkboxes.njk" import tnaCheckboxesElement %}
+
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
 <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}>
+  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
       </h{{ params.headingLevel }}>
     </legend>
     {%- if params.hint %}
-    <p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
+    <p id="{{ params.id }}-hint" class="tna-form__hint">
       {{ params.hint }}
     </p>
     {%- endif %}
     {%- if params.error %}
-    <p id="tna-form__{{ params.id }}-error" class="tna-form__error-message">
+    <p id="{{ params.id }}-error" class="tna-form__error-message">
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
-    <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+    {{ tnaCheckboxesElement(params) }}
+    {# <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
       {%- for item in params.items %}
       <div class="tna-checkboxes__item">
-        <input type="checkbox" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
-        <label for="tna-form__{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
+        <input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
+        <label for="{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
           {{ item.text }}
         </label>
       </div>
       {%- endfor %}
-    </div>
+    </div> #}
   </fieldset>
 </div>

package/nationalarchives/components/compound-filters/compound-filters.css

@@ -1 +1 @@
-.tna-compound-filters__link:hover{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-compound-filters{margin-top:2rem}.tna-compound-filters:first-child{margin-top:0}.tna-compound-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}.tna-compound-filters__item{padding:0 .125rem 0 .75rem;display:flex;gap:.5rem;align-items:center;font-size:1rem;line-height:1.75;border:1px rgb(38 38 42/0.25) solid;border:1px var(--keyline) solid;border-radius:1rem}.tna-compound-filters__item--remove{padding-right:0;padding-left:0;background:none;border:none;border-radius:0}.tna-compound-filters__link{width:1.5rem;height:1.5rem;position:relative;text-decoration:none;font-size:0;line-height:0;border-radius:100%}.tna-compound-filters__link::before,.tna-compound-filters__link::after{width:2px;height:1rem;margin-left:-1px;display:block;position:absolute;top:.25rem;left:50%;background-color:#343338;background-color:var(--font-base);content:""}.tna-compound-filters__link::before{transform:rotate(45deg)}.tna-compound-filters__link::after{transform:rotate(-45deg)}/*# sourceMappingURL=compound-filters.css.map */
+.tna-compound-filters__link:hover{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-compound-filters{margin-top:2rem}.tna-compound-filters:first-child{margin-top:0}.tna-compound-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;list-style:none}.tna-compound-filters__item{padding:0 .125rem 0 .75rem;display:flex;gap:.5rem;align-items:center;font-size:1rem;line-height:1.75;border:1px rgb(38 38 42/0.25) solid;border:1px var(--keyline) solid;border-radius:1rem}.tna-compound-filters__item--remove{padding-right:0;padding-left:0;background:none;border:none;border-radius:0}.tna-compound-filters__link{width:1.5rem;height:1.5rem;position:relative;text-decoration:none;font-size:0;line-height:0;border-radius:100%}.tna-compound-filters__link::before,.tna-compound-filters__link::after{width:2px;height:1rem;margin-left:-1px;display:block;position:absolute;top:.25rem;left:50%;background-color:#343338;background-color:var(--font-base);content:""}.tna-compound-filters__link::before{transform:rotate(45deg)}.tna-compound-filters__link::after{transform:rotate(-45deg)}/*# sourceMappingURL=compound-filters.css.map */