govuk_publishing_components 56.2.1 → 56.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68407f5db22229aa78134b622dc8559456e40553df87dd9cb01de60aaf3e462f
-  data.tar.gz: 8b979b368aba80117804a47ae7d0c7595c2fce311578fc731bef81309456db5e
+  metadata.gz: 67d7750a4af75be256720a227401885c736d2af67113acfa16889fc5dc599a5d
+  data.tar.gz: a312eca2e3699de90c89bf5e256a09bca8eedffeb3e00657738ec21fb8fa3059
 SHA512:
-  metadata.gz: c8d5952713a5fad747e52900b7e37dac29595e1cc63ebe02aa23b9751660011e7662432a5def3c7bd1ccbbc9328d434c2e40b5709da1290c3df91479cc6822ee
-  data.tar.gz: f5c24bfbf5e24d745757b8add1af84cdc64fd261d41552ba7d9d988d63f04002982c73b927b3210ea636826c334cf02f61ba6074f0e46e8d9a5181f34914f9cf
+  metadata.gz: 1ae3113f4320e8ce93b70ec08a9b9581101d59c3eddff0444ec1ec42b551cf14f593e085fb919c7a70d634e47aeb49ec7f463c50195c40e56fe9a42636c864db
+  data.tar.gz: ebc820fe837ad54b2539fbe6c9baed82438c4ad254b9680d1c7716b2d34c6ffcbcfac49f516b5da883f74084116d72c70621b689af5a8adff314d4a9f63f2e04

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -364,7 +364,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
           ecommerceSchema.search_results.ecommerce.items.push({
             item_id: target.getAttribute('data-ga4-ecommerce-path'),
             item_content_id: target.getAttribute('data-ga4-ecommerce-content-id') || undefined,
-            item_name: target.textContent,
+            item_name: target.getAttribute('data-ga4-ecommerce-item-name') || target.textContent,
             item_list_name: listTitle,
             index: window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.getIndex(target, startPosition)
           })

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-finder-tracker.js

@@ -0,0 +1,163 @@
+;(function (global) {
+  'use strict'
+
+  const GOVUK = global.GOVUK || {}
+  GOVUK.analyticsGa4 = GOVUK.analyticsGa4 || {}
+
+  GOVUK.analyticsGa4.Ga4FinderTracker = {
+    // Called when the search results updates. Takes the event target, and a string containing the type of change and element type. Creates the GTM schema and pushes it.
+    // changeEventMetadata is a string referring to the type of form change and the element type that triggered it. For example 'update-filter checkbox'.
+    trackChangeEvent: function (event) {
+      const eventTarget = event.target
+      let changeEventMetadata = eventTarget.closest('[data-ga4-change-category]')
+
+      if (!changeEventMetadata) {
+        return
+      }
+
+      changeEventMetadata = changeEventMetadata.dataset.ga4ChangeCategory
+      changeEventMetadata = changeEventMetadata.split(' ')
+
+      const filterParent = eventTarget.closest('[data-ga4-filter-parent]')
+      const section = eventTarget.closest('[data-ga4-section]')
+      const changeType = changeEventMetadata[0]
+      const elementType = changeEventMetadata[1]
+
+      if ((!changeType || !elementType) && changeType !== 'clear-all-filters') {
+        console.warn('GA4 Finder tracker incorrectly configured for element: ' + eventTarget)
+        return
+      }
+
+      let data = {}
+
+      const filterType = eventTarget.closest('[data-ga4-filter-type]')
+
+      data.type = filterType ? filterType.dataset.ga4FilterType : 'finder'
+      data.event_name = 'select_content'
+
+      const elementInfo = this.getElementInfo(event, elementType)
+      if (!elementInfo) {
+        return
+      }
+      const elementValue = elementInfo.elementValue
+      data.text = elementValue
+      const wasFilterRemoved = elementInfo.wasFilterRemoved
+      data = this.setSchemaBasedOnChangeType(data, elementValue, elementType, wasFilterRemoved, changeType, section, filterParent)
+
+      window.GOVUK.analyticsGa4.core.applySchemaAndSendData(data, 'event_data')
+    },
+
+    // Grabs the value from the eventTarget. Checks if the filter was removed if the eventTarget is unchecked, set back to default, or has its user input removed. Returns the results as an object.
+    getElementInfo: function (event, elementType) {
+      const supportedElements = Object.assign(Object.assign({}, this.defaultSupportedElements), this.extraSupportedElements || {})
+
+      return supportedElements[elementType] ? supportedElements[elementType](event.target, event) : { elementValue: '', wasFilterRemoved: false }
+    },
+
+    // Takes the GTM schema, the event target value, the event target HTML type, whether the filter was removed, the type of filter change it was, and the parent section heading. Populates the GTM object based on these values.
+    setSchemaBasedOnChangeType: function (schema, elementValue, elementType, wasFilterRemoved, changeType, section, filterParent) {
+      switch (changeType) {
+        case 'update-filter': {
+          if (section) {
+            schema.section = section.getAttribute('data-ga4-section')
+          }
+
+          const index = this.getSectionIndex(filterParent)
+          if (wasFilterRemoved) {
+            schema.action = 'remove'
+            schema.text = elementType === 'text' ? undefined : elementValue
+          } else {
+            schema.action = elementType === 'text' ? 'search' : 'select'
+          }
+          schema.index_link = index.index_link || undefined
+          schema.index_section = index.index_section || undefined
+          schema.index_section_count = index.index_section_count || undefined
+          break
+        }
+        case 'update-keyword':
+          schema.event_name = 'search'
+          schema.url = window.location.pathname
+          schema.section = 'Search'
+          schema.action = 'search'
+          schema.text = GOVUK.analyticsGa4.core.trackFunctions.standardiseSearchTerm(schema.text)
+          break
+
+        case 'clear-all-filters':
+          schema.action = 'remove'
+          schema.text = 'Clear all filters'
+          break
+
+        case 'update-sort':
+          schema.action = 'sort'
+          schema.section = 'Sort by'
+          break
+      }
+      return schema
+    },
+
+    // Takes a filter section's div, and grabs the index value from it.
+    getSectionIndex: function (sectionElement) {
+      try {
+        let index = sectionElement.getAttribute('data-ga4-index')
+        index = JSON.parse(index)
+        return index
+      } catch (e) {
+        console.error('GA4 configuration error: ' + e.message, window.location)
+      }
+    },
+
+    defaultSupportedElements: {
+      checkbox: (eventTarget) => {
+        const checkboxId = eventTarget.id
+
+        return {
+          elementValue: document.querySelector("label[for='" + checkboxId + "']").textContent,
+          wasFilterRemoved: !eventTarget.checked
+        }
+      },
+      radio: (eventTarget) => {
+        const radioId = eventTarget.id
+
+        // The "value" we need for a radio is the label text that the user sees beside the checkbox.
+        const elementValue = document.querySelector("label[for='" + radioId + "']").textContent
+        const defaultValue = eventTarget.closest('[data-ga4-section]').querySelector('input[type=radio]:first-of-type')
+
+        return {
+          elementValue: elementValue,
+          wasFilterRemoved: eventTarget.id === defaultValue.id
+        }
+      },
+      select: (eventTarget) => {
+        // The value of a <select> is the value attribute of the selected <option>, which is a hyphenated key. We need to grab the human readable label instead for tracking.
+        const elementValue = eventTarget.querySelector("option[value='" + eventTarget.value + "']").textContent
+        const defaultValue = eventTarget.querySelector('option:first-of-type').textContent
+
+        return {
+          elementValue: elementValue,
+          wasFilterRemoved: elementValue === defaultValue
+        }
+      },
+      text: (eventTarget) => ({
+        elementValue: eventTarget.value,
+        wasFilterRemoved: eventTarget.value === ''
+      }),
+      date: (eventTarget) => {
+        // The GOV.UK Design System date input consists of three grouped but separate fields (day,
+        // month, year). We want to fire a single event when all three fields are filled in to
+        // avoid firing excessive events.
+        const inputs = [...eventTarget.closest('.govuk-date-input').querySelectorAll('input')]
+        const allInputsSet = inputs.every(input => input.value)
+        const noInputsSet = inputs.every(input => !input.value)
+
+        if (!allInputsSet && !noInputsSet) return
+
+        return {
+          elementValue: allInputsSet ? inputs.map(input => input.value).join('/') : '',
+          wasFilterRemoved: noInputsSet
+        }
+      }
+    }
+  }
+
+  global.GOVUK = GOVUK
+})(window)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js

@@ -9,6 +9,7 @@
 //= require ./analytics-ga4/ga4-link-tracker
 //= require ./analytics-ga4/ga4-event-tracker
 //= require ./analytics-ga4/ga4-ecommerce-tracker
+//= require ./analytics-ga4/ga4-finder-tracker
 //= require ./analytics-ga4/ga4-form-tracker
 //= require ./analytics-ga4/ga4-auto-tracker
 //= require ./analytics-ga4/ga4-smart-answer-results-tracker

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js

@@ -22,10 +22,8 @@
 (function () {
   'use strict';
 
-  function floor(x) {
-    return Math.floor(x);
-  }
   var max = Math.max;
+  var floor = Math.floor;
   var round = Math.round;
   /**
   * Clamp a number so that it is never less than 0
@@ -263,6 +261,7 @@
     // PostBeaconDisabled: 88, // Not used
     PostBeaconSendFailed: 89,
     PostBeaconCSPViolation: 90,
+    PostBeaconCollector: 91,
   };
   var Logger = /** @class */ (function () {
     function Logger() {
@@ -337,7 +336,7 @@
     return str;
   }
 
-  var VERSION = "4.0.32";
+  var VERSION = "4.1.1";
   /**
   * Returns the version of the script as a float to be stored in legacy systems that do not support
   * string versions.
@@ -390,6 +389,7 @@
       this.sendRetries = 0;
       this.maxMeasureTimeout = 0;
       this.flags = 0;
+      this.metricCollectors = {};
       this.onBeforeSendCbs = [];
       this.startTime = opts.startTime || getZeroTime();
       this.config = opts.config;
@@ -397,7 +397,6 @@
       this.customerId = opts.customerId;
       this.sessionId = opts.sessionId;
       this.pageId = opts.pageId;
-      this.metricData = {};
       this.maxMeasureTimeout = window.setTimeout(function () {
         _this.logger.logEvent(LogEvent.PostBeaconTimeoutReached);
         _this.stopRecording();
@@ -440,19 +439,12 @@
       this.isRecording = false;
       this.logger.logEvent(LogEvent.PostBeaconStopRecording);
     };
-    Beacon.prototype.setMetricData = function (metric, data) {
-      if (!this.isRecording) {
-        this.logger.logEvent(LogEvent.PostBeaconMetricRejected, [metric]);
-        return;
-      }
-      this.metricData[metric] = data;
+    Beacon.prototype.addCollector = function (metric, collector) {
+      this.metricCollectors[metric] = collector;
     };
     Beacon.prototype.addFlag = function (flag) {
       this.flags = addFlag(this.flags, flag);
     };
-    Beacon.prototype.hasMetricData = function () {
-      return Object.keys(this.metricData).length > 0;
-    };
     Beacon.prototype.beaconUrl = function () {
       return this.config.beaconUrlV2;
     };
@@ -468,7 +460,16 @@
       if (!this.isBeingSampled()) {
         return;
       }
-      if (!this.hasMetricData() && !this.config.allowEmptyPostBeacon) {
+      var collectionStart = now();
+      var metricData = {};
+      for (var metric in this.metricCollectors) {
+        var data = this.metricCollectors[metric]();
+        this.logger.logEvent(LogEvent.PostBeaconCollector, [metric, !!data]);
+        if (data) {
+          metricData[metric] = data;
+        }
+      }
+      if (!Object.keys(metricData).length && !this.config.allowEmptyPostBeacon) {
         // TODO: This is only required while the new beacon is supplementary. Once it's the primary
         // beacon, we should send it regardless of how much metric data it has.
         this.logger.logEvent(LogEvent.PostBeaconCancelled);
@@ -485,11 +486,12 @@
         customerId: this.customerId,
         flags: this.flags,
         measureDuration: msSincePageInit(),
+        collectionDuration: now() - collectionStart,
         pageId: this.pageId,
         scriptVersion: VERSION,
         sessionId: this.sessionId,
         startTime: this.startTime,
-      }, this.metricData);
+      }, metricData);
       try {
         if (sendBeacon(beaconUrl, JSON.stringify(payload))) {
           this.isSent = true;
@@ -505,6 +507,14 @@
     };
     return Beacon;
   }());
+  var BeaconMetricKey;
+  (function (BeaconMetricKey) {
+    BeaconMetricKey["CLS"] = "cls";
+    BeaconMetricKey["INP"] = "inp";
+    BeaconMetricKey["LCP"] = "lcp";
+    BeaconMetricKey["LoAF"] = "loaf";
+    BeaconMetricKey["NavigationTiming"] = "navigationTiming";
+  })(BeaconMetricKey || (BeaconMetricKey = {}));
 
   function onPageLoad(callback) {
     if (document.readyState === "complete") {
@@ -631,36 +641,36 @@
     try {
       if (selector &&
         (node.nodeType === 9 || selector.length > MAX_SELECTOR_LENGTH || !node.parentNode)) {
-          // Final selector.
-          return selector;
-        }
-        var el = node;
-        // Our first preference is to use the data-sctrack attribute from anywhere in the tree
-        var trackId = getClosestScTrackAttribute(el);
-        if (trackId) {
-          return trackId;
-        }
-        if (el.id) {
-          // Once we've found an element with ID we return the selector.
-          return "#" + el.id + (selector ? ">" + selector : "");
-        }
-        else if (el) {
-          // Otherwise attempt to get parent elements recursively
-          var name_1 = el.nodeType === 1 ? el.nodeName.toLowerCase() : el.nodeName.toUpperCase();
-          var classes = el.className ? "." + el.className.replace(/\s+/g, ".") : "";
-          // Remove classes until the selector is short enough
-          while ((name_1 + classes).length > MAX_SELECTOR_LENGTH) {
-            classes = classes.split(".").slice(0, -1).join(".");
-          }
-          var currentSelector = name_1 + classes + (selector ? ">" + selector : "");
-          if (el.parentNode) {
-            var selectorWithParent = getNodeSelector(el.parentNode, currentSelector);
-            if (selectorWithParent.length < MAX_SELECTOR_LENGTH) {
-              return selectorWithParent;
-            }
+        // Final selector.
+        return selector;
+      }
+      var el = node;
+      // Our first preference is to use the data-sctrack attribute from anywhere in the tree
+      var trackId = getClosestScTrackAttribute(el);
+      if (trackId) {
+        return trackId;
+      }
+      if (el.id) {
+        // Once we've found an element with ID we return the selector.
+        return "#" + el.id + (selector ? ">" + selector : "");
+      }
+      else if (el) {
+        // Otherwise attempt to get parent elements recursively
+        var name_1 = el.nodeType === 1 ? el.nodeName.toLowerCase() : el.nodeName.toUpperCase();
+        var classes = el.className ? "." + el.className.replace(/\s+/g, ".") : "";
+        // Remove classes until the selector is short enough
+        while ((name_1 + classes).length > MAX_SELECTOR_LENGTH) {
+          classes = classes.split(".").slice(0, -1).join(".");
+        }
+        var currentSelector = name_1 + classes + (selector ? ">" + selector : "");
+        if (el.parentNode) {
+          var selectorWithParent = getNodeSelector(el.parentNode, currentSelector);
+          if (selectorWithParent.length < MAX_SELECTOR_LENGTH) {
+            return selectorWithParent;
           }
-          return currentSelector;
         }
+        return currentSelector;
+      }
     }
     catch (error) {
       // Do nothing.
@@ -680,13 +690,9 @@
   */
   function getTrackingParams() {
     var trackingParams = {};
-    if (location.search && URLSearchParams) {
+    if (location.search && typeof URLSearchParams === "function") {
       var p = new URLSearchParams(location.search);
-      for (
-        var _i = 0, KNOWN_TRACKING_PARAMS_1 = KNOWN_TRACKING_PARAMS;
-        _i < KNOWN_TRACKING_PARAMS_1.length;
-        _i++
-      ) {
+      for (var _i = 0, KNOWN_TRACKING_PARAMS_1 = KNOWN_TRACKING_PARAMS; _i < KNOWN_TRACKING_PARAMS_1.length; _i++) {
         var key = KNOWN_TRACKING_PARAMS_1[_i];
         var value = p.get(key);
         if (value) {
@@ -703,7 +709,7 @@
   var largestEntry;
   var maximumSessionValue = 0;
   var MAX_CLS_SOURCES = 50;
-  function processEntry$2(entry) {
+  function processEntry$3(entry) {
     if (!entry.hadRecentInput) {
       var firstEntry = sessionEntries[0];
       var latestEntry = sessionEntries[sessionEntries.length - 1];
@@ -736,13 +742,13 @@
       maximumSessionValue = max(maximumSessionValue, sessionValue);
     }
   }
-  function reset$2() {
+  function reset$3() {
     sessionValue = 0;
     sessionEntries = [];
     maximumSessionValue = 0;
     largestEntry = undefined;
   }
-  function getData$2() {
+  function getData$3() {
     return {
       value: maximumSessionValue,
       startTime: sessionEntries[0] ? processTimeMetric(sessionEntries[0].startTime) : null,
@@ -756,12 +762,121 @@
     };
   }
 
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign.apply(this, arguments);
+  };
+
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  var MAX_LOAF_ENTRIES = 50;
+  var MAX_LOAF_SCRIPTS = 50;
+  var entries = [];
+  function processEntry$2(entry) {
+    entries.push(entry);
+  }
+  function reset$2() {
+    entries = [];
+  }
+  function getEntries$1() {
+    return entries;
+  }
+  function getData$2() {
+    var summarizedEntries = [];
+    var totalDuration = 0;
+    var totalBlockingDuration = 0;
+    var totalStyleAndLayoutDuration = 0;
+    var totalWorkDuration = 0;
+    entries.forEach(function (entry) {
+      var startTime = entry.startTime, blockingDuration = entry.blockingDuration, duration = entry.duration, renderStart = entry.renderStart, styleAndLayoutStart = entry.styleAndLayoutStart;
+      totalDuration += duration;
+      totalBlockingDuration += blockingDuration;
+      totalStyleAndLayoutDuration += styleAndLayoutStart
+      ? clamp(startTime + duration - styleAndLayoutStart)
+      : 0;
+      totalWorkDuration += renderStart ? renderStart - startTime : duration;
+      summarizedEntries.push({
+        startTime: floor(startTime),
+        duration: floor(duration),
+        renderStart: floor(renderStart),
+        styleAndLayoutStart: floor(styleAndLayoutStart),
+        blockingDuration: floor(blockingDuration),
+      });
+    });
+    return {
+      totalBlockingDuration: floor(totalBlockingDuration),
+      totalDuration: floor(totalDuration),
+      totalEntries: entries.length,
+      totalStyleAndLayoutDuration: floor(totalStyleAndLayoutDuration),
+      totalWorkDuration: floor(totalWorkDuration),
+      entries: summarizedEntries.slice(0, MAX_LOAF_ENTRIES),
+      scripts: summarizeLoAFScripts(entries.flatMap(function (entry) { return entry.scripts; })).slice(0, MAX_LOAF_SCRIPTS),
+    };
+  }
+  function summarizeLoAFScripts(scripts) {
+    var summary = {};
+    scripts.forEach(function (script) {
+      var key = script.invoker + ":" + script.sourceURL + ":" + script.sourceFunctionName;
+      if (!summary[key]) {
+        summary[key] = {
+          sourceUrl: script.sourceURL,
+          sourceFunctionName: script.sourceFunctionName,
+          timings: [],
+          totalEntries: 0,
+          totalDuration: 0,
+          totalPauseDuration: 0,
+          totalForcedStyleAndLayoutDuration: 0,
+          invoker: script.invoker,
+          inpPhase: script.inpPhase,
+        };
+      }
+      summary[key].totalEntries++;
+      summary[key].totalDuration += script.duration;
+      summary[key].totalPauseDuration += script.pauseDuration;
+      summary[key].totalForcedStyleAndLayoutDuration += script.forcedStyleAndLayoutDuration;
+      summary[key].timings.push([floor(script.startTime), floor(script.duration)]);
+    });
+    return Object.values(summary).map(function (script) { return (__assign(__assign({}, script), { totalDuration: floor(script.totalDuration), totalPauseDuration: floor(script.totalPauseDuration), totalForcedStyleAndLayoutDuration: floor(script.totalForcedStyleAndLayoutDuration) })); });
+  }
+
   /**
   * This implementation is based on the web-vitals implementation, however it is stripped back to the
   * bare minimum required to measure just the INP value and does not store the actual event entries.
   */
   // The maximum number of interactions to store
   var MAX_INTERACTIONS = 10;
+  var INPPhase;
+  (function (INPPhase) {
+    INPPhase["InputDelay"] = "ID";
+    INPPhase["ProcessingTime"] = "PT";
+    INPPhase["PresentationDelay"] = "PD";
+  })(INPPhase || (INPPhase = {}));
   // A list of the slowest interactions
   var slowestEntries = [];
   // A map of the slowest interactions by ID
@@ -838,21 +953,51 @@
     if (!interaction) {
       return undefined;
     }
+    var duration = interaction.duration, startTime = interaction.startTime, processingStart = interaction.processingStart;
+    var inpScripts = getEntries$1()
+    .flatMap(function (entry) { return entry.scripts; })
+    // Only include scripts that started during the interaction
+    .filter(function (script) {
+      return script.startTime + script.duration >= startTime && script.startTime <= startTime + duration;
+    })
+    .map(function (_script) {
+      var script = JSON.parse(JSON.stringify(_script));
+      // Clamp the script duration to the time of the interaction
+      script.duration = script.startTime + script.duration - max(startTime, script.startTime);
+      script.inpPhase = getINPPhase(script, interaction);
+      return script;
+    });
+    var loafScripts = summarizeLoAFScripts(inpScripts);
     return {
       value: interaction.duration,
-      startTime: processTimeMetric(interaction.startTime),
+      startTime: processTimeMetric(startTime),
+      duration: interaction.duration,
       subParts: {
-        inputDelay: clamp(floor(interaction.processingStart - interaction.startTime)),
+        inputDelay: clamp(floor(processingStart - startTime)),
+        processingStart: processTimeMetric(processingStart),
+        processingEnd: processTimeMetric(interaction.processingEnd),
         processingTime: clamp(floor(interaction.processingTime)),
-        presentationDelay: clamp(floor(interaction.startTime + interaction.duration - interaction.processingEnd)),
+        presentationDelay: clamp(floor(startTime + interaction.duration - interaction.processingEnd)),
       },
       attribution: {
         eventType: interaction.name,
         elementSelector: interaction.selector || null,
         elementType: ((_a = interaction.target) === null || _a === void 0 ? void 0 : _a.nodeName) || null,
+        loafScripts: loafScripts,
       },
     };
   }
+  function getINPPhase(script, interaction) {
+    var processingStart = interaction.processingStart, processingTime = interaction.processingTime, startTime = interaction.startTime;
+    var inputDelay = processingStart - startTime;
+    if (script.startTime < startTime + inputDelay) {
+      return INPPhase.InputDelay;
+    }
+    else if (script.startTime >= startTime + inputDelay + processingTime) {
+      return INPPhase.PresentationDelay;
+    }
+    return INPPhase.ProcessingTime;
+  }
   function getInteractionCount() {
     if ("interactionCount" in performance) {
       return performance.interactionCount;
@@ -1103,24 +1248,29 @@
       observe("longtask", processAndLogEntry);
       observe("element", processAndLogEntry);
       observe("paint", processAndLogEntry);
-      observe("largest-contentful-paint", function (entry) {
+      if (observe("largest-contentful-paint", function (entry) {
         // Process the LCP entry for the legacy beacon
         processAndLogEntry(entry);
         // Process the LCP entry for the new beacon
         processEntry(entry);
-        beacon.setMetricData("lcp", getData());
-      });
-      observe("layout-shift", function (entry) {
+      })) {
+        beacon.addCollector(BeaconMetricKey.LCP, getData);
+      }
+      if (observe("layout-shift", function (entry) {
+        processEntry$3(entry);
+        logEntry(entry);
+      })) {
+        beacon.addCollector(BeaconMetricKey.CLS, getData$3);
+      }
+      if (observe("long-animation-frame", function (entry) {
         processEntry$2(entry);
-        beacon.setMetricData("cls", getData$2());
         logEntry(entry);
-      });
+      })) {
+        beacon.addCollector(BeaconMetricKey.LoAF, getData$2);
+      }
       var handleINPEntry_1 = function (entry) {
         processEntry$1(entry);
-        var data = getData$1();
-        if (data) {
-          beacon.setMetricData("inp", data);
-        }
+        logEntry(entry);
       };
       observe("first-input", function (entry) {
         logEntry(entry);
@@ -1134,7 +1284,7 @@
       // TODO: Set durationThreshold to 40 once performance.interactionCount is widely supported.
       // Right now we have to count every event to get the total interaction count so that we can
       // estimate a high percentile value for INP.
-      observe("event", function (entry) {
+      if (observe("event", function (entry) {
         handleINPEntry_1(entry);
         // It's useful to log the interactionId, but it is not serialised by default. Annoyingly, we
         // need to manually serialize our own object with the keys we want.
@@ -1147,7 +1297,9 @@
           processingStart: entry.processingStart,
           processingEnd: entry.processingEnd,
         });
-      }, { durationThreshold: 0 });
+      }, { durationThreshold: 0 })) {
+        beacon.addCollector(BeaconMetricKey.INP, getData$1);
+      }
     }
     catch (e) {
       logger.logEvent(LogEvent.PerformanceObserverError, [e]);
@@ -1571,7 +1723,7 @@
       if (!("LayoutShift" in self)) {
         return undefined;
       }
-      var clsData = getData$2();
+      var clsData = getData$3();
       return clsData.value.toFixed(6);
     }
     // Return the median value from an array of integers.
@@ -1714,8 +1866,9 @@
       gSyncId = createSyncId();
       gUid = refreshUniqueId(gSyncId);
       reset();
-      reset$2();
+      reset$3();
       reset$1();
+      reset$2();
       nErrors = 0;
       gFirstInputDelay = undefined;
       beacon = initPostBeacon();
@@ -2121,7 +2274,8 @@
           curleft += el.offsetLeft;
           curtop += el.offsetTop;
           el = el.offsetParent;
-        } catch (e) {
+        }
+        catch (e) {
           // If we get an exception, just return the current values.
           return [curleft, curtop];
         }
@@ -2199,10 +2353,7 @@
       // Store any tracking parameters as custom data
       var trackingParams = getTrackingParams();
       for (var key in trackingParams) {
-        logger.logEvent(LogEvent.TrackingParamAdded, [
-          key,
-          trackingParams[key],
-        ]);
+        logger.logEvent(LogEvent.TrackingParamAdded, [key, trackingParams[key]]);
         addCustomDataValue("_" + key, trackingParams[key]);
       }
       var sIx = "";

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -3,15 +3,18 @@
 @import "mixins/prefixed-transform";
 @import "mixins/grid-helper";
 
+$pale-blue-colour: #d2e2f1;
+
+$chevron-breakpoint: 360px;
 $chevron-indent-spacing: 7px;
-$black-bar-height: 50px;
-$search-width-or-height: $black-bar-height;
+
 $pseudo-underline-height: 3px;
-$button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
+$navbar-height: 50px;
 $large-navbar-height: 72px;
 
-$pale-blue-colour: #d2e2f1;
+$button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
+$button-pipe-colour-blue-background: $pale-blue-colour;
 
 $after-link-padding: govuk-spacing(4);
 $after-button-padding-right: govuk-spacing(4);
@@ -58,6 +61,9 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// Using `:focus-visible` means that in supporting browsers the focus state won't
+// be visible when a user clicks on the element, but the focus state will still be
+// useful for those who use the keyboard to navigate around the page.
 @mixin focus-and-focus-visible {
   &:focus {
     @content;
@@ -68,6 +74,11 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// For browsers that don't support `:focus-visible`, this defaults to using
+// `:focus` with a CSS-only fallback strategy.
+//
+// Undoes the :focus styles *only* for browsers that support :focus-visible.
+// See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
 @mixin focus-not-focus-visible {
   & {
     @content;
@@ -104,7 +115,7 @@ $after-button-padding-left: govuk-spacing(4);
 }
 
 .gem-c-layout-super-navigation-header__button-container {
-  top: -$black-bar-height;
+  top: -$navbar-height;
   position: absolute;
   right: 0;
 
@@ -137,7 +148,7 @@ $after-button-padding-left: govuk-spacing(4);
   padding: 0;
 }
 
-// Top level navigation links and search link.
+// Top level navigation links and search link, used when JavaScript is not available
 .gem-c-layout-super-navigation-header__navigation-item-link,
 .gem-c-layout-super-navigation-header__search-item-link {
   display: inline-block;
@@ -305,10 +316,18 @@ $after-button-padding-left: govuk-spacing(4);
 
 .gem-c-layout-super-navigation-header__navigation-item-link-inner {
   padding: govuk-spacing(1) $after-link-padding;
+  border-right: 1px solid $button-pipe-colour;
+}
+
+.gem-c-layout-super-navigation-header__navigation-item-link--large-navbar {
+  & .gem-c-layout-super-navigation-header__navigation-item-link-inner {
+    padding-left: 26px;
+    padding-right: 26px;
+  }
 }
 
 .gem-c-layout-super-navigation-header__navigation-item-link-inner--blue-background {
-  border-right: 1px solid $pale-blue-colour;
+  border-right: 1px solid $button-pipe-colour-blue-background;
 }
 
 // Search link and dropdown.
@@ -321,8 +340,6 @@ $after-button-padding-left: govuk-spacing(4);
 
   &:link,
   &:visited {
-    background: $govuk-brand-colour;
-
     &:hover {
       &::before {
         left: 0;
@@ -344,10 +361,6 @@ $after-button-padding-left: govuk-spacing(4);
       width: 100%;
     }
 
-    @include focus-not-focus-visible {
-      background: $govuk-link-colour;
-    }
-
     @include focus-and-focus-visible {
       &:hover {
         background: $govuk-focus-colour;
@@ -361,6 +374,11 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__search-item-link--large-navbar {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
 .gem-c-layout-super-navigation-header__search-item-link-icon,
 .gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
   height: 20px;
@@ -382,7 +400,7 @@ $after-button-padding-left: govuk-spacing(4);
   box-sizing: border-box;
   color: govuk-colour("white");
   cursor: pointer;
-  height: $black-bar-height;
+  height: $navbar-height;
   padding: 0;
   position: relative;
   margin: 0;
@@ -393,16 +411,18 @@ $after-button-padding-left: govuk-spacing(4);
     @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right);
   }
 
-  &:hover {
-    color: govuk-colour("mid-grey");
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      color: govuk-colour("mid-grey");
 
-    &::after {
-      background: govuk-colour("mid-grey");
-    }
+      &::after {
+        background: govuk-colour("mid-grey");
+      }
 
-    .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-      &::before {
-        border-color: govuk-colour("mid-grey");
+      .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+        &::before {
+          border-color: govuk-colour("mid-grey");
+        }
       }
     }
   }
@@ -438,9 +458,11 @@ $after-button-padding-left: govuk-spacing(4);
 
     box-shadow: none;
 
-    &:hover {
-      &::after {
-        background-color: govuk-colour("black");
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        &::after {
+          background-color: govuk-colour("black");
+        }
       }
     }
 
@@ -458,25 +480,25 @@ $after-button-padding-left: govuk-spacing(4);
     // stylelint-enable max-nesting-depth
   }
 
-  // Undoes the :focus styles *only* for browsers that support :focus-visible.
-  // See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
   @include focus-not-focus-visible {
     background: none;
     box-shadow: none;
     color: govuk-colour("white");
 
     // stylelint-disable max-nesting-depth
-    &:hover {
-      .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        color: govuk-colour("mid-grey");
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+          color: govuk-colour("mid-grey");
 
-        &::before {
-          @include chevron(govuk-colour("mid-grey"), true);
+          &::before {
+            @include chevron(govuk-colour("mid-grey"), true);
+          }
         }
-      }
 
-      &::after {
-        background: govuk-colour("mid-grey");
+        &::after {
+          background: govuk-colour("mid-grey");
+        }
       }
     }
 
@@ -484,10 +506,10 @@ $after-button-padding-left: govuk-spacing(4);
       border-color: $button-pipe-colour;
 
       &.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--blue-background {
-        border-color: $pale-blue-colour;
+        border-color: $button-pipe-colour-blue-background;
       }
 
-      @include govuk-media-query($from: 360px) {
+      @include govuk-media-query($from: $chevron-breakpoint) {
         &::before {
           @include chevron(govuk-colour("white"), true);
         }
@@ -498,6 +520,8 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// JS available - targets the "Menu" toggle button
+// Styles the "Menu" open state
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background,
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button {
   // Open button modifier
@@ -515,7 +539,7 @@ $after-button-padding-left: govuk-spacing(4);
         color: govuk-colour("black");
         border-color: $govuk-focus-colour;
 
-        @include govuk-media-query($from: 360px) {
+        @include govuk-media-query($from: $chevron-breakpoint) {
           &::before {
             @include chevron(govuk-colour("black"), true);
             @include prefixed-transform($rotate: 225deg, $translateY: 1px);
@@ -535,7 +559,7 @@ $after-button-padding-left: govuk-spacing(4);
         color: $govuk-link-colour;
         border-color: govuk-colour("light-grey");
 
-        @include govuk-media-query($from: 360px) {
+        @include govuk-media-query($from: $chevron-breakpoint) {
           &::before {
             @include chevron($govuk-link-colour);
             @include prefixed-transform($rotate: 225deg, $translateY: 1px);
@@ -547,135 +571,142 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// JS available - targets the "Menu" toggle button used on a blue background
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background {
   @include focus-not-focus-visible {
-    &:hover {
-      &::after {
-        background: govuk-colour("white");
-      }
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        &::after {
+          background: govuk-colour("white");
+        }
 
-      .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        color: govuk-colour("white");
+        .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+          color: govuk-colour("white");
 
-        &::before {
-          border-color: govuk-colour("white");
+          &::before {
+            border-color: govuk-colour("white");
+          }
         }
       }
     }
   }
 }
 
+// JS available - targets the "Menu" toggle button inner text
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
   display: inline-block;
   border-right: 1px solid govuk-colour("white");
   margin: 0;
   padding: govuk-spacing(1) govuk-spacing(4);
 
-  @include govuk-media-query($from: 360px) {
+  @include govuk-media-query($from: $chevron-breakpoint) {
     &::before {
       @include chevron(govuk-colour("white"));
     }
   }
 }
 
-// Styles for search toggle button.
+// JS available - targets the search toggle button
 .gem-c-layout-super-navigation-header__search-toggle-button {
   background: none;
   border: 0;
   color: govuk-colour("white");
   cursor: pointer;
-  height: $search-width-or-height;
+  height: $navbar-height;
   padding: govuk-spacing(3);
   position: relative;
-  width: $search-width-or-height;
+  width: 51px;
+  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
 
-  &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
-    background: $govuk-brand-colour;
+  &::after {
+    @include pseudo-underline($left: 0, $right: 0);
   }
 
-  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      color: govuk-colour("mid-grey");
+
+      &::after {
+        background: govuk-colour("mid-grey");
+      }
+    }
+  }
 
   @include focus-and-focus-visible {
     @include govuk-focused-text;
     border-color: $govuk-focus-colour;
     box-shadow: none;
     z-index: 11;
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        &::after {
+          background: none;
+        }
+      }
+    }
   }
 
-  &:focus:not(:focus-visible) {
+  @include focus-not-focus-visible {
     background: none;
-    border-color: govuk-colour("white");
     box-shadow: none;
     color: govuk-colour("white");
   }
 
-  &:focus-visible {
-    &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
-      border-bottom: $pseudo-underline-height solid govuk-colour("black");
-    }
-  }
-
-  @include govuk-media-query($from: "desktop") {
-    border: 0;
-    margin: 0;
-    right: 0;
-
-    @include focus-not-focus-visible {
-      border-bottom: 1px solid transparent;
-      border-left: none;
-      position: relative;
-    }
-
-    &:hover {
-      border-bottom: $pseudo-underline-height solid govuk-colour("mid-grey");
-      color: govuk-colour("mid-grey");
-    }
-
-    &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+  &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+    @media (hover: hover) and (pointer: fine) {
       &:hover {
-        border-bottom: $pseudo-underline-height solid govuk-colour("white");
         color: govuk-colour("white");
-      }
 
-      // stylelint-disable max-nesting-depth
-      @include focus-not-focus-visible {
-        border-bottom: $pseudo-underline-height solid $govuk-brand-colour;
-
-        &:hover {
-          border-bottom: $pseudo-underline-height solid govuk-colour("white");
+        &::after {
+          background: govuk-colour("white");
         }
       }
-      // stylelint-enable max-nesting-depth
     }
 
     &:focus-visible {
-      &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
-        color: govuk-colour("black");
+      color: govuk-colour("black");
 
+      &::after {
+        background: govuk-colour("black");
+      }
+
+      @media (hover: hover) and (pointer: fine) {
         &:hover {
-          border-bottom: $pseudo-underline-height solid govuk-colour("black");
           color: govuk-colour("black");
+
+          &::after {
+            background: govuk-colour("black");
+          }
         }
       }
     }
 
-    @include focus-and-focus-visible {
-      @include govuk-focused-text;
-      border-bottom-color: $govuk-focus-colour;
-      box-shadow: none;
+    @include focus-not-focus-visible {
+      &::after {
+        background: none;
+      }
+
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          &::after {
+            background: govuk-colour("white");
+          }
+        }
+      }
     }
   }
 
   // Open button modifier
   &.gem-c-layout-super-navigation-header__open-button {
     &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
-      &:hover {
-        border-bottom: $pseudo-underline-height solid govuk-colour("light-grey");
-        color: govuk-colour("white");
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          color: govuk-colour("white");
+        }
       }
 
       &:focus-visible {
-        border-bottom: $pseudo-underline-height solid govuk-colour("black");
         color: govuk-colour("black");
       }
     }
@@ -689,17 +720,23 @@ $after-button-padding-left: govuk-spacing(4);
 
     @include focus-not-focus-visible {
       background: govuk-colour("light-grey");
-      border-bottom-color: govuk-colour("light-grey");
       color: govuk-colour("light-grey");
       outline: 1px solid govuk-colour("light-grey"); // overlap the border of the nav menu so it won't appear when menu open
 
-      &:hover {
-        border-bottom: $pseudo-underline-height solid govuk-colour("light-grey");
+      // stylelint-disable max-nesting-depth
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          &::after {
+            background: none;
+          }
+        }
       }
+      // stylelint-enable max-nesting-depth
     }
   }
 }
 
+// JS available - styles the close icon, used when the search menu is in the open state
 .gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon {
   color: $govuk-text-colour;
   display: none;
@@ -721,7 +758,7 @@ $after-button-padding-left: govuk-spacing(4);
   padding-bottom: govuk-spacing(7);
 }
 
-// Dropdown menu.
+// JS available - dropdown menu
 .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
   background: govuk-colour("light-grey");
   border-bottom: 1px govuk-colour("mid-grey") solid;
@@ -736,6 +773,7 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// JS available - adds a custom margin to the wrapper for the search items in the search dropdown
 .gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar {
   @include govuk-media-query($until: "desktop") {
     .gem-c-layout-super-navigation-header__search-items {
@@ -744,6 +782,7 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// JS available - adds custom padding to the services and information and government activity sections in the menu dropdown
 @include govuk-media-query($until: "tablet") {
   // padding to make it the same as the padding for the redesign of the homepage
   .gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__column--services-and-information,
@@ -752,7 +791,7 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-// Dropdown menu items.
+// JS available - styles the links in the dropdown menu
 .gem-c-layout-super-navigation-header__dropdown-list-item {
   box-sizing: border-box;
   padding: 0 0 govuk-spacing(3) 0;
@@ -764,7 +803,7 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-// Navigation menu items.
+// JS available - wraps the `dropdown-list-item` navigation menu items
 .gem-c-layout-super-navigation-header__navigation-second-items {
   list-style: none;
   margin: 0;
@@ -776,6 +815,7 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// JS available - styling for the "government-activity" group of links
 .gem-c-layout-super-navigation-header__column--government-activity {
   position: relative;
 
@@ -784,6 +824,7 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// JS available - styling for the "services-and-information" group of links
 .gem-c-layout-super-navigation-header__navigation-second-items--services-and-information {
   @include govuk-media-query($until: "desktop") {
     border-bottom: 1px solid govuk-colour("mid-grey");
@@ -833,7 +874,7 @@ $after-button-padding-left: govuk-spacing(4);
 .gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
   padding-left: 24px;
   padding-right: 24px;
-  width: 68px;
+  width: 69px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
@@ -875,8 +916,8 @@ $after-button-padding-left: govuk-spacing(4);
   // isn't a multiple of 5 :(
   .gem-c-layout-super-navigation-header__navigation-item-link--large-navbar,
   .gem-c-layout-super-navigation-header__search-item-link--large-navbar {
-    padding-top: 33px;
-    padding-bottom: 33px;
+    padding-top: 26px;
+    padding-bottom: 26px;
   }
 
   .gem-c-layout-super-navigation-header__logotype-crown--large-navbar {
@@ -904,7 +945,8 @@ $after-button-padding-left: govuk-spacing(4);
   .gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
     height: $large-navbar-height;
     // to stop the search icon moving on hover
-    padding-bottom: 12px;
+    padding-top: 26px;
+    padding-bottom: 26px;
   }
 
   .gem-c-layout-super-navigation-header__button-container--large-navbar {

data/app/views/govuk_publishing_components/components/_table.html.erb

@@ -31,7 +31,8 @@
             format: item[:format],
             href: item[:href],
             data_attributes: item[:data_attributes],
-            sort_direction: item[:sort_direction]
+            sort_direction: item[:sort_direction],
+            width: item[:width],
           } %>
         <% end %>
       <% end %>

data/app/views/govuk_publishing_components/components/docs/table.yml

@@ -200,3 +200,26 @@ examples:
           format: numeric
         - text: £125
           format: numeric
+  with_custom_width:
+    description: >
+      You can use `width` on a header cell to set the width of a table column if you do not want the
+      width to be inferred by the browser based on the content of its cells.
+    data:
+      head:
+        - text: Phrase
+        - text: Rating
+          width: one-half
+      rows:
+      -
+        - text: Lorem ipsum
+        - text: good
+      -
+        - text: dolor sit amet, consectetur adipiscing elit
+        - text: okay
+      -
+        - text: >
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua duis aute irure dolor
+            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
+            molestiae non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
+            quaerat voluptatem!!!
+        - text: bad

data/lib/govuk_publishing_components/app_helpers/table_helper.rb

@@ -20,6 +20,14 @@ module GovukPublishingComponents
       end
 
       class TableBuilder
+        ALLOWABLE_COLUMN_WIDTHS = %w[
+          three-quarters
+          two-thirds
+          one-half
+          one-third
+          one-quarter
+        ].freeze
+
         include ActionView::Helpers::UrlHelper
         include ActionView::Helpers::TagHelper
 
@@ -53,6 +61,7 @@ module GovukPublishingComponents
           classes = %w[govuk-table__header]
           classes << "govuk-table__header--#{opt[:format]}" if opt[:format]
           classes << "govuk-table__header--active" if opt[:sort_direction]
+          classes << "govuk-!-width-#{opt[:width]}" if ALLOWABLE_COLUMN_WIDTHS.include?(opt[:width])
           link_classes = %w[app-table__sort-link]
           link_classes << "app-table__sort-link--#{opt[:sort_direction]}" if opt[:sort_direction]
           str = link_to str, opt[:href], class: link_classes, data: opt[:data_attributes] if opt[:href]

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "56.2.1".freeze
+  VERSION = "56.3.0".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 56.2.1
+  version: 56.3.0
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -456,6 +456,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-finder-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-focus-loss-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js
@@ -2038,7 +2039,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.7
+rubygems_version: 3.6.8
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications
 test_files: []