govuk_publishing_components 42.0.0 → 43.0.0

data/node_modules/govuk-frontend/dist/govuk/components/pagination/template.njk

@@ -1,70 +1,85 @@
+{% from "../../macros/attributes.njk" import govukAttributes -%}
+
 {% set blockLevel = not params.items and (params.next or params.previous) -%}
 
-<nav class="govuk-pagination {%- if blockLevel %} govuk-pagination--block{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" role="navigation" aria-label="{{ params.landmarkLabel | default("Pagination", true) }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}" {%- endfor %}>
-  {%- if params.previous and params.previous.href -%}
-    <div class="govuk-pagination__prev">
-      <a class="govuk-link govuk-pagination__link" href="{{ params.previous.href }}" rel="prev" {%- for attribute, value in params.previous.attributes %} {{ attribute }}="{{ value }}" {%- endfor %}>
-        <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
-          <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
-        </svg>
-        <span class="govuk-pagination__link-title {%- if blockLevel and not params.previous.labelText %} govuk-pagination__link-title--decorated{% endif %}">
-          {%- if params.previous.html or params.previous.text -%}
-            {{ params.previous.html | safe if params.previous.html else params.previous.text }}
-          {%- else -%}
-            Previous<span class="govuk-visually-hidden"> page</span>
-          {%- endif -%}
-        </span>
-        {%- if params.previous.labelText and blockLevel -%}
-          <span class="govuk-visually-hidden">:</span>
-          <span class="govuk-pagination__link-label">{{ params.previous.labelText }}</span>
-        {%- endif -%}
-      </a>
-    </div>
+{%- set arrowPrevious -%}
+  <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+  </svg>
+{%- endset -%}
+
+{%- set arrowNext -%}
+  <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+  </svg>
+{%- endset -%}
+
+{%- macro _arrowLink(link, type = "next") %}
+  {% set arrowType = arrowPrevious if type == "prev" else arrowNext %}
+  <div class="govuk-pagination__{{ type }}">
+    <a class="govuk-link govuk-pagination__link" href="{{ link.href }}" rel="{{ type }}"
+      {{- govukAttributes(link.attributes) }}>
+      {% if blockLevel or type == "prev" %}
+        {{- arrowType | safe | indent(4, true) }}
+      {% endif %}
+      <span class="govuk-pagination__link-title {%- if blockLevel and not link.labelText %} govuk-pagination__link-title--decorated{% endif %}">
+        {{ caller() | safe | trim }}
+      </span>
+      {% if link.labelText and blockLevel %}
+      <span class="govuk-visually-hidden">:</span>
+      <span class="govuk-pagination__link-label">{{ link.labelText }}</span>
+      {% endif %}
+      {% if not blockLevel and type == "next" %}
+        {{- arrowType | safe | indent(4, true) }}
+      {% endif %}
+    </a>
+  </div>
+{% endmacro -%}
+
+{%- macro _pageItem(item) -%}
+  <li class="govuk-pagination__item {%- if item.current %} govuk-pagination__item--current{% endif %} {%- if item.ellipsis %} govuk-pagination__item--ellipses{% endif %}">
+  {% if item.ellipsis %}
+    &ctdot;
+  {% else %}
+    <a class="govuk-link govuk-pagination__link" href="{{ item.href }}" aria-label="{{ item.visuallyHiddenText | default("Page " + item.number) }}"
+      {%- if item.current %} aria-current="page"{% endif %}
+      {{- govukAttributes(item.attributes) }}>
+      {{ item.number }}
+    </a>
   {% endif %}
+  </li>
+{%- endmacro -%}
 
-  {%- if params.items -%}
-    <ul class="govuk-pagination__list">
-      {%- for item in params.items -%}
-        {%- if item.ellipsis -%}
-          <li class="govuk-pagination__item govuk-pagination__item--ellipses">&ctdot;</li>
-        {%- elseif item.number -%}
-          <li class="govuk-pagination__item {%- if item.current %} govuk-pagination__item--current{% endif %}">
-            <a class="govuk-link govuk-pagination__link" href="{{ item.href }}" aria-label="{{ item.visuallyHiddenText | default("Page " + item.number) }}" {%- if item.current %} aria-current="page" {%- endif -%} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}" {%- endfor %}>
-              {{ item.number }}
-            </a>
-          </li>
-        {%- endif -%}
-      {%- endfor -%}
-    </ul>
-  {%- endif -%}
+<nav class="govuk-pagination {%- if blockLevel %} govuk-pagination--block{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" aria-label="{{ params.landmarkLabel | default("Pagination", true) }}"
+  {{- govukAttributes(params.attributes) }}>
+  {% set previous = params.previous %}
+  {% set next = params.next %}
 
-  {%- if params.next and params.next.href -%}
-    {%- set nextArrow -%}
-      <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
-        <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
-      </svg>
-    {%- endset -%}
+  {%- if previous and previous.href %}
+    {% call _arrowLink(previous, "prev") %}
+      {% if previous.html or previous.text %}
+        {{ previous.html | safe | trim | indent(8) if previous.html else previous.text }}
+      {% else %}
+        Previous<span class="govuk-visually-hidden"> page</span>
+      {% endif %}
+    {% endcall %}
+  {%- endif %}
 
-    <div class="govuk-pagination__next">
-      <a class="govuk-link govuk-pagination__link" href="{{ params.next.href }}" rel="next" {%- for attribute, value in params.next.attributes %} {{ attribute }}="{{ value }}" {%- endfor %}>
-        {%- if blockLevel -%}
-          {{- nextArrow | safe -}}
-        {%- endif %}
-        <span class="govuk-pagination__link-title {%- if blockLevel and not params.next.labelText %} govuk-pagination__link-title--decorated{% endif %}">
-          {%- if params.next.html or params.next.text -%}
-            {{ params.next.html | safe if params.next.html else params.next.text }}
-          {%- else -%}
-            Next<span class="govuk-visually-hidden"> page</span>
-          {%- endif -%}
-        </span>
-        {%- if params.next.labelText and blockLevel -%}
-          <span class="govuk-visually-hidden">:</span>
-          <span class="govuk-pagination__link-label">{{ params.next.labelText }}</span>
-        {%- endif -%}
-        {%- if not blockLevel -%}
-          {{- nextArrow | safe -}}
-        {%- endif -%}
-      </a>
-    </div>
-  {%- endif -%}
+  {%- if params.items %}
+  <ul class="govuk-pagination__list">
+  {% for item in params.items %}
+    {{ _pageItem(item) | indent(2) }}
+  {% endfor %}
+  </ul>
+  {% endif %}
+
+  {%- if next and next.href %}
+    {% call _arrowLink(next, "next") %}
+      {% if next.html or next.text %}
+        {{ next.html | safe | trim | indent(8) if next.html else next.text }}
+      {% else %}
+        Next<span class="govuk-visually-hidden"> page</span>
+      {% endif %}
+    {% endcall %}
+  {% endif %}
 </nav>

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

@@ -12,19 +12,23 @@
     text-align: center;
 
     @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(3) - $govuk-border-width;
+      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 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.
+      // 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.
+      // 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)
+
+      // Support IE (autoprefixer doesn't add this as it's not a prefix)
+      word-wrap: break-word;
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/panel/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;;IAE9B,sBAAsB;;IAEtB,+BAA+B;IAC/B,+CAA+C;;IAE/C,6CAA6C;;IAE7C,kBAAkB;;IAElB;MACE,+CAA+C;;MAE/C,wFAAwF;MACxF,0EAA0E;MAC1E,0FAA0F;MAC1F,kCAAkC;MAClC,CAAC;MACD,sFAAsF;MACtF,kFAAkF;MAClF,2FAA2F;MAC3F,2DAA2D;MAC3D,yBAAyB;MACzB,qBAAqB,EAAE,iEAAiE;IAC1F;EACF;;EAEA;IACE,4BAA4B;IAC5B,iCAAiC;;IAEjC;MACE,0BAA0B;MAC1B,+BAA+B;MAC/B,gBAAgB;IAClB;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;IACrC,aAAa;IACb,+BAA+B;EACjC;;EAEA;IACE,gBAAgB;EAClB;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/panel\") {\n  .govuk-panel {\n    @include govuk-font($size: 36);\n\n    box-sizing: border-box;\n\n    margin-bottom: govuk-spacing(3);\n    padding: govuk-spacing(7) - $govuk-border-width;\n\n    border: $govuk-border-width solid transparent;\n\n    text-align: center;\n\n    @include govuk-media-query($until: tablet) {\n      padding: govuk-spacing(3) - $govuk-border-width;\n\n      // This is an if-all-else-fails attempt to stop long words from overflowing the container\n      // on very narrow viewports by forcing them to break and wrap instead. This\n      // overflowing is more likely to happen when user increases text size on a mobile eg. using\n      // iOS Safari text resize controls.\n      //\n      // The overflowing is a particular problem with the panel component since it uses white\n      // text: when the text overflows the container, it is invisible on the white (page)\n      // background. When the text in our other components overflow, the user might have to scroll\n      // horizontally to view it but the the text remains legible.\n      overflow-wrap: break-word;\n      word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)\n    }\n  }\n\n  .govuk-panel--confirmation {\n    color: govuk-colour(\"white\");\n    background: govuk-colour(\"green\");\n\n    @include govuk-media-query($media-type: print) {\n      border-color: currentcolor;\n      color: $govuk-print-text-colour;\n      background: none;\n    }\n  }\n\n  .govuk-panel__title {\n    @include govuk-font-size($size: 48);\n    @include govuk-typography-weight-bold;\n    margin-top: 0;\n    margin-bottom: govuk-spacing(6);\n  }\n\n  .govuk-panel__title:last-child {\n    margin-bottom: 0;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/panel/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;;IAE9B,sBAAsB;;IAEtB,+BAA+B;IAC/B,+CAA+C;;IAE/C,6CAA6C;;IAE7C,kBAAkB;;IAElB;MACE,mFAAmF;;MAEnF,8DAA8D;MAC9D,uEAAuE;MACvE,wEAAwE;MACxE,uEAAuE;MACvE,WAAW;MACX,CAAC;MACD,wEAAwE;MACxE,kEAAkE;MAClE,sEAAsE;MACtE,yEAAyE;MACzE,sCAAsC;MACtC,yBAAyB;;MAEzB,iEAAiE;MACjE,qBAAqB;IACvB;EACF;;EAEA;IACE,4BAA4B;IAC5B,iCAAiC;;IAEjC;MACE,0BAA0B;MAC1B,+BAA+B;MAC/B,gBAAgB;IAClB;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;IACrC,aAAa;IACb,+BAA+B;EACjC;;EAEA;IACE,gBAAgB;EAClB;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/panel\") {\n  .govuk-panel {\n    @include govuk-font($size: 36);\n\n    box-sizing: border-box;\n\n    margin-bottom: govuk-spacing(3);\n    padding: govuk-spacing(7) - $govuk-border-width;\n\n    border: $govuk-border-width solid transparent;\n\n    text-align: center;\n\n    @include govuk-media-query($until: tablet) {\n      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;\n\n      // This is an if-all-else-fails attempt to stop long words from\n      // overflowing the container on very narrow viewports by forcing them to\n      // break and wrap instead. This overflowing is more likely to happen when\n      // user increases text size on a mobile eg. using iOS Safari text resize\n      // controls.\n      //\n      // The overflowing is a particular problem with the panel component since\n      // it uses white text: when the text overflows the container, it is\n      // invisible on the white (page) background. When the text in our other\n      // components overflow, the user might have to scroll horizontally to view\n      // it but the the text remains legible.\n      overflow-wrap: break-word;\n\n      // Support IE (autoprefixer doesn't add this as it's not a prefix)\n      word-wrap: break-word;\n    }\n  }\n\n  .govuk-panel--confirmation {\n    color: govuk-colour(\"white\");\n    background: govuk-colour(\"green\");\n\n    @include govuk-media-query($media-type: print) {\n      border-color: currentcolor;\n      color: $govuk-print-text-colour;\n      background: none;\n    }\n  }\n\n  .govuk-panel__title {\n    @include govuk-font-size($size: 48);\n    @include govuk-typography-weight-bold;\n    margin-top: 0;\n    margin-bottom: govuk-spacing(6);\n  }\n\n  .govuk-panel__title:last-child {\n    margin-bottom: 0;\n  }\n}\n"]}

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

@@ -10,6 +10,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n</div>"
         },
         {
@@ -22,6 +23,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h2 class=\"govuk-panel__title\">\n    Application complete\n  </h2>\n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n</div>"
         },
         {
@@ -33,6 +35,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application &lt;strong&gt;not&lt;/strong&gt; complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Please complete form 1\n  </div>\n</div>"
         },
         {
@@ -44,6 +47,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application <strong>not</strong> complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Please complete <strong>form 1</strong>\n  </div>\n</div>"
         },
         {
@@ -55,6 +59,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n  </div>\n</div>"
         },
         {
@@ -66,6 +71,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number<br><strong>HDJ2123F</strong>\n  </div>\n</div>"
         },
         {
@@ -78,6 +84,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n</div>"
         },
         {
@@ -93,6 +100,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"foo\" second-attribute=\"bar\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n</div>"
         },
         {
@@ -103,6 +111,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n</div>"
         }
     ]

data/node_modules/govuk-frontend/dist/govuk/components/panel/template.njk

@@ -1,13 +1,16 @@
-{% set headingLevel = params.headingLevel if params.headingLevel else 1 %}
+{% from "../../macros/attributes.njk" import govukAttributes -%}
+
+{% set headingLevel = params.headingLevel if params.headingLevel else 1 -%}
+
 <div class="govuk-panel govuk-panel--confirmation
   {%- if params.classes %} {{ params.classes }}{% endif %}"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- govukAttributes(params.attributes) }}>
   <h{{ headingLevel }} class="govuk-panel__title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h{{ headingLevel }}>
   {% if caller or params.html or params.text %}
   <div class="govuk-panel__body">
-    {{ caller() if caller else (params.html | safe if params.html else params.text) }}
+    {{ caller() if caller else (params.html | safe | trim | indent(4) if params.html else params.text) }}
   </div>
   {% endif %}
 </div>

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

@@ -0,0 +1,57 @@
+@import "../button/index";
+@import "../input/index";
+
+@include govuk-exports("govuk/component/password-input") {
+  .govuk-password-input__wrapper {
+    // This element inherits styles from .govuk-input__wrapper, including:
+    // - being display: block with contents in a stacked column below the mobile
+    //   breakpoint
+    // - being display: flex above the mobile breakpoint
+
+    @include govuk-media-query($from: mobile) {
+      flex-direction: row;
+
+      // The default of `stretch` makes the toggle button appear taller than the
+      // input, due to using box-shadow, which we don't particularly want in
+      // this situation
+      align-items: flex-start;
+    }
+  }
+
+  .govuk-password-input__input {
+    // IE 11 and Microsoft Edge comes with its own password reveal function. We
+    // want to hide it, so that there aren't two controls presented to the user
+    // that do the same thing but aren't in sync with one another. This doesn't
+    // affect the function that allows Edge users to toggle password visibility
+    // by pressing Alt+F8, which cannot be programmatically disabled.
+    &::-ms-reveal {
+      display: none;
+    }
+  }
+
+  .govuk-password-input__toggle {
+    // Add top margin so the button doesn't obscure the input's focus style
+    margin-top: govuk-spacing(1);
+
+    // Remove default margin-bottom from button
+    margin-bottom: 0;
+
+    // Hide the button by default, JS removes this attribute
+    &[hidden] {
+      display: none;
+    }
+
+    @include govuk-media-query($from: mobile) {
+      // Buttons are normally 100% wide on mobile, but we don't want that here
+      width: auto;
+      flex-shrink: 0;
+      flex-basis: 5em;
+
+      // Move the spacing from top to the left
+      margin-top: 0;
+      margin-left: govuk-spacing(1);
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/govuk/components/password-input/_index.scss"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,wBAAwB;;AAExB;EACE;IACE,qEAAqE;IACrE,2EAA2E;IAC3E,cAAc;IACd,mDAAmD;;IAEnD;MACE,mBAAmB;;MAEnB,yEAAyE;MACzE,qEAAqE;MACrE,gBAAgB;MAChB,uBAAuB;IACzB;EACF;;EAEA;IACE,0EAA0E;IAC1E,0EAA0E;IAC1E,0EAA0E;IAC1E,0EAA0E;IAC1E,gEAAgE;IAChE;MACE,aAAa;IACf;EACF;;EAEA;IACE,sEAAsE;IACtE,4BAA4B;;IAE5B,0CAA0C;IAC1C,gBAAgB;;IAEhB,uDAAuD;IACvD;MACE,aAAa;IACf;;IAEA;MACE,uEAAuE;MACvE,WAAW;MACX,cAAc;MACd,eAAe;;MAEf,uCAAuC;MACvC,aAAa;MACb,6BAA6B;IAC/B;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../button/index\";\n@import \"../input/index\";\n\n@include govuk-exports(\"govuk/component/password-input\") {\n  .govuk-password-input__wrapper {\n    // This element inherits styles from .govuk-input__wrapper, including:\n    // - being display: block with contents in a stacked column below the mobile\n    //   breakpoint\n    // - being display: flex above the mobile breakpoint\n\n    @include govuk-media-query($from: mobile) {\n      flex-direction: row;\n\n      // The default of `stretch` makes the toggle button appear taller than the\n      // input, due to using box-shadow, which we don't particularly want in\n      // this situation\n      align-items: flex-start;\n    }\n  }\n\n  .govuk-password-input__input {\n    // IE 11 and Microsoft Edge comes with its own password reveal function. We\n    // want to hide it, so that there aren't two controls presented to the user\n    // that do the same thing but aren't in sync with one another. This doesn't\n    // affect the function that allows Edge users to toggle password visibility\n    // by pressing Alt+F8, which cannot be programmatically disabled.\n    &::-ms-reveal {\n      display: none;\n    }\n  }\n\n  .govuk-password-input__toggle {\n    // Add top margin so the button doesn't obscure the input's focus style\n    margin-top: govuk-spacing(1);\n\n    // Remove default margin-bottom from button\n    margin-bottom: 0;\n\n    // Hide the button by default, JS removes this attribute\n    &[hidden] {\n      display: none;\n    }\n\n    @include govuk-media-query($from: mobile) {\n      // Buttons are normally 100% wide on mobile, but we don't want that here\n      width: auto;\n      flex-shrink: 0;\n      flex-basis: 5em;\n\n      // Move the spacing from top to the left\n      margin-top: 0;\n      margin-left: govuk-spacing(1);\n    }\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/password-input/_password-input.scss

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

data/node_modules/govuk-frontend/dist/govuk/components/password-input/_password-input.scss.map

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

data/node_modules/govuk-frontend/dist/govuk/components/password-input/fixtures.json

@@ -0,0 +1,196 @@
+{
+    "component": "password-input",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "label": {
+                    "text": "Password"
+                },
+                "id": "password-input",
+                "name": "password"
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"password-input\">\n    Password\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-input\" name=\"password\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "with hint text",
+            "options": {
+                "label": {
+                    "text": "Password"
+                },
+                "hint": {
+                    "text": "It probably has some letters, numbers and maybe even some symbols in it."
+                },
+                "id": "password-input-with-hint-text",
+                "name": "test-name-2"
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"password-input-with-hint-text\">\n    Password\n  </label>\n  <div id=\"password-input-with-hint-text-hint\" class=\"govuk-hint\">\n    It probably has some letters, numbers and maybe even some symbols in it.\n  </div>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-input-with-hint-text\" name=\"test-name-2\" type=\"password\" spellcheck=\"false\" aria-describedby=\"password-input-with-hint-text-hint\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input-with-hint-text\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "with error message",
+            "options": {
+                "label": {
+                    "text": "Password"
+                },
+                "hint": {
+                    "text": "It probably has some letters, numbers and maybe even some symbols in it."
+                },
+                "id": "password-input-with-error-message",
+                "name": "test-name-3",
+                "errorMessage": {
+                    "text": "Error message goes here"
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"password-input-with-error-message\">\n    Password\n  </label>\n  <div id=\"password-input-with-error-message-hint\" class=\"govuk-hint\">\n    It probably has some letters, numbers and maybe even some symbols in it.\n  </div>\n  <p id=\"password-input-with-error-message-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--error\" id=\"password-input-with-error-message\" name=\"test-name-3\" type=\"password\" spellcheck=\"false\" aria-describedby=\"password-input-with-error-message-hint password-input-with-error-message-error\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input-with-error-message\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "with label as page heading",
+            "options": {
+                "label": {
+                    "text": "Password",
+                    "classes": "govuk-label--l",
+                    "isPageHeading": true
+                },
+                "id": "password-input-with-page-heading",
+                "name": "test-name"
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"password-input-with-page-heading\">\n      Password\n    </label>\n  </h1>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-input-with-page-heading\" name=\"test-name\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input-with-page-heading\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "with input width class",
+            "options": {
+                "label": {
+                    "text": "Password"
+                },
+                "id": "password-input-width",
+                "name": "password",
+                "classes": "govuk-input--width-10"
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"password-input-width\">\n    Password\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--width-10\" id=\"password-input-width\" name=\"password\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input-width\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "with new-password autocomplete",
+            "options": {
+                "label": {
+                    "text": "Password"
+                },
+                "autocomplete": "new-password",
+                "id": "password-input-new-password",
+                "name": "password"
+            },
+            "hidden": false,
+            "description": "Supporting browsers and password managers should prompt to generate a password.",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"password-input-new-password\">\n    Password\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-input-new-password\" name=\"password\" type=\"password\" spellcheck=\"false\" autocomplete=\"new-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input-new-password\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "with translations",
+            "options": {
+                "label": {
+                    "text": "Cyfrinair"
+                },
+                "id": "password-translated",
+                "name": "password-translated",
+                "showPasswordText": "Datguddia",
+                "hidePasswordText": "Cuddio",
+                "showPasswordAriaLabelText": "Datgelu cyfrinair",
+                "hidePasswordAriaLabelText": "Cuddio cyfrinair",
+                "passwordShownAnnouncementText": "Mae eich cyfrinair yn weladwy.",
+                "passwordHiddenAnnouncementText": "Mae eich cyfrinair wedi'i guddio."
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\" data-i18n.show-password=\"Datguddia\" data-i18n.hide-password=\"Cuddio\" data-i18n.show-password-aria-label=\"Datgelu cyfrinair\" data-i18n.hide-password-aria-label=\"Cuddio cyfrinair\" data-i18n.password-shown-announcement=\"Mae eich cyfrinair yn weladwy.\" data-i18n.password-hidden-announcement=\"Mae eich cyfrinair wedi&#39;i guddio.\">\n  <label class=\"govuk-label\" for=\"password-translated\">\n    Cyfrinair\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-translated\" name=\"password-translated\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-translated\" aria-label=\"Datgelu cyfrinair\" hidden>\n      Datguddia\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "id": "with-classes",
+                "name": "with-classes",
+                "label": {
+                    "text": "With classes"
+                },
+                "classes": "app-input--custom-modifier"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"with-classes\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "value",
+            "options": {
+                "id": "with-value",
+                "name": "with-value",
+                "label": {
+                    "text": "With value"
+                },
+                "value": "Hunter2"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"with-value\">\n    With value\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"with-value\" name=\"with-value\" type=\"password\" spellcheck=\"false\" value=\"Hunter2\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"with-value\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "id": "with-attributes",
+                "name": "with-attributes",
+                "label": {
+                    "text": "With attributes"
+                },
+                "attributes": {
+                    "data-attribute": "value",
+                    "data-another": "ok"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\" data-attribute=\"value\" data-another=\"ok\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"with-attributes\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
+        {
+            "name": "with describedBy",
+            "options": {
+                "id": "with-describedby",
+                "name": "with-describedby",
+                "label": {
+                    "text": "With describedBy"
+                },
+                "describedBy": "test-target-element"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"password\" spellcheck=\"false\" aria-describedby=\"test-target-element\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"with-describedby\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        }
+    ]
+}