defra_ruby_template 5.11.1 → 6.6.0

data/node_modules/govuk-frontend/dist/govuk/components/error-summary/error-summary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"error-summary.mjs","sources":["../../../../src/govuk/components/error-summary/error-summary.mjs"],"sourcesContent":["import { ConfigurableComponent } from '../../common/configuration.mjs'\nimport { getFragmentFromUrl, setFocus } from '../../common/index.mjs'\n\n/**\n * Error summary component\n *\n * Takes focus on initialisation for accessible announcement, unless disabled in\n * configuration.\n *\n * @preserve\n * @augments ConfigurableComponent<ErrorSummaryConfig>\n */\nexport class ErrorSummary extends ConfigurableComponent {\n  /**\n   * @param {Element | null} $root - HTML element to use for error summary\n   * @param {ErrorSummaryConfig} [config] - Error summary config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    /**\n     * Focus the error summary\n     */\n    if (!this.config.disableAutoFocus) {\n      setFocus(this.$root)\n    }\n\n    this.$root.addEventListener('click', (event) => this.handleClick(event))\n  }\n\n  /**\n   * Click event handler\n   *\n   * @private\n   * @param {MouseEvent} event - Click event\n   */\n  handleClick(event) {\n    const $target = event.target\n    if ($target && this.focusTarget($target)) {\n      event.preventDefault()\n    }\n  }\n\n  /**\n   * Focus the target element\n   *\n   * By default, the browser will scroll the target into view. Because our\n   * labels or legends appear above the input, this means the user will be\n   * presented with an input without any context, as the label or legend will be\n   * off the top of the screen.\n   *\n   * Manually handling the click event, scrolling the question into view and\n   * then focussing the element solves this.\n   *\n   * This also results in the label and/or legend being announced correctly in\n   * NVDA (as tested in 2018.3.2) - without this only the field type is\n   * announced (e.g. \"Edit, has autocomplete\").\n   *\n   * @private\n   * @param {EventTarget} $target - Event target\n   * @returns {boolean} True if the target was able to be focussed\n   */\n  focusTarget($target) {\n    // If the element that was clicked was not a link, return early\n    if (!($target instanceof HTMLAnchorElement)) {\n      return false\n    }\n\n    const inputId = getFragmentFromUrl($target.href)\n    if (!inputId) {\n      return false\n    }\n\n    const $input = document.getElementById(inputId)\n    if (!$input) {\n      return false\n    }\n\n    const $legendOrLabel = this.getAssociatedLegendOrLabel($input)\n    if (!$legendOrLabel) {\n      return false\n    }\n\n    // Scroll the legend or label into view *before* calling focus on the input\n    // to avoid extra scrolling in browsers that don't support `preventScroll`\n    // (which at time of writing is most of them...)\n    $legendOrLabel.scrollIntoView()\n    $input.focus({ preventScroll: true })\n\n    return true\n  }\n\n  /**\n   * Get associated legend or label\n   *\n   * Returns the first element that exists from this list:\n   *\n   * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long\n   *   as the top of it is no more than half a viewport height away from the\n   *   bottom of the input\n   * - The first `<label>` that is associated with the input using for=\"inputId\"\n   * - The closest parent `<label>`\n   *\n   * @private\n   * @param {Element} $input - The input\n   * @returns {Element | null} Associated legend or label, or null if no\n   *   associated legend or label can be found\n   */\n  getAssociatedLegendOrLabel($input) {\n    const $fieldset = $input.closest('fieldset')\n\n    if ($fieldset) {\n      const $legends = $fieldset.getElementsByTagName('legend')\n\n      if ($legends.length) {\n        const $candidateLegend = $legends[0]\n\n        // If the input type is radio or checkbox, always use the legend if\n        // there is one.\n        if (\n          $input instanceof HTMLInputElement &&\n          ($input.type === 'checkbox' || $input.type === 'radio')\n        ) {\n          return $candidateLegend\n        }\n\n        // For other input types, only scroll to the fieldset’s legend (instead\n        // of the label associated with the input) if the input would end up in\n        // the top half of the screen.\n        //\n        // This should avoid situations where the input either ends up off the\n        // screen, or obscured by a software keyboard.\n        const legendTop = $candidateLegend.getBoundingClientRect().top\n        const inputRect = $input.getBoundingClientRect()\n\n        // If the browser doesn't support Element.getBoundingClientRect().height\n        // or window.innerHeight (like IE8), bail and just link to the label.\n        if (inputRect.height && window.innerHeight) {\n          const inputBottom = inputRect.top + inputRect.height\n\n          if (inputBottom - legendTop < window.innerHeight / 2) {\n            return $candidateLegend\n          }\n        }\n      }\n    }\n\n    return (\n      document.querySelector(`label[for='${$input.getAttribute('id')}']`) ??\n      $input.closest('label')\n    )\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-error-summary'\n\n  /**\n   * Error summary default config\n   *\n   * @see {@link ErrorSummaryConfig}\n   * @constant\n   * @type {ErrorSummaryConfig}\n   */\n  static defaults = Object.freeze({\n    disableAutoFocus: false\n  })\n\n  /**\n   * Error summary config schema\n   *\n   * @constant\n   * @satisfies {Schema<ErrorSummaryConfig>}\n   */\n  static schema = Object.freeze({\n    properties: {\n      disableAutoFocus: { type: 'boolean' }\n    }\n  })\n}\n\n/**\n * Error summary config\n *\n * @typedef {object} ErrorSummaryConfig\n * @property {boolean} [disableAutoFocus=false] - If set to `true` the error\n *   summary will not be focussed when the page loads.\n */\n\n/**\n * @import { Schema } from '../../common/configuration.mjs'\n */\n"],"names":["ErrorSummary","ConfigurableComponent","constructor","$root","config","disableAutoFocus","setFocus","addEventListener","event","handleClick","$target","target","focusTarget","preventDefault","HTMLAnchorElement","inputId","getFragmentFromUrl","href","$input","document","getElementById","$legendOrLabel","getAssociatedLegendOrLabel","scrollIntoView","focus","preventScroll","_document$querySelect","$fieldset","closest","$legends","getElementsByTagName","length","$candidateLegend","HTMLInputElement","type","legendTop","getBoundingClientRect","top","inputRect","height","window","innerHeight","inputBottom","querySelector","getAttribute","moduleName","defaults","Object","freeze","schema","properties"],"mappings":"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"}
+{"version":3,"file":"error-summary.mjs","sources":["../../../../src/govuk/components/error-summary/error-summary.mjs"],"sourcesContent":["import { ConfigurableComponent } from '../../common/configuration.mjs'\nimport { setFocus } from '../../common/index.mjs'\n\n/**\n * Error summary component\n *\n * Takes focus on initialisation for accessible announcement, unless disabled in\n * configuration.\n *\n * @preserve\n * @augments ConfigurableComponent<ErrorSummaryConfig>\n */\nexport class ErrorSummary extends ConfigurableComponent {\n  /**\n   * @param {Element | null} $root - HTML element to use for error summary\n   * @param {ErrorSummaryConfig} [config] - Error summary config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    /**\n     * Focus the error summary\n     */\n    if (!this.config.disableAutoFocus) {\n      setFocus(this.$root)\n    }\n\n    this.$root.addEventListener('click', (event) => this.handleClick(event))\n  }\n\n  /**\n   * Click event handler\n   *\n   * @private\n   * @param {MouseEvent} event - Click event\n   */\n  handleClick(event) {\n    const $target = event.target\n    if ($target && this.focusTarget($target)) {\n      event.preventDefault()\n    }\n  }\n\n  /**\n   * Focus the target element\n   *\n   * By default, the browser will scroll the target into view. Because our\n   * labels or legends appear above the input, this means the user will be\n   * presented with an input without any context, as the label or legend will be\n   * off the top of the screen.\n   *\n   * Manually handling the click event, scrolling the question into view and\n   * then focussing the element solves this.\n   *\n   * This also results in the label and/or legend being announced correctly in\n   * NVDA (as tested in 2018.3.2) - without this only the field type is\n   * announced (e.g. \"Edit, has autocomplete\").\n   *\n   * @private\n   * @param {EventTarget} $target - Event target\n   * @returns {boolean} True if the target was able to be focussed\n   */\n  focusTarget($target) {\n    // If the element that was clicked was not a link, return early\n    if (!($target instanceof HTMLAnchorElement)) {\n      return false\n    }\n\n    const inputId = $target.hash.replace('#', '')\n    if (!inputId) {\n      return false\n    }\n\n    const $input = document.getElementById(inputId)\n    if (!$input) {\n      return false\n    }\n\n    const $legendOrLabel = this.getAssociatedLegendOrLabel($input)\n    if (!$legendOrLabel) {\n      return false\n    }\n\n    // Scroll the legend or label into view *before* calling focus on the input\n    // to avoid extra scrolling in browsers that don't support `preventScroll`\n    // (which at time of writing is most of them...)\n    $legendOrLabel.scrollIntoView()\n    $input.focus({ preventScroll: true })\n\n    return true\n  }\n\n  /**\n   * Get associated legend or label\n   *\n   * Returns the first element that exists from this list:\n   *\n   * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long\n   *   as the top of it is no more than half a viewport height away from the\n   *   bottom of the input\n   * - The first `<label>` that is associated with the input using for=\"inputId\"\n   * - The closest parent `<label>`\n   *\n   * @private\n   * @param {Element} $input - The input\n   * @returns {Element | null} Associated legend or label, or null if no\n   *   associated legend or label can be found\n   */\n  getAssociatedLegendOrLabel($input) {\n    const $fieldset = $input.closest('fieldset')\n\n    if ($fieldset) {\n      const $legends = $fieldset.getElementsByTagName('legend')\n\n      if ($legends.length) {\n        const $candidateLegend = $legends[0]\n\n        // If the input type is radio or checkbox, always use the legend if\n        // there is one.\n        if (\n          $input instanceof HTMLInputElement &&\n          ($input.type === 'checkbox' || $input.type === 'radio')\n        ) {\n          return $candidateLegend\n        }\n\n        // For other input types, only scroll to the fieldset’s legend (instead\n        // of the label associated with the input) if the input would end up in\n        // the top half of the screen.\n        //\n        // This should avoid situations where the input either ends up off the\n        // screen, or obscured by a software keyboard.\n        const legendTop = $candidateLegend.getBoundingClientRect().top\n        const inputRect = $input.getBoundingClientRect()\n\n        // If the browser doesn't support Element.getBoundingClientRect().height\n        // or window.innerHeight (like IE8), bail and just link to the label.\n        if (inputRect.height && window.innerHeight) {\n          const inputBottom = inputRect.top + inputRect.height\n\n          if (inputBottom - legendTop < window.innerHeight / 2) {\n            return $candidateLegend\n          }\n        }\n      }\n    }\n\n    return (\n      document.querySelector(`label[for='${$input.getAttribute('id')}']`) ??\n      $input.closest('label')\n    )\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-error-summary'\n\n  /**\n   * Error summary default config\n   *\n   * @see {@link ErrorSummaryConfig}\n   * @constant\n   * @type {ErrorSummaryConfig}\n   */\n  static defaults = Object.freeze({\n    disableAutoFocus: false\n  })\n\n  /**\n   * Error summary config schema\n   *\n   * @constant\n   * @satisfies {Schema<ErrorSummaryConfig>}\n   */\n  static schema = Object.freeze({\n    properties: {\n      disableAutoFocus: { type: 'boolean' }\n    }\n  })\n}\n\n/**\n * Error summary config\n *\n * @typedef {object} ErrorSummaryConfig\n * @property {boolean} [disableAutoFocus=false] - If set to `true` the error\n *   summary will not be focussed when the page loads.\n */\n\n/**\n * @import { Schema } from '../../common/configuration.mjs'\n */\n"],"names":["ErrorSummary","ConfigurableComponent","constructor","$root","config","disableAutoFocus","setFocus","addEventListener","event","handleClick","$target","target","focusTarget","preventDefault","HTMLAnchorElement","inputId","hash","replace","$input","document","getElementById","$legendOrLabel","getAssociatedLegendOrLabel","scrollIntoView","focus","preventScroll","_document$querySelect","$fieldset","closest","$legends","getElementsByTagName","length","$candidateLegend","HTMLInputElement","type","legendTop","getBoundingClientRect","top","inputRect","height","window","innerHeight","inputBottom","querySelector","getAttribute","moduleName","defaults","Object","freeze","schema","properties"],"mappings":"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"}

data/node_modules/govuk-frontend/dist/govuk/components/error-summary/fixtures.json

@@ -18,8 +18,8 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
+            "pageTemplateOptions": {},
+            "screenshot": true,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n          </li>\n          <li>\n            <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -34,7 +34,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -54,7 +54,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n          <li>\n            <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -66,7 +66,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <p>\n        The file couldn&#39;t be loaded. Try again later.\n      </p>\n    </div>\n  </div>\n</div>"
         },
@@ -87,8 +87,8 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
+            "pageTemplateOptions": {},
+            "screenshot": true,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <p>\n        Please fix the errors below.\n      </p>\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n          <li>\n            <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -103,7 +103,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Alert, &lt;em&gt;alert&lt;/em&gt;\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -119,7 +119,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Alert, <em>alert</em>\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -136,7 +136,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <p>\n        Lorem ipsum\n      </p>\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -153,7 +153,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <p>\n        See errors below (&gt;)\n      </p>\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -170,7 +170,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <p>\n        See <span>errors</span> below\n      </p>\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -187,7 +187,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary extra-class one-more-class\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -207,7 +207,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -228,7 +228,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -244,7 +244,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -260,7 +260,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            The date your passport was issued <b>must</b> be in the past\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -277,7 +277,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -294,7 +294,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -306,7 +306,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"true\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n    </div>\n  </div>\n</div>"
         },
@@ -318,7 +318,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"false\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n    </div>\n  </div>\n</div>"
         }

data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/_exit-this-page.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("exit-this-page");
+
+@import "index";
+

data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/_index.import.scss

@@ -0,0 +1,9 @@
+@use "mixin";
+
+@import "../../base";
+@import "../button";
+
+@include govuk-exports("govuk/component/exit-this-page") {
+  @include mixin.styles;
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/_index.scss

@@ -1,92 +1,7 @@
-@import "../button/index";
+@use "../../custom-properties";
 
-@include govuk-exports("govuk/component/exit-this-page") {
-  $indicator-size: 0.75em;
+@use "mixin";
+@use "../button";
 
-  .govuk-exit-this-page {
-    @include govuk-responsive-margin(8, "bottom");
-    position: -webkit-sticky;
-    position: sticky;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    width: 100%;
+@include mixin.styles;
 
-    @include govuk-media-query($from: tablet) {
-      display: inline-block;
-      right: 0;
-      left: auto;
-      width: auto;
-      float: right;
-    }
-  }
-
-  .govuk-exit-this-page__button {
-    margin-bottom: 0;
-  }
-
-  .govuk-exit-this-page__indicator {
-    @include govuk-responsive-padding(2);
-    display: none;
-    padding-bottom: 0;
-    color: inherit;
-    line-height: 0; // removes extra negative space below the indicators
-    text-align: center;
-    pointer-events: none;
-  }
-
-  .govuk-exit-this-page__indicator--visible {
-    display: block;
-  }
-
-  .govuk-exit-this-page__indicator-light {
-    box-sizing: border-box;
-    display: inline-block;
-    width: $indicator-size;
-    height: $indicator-size;
-    margin: 0 0.125em;
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 50%;
-    border-color: currentcolor;
-  }
-
-  .govuk-exit-this-page__indicator-light--on {
-    border-width: $indicator-size / 2;
-  }
-
-  @media only print {
-    .govuk-exit-this-page {
-      display: none;
-    }
-  }
-
-  .govuk-exit-this-page-overlay {
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: govuk-colour("white");
-  }
-
-  // This class is added to the body when the Exit This Page button is activated
-  // in addition to the overlay to both block the entire screen and hide everything
-  // underneath it.
-  //
-  // We do this to ensure that users don't risk interacting with the page underneath
-  // the overlay between activating the button and navigating to the next page.
-  .govuk-exit-this-page-hide-content {
-    // stylelint-disable declaration-no-important
-    * {
-      display: none !important;
-    }
-
-    .govuk-exit-this-page-overlay {
-      display: block !important;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/_mixin.scss

@@ -0,0 +1,96 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  $indicator-size: 0.75em;
+
+  .govuk-exit-this-page {
+    @include base.govuk-responsive-margin(8, "bottom");
+    position: -webkit-sticky;
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      display: inline-block;
+      right: 0;
+      left: auto;
+      width: auto;
+      float: right;
+    }
+  }
+
+  .govuk-exit-this-page__button {
+    margin-bottom: 0;
+  }
+
+  .govuk-exit-this-page__indicator {
+    @include base.govuk-responsive-padding(2);
+    display: none;
+    padding-bottom: 0;
+    pointer-events: none;
+    color: inherit;
+    line-height: 0; // removes extra negative space below the indicators
+    text-align: center;
+  }
+
+  .govuk-exit-this-page__indicator--visible {
+    display: block;
+  }
+
+  .govuk-exit-this-page__indicator-light {
+    box-sizing: border-box;
+    display: inline-block;
+    width: $indicator-size;
+    height: $indicator-size;
+    margin: 0 0.125em;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+    border-color: currentcolor;
+  }
+
+  .govuk-exit-this-page__indicator-light--on {
+    border-width: $indicator-size * 0.5;
+  }
+
+  @media only print {
+    .govuk-exit-this-page {
+      display: none;
+    }
+  }
+
+  .govuk-exit-this-page-overlay {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    // The overlay is imitating a default browser window so we can use
+    // system colours ensure it matches the browser's default colours.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color
+    color: CanvasText;
+    background-color: Canvas;
+  }
+
+  // This class is added to the body when the Exit This Page button is activated
+  // in addition to the overlay to both block the entire screen and hide everything
+  // underneath it.
+  //
+  // We do this to ensure that users don't risk interacting with the page underneath
+  // the overlay between activating the button and navigating to the next page.
+  .govuk-exit-this-page-hide-content {
+    // stylelint-disable declaration-no-important
+    * {
+      display: none !important;
+    }
+
+    .govuk-exit-this-page-overlay {
+      display: block !important;
+    }
+  }
+}
+