govuk_tech_docs 3.4.5 → 4.0.0

data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.mjs

@@ -0,0 +1,295 @@
+import { closestAttributeValue } from '../../common/closest-attribute-value.mjs';
+import { mergeConfigs, validateConfig, formatErrorMessage } from '../../common/index.mjs';
+import { normaliseDataset } from '../../common/normalise-dataset.mjs';
+import { ElementError, ConfigError } from '../../errors/index.mjs';
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
+import { I18n } from '../../i18n.mjs';
+
+/**
+ * Character count component
+ *
+ * Tracks the number of characters or words in the `.govuk-js-character-count`
+ * `<textarea>` inside the element. Displays a message with the remaining number
+ * of characters/words available, or the number of characters/words in excess.
+ *
+ * You can configure the message to only appear after a certain percentage
+ * of the available characters/words has been entered.
+ *
+ * @preserve
+ */
+class CharacterCount extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for character count
+   * @param {CharacterCountConfig} [config] - Character count config
+   */
+  constructor($root, config = {}) {
+    var _ref, _this$config$maxwords;
+    super($root);
+    this.$textarea = void 0;
+    this.$visibleCountMessage = void 0;
+    this.$screenReaderCountMessage = void 0;
+    this.lastInputTimestamp = null;
+    this.lastInputValue = '';
+    this.valueChecker = null;
+    this.config = void 0;
+    this.i18n = void 0;
+    this.maxLength = void 0;
+    const $textarea = this.$root.querySelector('.govuk-js-character-count');
+    if (!($textarea instanceof HTMLTextAreaElement || $textarea instanceof HTMLInputElement)) {
+      throw new ElementError({
+        component: CharacterCount,
+        element: $textarea,
+        expectedType: 'HTMLTextareaElement or HTMLInputElement',
+        identifier: 'Form field (`.govuk-js-character-count`)'
+      });
+    }
+    const datasetConfig = normaliseDataset(CharacterCount, this.$root.dataset);
+    let configOverrides = {};
+    if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
+      configOverrides = {
+        maxlength: undefined,
+        maxwords: undefined
+      };
+    }
+    this.config = mergeConfigs(CharacterCount.defaults, config, configOverrides, datasetConfig);
+    const errors = validateConfig(CharacterCount.schema, this.config);
+    if (errors[0]) {
+      throw new ConfigError(formatErrorMessage(CharacterCount, errors[0]));
+    }
+    this.i18n = new I18n(this.config.i18n, {
+      locale: closestAttributeValue(this.$root, 'lang')
+    });
+    this.maxLength = (_ref = (_this$config$maxwords = this.config.maxwords) != null ? _this$config$maxwords : this.config.maxlength) != null ? _ref : Infinity;
+    this.$textarea = $textarea;
+    const textareaDescriptionId = `${this.$textarea.id}-info`;
+    const $textareaDescription = document.getElementById(textareaDescriptionId);
+    if (!$textareaDescription) {
+      throw new ElementError({
+        component: CharacterCount,
+        element: $textareaDescription,
+        identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
+      });
+    }
+    if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
+      $textareaDescription.textContent = this.i18n.t('textareaDescription', {
+        count: this.maxLength
+      });
+    }
+    this.$textarea.insertAdjacentElement('afterend', $textareaDescription);
+    const $screenReaderCountMessage = document.createElement('div');
+    $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
+    $screenReaderCountMessage.setAttribute('aria-live', 'polite');
+    this.$screenReaderCountMessage = $screenReaderCountMessage;
+    $textareaDescription.insertAdjacentElement('afterend', $screenReaderCountMessage);
+    const $visibleCountMessage = document.createElement('div');
+    $visibleCountMessage.className = $textareaDescription.className;
+    $visibleCountMessage.classList.add('govuk-character-count__status');
+    $visibleCountMessage.setAttribute('aria-hidden', 'true');
+    this.$visibleCountMessage = $visibleCountMessage;
+    $textareaDescription.insertAdjacentElement('afterend', $visibleCountMessage);
+    $textareaDescription.classList.add('govuk-visually-hidden');
+    this.$textarea.removeAttribute('maxlength');
+    this.bindChangeEvents();
+    window.addEventListener('pageshow', () => this.updateCountMessage());
+    this.updateCountMessage();
+  }
+  bindChangeEvents() {
+    this.$textarea.addEventListener('keyup', () => this.handleKeyUp());
+    this.$textarea.addEventListener('focus', () => this.handleFocus());
+    this.$textarea.addEventListener('blur', () => this.handleBlur());
+  }
+  handleKeyUp() {
+    this.updateVisibleCountMessage();
+    this.lastInputTimestamp = Date.now();
+  }
+  handleFocus() {
+    this.valueChecker = window.setInterval(() => {
+      if (!this.lastInputTimestamp || Date.now() - 500 >= this.lastInputTimestamp) {
+        this.updateIfValueChanged();
+      }
+    }, 1000);
+  }
+  handleBlur() {
+    if (this.valueChecker) {
+      window.clearInterval(this.valueChecker);
+    }
+  }
+  updateIfValueChanged() {
+    if (this.$textarea.value !== this.lastInputValue) {
+      this.lastInputValue = this.$textarea.value;
+      this.updateCountMessage();
+    }
+  }
+  updateCountMessage() {
+    this.updateVisibleCountMessage();
+    this.updateScreenReaderCountMessage();
+  }
+  updateVisibleCountMessage() {
+    const remainingNumber = this.maxLength - this.count(this.$textarea.value);
+    const isError = remainingNumber < 0;
+    this.$visibleCountMessage.classList.toggle('govuk-character-count__message--disabled', !this.isOverThreshold());
+    this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    this.$visibleCountMessage.classList.toggle('govuk-error-message', isError);
+    this.$visibleCountMessage.classList.toggle('govuk-hint', !isError);
+    this.$visibleCountMessage.textContent = this.getCountMessage();
+  }
+  updateScreenReaderCountMessage() {
+    if (this.isOverThreshold()) {
+      this.$screenReaderCountMessage.removeAttribute('aria-hidden');
+    } else {
+      this.$screenReaderCountMessage.setAttribute('aria-hidden', 'true');
+    }
+    this.$screenReaderCountMessage.textContent = this.getCountMessage();
+  }
+  count(text) {
+    if (this.config.maxwords) {
+      var _text$match;
+      const tokens = (_text$match = text.match(/\S+/g)) != null ? _text$match : [];
+      return tokens.length;
+    }
+    return text.length;
+  }
+  getCountMessage() {
+    const remainingNumber = this.maxLength - this.count(this.$textarea.value);
+    const countType = this.config.maxwords ? 'words' : 'characters';
+    return this.formatCountMessage(remainingNumber, countType);
+  }
+  formatCountMessage(remainingNumber, countType) {
+    if (remainingNumber === 0) {
+      return this.i18n.t(`${countType}AtLimit`);
+    }
+    const translationKeySuffix = remainingNumber < 0 ? 'OverLimit' : 'UnderLimit';
+    return this.i18n.t(`${countType}${translationKeySuffix}`, {
+      count: Math.abs(remainingNumber)
+    });
+  }
+  isOverThreshold() {
+    if (!this.config.threshold) {
+      return true;
+    }
+    const currentLength = this.count(this.$textarea.value);
+    const maxLength = this.maxLength;
+    const thresholdValue = maxLength * this.config.threshold / 100;
+    return thresholdValue <= currentLength;
+  }
+}
+
+/**
+ * Character count config
+ *
+ * @see {@link CharacterCount.defaults}
+ * @typedef {object} CharacterCountConfig
+ * @property {number} [maxlength] - The maximum number of characters.
+ *   If maxwords is provided, the maxlength option will be ignored.
+ * @property {number} [maxwords] - The maximum number of words. If maxwords is
+ *   provided, the maxlength option will be ignored.
+ * @property {number} [threshold=0] - The percentage value of the limit at
+ *   which point the count message is displayed. If this attribute is set, the
+ *   count message will be hidden by default.
+ * @property {CharacterCountTranslations} [i18n=CharacterCount.defaults.i18n] - Character count translations
+ */
+
+/**
+ * Character count translations
+ *
+ * @see {@link CharacterCount.defaults.i18n}
+ * @typedef {object} CharacterCountTranslations
+ *
+ * Messages shown to users as they type. It provides feedback on how many words
+ * or characters they have remaining or if they are over the limit. This also
+ * includes a message used as an accessible description for the textarea.
+ * @property {TranslationPluralForms} [charactersUnderLimit] - Message displayed
+ *   when the number of characters is under the configured maximum, `maxlength`.
+ *   This message is displayed visually and through assistive technologies. The
+ *   component will replace the `%{count}` placeholder with the number of
+ *   remaining characters. This is a [pluralised list of
+ *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
+ * @property {string} [charactersAtLimit] - Message displayed when the number of
+ *   characters reaches the configured maximum, `maxlength`. This message is
+ *   displayed visually and through assistive technologies.
+ * @property {TranslationPluralForms} [charactersOverLimit] - Message displayed
+ *   when the number of characters is over the configured maximum, `maxlength`.
+ *   This message is displayed visually and through assistive technologies. The
+ *   component will replace the `%{count}` placeholder with the number of
+ *   remaining characters. This is a [pluralised list of
+ *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
+ * @property {TranslationPluralForms} [wordsUnderLimit] - Message displayed when
+ *   the number of words is under the configured maximum, `maxlength`. This
+ *   message is displayed visually and through assistive technologies. The
+ *   component will replace the `%{count}` placeholder with the number of
+ *   remaining words. This is a [pluralised list of
+ *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
+ * @property {string} [wordsAtLimit] - Message displayed when the number of
+ *   words reaches the configured maximum, `maxlength`. This message is
+ *   displayed visually and through assistive technologies.
+ * @property {TranslationPluralForms} [wordsOverLimit] - Message displayed when
+ *   the number of words is over the configured maximum, `maxlength`. This
+ *   message is displayed visually and through assistive technologies. The
+ *   component will replace the `%{count}` placeholder with the number of
+ *   remaining words. This is a [pluralised list of
+ *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
+ * @property {TranslationPluralForms} [textareaDescription] - Message made
+ *   available to assistive technologies, if none is already present in the
+ *   HTML, to describe that the component accepts only a limited amount of
+ *   content. It is visible on the page when JavaScript is unavailable. The
+ *   component will replace the `%{count}` placeholder with the value of the
+ *   `maxlength` or `maxwords` parameter.
+ */
+
+/**
+ * @typedef {import('../../common/index.mjs').Schema} Schema
+ * @typedef {import('../../i18n.mjs').TranslationPluralForms} TranslationPluralForms
+ */
+CharacterCount.moduleName = 'govuk-character-count';
+CharacterCount.defaults = Object.freeze({
+  threshold: 0,
+  i18n: {
+    charactersUnderLimit: {
+      one: 'You have %{count} character remaining',
+      other: 'You have %{count} characters remaining'
+    },
+    charactersAtLimit: 'You have 0 characters remaining',
+    charactersOverLimit: {
+      one: 'You have %{count} character too many',
+      other: 'You have %{count} characters too many'
+    },
+    wordsUnderLimit: {
+      one: 'You have %{count} word remaining',
+      other: 'You have %{count} words remaining'
+    },
+    wordsAtLimit: 'You have 0 words remaining',
+    wordsOverLimit: {
+      one: 'You have %{count} word too many',
+      other: 'You have %{count} words too many'
+    },
+    textareaDescription: {
+      other: ''
+    }
+  }
+});
+CharacterCount.schema = Object.freeze({
+  properties: {
+    i18n: {
+      type: 'object'
+    },
+    maxwords: {
+      type: 'number'
+    },
+    maxlength: {
+      type: 'number'
+    },
+    threshold: {
+      type: 'number'
+    }
+  },
+  anyOf: [{
+    required: ['maxwords'],
+    errorMessage: 'Either "maxlength" or "maxwords" must be provided'
+  }, {
+    required: ['maxlength'],
+    errorMessage: 'Either "maxlength" or "maxwords" must be provided'
+  }]
+});
+
+export { CharacterCount };
+//# sourceMappingURL=character-count.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_checkboxes.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_checkboxes.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/checkboxes/_index.scss

@@ -4,24 +4,18 @@
 @import "../label/index";
 
 @include govuk-exports("govuk/component/checkboxes") {
-
-  $govuk-touch-target-size: 44px;
+  $govuk-touch-target-gutter: 4px;
   $govuk-checkboxes-size: 40px;
+  $govuk-touch-target-size: ($govuk-checkboxes-size + $govuk-touch-target-gutter);
   $govuk-small-checkboxes-size: 24px;
   $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
+  $govuk-checkbox-check-horizontal-position: 10px;
 
   .govuk-checkboxes__item {
-    @include govuk-font($size: 19);
-
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
     position: relative;
-
-    min-height: $govuk-checkboxes-size;
-
     margin-bottom: govuk-spacing(2);
-    padding-left: $govuk-checkboxes-size;
-
-    clear: left;
   }
 
   .govuk-checkboxes__item:last-child,
@@ -30,102 +24,86 @@
   }
 
   .govuk-checkboxes__input {
-    $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2;
-
+    // Allow the input to sit above the label, enabling its proper detection
+    // when exploring by touch or using automation tools like Selenium
+    z-index: 1;
+    width: $govuk-touch-target-size;
+    height: $govuk-touch-target-size;
+    margin: 0;
+    opacity: 0;
     cursor: pointer;
-
-    // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
-    // elements there.
-    @include _govuk-not-ie8 {
-      position: absolute;
-
-      z-index: 1;
-      top: $input-offset * -1;
-      left: $input-offset * -1;
-
-      width: $govuk-touch-target-size;
-      height: $govuk-touch-target-size;
-      margin: 0;
-
-      opacity: 0;
-    }
-
-    @include _govuk-if-ie8 {
-      margin-top: 10px;
-      margin-right: $govuk-checkboxes-size / -2;
-      margin-left: $govuk-checkboxes-size / -2;
-      float: left;
-
-      // add focus outline to input
-      &:focus {
-        outline: $govuk-focus-width solid $govuk-focus-colour;
-      }
-    }
   }
 
   .govuk-checkboxes__label {
-    display: inline-block;
+    align-self: center;
+
+    // Ensure that the width of the label is never more than the width of the
+    // container minus the input width minus the padding on either side of
+    // the label. This prevents the label from going onto the next line due to
+    // __item using flex-wrap because we want hints on a separate line.
+    max-width: calc(100% - #{(($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size)});
     margin-bottom: 0;
-    padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1);
+    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);
     cursor: pointer;
     // remove 300ms pause on mobile
-    -ms-touch-action: manipulation;
-        touch-action: manipulation;
+    touch-action: manipulation;
   }
 
-  @include _govuk-not-ie8 {
-    // [ ] Check box
-    .govuk-checkboxes__label:before {
-      content: "";
-      box-sizing: border-box;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: $govuk-checkboxes-size;
-      height: $govuk-checkboxes-size;
-      border: $govuk-border-width-form-element solid currentcolor;
-      background: transparent;
-    }
-
-    // ✔ Check mark
-    //
-    // The check mark is a box with a border on the left and bottom side (└──),
-    // rotated 45 degrees
-    .govuk-checkboxes__label:after {
-      content: "";
-      box-sizing: border-box;
-
-      position: absolute;
-      top: 11px;
-      left: 9px;
-      width: 23px;
-      height: 12px;
-
-      -webkit-transform: rotate(-45deg);
-
-          -ms-transform: rotate(-45deg);
-
-              transform: rotate(-45deg);
-      border: solid;
-      border-width: 0 0 5px 5px;
-      // Fix bug in IE11 caused by transform rotate (-45deg).
-      // See: alphagov/govuk_elements/issues/518
-      border-top-color: transparent;
-
-      opacity: 0;
+  // [ ] Check box
+  .govuk-checkboxes__label::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: ($govuk-touch-target-gutter / 2);
+    left: ($govuk-touch-target-gutter / 2);
+    width: $govuk-checkboxes-size;
+    height: $govuk-checkboxes-size;
+    border: $govuk-border-width-form-element solid currentcolor;
+    background: transparent;
+  }
 
-      background: transparent;
-    }
+  // ✔ Check mark
+  //
+  // The check mark is a box with a border on the left and bottom side (└──),
+  // rotated 45 degrees
+  .govuk-checkboxes__label::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+
+    // Use "magic numbers" to define shape and position of check mark because
+    // the complexity of the shape makes it difficult to calculate dynamically.
+    top: 13px;
+    left: $govuk-checkbox-check-horizontal-position;
+    width: 23px;
+    height: 12px;
+    transform: rotate(-45deg);
+    border: solid;
+    border-width: 0 0 5px 5px;
+    // Fix bug in IE11 caused by transform rotate (-45deg).
+    // See: alphagov/govuk_elements/issues/518
+    border-top-color: transparent;
+    opacity: 0;
+    background: transparent;
   }
 
   .govuk-checkboxes__hint {
     display: block;
+    width: 100%;
+    margin-top: govuk-spacing(-1);
     padding-right: $govuk-checkboxes-label-padding-left-right;
-    padding-left: $govuk-checkboxes-label-padding-left-right;
+    padding-left: ($govuk-checkboxes-label-padding-left-right + $govuk-touch-target-size);
+  }
+
+  // This is to bypass govuk-hint's specificity on hints following labels having
+  // a margin bottom of 10px (govuk-spacing(2)). Because checkboxes are flexbox,
+  // the margin doesn't collapse so we have to do this manually.
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-checkboxes__hint {
+    margin-bottom: 0;
   }
 
   // Focused state
-  .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
     border-width: 4px;
 
     // When colours are overridden, the yellow box-shadow becomes invisible
@@ -145,7 +123,7 @@
   }
 
   // Selected state
-  .govuk-checkboxes__input:checked + .govuk-checkboxes__label:after {
+  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
     opacity: 1;
   }
 
@@ -157,7 +135,7 @@
 
   .govuk-checkboxes__input:disabled + .govuk-checkboxes__label,
   .govuk-checkboxes__input:disabled ~ .govuk-hint {
-    opacity: .5;
+    opacity: 0.5;
   }
 
   // =========================================================
@@ -165,9 +143,9 @@
   // =========================================================
 
   .govuk-checkboxes__divider {
-    $govuk-divider-size: $govuk-checkboxes-size !default;
     @include govuk-font($size: 19);
     @include govuk-text-colour;
+    $govuk-divider-size: $govuk-checkboxes-size !default;
     width: $govuk-divider-size;
     margin-bottom: govuk-spacing(2);
     text-align: center;
@@ -181,7 +159,7 @@
   // to be an even number in order to be centred under the 40px checkbox or radio.
   $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
-  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the checkbox
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label
@@ -193,7 +171,7 @@
     padding-left: $conditional-padding-left;
     border-left: $conditional-border-width solid $govuk-border-colour;
 
-    .js-enabled &--hidden {
+    .govuk-frontend-supported &--hidden {
       display: none;
     }
 
@@ -207,16 +185,10 @@
   // =========================================================
 
   .govuk-checkboxes--small {
-
     $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;
-    $label-offset: $govuk-touch-target-size - $input-offset;
 
     .govuk-checkboxes__item {
-      @include govuk-clearfix;
-      min-height: 0;
       margin-bottom: 0;
-      padding-left: $label-offset;
-      float: left;
     }
 
     // Shift the touch target into the left margin so that the visible edge of
@@ -229,36 +201,23 @@
     //  ▲┆└─ Check box pseudo element, aligned with margin
     //  └─── Touch target (invisible input), shifted into the margin
     .govuk-checkboxes__input {
-      @include _govuk-not-ie8 {
-        left: $input-offset * -1;
-      }
-
-      @include _govuk-if-ie8 {
-        margin-left: $govuk-small-checkboxes-size * -1;
-      }
+      margin-left: $input-offset * -1;
     }
 
-    // Adjust the size and position of the label.
-    //
-    // Unlike larger checkboxes, we also have to float the label in order to
-    // 'shrink' it, preventing the hover state from kicking in across the full
-    // width of the parent element.
     .govuk-checkboxes__label {
-      margin-top: -2px;
-      padding: 13px govuk-spacing(3) 13px 1px;
-      float: left;
-
-      @include govuk-media-query($from: tablet) {
-        padding: 11px govuk-spacing(3) 10px 1px;
-      }
+      // Create a tiny space between the small checkbox hover state so that it
+      // doesn't clash with the label
+      padding-left: 1px;
     }
 
     // [ ] Check box
     //
     // Reduce the size of the check box [1], vertically center it within the
     // touch target [2]
-    .govuk-checkboxes__label:before {
-      top: $input-offset - $govuk-border-width-form-element; // 2
+    // Left here is 0 because we've shifted the input into the left margin
+    .govuk-checkboxes__label::before {
+      top: $input-offset; // 2
+      left: 0;
       width: $govuk-small-checkboxes-size; // 1
       height: $govuk-small-checkboxes-size; // 1
     }
@@ -266,9 +225,12 @@
     // ✔ Check mark
     //
     // Reduce the size of the check mark and re-align within the checkbox
-    .govuk-checkboxes__label:after {
-      top: 15px;
-      left: 6px;
+    .govuk-checkboxes__label::after {
+      top: 17px;
+
+      // Horizontal position is just the normal sized left value accounting for
+      // the new width of the smaller checkbox
+      left: (16px - $govuk-checkbox-check-horizontal-position);
       width: 12px;
       height: 6.5px;
       border-width: 0 0 3px 3px;
@@ -283,16 +245,19 @@
     // (If you do use them, they won't look completely broken... but seriously,
     // don't use them)
     .govuk-checkboxes__hint {
-      padding: 0;
-      clear: both;
+      padding-left: ($govuk-small-checkboxes-size + $input-offset);
     }
 
     // Align conditional reveals with small checkboxes
     .govuk-checkboxes__conditional {
       $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);
       margin-left: $margin-left;
-      padding-left: $label-offset - ($margin-left + $conditional-border-width);
-      clear: both;
+      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
+    }
+
+    .govuk-checkboxes__divider {
+      width: $govuk-small-checkboxes-size;
+      margin-bottom: govuk-spacing(1);
     }
 
     // Hover state for small checkboxes.
@@ -301,7 +266,11 @@
     // is so much larger than their visible size, and so we need to provide
     // feedback to the user as to which checkbox they will select when their
     // cursor is outside of the visible area.
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+      // Forced colours modes tend to ignore box-shadow.
+      // Apply an outline for those modes to use instead.
+      outline: $govuk-focus-width dashed transparent;
+      outline-offset: 1px;
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -310,7 +279,12 @@
     //
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+      // Set different HCM colour when we have both hover/focus applied at once
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        outline-color: Highlight;
+      }
+      // prettier-ignore
       box-shadow:
         0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
         0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
@@ -323,13 +297,15 @@
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
     @media (hover: none), (pointer: coarse) {
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
         box-shadow: initial;
       }
 
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
         box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
       }
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */