@nationalarchives/frontend 0.37.0 → 0.38.0

package/nationalarchives/components/text-input/text-input.mjs

@@ -1,38 +1,37 @@
-export class TextInput {
+export class TextInputPassword {
   constructor($module) {
     this.$module = $module;
     this.$input = $module && $module.querySelector(".tna-text-input");
 
-    if (!this.$module || !this.$input) {
+    if (
+      !this.$module ||
+      !this.$input ||
+      this.$input.getAttribute("type") !== "password"
+    ) {
       return;
     }
 
-    if (this.$input.getAttribute("type") === "password") {
-      this.$textInputWrapper = document.createElement("div");
-      this.$textInputWrapper.classList.add("tna-text-input-wrapper");
+    this.$textInputWrapper = document.createElement("div");
+    this.$textInputWrapper.classList.add("tna-text-input-wrapper");
 
-      this.$textInputPasswordToggle = document.createElement("button");
-      this.$textInputPasswordToggle.setAttribute("type", "button");
-      this.$textInputPasswordToggle.classList.add(
-        "tna-button",
-        "tna-button--small",
-        "tna-button--icon-only",
-      );
-      this.$textInputPasswordToggle.setAttribute(
-        "aria-controls",
-        this.$input.id,
-      );
-      this.updateTogglePasswordButtonText();
+    this.$textInputPasswordToggle = document.createElement("button");
+    this.$textInputPasswordToggle.setAttribute("type", "button");
+    this.$textInputPasswordToggle.classList.add(
+      "tna-button",
+      "tna-button--small",
+      "tna-button--icon-only",
+    );
+    this.$textInputPasswordToggle.setAttribute("aria-controls", this.$input.id);
+    this.updateTogglePasswordButtonText();
 
-      this.$textInputWrapper.appendChild(this.$input);
-      this.$textInputWrapper.appendChild(this.$textInputPasswordToggle);
-      this.$module.appendChild(this.$textInputWrapper);
+    this.$textInputWrapper.appendChild(this.$input);
+    this.$textInputWrapper.appendChild(this.$textInputPasswordToggle);
+    this.$module.appendChild(this.$textInputWrapper);
 
-      this.$textInputPasswordToggle.addEventListener("click", () => {
-        this.togglePasswordType();
-        this.$input.focus();
-      });
-    }
+    this.$textInputPasswordToggle.addEventListener("click", () => {
+      this.togglePasswordType();
+      this.$input.focus();
+    });
   }
 
   togglePasswordType() {

package/nationalarchives/components/textarea/_index.scss

@@ -1,2 +1,5 @@
 @use "../../utilities/forms";
 @use "textarea";
+@use "../button";
+@use "../compound-filters";
+@use "../text-input";

package/nationalarchives/components/textarea/fixtures.json

@@ -112,6 +112,17 @@
       },
       "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><h4 class=\"tna-form-item__label tna-heading-m\"><label for=\"feedback\">Enter your feedback</label></h4></div><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div></div>"
     },
+    {
+      "name": "itemised rows",
+      "options": {
+        "label": "Enter your feedback",
+        "headingSize": "m",
+        "id": "feedback",
+        "name": "feedback",
+        "itemiseRows": true
+      },
+      "html": "<div class=\"tna-form-item\" data-module=\"tna-textarea-itemised-rows\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div></div>"
+    },
     {
       "name": "with classes",
       "options": {

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

@@ -90,6 +90,13 @@
     "description": "Set the number of visible text lines for the textarea. A scrollbar will appear if the content exceeds the height.",
     "default": 5
   },
+  {
+    "name": "itemiseRows",
+    "type": "boolean",
+    "required": false,
+    "description": "If `true`, when JavaScript is available, parse each row of the textarea content into a list of items.",
+    "default": false
+  },
   {
     "name": "formItemClasses",
     "type": "string",

package/nationalarchives/components/textarea/template.njk

@@ -9,7 +9,7 @@
   error: params.error,
   classes: params.formItemClasses,
   attributes: params.formItemAttributes
-}) %}
+}, 'tna-textarea-itemised-rows' if params.itemiseRows else '') %}
   <textarea id="{{ params.id }}" class="tna-textarea{% if params.size %} tna-textarea--{{ params.size }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" name="{{ params.name }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}" autocapitalize="{{ params.autocapitalize if params.autocapitalize else 'off' }}" autocorrect="{{ 'on' if params.autocorrect else 'off' }}" rows="{{ params.rows if params.rows else 5 }}"
   {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.value }}</textarea>

package/nationalarchives/components/textarea/textarea.css

@@ -1 +1 @@
-.tna-textarea{color:var(--input-foreground, rgb(1, 1, 1));background-color:var(--input-background, rgb(255, 255, 255));border:2px var(--input-border, rgb(1, 1, 1)) solid}.tna-textarea{width:100%;min-height:8.25rem0.5rem;padding:0.25rem 0.5rem;display:block;box-sizing:border-box;line-height:1.5rem;resize:vertical;border-radius:2px}.tna-form-item--error .tna-textarea{border-color:var(--form-error-border, #c20000)}.tna-textarea--m{max-width:20rem}.tna-textarea--l{max-width:40rem}.tna-textarea--xl{max-width:80rem}/*# sourceMappingURL=textarea.css.map */
+.tna-textarea{color:var(--input-foreground, rgb(1, 1, 1));background-color:var(--input-background, rgb(255, 255, 255));border:2px var(--input-border, rgb(1, 1, 1)) solid}.tna-textarea{width:100%;min-height:calc(7.5rem + 0.5rem);padding:0.25rem 0.5rem;display:block;box-sizing:border-box;line-height:1.5;resize:vertical;border-radius:2px}.tna-form-item--error .tna-textarea{border-color:var(--form-error-border, #c20000)}.tna-textarea--m{max-width:20rem}.tna-textarea--l{max-width:40rem}.tna-textarea--xl{max-width:80rem}[data-module=tna-textarea-itemised-rows] .tna-form-item__body{display:flex;align-items:stretch;gap:2px}[data-module=tna-textarea-itemised-rows] .tna-form-item__body .tna-text-input{flex:1}[data-module=tna-textarea-itemised-rows] .tna-form-item__body .tna-button{align-items:center}/*# sourceMappingURL=textarea.css.map */

package/nationalarchives/components/textarea/textarea.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/textarea/textarea.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss"],"names":[],"mappings":"AAsJA,cA9DE,4CAIA,6DA4BI,mDC/GN,cACE,WACA,yBAEA,uBAEA,cACA,sBAEA,mBAEA,gBCjBA,cCDsB,IFwBtB,oCDmGI,+CC/FJ,iBACE,gBAGF,iBACE,gBAGF,kBACE","file":"textarea.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n  \"background\",\n  // \"background-tint\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  // \"focus-outline\",\n  \"keyline\",\n  \"keyline-dark\",\n  // \"input-foreground\",\n  // \"input-background\",\n  // \"input-border\",\n  // \"form-error-border\",\n  // \"form-error-text\",\n  // \"button-text\",\n  // \"button-background\",\n  // \"button-hover-text\",\n   // \"button-hover-background\",\n);\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n        --base-#{$name}: #{$value};\n      }\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour)\n    if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if(sass($important): !important; else: 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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if(sass($important): !important; else: null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if(sass($important): !important; else: null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      colour-var($colour)\n      $style\n      if(sass($important): !important; else: null);\n  } @else {\n    outline-color: colour-var($colour)\n      if(sass($important): !important; else: null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n  @include colour-font(\"input-foreground\");\n  @include colour-background(\"input-background\");\n  @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n  @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline-dark\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"accent-border\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"accent-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      $border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"form-error-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n  } @else {\n    border: $border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width transparent solid;\n  } @else {\n    border: $border-width transparent solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    // @include colour-css-vars-high-contrast(\n    //   \"form-error-border\",\n    //   \"focus-outline\"\n    // );\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-border: var(--accent-border-bright);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-border: var(--accent-border-bright);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%base {\n  @each $name, $value in $base-colours {\n    --#{$name}: var(--base-#{$value});\n  }\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin base {\n  @extend %base;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--accent-background);\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      --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      --accent-border: var(--accent-font-dark);\n      --button-text: var(--accent-button-text);\n      --button-background: var(--accent-button-background);\n      --button-hover-text: var(--accent-button-hover-text);\n      --button-hover-background: var(--accent-button-hover-background);\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    --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    --accent-border: var(--accent-font-dark);\n    --button-text: var(--accent-button-text);\n    --button-background: var(--accent-button-background);\n    --button-hover-text: var(--accent-button-hover-text);\n    --button-hover-background: var(--accent-button-hover-background);\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"forest\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"navy\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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\n%image-loader-background {\n  background: linear-gradient(\n    -45deg,\n    rgb(0 0 0 / 25%),\n    rgb(255 255 255 / 25%),\n    rgb(0 0 0 / 25%)\n  );\n  background-size: 500% 500%;\n  background-position: 0 50%;\n\n  animation: image-loader-background ease-in-out 1.2s infinite;\n\n  @media (prefers-reduced-motion) {\n    animation: none !important;\n  }\n}\n\n@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    @extend %image-loader-background;\n  }\n}\n","@use \"../../variables/forms\" as formsVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n$textarea-minimum-lines-visible: 5.5 !default;\n$textarea-line-height: 1.5rem !default;\n$textarea-vertical-padding: 0.25 !default;\n\n.tna-textarea {\n  width: 100%;\n  min-height: #{($textarea-line-height * $textarea-minimum-lines-visible) +\n    (spacing.space($textarea-vertical-padding * 2))};\n  padding: spacing.space($textarea-vertical-padding) spacing.space(0.5);\n\n  display: block;\n  box-sizing: border-box;\n\n  line-height: 1.5rem;\n\n  resize: vertical;\n\n  @include colour.colour-input;\n\n  @include borders.rounded-border;\n\n  .tna-form-item--error & {\n    @include colour.colour-border(\"form-error-border\");\n  }\n\n  &--m {\n    max-width: 20rem;\n  }\n\n  &--l {\n    max-width: 40rem;\n  }\n\n  &--xl {\n    max-width: 80rem;\n  }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n  border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/textarea/textarea.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss"],"names":[],"mappings":"AAsJA,cA9DE,4CAIA,6DA4BI,mDC/GN,cACE,WACA,iCAIA,uBAEA,cACA,sBAEA,gBAEA,gBCnBA,cCDsB,IF0BtB,oCDiGI,+CC7FJ,iBACE,gBAGF,iBACE,gBAGF,kBACE,gBAKF,8DACE,aACA,oBACA,QAEA,8EACE,OAGF,0EACE","file":"textarea.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n  \"background\",\n  // \"background-tint\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  // \"focus-outline\",\n  \"keyline\",\n  \"keyline-dark\",\n  // \"input-foreground\",\n  // \"input-background\",\n  // \"input-border\",\n  // \"form-error-border\",\n  // \"form-error-text\",\n  // \"button-text\",\n  // \"button-background\",\n  // \"button-hover-text\",\n   // \"button-hover-background\",\n);\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n        --base-#{$name}: #{$value};\n      }\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour)\n    if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if(sass($important): !important; else: 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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if(sass($important): !important; else: null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if(sass($important): !important; else: null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      colour-var($colour)\n      $style\n      if(sass($important): !important; else: null);\n  } @else {\n    outline-color: colour-var($colour)\n      if(sass($important): !important; else: null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n  @include colour-font(\"input-foreground\");\n  @include colour-background(\"input-background\");\n  @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n  @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline-dark\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"accent-border\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"accent-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      $border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"form-error-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n  } @else {\n    border: $border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width transparent solid;\n  } @else {\n    border: $border-width transparent solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    // @include colour-css-vars-high-contrast(\n    //   \"form-error-border\",\n    //   \"focus-outline\"\n    // );\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-border: var(--accent-border-bright);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-border: var(--accent-border-bright);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%base {\n  @each $name, $value in $base-colours {\n    --#{$name}: var(--base-#{$value});\n  }\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin base {\n  @extend %base;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--accent-background);\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      --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      --accent-border: var(--accent-font-dark);\n      --button-text: var(--accent-button-text);\n      --button-background: var(--accent-button-background);\n      --button-hover-text: var(--accent-button-hover-text);\n      --button-hover-background: var(--accent-button-hover-background);\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    --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    --accent-border: var(--accent-font-dark);\n    --button-text: var(--accent-button-text);\n    --button-background: var(--accent-button-background);\n    --button-hover-text: var(--accent-button-hover-text);\n    --button-hover-background: var(--accent-button-hover-background);\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"forest\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"navy\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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\n%image-loader-background {\n  background: linear-gradient(\n    -45deg,\n    rgb(0 0 0 / 25%),\n    rgb(255 255 255 / 25%),\n    rgb(0 0 0 / 25%)\n  );\n  background-size: 500% 500%;\n  background-position: 0 50%;\n\n  animation: image-loader-background ease-in-out 1.2s infinite;\n\n  @media (prefers-reduced-motion) {\n    animation: none !important;\n  }\n}\n\n@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    @extend %image-loader-background;\n  }\n}\n","@use \"../../variables/forms\" as formsVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n$textarea-minimum-lines-visible: 5 !default;\n$textarea-line-height: 1.5rem !default;\n$textarea-vertical-padding: 0.25 !default;\n\n.tna-textarea {\n  width: 100%;\n  min-height: calc(\n    #{$textarea-line-height * $textarea-minimum-lines-visible} +\n      #{spacing.space($textarea-vertical-padding * 2)}\n  );\n  padding: spacing.space($textarea-vertical-padding) spacing.space(0.5);\n\n  display: block;\n  box-sizing: border-box;\n\n  line-height: 1.5;\n\n  resize: vertical;\n\n  @include colour.colour-input;\n\n  @include borders.rounded-border;\n\n  .tna-form-item--error & {\n    @include colour.colour-border(\"form-error-border\");\n  }\n\n  &--m {\n    max-width: 20rem;\n  }\n\n  &--l {\n    max-width: 40rem;\n  }\n\n  &--xl {\n    max-width: 80rem;\n  }\n}\n\n[data-module=\"tna-textarea-itemised-rows\"] {\n  .tna-form-item__body {\n    display: flex;\n    align-items: stretch;\n    gap: 2px;\n\n    .tna-text-input {\n      flex: 1;\n    }\n\n    .tna-button {\n      align-items: center;\n    }\n  }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n  border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n"]}

package/nationalarchives/components/textarea/textarea.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,r(n.key),n)}}function r(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{TextAreaItemisedRows:()=>o});var o=function(){return t=function t(e){var i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldInputHint=this.$module&&this.$module.querySelector(".tna-form-item__hint"),this.$formFieldBody=this.$module&&this.$module.querySelector(".tna-form-item__body"),this.$module&&this.$formFieldInput&&this.$formFieldBody&&null===this.$formFieldInput.getAttribute("hidden")){var r=n.enhancedHint;this.values=this.$formFieldInput.value.split("\n").map(function(t){return t.trim()}).filter(function(t){return t}),this.id=this.$formFieldInput.id,this.$formFieldNewInput=document.createElement("input"),this.$formFieldNewInput.classList.add("tna-text-input"),["id","aria-describedby"].forEach(function(t){i.$formFieldNewInput.setAttribute(t,i.$formFieldInput.getAttribute(t)),i.$formFieldInput.removeAttribute(t)}),this.$formFieldBody.appendChild(this.$formFieldNewInput),this.$formFieldInput.setAttribute("hidden",""),this.$formFieldInput.addEventListener("keyup",function(){return i.updateList()}),this.$formFieldNewInput.addEventListener("keypress",function(t){"Enter"===t.key&&i.appendValue(t.target.value)}),this.$formFieldNewInputAddButton=document.createElement("button"),this.$formFieldNewInputAddButton.setAttribute("type","button"),this.$formFieldNewInputAddButton.classList.add("tna-button","tna-button--small"),this.$formFieldNewInputAddButtonInner=document.createElement("span"),this.$formFieldNewInputAddButtonInner.innerText="Add",this.$formFieldNewInputAddButtonInnerExtra=document.createElement("span"),this.$formFieldNewInputAddButtonInnerExtra.classList.add("tna-visually-hidden"),this.$formFieldNewInputAddButtonInnerExtra.innerText=" to list",this.$formFieldNewInputAddButtonInner.appendChild(this.$formFieldNewInputAddButtonInnerExtra),this.$formFieldNewInputAddButton.appendChild(this.$formFieldNewInputAddButtonInner),this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton),this.$formFieldNewInputAddButton.addEventListener("click",function(){i.appendValue(i.$formFieldNewInput.value)}),this.$formFieldLiveAria=document.createElement("div"),this.$formFieldLiveAria.setAttribute("aria-live","assertive"),this.$formFieldLiveAria.classList.add("tna-visually-hidden"),this.$module.appendChild(this.$formFieldLiveAria),this.$formFieldCounter=document.createElement("p"),this.$formFieldCounter.id="".concat(this.id,"-list-helper"),this.$formFieldCounter.classList.add("tna-!--margin-top-xs"),this.$module.appendChild(this.$formFieldCounter),this.$formFieldNewInput.setAttribute("aria-describedby","".concat(this.$formFieldNewInput.getAttribute("aria-describedby")," ").concat(this.$formFieldCounter.id)),this.$valuesList=document.createElement("ul"),this.$valuesList.classList.add("tna-compound-filters","tna-!--margin-top-xs"),this.$valuesList.addEventListener("blur",function(){i.$valuesList.removeAttribute("tabindex"),i.updateAriaText("")}),this.$module.appendChild(this.$valuesList),this.$formFieldInputHint||(this.$formFieldInputHint=document.createElement("p"),this.$formFieldInputHint.classList.add("tna-form-item__hint"),this.$formFieldBody.parentNode.insertBefore(this.$formFieldInputHint,this.$formFieldBody)),this.$formFieldInputHint.innerText=r||"Enter an item and press enter",this.updateList()}},(e=[{key:"updateAriaText",value:function(t){this.$formFieldLiveAria.innerText=t}},{key:"normaliseValue",value:function(t){return t.replace(/\s{2,}/," ").trim()}},{key:"isValueInList",value:function(t){var e=this;return this.values.map(function(t){return e.normaliseValue(t).toLowerCase()}).indexOf(t.toLowerCase().trim())>-1}},{key:"appendValue",value:function(t){var e=this.normaliseValue(t);e?this.isValueInList(e)?this.updateAriaText("'".concat(e,"' already added")):(this.values.push(e),this.$formFieldInput.value=this.values.join("\n"),this.updateList(),this.updateAriaText("'".concat(e,"' added"))):this.updateAriaText("Enter an item to add"),this.$formFieldNewInput.value="",this.$formFieldNewInput.focus()}},{key:"removeValue",value:function(t){var e=this.normaliseValue(t);e&&this.isValueInList(e)&&(this.values=this.values.filter(function(t){return t!==e}),this.$formFieldInput.value=this.values.join("\n"),this.updateList(),this.updateAriaText("'".concat(e,"' removed"))),this.values.length?(this.$valuesList.setAttribute("tabindex","0"),this.$valuesList.focus()):this.$formFieldNewInput.focus()}},{key:"updateList",value:function(){var t=this;this.$valuesList.innerHTML="",this.values.map(function(e){var i=document.createElement("li");i.classList.add("tna-compound-filters__item");var n=document.createElement("span");n.innerText=e,i.appendChild(n);var r=document.createElement("button");return r.innerText="Remove '".concat(e,"'"),r.setAttribute("type","button"),r.classList.add("tna-compound-filters__link"),r.addEventListener("click",function(){t.removeValue(e)}),i.appendChild(r),i}).forEach(function(e){return t.$valuesList.appendChild(e)}),this.$formFieldCounter.innerText="".concat(this.values.length," item").concat(1!==this.values.length?"s":""," added")}}])&&n(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})());
+//# sourceMappingURL=textarea.js.map

package/nationalarchives/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/textarea/textarea.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/textarea/textarea.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class TextAreaItemisedRows {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldInputHint =\n      this.$module && this.$module.querySelector(\".tna-form-item__hint\");\n    this.$formFieldBody =\n      this.$module && this.$module.querySelector(\".tna-form-item__body\");\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldBody ||\n      this.$formFieldInput.getAttribute(\"hidden\") !== null\n    ) {\n      return;\n    }\n\n    const { enhancedHint } = options;\n\n    this.values = this.$formFieldInput.value\n      .split(\"\\n\")\n      .map((value) => value.trim())\n      .filter((value) => value);\n\n    this.id = this.$formFieldInput.id;\n\n    this.$formFieldNewInput = document.createElement(\"input\");\n    this.$formFieldNewInput.classList.add(\"tna-text-input\");\n    [\"id\", \"aria-describedby\"].forEach((attribute) => {\n      this.$formFieldNewInput.setAttribute(\n        attribute,\n        this.$formFieldInput.getAttribute(attribute),\n      );\n      this.$formFieldInput.removeAttribute(attribute);\n    });\n    this.$formFieldBody.appendChild(this.$formFieldNewInput);\n    this.$formFieldInput.setAttribute(\"hidden\", \"\");\n    this.$formFieldInput.addEventListener(\"keyup\", () => this.updateList());\n    this.$formFieldNewInput.addEventListener(\"keypress\", (e) => {\n      if (e.key === \"Enter\") {\n        this.appendValue(e.target.value);\n      }\n    });\n\n    this.$formFieldNewInputAddButton = document.createElement(\"button\");\n    this.$formFieldNewInputAddButton.setAttribute(\"type\", \"button\");\n    this.$formFieldNewInputAddButton.classList.add(\n      \"tna-button\",\n      \"tna-button--small\",\n    );\n    this.$formFieldNewInputAddButtonInner = document.createElement(\"span\");\n    this.$formFieldNewInputAddButtonInner.innerText = \"Add\";\n    this.$formFieldNewInputAddButtonInnerExtra = document.createElement(\"span\");\n    this.$formFieldNewInputAddButtonInnerExtra.classList.add(\n      \"tna-visually-hidden\",\n    );\n    this.$formFieldNewInputAddButtonInnerExtra.innerText = \" to list\";\n    this.$formFieldNewInputAddButtonInner.appendChild(\n      this.$formFieldNewInputAddButtonInnerExtra,\n    );\n    this.$formFieldNewInputAddButton.appendChild(\n      this.$formFieldNewInputAddButtonInner,\n    );\n    this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton);\n    this.$formFieldNewInputAddButton.addEventListener(\"click\", () => {\n      this.appendValue(this.$formFieldNewInput.value);\n    });\n\n    this.$formFieldLiveAria = document.createElement(\"div\");\n    this.$formFieldLiveAria.setAttribute(\"aria-live\", \"assertive\");\n    this.$formFieldLiveAria.classList.add(\"tna-visually-hidden\");\n    this.$module.appendChild(this.$formFieldLiveAria);\n\n    this.$formFieldCounter = document.createElement(\"p\");\n    this.$formFieldCounter.id = `${this.id}-list-helper`;\n    this.$formFieldCounter.classList.add(\"tna-!--margin-top-xs\");\n    this.$module.appendChild(this.$formFieldCounter);\n\n    this.$formFieldNewInput.setAttribute(\n      \"aria-describedby\",\n      `${this.$formFieldNewInput.getAttribute(\"aria-describedby\")} ${\n        this.$formFieldCounter.id\n      }`,\n    );\n\n    this.$valuesList = document.createElement(\"ul\");\n    this.$valuesList.classList.add(\n      \"tna-compound-filters\",\n      \"tna-!--margin-top-xs\",\n    );\n    this.$valuesList.addEventListener(\"blur\", () => {\n      this.$valuesList.removeAttribute(\"tabindex\");\n      this.updateAriaText(\"\");\n    });\n    this.$module.appendChild(this.$valuesList);\n\n    if (!this.$formFieldInputHint) {\n      this.$formFieldInputHint = document.createElement(\"p\");\n      this.$formFieldInputHint.classList.add(\"tna-form-item__hint\");\n      this.$formFieldBody.parentNode.insertBefore(\n        this.$formFieldInputHint,\n        this.$formFieldBody,\n      );\n    }\n    this.$formFieldInputHint.innerText =\n      enhancedHint || \"Enter an item and press enter\";\n\n    this.updateList();\n  }\n\n  updateAriaText(content) {\n    this.$formFieldLiveAria.innerText = content;\n  }\n\n  normaliseValue(value) {\n    return value.replace(/\\s{2,}/, \" \").trim();\n  }\n\n  isValueInList(value) {\n    return (\n      this.values\n        .map((value) => this.normaliseValue(value).toLowerCase())\n        .indexOf(value.toLowerCase().trim()) > -1\n    );\n  }\n\n  appendValue(value) {\n    const newValue = this.normaliseValue(value);\n    if (newValue) {\n      if (!this.isValueInList(newValue)) {\n        this.values.push(newValue);\n        this.$formFieldInput.value = this.values.join(\"\\n\");\n        this.updateList();\n        this.updateAriaText(`'${newValue}' added`);\n      } else {\n        this.updateAriaText(`'${newValue}' already added`);\n      }\n    } else {\n      this.updateAriaText(\"Enter an item to add\");\n    }\n    this.$formFieldNewInput.value = \"\";\n    this.$formFieldNewInput.focus();\n  }\n\n  removeValue(value) {\n    const removeValue = this.normaliseValue(value);\n    if (removeValue && this.isValueInList(removeValue)) {\n      this.values = this.values.filter(\n        (existingValue) => existingValue !== removeValue,\n      );\n      this.$formFieldInput.value = this.values.join(\"\\n\");\n      this.updateList();\n      this.updateAriaText(`'${removeValue}' removed`);\n    }\n    if (this.values.length) {\n      this.$valuesList.setAttribute(\"tabindex\", \"0\");\n      this.$valuesList.focus();\n    } else {\n      this.$formFieldNewInput.focus();\n    }\n  }\n\n  updateList() {\n    this.$valuesList.innerHTML = \"\";\n    this.values\n      .map((value) => {\n        const $item = document.createElement(\"li\");\n        $item.classList.add(\"tna-compound-filters__item\");\n        const $itemLabel = document.createElement(\"span\");\n        $itemLabel.innerText = value;\n        $item.appendChild($itemLabel);\n\n        const $removeItemButton = document.createElement(\"button\");\n        $removeItemButton.innerText = `Remove '${value}'`;\n        $removeItemButton.setAttribute(\"type\", \"button\");\n        $removeItemButton.classList.add(\"tna-compound-filters__link\");\n        $removeItemButton.addEventListener(\"click\", () => {\n          this.removeValue(value);\n        });\n        $item.appendChild($removeItemButton);\n        return $item;\n      })\n      .forEach(($item) => this.$valuesList.appendChild($item));\n    this.$formFieldCounter.innerText = `${this.values.length} item${this.values.length !== 1 ? \"s\" : \"\"} added`;\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","TextAreaItemisedRows","$module","_this","options","arguments","length","undefined","_classCallCheck","this","$formFieldInput","querySelector","$formFieldInputHint","$formFieldBody","getAttribute","enhancedHint","values","split","map","trim","filter","id","$formFieldNewInput","document","createElement","classList","add","forEach","attribute","setAttribute","removeAttribute","appendChild","addEventListener","updateList","e","appendValue","target","$formFieldNewInputAddButton","$formFieldNewInputAddButtonInner","innerText","$formFieldNewInputAddButtonInnerExtra","$formFieldLiveAria","$formFieldCounter","concat","$valuesList","updateAriaText","parentNode","insertBefore","content","replace","_this2","normaliseValue","toLowerCase","indexOf","newValue","isValueInList","push","join","focus","removeValue","existingValue","_this3","innerHTML","$item","$itemLabel","$removeItemButton"],"sourceRoot":""}

package/nationalarchives/components/textarea/textarea.mjs

@@ -0,0 +1,188 @@
+export class TextAreaItemisedRows {
+  constructor($module, options = {}) {
+    this.$module = $module;
+    this.$formFieldInput =
+      this.$module && this.$module.querySelector(".tna-textarea");
+    this.$formFieldInputHint =
+      this.$module && this.$module.querySelector(".tna-form-item__hint");
+    this.$formFieldBody =
+      this.$module && this.$module.querySelector(".tna-form-item__body");
+
+    if (
+      !this.$module ||
+      !this.$formFieldInput ||
+      !this.$formFieldBody ||
+      this.$formFieldInput.getAttribute("hidden") !== null
+    ) {
+      return;
+    }
+
+    const { enhancedHint } = options;
+
+    this.values = this.$formFieldInput.value
+      .split("\n")
+      .map((value) => value.trim())
+      .filter((value) => value);
+
+    this.id = this.$formFieldInput.id;
+
+    this.$formFieldNewInput = document.createElement("input");
+    this.$formFieldNewInput.classList.add("tna-text-input");
+    ["id", "aria-describedby"].forEach((attribute) => {
+      this.$formFieldNewInput.setAttribute(
+        attribute,
+        this.$formFieldInput.getAttribute(attribute),
+      );
+      this.$formFieldInput.removeAttribute(attribute);
+    });
+    this.$formFieldBody.appendChild(this.$formFieldNewInput);
+    this.$formFieldInput.setAttribute("hidden", "");
+    this.$formFieldInput.addEventListener("keyup", () => this.updateList());
+    this.$formFieldNewInput.addEventListener("keypress", (e) => {
+      if (e.key === "Enter") {
+        this.appendValue(e.target.value);
+      }
+    });
+
+    this.$formFieldNewInputAddButton = document.createElement("button");
+    this.$formFieldNewInputAddButton.setAttribute("type", "button");
+    this.$formFieldNewInputAddButton.classList.add(
+      "tna-button",
+      "tna-button--small",
+    );
+    this.$formFieldNewInputAddButtonInner = document.createElement("span");
+    this.$formFieldNewInputAddButtonInner.innerText = "Add";
+    this.$formFieldNewInputAddButtonInnerExtra = document.createElement("span");
+    this.$formFieldNewInputAddButtonInnerExtra.classList.add(
+      "tna-visually-hidden",
+    );
+    this.$formFieldNewInputAddButtonInnerExtra.innerText = " to list";
+    this.$formFieldNewInputAddButtonInner.appendChild(
+      this.$formFieldNewInputAddButtonInnerExtra,
+    );
+    this.$formFieldNewInputAddButton.appendChild(
+      this.$formFieldNewInputAddButtonInner,
+    );
+    this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton);
+    this.$formFieldNewInputAddButton.addEventListener("click", () => {
+      this.appendValue(this.$formFieldNewInput.value);
+    });
+
+    this.$formFieldLiveAria = document.createElement("div");
+    this.$formFieldLiveAria.setAttribute("aria-live", "assertive");
+    this.$formFieldLiveAria.classList.add("tna-visually-hidden");
+    this.$module.appendChild(this.$formFieldLiveAria);
+
+    this.$formFieldCounter = document.createElement("p");
+    this.$formFieldCounter.id = `${this.id}-list-helper`;
+    this.$formFieldCounter.classList.add("tna-!--margin-top-xs");
+    this.$module.appendChild(this.$formFieldCounter);
+
+    this.$formFieldNewInput.setAttribute(
+      "aria-describedby",
+      `${this.$formFieldNewInput.getAttribute("aria-describedby")} ${
+        this.$formFieldCounter.id
+      }`,
+    );
+
+    this.$valuesList = document.createElement("ul");
+    this.$valuesList.classList.add(
+      "tna-compound-filters",
+      "tna-!--margin-top-xs",
+    );
+    this.$valuesList.addEventListener("blur", () => {
+      this.$valuesList.removeAttribute("tabindex");
+      this.updateAriaText("");
+    });
+    this.$module.appendChild(this.$valuesList);
+
+    if (!this.$formFieldInputHint) {
+      this.$formFieldInputHint = document.createElement("p");
+      this.$formFieldInputHint.classList.add("tna-form-item__hint");
+      this.$formFieldBody.parentNode.insertBefore(
+        this.$formFieldInputHint,
+        this.$formFieldBody,
+      );
+    }
+    this.$formFieldInputHint.innerText =
+      enhancedHint || "Enter an item and press enter";
+
+    this.updateList();
+  }
+
+  updateAriaText(content) {
+    this.$formFieldLiveAria.innerText = content;
+  }
+
+  normaliseValue(value) {
+    return value.replace(/\s{2,}/, " ").trim();
+  }
+
+  isValueInList(value) {
+    return (
+      this.values
+        .map((value) => this.normaliseValue(value).toLowerCase())
+        .indexOf(value.toLowerCase().trim()) > -1
+    );
+  }
+
+  appendValue(value) {
+    const newValue = this.normaliseValue(value);
+    if (newValue) {
+      if (!this.isValueInList(newValue)) {
+        this.values.push(newValue);
+        this.$formFieldInput.value = this.values.join("\n");
+        this.updateList();
+        this.updateAriaText(`'${newValue}' added`);
+      } else {
+        this.updateAriaText(`'${newValue}' already added`);
+      }
+    } else {
+      this.updateAriaText("Enter an item to add");
+    }
+    this.$formFieldNewInput.value = "";
+    this.$formFieldNewInput.focus();
+  }
+
+  removeValue(value) {
+    const removeValue = this.normaliseValue(value);
+    if (removeValue && this.isValueInList(removeValue)) {
+      this.values = this.values.filter(
+        (existingValue) => existingValue !== removeValue,
+      );
+      this.$formFieldInput.value = this.values.join("\n");
+      this.updateList();
+      this.updateAriaText(`'${removeValue}' removed`);
+    }
+    if (this.values.length) {
+      this.$valuesList.setAttribute("tabindex", "0");
+      this.$valuesList.focus();
+    } else {
+      this.$formFieldNewInput.focus();
+    }
+  }
+
+  updateList() {
+    this.$valuesList.innerHTML = "";
+    this.values
+      .map((value) => {
+        const $item = document.createElement("li");
+        $item.classList.add("tna-compound-filters__item");
+        const $itemLabel = document.createElement("span");
+        $itemLabel.innerText = value;
+        $item.appendChild($itemLabel);
+
+        const $removeItemButton = document.createElement("button");
+        $removeItemButton.innerText = `Remove '${value}'`;
+        $removeItemButton.setAttribute("type", "button");
+        $removeItemButton.classList.add("tna-compound-filters__link");
+        $removeItemButton.addEventListener("click", () => {
+          this.removeValue(value);
+        });
+        $item.appendChild($removeItemButton);
+        return $item;
+      })
+      .forEach(($item) => this.$valuesList.appendChild($item));
+    this.$formFieldCounter.innerText = `${this.values.length} item${this.values.length !== 1 ? "s" : ""} added`;
+  }
+}

package/nationalarchives/components/textarea/textarea.scss

@@ -3,20 +3,22 @@
 @use "../../tools/colour";
 @use "../../tools/spacing";
 
-$textarea-minimum-lines-visible: 5.5 !default;
+$textarea-minimum-lines-visible: 5 !default;
 $textarea-line-height: 1.5rem !default;
 $textarea-vertical-padding: 0.25 !default;
 
 .tna-textarea {
   width: 100%;
-  min-height: #{($textarea-line-height * $textarea-minimum-lines-visible) +
-    (spacing.space($textarea-vertical-padding * 2))};
+  min-height: calc(
+    #{$textarea-line-height * $textarea-minimum-lines-visible} +
+      #{spacing.space($textarea-vertical-padding * 2)}
+  );
   padding: spacing.space($textarea-vertical-padding) spacing.space(0.5);
 
   display: block;
   box-sizing: border-box;
 
-  line-height: 1.5rem;
+  line-height: 1.5;
 
   resize: vertical;
 
@@ -40,3 +42,19 @@ $textarea-vertical-padding: 0.25 !default;
     max-width: 80rem;
   }
 }
+
+[data-module="tna-textarea-itemised-rows"] {
+  .tna-form-item__body {
+    display: flex;
+    align-items: stretch;
+    gap: 2px;
+
+    .tna-text-input {
+      flex: 1;
+    }
+
+    .tna-button {
+      align-items: center;
+    }
+  }
+}