@communitiesuk/svelte-component-library 0.1.17

package/dist/components/ui/Footer.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  // Define component props with default values
+  // sections: array of footer navigation sections
+  // inlineLinks: array of inline footer links
+  // metaCustomContent: custom HTML content for meta section
+  // containerWidth: width class for the container
+  // showLicence: toggle for OGL license display
+  // showCopyright: toggle for crown copyright display
+  // copyrightLogoUrl: URL for the crown copyright logo background image (overrides the default CSS background-image)
+  // copyrightText: Text to display for the crown copyright notice
+  // crownSvgPath: SVG path data for the crown logo used in the license section
+  // licenceHref: URL for the Open Government Licence link
+  // licenceLinkText: Text for the Open Government Licence link
+  // licenceTextBefore: Text to display before the licence link
+  // licenceTextAfter: Text to display after the licence link
+  // copyrightHref: URL for the crown copyright link
+
+  // Define types for component props
+  interface FooterItem {
+    href: string;
+    label: string;
+    lang?: string;
+    hrefLang?: string;
+  }
+
+  interface FooterSection {
+    title: string;
+    columns?: number;
+    items: FooterItem[];
+  }
+
+  // Define component props with types and default values
+  let {
+    sections = [] as FooterSection[],
+    inlineLinks = [] as FooterItem[],
+    metaCustomContent = "",
+    containerWidth = "govuk-width-container",
+    showLicence = true,
+    showCopyright = true,
+    copyrightLogoUrl = "/assets/images/govuk-crest.svg",
+    copyrightText = "© Crown copyright",
+    crownSvgPath = "M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145",
+    licenceHref = "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/",
+    licenceLinkText = "Open Government Licence v3.0",
+    licenceTextBefore = "All content is available under the ",
+    licenceTextAfter = ", except where otherwise stated",
+    copyrightHref = "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/",
+  } = $props<{
+    sections?: FooterSection[];
+    inlineLinks?: FooterItem[];
+    metaCustomContent?: string;
+    containerWidth?: string;
+    showLicence?: boolean;
+    showCopyright?: boolean;
+    copyrightLogoUrl?: string;
+    copyrightText?: string;
+    crownSvgPath?: string;
+    licenceHref?: string;
+    licenceLinkText?: string;
+    licenceTextBefore?: string;
+    licenceTextAfter?: string;
+    copyrightHref?: string;
+  }>();
+</script>
+
+<!-- Main footer container -->
+<footer class="govuk-footer">
+  <div class={containerWidth}>
+    <!-- Navigation sections (optional) -->
+    {#if sections.length > 0}
+      <div class="govuk-footer__navigation">
+        <!-- Iterate through each footer section -->
+        {#each sections as section}
+          <div
+            class="govuk-footer__section {section.columns === 2
+              ? 'govuk-grid-column-two-thirds'
+              : 'govuk-grid-column-one-third'}"
+          >
+            <h2 class="govuk-footer__heading govuk-heading-m">
+              {section.title}
+            </h2>
+            <ul
+              class="govuk-footer__list {section.columns === 2
+                ? 'govuk-footer__list--columns-2'
+                : ''}"
+            >
+              {#each section.items as item}
+                <li class="govuk-footer__list-item">
+                  <a
+                    class="govuk-footer__link"
+                    href={item.href}
+                    lang={item.lang}
+                    hreflang={item.hrefLang}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/each}
+      </div>
+      <hr class="govuk-footer__section-break" />
+    {/if}
+
+    <!-- Footer meta section -->
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+        <!-- Inline links section (optional) -->
+        {#if inlineLinks.length > 0}
+          <h2 class="govuk-visually-hidden">Support links</h2>
+          <ul class="govuk-footer__inline-list">
+            {#each inlineLinks as link}
+              <li class="govuk-footer__inline-list-item">
+                <a
+                  class="govuk-footer__link"
+                  href={link.href}
+                  lang={link.lang}
+                  hreflang={link.hrefLang}
+                >
+                  {link.label}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+
+        <!-- Custom meta content (optional) -->
+        {#if metaCustomContent}
+          <div class="govuk-footer__meta-custom">
+            {@html metaCustomContent}
+          </div>
+        {/if}
+
+        <!-- Open Government License section (optional) -->
+        {#if showLicence}
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            class="govuk-footer__licence-logo"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 483.2 195.7"
+            height="17"
+            width="41"
+          >
+            <path fill="currentColor" d={crownSvgPath}></path>
+          </svg>
+          <span class="govuk-footer__licence-description">
+            {licenceTextBefore}
+            <a class="govuk-footer__link" href={licenceHref} rel="license"
+              >{licenceLinkText}</a
+            >{licenceTextAfter}
+          </span>
+        {/if}
+      </div>
+
+      <!-- Crown copyright section (optional) -->
+      {#if showCopyright}
+        <div class="govuk-footer__meta-item">
+          <a
+            class="govuk-footer__link govuk-footer__copyright-logo"
+            href={copyrightHref}
+            style="background-image: url({copyrightLogoUrl});"
+          >
+            {copyrightText}
+          </a>
+        </div>
+      {/if}
+    </div>
+  </div>
+</footer>

package/dist/components/ui/Footer.svelte.d.ts

@@ -0,0 +1,30 @@
+interface FooterItem {
+    href: string;
+    label: string;
+    lang?: string;
+    hrefLang?: string;
+}
+interface FooterSection {
+    title: string;
+    columns?: number;
+    items: FooterItem[];
+}
+type $$ComponentProps = {
+    sections?: FooterSection[];
+    inlineLinks?: FooterItem[];
+    metaCustomContent?: string;
+    containerWidth?: string;
+    showLicence?: boolean;
+    showCopyright?: boolean;
+    copyrightLogoUrl?: string;
+    copyrightText?: string;
+    crownSvgPath?: string;
+    licenceHref?: string;
+    licenceLinkText?: string;
+    licenceTextBefore?: string;
+    licenceTextAfter?: string;
+    copyrightHref?: string;
+};
+declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/ui/Header.svelte

@@ -0,0 +1,43 @@
+<!-- Default GOV.UK header
+Most services on GOV.UK should use the default GOV.UK header.
+
+It should only show the GOV.UK logo and any GOV.UK-wide links and tools to help your users. Do not add the menu of GOV.UK topic links to your service's GOV.UK header. -->
+
+<script lang="ts">
+  let { fullWidthBorder = false, homepageUrl = "/" } = $props<{
+    fullWidthBorder?: boolean;
+    homepageUrl?: string;
+  }>();
+</script>
+
+<header
+  class="govuk-header{fullWidthBorder
+    ? ' govuk-header--full-width-border'
+    : ''}"
+  data-module="govuk-header"
+>
+  <div class="govuk-header__container govuk-width-container">
+    <div class="govuk-header__logo">
+      <a
+        href={homepageUrl}
+        class="govuk-header__link govuk-header__link--homepage"
+      >
+        <svg
+          focusable="false"
+          role="img"
+          class="govuk-header__logotype"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 148 30"
+          height="30"
+          width="148"
+          aria-label="GOV.UK"
+        >
+          <title>GOV.UK</title>
+          <path
+            d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"
+          ></path>
+        </svg>
+      </a>
+    </div>
+  </div>
+</header>

package/dist/components/ui/Header.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    fullWidthBorder?: boolean;
+    homepageUrl?: string;
+};
+declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/ui/Masthead.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+  import homepageIllustration from "../../assets/images/homepage-illustration.svg";
+
+  // Define component props with types and default values
+  let {
+    title = "Design your service using GOV.UK styles, components and patterns",
+    description = "Use this design system to make government services consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that's already been done.",
+    buttonText = "Get started",
+    buttonHref = "/get-started/",
+    imageSrc = homepageIllustration,
+    imageAlt = "",
+    backgroundColor = "#1d70b8", // GOV.UK blue by default
+  } = $props<{
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    buttonHref?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    backgroundColor?: string;
+  }>();
+</script>
+
+<div
+  class="app-masthead"
+  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor};"
+>
+  <div class="govuk-width-container">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds-from-desktop">
+        <h1 class="govuk-heading-xl app-masthead__title">{@html title}</h1>
+        <p class="app-masthead__description">{description}</p>
+
+        <a
+          href={buttonHref}
+          role="button"
+          draggable="false"
+          class="govuk-button govuk-button--inverse govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-button--start"
+          data-module="govuk-button"
+        >
+          {buttonText}
+          <svg
+            class="govuk-button__start-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="17.5"
+            height="19"
+            viewBox="0 0 33 40"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+          </svg>
+        </a>
+      </div>
+
+      <div class="govuk-grid-column-one-third-from-desktop">
+        <img
+          class="app-masthead__image"
+          src={imageSrc}
+          alt={imageAlt}
+          role="presentation"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Ensure our masthead styles take precedence over global GOV.UK styles using specificity */
+  .app-masthead.app-masthead {
+    /* @include govuk-responsive-padding(6, "top"); */
+    padding-top: 20px;
+    /* @include govuk-responsive-padding(6, "bottom"); */
+    padding-bottom: 20px;
+    /* border-bottom: 1px solid govuk-colour("blue"); - now set via inline style */
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    /* color: govuk-colour("white"); */
+    color: #ffffff;
+    /* background-color: govuk-colour("blue"); - now set via inline style */
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-masthead.app-masthead {
+      /* Responsive spacing unit 6: 30px on large screens */
+      padding-top: 30px;
+      padding-bottom: 30px;
+    }
+  }
+
+  .app-masthead .app-masthead__title.app-masthead__title {
+    /* color: govuk-colour("white"); */
+    color: #ffffff;
+    /* @include govuk-responsive-margin(6, "bottom"); */
+    margin-bottom: 20px;
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-masthead .app-masthead__title.app-masthead__title {
+      /* Responsive spacing unit 6: 30px on large screens */
+      margin-bottom: 30px;
+    }
+  }
+
+  .app-masthead .app-masthead__description.app-masthead__description {
+    /* @include govuk-font(24); - Font size 24 from the typography scale */
+    font-family: "GDS Transport", arial, sans-serif;
+    font-weight: 400;
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.25;
+    margin-bottom: 0;
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-masthead .app-masthead__description.app-masthead__description {
+      font-size: 1.5rem; /* 24px */
+      line-height: 1.25;
+    }
+  }
+
+  .app-masthead .app-masthead__image.app-masthead__image {
+    display: none;
+  }
+
+  /* @include govuk-media-query($from: desktop) - Desktop breakpoint is 769px */
+  @media (min-width: 48.0625em) {
+    .app-masthead .app-masthead__image.app-masthead__image {
+      display: block;
+      width: 100%;
+      /* margin-top: govuk-spacing(3); - Static spacing unit 3 is 15px */
+      margin-top: 15px;
+    }
+  }
+
+  /* GOV.UK Button Styles - Scoped to our component with high specificity */
+  .app-masthead .govuk-button.govuk-button {
+    /* @include govuk-font($size: 19, $line-height: 19px); */
+    font-family: "GDS Transport", arial, sans-serif;
+    font-weight: 400;
+    font-size: 1.1875rem; /* 19px */
+    line-height: 1.1875; /* 19px line height */
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
+    margin-bottom: 1.375rem; /* 22px - adjusted for shadow */
+    /* Padding calculation: govuk-spacing(2) - border-width - shadow adjustment */
+    padding: 0.4375rem 0.625rem 0.3125rem; /* 7px 10px 5px */
+    border: 0.125rem solid transparent; /* 2px border */
+    border-radius: 0;
+    color: #ffffff; /* $govuk-button-text-colour */
+    background-color: #00703c; /* $govuk-button-colour (green) */
+    box-shadow: 0 0.125rem 0 #002d18; /* 2px shadow */
+    text-align: center;
+    vertical-align: top;
+    cursor: pointer;
+    text-decoration: none;
+    -webkit-appearance: none;
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-masthead .govuk-button.govuk-button {
+      width: auto;
+      margin-bottom: 1.375rem;
+    }
+  }
+
+  /* Link states for buttons */
+  .app-masthead .govuk-button.govuk-button:link,
+  .app-masthead .govuk-button.govuk-button:visited,
+  .app-masthead .govuk-button.govuk-button:active {
+    color: #ffffff;
+    text-decoration: none;
+  }
+
+  .app-masthead .govuk-button.govuk-button:hover {
+    background-color: #005a30; /* $govuk-button-hover-colour */
+    box-shadow: 0 0.25rem 0 #002d18; /* 4px shadow on hover */
+    color: #ffffff;
+    text-decoration: none;
+  }
+
+  .app-masthead .govuk-button.govuk-button:active {
+    top: 0.125rem; /* 2px - button pressed down */
+    box-shadow: 0 0 0 #002d18; /* No shadow when pressed */
+  }
+
+  .app-masthead .govuk-button.govuk-button:focus {
+    border-color: #ffdd00; /* $govuk-focus-colour */
+    outline: 0.1875rem solid transparent; /* 3px */
+    box-shadow: inset 0 0 0 1px #ffdd00;
+  }
+
+  .app-masthead .govuk-button.govuk-button:focus:not(:active):not(:hover) {
+    border-color: #ffdd00;
+    color: #0b0c0c; /* $govuk-focus-text-colour */
+    background-color: #ffdd00;
+    box-shadow: 0 0.125rem 0 #0b0c0c;
+  }
+
+  /* Inverse button styles - white button with blue text */
+  .app-masthead .govuk-button.govuk-button--inverse {
+    background-color: #ffffff; /* $govuk-inverse-button-colour */
+    box-shadow: 0 0.125rem 0 #0b0c0c; /* $govuk-inverse-button-shadow-colour */
+    color: #1d70b8; /* $govuk-inverse-button-text-colour - BLUE text, not white! */
+  }
+
+  .app-masthead .govuk-button.govuk-button--inverse:link,
+  .app-masthead .govuk-button.govuk-button--inverse:visited,
+  .app-masthead .govuk-button.govuk-button--inverse:active {
+    color: #1d70b8; /* Blue text for all states */
+  }
+
+  .app-masthead .govuk-button.govuk-button--inverse:hover {
+    background-color: #f3f2f1; /* $govuk-inverse-button-hover-colour */
+    color: #1d70b8; /* Keep blue text on hover */
+  }
+
+  /* Start button styles */
+  .app-masthead .govuk-button.govuk-button--start {
+    /* @include govuk-typography-weight-bold; @include govuk-font-size($size: 24, $line-height: 1); */
+    font-weight: 700;
+    font-size: 1.5rem; /* 24px */
+    line-height: 1;
+    display: inline-flex;
+    min-height: auto;
+    justify-content: center;
+  }
+
+  .app-masthead .govuk-button .govuk-button__start-icon {
+    /* margin-left: govuk-spacing(1); on mobile, govuk-spacing(2) on desktop */
+    margin-left: 0.3125rem; /* 5px - govuk-spacing(1) */
+    vertical-align: middle;
+    flex-shrink: 0;
+    align-self: center;
+    forced-color-adjust: auto;
+  }
+
+  @media (min-width: 48.0625em) {
+    .app-masthead .govuk-button .govuk-button__start-icon {
+      margin-left: 0.625rem; /* 10px - govuk-spacing(2) */
+    }
+  }
+
+  /* GOV.UK Typography - Scoped to our component with high specificity */
+  .app-masthead .govuk-heading-xl.govuk-heading-xl {
+    color: #ffffff; /* Override to white for masthead */
+    font-family: "GDS Transport", arial, sans-serif;
+    font-weight: 700;
+    font-size: 2rem;
+    line-height: 1.09375;
+    display: block;
+    margin-top: 0;
+    margin-bottom: 1.875rem;
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-masthead .govuk-heading-xl.govuk-heading-xl {
+      font-size: 3rem;
+      line-height: 1.04167;
+      margin-bottom: 3.125rem;
+    }
+  }
+</style>

package/dist/components/ui/Masthead.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    buttonHref?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    backgroundColor?: string;
+};
+declare const Masthead: import("svelte").Component<$$ComponentProps, {}, "">;
+type Masthead = ReturnType<typeof Masthead>;
+export default Masthead;

package/dist/components/ui/NavigationExample.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import HeaderNav from "../layout/service-navigation-nested-mobile/HeaderNav.svelte";
+  import MobileNav from "../layout/service-navigation-nested-mobile/MobileNav.svelte";
+  import SideNav from "../layout/service-navigation-nested-mobile/SideNav.svelte";
+  import { onMount } from "svelte";
+
+  // Example navigation data
+  const topNavItems = [
+    { text: "Get started", href: "/get-started" },
+    { text: "Components", href: "/components", current: true },
+    { text: "Patterns", href: "/patterns" },
+    { text: "Community", href: "/community" },
+  ];
+
+  // Current section
+  let currentSection = $state("Components");
+
+  // Mobile nav sections
+  const mobileNavSections = [
+    {
+      title: "Get started",
+      href: "/get-started",
+      items: [
+        {
+          text: "Accessibility testing",
+          href: "/get-started/accessibility-testing",
+        },
+        { text: "Install DWP Frontend", href: "/get-started/npm" },
+      ],
+    },
+    {
+      title: "Components",
+      href: "/components",
+      current: true,
+      items: [
+        {
+          text: "External service footer",
+          href: "/components/external-service-footer",
+        },
+        { text: "Header navigation", href: "/components/header-navigation" },
+        { text: "Timeline", href: "/components/timeline" },
+      ],
+    },
+    {
+      title: "Patterns",
+      href: "/patterns",
+      items: [
+        {
+          title: "Help users to...",
+          items: [
+            { text: "Add another thing", href: "/patterns/add-another-thing" },
+          ],
+        },
+        {
+          title: "Pages",
+          items: [{ text: "Cookies page", href: "/patterns/cookies-page" }],
+        },
+      ],
+    },
+    {
+      title: "Community",
+      href: "/community",
+      items: [{ text: "Latest updates", href: "/community/latest-updates" }],
+    },
+  ];
+
+  // Side nav items
+  const sideNavItems = [
+    {
+      text: "External service footer",
+      href: "/components/external-service-footer",
+    },
+    { text: "Header navigation", href: "/components/header-navigation" },
+    { text: "Timeline", href: "/components/timeline", current: true },
+  ];
+
+  // Mobile nav state
+  let isMobileNavOpen = $state(false);
+
+  // Handle toggle mobile nav event
+  function handleToggleMobileNav(event: CustomEvent<boolean>) {
+    isMobileNavOpen = event.detail;
+  }
+</script>
+
+<div class="app-pane">
+  <!-- Header with top navigation -->
+  <HeaderNav
+    productName="Design System"
+    logoText="DWP"
+    navigationItems={topNavItems}
+    {currentSection}
+    on:toggleMobileNav={handleToggleMobileNav}
+  />
+
+  <!-- Mobile navigation -->
+  <MobileNav
+    isOpen={isMobileNavOpen}
+    sections={mobileNavSections}
+    {currentSection}
+  />
+
+  <div class="app-pane__body">
+    <!-- Side navigation -->
+    <SideNav
+      title="Pages in this section"
+      items={sideNavItems}
+      currentItem="Timeline"
+    />
+
+    <!-- Main content area would go here -->
+    <div class="app-pane__content">
+      <h1>Example content</h1>
+      <p>This demonstrates the three navigation components working together.</p>
+    </div>
+  </div>
+</div>

package/dist/components/ui/NavigationExample.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const NavigationExample: import("svelte").Component<Record<string, never>, {}, "">;
+type NavigationExample = ReturnType<typeof NavigationExample>;
+export default NavigationExample;