katalyst-govuk-formbuilder 1.10.2 → 1.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e79ac6a3af6144f42fe879e01703e1d7ba5f56616f245ae3224ad2ad146445b3
-  data.tar.gz: d03cb6a9f1b339bb2e2e8e302e2f955352d36587117f4cd3351c44921c155009
+  metadata.gz: 2d371dc77a725f4e009f3a0a61e75d085f3080bad8cb64857299a3a7264fb95e
+  data.tar.gz: 392fcc8460909ba2a4190352a15cdd536a5e5e6e3d3ce896ae874a56a5aebef6
 SHA512:
-  metadata.gz: 235fc122738b7aeee77dcc262b9a9988008fabd4f54b00c683406ae92b73c1818f9d150d702e3058de2ef02ccc6d9ca493720c2bd6bff0cd29b76e36afb9b9bb
-  data.tar.gz: b585ddf72b1160a06651c4840e4ca382173b5670348f45b9024fae253fc4bc9fac85acc39bf0cc57afa2e52cc77c938b5cb52d3617d4d8c8f6974eb259e62efd
+  metadata.gz: cefbeb3e8423be0a86e33b324f59a3745aab8fd7e8a150a9e0be5dc4f874378108253db1f722c68b67defc3d96606db4dcef6576684f895445463cd905bf7f43
+  data.tar.gz: 8d688517167cc77a120aa50ac7d5e101524e8478c381071d603f650e303cc17ed9b0ea802cb6be15859717a2555f30589868768e55f7848df5c4072cdec87c04

data/README.md

@@ -27,6 +27,12 @@ Add the stylesheet to your default layout:
 <%= stylesheet_link_tag "katalyst/govuk/formbuilder" %>
 ```
 
+You can also add it to your SASS build:
+
+```scss
+@use "katalyst/govuk/formbuilder";
+```
+
 Some GOVUK components require javascript enhancements 
 (see [GOVUK docs](https://frontend.design-system.service.gov.uk/get-started/#5-get-the-javascript-working)).
 
@@ -43,6 +49,30 @@ You'll need to include the helper to make this method available, which you can a
 helper Katalyst::GOVUK::Formbuilder::Frontend
 ```
 
+## Extensions
+
+We include some optional extensions for integrating with gems that we (Katalyst) commonly use.
+
+These require additional steps to use.
+
+### Hotwire Combobox
+
+[Hotwire Combobox](https://hotwirecombobox.com) is a promising option for adding asynchronous multi-select inputs to
+Rails forms. We're assuming importmaps and Turbo if this option is used.
+
+There's no explicit dependency so if you want to use this input you'll need to add:
+
+```
+gem "hotwire_combobox"
+```
+
+JS is added by the gem automatically (via importmaps), but you'll need to explicitly add CSS:
+
+```scss
+@use "katalyst/govuk/formbuilder";
+@use "katalyst/govuk/components/combobox";
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/katalyst/govuk-formbuilder.

data/app/assets/builds/katalyst/govuk/formbuilder.css

@@ -43,7 +43,7 @@
 
 
 :root {
-  --govuk-frontend-version: "5.4.0";
+  --govuk-frontend-version: "5.6.0";
   --govuk-frontend-breakpoint-mobile: 20rem;
   --govuk-frontend-breakpoint-tablet: 40.0625rem;
   --govuk-frontend-breakpoint-desktop: 48.0625rem;
@@ -1365,7 +1365,7 @@
   border-radius: 0;
   color: #ffffff;
   background-color: #00703c;
-  box-shadow: 0 2px 0 #002d18;
+  box-shadow: 0 2px 0 rgb(0, 44.8, 24);
   text-align: center;
   vertical-align: top;
   cursor: pointer;
@@ -1407,7 +1407,7 @@
   border: 0;
 }
 .govuk-button:hover {
-  background-color: #005a30;
+  background-color: rgb(0, 89.6, 48);
 }
 .govuk-button:active {
   top: 2px;
@@ -1446,18 +1446,18 @@
 }
 .govuk-button[disabled]:active {
   top: 0;
-  box-shadow: 0 2px 0 #002d18;
+  box-shadow: 0 2px 0 rgb(0, 44.8, 24);
 }
 
 .govuk-button--secondary {
   background-color: #f3f2f1;
-  box-shadow: 0 2px 0 #929191;
+  box-shadow: 0 2px 0 rgb(145.8, 145.2, 144.6);
 }
 .govuk-button--secondary, .govuk-button--secondary:link, .govuk-button--secondary:visited, .govuk-button--secondary:active, .govuk-button--secondary:hover {
   color: #0b0c0c;
 }
 .govuk-button--secondary:hover {
-  background-color: #dbdad9;
+  background-color: rgb(218.7, 217.8, 216.9);
 }
 .govuk-button--secondary:hover[disabled] {
   background-color: #f3f2f1;
@@ -1465,13 +1465,13 @@
 
 .govuk-button--warning {
   background-color: #d4351c;
-  box-shadow: 0 2px 0 #55150b;
+  box-shadow: 0 2px 0 rgb(84.8, 21.2, 11.2);
 }
 .govuk-button--warning, .govuk-button--warning:link, .govuk-button--warning:visited, .govuk-button--warning:active, .govuk-button--warning:hover {
   color: #ffffff;
 }
 .govuk-button--warning:hover {
-  background-color: #aa2a16;
+  background-color: rgb(169.6, 42.4, 22.4);
 }
 .govuk-button--warning:hover[disabled] {
   background-color: #d4351c;
@@ -1479,13 +1479,13 @@
 
 .govuk-button--inverse {
   background-color: #ffffff;
-  box-shadow: 0 2px 0 #144e81;
+  box-shadow: 0 2px 0 rgb(20.3, 78.4, 128.8);
 }
 .govuk-button--inverse, .govuk-button--inverse:link, .govuk-button--inverse:visited, .govuk-button--inverse:active, .govuk-button--inverse:hover {
   color: #1d70b8;
 }
 .govuk-button--inverse:hover {
-  background-color: #e8f1f8;
+  background-color: rgb(232.4, 240.7, 247.9);
 }
 .govuk-button--inverse:hover[disabled] {
   background-color: #ffffff;
@@ -1958,8 +1958,8 @@
 
 .govuk-checkboxes__conditional {
   margin-bottom: 15px;
-  margin-left: 18px;
-  padding-left: 33px;
+  margin-left: 20px;
+  padding-left: 35px;
   border-left: 4px solid #b1b4b6;
 }
 @media (min-width: 40.0625em) {
@@ -2003,6 +2003,10 @@
   margin-left: 10px;
   padding-left: 20px;
 }
+.govuk-checkboxes--small .govuk-checkboxes__divider {
+  width: 24px;
+  margin-bottom: 5px;
+}
 .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
   outline: 3px dashed transparent;
   outline-offset: 1px;
@@ -2330,6 +2334,9 @@
     margin-top: 20px;
   }
 }
+.govuk-error-summary__body > :last-child {
+  margin-bottom: 5px;
+}
 
 .govuk-error-summary__list {
   margin-bottom: 0;
@@ -2373,7 +2380,7 @@
   color: #d4351c;
 }
 .govuk-error-summary__list a:hover {
-  color: #942514;
+  color: rgb(148.4, 37.1, 19.6);
 }
 .govuk-error-summary__list a:active {
   color: #d4351c;
@@ -2592,8 +2599,8 @@
 
 .govuk-radios__conditional {
   margin-bottom: 15px;
-  margin-left: 18px;
-  padding-left: 33px;
+  margin-left: 20px;
+  padding-left: 35px;
   border-left: 4px solid #b1b4b6;
 }
 @media (min-width: 40.0625em) {
@@ -2817,34 +2824,22 @@
   content: " ";
 }
 
-.govuk-visually-hidden-focusable {
+.govuk-visually-hidden-focusable:not(:active):not(:focus) {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   margin: 0 !important;
+  padding: 0 !important;
   overflow: hidden !important;
   clip: rect(0 0 0 0) !important;
   -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
+  border: 0 !important;
   white-space: nowrap !important;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-.govuk-visually-hidden-focusable:active, .govuk-visually-hidden-focusable:focus {
-  position: static !important;
-  width: auto !important;
-  height: auto !important;
-  margin: inherit !important;
-  overflow: visible !important;
-  clip: auto !important;
-  -webkit-clip-path: none !important;
-  clip-path: none !important;
-  white-space: inherit !important;
-  -webkit-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
 
 
 
@@ -4132,6 +4127,11 @@
   font-variant-numeric: tabular-nums !important;
 }
 
+.govuk-\!-text-break-word {
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
 
 .govuk-\!-width-full {
   width: 100% !important;

data/app/assets/stylesheets/katalyst/govuk/components/combobox/_index.scss

@@ -0,0 +1,100 @@
+// assumes that hotwire_combobox is in the load paths, implies dartsass-rails is the compiler
+@use "hotwire_combobox";
+
+@import "govuk-frontend/dist/govuk/base";
+@import "govuk-frontend/dist/govuk/components/error-message/index";
+@import "govuk-frontend/dist/govuk/components/hint/index";
+@import "govuk-frontend/dist/govuk/components/label/index";
+
+// Based on components/select
+@include govuk-exports("govuk/component/combobox") {
+  .hw-combobox:has(.govuk-combobox) {
+    --hw-border-radius: 0;
+    --hw-border-width--slim: #{$govuk-border-width-form-element};
+    --hw-border-color: #{$govuk-input-border-colour};
+    --hw-focus-color: #{$govuk-focus-colour};
+    --hw-combobox-width: 100%;
+    --hw-combobox-width--multiple: 100%;
+    --hw-active-bg-color: #{govuk-colour("blue")};
+    --hw-padding--slim: #{govuk-spacing(1)};
+    --hw-padding--slimmer: #{govuk-spacing(1)};
+    --hw-padding--thick: #{govuk-spacing(1)};
+    --hw-font-size: 1rem;
+    --hw-line-height: 1.25;
+
+    display: flex;
+
+    .hw-combobox__main__wrapper {
+      // This min-width was chosen because:
+      // - it makes the Select wider than it is tall (which is what users expect)
+      // - 11.5em matches the 'length-10' variant of the input component
+      // - it fits comfortably on screens as narrow as 240px wide
+      min-width: 11.5em;
+      max-width: var(--text-width, 100%);
+
+      display: flex;
+      min-height: 2.5rem;
+      align-items: center;
+
+      // Default user agent colours for selects can have low contrast,
+      // and may look disabled (#2435)
+      color: $govuk-text-colour;
+      background-color: govuk-colour("white");
+    }
+
+    .hw-combobox__main__wrapper:focus-within {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      // Double the border by adding its width again. Use `box-shadow` to do
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` is already used for the yellow focus state.
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+    }
+
+    .govuk-combobox {
+      @include govuk-font($size: 16, $line-height: 1.25);
+
+      // override input styles from form/govuk
+      border: none;
+      outline: none;
+      box-shadow: none;
+      width: 100%;
+      padding: 0;
+      height: unset;
+    }
+
+    // disabled
+    &:has(.govuk-combobox:disabled) {
+      opacity: 0.5;
+      color: inherit;
+      cursor: not-allowed;
+    }
+
+    // extend existing hover/active styles (--hw-active-bg-color)
+    .hw-combobox__option:hover,
+    .hw-combobox__option--navigated,
+    .hw-combobox__option--selected {
+      color: govuk-colour("white");
+    }
+
+    .hw-combobox__dialog__input {
+      width: 100%;
+    }
+
+    .hw-combobox__listbox {
+      left: -$govuk-border-width-form-element;
+      right: -$govuk-border-width-form-element;
+      top: calc(100% + $govuk-border-width-form-element * 2 + 0.2rem);
+      width: unset;
+    }
+  }
+
+  .govuk-combobox--error {
+    border-color: $govuk-error-colour;
+
+    .hw-combobox__main__wrapper:focus-within {
+      border-color: $govuk-input-border-colour;
+    }
+  }
+}

data/app/assets/stylesheets/katalyst/govuk/components/richtextarea/_index.scss

@@ -2,12 +2,11 @@
 @import "govuk-frontend/dist/govuk/components/hint/index";
 @import "govuk-frontend/dist/govuk/components/label/index";
 
-// Based on components/textarea
 @include govuk-exports("govuk/component/richtextarea") {
   .govuk-richtextarea {
     @include govuk-font($size: 19, $line-height: 1.25);
 
-    box-sizing: border-box; // should this be global?
+    box-sizing: border-box;
     display: block;
     width: 100%;
     // min-height inherited from trix-editor styles
@@ -26,8 +25,8 @@
       // Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
-      // this instead of changing `border-width` (which changes element size) and
-      // since `outline` is already used for the yellow focus state.
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` is already used for the yellow focus state.
       box-shadow: inset 0 0 0 $govuk-border-width-form-element;
     }
 

data/lib/katalyst/govuk/formbuilder/builder.rb

@@ -157,7 +157,7 @@ module Katalyst
         # @param form_group [Hash] configures the form group
         # @option form_group classes [Array,String] sets the form group's classes
         # @option form_group kwargs [Hash] additional attributes added to the form group
-        # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
+        # @param & [Block] arbitrary HTML that will be rendered between the hint and the input
         # @return [ActiveSupport::SafeBuffer] HTML output
         #
         # @example A rich text area with injected content
@@ -186,6 +186,46 @@ module Katalyst
           ).html
         end
 
+        # Generates a +combobox+ element that uses Hotwire Combobox to generate a combobox selection element.
+        # @see https://hotwirecombobox.com
+        # @see https://github.com/josefarias/hotwire_combobox
+        #
+        # @param attribute_name [Symbol] The name of the attribute
+        # @param options_or_src [Array] The +option+ values or a source path for async combobox
+        # @param options [Hash] Options hash passed through to the +combobox+ helper
+        # @param hint [Hash,Proc] The content of the hint. No hint will be added if 'text' is left +nil+.
+        #   When a +Proc+ is supplied the hint will be wrapped in a +div+ instead of a +span+
+        # @option hint text [String] the hint text
+        # @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
+        # @param label [Hash,Proc] configures or sets the associated label content
+        # @option label text [String] the label text
+        # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
+        # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+        # @option label hidden [Boolean] control the visibility of the label.
+        #   Hidden labels will still be read by screenreaders
+        # @option label kwargs [Hash] additional arguments are applied as attributes on the +label+ element
+        # @param form_group [Hash] configures the form group
+        # @option form_group kwargs [Hash] additional attributes added to the form group
+        # @return [ActiveSupport::SafeBuffer] HTML output
+        #
+        # @example A combobox that allows the user to choose from a list of states
+        #
+        #   = f.combobox "state", State.all
+        #
+        # @example A combobox that allows the user to choose from an asynchronous states endpoint
+        #
+        #   = f.combobox "state", states_path
+        #
+        # @example A multi-select combobox that allows the user to choose multiple states
+        #
+        #   = f.combobox "state", State.all, multiselect_chip_src: states_chips_path
+        #
+        def govuk_combobox(attribute_name, options_or_src = [], options: {}, label: {}, hint: {}, form_group: {},
+                           caption: {}, **, &)
+          Elements::Combobox.new(self, object_name, attribute_name, options_or_src,
+                                 options:, label:, hint:, form_group:, caption:, **, &).html
+        end
+
         # Keep track of whether we are inside a fieldset
         # This allows labels to default to bold ("s") normally but use the default otherwise
         def fieldset_context

data/lib/katalyst/govuk/formbuilder/elements/combobox.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require "govuk_design_system_formbuilder"
+
+module Katalyst
+  module GOVUK
+    module Formbuilder
+      module Elements
+        class Combobox < GOVUKDesignSystemFormBuilder::Base
+          include GOVUKDesignSystemFormBuilder::Traits::Error
+          include GOVUKDesignSystemFormBuilder::Traits::Label
+          include GOVUKDesignSystemFormBuilder::Traits::Hint
+          include GOVUKDesignSystemFormBuilder::Traits::HTMLAttributes
+
+          def initialize(builder, object_name, attribute_name, options_or_src, options:, form_group:, label:, hint:,
+                         caption:, **kwargs, &block)
+            super(builder, object_name, attribute_name)
+            @block           = block
+
+            @form_group      = form_group
+            @hint            = hint
+            @label           = label
+            @caption         = caption
+            @options_or_src  = options_or_src
+            @options         = options
+            @html_attributes = kwargs
+          end
+
+          def html
+            GOVUKDesignSystemFormBuilder::Containers::FormGroup.new(*bound, **@form_group).html do
+              safe_join([label_element, hint_element, error_element, combobox])
+            end
+          end
+
+          private
+
+          def combobox
+            @builder.combobox(@attribute_name, @options_or_src, **@options, **attributes(@html_attributes), &@block)
+          end
+
+          def options
+            {
+              id:    field_id(link_errors: true),
+              class: classes,
+              aria:  { describedby: combine_references(hint_id, error_id) },
+            }
+          end
+
+          def classes
+            combine_references(%(#{brand}-combobox), error_class)
+          end
+
+          def error_class
+            %(#{brand}-combobox--error) if has_errors?
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -27,6 +27,7 @@
 @import "phase-banner/index";
 @import "radios/index";
 @import "select/index";
+@import "service-navigation/index";
 @import "skip-link/index";
 @import "summary-list/index";
 @import "table/index";

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

@@ -102,9 +102,9 @@
       &:hover {
         color: $govuk-accordion-base-colour;
         background: $govuk-accordion-hover-colour;
-        // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
-        // button. We add a grey box-shadow on hover too, to make the height of the hover state
-        // match the height of the focus state.
+        // The focus state adds a box-shadow to the top and bottom of the
+        // button. We add a grey box-shadow on hover too, to make the height of
+        // the hover state match the height of the focus state.
         box-shadow:
           0 -2px $govuk-accordion-hover-colour,
           0 4px $govuk-accordion-hover-colour;
@@ -147,7 +147,7 @@
 
       position: relative;
 
-      // Set size using rems to make the icon scale with text if user resizes text in their browser
+      // Set size using rems so icon scales with text
       width: govuk-px-to-rem(20px);
       height: govuk-px-to-rem(20px);
 
@@ -184,14 +184,15 @@
     .govuk-accordion__section-button {
       width: 100%;
 
-      padding: govuk-spacing(2) 0 0 0;
+      padding: govuk-spacing(2) 0 0;
 
       border: 0;
 
       border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
 
-      // Visually separate the section from the one underneath when user changes colours in their
-      // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
+      // Visually separate the section from the one underneath when user changes
+      // colours in their browser. See
+      // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
       border-bottom: govuk-spacing(2) solid transparent;
 
       color: $govuk-text-colour;
@@ -230,8 +231,8 @@
       }
 
       &:focus {
-        // Remove default focus border around button as
-        // styling is being applied to inner text elements that receive focus
+        // Remove default focus border around button as styling is being applied
+        // to inner text elements that receive focus
         outline: 0;
 
         .govuk-accordion__section-heading-text-focus,
@@ -257,9 +258,10 @@
       }
     }
 
-    // Remove the transparent border when the section is expanded to make it clear that the heading
-    // relates to the content below. Adjust padding to maintain the height of the element.
-    // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
+    // Remove the transparent border when the section is expanded to make it
+    // clear that the heading relates to the content below. Adjust padding to
+    // maintain the height of the element. See
+    // https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
     .govuk-accordion__section--expanded .govuk-accordion__section-button {
       padding-bottom: govuk-spacing(3);
       border-bottom: 0;
@@ -269,8 +271,8 @@
       }
     }
 
-    // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
-    // Styling adds some spacing
+    // As Chevron icon is vertically aligned it overlaps with the focus state
+    // bottom border – this adds some spacing
     .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
       padding-bottom: 3px;
 
@@ -299,9 +301,9 @@
       color: $govuk-link-colour;
     }
 
-    // Add space between the icon and text.
-    // Avoid applying spacing directly to the icon as the use of `transform` will change the
-    // placement of any margins.
+    // Add space between the icon and text. Avoid applying spacing directly to
+    // the icon as the use of `transform` will change the placement of any
+    // margins.
     .govuk-accordion__show-all-text,
     .govuk-accordion__section-toggle-text {
       margin-left: govuk-spacing(1);
@@ -310,23 +312,25 @@
 
     // Background colour adjustment when user changes colours in Firefox
     //
-    // When user changes colours in Firefox, text colour inside <button> is always black
-    // (regardless of the custom colours the user has set). This is fine when the text in the
-    // button is not nested inside another element because when user changes colours in Firefox,
-    // the immediate background colour of buttons is always white (again, regardless of user's
-    // custom colours).
+    // When user changes colours in Firefox, text colour inside <button> is
+    // always black (regardless of the custom colours the user has set). This is
+    // fine when the text in the button is not nested inside another element
+    // because when user changes colours in Firefox, the immediate background
+    // colour of buttons is always white (again, regardless of user's custom
+    // colours).
     //
-    // However, when the text inside <button> is wrapped inside another element AND that element
-    // sets a background colour, the text colour is still black but the background of that nested
-    // element gets the user's custom background colour. When the custom background is a lighter
-    // hue, the contrast might be sufficient. But if the user's custom background colour is a
-    // darker colour, the contrast with the text might not be sufficient.
+    // However, when the text inside <button> is wrapped inside another element
+    // AND that element sets a background colour, the text colour is still black
+    // but the background of that nested element gets the user's custom
+    // background colour. When the custom background is a lighter hue, the
+    // contrast might be sufficient. But if the user's custom background colour
+    // is a darker colour, the contrast with the text might not be sufficient.
     //
-    // To ensure sufficient contrast, override the background colour set by the focus state on the
-    // nested elements to be transparent.
+    // To ensure sufficient contrast, override the background colour set by the
+    // focus state on the nested elements to be transparent.
     //
-    // Also override the background colour of the Show/Hide chevrons which set a background colour
-    // on hover.
+    // Also override the background colour of the Show/Hide chevrons which set a
+    // background colour on hover.
     @media screen and (forced-colors: active) {
       .govuk-accordion__show-all:hover,
       .govuk-accordion__section-button:hover {

data/node_modules/govuk-frontend/dist/govuk/components/character-count/_index.scss

@@ -19,10 +19,10 @@
     margin-bottom: 0;
 
     &::after {
-      // Zero-width space that will reserve vertical space when no hint is provided
-      // as:
-      // - setting a min-height is not possible without a magic number
-      //   because the line-height is set by the `govuk-font` call above
+      // Zero-width space that will reserve vertical space when no hint is
+      // provided as:
+      // - setting a min-height is not possible without a magic number because
+      //   the line-height is set by the `govuk-font` call above
       // - using `:empty` is not possible as the hint macro outputs line breaks
       content: "\200B";
     }

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

@@ -159,7 +159,7 @@
   // to be an even number in order to be centred under the 40px checkbox or radio.
   $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
-  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the checkbox
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label
@@ -255,6 +255,11 @@
       padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
     }
 
+    .govuk-checkboxes__divider {
+      width: $govuk-small-checkboxes-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
     // Hover state for small checkboxes.
     //
     // We use a hover state for small checkboxes because the touch target size