@nationalarchives/frontend 0.1.41 → 0.1.42

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

@@ -0,0 +1,67 @@
+export class SearchFilters {
+  constructor($module) {
+    this.$module = $module;
+
+    if (!this.$module) {
+      return;
+    }
+
+    this.$module.classList.add("tna-search-filters--js-enabled");
+
+    Array.from(
+      this.$module.querySelectorAll(".tna-search-filters__fieldset"),
+    ).forEach(($fieldset) => {
+      // const type = $fieldset.dataset.type;
+      const $toggle = $fieldset.querySelector(
+        ".tna-search-filters__item-toggle",
+      );
+      const $headingInner = $fieldset.querySelector(
+        ".tna-search-filters__heading-inner",
+      );
+      const $item = $fieldset.querySelector(".tna-search-filters__item");
+
+      if (!$toggle || !$headingInner || !$item) {
+        return;
+      }
+
+      $toggle.removeAttribute("hidden");
+      $headingInner.remove();
+
+      this.syncItem($toggle, $item);
+
+      $toggle.addEventListener("click", () => {
+        this.toggleItem($toggle, $item);
+      });
+
+      // if (type === "multiple") {
+      //   const $count = $toggle.querySelector(
+      //     ".tna-search-filters__item-toggle-info",
+      //   );
+      //   if ($count) {
+      //     $item.addEventListener("change", () => {
+      //       const selected = Array.from(
+      //         $item.querySelectorAll('input[type="checkbox"]:checked'),
+      //       ).length;
+      //       $count.innerText = selected ? `(${selected} selected)` : "";
+      //     });
+      //   }
+      // }
+    });
+  }
+
+  toggleItem($toggle, $item) {
+    $toggle.setAttribute(
+      "aria-expanded",
+      $toggle.getAttribute("aria-expanded") == "false",
+    );
+    this.syncItem($toggle, $item);
+  }
+
+  syncItem($toggle, $item) {
+    if ($toggle.getAttribute("aria-expanded") == "true") {
+      $item.removeAttribute("hidden");
+    } else {
+      $item.setAttribute("hidden", true);
+    }
+  }
+}

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 */