defra_ruby_template 5.11.1 → 6.4.0

data/node_modules/govuk-frontend/dist/govuk/components/tabs/tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.mjs","sources":["../../../../src/govuk/components/tabs/tabs.mjs"],"sourcesContent":["import { getBreakpoint, getFragmentFromUrl } from '../../common/index.mjs'\nimport { Component } from '../../component.mjs'\nimport { ElementError } from '../../errors/index.mjs'\n\n/**\n * Tabs component\n *\n * @preserve\n */\nexport class Tabs extends Component {\n  /** @private */\n  $tabs\n\n  /** @private */\n  $tabList\n\n  /** @private */\n  $tabListItems\n\n  /** @private */\n  jsHiddenClass = 'govuk-tabs__panel--hidden'\n\n  /** @private */\n  changingHash = false\n\n  /** @private */\n  boundTabClick\n\n  /** @private */\n  boundTabKeydown\n\n  /** @private */\n  boundOnHashChange\n\n  /**\n   * @private\n   * @type {MediaQueryList | null}\n   */\n  mql = null\n\n  /**\n   * @param {Element | null} $root - HTML element to use for tabs\n   */\n  constructor($root) {\n    super($root)\n\n    const $tabs = this.$root.querySelectorAll('a.govuk-tabs__tab')\n    if (!$tabs.length) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'Links (`<a class=\"govuk-tabs__tab\">`)'\n      })\n    }\n\n    this.$tabs = $tabs\n\n    // Save bound functions so we can remove event listeners during teardown\n    this.boundTabClick = this.onTabClick.bind(this)\n    this.boundTabKeydown = this.onTabKeydown.bind(this)\n    this.boundOnHashChange = this.onHashChange.bind(this)\n\n    const $tabList = this.$root.querySelector('.govuk-tabs__list')\n    const $tabListItems = this.$root.querySelectorAll(\n      'li.govuk-tabs__list-item'\n    )\n\n    if (!$tabList) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'List (`<ul class=\"govuk-tabs__list\">`)'\n      })\n    }\n\n    if (!$tabListItems.length) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'List items (`<li class=\"govuk-tabs__list-item\">`)'\n      })\n    }\n\n    this.$tabList = $tabList\n    this.$tabListItems = $tabListItems\n\n    this.setupResponsiveChecks()\n  }\n\n  /**\n   * Setup viewport resize check\n   *\n   * @private\n   */\n  setupResponsiveChecks() {\n    const breakpoint = getBreakpoint('tablet')\n\n    if (!breakpoint.value) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: `CSS custom property (\\`${breakpoint.property}\\`) on pseudo-class \\`:root\\``\n      })\n    }\n\n    // Media query list for GOV.UK Frontend tablet breakpoint\n    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)\n\n    // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need\n    // to be able to fall back to the deprecated MediaQueryList.addListener\n    if ('addEventListener' in this.mql) {\n      this.mql.addEventListener('change', () => this.checkMode())\n    } else {\n      // @ts-expect-error Property 'addListener' does not exist\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      this.mql.addListener(() => this.checkMode())\n    }\n\n    this.checkMode()\n  }\n\n  /**\n   * Setup or teardown handler for viewport resize check\n   *\n   * @private\n   */\n  checkMode() {\n    if (this.mql?.matches) {\n      this.setup()\n    } else {\n      this.teardown()\n    }\n  }\n\n  /**\n   * Setup tab component\n   *\n   * @private\n   */\n  setup() {\n    this.$tabList.setAttribute('role', 'tablist')\n\n    this.$tabListItems.forEach(($item) => {\n      $item.setAttribute('role', 'presentation')\n    })\n\n    this.$tabs.forEach(($tab) => {\n      // Set HTML attributes\n      this.setAttributes($tab)\n\n      // Handle events\n      $tab.addEventListener('click', this.boundTabClick, true)\n      $tab.addEventListener('keydown', this.boundTabKeydown, true)\n\n      // Remove old active panels\n      this.hideTab($tab)\n    })\n\n    // Show either the active tab according to the URL's hash or the first tab\n    const $activeTab = this.getTab(window.location.hash) ?? this.$tabs[0]\n\n    this.showTab($activeTab)\n\n    // Handle hashchange events\n    window.addEventListener('hashchange', this.boundOnHashChange, true)\n  }\n\n  /**\n   * Teardown tab component\n   *\n   * @private\n   */\n  teardown() {\n    this.$tabList.removeAttribute('role')\n\n    this.$tabListItems.forEach(($item) => {\n      $item.removeAttribute('role')\n    })\n\n    this.$tabs.forEach(($tab) => {\n      // Remove events\n      $tab.removeEventListener('click', this.boundTabClick, true)\n      $tab.removeEventListener('keydown', this.boundTabKeydown, true)\n\n      // Unset HTML attributes\n      this.unsetAttributes($tab)\n    })\n\n    // Remove hashchange event handler\n    window.removeEventListener('hashchange', this.boundOnHashChange, true)\n  }\n\n  /**\n   * Handle hashchange event\n   *\n   * @private\n   * @returns {void | undefined} Returns void, or undefined when prevented\n   */\n  onHashChange() {\n    const hash = window.location.hash\n    const $tabWithHash = this.getTab(hash)\n    if (!$tabWithHash) {\n      return\n    }\n\n    // Prevent changing the hash\n    if (this.changingHash) {\n      this.changingHash = false\n      return\n    }\n\n    // Show either the active tab according to the URL's hash or the first tab\n    const $previousTab = this.getCurrentTab()\n    if (!$previousTab) {\n      return\n    }\n\n    this.hideTab($previousTab)\n    this.showTab($tabWithHash)\n    $tabWithHash.focus()\n  }\n\n  /**\n   * Hide panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  hideTab($tab) {\n    this.unhighlightTab($tab)\n    this.hidePanel($tab)\n  }\n\n  /**\n   * Show panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  showTab($tab) {\n    this.highlightTab($tab)\n    this.showPanel($tab)\n  }\n\n  /**\n   * Get tab link by hash\n   *\n   * @private\n   * @param {string} hash - Hash fragment including #\n   * @returns {HTMLAnchorElement | null} Tab link\n   */\n  getTab(hash) {\n    return this.$root.querySelector(`a.govuk-tabs__tab[href=\"${hash}\"]`)\n  }\n\n  /**\n   * Set tab link and panel attributes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  setAttributes($tab) {\n    const panelId = getFragmentFromUrl($tab.href)\n    if (!panelId) {\n      return\n    }\n\n    // Set tab attributes\n    $tab.setAttribute('id', `tab_${panelId}`)\n    $tab.setAttribute('role', 'tab')\n    $tab.setAttribute('aria-controls', panelId)\n    $tab.setAttribute('aria-selected', 'false')\n    $tab.setAttribute('tabindex', '-1')\n\n    // Set panel attributes\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.setAttribute('role', 'tabpanel')\n    $panel.setAttribute('aria-labelledby', $tab.id)\n    $panel.classList.add(this.jsHiddenClass)\n  }\n\n  /**\n   * Unset tab link and panel attributes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  unsetAttributes($tab) {\n    // unset tab attributes\n    $tab.removeAttribute('id')\n    $tab.removeAttribute('role')\n    $tab.removeAttribute('aria-controls')\n    $tab.removeAttribute('aria-selected')\n    $tab.removeAttribute('tabindex')\n\n    // unset panel attributes\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.removeAttribute('role')\n    $panel.removeAttribute('aria-labelledby')\n    $panel.classList.remove(this.jsHiddenClass)\n  }\n\n  /**\n   * Handle tab link clicks\n   *\n   * @private\n   * @param {MouseEvent} event - Mouse click event\n   * @returns {void} Returns void\n   */\n  onTabClick(event) {\n    const $currentTab = this.getCurrentTab()\n    const $nextTab = event.currentTarget\n\n    if (!$currentTab || !($nextTab instanceof HTMLAnchorElement)) {\n      return\n    }\n\n    event.preventDefault()\n\n    this.hideTab($currentTab)\n    this.showTab($nextTab)\n    this.createHistoryEntry($nextTab)\n  }\n\n  /**\n   * Update browser URL hash fragment for tab\n   *\n   * - Allows back/forward to navigate tabs\n   * - Avoids page jump when hash changes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  createHistoryEntry($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    // Save and restore the id so the page doesn't jump when a user clicks a tab\n    // (which changes the hash)\n    const panelId = $panel.id\n    $panel.id = ''\n    this.changingHash = true\n    window.location.hash = panelId\n    $panel.id = panelId\n  }\n\n  /**\n   * Handle tab keydown event\n   *\n   * - Press right arrow for next tab\n   * - Press left arrow for previous tab\n   *\n   * @private\n   * @param {KeyboardEvent} event - Keydown event\n   */\n  onTabKeydown(event) {\n    switch (event.key) {\n      // 'Left' and 'Right' required for Edge 16 support.\n      case 'ArrowLeft':\n      case 'Left':\n        this.activatePreviousTab()\n        event.preventDefault()\n        break\n      case 'ArrowRight':\n      case 'Right':\n        this.activateNextTab()\n        event.preventDefault()\n        break\n    }\n  }\n\n  /**\n   * Activate next tab\n   *\n   * @private\n   */\n  activateNextTab() {\n    const $currentTab = this.getCurrentTab()\n    if (!$currentTab?.parentElement) {\n      return\n    }\n\n    const $nextTabListItem = $currentTab.parentElement.nextElementSibling\n    if (!$nextTabListItem) {\n      return\n    }\n\n    const $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab')\n    if (!$nextTab) {\n      return\n    }\n\n    this.hideTab($currentTab)\n    this.showTab($nextTab)\n    $nextTab.focus()\n    this.createHistoryEntry($nextTab)\n  }\n\n  /**\n   * Activate previous tab\n   *\n   * @private\n   */\n  activatePreviousTab() {\n    const $currentTab = this.getCurrentTab()\n    if (!$currentTab?.parentElement) {\n      return\n    }\n\n    const $previousTabListItem =\n      $currentTab.parentElement.previousElementSibling\n    if (!$previousTabListItem) {\n      return\n    }\n\n    const $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab')\n    if (!$previousTab) {\n      return\n    }\n\n    this.hideTab($currentTab)\n    this.showTab($previousTab)\n    $previousTab.focus()\n    this.createHistoryEntry($previousTab)\n  }\n\n  /**\n   * Get tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   * @returns {Element | null} Tab panel\n   */\n  getPanel($tab) {\n    const panelId = getFragmentFromUrl($tab.href)\n    if (!panelId) {\n      return null\n    }\n\n    return this.$root.querySelector(`#${panelId}`)\n  }\n\n  /**\n   * Show tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  showPanel($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.classList.remove(this.jsHiddenClass)\n  }\n\n  /**\n   * Hide tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  hidePanel($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.classList.add(this.jsHiddenClass)\n  }\n\n  /**\n   * Unset 'selected' state for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  unhighlightTab($tab) {\n    if (!$tab.parentElement) {\n      return\n    }\n\n    $tab.setAttribute('aria-selected', 'false')\n    $tab.parentElement.classList.remove('govuk-tabs__list-item--selected')\n    $tab.setAttribute('tabindex', '-1')\n  }\n\n  /**\n   * Set 'selected' state for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  highlightTab($tab) {\n    if (!$tab.parentElement) {\n      return\n    }\n\n    $tab.setAttribute('aria-selected', 'true')\n    $tab.parentElement.classList.add('govuk-tabs__list-item--selected')\n    $tab.setAttribute('tabindex', '0')\n  }\n\n  /**\n   * Get current tab link\n   *\n   * @private\n   * @returns {HTMLAnchorElement | null} Tab link\n   */\n  getCurrentTab() {\n    return this.$root.querySelector(\n      '.govuk-tabs__list-item--selected a.govuk-tabs__tab'\n    )\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-tabs'\n}\n"],"names":["Tabs","Component","constructor","$root","$tabs","$tabList","$tabListItems","jsHiddenClass","changingHash","boundTabClick","boundTabKeydown","boundOnHashChange","mql","querySelectorAll","length","ElementError","component","identifier","onTabClick","bind","onTabKeydown","onHashChange","querySelector","setupResponsiveChecks","breakpoint","getBreakpoint","value","property","window","matchMedia","addEventListener","checkMode","addListener","_this$mql","matches","setup","teardown","_this$getTab","setAttribute","forEach","$item","$tab","setAttributes","hideTab","$activeTab","getTab","location","hash","showTab","removeAttribute","removeEventListener","unsetAttributes","$tabWithHash","$previousTab","getCurrentTab","focus","unhighlightTab","hidePanel","highlightTab","showPanel","panelId","getFragmentFromUrl","href","$panel","getPanel","id","classList","add","remove","event","$currentTab","$nextTab","currentTarget","HTMLAnchorElement","preventDefault","createHistoryEntry","key","activatePreviousTab","activateNextTab","parentElement","$nextTabListItem","nextElementSibling","$previousTabListItem","previousElementSibling","moduleName"],"mappings":"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"}
+{"version":3,"file":"tabs.mjs","sources":["../../../../src/govuk/components/tabs/tabs.mjs"],"sourcesContent":["import { getBreakpoint } from '../../common/index.mjs'\nimport { Component } from '../../component.mjs'\nimport { ElementError } from '../../errors/index.mjs'\n\n/**\n * Tabs component\n *\n * @preserve\n */\nexport class Tabs extends Component {\n  /** @private */\n  $tabs\n\n  /** @private */\n  $tabList\n\n  /** @private */\n  $tabListItems\n\n  /** @private */\n  jsHiddenClass = 'govuk-tabs__panel--hidden'\n\n  /** @private */\n  changingHash = false\n\n  /** @private */\n  boundTabClick\n\n  /** @private */\n  boundTabKeydown\n\n  /** @private */\n  boundOnHashChange\n\n  /**\n   * @private\n   * @type {MediaQueryList | null}\n   */\n  mql = null\n\n  /**\n   * @param {Element | null} $root - HTML element to use for tabs\n   */\n  constructor($root) {\n    super($root)\n\n    const $tabs = this.$root.querySelectorAll('a.govuk-tabs__tab')\n    if (!$tabs.length) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'Links (`<a class=\"govuk-tabs__tab\">`)'\n      })\n    }\n\n    this.$tabs = $tabs\n\n    // Save bound functions so we can remove event listeners during teardown\n    this.boundTabClick = this.onTabClick.bind(this)\n    this.boundTabKeydown = this.onTabKeydown.bind(this)\n    this.boundOnHashChange = this.onHashChange.bind(this)\n\n    const $tabList = this.$root.querySelector('.govuk-tabs__list')\n    const $tabListItems = this.$root.querySelectorAll(\n      'li.govuk-tabs__list-item'\n    )\n\n    if (!$tabList) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'List (`<ul class=\"govuk-tabs__list\">`)'\n      })\n    }\n\n    if (!$tabListItems.length) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: 'List items (`<li class=\"govuk-tabs__list-item\">`)'\n      })\n    }\n\n    this.$tabList = $tabList\n    this.$tabListItems = $tabListItems\n\n    this.setupResponsiveChecks()\n  }\n\n  /**\n   * Setup viewport resize check\n   *\n   * @private\n   */\n  setupResponsiveChecks() {\n    const breakpoint = getBreakpoint('tablet')\n\n    if (!breakpoint.value) {\n      throw new ElementError({\n        component: Tabs,\n        identifier: `CSS custom property (\\`${breakpoint.property}\\`) on pseudo-class \\`:root\\``\n      })\n    }\n\n    // Media query list for GOV.UK Frontend tablet breakpoint\n    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)\n\n    // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need\n    // to be able to fall back to the deprecated MediaQueryList.addListener\n    if ('addEventListener' in this.mql) {\n      this.mql.addEventListener('change', () => this.checkMode())\n    } else {\n      // @ts-expect-error Property 'addListener' does not exist\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      this.mql.addListener(() => this.checkMode())\n    }\n\n    this.checkMode()\n  }\n\n  /**\n   * Setup or teardown handler for viewport resize check\n   *\n   * @private\n   */\n  checkMode() {\n    if (this.mql?.matches) {\n      this.setup()\n    } else {\n      this.teardown()\n    }\n  }\n\n  /**\n   * Setup tab component\n   *\n   * @private\n   */\n  setup() {\n    this.$tabList.setAttribute('role', 'tablist')\n\n    this.$tabListItems.forEach(($item) => {\n      $item.setAttribute('role', 'presentation')\n    })\n\n    this.$tabs.forEach(($tab) => {\n      // Set HTML attributes\n      this.setAttributes($tab)\n\n      // Handle events\n      $tab.addEventListener('click', this.boundTabClick, true)\n      $tab.addEventListener('keydown', this.boundTabKeydown, true)\n\n      // Remove old active panels\n      this.hideTab($tab)\n    })\n\n    // Show either the active tab according to the URL's hash or the first tab\n    const $activeTab = this.getTab(window.location.hash) ?? this.$tabs[0]\n\n    this.showTab($activeTab)\n\n    // Handle hashchange events\n    window.addEventListener('hashchange', this.boundOnHashChange, true)\n  }\n\n  /**\n   * Teardown tab component\n   *\n   * @private\n   */\n  teardown() {\n    this.$tabList.removeAttribute('role')\n\n    this.$tabListItems.forEach(($item) => {\n      $item.removeAttribute('role')\n    })\n\n    this.$tabs.forEach(($tab) => {\n      // Remove events\n      $tab.removeEventListener('click', this.boundTabClick, true)\n      $tab.removeEventListener('keydown', this.boundTabKeydown, true)\n\n      // Unset HTML attributes\n      this.unsetAttributes($tab)\n    })\n\n    // Remove hashchange event handler\n    window.removeEventListener('hashchange', this.boundOnHashChange, true)\n  }\n\n  /**\n   * Handle hashchange event\n   *\n   * @private\n   * @returns {void | undefined} Returns void, or undefined when prevented\n   */\n  onHashChange() {\n    const hash = window.location.hash\n    const $tabWithHash = this.getTab(hash)\n    if (!$tabWithHash) {\n      return\n    }\n\n    // Prevent changing the hash\n    if (this.changingHash) {\n      this.changingHash = false\n      return\n    }\n\n    // Show either the active tab according to the URL's hash or the first tab\n    const $previousTab = this.getCurrentTab()\n    if (!$previousTab) {\n      return\n    }\n\n    this.hideTab($previousTab)\n    this.showTab($tabWithHash)\n    $tabWithHash.focus()\n  }\n\n  /**\n   * Hide panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  hideTab($tab) {\n    this.unhighlightTab($tab)\n    this.hidePanel($tab)\n  }\n\n  /**\n   * Show panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  showTab($tab) {\n    this.highlightTab($tab)\n    this.showPanel($tab)\n  }\n\n  /**\n   * Get tab link by hash\n   *\n   * @private\n   * @param {string} hash - Hash fragment including #\n   * @returns {HTMLAnchorElement | null} Tab link\n   */\n  getTab(hash) {\n    return this.$root.querySelector(`a.govuk-tabs__tab[href=\"${hash}\"]`)\n  }\n\n  /**\n   * Set tab link and panel attributes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  setAttributes($tab) {\n    const panelId = $tab.hash.replace('#', '')\n    if (!panelId) {\n      return\n    }\n\n    // Set tab attributes\n    $tab.setAttribute('id', `tab_${panelId}`)\n    $tab.setAttribute('role', 'tab')\n    $tab.setAttribute('aria-controls', panelId)\n    $tab.setAttribute('aria-selected', 'false')\n    $tab.setAttribute('tabindex', '-1')\n\n    // Set panel attributes\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.setAttribute('role', 'tabpanel')\n    $panel.setAttribute('aria-labelledby', $tab.id)\n    $panel.classList.add(this.jsHiddenClass)\n  }\n\n  /**\n   * Unset tab link and panel attributes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  unsetAttributes($tab) {\n    // unset tab attributes\n    $tab.removeAttribute('id')\n    $tab.removeAttribute('role')\n    $tab.removeAttribute('aria-controls')\n    $tab.removeAttribute('aria-selected')\n    $tab.removeAttribute('tabindex')\n\n    // unset panel attributes\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.removeAttribute('role')\n    $panel.removeAttribute('aria-labelledby')\n    $panel.classList.remove(this.jsHiddenClass)\n  }\n\n  /**\n   * Handle tab link clicks\n   *\n   * @private\n   * @param {MouseEvent} event - Mouse click event\n   * @returns {void} Returns void\n   */\n  onTabClick(event) {\n    const $currentTab = this.getCurrentTab()\n    const $nextTab = event.currentTarget\n\n    if (!$currentTab || !($nextTab instanceof HTMLAnchorElement)) {\n      return\n    }\n\n    event.preventDefault()\n\n    this.hideTab($currentTab)\n    this.showTab($nextTab)\n    this.createHistoryEntry($nextTab)\n  }\n\n  /**\n   * Update browser URL hash fragment for tab\n   *\n   * - Allows back/forward to navigate tabs\n   * - Avoids page jump when hash changes\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  createHistoryEntry($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    // Save and restore the id so the page doesn't jump when a user clicks a tab\n    // (which changes the hash)\n    const panelId = $panel.id\n    $panel.id = ''\n    this.changingHash = true\n    window.location.hash = panelId\n    $panel.id = panelId\n  }\n\n  /**\n   * Handle tab keydown event\n   *\n   * - Press right arrow for next tab\n   * - Press left arrow for previous tab\n   *\n   * @private\n   * @param {KeyboardEvent} event - Keydown event\n   */\n  onTabKeydown(event) {\n    switch (event.key) {\n      // 'Left' and 'Right' required for Edge 16 support.\n      case 'ArrowLeft':\n      case 'Left':\n        this.activatePreviousTab()\n        event.preventDefault()\n        break\n      case 'ArrowRight':\n      case 'Right':\n        this.activateNextTab()\n        event.preventDefault()\n        break\n    }\n  }\n\n  /**\n   * Activate next tab\n   *\n   * @private\n   */\n  activateNextTab() {\n    const $currentTab = this.getCurrentTab()\n    if (!$currentTab?.parentElement) {\n      return\n    }\n\n    const $nextTabListItem = $currentTab.parentElement.nextElementSibling\n    if (!$nextTabListItem) {\n      return\n    }\n\n    const $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab')\n    if (!$nextTab) {\n      return\n    }\n\n    this.hideTab($currentTab)\n    this.showTab($nextTab)\n    $nextTab.focus()\n    this.createHistoryEntry($nextTab)\n  }\n\n  /**\n   * Activate previous tab\n   *\n   * @private\n   */\n  activatePreviousTab() {\n    const $currentTab = this.getCurrentTab()\n    if (!$currentTab?.parentElement) {\n      return\n    }\n\n    const $previousTabListItem =\n      $currentTab.parentElement.previousElementSibling\n    if (!$previousTabListItem) {\n      return\n    }\n\n    const $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab')\n    if (!$previousTab) {\n      return\n    }\n\n    this.hideTab($currentTab)\n    this.showTab($previousTab)\n    $previousTab.focus()\n    this.createHistoryEntry($previousTab)\n  }\n\n  /**\n   * Get tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   * @returns {Element | null} Tab panel\n   */\n  getPanel($tab) {\n    const panelId = $tab.hash.replace('#', '')\n    if (!panelId) {\n      return null\n    }\n\n    return this.$root.querySelector(`#${panelId}`)\n  }\n\n  /**\n   * Show tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  showPanel($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.classList.remove(this.jsHiddenClass)\n  }\n\n  /**\n   * Hide tab panel for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  hidePanel($tab) {\n    const $panel = this.getPanel($tab)\n    if (!$panel) {\n      return\n    }\n\n    $panel.classList.add(this.jsHiddenClass)\n  }\n\n  /**\n   * Unset 'selected' state for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  unhighlightTab($tab) {\n    if (!$tab.parentElement) {\n      return\n    }\n\n    $tab.setAttribute('aria-selected', 'false')\n    $tab.parentElement.classList.remove('govuk-tabs__list-item--selected')\n    $tab.setAttribute('tabindex', '-1')\n  }\n\n  /**\n   * Set 'selected' state for tab link\n   *\n   * @private\n   * @param {HTMLAnchorElement} $tab - Tab link\n   */\n  highlightTab($tab) {\n    if (!$tab.parentElement) {\n      return\n    }\n\n    $tab.setAttribute('aria-selected', 'true')\n    $tab.parentElement.classList.add('govuk-tabs__list-item--selected')\n    $tab.setAttribute('tabindex', '0')\n  }\n\n  /**\n   * Get current tab link\n   *\n   * @private\n   * @returns {HTMLAnchorElement | null} Tab link\n   */\n  getCurrentTab() {\n    return this.$root.querySelector(\n      '.govuk-tabs__list-item--selected a.govuk-tabs__tab'\n    )\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-tabs'\n}\n"],"names":["Tabs","Component","constructor","$root","$tabs","$tabList","$tabListItems","jsHiddenClass","changingHash","boundTabClick","boundTabKeydown","boundOnHashChange","mql","querySelectorAll","length","ElementError","component","identifier","onTabClick","bind","onTabKeydown","onHashChange","querySelector","setupResponsiveChecks","breakpoint","getBreakpoint","value","property","window","matchMedia","addEventListener","checkMode","addListener","_this$mql","matches","setup","teardown","_this$getTab","setAttribute","forEach","$item","$tab","setAttributes","hideTab","$activeTab","getTab","location","hash","showTab","removeAttribute","removeEventListener","unsetAttributes","$tabWithHash","$previousTab","getCurrentTab","focus","unhighlightTab","hidePanel","highlightTab","showPanel","panelId","replace","$panel","getPanel","id","classList","add","remove","event","$currentTab","$nextTab","currentTarget","HTMLAnchorElement","preventDefault","createHistoryEntry","key","activatePreviousTab","activateNextTab","parentElement","$nextTabListItem","nextElementSibling","$previousTabListItem","previousElementSibling","moduleName"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/tag") {
+  @include mixin.styles;
+}
+

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

@@ -1,97 +1,6 @@
-@include govuk-exports("govuk/component/tag") {
-  $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, "mobile"), map-get($govuk-breakpoints, "mobile") / 2, 160px);
+@use "../../custom-properties";
 
-  .govuk-tag {
-    @include govuk-font($size: 19);
+@use "mixin";
 
-    display: inline-block;
+@include mixin.styles;
 
-    // set a max-width along with overflow-wrap: break-word below for instances
-    // where a tag has a single long word and could overflow its boundaries.
-    // The max-width is necessary as break-word requires a bounding box to base
-    // where to break off of.
-    max-width: $govuk-tag-max-width;
-
-    // These negative margins make sure that the tag component doesn’t increase
-    // the size of its container. Otherwise, for example, a table row containing
-    // a tag will be taller than one containing plain text.
-    //
-    // The negative margin added to the top and bottom matches the extra padding
-    // added.
-    margin-top: -2px;
-    margin-bottom: -3px;
-
-    padding-top: 2px;
-    padding-right: 8px;
-    padding-bottom: 3px;
-    padding-left: 8px;
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 70%);
-    text-decoration: none;
-    overflow-wrap: break-word;
-
-    // When forced colour mode is active, for example to provide high contrast,
-    // the background colour of the tag is the same as the rest of the page. To
-    // ensure that the tag is perceived as separate from any surround text, it
-    // is made bold.
-    //
-    // Transparent outlines are no longer added, as they make the Tag look
-    // indistinguishable from a button – but the tag is not interactive in the
-    // same way.
-    @media screen and (forced-colors: active) {
-      font-weight: bold;
-    }
-  }
-
-  .govuk-tag--grey {
-    color: govuk-shade(govuk-colour("dark-grey"), 50%);
-    background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
-  }
-
-  .govuk-tag--purple {
-    color: govuk-shade(govuk-colour("bright-purple"), 50%);
-    background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
-  }
-
-  .govuk-tag--turquoise {
-    color: govuk-shade(govuk-colour("turquoise"), 60%);
-    background-color: govuk-tint(govuk-colour("turquoise"), 80%);
-  }
-
-  .govuk-tag--blue {
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 70%);
-  }
-
-  .govuk-tag--light-blue {
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 90%);
-  }
-
-  .govuk-tag--yellow {
-    color: govuk-shade(govuk-colour("yellow"), 65%);
-    background-color: govuk-tint(govuk-colour("yellow"), 75%);
-  }
-
-  .govuk-tag--orange {
-    color: govuk-shade(govuk-colour("orange"), 55%);
-    background-color: govuk-tint(govuk-colour("orange"), 70%);
-  }
-
-  .govuk-tag--red {
-    color: govuk-shade(govuk-colour("red"), 80%);
-    background-color: govuk-tint(govuk-colour("red"), 75%);
-  }
-
-  .govuk-tag--pink {
-    color: govuk-shade(govuk-colour("pink"), 50%);
-    background-color: govuk-tint(govuk-colour("pink"), 85%);
-  }
-
-  .govuk-tag--green {
-    color: govuk-shade(govuk-colour("green"), 20%);
-    background-color: govuk-tint(govuk-colour("green"), 80%);
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/tag/_mixin.scss

@@ -0,0 +1,135 @@
+////
+/// @group components/tag
+////
+@use "sass:map";
+
+@use "../../base";
+
+/// Get tag text colour
+/// Almost all tags should use the 50% shade of their colour for their text
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @return {Colour} Representation of the named colour for use in tags
+/// @access private
+@function _govuk-tag-text-colour($colour) {
+  @return base.govuk-colour($colour, $variant: "shade-50");
+}
+
+/// Get tag background colour
+/// Almost all tags should use the 80% tint of their colour for their background
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @return {Colour} Representation of the named colour for use in tags
+/// @access private
+@function _govuk-tag-background-colour($colour) {
+  @return base.govuk-colour($colour, $variant: "tint-80");
+}
+
+/// Generate colour CSS for tag and tag modifiers
+/// Applies standard rules from the tag colour functions
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @access private
+@mixin _govuk-tag-colours($colour) {
+  color: _govuk-tag-text-colour($colour);
+  background-color: _govuk-tag-background-colour($colour);
+}
+
+/// @access private
+@mixin styles {
+  $govuk-tag-max-width: 0.5 * (map.get(base.$govuk-breakpoints, "mobile") or 320px);
+
+  .govuk-tag {
+    @include base.govuk-font($size: 19);
+    // Default tag colour is blue
+    @include _govuk-tag-colours("blue");
+
+    display: inline-block;
+
+    // set a max-width along with overflow-wrap: break-word below for instances
+    // where a tag has a single long word and could overflow its boundaries.
+    // The max-width is necessary as break-word requires a bounding box to base
+    // where to break off of.
+    max-width: $govuk-tag-max-width;
+
+    // These negative margins make sure that the tag component doesn’t increase
+    // the size of its container. Otherwise, for example, a table row containing
+    // a tag will be taller than one containing plain text.
+    //
+    // The negative margin added to the top and bottom matches the extra padding
+    // added.
+    margin-top: -2px;
+    margin-bottom: -3px;
+
+    padding-top: 2px;
+    padding-right: 8px;
+    padding-bottom: 3px;
+    padding-left: 8px;
+
+    border-radius: 1px;
+    text-decoration: none;
+    overflow-wrap: break-word;
+
+    // When forced colour mode is active, for example to provide high contrast,
+    // the background colour of the tag is the same as the rest of the page. To
+    // ensure that the tag is perceived as separate from any surround text, it
+    // is made bold.
+    //
+    // Transparent outlines are no longer added, as they make the Tag look
+    // indistinguishable from a button – but the tag is not interactive in the
+    // same way.
+    @media screen and (forced-colors: active) {
+      font-weight: bold;
+    }
+  }
+
+  // Tag colour modifiers. Use the _govuk-tag-colours mixin to define consistent
+  // colour rules per modifier
+  .govuk-tag--green {
+    @include _govuk-tag-colours("green");
+  }
+
+  .govuk-tag--purple {
+    @include _govuk-tag-colours("purple");
+  }
+
+  .govuk-tag--red {
+    @include _govuk-tag-colours("red");
+  }
+
+  .govuk-tag--orange {
+    @include _govuk-tag-colours("orange");
+  }
+
+  .govuk-tag--teal {
+    @include _govuk-tag-colours("teal");
+  }
+
+  .govuk-tag--magenta {
+    @include _govuk-tag-colours("magenta");
+  }
+
+  // Yellow uses different colours to ensure it's legible
+  .govuk-tag--yellow {
+    color: base.govuk-colour("orange", $variant: "shade-50");
+    background-color: base.govuk-colour("yellow", $variant: "tint-50");
+  }
+
+  // Grey uses different colours to ensure it's legible
+  .govuk-tag--grey {
+    color: base.govuk-colour("black");
+    background-color: base.govuk-colour("black", $variant: "tint-80");
+  }
+
+  // Turquoise and pink are deprecated over teal and magenta respectively
+  // @deprecated
+  .govuk-tag--turquoise {
+    @include _govuk-tag-colours("teal");
+  }
+
+  // @deprecated
+  .govuk-tag--pink {
+    @include _govuk-tag-colours("magenta");
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/tag/_tag.import.scss

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

data/node_modules/govuk-frontend/dist/govuk/components/tag/fixtures.json

@@ -8,8 +8,8 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
+            "pageTemplateOptions": {},
+            "screenshot": true,
             "html": "<strong class=\"govuk-tag\">\n  Alpha\n</strong>"
         },
         {
@@ -20,45 +20,21 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--grey\">\n  Grey\n</strong>"
         },
-        {
-            "name": "blue",
-            "options": {
-                "text": "Blue",
-                "classes": "govuk-tag--blue"
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<strong class=\"govuk-tag govuk-tag--blue\">\n  Blue\n</strong>"
-        },
-        {
-            "name": "light blue",
-            "options": {
-                "text": "Light blue",
-                "classes": "govuk-tag--light-blue"
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<strong class=\"govuk-tag govuk-tag--light-blue\">\n  Light blue\n</strong>"
-        },
         {
             "name": "turquoise",
             "options": {
-                "text": "Turquoise",
-                "classes": "govuk-tag--turquoise"
+                "text": "Teal",
+                "classes": "govuk-tag--teal"
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n  Turquoise\n</strong>"
+            "html": "<strong class=\"govuk-tag govuk-tag--teal\">\n  Teal\n</strong>"
         },
         {
             "name": "green",
@@ -68,7 +44,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--green\">\n  Green\n</strong>"
         },
@@ -80,21 +56,21 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--purple\">\n  Purple\n</strong>"
         },
         {
             "name": "pink",
             "options": {
-                "text": "Pink",
-                "classes": "govuk-tag--pink"
+                "text": "Magenta",
+                "classes": "govuk-tag--magenta"
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<strong class=\"govuk-tag govuk-tag--pink\">\n  Pink\n</strong>"
+            "html": "<strong class=\"govuk-tag govuk-tag--magenta\">\n  Magenta\n</strong>"
         },
         {
             "name": "red",
@@ -104,7 +80,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--red\">\n  Red\n</strong>"
         },
@@ -116,7 +92,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--orange\">\n  Orange\n</strong>"
         },
@@ -128,7 +104,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--yellow\">\n  Yellow\n</strong>"
         },
@@ -143,7 +119,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag\" data-test=\"attribute\" id=\"my-tag\">\n  Tag with attributes\n</strong>"
         },
@@ -154,7 +130,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag\">\n  &lt;span&gt;Alpha&lt;/span&gt;\n</strong>"
         },
@@ -165,7 +141,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<strong class=\"govuk-tag\">\n  <span>Alpha</span>\n</strong>"
         }

data/node_modules/govuk-frontend/dist/govuk/components/tag/template-pink.html

@@ -1,3 +1,3 @@
-<strong class="govuk-tag govuk-tag--pink">
-  Pink
+<strong class="govuk-tag govuk-tag--magenta">
+  Magenta
 </strong>

data/node_modules/govuk-frontend/dist/govuk/components/tag/template-turquoise.html

@@ -1,3 +1,3 @@
-<strong class="govuk-tag govuk-tag--turquoise">
-  Turquoise
+<strong class="govuk-tag govuk-tag--teal">
+  Teal
 </strong>

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

@@ -0,0 +1,9 @@
+@use "mixin";
+
+@import "../../base";
+@import "../tag";
+
+@include govuk-exports("govuk/component/task-list") {
+  @include mixin.styles;
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss

@@ -1,79 +1,7 @@
-@import "../tag/index";
+@use "../../custom-properties";
 
-@include govuk-exports("govuk/component/task-list") {
-  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+@use "mixin";
+@use "../tag";
 
-  .govuk-task-list {
-    @include govuk-font($size: 19);
-    margin-top: 0;
-    @include govuk-responsive-margin(6, "bottom");
-    padding: 0;
-    list-style-type: none;
-  }
+@include mixin.styles;
 
-  // This uses table layout so that the task name and status always appear
-  // side-by-side, with the width of each 'column' being flexible depending upon
-  // the length of the task names and statuses.
-  //
-  // The position is set to 'relative' so than an absolutely-positioned
-  // transparent element box can be added within the link so that the whole row
-  // can be clickable.
-  .govuk-task-list__item {
-    display: table;
-    position: relative;
-    width: 100%;
-    margin-bottom: 0;
-    padding-top: govuk-spacing(2);
-    padding-bottom: govuk-spacing(2);
-    border-bottom: 1px solid $govuk-border-colour;
-  }
-
-  .govuk-task-list__item:first-child {
-    border-top: 1px solid $govuk-border-colour;
-  }
-
-  // This class is added to the <li> elements where the task name is a link. The
-  // background hover colour is added to help indicate that the whole row is
-  // clickable, rather than just the visible link text.
-  .govuk-task-list__item--with-link:hover {
-    background: $govuk-task-list-hover-colour;
-  }
-
-  .govuk-task-list__name-and-hint {
-    display: table-cell;
-    vertical-align: top;
-    @include govuk-text-colour;
-  }
-
-  .govuk-task-list__status {
-    display: table-cell;
-    padding-left: govuk-spacing(2);
-    text-align: right;
-    vertical-align: top;
-    @include govuk-text-colour;
-  }
-
-  .govuk-task-list__status--cannot-start-yet {
-    color: $govuk-secondary-text-colour;
-  }
-
-  // This adds an empty transparent box covering the whole row, including the
-  // task status and any hint text. Because this is generated within the link
-  // element, this allows the whole area to be clickable.
-  .govuk-task-list__link::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .govuk-task-list__hint {
-    margin-top: govuk-spacing(1);
-    color: $govuk-secondary-text-colour;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */