govuk_publishing_components 67.1.0 → 68.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"character-count.mjs","sources":["../../../../src/govuk/components/character-count/character-count.mjs"],"sourcesContent":["import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'\nimport {\n  validateConfig,\n  ConfigurableComponent,\n  configOverride\n} from '../../common/configuration.mjs'\nimport { formatErrorMessage } from '../../common/index.mjs'\nimport { ConfigError, ElementError } from '../../errors/index.mjs'\nimport { I18n } from '../../i18n.mjs'\n\n/**\n * Character count component\n *\n * Tracks the number of characters or words in the `.govuk-js-character-count`\n * `<textarea>` inside the element. Displays a message with the remaining number\n * of characters/words available, or the number of characters/words in excess.\n *\n * You can configure the message to only appear after a certain percentage\n * of the available characters/words has been entered.\n *\n * @preserve\n * @augments ConfigurableComponent<CharacterCountConfig>\n */\nexport class CharacterCount extends ConfigurableComponent {\n  /** @private */\n  $textarea\n\n  /** @private */\n  $visibleCountMessage\n\n  /** @private */\n  $screenReaderCountMessage\n\n  /**\n   * @private\n   * @type {number | null}\n   */\n  lastInputTimestamp = null\n\n  /** @private */\n  lastInputValue = ''\n\n  /**\n   * @private\n   * @type {number | null}\n   */\n  valueChecker = null\n\n  /** @private */\n  i18n\n\n  /** @private */\n  maxLength;\n\n  /**\n   * Character count config override\n   *\n   * To ensure data-attributes take complete precedence, even if they change\n   * the type of count, we need to reset the `maxlength` and `maxwords` from\n   * the JavaScript config.\n   *\n   * @internal\n   * @param {CharacterCountConfig} datasetConfig - configuration specified by dataset\n   * @returns {CharacterCountConfig} - configuration to override by dataset\n   */\n  [configOverride](datasetConfig) {\n    let configOverrides = {}\n    if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {\n      configOverrides = {\n        maxlength: undefined,\n        maxwords: undefined\n      }\n    }\n\n    return configOverrides\n  }\n\n  /**\n   * @param {Element | null} $root - HTML element to use for character count\n   * @param {CharacterCountConfig} [config] - Character count config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    const $textarea = this.$root.querySelector('.govuk-js-character-count')\n    if (\n      !(\n        $textarea instanceof HTMLTextAreaElement ||\n        $textarea instanceof HTMLInputElement\n      )\n    ) {\n      throw new ElementError({\n        component: CharacterCount,\n        element: $textarea,\n        expectedType: 'HTMLTextareaElement or HTMLInputElement',\n        identifier: 'Form field (`.govuk-js-character-count`)'\n      })\n    }\n\n    // Check for valid config\n    const errors = validateConfig(CharacterCount.schema, this.config)\n    if (errors[0]) {\n      throw new ConfigError(formatErrorMessage(CharacterCount, errors[0]))\n    }\n\n    this.i18n = new I18n(this.config.i18n, {\n      // Read the fallback if necessary rather than have it set in the defaults\n      locale: closestAttributeValue(this.$root, 'lang')\n    })\n\n    // Determine the limit attribute (characters or words)\n    this.maxLength = this.config.maxwords ?? this.config.maxlength ?? Infinity\n\n    this.$textarea = $textarea\n\n    const textareaDescriptionId = `${this.$textarea.id}-info`\n    const $textareaDescription = document.getElementById(textareaDescriptionId)\n    if (!$textareaDescription) {\n      throw new ElementError({\n        component: CharacterCount,\n        element: $textareaDescription,\n        identifier: `Count message (\\`id=\"${textareaDescriptionId}\"\\`)`\n      })\n    }\n\n    // Pre-existing validation error rendered from server\n    this.$errorMessage = this.$root.querySelector('.govuk-error-message')\n\n    // Inject a description for the textarea if none is present already\n    // for when the component was rendered with no maxlength, maxwords\n    // nor custom textareaDescriptionText\n    // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec\n    if ($textareaDescription.textContent.match(/^\\s*$/)) {\n      $textareaDescription.textContent = this.i18n.t('textareaDescription', {\n        count: this.maxLength\n      })\n    }\n\n    // Move the textarea description to be immediately after the textarea\n    // Kept for backwards compatibility\n    this.$textarea.insertAdjacentElement('afterend', $textareaDescription)\n\n    // Create the *screen reader* specific live-updating counter\n    // This doesn't need any styling classes, as it is never visible\n    const $screenReaderCountMessage = document.createElement('div')\n    $screenReaderCountMessage.className =\n      'govuk-character-count__sr-status govuk-visually-hidden'\n    $screenReaderCountMessage.setAttribute('aria-live', 'polite')\n    this.$screenReaderCountMessage = $screenReaderCountMessage\n    $textareaDescription.insertAdjacentElement(\n      'afterend',\n      $screenReaderCountMessage\n    )\n\n    // Create our live-updating counter element, copying the classes from the\n    // textarea description for backwards compatibility as these may have been\n    // configured\n    const $visibleCountMessage = document.createElement('div')\n    $visibleCountMessage.className = $textareaDescription.className\n    $visibleCountMessage.classList.add('govuk-character-count__status')\n    $visibleCountMessage.setAttribute('aria-hidden', 'true')\n    this.$visibleCountMessage = $visibleCountMessage\n    $textareaDescription.insertAdjacentElement('afterend', $visibleCountMessage)\n\n    // Hide the textarea description\n    $textareaDescription.classList.add('govuk-visually-hidden')\n\n    // Remove hard limit if set\n    this.$textarea.removeAttribute('maxlength')\n\n    this.bindChangeEvents()\n\n    // When the page is restored after navigating 'back' in some browsers the\n    // state of form controls is not restored until *after* the DOMContentLoaded\n    // event is fired, so we need to sync after the pageshow event.\n    window.addEventListener('pageshow', () => this.updateCountMessage())\n\n    // Although we've set up handlers to sync state on the pageshow event, init\n    // could be called after those events have fired, for example if they are\n    // added to the page dynamically, so update now too.\n    this.updateCountMessage()\n  }\n\n  /**\n   * Bind change events\n   *\n   * Set up event listeners on the $textarea so that the count messages update\n   * when the user types.\n   *\n   * @private\n   */\n  bindChangeEvents() {\n    this.$textarea.addEventListener('keyup', () => this.handleKeyUp())\n\n    // Bind focus/blur events to start/stop polling\n    this.$textarea.addEventListener('focus', () => this.handleFocus())\n    this.$textarea.addEventListener('blur', () => this.handleBlur())\n  }\n\n  /**\n   * Handle key up event\n   *\n   * Update the visible character counter and keep track of when the last update\n   * happened for each keypress\n   *\n   * @private\n   */\n  handleKeyUp() {\n    this.updateVisibleCountMessage()\n    this.lastInputTimestamp = Date.now()\n  }\n\n  /**\n   * Handle focus event\n   *\n   * Speech recognition software such as Dragon NaturallySpeaking will modify\n   * the fields by directly changing its `value`. These changes don't trigger\n   * events in JavaScript, so we need to poll to handle when and if they occur.\n   *\n   * Once the keyup event hasn't been detected for at least 1000 ms (1s), check\n   * if the textarea value has changed and update the count message if it has.\n   *\n   * This is so that the update triggered by the manual comparison doesn't\n   * conflict with debounced KeyboardEvent updates.\n   *\n   * @private\n   */\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        Date.now() - 500 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged()\n      }\n    }, 1000)\n  }\n\n  /**\n   * Handle blur event\n   *\n   * Stop checking the textarea value once the textarea no longer has focus\n   *\n   * @private\n   */\n  handleBlur() {\n    // Cancel value checking on blur\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker)\n    }\n  }\n\n  /**\n   * Update count message if textarea value has changed\n   *\n   * @private\n   */\n  updateIfValueChanged() {\n    if (this.$textarea.value !== this.lastInputValue) {\n      this.lastInputValue = this.$textarea.value\n      this.updateCountMessage()\n    }\n  }\n\n  /**\n   * Update count message\n   *\n   * Helper function to update both the visible and screen reader-specific\n   * counters simultaneously (e.g. on init)\n   *\n   * @private\n   */\n  updateCountMessage() {\n    this.updateVisibleCountMessage()\n    this.updateScreenReaderCountMessage()\n  }\n\n  /**\n   * Update visible count message\n   *\n   * @private\n   */\n  updateVisibleCountMessage() {\n    const remainingNumber = this.maxLength - this.count(this.$textarea.value)\n    const isError = remainingNumber < 0\n\n    // If input is over the threshold, remove the disabled class which renders\n    // the counter invisible.\n    this.$visibleCountMessage.classList.toggle(\n      'govuk-character-count__message--disabled',\n      !this.isOverThreshold()\n    )\n\n    // Update styles\n    if (!this.$errorMessage) {\n      // Only toggle the textarea error class if there isn't an error message\n      // already, as it may be unrelated to the limit (eg: allowed characters)\n      // and would set the border colour back to black.\n      this.$textarea.classList.toggle('govuk-textarea--error', isError)\n    }\n    this.$visibleCountMessage.classList.toggle('govuk-error-message', isError)\n    this.$visibleCountMessage.classList.toggle('govuk-hint', !isError)\n\n    // Update message\n    this.$visibleCountMessage.textContent = this.getCountMessage()\n  }\n\n  /**\n   * Update screen reader count message\n   *\n   * @private\n   */\n  updateScreenReaderCountMessage() {\n    // If over the threshold, remove the aria-hidden attribute, allowing screen\n    // readers to announce the content of the element.\n    if (this.isOverThreshold()) {\n      this.$screenReaderCountMessage.removeAttribute('aria-hidden')\n    } else {\n      this.$screenReaderCountMessage.setAttribute('aria-hidden', 'true')\n    }\n\n    // Update message\n    this.$screenReaderCountMessage.textContent = this.getCountMessage()\n  }\n\n  /**\n   * Count the number of characters (or words, if `config.maxwords` is set)\n   * in the given text\n   *\n   * @private\n   * @param {string} text - The text to count the characters of\n   * @returns {number} the number of characters (or words) in the text\n   */\n  count(text) {\n    if (this.config.maxwords) {\n      const tokens = text.match(/\\S+/g) ?? [] // Matches consecutive non-whitespace chars\n      return tokens.length\n    }\n\n    return text.length\n  }\n\n  /**\n   * Get count message\n   *\n   * @private\n   * @returns {string} Status message\n   */\n  getCountMessage() {\n    const remainingNumber = this.maxLength - this.count(this.$textarea.value)\n    const countType = this.config.maxwords ? 'words' : 'characters'\n    return this.formatCountMessage(remainingNumber, countType)\n  }\n\n  /**\n   * Formats the message shown to users according to what's counted\n   * and how many remain\n   *\n   * @private\n   * @param {number} remainingNumber - The number of words/characaters remaining\n   * @param {string} countType - \"words\" or \"characters\"\n   * @returns {string} Status message\n   */\n  formatCountMessage(remainingNumber, countType) {\n    if (remainingNumber === 0) {\n      return this.i18n.t(`${countType}AtLimit`)\n    }\n\n    const translationKeySuffix =\n      remainingNumber < 0 ? 'OverLimit' : 'UnderLimit'\n\n    return this.i18n.t(`${countType}${translationKeySuffix}`, {\n      count: Math.abs(remainingNumber)\n    })\n  }\n\n  /**\n   * Check if count is over threshold\n   *\n   * Checks whether the value is over the configured threshold for the input.\n   * If there is no configured threshold, it is set to 0 and this function will\n   * always return true.\n   *\n   * @private\n   * @returns {boolean} true if the current count is over the config.threshold\n   *   (or no threshold is set)\n   */\n  isOverThreshold() {\n    // No threshold means we're always above threshold so save some computation\n    if (!this.config.threshold) {\n      return true\n    }\n\n    // Determine the remaining number of characters/words\n    const currentLength = this.count(this.$textarea.value)\n    const maxLength = this.maxLength\n\n    const thresholdValue = (maxLength * this.config.threshold) / 100\n\n    return thresholdValue <= currentLength\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-character-count'\n\n  /**\n   * Character count default config\n   *\n   * @see {@link CharacterCountConfig}\n   * @constant\n   * @type {CharacterCountConfig}\n   */\n  static defaults = Object.freeze({\n    threshold: 0,\n    i18n: {\n      // Characters\n      charactersUnderLimit: {\n        one: 'You have %{count} character remaining',\n        other: 'You have %{count} characters remaining'\n      },\n      charactersAtLimit: 'You have 0 characters remaining',\n      charactersOverLimit: {\n        one: 'You have %{count} character too many',\n        other: 'You have %{count} characters too many'\n      },\n      // Words\n      wordsUnderLimit: {\n        one: 'You have %{count} word remaining',\n        other: 'You have %{count} words remaining'\n      },\n      wordsAtLimit: 'You have 0 words remaining',\n      wordsOverLimit: {\n        one: 'You have %{count} word too many',\n        other: 'You have %{count} words too many'\n      },\n      textareaDescription: {\n        other: ''\n      }\n    }\n  })\n\n  /**\n   * Character count config schema\n   *\n   * @constant\n   * @satisfies {Schema<CharacterCountConfig>}\n   */\n  static schema = Object.freeze({\n    properties: {\n      i18n: { type: 'object' },\n      maxwords: { type: 'number' },\n      maxlength: { type: 'number' },\n      threshold: { type: 'number' }\n    },\n    anyOf: [\n      {\n        required: ['maxwords'],\n        errorMessage: 'Either \"maxlength\" or \"maxwords\" must be provided'\n      },\n      {\n        required: ['maxlength'],\n        errorMessage: 'Either \"maxlength\" or \"maxwords\" must be provided'\n      }\n    ]\n  })\n}\n\n/**\n * Character count config\n *\n * @see {@link CharacterCount.defaults}\n * @typedef {object} CharacterCountConfig\n * @property {number} [maxlength] - The maximum number of characters.\n *   If maxwords is provided, the maxlength option will be ignored.\n * @property {number} [maxwords] - The maximum number of words. If maxwords is\n *   provided, the maxlength option will be ignored.\n * @property {number} [threshold=0] - The percentage value of the limit at\n *   which point the count message is displayed. If this attribute is set, the\n *   count message will be hidden by default.\n * @property {CharacterCountTranslations} [i18n=CharacterCount.defaults.i18n] - Character count translations\n */\n\n/**\n * Character count translations\n *\n * @see {@link CharacterCount.defaults.i18n}\n * @typedef {object} CharacterCountTranslations\n *\n * Messages shown to users as they type. It provides feedback on how many words\n * or characters they have remaining or if they are over the limit. This also\n * includes a message used as an accessible description for the textarea.\n * @property {TranslationPluralForms} [charactersUnderLimit] - Message displayed\n *   when the number of characters is under the configured maximum, `maxlength`.\n *   This message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining characters. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {string} [charactersAtLimit] - Message displayed when the number of\n *   characters reaches the configured maximum, `maxlength`. This message is\n *   displayed visually and through assistive technologies.\n * @property {TranslationPluralForms} [charactersOverLimit] - Message displayed\n *   when the number of characters is over the configured maximum, `maxlength`.\n *   This message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining characters. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {TranslationPluralForms} [wordsUnderLimit] - Message displayed when\n *   the number of words is under the configured maximum, `maxlength`. This\n *   message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining words. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {string} [wordsAtLimit] - Message displayed when the number of\n *   words reaches the configured maximum, `maxlength`. This message is\n *   displayed visually and through assistive technologies.\n * @property {TranslationPluralForms} [wordsOverLimit] - Message displayed when\n *   the number of words is over the configured maximum, `maxlength`. This\n *   message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining words. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {TranslationPluralForms} [textareaDescription] - Message made\n *   available to assistive technologies, if none is already present in the\n *   HTML, to describe that the component accepts only a limited amount of\n *   content. It is visible on the page when JavaScript is unavailable. The\n *   component will replace the `%{count}` placeholder with the value of the\n *   `maxlength` or `maxwords` parameter.\n */\n\n/**\n * @import { Schema } from '../../common/configuration.mjs'\n * @import { TranslationPluralForms } from '../../i18n.mjs'\n */\n"],"names":["CharacterCount","ConfigurableComponent","configOverride","datasetConfig","configOverrides","maxlength","undefined","maxwords","constructor","$root","config","_ref","_this$config$maxwords","$textarea","$visibleCountMessage","$screenReaderCountMessage","lastInputTimestamp","lastInputValue","valueChecker","i18n","maxLength","querySelector","HTMLTextAreaElement","HTMLInputElement","ElementError","component","element","expectedType","identifier","errors","validateConfig","schema","ConfigError","formatErrorMessage","I18n","locale","closestAttributeValue","Infinity","textareaDescriptionId","id","$textareaDescription","document","getElementById","$errorMessage","textContent","match","t","count","insertAdjacentElement","createElement","className","setAttribute","classList","add","removeAttribute","bindChangeEvents","window","addEventListener","updateCountMessage","handleKeyUp","handleFocus","handleBlur","updateVisibleCountMessage","Date","now","setInterval","updateIfValueChanged","clearInterval","value","updateScreenReaderCountMessage","remainingNumber","isError","toggle","isOverThreshold","getCountMessage","text","_text$match","tokens","length","countType","formatCountMessage","translationKeySuffix","Math","abs","threshold","currentLength","thresholdValue","moduleName","defaults","Object","freeze","charactersUnderLimit","one","other","charactersAtLimit","charactersOverLimit","wordsUnderLimit","wordsAtLimit","wordsOverLimit","textareaDescription","properties","type","anyOf","required","errorMessage"],"mappings":"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"}
+{"version":3,"file":"character-count.mjs","sources":["../../../../src/govuk/components/character-count/character-count.mjs"],"sourcesContent":["import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'\nimport {\n  validateConfig,\n  ConfigurableComponent,\n  configOverride\n} from '../../common/configuration.mjs'\nimport { formatErrorMessage } from '../../common/index.mjs'\nimport { ConfigError, ElementError } from '../../errors/index.mjs'\nimport { I18n } from '../../i18n.mjs'\n\n/**\n * Character count component\n *\n * Tracks the number of characters or words in the `.govuk-js-character-count`\n * `<textarea>` inside the element. Displays a message with the remaining number\n * of characters/words available, or the number of characters/words in excess.\n *\n * You can configure the message to only appear after a certain percentage\n * of the available characters/words has been entered.\n *\n * @preserve\n * @augments ConfigurableComponent<CharacterCountConfig>\n */\nexport class CharacterCount extends ConfigurableComponent {\n  /** @private */\n  $textarea\n\n  /** @private */\n  count = 0\n\n  /** @private */\n  $visibleCountMessage\n\n  /** @private */\n  $screenReaderCountMessage\n\n  /**\n   * @private\n   * @type {number | null}\n   */\n  lastInputTimestamp = null\n\n  /** @private */\n  lastInputValue = ''\n\n  /**\n   * @private\n   * @type {number | null}\n   */\n  valueChecker = null\n\n  /** @private */\n  i18n\n\n  /** @private */\n  maxLength;\n\n  /**\n   * Character count config override\n   *\n   * To ensure data-attributes take complete precedence, even if they change\n   * the type of count, we need to reset the `maxlength` and `maxwords` from\n   * the JavaScript config.\n   *\n   * @internal\n   * @param {CharacterCountConfig} datasetConfig - configuration specified by dataset\n   * @returns {CharacterCountConfig} - configuration to override by dataset\n   */\n  [configOverride](datasetConfig) {\n    let configOverrides = {}\n    if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {\n      configOverrides = {\n        maxlength: undefined,\n        maxwords: undefined\n      }\n    }\n\n    return configOverrides\n  }\n\n  /**\n   * @param {Element | null} $root - HTML element to use for character count\n   * @param {CharacterCountConfig} [config] - Character count config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    const $textarea = this.$root.querySelector('.govuk-js-character-count')\n    if (\n      !(\n        $textarea instanceof HTMLTextAreaElement ||\n        $textarea instanceof HTMLInputElement\n      )\n    ) {\n      throw new ElementError({\n        component: CharacterCount,\n        element: $textarea,\n        expectedType: 'HTMLTextareaElement or HTMLInputElement',\n        identifier: 'Form field (`.govuk-js-character-count`)'\n      })\n    }\n\n    // Check for valid config\n    const errors = validateConfig(CharacterCount.schema, this.config)\n    if (errors[0]) {\n      throw new ConfigError(formatErrorMessage(CharacterCount, errors[0]))\n    }\n\n    this.i18n = new I18n(this.config.i18n, {\n      // Read the fallback if necessary rather than have it set in the defaults\n      locale: closestAttributeValue(this.$root, 'lang')\n    })\n\n    // Determine the limit attribute (characters or words)\n    this.maxLength = this.config.maxwords ?? this.config.maxlength ?? Infinity\n\n    this.$textarea = $textarea\n\n    const textareaDescriptionId = `${this.$textarea.id}-info`\n    const $textareaDescription = document.getElementById(textareaDescriptionId)\n    if (!$textareaDescription) {\n      throw new ElementError({\n        component: CharacterCount,\n        element: $textareaDescription,\n        identifier: `Count message (\\`id=\"${textareaDescriptionId}\"\\`)`\n      })\n    }\n\n    // Pre-existing validation error rendered from server\n    this.$errorMessage = this.$root.querySelector('.govuk-error-message')\n\n    // Inject a description for the textarea if none is present already\n    // for when the component was rendered with no maxlength, maxwords\n    // nor custom textareaDescriptionText\n    // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec\n    if ($textareaDescription.textContent.match(/^\\s*$/)) {\n      $textareaDescription.textContent = this.i18n.t('textareaDescription', {\n        count: this.maxLength\n      })\n    }\n\n    // Move the textarea description to be immediately after the textarea\n    // Kept for backwards compatibility\n    this.$textarea.insertAdjacentElement('afterend', $textareaDescription)\n\n    // Create the *screen reader* specific live-updating counter\n    // This doesn't need any styling classes, as it is never visible\n    const $screenReaderCountMessage = document.createElement('div')\n    $screenReaderCountMessage.className =\n      'govuk-character-count__sr-status govuk-visually-hidden'\n    $screenReaderCountMessage.setAttribute('aria-live', 'polite')\n    this.$screenReaderCountMessage = $screenReaderCountMessage\n    $textareaDescription.insertAdjacentElement(\n      'afterend',\n      $screenReaderCountMessage\n    )\n\n    // Create our live-updating counter element, copying the classes from the\n    // textarea description for backwards compatibility as these may have been\n    // configured\n    const $visibleCountMessage = document.createElement('div')\n    $visibleCountMessage.className = $textareaDescription.className\n    $visibleCountMessage.classList.add('govuk-character-count__status')\n    $visibleCountMessage.setAttribute('aria-hidden', 'true')\n    this.$visibleCountMessage = $visibleCountMessage\n    $textareaDescription.insertAdjacentElement('afterend', $visibleCountMessage)\n\n    // Hide the textarea description\n    $textareaDescription.classList.add('govuk-visually-hidden')\n\n    // Remove hard limit if set\n    this.$textarea.removeAttribute('maxlength')\n\n    this.bindChangeEvents()\n\n    // When the page is restored after navigating 'back' in some browsers the\n    // state of form controls is not restored until *after* the DOMContentLoaded\n    // event is fired, so we need to sync after the pageshow event.\n    window.addEventListener('pageshow', () => {\n      // If the current value of the textarea is the same as what's\n      // in the HTML, don't re-run when users have not edited the field yet\n      // (new page load or BF cache navigation without having edited).\n      if (this.$textarea.value !== this.$textarea.textContent) {\n        this.updateCount()\n        this.updateCountMessage()\n      }\n    })\n\n    // Although we've set up handlers to sync state on the pageshow event, init\n    // could be called after those events have fired, for example if they are\n    // added to the page dynamically, so update now too.\n    this.updateCount()\n    this.updateCountMessage()\n  }\n\n  /**\n   * Bind change events\n   *\n   * Set up event listeners on the $textarea so that the count messages update\n   * when the user types.\n   *\n   * @private\n   */\n  bindChangeEvents() {\n    this.$textarea.addEventListener('input', () => this.handleInput())\n\n    // Bind focus/blur events to start/stop polling\n    this.$textarea.addEventListener('focus', () => this.handleFocus())\n    this.$textarea.addEventListener('blur', () => this.handleBlur())\n  }\n\n  /**\n   * Handle input event\n   *\n   * Update the visible character counter and keep track of when the last update\n   * happened for each keypress\n   *\n   * @private\n   */\n  handleInput() {\n    this.updateCount()\n    this.updateVisibleCountMessage()\n    this.lastInputTimestamp = Date.now()\n  }\n\n  /**\n   * Handle focus event\n   *\n   * Speech recognition software such as Dragon NaturallySpeaking will modify\n   * the fields by directly changing its `value`. These changes don't trigger\n   * events in JavaScript, so we need to poll to handle when and if they occur.\n   *\n   * Once the keyup event hasn't been detected for at least 1000 ms (1s), check\n   * if the textarea value has changed and update the count message if it has.\n   *\n   * This is so that the update triggered by the manual comparison doesn't\n   * conflict with debounced KeyboardEvent updates.\n   *\n   * @private\n   */\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        Date.now() - 500 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged()\n      }\n    }, 1000)\n  }\n\n  /**\n   * Handle blur event\n   *\n   * Stop checking the textarea value once the textarea no longer has focus\n   *\n   * @private\n   */\n  handleBlur() {\n    // Cancel value checking on blur\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker)\n    }\n  }\n\n  /**\n   * Update count message if textarea value has changed\n   *\n   * @private\n   */\n  updateIfValueChanged() {\n    if (this.$textarea.value !== this.lastInputValue) {\n      this.lastInputValue = this.$textarea.value\n      this.updateCountMessage()\n    }\n  }\n\n  /**\n   * Update count message\n   *\n   * Helper function to update both the visible and screen reader-specific\n   * counters simultaneously (e.g. on init)\n   *\n   * @private\n   */\n  updateCountMessage() {\n    this.updateVisibleCountMessage()\n    this.updateScreenReaderCountMessage()\n  }\n\n  /**\n   * Update visible count message\n   *\n   * @private\n   */\n  updateVisibleCountMessage() {\n    const remainingNumber = this.maxLength - this.count\n    const isError = remainingNumber < 0\n\n    // If input is over the threshold, remove the disabled class which renders\n    // the counter invisible.\n    this.$visibleCountMessage.classList.toggle(\n      'govuk-character-count__message--disabled',\n      !this.isOverThreshold()\n    )\n\n    // Update styles\n    if (!this.$errorMessage) {\n      // Only toggle the textarea error class if there isn't an error message\n      // already, as it may be unrelated to the limit (eg: allowed characters)\n      // and would set the border colour back to black.\n      this.$textarea.classList.toggle('govuk-textarea--error', isError)\n    }\n    this.$visibleCountMessage.classList.toggle('govuk-error-message', isError)\n    this.$visibleCountMessage.classList.toggle('govuk-hint', !isError)\n\n    // Update message\n    this.$visibleCountMessage.textContent = this.getCountMessage()\n  }\n\n  /**\n   * Update screen reader count message\n   *\n   * @private\n   */\n  updateScreenReaderCountMessage() {\n    // If over the threshold, remove the aria-hidden attribute, allowing screen\n    // readers to announce the content of the element.\n    if (this.isOverThreshold()) {\n      this.$screenReaderCountMessage.removeAttribute('aria-hidden')\n    } else {\n      this.$screenReaderCountMessage.setAttribute('aria-hidden', 'true')\n    }\n\n    // Update message\n    this.$screenReaderCountMessage.textContent = this.getCountMessage()\n  }\n\n  /**\n   * Count the number of characters (or words, if `config.maxwords` is set)\n   * in the given text, and update the component-wide count\n   *\n   * @private\n   */\n  updateCount() {\n    const text = this.$textarea.value\n\n    if (this.config.maxwords) {\n      const tokens = text.match(/\\S+/g) ?? [] // Matches consecutive non-whitespace chars\n      this.count = tokens.length\n      return\n    }\n\n    this.count = text.length\n  }\n\n  /**\n   * Get count message\n   *\n   * @private\n   * @returns {string} Status message\n   */\n  getCountMessage() {\n    const remainingNumber = this.maxLength - this.count\n    const countType = this.config.maxwords ? 'words' : 'characters'\n    return this.formatCountMessage(remainingNumber, countType)\n  }\n\n  /**\n   * Formats the message shown to users according to what's counted\n   * and how many remain\n   *\n   * @private\n   * @param {number} remainingNumber - The number of words/characaters remaining\n   * @param {string} countType - \"words\" or \"characters\"\n   * @returns {string} Status message\n   */\n  formatCountMessage(remainingNumber, countType) {\n    if (remainingNumber === 0) {\n      return this.i18n.t(`${countType}AtLimit`)\n    }\n\n    const translationKeySuffix =\n      remainingNumber < 0 ? 'OverLimit' : 'UnderLimit'\n\n    return this.i18n.t(`${countType}${translationKeySuffix}`, {\n      count: Math.abs(remainingNumber)\n    })\n  }\n\n  /**\n   * Check if count is over threshold\n   *\n   * Checks whether the value is over the configured threshold for the input.\n   * If there is no configured threshold, it is set to 0 and this function will\n   * always return true.\n   *\n   * @private\n   * @returns {boolean} true if the current count is over the config.threshold\n   *   (or no threshold is set)\n   */\n  isOverThreshold() {\n    // No threshold means we're always above threshold so save some computation\n    if (!this.config.threshold) {\n      return true\n    }\n\n    // Determine the remaining number of characters/words\n    const currentLength = this.count\n    const maxLength = this.maxLength\n\n    const thresholdValue = (maxLength * this.config.threshold) / 100\n\n    return thresholdValue <= currentLength\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-character-count'\n\n  /**\n   * Character count default config\n   *\n   * @see {@link CharacterCountConfig}\n   * @constant\n   * @type {CharacterCountConfig}\n   */\n  static defaults = Object.freeze({\n    threshold: 0,\n    i18n: {\n      // Characters\n      charactersUnderLimit: {\n        one: 'You have %{count} character remaining',\n        other: 'You have %{count} characters remaining'\n      },\n      charactersAtLimit: 'You have 0 characters remaining',\n      charactersOverLimit: {\n        one: 'You have %{count} character too many',\n        other: 'You have %{count} characters too many'\n      },\n      // Words\n      wordsUnderLimit: {\n        one: 'You have %{count} word remaining',\n        other: 'You have %{count} words remaining'\n      },\n      wordsAtLimit: 'You have 0 words remaining',\n      wordsOverLimit: {\n        one: 'You have %{count} word too many',\n        other: 'You have %{count} words too many'\n      },\n      textareaDescription: {\n        other: ''\n      }\n    }\n  })\n\n  /**\n   * Character count config schema\n   *\n   * @constant\n   * @satisfies {Schema<CharacterCountConfig>}\n   */\n  static schema = Object.freeze({\n    properties: {\n      i18n: { type: 'object' },\n      maxwords: { type: 'number' },\n      maxlength: { type: 'number' },\n      threshold: { type: 'number' }\n    },\n    anyOf: [\n      {\n        required: ['maxwords'],\n        errorMessage: 'Either \"maxlength\" or \"maxwords\" must be provided'\n      },\n      {\n        required: ['maxlength'],\n        errorMessage: 'Either \"maxlength\" or \"maxwords\" must be provided'\n      }\n    ]\n  })\n}\n\n/**\n * Character count config\n *\n * @see {@link CharacterCount.defaults}\n * @typedef {object} CharacterCountConfig\n * @property {number} [maxlength] - The maximum number of characters.\n *   If maxwords is provided, the maxlength option will be ignored.\n * @property {number} [maxwords] - The maximum number of words. If maxwords is\n *   provided, the maxlength option will be ignored.\n * @property {number} [threshold=0] - The percentage value of the limit at\n *   which point the count message is displayed. If this attribute is set, the\n *   count message will be hidden by default.\n * @property {CharacterCountTranslations} [i18n=CharacterCount.defaults.i18n] - Character count translations\n */\n\n/**\n * Character count translations\n *\n * @see {@link CharacterCount.defaults.i18n}\n * @typedef {object} CharacterCountTranslations\n *\n * Messages shown to users as they type. It provides feedback on how many words\n * or characters they have remaining or if they are over the limit. This also\n * includes a message used as an accessible description for the textarea.\n * @property {TranslationPluralForms} [charactersUnderLimit] - Message displayed\n *   when the number of characters is under the configured maximum, `maxlength`.\n *   This message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining characters. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {string} [charactersAtLimit] - Message displayed when the number of\n *   characters reaches the configured maximum, `maxlength`. This message is\n *   displayed visually and through assistive technologies.\n * @property {TranslationPluralForms} [charactersOverLimit] - Message displayed\n *   when the number of characters is over the configured maximum, `maxlength`.\n *   This message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining characters. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {TranslationPluralForms} [wordsUnderLimit] - Message displayed when\n *   the number of words is under the configured maximum, `maxlength`. This\n *   message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining words. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {string} [wordsAtLimit] - Message displayed when the number of\n *   words reaches the configured maximum, `maxlength`. This message is\n *   displayed visually and through assistive technologies.\n * @property {TranslationPluralForms} [wordsOverLimit] - Message displayed when\n *   the number of words is over the configured maximum, `maxlength`. This\n *   message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining words. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {TranslationPluralForms} [textareaDescription] - Message made\n *   available to assistive technologies, if none is already present in the\n *   HTML, to describe that the component accepts only a limited amount of\n *   content. It is visible on the page when JavaScript is unavailable. The\n *   component will replace the `%{count}` placeholder with the value of the\n *   `maxlength` or `maxwords` parameter.\n */\n\n/**\n * @import { Schema } from '../../common/configuration.mjs'\n * @import { TranslationPluralForms } from '../../i18n.mjs'\n */\n"],"names":["CharacterCount","ConfigurableComponent","configOverride","datasetConfig","configOverrides","maxlength","undefined","maxwords","constructor","$root","config","_ref","_this$config$maxwords","$textarea","count","$visibleCountMessage","$screenReaderCountMessage","lastInputTimestamp","lastInputValue","valueChecker","i18n","maxLength","querySelector","HTMLTextAreaElement","HTMLInputElement","ElementError","component","element","expectedType","identifier","errors","validateConfig","schema","ConfigError","formatErrorMessage","I18n","locale","closestAttributeValue","Infinity","textareaDescriptionId","id","$textareaDescription","document","getElementById","$errorMessage","textContent","match","t","insertAdjacentElement","createElement","className","setAttribute","classList","add","removeAttribute","bindChangeEvents","window","addEventListener","value","updateCount","updateCountMessage","handleInput","handleFocus","handleBlur","updateVisibleCountMessage","Date","now","setInterval","updateIfValueChanged","clearInterval","updateScreenReaderCountMessage","remainingNumber","isError","toggle","isOverThreshold","getCountMessage","text","_text$match","tokens","length","countType","formatCountMessage","translationKeySuffix","Math","abs","threshold","currentLength","thresholdValue","moduleName","defaults","Object","freeze","charactersUnderLimit","one","other","charactersAtLimit","charactersOverLimit","wordsUnderLimit","wordsAtLimit","wordsOverLimit","textareaDescription","properties","type","anyOf","required","errorMessage"],"mappings":"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"}

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

@@ -119,7 +119,7 @@
       outline-color: Highlight;
     }
 
-    box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
+    box-shadow: 0 0 0 $govuk-focus-width govuk-functional-colour(focus);
   }
 
   // Selected state
@@ -169,7 +169,8 @@
     @include govuk-responsive-margin(4, "bottom");
     margin-left: $conditional-margin-left;
     padding-left: $conditional-padding-left;
-    border-left: $conditional-border-width solid $govuk-border-colour;
+    border-left: $conditional-border-width solid;
+    border-left-color: govuk-functional-colour(border);
 
     .govuk-frontend-supported &--hidden {
       display: none;
@@ -271,7 +272,7 @@
       // 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;
+      box-shadow: 0 0 0 $govuk-hover-width govuk-functional-colour(hover);
     }
 
     // Because we've overridden the border-shadow provided by the focus state,
@@ -286,8 +287,8 @@
       }
       // prettier-ignore
       box-shadow:
-        0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
-        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+        0 0 0 $govuk-focus-width govuk-functional-colour(focus), // 1
+        0 0 0 $govuk-hover-width govuk-functional-colour(hover); // 2
     }
 
     // For devices that explicitly don't support hover, don't provide a hover
@@ -302,7 +303,7 @@
       }
 
       .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-        box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
+        box-shadow: 0 0 0 $govuk-focus-width govuk-functional-colour(focus);
       }
     }
   }

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/checkboxes/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../fieldset/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/checkboxes\") {\n  $govuk-touch-target-gutter: 4px;\n  $govuk-checkboxes-size: 40px;\n  $govuk-touch-target-size: ($govuk-checkboxes-size + $govuk-touch-target-gutter);\n  $govuk-small-checkboxes-size: 24px;\n  $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);\n  $govuk-checkbox-check-horizontal-position: 10px;\n\n  .govuk-checkboxes__item {\n    display: flex;\n    flex-wrap: wrap;\n    position: relative;\n    margin-bottom: govuk-spacing(2);\n  }\n\n  .govuk-checkboxes__item:last-child,\n  .govuk-checkboxes__item:last-of-type {\n    margin-bottom: 0;\n  }\n\n  .govuk-checkboxes__input {\n    // Allow the input to sit above the label, enabling its proper detection\n    // when exploring by touch or using automation tools like Selenium\n    z-index: 1;\n    width: $govuk-touch-target-size;\n    height: $govuk-touch-target-size;\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .govuk-checkboxes__label {\n    align-self: center;\n\n    // Ensure that the width of the label is never more than the width of the\n    // container minus the input width minus the padding on either side of\n    // the label. This prevents the label from going onto the next line due to\n    // __item using flex-wrap because we want hints on a separate line.\n    max-width: calc(100% - #{(($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size)});\n    margin-bottom: 0;\n    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);\n    cursor: pointer;\n    // remove 300ms pause on mobile\n    touch-action: manipulation;\n  }\n\n  // [ ] Check box\n  .govuk-checkboxes__label::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    top: ($govuk-touch-target-gutter / 2);\n    left: ($govuk-touch-target-gutter / 2);\n    width: $govuk-checkboxes-size;\n    height: $govuk-checkboxes-size;\n    border: $govuk-border-width-form-element solid currentcolor;\n    background: transparent;\n  }\n\n  // ✔ Check mark\n  //\n  // The check mark is a box with a border on the left and bottom side (└──),\n  // rotated 45 degrees\n  .govuk-checkboxes__label::after {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n\n    // Use \"magic numbers\" to define shape and position of check mark because\n    // the complexity of the shape makes it difficult to calculate dynamically.\n    top: 13px;\n    left: $govuk-checkbox-check-horizontal-position;\n    width: 23px;\n    height: 12px;\n    transform: rotate(-45deg);\n    border: solid;\n    border-width: 0 0 5px 5px;\n    // Fix bug in IE11 caused by transform rotate (-45deg).\n    // See: alphagov/govuk_elements/issues/518\n    border-top-color: transparent;\n    opacity: 0;\n    background: transparent;\n  }\n\n  .govuk-checkboxes__hint {\n    display: block;\n    width: 100%;\n    margin-top: govuk-spacing(-1);\n    padding-right: $govuk-checkboxes-label-padding-left-right;\n    padding-left: ($govuk-checkboxes-label-padding-left-right + $govuk-touch-target-size);\n  }\n\n  // This is to bypass govuk-hint's specificity on hints following labels having\n  // a margin bottom of 10px (govuk-spacing(2)). Because checkboxes are flexbox,\n  // the margin doesn't collapse so we have to do this manually.\n  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-checkboxes__hint {\n    margin-bottom: 0;\n  }\n\n  // Focused state\n  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n    border-width: 4px;\n\n    // When colours are overridden, the yellow box-shadow becomes invisible\n    // which means the focus state is less obvious. By adding a transparent\n    // outline, which becomes solid (text-coloured) in that context, we ensure\n    // the focus remains clearly visible.\n    outline: $govuk-focus-width solid transparent;\n    outline-offset: 1px;\n\n    // When in an explicit forced-color mode, we can use the Highlight system\n    // color for the outline to better match focus states of native controls\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      outline-color: Highlight;\n    }\n\n    box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;\n  }\n\n  // Selected state\n  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {\n    opacity: 1;\n  }\n\n  // Disabled state\n  .govuk-checkboxes__input:disabled,\n  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {\n    cursor: not-allowed;\n  }\n\n  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label,\n  .govuk-checkboxes__input:disabled ~ .govuk-hint {\n    opacity: 0.5;\n  }\n\n  // =========================================================\n  // Dividers ('or')\n  // =========================================================\n\n  .govuk-checkboxes__divider {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    $govuk-divider-size: $govuk-checkboxes-size !default;\n    width: $govuk-divider-size;\n    margin-bottom: govuk-spacing(2);\n    text-align: center;\n  }\n\n  // =========================================================\n  // Conditional reveals\n  // =========================================================\n\n  // The narrow border is used in the conditional reveals because the border has\n  // to be an even number in order to be centred under the 40px checkbox or radio.\n  $conditional-border-width: $govuk-border-width-narrow;\n  // Calculate the amount of padding needed to keep the border centered against the checkbox.\n  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);\n  // Move the border centered with the checkbox\n  $conditional-margin-left: $conditional-border-padding;\n  // Move the contents of the conditional inline with the label\n  $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right;\n\n  .govuk-checkboxes__conditional {\n    @include govuk-responsive-margin(4, \"bottom\");\n    margin-left: $conditional-margin-left;\n    padding-left: $conditional-padding-left;\n    border-left: $conditional-border-width solid $govuk-border-colour;\n\n    .govuk-frontend-supported &--hidden {\n      display: none;\n    }\n\n    & > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  // =========================================================\n  // Small checkboxes\n  // =========================================================\n\n  .govuk-checkboxes--small {\n    $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;\n\n    .govuk-checkboxes__item {\n      margin-bottom: 0;\n    }\n\n    // Shift the touch target into the left margin so that the visible edge of\n    // the control is aligned\n    //\n    //   ┆What colours do you like?\n    //  ┌┆───┐\n    //  │┆[] │ Purple\n    //  └┆▲──┘\n    //  ▲┆└─ Check box pseudo element, aligned with margin\n    //  └─── Touch target (invisible input), shifted into the margin\n    .govuk-checkboxes__input {\n      margin-left: $input-offset * -1;\n    }\n\n    .govuk-checkboxes__label {\n      // Create a tiny space between the small checkbox hover state so that it\n      // doesn't clash with the label\n      padding-left: 1px;\n    }\n\n    // [ ] Check box\n    //\n    // Reduce the size of the check box [1], vertically center it within the\n    // touch target [2]\n    // Left here is 0 because we've shifted the input into the left margin\n    .govuk-checkboxes__label::before {\n      top: $input-offset; // 2\n      left: 0;\n      width: $govuk-small-checkboxes-size; // 1\n      height: $govuk-small-checkboxes-size; // 1\n    }\n\n    // ✔ Check mark\n    //\n    // Reduce the size of the check mark and re-align within the checkbox\n    .govuk-checkboxes__label::after {\n      top: 17px;\n\n      // Horizontal position is just the normal sized left value accounting for\n      // the new width of the smaller checkbox\n      left: (16px - $govuk-checkbox-check-horizontal-position);\n      width: 12px;\n      height: 6.5px;\n      border-width: 0 0 3px 3px;\n    }\n\n    // Fix position of hint with small checkboxes\n    //\n    // Do not use hints with small checkboxes – because they're within the input\n    // wrapper they trigger the hover state, but clicking them doesn't actually\n    // activate the control.\n    //\n    // (If you do use them, they won't look completely broken... but seriously,\n    // don't use them)\n    .govuk-checkboxes__hint {\n      padding-left: ($govuk-small-checkboxes-size + $input-offset);\n    }\n\n    // Align conditional reveals with small checkboxes\n    .govuk-checkboxes__conditional {\n      $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);\n      margin-left: $margin-left;\n      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);\n    }\n\n    .govuk-checkboxes__divider {\n      width: $govuk-small-checkboxes-size;\n      margin-bottom: govuk-spacing(1);\n    }\n\n    // Hover state for small checkboxes.\n    //\n    // We use a hover state for small checkboxes because the touch target size\n    // is so much larger than their visible size, and so we need to provide\n    // feedback to the user as to which checkbox they will select when their\n    // cursor is outside of the visible area.\n    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {\n      // Forced colours modes tend to ignore box-shadow.\n      // Apply an outline for those modes to use instead.\n      outline: $govuk-focus-width dashed transparent;\n      outline-offset: 1px;\n      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;\n    }\n\n    // Because we've overridden the border-shadow provided by the focus state,\n    // we need to redefine that too.\n    //\n    // We use two box shadows, one that restores the original focus state [1]\n    // and another that then applies the hover state [2].\n    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n      // Set different HCM colour when we have both hover/focus applied at once\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        outline-color: Highlight;\n      }\n      // prettier-ignore\n      box-shadow:\n        0 0 0 $govuk-focus-width $govuk-focus-colour, // 1\n        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2\n    }\n\n    // For devices that explicitly don't support hover, don't provide a hover\n    // state (e.g. on touch devices like iOS).\n    //\n    // We can't use `@media (hover: hover)` because we wouldn't get the hover\n    // state in browsers that don't support `@media (hover)` (like Internet\n    // Explorer) – so we have to 'undo' the hover state instead.\n    @media (hover: none), (pointer: coarse) {\n      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {\n        box-shadow: initial;\n      }\n\n      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n        box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/checkboxes/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../fieldset/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/checkboxes\") {\n  $govuk-touch-target-gutter: 4px;\n  $govuk-checkboxes-size: 40px;\n  $govuk-touch-target-size: ($govuk-checkboxes-size + $govuk-touch-target-gutter);\n  $govuk-small-checkboxes-size: 24px;\n  $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);\n  $govuk-checkbox-check-horizontal-position: 10px;\n\n  .govuk-checkboxes__item {\n    display: flex;\n    flex-wrap: wrap;\n    position: relative;\n    margin-bottom: govuk-spacing(2);\n  }\n\n  .govuk-checkboxes__item:last-child,\n  .govuk-checkboxes__item:last-of-type {\n    margin-bottom: 0;\n  }\n\n  .govuk-checkboxes__input {\n    // Allow the input to sit above the label, enabling its proper detection\n    // when exploring by touch or using automation tools like Selenium\n    z-index: 1;\n    width: $govuk-touch-target-size;\n    height: $govuk-touch-target-size;\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .govuk-checkboxes__label {\n    align-self: center;\n\n    // Ensure that the width of the label is never more than the width of the\n    // container minus the input width minus the padding on either side of\n    // the label. This prevents the label from going onto the next line due to\n    // __item using flex-wrap because we want hints on a separate line.\n    max-width: calc(100% - #{(($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size)});\n    margin-bottom: 0;\n    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);\n    cursor: pointer;\n    // remove 300ms pause on mobile\n    touch-action: manipulation;\n  }\n\n  // [ ] Check box\n  .govuk-checkboxes__label::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    top: ($govuk-touch-target-gutter / 2);\n    left: ($govuk-touch-target-gutter / 2);\n    width: $govuk-checkboxes-size;\n    height: $govuk-checkboxes-size;\n    border: $govuk-border-width-form-element solid currentcolor;\n    background: transparent;\n  }\n\n  // ✔ Check mark\n  //\n  // The check mark is a box with a border on the left and bottom side (└──),\n  // rotated 45 degrees\n  .govuk-checkboxes__label::after {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n\n    // Use \"magic numbers\" to define shape and position of check mark because\n    // the complexity of the shape makes it difficult to calculate dynamically.\n    top: 13px;\n    left: $govuk-checkbox-check-horizontal-position;\n    width: 23px;\n    height: 12px;\n    transform: rotate(-45deg);\n    border: solid;\n    border-width: 0 0 5px 5px;\n    // Fix bug in IE11 caused by transform rotate (-45deg).\n    // See: alphagov/govuk_elements/issues/518\n    border-top-color: transparent;\n    opacity: 0;\n    background: transparent;\n  }\n\n  .govuk-checkboxes__hint {\n    display: block;\n    width: 100%;\n    margin-top: govuk-spacing(-1);\n    padding-right: $govuk-checkboxes-label-padding-left-right;\n    padding-left: ($govuk-checkboxes-label-padding-left-right + $govuk-touch-target-size);\n  }\n\n  // This is to bypass govuk-hint's specificity on hints following labels having\n  // a margin bottom of 10px (govuk-spacing(2)). Because checkboxes are flexbox,\n  // the margin doesn't collapse so we have to do this manually.\n  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-checkboxes__hint {\n    margin-bottom: 0;\n  }\n\n  // Focused state\n  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n    border-width: 4px;\n\n    // When colours are overridden, the yellow box-shadow becomes invisible\n    // which means the focus state is less obvious. By adding a transparent\n    // outline, which becomes solid (text-coloured) in that context, we ensure\n    // the focus remains clearly visible.\n    outline: $govuk-focus-width solid transparent;\n    outline-offset: 1px;\n\n    // When in an explicit forced-color mode, we can use the Highlight system\n    // color for the outline to better match focus states of native controls\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      outline-color: Highlight;\n    }\n\n    box-shadow: 0 0 0 $govuk-focus-width govuk-functional-colour(focus);\n  }\n\n  // Selected state\n  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {\n    opacity: 1;\n  }\n\n  // Disabled state\n  .govuk-checkboxes__input:disabled,\n  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {\n    cursor: not-allowed;\n  }\n\n  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label,\n  .govuk-checkboxes__input:disabled ~ .govuk-hint {\n    opacity: 0.5;\n  }\n\n  // =========================================================\n  // Dividers ('or')\n  // =========================================================\n\n  .govuk-checkboxes__divider {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    $govuk-divider-size: $govuk-checkboxes-size !default;\n    width: $govuk-divider-size;\n    margin-bottom: govuk-spacing(2);\n    text-align: center;\n  }\n\n  // =========================================================\n  // Conditional reveals\n  // =========================================================\n\n  // The narrow border is used in the conditional reveals because the border has\n  // to be an even number in order to be centred under the 40px checkbox or radio.\n  $conditional-border-width: $govuk-border-width-narrow;\n  // Calculate the amount of padding needed to keep the border centered against the checkbox.\n  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);\n  // Move the border centered with the checkbox\n  $conditional-margin-left: $conditional-border-padding;\n  // Move the contents of the conditional inline with the label\n  $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right;\n\n  .govuk-checkboxes__conditional {\n    @include govuk-responsive-margin(4, \"bottom\");\n    margin-left: $conditional-margin-left;\n    padding-left: $conditional-padding-left;\n    border-left: $conditional-border-width solid;\n    border-left-color: govuk-functional-colour(border);\n\n    .govuk-frontend-supported &--hidden {\n      display: none;\n    }\n\n    & > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  // =========================================================\n  // Small checkboxes\n  // =========================================================\n\n  .govuk-checkboxes--small {\n    $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;\n\n    .govuk-checkboxes__item {\n      margin-bottom: 0;\n    }\n\n    // Shift the touch target into the left margin so that the visible edge of\n    // the control is aligned\n    //\n    //   ┆What colours do you like?\n    //  ┌┆───┐\n    //  │┆[] │ Purple\n    //  └┆▲──┘\n    //  ▲┆└─ Check box pseudo element, aligned with margin\n    //  └─── Touch target (invisible input), shifted into the margin\n    .govuk-checkboxes__input {\n      margin-left: $input-offset * -1;\n    }\n\n    .govuk-checkboxes__label {\n      // Create a tiny space between the small checkbox hover state so that it\n      // doesn't clash with the label\n      padding-left: 1px;\n    }\n\n    // [ ] Check box\n    //\n    // Reduce the size of the check box [1], vertically center it within the\n    // touch target [2]\n    // Left here is 0 because we've shifted the input into the left margin\n    .govuk-checkboxes__label::before {\n      top: $input-offset; // 2\n      left: 0;\n      width: $govuk-small-checkboxes-size; // 1\n      height: $govuk-small-checkboxes-size; // 1\n    }\n\n    // ✔ Check mark\n    //\n    // Reduce the size of the check mark and re-align within the checkbox\n    .govuk-checkboxes__label::after {\n      top: 17px;\n\n      // Horizontal position is just the normal sized left value accounting for\n      // the new width of the smaller checkbox\n      left: (16px - $govuk-checkbox-check-horizontal-position);\n      width: 12px;\n      height: 6.5px;\n      border-width: 0 0 3px 3px;\n    }\n\n    // Fix position of hint with small checkboxes\n    //\n    // Do not use hints with small checkboxes – because they're within the input\n    // wrapper they trigger the hover state, but clicking them doesn't actually\n    // activate the control.\n    //\n    // (If you do use them, they won't look completely broken... but seriously,\n    // don't use them)\n    .govuk-checkboxes__hint {\n      padding-left: ($govuk-small-checkboxes-size + $input-offset);\n    }\n\n    // Align conditional reveals with small checkboxes\n    .govuk-checkboxes__conditional {\n      $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);\n      margin-left: $margin-left;\n      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);\n    }\n\n    .govuk-checkboxes__divider {\n      width: $govuk-small-checkboxes-size;\n      margin-bottom: govuk-spacing(1);\n    }\n\n    // Hover state for small checkboxes.\n    //\n    // We use a hover state for small checkboxes because the touch target size\n    // is so much larger than their visible size, and so we need to provide\n    // feedback to the user as to which checkbox they will select when their\n    // cursor is outside of the visible area.\n    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {\n      // Forced colours modes tend to ignore box-shadow.\n      // Apply an outline for those modes to use instead.\n      outline: $govuk-focus-width dashed transparent;\n      outline-offset: 1px;\n      box-shadow: 0 0 0 $govuk-hover-width govuk-functional-colour(hover);\n    }\n\n    // Because we've overridden the border-shadow provided by the focus state,\n    // we need to redefine that too.\n    //\n    // We use two box shadows, one that restores the original focus state [1]\n    // and another that then applies the hover state [2].\n    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n      // Set different HCM colour when we have both hover/focus applied at once\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        outline-color: Highlight;\n      }\n      // prettier-ignore\n      box-shadow:\n        0 0 0 $govuk-focus-width govuk-functional-colour(focus), // 1\n        0 0 0 $govuk-hover-width govuk-functional-colour(hover); // 2\n    }\n\n    // For devices that explicitly don't support hover, don't provide a hover\n    // state (e.g. on touch devices like iOS).\n    //\n    // We can't use `@media (hover: hover)` because we wouldn't get the hover\n    // state in browsers that don't support `@media (hover)` (like Internet\n    // Explorer) – so we have to 'undo' the hover state instead.\n    @media (hover: none), (pointer: coarse) {\n      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {\n        box-shadow: initial;\n      }\n\n      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n        box-shadow: 0 0 0 $govuk-focus-width govuk-functional-colour(focus);\n      }\n    }\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss

@@ -13,11 +13,8 @@
     // changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
-    @include _govuk-rebrand(
-      "background-color",
-      $govuk-template-background-colour,
-      $_govuk-rebrand-template-background-colour
-    );
+    color: govuk-functional-colour(surface-text);
+    background-color: govuk-functional-colour(surface-background);
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute

data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/cookie-banner/_index.scss"],"names":[],"mappings":"AAAA,yBAAyB;;AAEzB;EACE,kEAAkE;EAClE,sCAAsC;;EAEtC;IACE,6BAA6B;IAC7B,yEAAyE;IACzE,4CAA4C;;IAE5C,uEAAuE;IACvE,mCAAmC;IACnC,qDAAqD;;IAErD;;;;KAIC;EACH;;EAEA,8EAA8E;EAC9E,+DAA+D;EAC/D;IACE,aAAa;EACf;;EAEA;IACE,wDAAwD;IACxD,oCAAoC;;IAEpC;MACE,oEAAoE;MACpE,qEAAqE;MACrE,UAAU;MACV,aAAa;IACf;;IAEA;MACE,+DAA+D;MAC/D,2BAA2B;MAC3B,CAAC;MACD,yEAAyE;MACzE,wEAAwE;MACxE,yEAAyE;MACzE,kEAAkE;MAClE,uEAAuE;MACvE,CAAC;MACD,iEAAiE;MACjE,uBAAuB;MACvB,CAAC;MACD,+DAA+D;MAC/D,aAAa;IACf;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../button/index\";\n\n@include govuk-exports(\"govuk/component/cookie-banner\") {\n  // This needs to be kept in sync with the header component's styles\n  $border-bottom-width: govuk-spacing(2);\n\n  .govuk-cookie-banner {\n    padding-top: govuk-spacing(4);\n    // The component does not set bottom spacing. The bottom spacing should be\n    // created by the items inside the component.\n\n    // Visually separate the cookie banner from content underneath when user\n    // changes colours in their browser.\n    border-bottom: $border-bottom-width solid transparent;\n\n    @include _govuk-rebrand(\n      \"background-color\",\n      $govuk-template-background-colour,\n      $_govuk-rebrand-template-background-colour\n    );\n  }\n\n  // Support older browsers which don't hide elements with the `hidden` attribute\n  // when user hides the whole cookie banner with a 'Hide' button.\n  .govuk-cookie-banner[hidden] {\n    display: none;\n  }\n\n  .govuk-cookie-banner__message {\n    // Remove the extra height added by the separator border.\n    margin-bottom: -$border-bottom-width;\n\n    &[hidden] {\n      // Support older browsers which don't hide elements with the `hidden`\n      // attribute when the visibility of cookie and replacement messages is\n      // toggled.\n      display: none;\n    }\n\n    &:focus {\n      // Remove the native visible focus indicator when the element is\n      // programmatically focused.\n      //\n      // The focused cookie banner is the first element on the page and the last\n      // thing the user interacted with prior to it gaining focus. We therefore\n      // assume that moving focus to it is not going to surprise users, and that\n      // giving it a visible focus indicator could be more confusing than\n      // helpful, especially as the element is not normally keyboard operable.\n      //\n      // We have flagged this in the research section of the guidance as\n      // something to monitor.\n      //\n      // A related discussion: https://github.com/w3c/wcag/issues/1001\n      outline: none;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/cookie-banner/_index.scss"],"names":[],"mappings":"AAAA,yBAAyB;;AAEzB;EACE,kEAAkE;EAClE,sCAAsC;;EAEtC;IACE,6BAA6B;IAC7B,yEAAyE;IACzE,4CAA4C;;IAE5C,uEAAuE;IACvE,mCAAmC;IACnC,qDAAqD;;IAErD,4CAA4C;IAC5C,6DAA6D;EAC/D;;EAEA,8EAA8E;EAC9E,+DAA+D;EAC/D;IACE,aAAa;EACf;;EAEA;IACE,wDAAwD;IACxD,oCAAoC;;IAEpC;MACE,oEAAoE;MACpE,qEAAqE;MACrE,UAAU;MACV,aAAa;IACf;;IAEA;MACE,+DAA+D;MAC/D,2BAA2B;MAC3B,CAAC;MACD,yEAAyE;MACzE,wEAAwE;MACxE,yEAAyE;MACzE,kEAAkE;MAClE,uEAAuE;MACvE,CAAC;MACD,iEAAiE;MACjE,uBAAuB;MACvB,CAAC;MACD,+DAA+D;MAC/D,aAAa;IACf;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../button/index\";\n\n@include govuk-exports(\"govuk/component/cookie-banner\") {\n  // This needs to be kept in sync with the header component's styles\n  $border-bottom-width: govuk-spacing(2);\n\n  .govuk-cookie-banner {\n    padding-top: govuk-spacing(4);\n    // The component does not set bottom spacing. The bottom spacing should be\n    // created by the items inside the component.\n\n    // Visually separate the cookie banner from content underneath when user\n    // changes colours in their browser.\n    border-bottom: $border-bottom-width solid transparent;\n\n    color: govuk-functional-colour(surface-text);\n    background-color: govuk-functional-colour(surface-background);\n  }\n\n  // Support older browsers which don't hide elements with the `hidden` attribute\n  // when user hides the whole cookie banner with a 'Hide' button.\n  .govuk-cookie-banner[hidden] {\n    display: none;\n  }\n\n  .govuk-cookie-banner__message {\n    // Remove the extra height added by the separator border.\n    margin-bottom: -$border-bottom-width;\n\n    &[hidden] {\n      // Support older browsers which don't hide elements with the `hidden`\n      // attribute when the visibility of cookie and replacement messages is\n      // toggled.\n      display: none;\n    }\n\n    &:focus {\n      // Remove the native visible focus indicator when the element is\n      // programmatically focused.\n      //\n      // The focused cookie banner is the first element on the page and the last\n      // thing the user interacted with prior to it gaining focus. We therefore\n      // assume that moving focus to it is not going to surprise users, and that\n      // giving it a visible focus indicator could be more confusing than\n      // helpful, especially as the element is not normally keyboard operable.\n      //\n      // We have flagged this in the research section of the guidance as\n      // something to monitor.\n      //\n      // A related discussion: https://github.com/w3c/wcag/issues/1001\n      outline: none;\n    }\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/fixtures.json

@@ -33,7 +33,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": true,
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this government service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n</div>"
+            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this government service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"submit\" value=\"accept\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button type=\"submit\" value=\"reject\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n</div>"
         },
         {
             "name": "accepted confirmation banner",
@@ -111,7 +111,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on <span>my service</span>\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>\n          <p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n</div>"
+            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on <span>my service</span>\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>\n          <p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"submit\" value=\"accept\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button type=\"submit\" value=\"reject\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n</div>"
         },
         {
             "name": "heading html",
@@ -478,7 +478,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
+            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"submit\" value=\"accept\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button type=\"submit\" value=\"reject\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
         {
             "name": "full banner hidden",
@@ -537,43 +537,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\" hidden data-hide-cookie-banner=\"true\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
-        },
-        {
-            "name": "rebrand",
-            "options": {
-                "messages": [
-                    {
-                        "headingText": "Cookies on this government service",
-                        "text": "We use analytics cookies to help understand how users use our service.",
-                        "actions": [
-                            {
-                                "text": "Accept analytics cookies",
-                                "type": "submit",
-                                "name": "cookies",
-                                "value": "accept"
-                            },
-                            {
-                                "text": "Reject analytics cookies",
-                                "type": "submit",
-                                "name": "cookies",
-                                "value": "reject"
-                            },
-                            {
-                                "text": "View cookie preferences",
-                                "href": "/cookie-preferences"
-                            }
-                        ]
-                    }
-                ]
-            },
-            "hidden": true,
-            "description": "",
-            "pageTemplateOptions": {
-                "htmlClasses": "govuk-template--rebranded"
-            },
-            "screenshot": true,
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this government service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n</div>"
+            "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\" hidden data-hide-cookie-banner=\"true\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"submit\" value=\"accept\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button type=\"submit\" value=\"reject\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
         }
     ]
 }

data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/template-default.html

@@ -13,10 +13,10 @@
     </div>
 
     <div class="govuk-button-group">
-      <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+      <button type="submit" value="accept" name="cookies" class="govuk-button" data-module="govuk-button">
         Accept analytics cookies
       </button>
-      <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+      <button type="submit" value="reject" name="cookies" class="govuk-button" data-module="govuk-button">
         Reject analytics cookies
       </button>
       <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>

data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/template-with-html.html

@@ -14,10 +14,10 @@
     </div>
 
     <div class="govuk-button-group">
-      <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+      <button type="submit" value="accept" name="cookies" class="govuk-button" data-module="govuk-button">
         Accept analytics cookies
       </button>
-      <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+      <button type="submit" value="reject" name="cookies" class="govuk-button" data-module="govuk-button">
         Reject analytics cookies
       </button>
       <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>

data/node_modules/govuk-frontend/dist/govuk/components/details/_index.scss

@@ -46,7 +46,8 @@
   // like inset text
   @media screen\0 {
     .govuk-details {
-      border-left: $govuk-border-width-wide solid $govuk-border-colour;
+      border-left: $govuk-border-width-wide solid;
+      border-left-color: govuk-functional-colour(border);
     }
 
     .govuk-details__summary {
@@ -81,11 +82,11 @@
       padding-left: govuk-spacing(4) + $govuk-border-width;
 
       // Style the summary to look like a link...
-      color: $govuk-link-colour;
+      color: govuk-functional-colour(link);
       cursor: pointer;
 
       &:hover {
-        color: $govuk-link-hover-colour;
+        color: govuk-functional-colour(link-hover);
       }
 
       &:focus {
@@ -131,7 +132,8 @@
     }
 
     .govuk-details__text {
-      border-left: $govuk-border-width solid $govuk-border-colour;
+      border-left: $govuk-border-width solid;
+      border-left-color: govuk-functional-colour(border);
     }
   }
 }

data/node_modules/govuk-frontend/dist/govuk/components/details/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/details/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,6CAA6C;;IAE7C,cAAc;EAChB;;EAEA;IACE,cAAc;EAChB;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE;MACE,aAAa;IACf;;IAEA;;MAEE,gBAAgB;IAClB;EACF;;EAEA;IACE,6BAA6B;IAC7B,gCAAgC;IAChC,8BAA8B;EAChC;;EAEA;IACE,aAAa;IACb,+BAA+B;EACjC;;EAEA;IACE,gBAAgB;EAClB;;EAEA,oDAAoD;EACpD,2EAA2E;EAC3E,iBAAiB;EACjB;IACE;MACE,gEAAgE;IAClE;;IAEA;MACE,4BAA4B;IAC9B;;IAEA;MACE,qCAAqC;MACrC,6CAA6C;MAC7C,8BAA8B;IAChC;EACF;;EAEA,2EAA2E;EAC3E,0DAA0D;EAC1D,CAAC;EACD,+DAA+D;EAC/D,CAAC;EACD,2DAA2D;EAC3D,sEAAsE;EACtE,oEAAoE;EACpE;IACE;MACE,qDAAqD;MACrD,kBAAkB;;MAElB,oEAAoE;MACpE,0BAAkB;MAAlB,kBAAkB;;MAElB,sEAAsE;MACtE,oDAAoD;;MAEpD,0CAA0C;MAC1C,yBAAyB;MACzB,eAAe;;MAEf;QACE,+BAA+B;MACjC;;MAEA;QACE,2BAA2B;MAC7B;IACF;IACA,+CAA+C;IAC/C;MACE,8BAA8B;IAChC;;IAEA;MACE,oCAAoC;IACtC;;IAEA,+DAA+D;IAC/D;MACE,qBAAqB;IACvB;;IAEA,4EAA4E;IAC5E,mEAAmE;IACnE;MACE,aAAa;IACf;;IAEA,4DAA4D;IAC5D;MACE,WAAW;MACX,kBAAkB;;MAElB,SAAS;MACT,SAAS;MACT,OAAO;;MAEP,YAAY;;MAEZ,0DAA0D;;MAE1D;QACE,yDAAyD;MAC3D;IACF;;IAEA;MACE,2DAA2D;IAC7D;EACF;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/details\") {\n  .govuk-details {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    @include govuk-responsive-margin(6, \"bottom\");\n\n    display: block;\n  }\n\n  .govuk-details__summary {\n    display: block;\n  }\n\n  .govuk-details[open] .govuk-details__summary {\n    margin-bottom: govuk-spacing(1);\n  }\n\n  .govuk-details__summary-text {\n    > :first-child {\n      margin-top: 0;\n    }\n\n    > :only-child,\n    > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .govuk-details__text {\n    padding-top: govuk-spacing(3);\n    padding-bottom: govuk-spacing(3);\n    padding-left: govuk-spacing(4);\n  }\n\n  .govuk-details__text p {\n    margin-top: 0;\n    margin-bottom: govuk-spacing(4);\n  }\n\n  .govuk-details__text > :last-child {\n    margin-bottom: 0;\n  }\n\n  // Hack to target IE8 - IE11 (and REALLY old Firefox)\n  // These browsers don't support the details element, so fall back to looking\n  // like inset text\n  @media screen\\0 {\n    .govuk-details {\n      border-left: $govuk-border-width-wide solid $govuk-border-colour;\n    }\n\n    .govuk-details__summary {\n      margin-top: govuk-spacing(3);\n    }\n\n    .govuk-details__summary-text {\n      @include govuk-typography-weight-bold;\n      @include govuk-responsive-margin(4, \"bottom\");\n      padding-left: govuk-spacing(4);\n    }\n  }\n\n  // We wrap styles for newer browsers in a feature query, which is ignored by\n  // older browsers, which always expand the details element.\n  //\n  // Additionally, -ms-ime-align is only supported by Edge 12 - 18\n  //\n  // This ensures we don't use these styles in browsers which:\n  //   - support ES6 modules but not the <details> element (Edge 16 - 18)\n  //   - do not support ES6 modules or the <details> element (eg, IE8+)\n  @supports not (-ms-ime-align: auto) {\n    .govuk-details__summary {\n      // Absolutely position the marker against this element\n      position: relative;\n\n      // Make the focus outline shrink-wrap the text content of the summary\n      width: fit-content;\n\n      // Allow for absolutely positioned marker and align with disclosed text\n      padding-left: govuk-spacing(4) + $govuk-border-width;\n\n      // Style the summary to look like a link...\n      color: $govuk-link-colour;\n      cursor: pointer;\n\n      &:hover {\n        color: $govuk-link-hover-colour;\n      }\n\n      &:focus {\n        @include govuk-focused-text;\n      }\n    }\n    // ...but only underline the text, not the arrow\n    .govuk-details__summary-text {\n      @include govuk-link-decoration;\n    }\n\n    .govuk-details__summary:hover .govuk-details__summary-text {\n      @include govuk-link-hover-decoration;\n    }\n\n    // Remove the underline when focussed to avoid duplicate borders\n    .govuk-details__summary:focus .govuk-details__summary-text {\n      text-decoration: none;\n    }\n\n    // Remove the default details marker so we can style our own consistently and\n    // ensure it displays in Firefox (see implementation.md for details)\n    .govuk-details__summary::-webkit-details-marker {\n      display: none;\n    }\n\n    // Append our own open / closed marker using a pseudo-element\n    .govuk-details__summary::before {\n      content: \"\";\n      position: absolute;\n\n      top: -1px;\n      bottom: 0;\n      left: 0;\n\n      margin: auto;\n\n      @include govuk-shape-arrow($direction: right, $base: 14px);\n\n      .govuk-details[open] > & {\n        @include govuk-shape-arrow($direction: down, $base: 14px);\n      }\n    }\n\n    .govuk-details__text {\n      border-left: $govuk-border-width solid $govuk-border-colour;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/details/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,6CAA6C;;IAE7C,cAAc;EAChB;;EAEA;IACE,cAAc;EAChB;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE;MACE,aAAa;IACf;;IAEA;;MAEE,gBAAgB;IAClB;EACF;;EAEA;IACE,6BAA6B;IAC7B,gCAAgC;IAChC,8BAA8B;EAChC;;EAEA;IACE,aAAa;IACb,+BAA+B;EACjC;;EAEA;IACE,gBAAgB;EAClB;;EAEA,oDAAoD;EACpD,2EAA2E;EAC3E,iBAAiB;EACjB;IACE;MACE,2CAA2C;MAC3C,kDAAkD;IACpD;;IAEA;MACE,4BAA4B;IAC9B;;IAEA;MACE,qCAAqC;MACrC,6CAA6C;MAC7C,8BAA8B;IAChC;EACF;;EAEA,2EAA2E;EAC3E,0DAA0D;EAC1D,CAAC;EACD,+DAA+D;EAC/D,CAAC;EACD,2DAA2D;EAC3D,sEAAsE;EACtE,oEAAoE;EACpE;IACE;MACE,qDAAqD;MACrD,kBAAkB;;MAElB,oEAAoE;MACpE,0BAAkB;MAAlB,kBAAkB;;MAElB,sEAAsE;MACtE,oDAAoD;;MAEpD,0CAA0C;MAC1C,oCAAoC;MACpC,eAAe;;MAEf;QACE,0CAA0C;MAC5C;;MAEA;QACE,2BAA2B;MAC7B;IACF;IACA,+CAA+C;IAC/C;MACE,8BAA8B;IAChC;;IAEA;MACE,oCAAoC;IACtC;;IAEA,+DAA+D;IAC/D;MACE,qBAAqB;IACvB;;IAEA,4EAA4E;IAC5E,mEAAmE;IACnE;MACE,aAAa;IACf;;IAEA,4DAA4D;IAC5D;MACE,WAAW;MACX,kBAAkB;;MAElB,SAAS;MACT,SAAS;MACT,OAAO;;MAEP,YAAY;;MAEZ,0DAA0D;;MAE1D;QACE,yDAAyD;MAC3D;IACF;;IAEA;MACE,sCAAsC;MACtC,kDAAkD;IACpD;EACF;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/details\") {\n  .govuk-details {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    @include govuk-responsive-margin(6, \"bottom\");\n\n    display: block;\n  }\n\n  .govuk-details__summary {\n    display: block;\n  }\n\n  .govuk-details[open] .govuk-details__summary {\n    margin-bottom: govuk-spacing(1);\n  }\n\n  .govuk-details__summary-text {\n    > :first-child {\n      margin-top: 0;\n    }\n\n    > :only-child,\n    > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .govuk-details__text {\n    padding-top: govuk-spacing(3);\n    padding-bottom: govuk-spacing(3);\n    padding-left: govuk-spacing(4);\n  }\n\n  .govuk-details__text p {\n    margin-top: 0;\n    margin-bottom: govuk-spacing(4);\n  }\n\n  .govuk-details__text > :last-child {\n    margin-bottom: 0;\n  }\n\n  // Hack to target IE8 - IE11 (and REALLY old Firefox)\n  // These browsers don't support the details element, so fall back to looking\n  // like inset text\n  @media screen\\0 {\n    .govuk-details {\n      border-left: $govuk-border-width-wide solid;\n      border-left-color: govuk-functional-colour(border);\n    }\n\n    .govuk-details__summary {\n      margin-top: govuk-spacing(3);\n    }\n\n    .govuk-details__summary-text {\n      @include govuk-typography-weight-bold;\n      @include govuk-responsive-margin(4, \"bottom\");\n      padding-left: govuk-spacing(4);\n    }\n  }\n\n  // We wrap styles for newer browsers in a feature query, which is ignored by\n  // older browsers, which always expand the details element.\n  //\n  // Additionally, -ms-ime-align is only supported by Edge 12 - 18\n  //\n  // This ensures we don't use these styles in browsers which:\n  //   - support ES6 modules but not the <details> element (Edge 16 - 18)\n  //   - do not support ES6 modules or the <details> element (eg, IE8+)\n  @supports not (-ms-ime-align: auto) {\n    .govuk-details__summary {\n      // Absolutely position the marker against this element\n      position: relative;\n\n      // Make the focus outline shrink-wrap the text content of the summary\n      width: fit-content;\n\n      // Allow for absolutely positioned marker and align with disclosed text\n      padding-left: govuk-spacing(4) + $govuk-border-width;\n\n      // Style the summary to look like a link...\n      color: govuk-functional-colour(link);\n      cursor: pointer;\n\n      &:hover {\n        color: govuk-functional-colour(link-hover);\n      }\n\n      &:focus {\n        @include govuk-focused-text;\n      }\n    }\n    // ...but only underline the text, not the arrow\n    .govuk-details__summary-text {\n      @include govuk-link-decoration;\n    }\n\n    .govuk-details__summary:hover .govuk-details__summary-text {\n      @include govuk-link-hover-decoration;\n    }\n\n    // Remove the underline when focussed to avoid duplicate borders\n    .govuk-details__summary:focus .govuk-details__summary-text {\n      text-decoration: none;\n    }\n\n    // Remove the default details marker so we can style our own consistently and\n    // ensure it displays in Firefox (see implementation.md for details)\n    .govuk-details__summary::-webkit-details-marker {\n      display: none;\n    }\n\n    // Append our own open / closed marker using a pseudo-element\n    .govuk-details__summary::before {\n      content: \"\";\n      position: absolute;\n\n      top: -1px;\n      bottom: 0;\n      left: 0;\n\n      margin: auto;\n\n      @include govuk-shape-arrow($direction: right, $base: 14px);\n\n      .govuk-details[open] > & {\n        @include govuk-shape-arrow($direction: down, $base: 14px);\n      }\n    }\n\n    .govuk-details__text {\n      border-left: $govuk-border-width solid;\n      border-left-color: govuk-functional-colour(border);\n    }\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/error-message/_index.scss

@@ -7,7 +7,7 @@
     margin-bottom: govuk-spacing(3);
     clear: both;
 
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/components/error-message/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/error-message/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,6CAA6C;;IAE7C,cAAc;IACd,aAAa,EAAE,kDAAkD;IACjE,+BAA+B;IAC/B,WAAW;;IAEX,0BAA0B;EAC5B;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/error-message\") {\n  .govuk-error-message {\n    @include govuk-font($size: 19, $weight: bold);\n\n    display: block;\n    margin-top: 0; // Reset any default browser margins for paragraphs\n    margin-bottom: govuk-spacing(3);\n    clear: both;\n\n    color: $govuk-error-colour;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/error-message/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,6CAA6C;;IAE7C,cAAc;IACd,aAAa,EAAE,kDAAkD;IACjE,+BAA+B;IAC/B,WAAW;;IAEX,qCAAqC;EACvC;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/error-message\") {\n  .govuk-error-message {\n    @include govuk-font($size: 19, $weight: bold);\n\n    display: block;\n    margin-top: 0; // Reset any default browser margins for paragraphs\n    margin-bottom: govuk-spacing(3);\n    clear: both;\n\n    color: govuk-functional-colour(error);\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_index.scss

@@ -7,10 +7,12 @@
     @include govuk-responsive-padding(4);
     @include govuk-responsive-margin(8, "bottom");
 
-    border: $govuk-border-width solid $govuk-error-colour;
+    border: $govuk-border-width solid;
+    border-color: govuk-functional-colour(error);
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline: $govuk-focus-width solid;
+      outline-color: govuk-functional-colour(focus);
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/error-summary/_index.scss"],"names":[],"mappings":"AAAA,0BAA0B;;AAE1B;EACE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,oCAAoC;IACpC,6CAA6C;;IAE7C,qDAAqD;;IAErD;MACE,qDAAqD;IACvD;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;;IAErC,aAAa;IACb,6CAA6C;EAC/C;;EAEA;IACE;MACE,gBAAgB;IAClB;;IAEA;MACE,0CAA0C;IAC5C;;IAEA;MACE,6CAA6C;IAC/C;EACF;;EAEA,2DAA2D;EAC3D;IACE,gBAAgB;EAClB;;EAEA,kDAAkD;EAClD;IACE,gBAAgB;EAClB;;EAEA;IACE,qCAAqC;IACrC,0BAA0B;IAC1B,+BAA+B;EACjC;AACF","file":"_index.scss","sourcesContent":["@import \"../../core/lists\";\n\n@include govuk-exports(\"govuk/component/error-summary\") {\n  .govuk-error-summary {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    @include govuk-responsive-padding(4);\n    @include govuk-responsive-margin(8, \"bottom\");\n\n    border: $govuk-border-width solid $govuk-error-colour;\n\n    &:focus {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n    }\n  }\n\n  .govuk-error-summary__title {\n    @include govuk-font-size($size: 24);\n    @include govuk-typography-weight-bold;\n\n    margin-top: 0;\n    @include govuk-responsive-margin(4, \"bottom\");\n  }\n\n  .govuk-error-summary__body {\n    p {\n      margin-bottom: 0;\n    }\n\n    > * + * {\n      @include govuk-responsive-margin(4, \"top\");\n    }\n\n    > :last-child {\n      @include govuk-responsive-margin(1, \"bottom\");\n    }\n  }\n\n  // Cross-component class - adjusts styling of list component\n  .govuk-error-summary__list {\n    margin-bottom: 0;\n  }\n\n  // Remove the bottom margin from the last list item\n  .govuk-error-summary__list li:last-child {\n    margin-bottom: 0;\n  }\n\n  .govuk-error-summary__list a {\n    @include govuk-typography-weight-bold;\n    @include govuk-link-common;\n    @include govuk-link-style-error;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/error-summary/_index.scss"],"names":[],"mappings":"AAAA,0BAA0B;;AAE1B;EACE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,oCAAoC;IACpC,6CAA6C;;IAE7C,iCAAiC;IACjC,4CAA4C;;IAE5C;MACE,iCAAiC;MACjC,6CAA6C;IAC/C;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;;IAErC,aAAa;IACb,6CAA6C;EAC/C;;EAEA;IACE;MACE,gBAAgB;IAClB;;IAEA;MACE,0CAA0C;IAC5C;;IAEA;MACE,6CAA6C;IAC/C;EACF;;EAEA,2DAA2D;EAC3D;IACE,gBAAgB;EAClB;;EAEA,kDAAkD;EAClD;IACE,gBAAgB;EAClB;;EAEA;IACE,qCAAqC;IACrC,0BAA0B;IAC1B,+BAA+B;EACjC;AACF","file":"_index.scss","sourcesContent":["@import \"../../core/lists\";\n\n@include govuk-exports(\"govuk/component/error-summary\") {\n  .govuk-error-summary {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    @include govuk-responsive-padding(4);\n    @include govuk-responsive-margin(8, \"bottom\");\n\n    border: $govuk-border-width solid;\n    border-color: govuk-functional-colour(error);\n\n    &:focus {\n      outline: $govuk-focus-width solid;\n      outline-color: govuk-functional-colour(focus);\n    }\n  }\n\n  .govuk-error-summary__title {\n    @include govuk-font-size($size: 24);\n    @include govuk-typography-weight-bold;\n\n    margin-top: 0;\n    @include govuk-responsive-margin(4, \"bottom\");\n  }\n\n  .govuk-error-summary__body {\n    p {\n      margin-bottom: 0;\n    }\n\n    > * + * {\n      @include govuk-responsive-margin(4, \"top\");\n    }\n\n    > :last-child {\n      @include govuk-responsive-margin(1, \"bottom\");\n    }\n  }\n\n  // Cross-component class - adjusts styling of list component\n  .govuk-error-summary__list {\n    margin-bottom: 0;\n  }\n\n  // Remove the bottom margin from the last list item\n  .govuk-error-summary__list li:last-child {\n    margin-bottom: 0;\n  }\n\n  .govuk-error-summary__list a {\n    @include govuk-typography-weight-bold;\n    @include govuk-link-common;\n    @include govuk-link-style-error;\n  }\n}\n"]}