govuk_publishing_components 27.10.5 → 27.14.0

data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json

@@ -3,19 +3,19 @@
         "name": "text",
         "type": "string",
         "required": false,
-        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
+        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to 'Back'."
     },
     {
         "name": "html",
         "type": "string",
         "required": false,
-        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
+        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to 'Back'."
     },
     {
         "name": "href",
         "type": "string",
         "required": true,
-        "description": "The value of the link href attribute."
+        "description": "The value of the link's `href` attribute."
     },
     {
         "name": "classes",

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

@@ -158,10 +158,6 @@
       cursor: default;
     }
 
-    &:focus {
-      outline: none;
-    }
-
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@@ -270,6 +266,9 @@
     -webkit-align-self: center;
         -ms-flex-item-align: center;
             align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   @if $govuk-use-legacy-font {

data/node_modules/govuk-frontend/govuk/components/button/fixtures.json

@@ -37,6 +37,15 @@
             "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n  Disabled link button\n</a>",
             "hidden": false
         },
+        {
+            "name": "start",
+            "options": {
+                "text": "Start now button",
+                "isStartButton": true
+            },
+            "html": "<button class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n  Start now button\n  <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n    <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n  </svg></button>",
+            "hidden": false
+        },
         {
             "name": "start link",
             "options": {

data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json

@@ -3,7 +3,7 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "The id of the textarea."
+        "description": "The ID of the textarea."
     },
     {
         "name": "name",
@@ -66,13 +66,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },
@@ -92,19 +92,19 @@
         "name": "spellcheck",
         "type": "boolean",
         "required": false,
-        "description": "Optional field to enable or disable the spellcheck attribute on the character count."
+        "description": "Optional field to enable or disable the `spellcheck` attribute on the character count."
     },
     {
         "name": "countMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the count message",
+        "description": "Options for the count message.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the count message"
+                "description": "Classes to add to the count message."
             }
         ]
     }

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

@@ -127,6 +127,20 @@
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 

data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json

@@ -30,13 +30,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },
@@ -74,7 +74,7 @@
                 "name": "id",
                 "type": "string",
                 "required": false,
-                "description": "Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
+                "description": "Specific ID attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
             },
             {
                 "name": "name",
@@ -106,19 +106,19 @@
                 "name": "divider",
                 "type": "string",
                 "required": false,
-                "description": "Divider text to separate checkbox items, for example the text \"or\"."
+                "description": "Divider text to separate checkbox items, for example the text 'or'."
             },
             {
                 "name": "checked",
                 "type": "boolean",
                 "required": false,
-                "description": "If true, checkbox will be checked."
+                "description": "If `true`, checkbox will be checked."
             },
             {
                 "name": "conditional",
                 "type": "boolean",
                 "required": false,
-                "description": "If true, content provided will be revealed when the item is checked."
+                "description": "If `true`, content provided will be revealed when the item is checked."
             },
             {
                 "name": "conditional.html",
@@ -130,13 +130,13 @@
                 "name": "behaviour",
                 "type": "string",
                 "required": false,
-                "description": "If set to `exclusive`, implements a \"None of these\" type behaviour via javascript when checkboxes are clicked"
+                "description": "If set to `exclusive`, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked."
             },
             {
                 "name": "disabled",
                 "type": "boolean",
                 "required": false,
-                "description": "If true, checkbox will be disabled."
+                "description": "If `true`, checkbox will be disabled."
             },
             {
                 "name": "attributes",

data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json

@@ -3,7 +3,7 @@
         "name": "ariaLabel",
         "type": "string",
         "required": false,
-        "description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to \"Cookie banner\"."
+        "description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'."
     },
     {
         "name": "hidden",

data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json

@@ -3,7 +3,7 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "This is used for the main component and to compose id attribute for each item."
+        "description": "This is used for the main component and to compose the ID attribute for each item."
     },
     {
         "name": "namePrefix",
@@ -21,7 +21,7 @@
                 "name": "id",
                 "type": "string",
                 "required": false,
-                "description": "Item-specific id. If provided, it will be used instead of the generated id."
+                "description": "Item-specific ID. If provided, it will be used instead of the generated ID."
             },
             {
                 "name": "name",
@@ -45,7 +45,7 @@
                 "name": "autocomplete",
                 "type": "string",
                 "required": false,
-                "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"bday-day\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
+                "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance `bday-day`. See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
             },
             {
                 "name": "pattern",
@@ -85,13 +85,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },

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

@@ -71,7 +71,8 @@
   }
 
   .govuk-details__text {
-    padding: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
     padding-left: govuk-spacing(4);
     border-left: $govuk-border-width solid $govuk-border-colour;
   }

data/node_modules/govuk-frontend/govuk/components/details/macro-options.json

@@ -27,13 +27,13 @@
         "name": "id",
         "type": "string",
         "required": false,
-        "description": "Id to add to the details element."
+        "description": "ID to add to the details element."
     },
     {
         "name": "open",
         "type": "boolean",
         "required": false,
-        "description": "If true, details element will be expanded."
+        "description": "If `true`, details element will be expanded."
     },
     {
         "name": "classes",

data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json

@@ -15,7 +15,7 @@
         "name": "id",
         "type": "string",
         "required": false,
-        "description": "Id attribute to add to the error message span tag."
+        "description": "ID attribute to add to the error message span tag."
     },
     {
         "name": "classes",
@@ -27,12 +27,12 @@
         "name": "attributes",
         "type": "object",
         "required": false,
-        "description": "HTML attributes (for example data attributes) to add to the error message span tag"
+        "description": "HTML attributes (for example data attributes) to add to the error message span tag."
     },
     {
         "name": "visuallyHiddenText",
         "type": "string",
         "required": false,
-        "description": "A visually hidden prefix used before the error message. Defaults to \"Error\"."
+        "description": "A visually hidden prefix used before the error message. Defaults to 'Error'."
     }
 ]

data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json

@@ -65,6 +65,6 @@
         "name": "caller",
         "type": "nunjucks-block",
         "required": false,
-        "description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block."
+        "description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fieldset component in a `call` block."
     }
 ]

data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss

@@ -8,6 +8,7 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
+    max-width: 100%;
     margin-left: -$component-padding;
     padding: $component-padding;
 

data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json

@@ -9,13 +9,13 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "The id of the input"
+        "description": "The ID of the input."
     },
     {
         "name": "value",
         "type": "string",
         "required": false,
-        "description": "Optional initial value of the input"
+        "description": "Optional initial value of the input."
     },
     {
         "name": "describedBy",
@@ -48,13 +48,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },

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

@@ -111,6 +111,9 @@
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   .govuk-footer__licence-description {

data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json

@@ -9,7 +9,7 @@
                 "name": "visuallyHiddenTitle",
                 "type": "string",
                 "required": false,
-                "description": "Title for a meta item section, which defaults to Support links"
+                "description": "Title for a meta item section. Defaults to 'Support links'."
             },
             {
                 "name": "html",
@@ -61,7 +61,7 @@
                 "name": "title",
                 "type": "string",
                 "required": true,
-                "description": "Title for a section"
+                "description": "Title for a section."
             },
             {
                 "name": "columns",

data/node_modules/govuk-frontend/govuk/components/header/macro-options.json

@@ -3,7 +3,7 @@
         "name": "homepageUrl",
         "type": "string",
         "required": false,
-        "description": "The url of the homepage. Defaults to /"
+        "description": "The URL of the homepage. Defaults to `/`"
     },
     {
         "name": "assetsPath",
@@ -15,7 +15,7 @@
         "name": "productName",
         "type": "string",
         "required": false,
-        "description": "Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use serviceName."
+        "description": "Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use `serviceName`."
     },
     {
         "name": "serviceName",
@@ -27,7 +27,7 @@
         "name": "serviceUrl",
         "type": "string",
         "required": false,
-        "description": "Url for the service name anchor."
+        "description": "URL for the service name anchor."
     },
     {
         "name": "navigation",
@@ -51,7 +51,7 @@
                 "name": "href",
                 "type": "string",
                 "required": false,
-                "description": "Url of the navigation item anchor."
+                "description": "URL of the navigation item anchor."
             },
             {
                 "name": "active",
@@ -77,13 +77,13 @@
         "name": "navigationLabel",
         "type": "string",
         "required": false,
-        "description": "Text for the `aria-label` attribute of the navigation. Defaults to \"Navigation menu\"."
+        "description": "Text for the `aria-label` attribute of the navigation. Defaults to 'Navigation menu'."
     },
     {
         "name": "menuButtonLabel",
         "type": "string",
         "required": false,
-        "description": "Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to \"Show or hide navigation menu\"."
+        "description": "Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to 'Show or hide navigation menu'."
     },
     {
         "name": "containerClasses",

data/node_modules/govuk-frontend/govuk/components/hint/macro-options.json

@@ -15,7 +15,7 @@
         "name": "id",
         "type": "string",
         "required": false,
-        "description": "Optional id attribute to add to the hint span tag."
+        "description": "Optional ID attribute to add to the hint span tag."
     },
     {
         "name": "classes",

data/node_modules/govuk-frontend/govuk/components/input/macro-options.json

@@ -3,7 +3,7 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "The id of the input."
+        "description": "The ID of the input."
     },
     {
         "name": "name",
@@ -15,7 +15,7 @@
         "name": "type",
         "type": "string",
         "required": false,
-        "description": "Type of input control to render. Defaults to \"text\"."
+        "description": "Type of input control to render. Defaults to `text`."
     },
     {
         "name": "inputmode",
@@ -98,13 +98,13 @@
                 "name": "text",
                 "type": "string",
                 "required": true,
-                "description": "Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
+                "description": "If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
             },
             {
                 "name": "html",
                 "type": "string",
                 "required": true,
-                "description": "Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
+                "description": "If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
             },
             {
                 "name": "classes",
@@ -124,13 +124,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },
@@ -156,7 +156,7 @@
         "name": "spellcheck",
         "type": "boolean",
         "required": false,
-        "description": "Optional field to enable or disable the spellcheck attribute on the input."
+        "description": "Optional field to enable or disable the `spellcheck` attribute on the input."
     },
     {
         "name": "attributes",

data/node_modules/govuk-frontend/govuk/components/inset-text/macro-options.json

@@ -15,7 +15,7 @@
         "name": "id",
         "type": "string",
         "required": false,
-        "description": "Id attribute to add to the inset text container."
+        "description": "ID attribute to add to the inset text container."
     },
     {
         "name": "classes",

data/node_modules/govuk-frontend/govuk/components/label/macro-options.json

@@ -15,7 +15,7 @@
         "name": "for",
         "type": "string",
         "required": false,
-        "description": "The value of the for attribute, the id of the input the label is associated with."
+        "description": "The value of the `for` attribute, the ID of the input the label is associated with."
     },
     {
         "name": "isPageHeading",

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

@@ -12,7 +12,19 @@
     text-align: center;
 
     @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(6) - $govuk-border-width;
+      padding: govuk-spacing(3) - $govuk-border-width;
+
+      // This is an if-all-else-fails attempt to stop long words from overflowing the container
+      // on very narrow viewports by forcing them to break and wrap instead. This
+      // overflowing is more likely to happen when user increases text size on a mobile eg. using
+      // iOS Safari text resize controls.
+      //
+      // The overflowing is a particular problem with the panel component since it uses white
+      // text: when the text overflows the container, it is invisible on the white (page)
+      // background. When the text in our other components overflow, the user might have to scroll
+      // horizontally to view it but the the text remains legible.
+      overflow-wrap: break-word;
+      word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
     }
   }
 

data/node_modules/govuk-frontend/govuk/components/panel/macro-options.json

@@ -15,7 +15,7 @@
         "name": "headingLevel",
         "type": "integer",
         "required": false,
-        "description": "Heading level, from 1 to 6. Default is 1."
+        "description": "Heading level, from `1` to `6`. Default is `1`."
     },
     {
         "name": "text",

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

@@ -121,6 +121,20 @@
   // Focused state
   .govuk-radios__input:focus + .govuk-radios__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
   }