govuk_tech_docs 6.3.0.beta → 6.3.0

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

@@ -1,56 +1,9 @@
-@import "../../base";
+@use "../../custom-properties";
 
-@import "../error-message/index";
-@import "../hint/index";
-@import "../label/index";
+@use "mixin";
+@use "../error-message";
+@use "../hint";
+@use "../label";
 
-@include govuk-exports("govuk/component/select") {
-  .govuk-select {
-    @include govuk-font($size: 19, $line-height: 1.25);
+@include mixin.styles;
 
-    box-sizing: border-box;
-
-    // This min-width was chosen because:
-    // - it makes the Select wider than it is tall (which is what users expect)
-    // - 11.5em matches the 'length-10' variant of the input component
-    // - it fits comfortably on screens as narrow as 240px wide
-    min-width: 11.5em;
-    max-width: 100%;
-    height: govuk-px-to-rem(40px);
-    padding: govuk-spacing(1);
-    border: $govuk-border-width-form-element solid;
-    border-color: govuk-functional-colour(input-border);
-
-    // Default user agent colours for selects can have low contrast,
-    // and may look disabled (#2435)
-    color: govuk-functional-colour(text);
-    background-color: govuk-colour("white");
-
-    &:focus {
-      @include govuk-focused-form-input;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      color: inherit;
-      cursor: not-allowed;
-    }
-  }
-
-  .govuk-select option:active,
-  .govuk-select option:checked,
-  .govuk-select:focus::-ms-value {
-    color: govuk-colour("white");
-    background-color: govuk-colour("blue");
-  }
-
-  .govuk-select--error {
-    border-color: govuk-functional-colour(error);
-
-    &:focus {
-      border-color: govuk-functional-colour(input-border);
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/select/_mixin.scss

@@ -0,0 +1,52 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-select {
+    @include base.govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box;
+
+    // This min-width was chosen because:
+    // - it makes the Select wider than it is tall (which is what users expect)
+    // - 11.5em matches the 'length-10' variant of the input component
+    // - it fits comfortably on screens as narrow as 240px wide
+    min-width: 11.5em;
+    max-width: 100%;
+    height: base.govuk-px-to-rem(40px);
+    padding: base.govuk-spacing(1);
+    border: base.$govuk-border-width-form-element solid;
+    border-color: base.govuk-functional-colour(input-border);
+
+    // Default user agent colours for selects can have low contrast,
+    // and may look disabled (#2435)
+    color: base.govuk-functional-colour(text);
+    background-color: base.govuk-colour("white");
+
+    &:focus {
+      @include base.govuk-focused-form-input;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      cursor: not-allowed;
+    }
+  }
+
+  .govuk-select option:active,
+  .govuk-select option:checked,
+  .govuk-select:focus::-ms-value {
+    color: base.govuk-colour("white");
+    background-color: base.govuk-colour("blue");
+  }
+
+  .govuk-select--error {
+    border-color: base.govuk-functional-colour(error);
+
+    &:focus {
+      border-color: base.govuk-functional-colour(input-border);
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/select/_select.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("select");
+
+@import "index";
+

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.import.scss

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/service-navigation") {
+  @include mixin.styles;
+}
+

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

@@ -1,237 +1,5 @@
-@use "sass:math";
+@use "../../custom-properties";
+@use "mixin";
 
-@import "../../base";
+@include mixin.styles;
 
-@include govuk-exports("govuk/component/service-navigation") {
-  $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $govuk-service-navigation-text-colour: govuk-functional-colour(surface-text);
-  $govuk-service-navigation-background: govuk-functional-colour(surface-background);
-  $govuk-service-navigation-border-colour: govuk-functional-colour(surface-border);
-
-  .govuk-service-navigation {
-    @include govuk-font($size: 19);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: $govuk-service-navigation-border-colour;
-    color: $govuk-service-navigation-text-colour;
-    background-color: $govuk-service-navigation-background;
-  }
-
-  .govuk-service-navigation__container {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-  }
-
-  // These styles are shared between nav items and the service name, they
-  // ensure that both of them remain vertically aligned with one another
-  .govuk-service-navigation__item,
-  .govuk-service-navigation__service-name {
-    position: relative;
-    margin: govuk-spacing(2) 0;
-
-    // A border matching the link colour is used to mark the active section –
-    // see the `govuk-service-navigation__item--active` class
-    border-width: 0;
-    border-style: solid;
-    border-color: govuk-functional-colour(link);
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      // inline-block is used as a fallback for browsers that don't support flexbox
-      display: inline-block;
-
-      margin-top: 0;
-      margin-bottom: 0;
-      padding: govuk-spacing(3) 0;
-
-      // More magic numbers ahoy:
-      // 29 is the desired height of the element (60), minus top and bottom
-      // padding (2×15), minus bottom border (1); 19 is the font-size at this
-      // point. This gives us the perfect fractional line height to make the
-      // overall component 60px high
-      line-height: math.div(29, 19);
-
-      &:not(:last-child) {
-        @include govuk-responsive-margin(6, $direction: right);
-      }
-    }
-  }
-
-  // Remove the top margin of the first nav item if there is a service name but
-  // there's no menu button (either because it doesn't exist or it's hidden)
-  .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper {
-    .govuk-service-navigation__list:first-child,
-    .govuk-service-navigation__toggle[hidden] + .govuk-service-navigation__list {
-      .govuk-service-navigation__item:first-child {
-        margin-top: 0;
-      }
-    }
-  }
-
-  .govuk-service-navigation__item--active {
-    @media #{govuk-until-breakpoint(tablet)} {
-      // Negative offset the left margin so we can place a current page indicator
-      // to the left without misaligning the list item text.
-      margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
-      padding-left: govuk-spacing(2);
-      border-left-width: $govuk-service-navigation-active-link-border-width;
-    }
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      padding-bottom: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width;
-      border-bottom-width: $govuk-service-navigation-active-link-border-width;
-    }
-  }
-
-  .govuk-service-navigation__link {
-    @include govuk-link-common;
-    @include govuk-link-style-no-underline;
-    @include govuk-link-style-no-visited-state;
-  }
-
-  //
-  // Service name specific code
-  //
-
-  .govuk-service-navigation__service-name {
-    @include govuk-typography-weight-bold;
-  }
-
-  // Annoyingly this requires a compound selector in order to overcome the
-  // specificity of the other link colour override we're doing
-  .govuk-service-navigation__service-name .govuk-service-navigation__link {
-    @include govuk-link-style-text;
-  }
-
-  // Allow navigation section to always take up maximum available space,
-  // rather than sizing to fit the content. This makes it easier to right align
-  // nav items and use slots.
-  .govuk-service-navigation__wrapper {
-    flex-grow: 1;
-  }
-
-  //
-  // Navigation list specific code
-  //
-
-  .govuk-service-navigation__toggle {
-    @include govuk-font($size: 19, $weight: bold);
-    display: inline-flex;
-    margin: govuk-spacing(2) 0;
-    padding: 0;
-    border: 0;
-    color: govuk-functional-colour(link);
-    background: none;
-    word-break: break-all;
-    cursor: pointer;
-    align-items: center;
-
-    &:focus {
-      @include govuk-focused-text;
-    }
-
-    &::after {
-      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
-      content: "";
-      margin-left: govuk-spacing(1);
-    }
-
-    &[aria-expanded="true"]::after {
-      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
-    }
-
-    // Ensure the button stays hidden if the hidden attribute is present
-    &[hidden] {
-      display: none;
-    }
-
-    // If we have both a service name and navigation toggle, remove the
-    // margin-top so that there isn't a bunch of space between them
-    .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper & {
-      margin-top: 0;
-    }
-  }
-
-  .govuk-service-navigation__list {
-    margin: 0;
-    margin-bottom: govuk-spacing(3);
-    padding: 0;
-    list-style: none;
-
-    // Make the navigation list a flexbox. Doing so resolves a couple of
-    // accessibility problems caused by the list items being inline-blocks:
-    // - Removes the extra whitespace from between each list item that screen
-    //   readers would pointlessly announce.
-    // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
-    //   all of the links as a run-on sentence.
-    @media #{govuk-from-breakpoint(tablet)} {
-      display: flex;
-      flex-wrap: wrap;
-      margin-bottom: 0;
-
-      // However... IE11 totally trips over flexbox and doesn't wrap anything,
-      // making all of the items into a single, horizontally scrolling row,
-      // which is no good. This CSS hack removes the flexbox definition for
-      // IE 9–11, reverting it to the flawed, but OK, non-flexbox version.
-      //
-      // CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64
-      @media screen and (min-width: 0\0) {
-        display: block;
-      }
-    }
-  }
-
-  // This is a <strong> element that is used as a fallback mechanism for
-  // visually indicating the current page in scenarios where CSS isn't
-  // available. We don't actually want it to be bold normally, so set it to
-  // inherit the parent font-weight.
-  .govuk-service-navigation__active-fallback {
-    font-weight: inherit;
-  }
-
-  // Inverted colour scheme style intended for product pages
-  .govuk-service-navigation--inverse {
-    // Remove bottom border to add width-container ones
-    border-bottom: none;
-
-    // Set colour here so non-link text (service name, slot content) can
-    // use it too.
-    color: govuk-colour("white");
-
-    background-color: govuk-functional-colour(brand);
-
-    .govuk-width-container {
-      border-width: 1px 0;
-      border-style: solid;
-      border-color: $govuk-service-navigation-border-colour;
-    }
-
-    // Subtract 1px of space to account for the extra border-top
-    .govuk-service-navigation__container {
-      margin-top: -1px;
-    }
-
-    // Override the 'active' border colour
-    .govuk-service-navigation__item,
-    .govuk-service-navigation__service-name {
-      border-color: govuk-colour("white");
-    }
-
-    // Override link styles
-    .govuk-service-navigation__link {
-      @include govuk-link-style-inverse;
-    }
-
-    // Override mobile menu toggle colour when not focused
-    .govuk-service-navigation__toggle:not(:focus) {
-      color: currentcolor;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_mixin.scss

@@ -0,0 +1,237 @@
+@use "sass:math";
+
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  $govuk-service-navigation-active-link-border-width: base.govuk-spacing(1);
+  $govuk-service-navigation-text-colour: base.govuk-functional-colour(surface-text);
+  $govuk-service-navigation-background: base.govuk-functional-colour(surface-background);
+  $govuk-service-navigation-border-colour: base.govuk-functional-colour(surface-border);
+
+  .govuk-service-navigation {
+    @include base.govuk-font($size: 19);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: $govuk-service-navigation-border-colour;
+    color: $govuk-service-navigation-text-colour;
+    background-color: $govuk-service-navigation-background;
+  }
+
+  .govuk-service-navigation__container {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  // These styles are shared between nav items and the service name, they
+  // ensure that both of them remain vertically aligned with one another
+  .govuk-service-navigation__item,
+  .govuk-service-navigation__service-name {
+    position: relative;
+    margin: base.govuk-spacing(2) 0;
+
+    // A border matching the link colour is used to mark the active section –
+    // see the `govuk-service-navigation__item--active` class
+    border-width: 0;
+    border-style: solid;
+    border-color: base.govuk-functional-colour(link);
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      // inline-block is used as a fallback for browsers that don't support flexbox
+      display: inline-block;
+
+      margin-top: 0;
+      margin-bottom: 0;
+      padding: base.govuk-spacing(3) 0;
+
+      // More magic numbers ahoy:
+      // 29 is the desired height of the element (60), minus top and bottom
+      // padding (2×15), minus bottom border (1); 19 is the font-size at this
+      // point. This gives us the perfect fractional line height to make the
+      // overall component 60px high
+      line-height: math.div(29, 19);
+
+      &:not(:last-child) {
+        @include base.govuk-responsive-margin(6, $direction: right);
+      }
+    }
+  }
+
+  // Remove the top margin of the first nav item if there is a service name but
+  // there's no menu button (either because it doesn't exist or it's hidden)
+  .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper {
+    .govuk-service-navigation__list:first-child,
+    .govuk-service-navigation__toggle[hidden] + .govuk-service-navigation__list {
+      .govuk-service-navigation__item:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .govuk-service-navigation__item--active {
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      // Negative offset the left margin so we can place a current page indicator
+      // to the left without misaligning the list item text.
+      margin-left: ((base.govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
+      padding-left: base.govuk-spacing(2);
+      border-left-width: $govuk-service-navigation-active-link-border-width;
+    }
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      padding-bottom: base.govuk-spacing(3) - $govuk-service-navigation-active-link-border-width;
+      border-bottom-width: $govuk-service-navigation-active-link-border-width;
+    }
+  }
+
+  .govuk-service-navigation__link {
+    @include base.govuk-link-common;
+    @include base.govuk-link-style-no-underline;
+    @include base.govuk-link-style-no-visited-state;
+  }
+
+  //
+  // Service name specific code
+  //
+
+  .govuk-service-navigation__service-name {
+    @include base.govuk-typography-weight-bold;
+  }
+
+  // Annoyingly this requires a compound selector in order to overcome the
+  // specificity of the other link colour override we're doing
+  .govuk-service-navigation__service-name .govuk-service-navigation__link {
+    @include base.govuk-link-style-text;
+  }
+
+  // Allow navigation section to always take up maximum available space,
+  // rather than sizing to fit the content. This makes it easier to right align
+  // nav items and use slots.
+  .govuk-service-navigation__wrapper {
+    flex-grow: 1;
+  }
+
+  //
+  // Navigation list specific code
+  //
+
+  .govuk-service-navigation__toggle {
+    @include base.govuk-font($size: 19, $weight: bold);
+    display: inline-flex;
+    align-items: center;
+    margin: base.govuk-spacing(2) 0;
+    padding: 0;
+    border: 0;
+    color: base.govuk-functional-colour(link);
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+
+    &:focus {
+      @include base.govuk-focused-text;
+    }
+
+    &::after {
+      @include base.govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+      content: "";
+      margin-left: base.govuk-spacing(1);
+    }
+
+    &[aria-expanded="true"]::after {
+      @include base.govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
+    // Ensure the button stays hidden if the hidden attribute is present
+    &[hidden] {
+      display: none;
+    }
+
+    // If we have both a service name and navigation toggle, remove the
+    // margin-top so that there isn't a bunch of space between them
+    .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper & {
+      margin-top: 0;
+    }
+  }
+
+  .govuk-service-navigation__list {
+    margin: 0;
+    margin-bottom: base.govuk-spacing(3);
+    padding: 0;
+    list-style: none;
+
+    // Make the navigation list a flexbox. Doing so resolves a couple of
+    // accessibility problems caused by the list items being inline-blocks:
+    // - Removes the extra whitespace from between each list item that screen
+    //   readers would pointlessly announce.
+    // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
+    //   all of the links as a run-on sentence.
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      // However... IE11 totally trips over flexbox and doesn't wrap anything,
+      // making all of the items into a single, horizontally scrolling row,
+      // which is no good. This CSS hack removes the flexbox definition for
+      // IE 9–11, reverting it to the flawed, but OK, non-flexbox version.
+      //
+      // CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64
+      @media screen and (min-width: 0\0) {
+        display: block;
+      }
+    }
+  }
+
+  // This is a <strong> element that is used as a fallback mechanism for
+  // visually indicating the current page in scenarios where CSS isn't
+  // available. We don't actually want it to be bold normally, so set it to
+  // inherit the parent font-weight.
+  .govuk-service-navigation__active-fallback {
+    font-weight: inherit;
+  }
+
+  // Inverted colour scheme style intended for product pages
+  .govuk-service-navigation--inverse {
+    // Remove bottom border to add width-container ones
+    border-bottom: none;
+
+    // Set colour here so non-link text (service name, slot content) can
+    // use it too.
+    color: base.govuk-colour("white");
+
+    background-color: base.govuk-functional-colour(brand);
+
+    .govuk-width-container {
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: $govuk-service-navigation-border-colour;
+    }
+
+    // Subtract 1px of space to account for the extra border-top
+    .govuk-service-navigation__container {
+      margin-top: -1px;
+    }
+
+    // Override the 'active' border colour
+    .govuk-service-navigation__item,
+    .govuk-service-navigation__service-name {
+      border-color: base.govuk-colour("white");
+    }
+
+    // Override link styles
+    .govuk-service-navigation__link {
+      @include base.govuk-link-style-inverse;
+    }
+
+    // Override mobile menu toggle colour when not focused
+    .govuk-service-navigation__toggle:not(:focus) {
+      color: currentcolor;
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_service-navigation.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("service-navigation");
+
+@import "index";
+

data/node_modules/govuk-frontend/dist/govuk/components/skip-link/_index.import.scss

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/skip-link") {
+  @include mixin.styles;
+}
+

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

@@ -1,60 +1,5 @@
-@use "sass:string";
+@use "../../custom-properties";
+@use "mixin";
 
-@import "../../base";
+@include mixin.styles;
 
-@include govuk-exports("govuk/component/skip-link") {
-  .govuk-skip-link {
-    @include govuk-visually-hidden-focusable;
-    @include govuk-link-decoration;
-    @include govuk-link-style-text;
-    @include govuk-font($size: 16);
-
-    display: block;
-    padding: govuk-spacing(2) govuk-spacing(3);
-
-    // Respect 'display cutout' safe area (avoids notches and rounded corners)
-    @supports (padding: string.unquote("max(calc(0px))")) {
-      $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
-      $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
-
-      // Use max() to pick largest padding, default or with safe area
-      // Escaped due to Sass max() vs. CSS native max()
-      padding-right: string.unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
-      padding-left: string.unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
-    }
-
-    &:focus {
-      outline: $govuk-focus-width solid;
-      outline-color: govuk-functional-colour(focus);
-      outline-offset: 0;
-      background-color: govuk-functional-colour(focus);
-
-      @media (forced-colors: active) {
-        outline-offset: (0 - $govuk-focus-width);
-      }
-
-      // Undo unwanted changes when global styles are enabled
-      @if $govuk-global-styles {
-        @include govuk-link-decoration;
-        box-shadow: none;
-      }
-    }
-  }
-
-  .govuk-skip-link-focused-element {
-    &:focus {
-      // Remove the native visible focus indicator when the element is
-      // programmatically focused.
-      //
-      // We set the focus on the linked element (this is usually the <main>
-      // element) when the skip link is activated to improve screen reader
-      // announcements. However, we remove the visible focus indicator from the
-      // linked element because the user cannot interact with it.
-      //
-      // A related discussion: https://github.com/w3c/wcag/issues/1001
-      outline: none;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */