defra_ruby_template 5.11.1 → 6.4.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    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/character-count/fixtures.json

@@ -12,26 +12,14 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n  <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
-        },
-        {
-            "name": "with custom textarea description",
-            "options": {
-                "name": "custom-textarea-description",
-                "id": "custom-textarea-description",
-                "maxlength": 10,
-                "label": {
-                    "text": "Can you provide more detail?"
-                },
-                "textareaDescriptionText": "Gallwch ddefnyddio hyd at %{count} nod"
+            "pageTemplateOptions": {},
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
             },
-            "hidden": false,
-            "description": "with textarea description translated into Welsh.",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"custom-textarea-description\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n  <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n    Gallwch ddefnyddio hyd at 10 nod\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n  <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
             "name": "with hint",
@@ -48,29 +36,10 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-hint\">\n    Can you provide more detail?\n  </label>\n  <div id=\"with-hint-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n  <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
-        {
-            "name": "with error",
-            "options": {
-                "name": "with-error",
-                "id": "with-error",
-                "maxlength": 10,
-                "label": {
-                    "text": "Can you provide more detail?"
-                },
-                "errorMessage": {
-                    "text": "Please provide more detail"
-                }
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-error\">\n    Can you provide more detail?\n  </label>\n  <p id=\"with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please provide more detail\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"with-error\" name=\"with-error\" rows=\"5\" aria-describedby=\"with-error-info with-error-error\"></textarea>\n  <div id=\"with-error-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
-        },
         {
             "name": "with hint and error",
             "options": {
@@ -89,7 +58,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-error\">\n    Can you provide more detail?\n  </label>\n  <div id=\"with-error-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <p id=\"with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please provide more detail\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"with-error\" name=\"with-error\" rows=\"5\" aria-describedby=\"with-error-info with-error-hint with-error-error\"></textarea>\n  <div id=\"with-error-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -106,7 +75,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n  <label class=\"govuk-label\" for=\"with-default-value\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n  <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 100 characters\n  </div>\n</div>"
         },
@@ -126,7 +95,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n  <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n  <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -143,7 +112,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"custom-rows\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n  <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -161,7 +130,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n  </h1>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n  <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -177,7 +146,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label\" for=\"word-count\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n  <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
         },
@@ -194,43 +163,26 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n  <label class=\"govuk-label\" for=\"with-threshold\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n  <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
-            "name": "with translations",
+            "name": "with custom textarea description",
             "options": {
-                "id": "with-translations",
-                "name": "with-translations",
+                "name": "custom-textarea-description",
+                "id": "custom-textarea-description",
                 "maxlength": 10,
                 "label": {
-                    "text": "Full address"
-                },
-                "charactersUnderLimitText": {
-                    "other": "%{count} characters to go",
-                    "one": "One character to go"
-                },
-                "charactersAtLimitText": "Zero characters left",
-                "charactersOverLimitText": {
-                    "other": "%{count} characters too many",
-                    "one": "One character too many"
-                },
-                "wordsUnderLimitText": {
-                    "other": "%{count} words to go",
-                    "one": "One word to go"
+                    "text": "Can you provide more detail?"
                 },
-                "wordsAtLimitText": "Zero words left",
-                "wordsOverLimitText": {
-                    "other": "%{count} words too many",
-                    "one": "One word too many"
-                }
+                "textareaDescriptionText": "Gallwch ddefnyddio hyd at %{count} nod"
             },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
+            "hidden": true,
+            "description": "with textarea description translated into Welsh.",
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n  <label class=\"govuk-label\" for=\"with-translations\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n  <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"custom-textarea-description\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n  <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n    Gallwch ddefnyddio hyd at 10 nod\n  </div>\n</div>"
         },
         {
             "name": "classes",
@@ -245,7 +197,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n  <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -261,7 +213,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"character-count-id\">\n    With custom id\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"character-count-id\" name=\"test-name\" rows=\"5\" aria-describedby=\"character-count-id-info\"></textarea>\n  <div id=\"character-count-id-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -280,7 +232,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n  <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -299,7 +251,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count app-character-count--custom-modifier\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-formgroup\">\n    With formgroup\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n  <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -318,7 +270,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n    With custom countMessage class\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n  <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -335,7 +287,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-spellcheck\">\n    With spellcheck\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n  <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -352,7 +304,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"without-spellcheck\">\n    Without spellcheck\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n  <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -372,7 +324,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n  <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -388,7 +340,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n  <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -404,7 +356,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"user1.profile[address]\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n  <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -423,7 +375,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"maxlength-should-be-removed\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"maxlength-should-be-removed\" name=\"address\" rows=\"5\" aria-describedby=\"maxlength-should-be-removed-info\" maxlength=\"10\"></textarea>\n  <div id=\"maxlength-should-be-removed-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
@@ -438,7 +390,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\">\n  <label class=\"govuk-label\" for=\"to-configure-in-javascript\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"to-configure-in-javascript\" name=\"address\" rows=\"5\" aria-describedby=\"to-configure-in-javascript-info\"></textarea>\n  <div id=\"to-configure-in-javascript-info\" class=\"govuk-hint govuk-character-count__message\">\n    \n  </div>\n</div>"
         },
@@ -454,7 +406,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-i18n.textarea-description.other=\"No more than %{count} characters\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n    \n  </div>\n</div>"
         },
@@ -469,9 +421,43 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n    \n  </div>\n</div>"
+        },
+        {
+            "name": "with translations",
+            "options": {
+                "id": "with-translations",
+                "name": "with-translations",
+                "maxlength": 10,
+                "label": {
+                    "text": "Full address"
+                },
+                "charactersUnderLimitText": {
+                    "other": "%{count} characters to go",
+                    "one": "One character to go"
+                },
+                "charactersAtLimitText": "Zero characters left",
+                "charactersOverLimitText": {
+                    "other": "%{count} characters too many",
+                    "one": "One character too many"
+                },
+                "wordsUnderLimitText": {
+                    "other": "%{count} words to go",
+                    "one": "One word to go"
+                },
+                "wordsAtLimitText": "Zero words left",
+                "wordsOverLimitText": {
+                    "other": "%{count} words too many",
+                    "one": "One word too many"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n  <label class=\"govuk-label\" for=\"with-translations\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n  <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         }
     ]
 }

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

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

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

@@ -0,0 +1,12 @@
+@use "mixin";
+
+@import "../../base";
+@import "../error-message";
+@import "../fieldset";
+@import "../hint";
+@import "../label";
+
+@include govuk-exports("govuk/component/checkboxes") {
+  @include mixin.styles;
+}
+