@nationalarchives/frontend 0.32.0 → 0.33.1

package/nationalarchives/components/pagination/fixtures.json

@@ -40,35 +40,49 @@
           "href": "#next"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg>Next</a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
     },
     {
-      "name": "no numbers",
+      "name": "simple with no numbers",
       "options": {
         "previous": {
-          "href": "#previous",
-          "title": "Previous page"
+          "href": "#previous"
         },
         "next": {
-          "href": "#next",
-          "title": "Next page"
+          "href": "#next"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" aria-label=\"Previous page\" title=\"Previous page\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg>Previous</a></div><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" aria-label=\"Next page\" title=\"Next page\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg>Next</a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
     },
     {
-      "name": "custom next and previous text",
+      "name": "custom next and previous text and title",
       "options": {
         "previous": {
           "text": "Backwards",
-          "href": "#backwards"
+          "href": "#backwards",
+          "title": "Previous page"
         },
         "next": {
           "text": "Forwards",
-          "href": "#forwards"
+          "href": "#forwards",
+          "title": "Next page"
+        }
+      },
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#backwards\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" aria-label=\"Previous page\" title=\"Previous page\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Backwards</span></span></a></div><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#forwards\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" aria-label=\"Next page\" title=\"Next page\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Forwards</span></span></a></div></nav>"
+    },
+    {
+      "name": "no numbers and prev/next descriptions",
+      "options": {
+        "previous": {
+          "href": "#previous",
+          "description": "Previous item description"
+        },
+        "next": {
+          "href": "#next",
+          "description": "Next item description"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#backwards\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg>Backwards</a></div><div class=\"tna-pagination__next\"><a href=\"#forwards\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg>Forwards</a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span><span class=\"tna-pagination__prev-next-button-description\">Previous item description</span></span></a></div><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span><span class=\"tna-pagination__prev-next-button-description\">Next item description</span></span></a></div></nav>"
     },
     {
       "name": "with classes",
@@ -110,7 +124,7 @@
         },
         "classes": "pagination__test-class"
       },
-      "html": "<nav class=\"tna-pagination pagination__test-class\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg>Next</a></div></nav>"
+      "html": "<nav class=\"tna-pagination pagination__test-class\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
     },
     {
       "name": "with attributes",
@@ -154,7 +168,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\" data-testattribute=\"foobar\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg>Next</a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\" data-testattribute=\"foobar\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\"/></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
     }
   ]
 }

package/nationalarchives/components/pagination/macro-options.json

@@ -23,6 +23,12 @@
         "type": "string",
         "required": false,
         "description": "An optional title attribute for the previous button."
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "required": false,
+        "description": "An optional description to show below the previous button text."
       }
     ]
   },
@@ -82,6 +88,12 @@
         "type": "string",
         "required": false,
         "description": "An optional title attribute for the next button."
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "required": false,
+        "description": "An optional description to show below the next button text."
       }
     ]
   },
@@ -92,24 +104,6 @@
     "description": "An optional label for the pagination region.",
     "default": "Pagination"
   },
-  {
-    "name": "currentItemText",
-    "type": "string",
-    "required": false,
-    "description": "If no `items` are provided, this text will be used to indicate the current page."
-  },
-  {
-    "name": "solid",
-    "type": "boolean",
-    "required": false,
-    "description": "If `true`, use a solid background for the pagination buttons."
-  },
-  {
-    "name": "spaced",
-    "type": "boolean",
-    "required": false,
-    "description": "If `true`, add spacing between the pagination buttons and align the previous and next buttons to the extreme left and right of the component respectively."
-  },
   {
     "name": "classes",
     "type": "string",

package/nationalarchives/components/pagination/pagination.css

@@ -1 +1 @@
-.tna-pagination{margin-top:32px}.tna-pagination:first-child{margin-top:0}.tna-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px}.tna-pagination--spaced{justify-content:space-between}.tna-pagination__link{min-width:1.5rem;padding-right:8px;padding-left:8px}.tna-pagination__icon{display:inline-block}.tna-pagination__icon path{fill:currentColor}.tna-pagination__icon--prev{margin-left:8px}.tna-pagination__icon--next{margin-right:8px}.tna-pagination__link-title{padding-right:8px;padding-left:8px}.tna-pagination__list{margin:0;padding:0;display:flex;align-items:center;gap:4px;list-style:none}.tna-pagination__item--ellipses{min-width:2rem;padding:8px;text-align:center}.tna-pagination__current-item-text{margin-top:0;font-weight:600}@media(max-width: 48em){.tna-pagination{flex-direction:column}}@media(max-width: 30em){.tna-pagination__item{display:none}.tna-pagination__item:first-child,.tna-pagination__item:last-child,.tna-pagination__item--current,.tna-pagination__item--ellipses{display:block}}/*# sourceMappingURL=pagination.css.map */
+.tna-pagination{margin-top:2rem}.tna-pagination:first-child{margin-top:0}.tna-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}.tna-pagination:not(:has(.tna-pagination__list)){flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:2rem}.tna-pagination__prev-next--prev{text-align:left}.tna-pagination__prev-next--next{text-align:right}.tna-pagination__prev-next-button{text-align:inherit;text-wrap:wrap}.tna-pagination__prev-next-button-text{display:block}.tna-pagination__prev-next-button-title{display:block}.tna-pagination__prev-next-button-description{padding-bottom:0.25rem;display:block;line-height:1.25;font-size:1rem}.tna-pagination__prev-next-button:has(.tna-pagination__prev-next-button-description) svg{margin-top:.35em;align-self:flex-start}:has(.tna-pagination__prev-next-button-description) .tna-pagination__prev-next-button-title{font-weight:700}.tna-pagination:not(:has(.tna-pagination__list)) .tna-pagination__prev-next{flex:1}.tna-pagination:not(:has(.tna-pagination__list)) .tna-pagination__prev-next-button{padding:0;border-width:0}.tna-pagination:not(:has(.tna-pagination__list)) .tna-pagination__prev-next-button-title{font-weight:700}.tna-pagination__link{min-width:1.5rem;padding-right:0.5rem;padding-left:0.5rem}.tna-pagination__list{margin:0;padding:0;display:flex;align-items:center;gap:0.25rem;list-style:none}.tna-pagination__item--ellipses{min-width:2rem;padding:0.5rem;text-align:center}@media(max-width: 48em){.tna-pagination{flex-direction:column;gap:0.5rem}.tna-pagination:not(:has(.tna-pagination__list)){align-items:flex-start;gap:1rem}.tna-pagination:not(:has(.tna-pagination__list)) .tna-pagination__prev-next--next{text-align:left}.tna-pagination:not(:has(.tna-pagination__list)) .tna-pagination__prev-next-button--next{flex-direction:row}}@media(max-width: 30em){.tna-pagination:has(.tna-pagination__list) .tna-pagination__item:not(:is(.tna-pagination:has(.tna-pagination__list) .tna-pagination__item:first-child,.tna-pagination:has(.tna-pagination__list) .tna-pagination__item:last-child,.tna-pagination:has(.tna-pagination__list) .tna-pagination__item--current,.tna-pagination:has(.tna-pagination__list) .tna-pagination__item--ellipses)){display:none}}/*# sourceMappingURL=pagination.css.map */

package/nationalarchives/components/pagination/pagination.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/pagination/pagination.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAUA,gBACE,gBAEA,4BACE,aCRJ,gBACE,aACA,eACA,mBACA,uBACA,SAIA,wBACE,8BASF,sBACE,iBACA,kBACA,iBAGF,sBACE,qBAEA,2BACE,kBAGF,4BACE,gBAGF,4BACE,iBAIJ,4BACE,kBACA,iBAGF,sBACE,SACA,UAEA,aACA,mBACA,QAEA,gBAIA,gCACE,eACA,YAEA,kBAYJ,mCACE,aC9DF,YCoBwB,IC2CxB,wBH5EF,gBAiFI,uBG7BF,wBHiCE,sBACE,aAEA,kIAIE","file":"pagination.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n  @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n  margin-top: space(2);\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n%space-only-above {\n  margin: #{space(2)} 0 0;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{space($amount)} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{space($amount)} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: spacing.space(1);\n\n  @include spacing.space-above;\n\n  &--spaced {\n    justify-content: space-between;\n  }\n\n  &__prev {\n  }\n\n  &__next {\n  }\n\n  &__link {\n    min-width: 1.5rem;\n    padding-right: spacing.space(0.5);\n    padding-left: spacing.space(0.5);\n  }\n\n  &__icon {\n    display: inline-block;\n\n    path {\n      fill: currentColor;\n    }\n\n    &--prev {\n      margin-left: spacing.space(0.5);\n    }\n\n    &--next {\n      margin-right: spacing.space(0.5);\n    }\n  }\n\n  &__link-title {\n    padding-right: spacing.space(0.5);\n    padding-left: spacing.space(0.5);\n  }\n\n  &__list {\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    align-items: center;\n    gap: spacing.space(0.25);\n\n    list-style: none;\n  }\n\n  &__item {\n    &--ellipses {\n      min-width: 2rem;\n      padding: spacing.space(0.5);\n\n      text-align: center;\n    }\n\n    &--current {\n    }\n  }\n\n  &__item--current &__link {\n    .tna-background-accent & {\n    }\n  }\n\n  &__current-item-text {\n    margin-top: 0;\n\n    @include typography.main-font-weight-medium;\n  }\n\n  @include media.on-mobile {\n    flex-direction: column;\n  }\n\n  @include media.on-tiny {\n    &__item {\n      display: none;\n\n      &:first-child,\n      &:last-child,\n      &--current,\n      &--ellipses {\n        display: block;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n  text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/pagination/pagination.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA0BA,gBACE,gBAUA,4BACE,aChCJ,gBACE,aACA,eACA,mBACA,uBACA,SAIA,iDACE,iBACA,uBACA,8BACA,SAIA,iCACE,gBAGF,iCACE,iBAGF,kCACE,mBACA,eAQA,uCACE,cAGF,wCACE,cAGF,8CACE,uBAEA,cAEA,iBChDN,eDqDM,yFACE,iBAEA,sBAMR,4FC7CA,YCiBsB,IFgCtB,4EACE,OAEA,mFACE,UAEA,eAEA,yFCzDJ,YCiBsB,IF8CtB,sBACE,iBACA,qBACA,oBAGF,sBACE,SACA,UAEA,aACA,mBACA,YAEA,gBAIA,gCACE,eACA,eAEA,kBG1BJ,wBH5EF,gBA8GI,sBACA,WAEA,iDACE,uBACA,SAIA,kFACE,gBAIA,yFACE,oBGzER,wBHiFI,yXACE","file":"pagination.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/*\n * ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n */\n@function space($size) {\n  // @return #{$size * spacing.$spacing-unit-px}px;\n  @return #{$size}rem;\n}\n\n%space-above {\n  margin-top: space(2);\n  @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n  margin: #{space(2)} 0 0;\n  @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{space($amount)} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{space($amount)} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: spacing.space(1);\n\n  @include spacing.space-above;\n\n  &:not(:has(&__list)) {\n    flex-wrap: nowrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: spacing.space(2);\n  }\n\n  &__prev-next {\n    &--prev {\n      text-align: left;\n    }\n\n    &--next {\n      text-align: right;\n    }\n\n    &-button {\n      text-align: inherit;\n      text-wrap: wrap;\n\n      &--prev {\n      }\n\n      &--next {\n      }\n\n      &-text {\n        display: block;\n      }\n\n      &-title {\n        display: block;\n      }\n\n      &-description {\n        padding-bottom: spacing.space(0.25);\n\n        display: block;\n\n        line-height: 1.25;\n        @include typography.font-size(16);\n      }\n\n      &:has(&-description) {\n        svg {\n          margin-top: 0.35em;\n\n          align-self: flex-start;\n        }\n      }\n    }\n  }\n\n  :has(&__prev-next-button-description) &__prev-next-button-title {\n    @include typography.main-font-weight-bold;\n  }\n\n  &:not(:has(&__list)) &__prev-next {\n    flex: 1;\n\n    &-button {\n      padding: 0;\n\n      border-width: 0;\n\n      &-title {\n        @include typography.main-font-weight-bold;\n      }\n    }\n  }\n\n  &__link {\n    min-width: 1.5rem;\n    padding-right: spacing.space(0.5);\n    padding-left: spacing.space(0.5);\n  }\n\n  &__list {\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    align-items: center;\n    gap: spacing.space(0.25);\n\n    list-style: none;\n  }\n\n  &__item {\n    &--ellipses {\n      min-width: 2rem;\n      padding: spacing.space(0.5);\n\n      text-align: center;\n    }\n\n    &--current {\n    }\n  }\n\n  @include media.on-mobile {\n    flex-direction: column;\n    gap: spacing.space(0.5);\n\n    &:not(:has(&__list)) {\n      align-items: flex-start;\n      gap: spacing.space(1);\n    }\n\n    &:not(:has(&__list)) &__prev-next {\n      &--next {\n        text-align: left;\n      }\n\n      &-button {\n        &--next {\n          flex-direction: row;\n        }\n      }\n    }\n  }\n\n  @include media.on-tiny {\n    &:has(&__list) &__item {\n      &:not(:is(&:first-child, &:last-child, &--current, &--ellipses)) {\n        display: none;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n  text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}

package/nationalarchives/components/pagination/pagination.scss

@@ -13,39 +13,79 @@
 
   @include spacing.space-above;
 
-  &--spaced {
+  &:not(:has(&__list)) {
+    flex-wrap: nowrap;
+    align-items: flex-start;
     justify-content: space-between;
+    gap: spacing.space(2);
   }
 
-  &__prev {
-  }
+  &__prev-next {
+    &--prev {
+      text-align: left;
+    }
+
+    &--next {
+      text-align: right;
+    }
+
+    &-button {
+      text-align: inherit;
+      text-wrap: wrap;
 
-  &__next {
+      &--prev {
+      }
+
+      &--next {
+      }
+
+      &-text {
+        display: block;
+      }
+
+      &-title {
+        display: block;
+      }
+
+      &-description {
+        padding-bottom: spacing.space(0.25);
+
+        display: block;
+
+        line-height: 1.25;
+        @include typography.font-size(16);
+      }
+
+      &:has(&-description) {
+        svg {
+          margin-top: 0.35em;
+
+          align-self: flex-start;
+        }
+      }
+    }
   }
 
-  &__link {
-    min-width: 1.5rem;
-    padding-right: spacing.space(0.5);
-    padding-left: spacing.space(0.5);
+  :has(&__prev-next-button-description) &__prev-next-button-title {
+    @include typography.main-font-weight-bold;
   }
 
-  &__icon {
-    display: inline-block;
+  &:not(:has(&__list)) &__prev-next {
+    flex: 1;
 
-    path {
-      fill: currentColor;
-    }
+    &-button {
+      padding: 0;
 
-    &--prev {
-      margin-left: spacing.space(0.5);
-    }
+      border-width: 0;
 
-    &--next {
-      margin-right: spacing.space(0.5);
+      &-title {
+        @include typography.main-font-weight-bold;
+      }
     }
   }
 
-  &__link-title {
+  &__link {
+    min-width: 1.5rem;
     padding-right: spacing.space(0.5);
     padding-left: spacing.space(0.5);
   }
@@ -73,30 +113,32 @@
     }
   }
 
-  &__item--current &__link {
-    .tna-background-accent & {
-    }
-  }
+  @include media.on-mobile {
+    flex-direction: column;
+    gap: spacing.space(0.5);
 
-  &__current-item-text {
-    margin-top: 0;
+    &:not(:has(&__list)) {
+      align-items: flex-start;
+      gap: spacing.space(1);
+    }
 
-    @include typography.main-font-weight-medium;
-  }
+    &:not(:has(&__list)) &__prev-next {
+      &--next {
+        text-align: left;
+      }
 
-  @include media.on-mobile {
-    flex-direction: column;
+      &-button {
+        &--next {
+          flex-direction: row;
+        }
+      }
+    }
   }
 
   @include media.on-tiny {
-    &__item {
-      display: none;
-
-      &:first-child,
-      &:last-child,
-      &--current,
-      &--ellipses {
-        display: block;
+    &:has(&__list) &__item {
+      &:not(:is(&:first-child, &:last-child, &--current, &--ellipses)) {
+        display: none;
       }
     }
   }

package/nationalarchives/components/pagination/template.njk

@@ -1,19 +1,17 @@
 {% from "nationalarchives/components/button/macro.njk" import tnaButton %}
 
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- if params.spaced -%}
-  {%- set containerClasses = containerClasses.concat('tna-pagination--spaced') -%}
-{%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <nav class="tna-pagination{% if classes %} {{ classes }}{% endif %}" aria-label="{{ params.landmarkLabel if params.landmarkLabel else 'Pagination' }}" {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
   {% if params.previous -%}
-  <div class="tna-pagination__prev">
+  <div class="tna-pagination__prev-next tna-pagination__prev-next--prev">
     {{ tnaButton({
-      text: params.previous.text if params.previous.text else 'Previous',
+      html: '<span class="tna-pagination__prev-next-button-text"><span class="tna-pagination__prev-next-button-title">' ~ (params.previous.text if params.previous.text else 'Previous') ~ '</span>' ~ ('<span class="tna-pagination__prev-next-button-description">' ~ params.previous.description ~ '</span>' if params.previous.description else '') ~ '</span>',
       href: params.previous.href,
       title: params.previous.title,
       iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z"/></svg>',
-      plain: not params.solid,
+      plain: true,
+      classes: 'tna-pagination__prev-next-button tna-pagination__prev-next-button--prev',
       attributes: {
         rel: 'prev'
       }
@@ -31,8 +29,7 @@
           text: item.number,
           href: item.href,
           title: 'Page ' ~ item.number,
-          accent: params.solid and item.current,
-          plain: not params.solid and not item.current,
+          plain: not item.current,
           classes: 'tna-pagination__link',
           attributes: { 'aria-current': 'page' } if item.current else {}
         }) }}
@@ -44,14 +41,14 @@
     <p class="tna-pagination__current-item-text">{{ params.currentItemText }}</p>
   {% endif -%}
   {% if params.next -%}
-  <div class="tna-pagination__next">
+  <div class="tna-pagination__prev-next tna-pagination__prev-next--next">
     {{ tnaButton({
-      text: params.next.text if params.next.text else 'Next',
+      html: '<span class="tna-pagination__prev-next-button-text"><span class="tna-pagination__prev-next-button-title">' ~ (params.next.text if params.next.text else 'Next') ~ '</span>' ~ ('<span class="tna-pagination__prev-next-button-description">' ~ params.next.description ~ '</span>' if params.next.description else '') ~ '</span>',
       href: params.next.href,
       title: params.next.title,
       iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></svg>',
-      plain: not params.solid,
-      classes: 'tna-button--icon-right',
+      plain: true,
+      classes: 'tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right',
       attributes: {
         rel: 'next'
       }

package/nationalarchives/components/panel/panel.css

@@ -1 +1 @@
-.tna-panel{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-panel{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-icon-light: rgba(255, 255, 255, 0.7) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important;--button-accented-text: rgb(255, 255, 255) !important}.tna-panel{--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--accent-border: rgb(134, 188, 37) !important;--button-accented-background: rgb(0, 98, 59) !important}.tna-panel{padding:32px;text-align:center}.tna-panel__content{margin-top:16px;font-size:1.375rem}.tna-panel__content p+p{margin-top:8px}@media(max-width: 48em){.tna-panel{padding:16px}.tna-panel__content{font-size:1.125rem}}/*# sourceMappingURL=panel.css.map */
+.tna-panel{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-panel{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-icon-light: rgba(255, 255, 255, 0.7) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important;--button-accented-text: rgb(255, 255, 255) !important}.tna-panel{--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--accent-border: rgb(134, 188, 37) !important;--button-accented-background: rgb(0, 98, 59) !important}.tna-panel{padding:2rem;text-align:center}.tna-panel__content{margin-top:1rem;font-size:1.375rem}.tna-panel__content p+p{margin-top:0.5rem}@media(max-width: 48em){.tna-panel{padding:1rem}.tna-panel__content{font-size:1.125rem}}/*# sourceMappingURL=panel.css.map */