@nationalarchives/frontend 0.1.41 → 0.1.43

package/nationalarchives/components/search-filters/search-filters.scss

@@ -0,0 +1,163 @@
+@use "sass:math";
+
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
+
+.tna-search-filters {
+  @include spacing.space-above;
+
+  &__title {
+  }
+
+  &__update {
+    display: block;
+  }
+
+  .tna-heading-s {
+    margin: 0;
+    padding: 0;
+  }
+
+  &__fieldset {
+    border: none;
+  }
+
+  &__legend {
+    width: 100%;
+  }
+
+  &__heading-inner,
+  &__item-toggle {
+    padding: 0.5rem 0.75rem;
+
+    @include colour.colour-border("keyline", 1px, solid);
+    border-bottom-width: 0;
+  }
+
+  &__heading-inner {
+    margin-top: 1rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  &__item-toggle {
+    width: 100%;
+    margin: 0;
+    padding-right: 2.5rem;
+
+    display: block;
+
+    position: relative;
+
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-align: inherit;
+
+    background: none;
+
+    cursor: pointer;
+
+    &::before {
+      width: 0;
+      height: 0;
+
+      position: absolute;
+      right: 0.5rem;
+      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
+
+      @include colour.colour-border(
+        "font-base",
+        #{math.div(math.sqrt(3), 2)}rem
+      );
+      border-right: 0.5rem transparent solid;
+      border-bottom-width: 0;
+      border-left: 0.5rem transparent solid;
+
+      content: "";
+    }
+
+    &:hover,
+    &:active {
+      @include typography.interacted-text-decoration;
+
+      background: none;
+    }
+
+    &[aria-expanded="true"] {
+      &::before {
+        border-top-width: 0;
+        border-bottom-width: #{math.div(math.sqrt(3), 2)}rem;
+      }
+    }
+  }
+
+  &__item-toggle-label {
+  }
+
+  &__item-toggle-info {
+    display: block;
+
+    @include typography.main-font-weight;
+    @include typography.relative-font-size(14);
+  }
+
+  &__item {
+    padding: 0.75rem;
+
+    @include colour.colour-background("background-tint");
+
+    @include colour.colour-border("keyline", 1px);
+    border-width: 0 1px 1px;
+  }
+
+  &__hint {
+    margin-bottom: 0.5rem;
+
+    @include typography.relative-font-size(16);
+    @include colour.colour-font("font-light");
+  }
+
+  &__inline-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 2rem;
+  }
+
+  &__label {
+    display: block;
+  }
+
+  &__footer {
+    padding: 0.75rem;
+
+    display: none;
+
+    @include colour.colour-border("keyline", 1px);
+  }
+
+  &--js-enabled &__title {
+    margin-bottom: 1rem;
+  }
+
+  &--js-enabled &__footer {
+    display: block;
+  }
+
+  &--js-enabled &__item {
+    border-bottom: none;
+  }
+
+  &--js-enabled &__update-item {
+    display: none;
+  }
+
+  &__fieldset[data-type="multiple"] &__item {
+    max-height: 15rem;
+
+    overflow: auto;
+  }
+}

package/nationalarchives/components/search-filters/search-filters.stories.js

@@ -0,0 +1,207 @@
+import Filters from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  title: { control: "text" },
+  rootHeadingLevel: { control: { type: "number", min: 1, max: 6 } },
+  formId: { control: "text" },
+  items: { control: "object" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Search filters",
+  argTypes,
+};
+
+const Template = ({
+  title,
+  rootHeadingLevel,
+  formId,
+  items,
+  classes,
+  attributes,
+}) =>
+  Filters({
+    params: {
+      title,
+      rootHeadingLevel,
+      formId,
+      items,
+      classes,
+      attributes,
+    },
+  });
+
+export const Standard = Template.bind({});
+Standard.args = {
+  title: "Filters",
+  rootHeadingLevel: 2,
+  formId: "test-form",
+  items: [
+    {
+      type: "text",
+      label: "Refine",
+      id: "refine1",
+      name: "refine1",
+      // open: true,
+      hint: "Search within the current results",
+    },
+    // {
+    //   type: "single",
+    //   label: "Type",
+    //   id: "type1",
+    //   name: "type1",
+    //   small: true,
+    //   // open: true,
+    //   hint: "You can only select one.",
+    //   items: [
+    //     {
+    //       text: "Audio",
+    //       value: "audio",
+    //     },
+    //     {
+    //       text: "Image",
+    //       value: "image",
+    //     },
+    //     {
+    //       text: "Video",
+    //       value: "video",
+    //     },
+    //   ],
+    // },
+    {
+      type: "multiple",
+      label: "Category",
+      id: "categories1",
+      name: "categories1",
+      small: true,
+      // open: true,
+      hint: "The category of the record",
+      // count: 2,
+      seeMoreText: "See all 29 categories",
+      seeMoreUrl: "#",
+      items: [
+        {
+          text: "Alpha",
+          value: "alpha",
+        },
+        {
+          text: "Beta",
+          value: "beta",
+          // checked: true,
+        },
+        {
+          text: "Gamma",
+          value: "gamma",
+        },
+      ],
+    },
+    {
+      type: "date",
+      label: "Opening date",
+      id: "date1",
+      name: "date1",
+      hint: "The earliest opening date of the record",
+    },
+    {
+      type: "daterange",
+      label: "Covering date",
+      id: "dates",
+      hint: "The earliest and/or latest covering date of the record",
+      // open: true,
+      from: {
+        label: "From",
+        id: "date2",
+        name: "date2",
+      },
+      to: {
+        label: "To",
+        id: "date3",
+        name: "date3",
+      },
+    },
+  ],
+  classes: "tna-search-filters--demo",
+};
+
+export const OpenedAndPrepopulated = Template.bind({});
+OpenedAndPrepopulated.args = {
+  title: "Filters",
+  rootHeadingLevel: 2,
+  formId: "test-form",
+  items: [
+    {
+      type: "text",
+      label: "Refine",
+      id: "refine1",
+      name: "refine1",
+      open: true,
+      hint: "Search within the current results",
+      value: "iceberg",
+    },
+    {
+      type: "multiple",
+      label: "Category",
+      id: "categories1",
+      name: "categories1",
+      small: true,
+      open: true,
+      hint: "The category of the record",
+      seeMoreText: "See all 29 categories",
+      seeMoreUrl: "#",
+      items: [
+        {
+          text: "Alpha",
+          value: "alpha",
+        },
+        {
+          text: "Beta",
+          value: "beta",
+          checked: true,
+        },
+        {
+          text: "Gamma",
+          value: "gamma",
+          checked: true,
+        },
+      ],
+    },
+    {
+      type: "date",
+      label: "Opening date",
+      id: "date1",
+      name: "date1",
+      hint: "The earliest opening date of the record",
+      open: true,
+      value: "1969-07-16",
+    },
+    {
+      type: "daterange",
+      label: "Covering date",
+      id: "dates",
+      hint: "The earliest and/or latest covering date of the record",
+      open: true,
+      from: {
+        label: "From",
+        id: "date2",
+        name: "date2",
+        value: "1912-04-14",
+      },
+      to: {
+        label: "To",
+        id: "date3",
+        name: "date3",
+        value: "1912-04-15",
+      },
+    },
+  ],
+  classes: "tna-search-filters--demo",
+};

package/nationalarchives/components/search-filters/template.njk

@@ -0,0 +1,107 @@
+{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
+{% from "nationalarchives/components/checkboxes/checkboxes.njk" import tnaCheckboxesElement %}
+{% from "nationalarchives/components/date-search/date-search.njk" import tnaDateSearchElement %}
+{% from "nationalarchives/components/radios/radios.njk" import tnaRadiosElement %}
+{% from "nationalarchives/components/text-input/text-input.njk" import tnaTextInputElement %}
+
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<div class="tna-search-filters {{ containerClasses | join(' ') }}" data-module="tna-search-filters"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <h{{ params.rootHeadingLevel }} class="tna-heading-m tna-search-filters__title">
+    {{ params.title }}
+  </h{{ params.rootHeadingLevel }}>
+  {%- for filter in params.items %}
+  <fieldset class="tna-search-filters__fieldset" {%- if filter.hint and (filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange') %} aria-describedby="{{ filter.id }}-hint"{% endif %} data-type="{{ filter.type }}">
+    <legend class="tna-search-filters__legend">
+      <h{{ params.rootHeadingLevel + 1 }} class="tna-heading-s">
+        <div class="tna-search-filters__heading-inner">
+          {% if filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange' %}
+          {{ filter.label }}
+          {% else %}
+          <label for="{{ filter.id }}">
+            {{ filter.label }}
+          </label>
+          {% endif %}
+        </div>
+        <button class="tna-search-filters__item-toggle" aria-controls="{{ filter.id }}-wrapper" aria-expanded="{{ filter.open or false }}" hidden>
+          {% if filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange' %}
+          <span class="tna-search-filters__item-toggle-label">
+            {{ filter.label }}
+          </span>
+          {% else %}
+          <label class="tna-search-filters__item-toggle-label" for="{{ filter.id }}">
+            {{ filter.label }}
+          </label>
+          {% endif %}
+          {% if filter.count %}
+          <span class="tna-search-filters__item-toggle-info">({{ filter.count }} selected)</span>
+          {% else %}
+          <span class="tna-search-filters__item-toggle-info"></span>
+          {% endif %}
+        </button>
+      </h{{ params.rootHeadingLevel + 1 }}>
+    </legend>
+    <div id="{{ filter.id }}-wrapper" class="tna-search-filters__item">
+      {%- if filter.hint %}
+      <p id="{{ filter.id }}-hint" class="tna-search-filters__hint">
+        {{ filter.hint }}
+      </p>
+      {%- endif %}
+      {% if filter.type == 'single' %}
+      {{ tnaRadiosElement(filter, { form: params.formId }) }}
+      {% elif filter.type == 'multiple' %}
+      {{ tnaCheckboxesElement(filter, { form: params.formId }) }}
+      <div class="tna-button-group tna-button-group--small tna-!--margin-top-xs">
+        {{ tnaButton({
+          text: filter.seeMoreText or 'See more',
+          href: filter.seeMoreUrl,
+          plain: true
+        }) }}
+      </div>
+      {% elif filter.type == 'text' %}
+      {{ tnaTextInputElement(filter, { form: params.formId }) }}
+      {% elif filter.type == 'date' %}
+      {{ tnaDateSearchElement(filter, { form: params.formId }) }}
+      {% elif filter.type == 'daterange' %}
+      <div class="tna-search-filters__inline-fields">
+        <label class="tna-search-filters__label">
+          {{ filter.from.label }}
+          {{ tnaDateSearchElement(filter.from, { form: params.formId }) }}
+        </label>
+        <label class="tna-search-filters__label">
+          {{ filter.to.label }}
+          {{ tnaDateSearchElement(filter.to, { form: params.formId }) }}
+        </label>
+      </div>
+      {% endif %}
+      <div class="tna-button-group tna-button-group--small tna-search-filters__update-item tna-!--margin-top-s">
+        {{ tnaButton({
+          text: 'Update',
+          buttonElement: true,
+          buttonType: 'submit',
+          attributes: {
+            form: params.formId
+          }
+        }) }}
+      </div>
+    </div>
+  </fieldset>
+  {%- endfor %}
+  <div class="tna-search-filters__footer">
+    <div class="tna-button-group tna-button-group--small">
+      {{ tnaButton({
+        text: 'Update',
+        buttonElement: true,
+        buttonType: 'submit',
+        classes: 'tna-search-filters__update',
+        attributes: {
+          form: params.formId
+        }
+      }) }}
+      {{ tnaButton({
+        text: 'Clear all filters',
+        href: '#',
+        plain: true
+      }) }}
+    </div>
+  </div>
+</div>

package/nationalarchives/components/select/fixtures.json

@@ -24,8 +24,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"tna-form__sort\">Sort by</label></h4></div><select class=\"tna-select \" name=\"sort\" id=\"tna-form__sort\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"sort\">Sort by</label></h4></div><select class=\"tna-select \" name=\"sort\" id=\"sort\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>"
     },
     {
       "name": "select with a preselected value",
@@ -51,8 +50,7 @@
         ],
         "selected": "date"
       },
-      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"tna-form__sort\">Sort by</label></h4></div><select class=\"tna-select \" name=\"sort\" id=\"tna-form__sort\"><option value=\"relevance\">Relevance</option><option value=\"date\" selected>Date</option><option value=\"title\">Title</option></select></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"sort\">Sort by</label></h4></div><select class=\"tna-select \" name=\"sort\" id=\"sort\"><option value=\"relevance\">Relevance</option><option value=\"date\" selected>Date</option><option value=\"title\">Title</option></select></div>"
     },
     {
       "name": "select with a hint",
@@ -78,8 +76,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"tna-form__sort\">Sort by</label></h4><p id=\"tna-form__sort-hint\" class=\"tna-form__hint\">Select a field to sort by.</p></div><select class=\"tna-select \" name=\"sort\" id=\"tna-form__sort\" aria-describedby=\"tna-form__sort-hint\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"sort\">Sort by</label></h4><p id=\"sort-hint\" class=\"tna-form__hint\">Select a field to sort by.</p></div><select class=\"tna-select \" name=\"sort\" id=\"sort\" aria-describedby=\"sort-hint\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>"
     },
     {
       "name": "select with an error",
@@ -107,8 +104,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"tna-form__sort\">Sort by</label></h4><p id=\"tna-form__sort-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a field to sort by</p></div><select class=\"tna-select \" name=\"sort\" id=\"tna-form__sort\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"sort\">Sort by</label></h4><p id=\"sort-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a field to sort by</p></div><select class=\"tna-select \" name=\"sort\" id=\"sort\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>"
     },
     {
       "name": "inline select",
@@ -134,8 +130,7 @@
         ],
         "inline": true
       },
-      "html": "<div class=\"tna-form__group tna-form__group--inline\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"tna-form__sort\">Sort by</label></h4></div><select class=\"tna-select \" name=\"sort\" id=\"tna-form__sort\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group tna-form__group--inline\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"sort\">Sort by</label></h4></div><select class=\"tna-select \" name=\"sort\" id=\"sort\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>"
     },
     {
       "name": "select size",
@@ -161,8 +156,7 @@
         ],
         "size": "xl"
       },
-      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"tna-form__sort\">Sort by</label></h4></div><select class=\"tna-select tna-select--xl \" name=\"sort\" id=\"tna-form__sort\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>",
-      "hidden": false
+      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"sort\">Sort by</label></h4></div><select class=\"tna-select tna-select--xl \" name=\"sort\" id=\"sort\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>"
     }
   ]
 }

package/nationalarchives/components/select/select.css

@@ -1 +1 @@
-.tna-select{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-select{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-select{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-select{max-width:100%;height:calc(2rem + 6px);padding:0 1rem 0 .5rem;display:block;color:#000;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border:1px #000 solid;border:1px var(--input-border) solid;border-radius:0}.tna-select--styled{padding:0 2.5rem 0 .75rem;appearance:none;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSIyNTAsNDAwIDUwLDEwMCA0NTAsMTAwIiBmaWxsPSIjMDAwIi8+PC9zdmc+");background-position:center right .5rem;background-size:.75rem .75rem;background-repeat:no-repeat}.tna-form__group--error .tna-select{border-color:#c00;border-color:var(--form-error)}.tna-select--s{width:10rem}.tna-select--m{width:20rem}.tna-select--l{width:40rem}.tna-select--xl{width:80rem}/*# sourceMappingURL=select.css.map */
+.tna-select{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-select{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-select{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-select{max-width:100%;height:calc(2rem + 6px);padding:0 1rem 0 .5rem;display:block;color:#000;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border:2px #000 solid;border:2px var(--input-border) solid;border-radius:.1px}.tna-select--styled{padding:0 2.5rem 0 .75rem;appearance:none;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSIyNTAsNDAwIDUwLDEwMCA0NTAsMTAwIiBmaWxsPSIjMDAwIi8+PC9zdmc+");background-position:center right .5rem;background-size:.75rem .75rem;background-repeat:no-repeat}.tna-form__group--error .tna-select{border-color:#c00;border-color:var(--form-error)}.tna-select--s{width:10rem}.tna-select--m{width:20rem}.tna-select--l{width:40rem}.tna-select--xl{width:80rem}/*# sourceMappingURL=select.css.map */

package/nationalarchives/components/select/select.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/select/select.scss"],"names":[],"mappings":"AAwJA,YA9II,4hDAiJF,+BAHF,YAlII,+9CAyIF,+CAzIE,89CCnBJ,YACE,eACA,wBACA,uBAEA,cDwEA,WACA,8BCrEA,kBACA,iBDwEA,sBAEA,yCAgCI,sBAIA,qCCzGJ,gBAEA,oBACE,0BAEA,gBAEA,+lBACA,uCACA,8BACA,4BAGF,oCD8FI,kBAEA,+BC5FJ,eACE,YAGF,eACE,YAGF,eACE,YAGF,gBACE","file":"select.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n  @each $name, $value in colour.$colour-palette-default {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-dark() {\n  @each $name, $value in colour.$colour-palette-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast() {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n\n.tna-select {\n  max-width: 100%;\n  height: calc(2rem + 6px);\n  padding: 0 1rem 0 0.5rem;\n\n  display: block;\n\n  @include colour.light;\n  @include colour.colour-font(\"input-foreground\");\n  font-size: inherit;\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0;\n\n  &--styled {\n    padding: 0 2.5rem 0 0.75rem;\n\n    appearance: none;\n\n    background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSIyNTAsNDAwIDUwLDEwMCA0NTAsMTAwIiBmaWxsPSIjMDAwIi8+PC9zdmc+\");\n    background-position: center right 0.5rem;\n    background-size: 0.75rem 0.75rem;\n    background-repeat: no-repeat;\n  }\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error\");\n  }\n\n  &--s {\n    width: 10rem;\n  }\n\n  &--m {\n    width: 20rem;\n  }\n\n  &--l {\n    width: 40rem;\n  }\n\n  &--xl {\n    width: 80rem;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/select/select.scss"],"names":[],"mappings":"AAyLA,YA7KM,ygDAgLJ,+BAHF,YA7JM,48CAoKJ,+CApKI,28CCzBN,YACE,eACA,wBACA,uBAEA,cDiFA,WACA,8BC9EA,kBACA,iBDiFA,sBAEA,yCAoCI,sBAIA,qCCtHJ,mBAEA,oBACE,0BAEA,gBAEA,+lBACA,uCACA,8BACA,4BAGF,oCD2GI,kBAEA,+BCzGJ,eACE,YAGF,eACE,YAGF,eACE,YAGF,gBACE","file":"select.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n\n.tna-select {\n  max-width: 100%;\n  height: calc(2rem + 6px);\n  padding: 0 1rem 0 0.5rem;\n\n  display: block;\n\n  @include colour.light;\n  @include colour.colour-font(\"input-foreground\");\n  font-size: inherit;\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0.1px;\n\n  &--styled {\n    padding: 0 2.5rem 0 0.75rem;\n\n    appearance: none;\n\n    background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSIyNTAsNDAwIDUwLDEwMCA0NTAsMTAwIiBmaWxsPSIjMDAwIi8+PC9zdmc+\");\n    background-position: center right 0.5rem;\n    background-size: 0.75rem 0.75rem;\n    background-repeat: no-repeat;\n  }\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error\");\n  }\n\n  &--s {\n    width: 10rem;\n  }\n\n  &--m {\n    width: 20rem;\n  }\n\n  &--l {\n    width: 40rem;\n  }\n\n  &--xl {\n    width: 80rem;\n  }\n}\n"]}

package/nationalarchives/components/select/select.scss

@@ -16,7 +16,7 @@
   @include colour.colour-background("input-background");
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
-  border-radius: 0;
+  border-radius: 0.1px;
 
   &--styled {
     padding: 0 2.5rem 0 0.75rem;