govuk_publishing_components 39.2.4 → 40.0.0

data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/fixtures.json

@@ -0,0 +1,90 @@
+{
+    "component": "phase-banner",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "tag": {
+                    "text": "Alpha"
+                },
+                "html": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      Alpha\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it.\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "text": "This is a new service – your feedback will help us to improve it",
+                "classes": "extra-class one-more-class"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-phase-banner extra-class one-more-class\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "text",
+            "options": {
+                "text": "This is a new service – your feedback will help us to improve it"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service - your &lt;a href=&quot;#&quot; class=&quot;govuk-link&quot;&gt;feedback&lt;/a&gt; will help us to improve it.\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "text": "This is a new service – your feedback will help us to improve it",
+                "attributes": {
+                    "first-attribute": "foo",
+                    "second-attribute": "bar"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-phase-banner\" first-attribute=\"foo\" second-attribute=\"bar\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "tag html",
+            "options": {
+                "text": "This is a new service – your feedback will help us to improve it",
+                "tag": {
+                    "html": "<em>Alpha</em>"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      <em>Alpha</em>\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "tag classes",
+            "options": {
+                "text": "This is a new service – your feedback will help us to improve it",
+                "tag": {
+                    "classes": "govuk-tag--grey",
+                    "text": "Alpha"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag govuk-tag--grey\">\n      Alpha\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
+        }
+    ]
+}

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

@@ -0,0 +1,33 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the phase banner. If `html` is provided, the `text` option will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the phase banner. If `html` is provided, the `text` option will be ignored."
+    },
+    {
+        "name": "tag",
+        "type": "object",
+        "required": true,
+        "description": "The tag used by the phase banner component.",
+        "isComponent": true
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the phase banner container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the phase banner container."
+    }
+]

data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/template-default.html

@@ -0,0 +1,10 @@
+<div class="govuk-phase-banner">
+  <p class="govuk-phase-banner__content">
+    <strong class="govuk-tag govuk-phase-banner__content__tag">
+      Alpha
+    </strong>
+    <span class="govuk-phase-banner__text">
+      This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.
+    </span>
+  </p>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/template.njk

@@ -0,0 +1,15 @@
+{% from "../tag/macro.njk" import govukTag -%}
+
+<div class="govuk-phase-banner
+  {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <p class="govuk-phase-banner__content">
+    {{ govukTag({
+      text: params.tag.text,
+      html: params.tag.html,
+      classes: "govuk-phase-banner__content__tag" + (" " + params.tag.classes if params.tag.classes)
+    }) | trim | indent(4) }}
+    <span class="govuk-phase-banner__text">
+      {{ params.html | safe if params.html else params.text }}
+    </span>
+  </p>
+</div>

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

@@ -0,0 +1,323 @@
+@import "../error-message/index";
+@import "../fieldset/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/radios") {
+  $govuk-touch-target-gutter: 4px;
+  $govuk-radios-size: 40px;
+  $govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);
+  $govuk-small-radios-size: 24px;
+  $govuk-radios-label-padding-left-right: govuk-spacing(3);
+  // When the default focus width is used on a curved edge it looks visually smaller.
+  // So for the circular radios we bump the default to make it look visually consistent.
+  $govuk-radios-focus-width: $govuk-focus-width + 1px;
+
+  .govuk-radios__item {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-radios__item:last-child,
+  .govuk-radios__item:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .govuk-radios__input {
+    width: $govuk-touch-target-size;
+    height: $govuk-touch-target-size;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .govuk-radios__label {
+    align-self: center;
+
+    // Ensure that the width of the label is never more than the width of the
+    // container minus the input width minus the padding on either side of
+    // the label. This prevents the label from going onto the next line due to
+    // __item using flex-wrap because we want hints on a separate line
+    max-width: calc(100% - ($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3)));
+    margin-bottom: 0;
+    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);
+    cursor: pointer;
+    // remove 300ms pause on mobile
+    touch-action: manipulation;
+  }
+
+  // ( ) Radio ring
+  .govuk-radios__label::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: ($govuk-touch-target-gutter / 2);
+    left: ($govuk-touch-target-gutter / 2);
+    width: $govuk-radios-size;
+    height: $govuk-radios-size;
+    border: $govuk-border-width-form-element solid currentcolor;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  //  •  Radio button
+  //
+  // We create the 'button' entirely out of 'border' so that they remain
+  // 'filled' even when colours are overridden in the browser.
+  .govuk-radios__label::after {
+    $radio-button-size: govuk-spacing(2);
+
+    content: "";
+    position: absolute;
+
+    // Positioned by getting half the touch target, so we have the centre of the
+    // input, and then moving back by the button's border width, thus positioning
+    // the centre of the button in the centre of the input.
+    top: (($govuk-touch-target-size / 2) - $radio-button-size);
+    left: (($govuk-touch-target-size / 2) - $radio-button-size);
+    width: 0;
+    height: 0;
+    border: $radio-button-size solid currentcolor;
+    border-radius: 50%;
+    opacity: 0;
+    background: currentcolor;
+  }
+
+  .govuk-radios__hint {
+    display: block;
+    width: 100%;
+    margin-top: govuk-spacing(-1);
+    padding-right: $govuk-radios-label-padding-left-right;
+    padding-left: ($govuk-radios-label-padding-left-right + $govuk-touch-target-size);
+  }
+
+  // This is to bypass govuk-hint's specificity on hints following labels having
+  // a margin bottom of 10px (govuk-spacing(2)). Because radios are flexbox,
+  // the margin doesn't collapse so we have to do this manually.
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-radios__hint {
+    margin-bottom: 0;
+  }
+
+  // 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;
+  }
+
+  // Selected state
+  .govuk-radios__input:checked + .govuk-radios__label::after {
+    opacity: 1;
+  }
+
+  // Disabled state
+  .govuk-radios__input:disabled,
+  .govuk-radios__input:disabled + .govuk-radios__label {
+    cursor: not-allowed;
+  }
+
+  .govuk-radios__input:disabled + .govuk-radios__label,
+  .govuk-radios__input:disabled ~ .govuk-hint {
+    opacity: 0.5;
+  }
+
+  // =========================================================
+  // Inline radios
+  // =========================================================
+
+  .govuk-radios--inline {
+    @include govuk-media-query($from: tablet) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+
+      .govuk-radios__item {
+        margin-right: govuk-spacing(4);
+      }
+    }
+  }
+
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-radios__divider {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    $govuk-divider-size: $govuk-radios-size !default;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
+  // =========================================================
+  // Conditional reveals
+  // =========================================================
+
+  // The narrow border is used in the conditional reveals because the border has
+  // 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 radios.
+  $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
+  // Move the border centered with the radios
+  $conditional-margin-left: $conditional-border-padding;
+  // Move the contents of the conditional inline with the label
+  $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right;
+
+  .govuk-radios__conditional {
+    @include govuk-responsive-margin(4, "bottom");
+    margin-left: $conditional-margin-left;
+    padding-left: $conditional-padding-left;
+    border-left: $conditional-border-width solid $govuk-border-colour;
+
+    .govuk-frontend-supported &--hidden {
+      display: none;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // =========================================================
+  // Small checkboxes
+  // =========================================================
+
+  .govuk-radios--small {
+    $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
+
+    .govuk-radios__item {
+      margin-bottom: 0;
+    }
+
+    // Shift the touch target into the left margin so that the visible edge of
+    // the control is aligned
+    //
+    //   ┆Which colour is your favourite?
+    //  ┌┆───┐
+    //  │┆() │ Purple
+    //  └┆▲──┘
+    //  ▲┆└─ Radio pseudo element, aligned with margin
+    //  └─── Touch target (invisible input), shifted into the margin
+    .govuk-radios__input {
+      margin-left: $input-offset * -1;
+    }
+
+    .govuk-radios__label {
+      // Create a tiny space between the small radio hover state so that it
+      // doesn't clash with the label
+      padding-left: 1px;
+    }
+
+    // ( ) Radio ring
+    //
+    // Reduce the size of the control [1], vertically centering it within the
+    // touch target [2]
+    // Left here is 0 because we've shifted the input into the left margin
+    .govuk-radios__label::before {
+      top: $input-offset; // 2
+      left: 0;
+      width: $govuk-small-radios-size; // 1
+      height: $govuk-small-radios-size; // 1
+    }
+
+    //  •  Radio button
+    //
+    // Reduce the size of the 'button' and center it within the ring
+    .govuk-radios__label::after {
+      $radio-button-size: govuk-spacing(1);
+
+      // The same calculation as normal radio buttons but reduce the border width
+      top: (($govuk-touch-target-size / 2) - $radio-button-size);
+      left: ((($govuk-touch-target-size / 2) - $radio-button-size) - $input-offset);
+      border-width: $radio-button-size;
+    }
+
+    // Fix position of hint with small radios
+    //
+    // Do not use hints with small radios – because they're within the input
+    // wrapper they trigger the hover state, but clicking them doesn't actually
+    // activate the control.
+    //
+    // (If you do use them, they won't look completely broken... but seriously,
+    // don't use them)
+    .govuk-radios__hint {
+      padding-left: ($govuk-small-radios-size + $input-offset);
+    }
+
+    // Align conditional reveals with small radios
+    .govuk-radios__conditional {
+      $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
+      margin-left: $margin-left;
+      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
+    }
+
+    .govuk-radios__divider {
+      width: $govuk-small-radios-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
+    // Hover state for small radios.
+    //
+    // We use a hover state for small radios because the touch target size
+    // is so much larger than their visible size, and so we need to provide
+    // feedback to the user as to which radio they will select when their
+    // cursor is outside of the visible area.
+    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+      // Forced colours modes tend to ignore box-shadow.
+      // Apply an outline for those modes to use instead.
+      outline: $govuk-radios-focus-width dashed transparent;
+      outline-offset: 1px;
+      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+    }
+
+    // Because we've overridden the border-shadow provided by the focus state,
+    // we need to redefine that too.
+    //
+    // We use two box shadows, one that restores the original focus state [1]
+    // and another that then applies the hover state [2].
+    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+      // Set different HCM colour when we have both hover/focus applied at once
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        outline-color: Highlight;
+      }
+      // prettier-ignore
+      box-shadow:
+        0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,
+        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+    }
+
+    // For devices that explicitly don't support hover, don't provide a hover
+    // state (e.g. on touch devices like iOS).
+    //
+    // We can't use `@media (hover: hover)` because we wouldn't get the hover
+    // state in browsers that don't support `@media (hover)` (like Internet
+    // Explorer) – so we have to 'undo' the hover state instead.
+    @media (hover: none), (pointer: coarse) {
+      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+        box-shadow: initial;
+      }
+
+      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+        box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/govuk/components/radios/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../fieldset/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/radios\") {\n  $govuk-touch-target-gutter: 4px;\n  $govuk-radios-size: 40px;\n  $govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);\n  $govuk-small-radios-size: 24px;\n  $govuk-radios-label-padding-left-right: govuk-spacing(3);\n  // When the default focus width is used on a curved edge it looks visually smaller.\n  // So for the circular radios we bump the default to make it look visually consistent.\n  $govuk-radios-focus-width: $govuk-focus-width + 1px;\n\n  .govuk-radios__item {\n    display: flex;\n    flex-wrap: wrap;\n    position: relative;\n    margin-bottom: govuk-spacing(2);\n  }\n\n  .govuk-radios__item:last-child,\n  .govuk-radios__item:last-of-type {\n    margin-bottom: 0;\n  }\n\n  .govuk-radios__input {\n    width: $govuk-touch-target-size;\n    height: $govuk-touch-target-size;\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .govuk-radios__label {\n    align-self: center;\n\n    // Ensure that the width of the label is never more than the width of the\n    // container minus the input width minus the padding on either side of\n    // the label. This prevents the label from going onto the next line due to\n    // __item using flex-wrap because we want hints on a separate line\n    max-width: calc(100% - ($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3)));\n    margin-bottom: 0;\n    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);\n    cursor: pointer;\n    // remove 300ms pause on mobile\n    touch-action: manipulation;\n  }\n\n  // ( ) Radio ring\n  .govuk-radios__label::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    top: ($govuk-touch-target-gutter / 2);\n    left: ($govuk-touch-target-gutter / 2);\n    width: $govuk-radios-size;\n    height: $govuk-radios-size;\n    border: $govuk-border-width-form-element solid currentcolor;\n    border-radius: 50%;\n    background: transparent;\n  }\n\n  //  •  Radio button\n  //\n  // We create the 'button' entirely out of 'border' so that they remain\n  // 'filled' even when colours are overridden in the browser.\n  .govuk-radios__label::after {\n    $radio-button-size: govuk-spacing(2);\n\n    content: \"\";\n    position: absolute;\n\n    // Positioned by getting half the touch target, so we have the centre of the\n    // input, and then moving back by the button's border width, thus positioning\n    // the centre of the button in the centre of the input.\n    top: (($govuk-touch-target-size / 2) - $radio-button-size);\n    left: (($govuk-touch-target-size / 2) - $radio-button-size);\n    width: 0;\n    height: 0;\n    border: $radio-button-size solid currentcolor;\n    border-radius: 50%;\n    opacity: 0;\n    background: currentcolor;\n  }\n\n  .govuk-radios__hint {\n    display: block;\n    width: 100%;\n    margin-top: govuk-spacing(-1);\n    padding-right: $govuk-radios-label-padding-left-right;\n    padding-left: ($govuk-radios-label-padding-left-right + $govuk-touch-target-size);\n  }\n\n  // This is to bypass govuk-hint's specificity on hints following labels having\n  // a margin bottom of 10px (govuk-spacing(2)). Because radios are flexbox,\n  // the margin doesn't collapse so we have to do this manually.\n  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-radios__hint {\n    margin-bottom: 0;\n  }\n\n  // Focused state\n  .govuk-radios__input:focus + .govuk-radios__label::before {\n    border-width: 4px;\n\n    // When colours are overridden, the yellow box-shadow becomes invisible\n    // which means the focus state is less obvious. By adding a transparent\n    // outline, which becomes solid (text-coloured) in that context, we ensure\n    // the focus remains clearly visible.\n    outline: $govuk-focus-width solid transparent;\n    outline-offset: 1px;\n\n    // When in an explicit forced-color mode, we can use the Highlight system\n    // color for the outline to better match focus states of native controls\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      outline-color: Highlight;\n    }\n\n    box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;\n  }\n\n  // Selected state\n  .govuk-radios__input:checked + .govuk-radios__label::after {\n    opacity: 1;\n  }\n\n  // Disabled state\n  .govuk-radios__input:disabled,\n  .govuk-radios__input:disabled + .govuk-radios__label {\n    cursor: not-allowed;\n  }\n\n  .govuk-radios__input:disabled + .govuk-radios__label,\n  .govuk-radios__input:disabled ~ .govuk-hint {\n    opacity: 0.5;\n  }\n\n  // =========================================================\n  // Inline radios\n  // =========================================================\n\n  .govuk-radios--inline {\n    @include govuk-media-query($from: tablet) {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: flex-start;\n\n      .govuk-radios__item {\n        margin-right: govuk-spacing(4);\n      }\n    }\n  }\n\n  // =========================================================\n  // Dividers ('or')\n  // =========================================================\n\n  .govuk-radios__divider {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    $govuk-divider-size: $govuk-radios-size !default;\n    width: $govuk-divider-size;\n    margin-bottom: govuk-spacing(2);\n    text-align: center;\n  }\n\n  // =========================================================\n  // Conditional reveals\n  // =========================================================\n\n  // The narrow border is used in the conditional reveals because the border has\n  // to be an even number in order to be centred under the 40px checkbox or radio.\n  $conditional-border-width: $govuk-border-width-narrow;\n  // Calculate the amount of padding needed to keep the border centered against the radios.\n  $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);\n  // Move the border centered with the radios\n  $conditional-margin-left: $conditional-border-padding;\n  // Move the contents of the conditional inline with the label\n  $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right;\n\n  .govuk-radios__conditional {\n    @include govuk-responsive-margin(4, \"bottom\");\n    margin-left: $conditional-margin-left;\n    padding-left: $conditional-padding-left;\n    border-left: $conditional-border-width solid $govuk-border-colour;\n\n    .govuk-frontend-supported &--hidden {\n      display: none;\n    }\n\n    & > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  // =========================================================\n  // Small checkboxes\n  // =========================================================\n\n  .govuk-radios--small {\n    $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;\n\n    .govuk-radios__item {\n      margin-bottom: 0;\n    }\n\n    // Shift the touch target into the left margin so that the visible edge of\n    // the control is aligned\n    //\n    //   ┆Which colour is your favourite?\n    //  ┌┆───┐\n    //  │┆() │ Purple\n    //  └┆▲──┘\n    //  ▲┆└─ Radio pseudo element, aligned with margin\n    //  └─── Touch target (invisible input), shifted into the margin\n    .govuk-radios__input {\n      margin-left: $input-offset * -1;\n    }\n\n    .govuk-radios__label {\n      // Create a tiny space between the small radio hover state so that it\n      // doesn't clash with the label\n      padding-left: 1px;\n    }\n\n    // ( ) Radio ring\n    //\n    // Reduce the size of the control [1], vertically centering it within the\n    // touch target [2]\n    // Left here is 0 because we've shifted the input into the left margin\n    .govuk-radios__label::before {\n      top: $input-offset; // 2\n      left: 0;\n      width: $govuk-small-radios-size; // 1\n      height: $govuk-small-radios-size; // 1\n    }\n\n    //  •  Radio button\n    //\n    // Reduce the size of the 'button' and center it within the ring\n    .govuk-radios__label::after {\n      $radio-button-size: govuk-spacing(1);\n\n      // The same calculation as normal radio buttons but reduce the border width\n      top: (($govuk-touch-target-size / 2) - $radio-button-size);\n      left: ((($govuk-touch-target-size / 2) - $radio-button-size) - $input-offset);\n      border-width: $radio-button-size;\n    }\n\n    // Fix position of hint with small radios\n    //\n    // Do not use hints with small radios – because they're within the input\n    // wrapper they trigger the hover state, but clicking them doesn't actually\n    // activate the control.\n    //\n    // (If you do use them, they won't look completely broken... but seriously,\n    // don't use them)\n    .govuk-radios__hint {\n      padding-left: ($govuk-small-radios-size + $input-offset);\n    }\n\n    // Align conditional reveals with small radios\n    .govuk-radios__conditional {\n      $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);\n      margin-left: $margin-left;\n      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);\n    }\n\n    .govuk-radios__divider {\n      width: $govuk-small-radios-size;\n      margin-bottom: govuk-spacing(1);\n    }\n\n    // Hover state for small radios.\n    //\n    // We use a hover state for small radios because the touch target size\n    // is so much larger than their visible size, and so we need to provide\n    // feedback to the user as to which radio they will select when their\n    // cursor is outside of the visible area.\n    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {\n      // Forced colours modes tend to ignore box-shadow.\n      // Apply an outline for those modes to use instead.\n      outline: $govuk-radios-focus-width dashed transparent;\n      outline-offset: 1px;\n      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;\n    }\n\n    // Because we've overridden the border-shadow provided by the focus state,\n    // we need to redefine that too.\n    //\n    // We use two box shadows, one that restores the original focus state [1]\n    // and another that then applies the hover state [2].\n    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {\n      // Set different HCM colour when we have both hover/focus applied at once\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        outline-color: Highlight;\n      }\n      // prettier-ignore\n      box-shadow:\n        0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,\n        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2\n    }\n\n    // For devices that explicitly don't support hover, don't provide a hover\n    // state (e.g. on touch devices like iOS).\n    //\n    // We can't use `@media (hover: hover)` because we wouldn't get the hover\n    // state in browsers that don't support `@media (hover)` (like Internet\n    // Explorer) – so we have to 'undo' the hover state instead.\n    @media (hover: none), (pointer: coarse) {\n      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {\n        box-shadow: initial;\n      }\n\n      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {\n        box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;\n      }\n    }\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/radios/_radios.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_radios.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/radios/_radios.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/govuk/components/radios/_radios.scss"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,iBAAiB","file":"_radios.scss","sourcesContent":["@import \"../../base\";\n@import \"./index\";\n"]}