@communitiesuk/svelte-component-library 0.1.18 → 0.2.0-alpha.2

package/dist/components/ui/Breadcrumbs.svelte

@@ -1,198 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { page } from "$app/stores";
-
-  /**
-   * Breadcrumbs component
-   *
-   * Use this component to display a navigation path to the current page.
-   *
-   * Features:
-   * - Automatically generates breadcrumbs based on the current route
-   * - Set `collapseOnMobile` to true to show only the first and last items on mobile devices
-   * - Set `inverse` to true to show white links on dark backgrounds (ensure contrast ratio of 4.5:1)
-   * - Optionally provide custom items array to override automatic breadcrumb generation
-   */
-
-  // Define the BreadcrumbItem type
-  export type BreadcrumbItem = {
-    text: string;
-    href: string;
-  };
-
-  // Component props
-  let {
-    items = undefined,
-    collapseOnMobile = false,
-    inverse = false,
-    ariaLabel = "Breadcrumb",
-  } = $props<{
-    items?: BreadcrumbItem[];
-    collapseOnMobile?: boolean;
-    inverse?: boolean;
-    ariaLabel?: string;
-  }>();
-
-  // Load all page modules for route detection
-  const routeModules = $state<Record<string, any>>({});
-
-  onMount(async () => {
-    try {
-      // Use Vite's glob import to get all page components
-      const modules = import.meta.glob("/src/routes/**/+page.svelte", {
-        eager: true,
-      });
-      Object.assign(routeModules, modules);
-    } catch (error) {
-      console.warn("Failed to load route modules:", error);
-    }
-  });
-
-  // Add support detection
-  let isSupported = $state(false);
-  onMount(() => {
-    isSupported =
-      document.body?.classList.contains("govuk-frontend-supported") ?? false;
-  });
-
-  // State variable to hold the current breadcrumb items
-  let breadcrumbItems = $state<BreadcrumbItem[]>([]);
-
-  // Effect to update breadcrumb items when dependencies change
-  $effect(() => {
-    breadcrumbItems = items || generateBreadcrumbItems($page, routeModules);
-  });
-
-  // Generate breadcrumb items from the current route
-  function generateBreadcrumbItems(page, modules): BreadcrumbItem[] {
-    const path = page.url.pathname;
-    const pathSegments = path.split("/").filter((segment) => segment !== "");
-
-    // Always include home page
-    const items: BreadcrumbItem[] = [{ text: "Home", href: "/" }];
-
-    // Build up paths for each breadcrumb
-    let currentPath = "";
-
-    for (let i = 0; i < pathSegments.length; i++) {
-      currentPath += `/${pathSegments[i]}`;
-
-      // Check if this path has a corresponding +page.svelte file
-      const isValidRoute = isPathValid(currentPath, modules);
-
-      // Add breadcrumb if it's a valid route or the current page
-      if (isValidRoute || i === pathSegments.length - 1) {
-        // Try to get custom title from module exports
-        const customTitle = getCustomTitle(currentPath, modules, page.data);
-
-        // Format text (convert slug to readable text)
-        const text = customTitle || formatBreadcrumbText(pathSegments[i]);
-
-        items.push({
-          text: text,
-          href: currentPath,
-        });
-      }
-    }
-
-    return items;
-  }
-
-  // Check if a path has a corresponding page component
-  function isPathValid(path: string, modules: Record<string, any>): boolean {
-    // For the root path
-    if (path === "/") return true;
-
-    // Normalize the path to check against module paths
-    const modulePath = `/src/routes${path}/+page.svelte`;
-    const dynamicModulePaths = Object.keys(modules).filter((m) => {
-      // Convert dynamic route patterns like [id] to regex pattern that matches :id or actual values
-      const pattern = m.replace(/\[([^\]]+)\]/g, "([^/]+)");
-      const regex = new RegExp(
-        `^${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`,
-      );
-      return regex.test(modulePath);
-    });
-
-    return dynamicModulePaths.length > 0;
-  }
-
-  // Try to get custom title from module exports
-  function getCustomTitle(
-    path: string,
-    modules: Record<string, any>,
-    pageData: any,
-  ): string | null {
-    const modulePath = `/src/routes${path}/+page.svelte`;
-
-    // Check for exact match first
-    if (modules[modulePath]) {
-      // Check if module exports pageTitle
-      if (modules[modulePath].pageTitle) {
-        return modules[modulePath].pageTitle;
-      }
-
-      // Check if module exports getPageTitle function
-      if (typeof modules[modulePath].getPageTitle === "function") {
-        return modules[modulePath].getPageTitle(pageData);
-      }
-    }
-
-    // Check for dynamic routes
-    const dynamicModulePath = Object.keys(modules).find((m) => {
-      const pattern = m.replace(/\[([^\]]+)\]/g, "([^/]+)");
-      const regex = new RegExp(
-        `^${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`,
-      );
-      return regex.test(modulePath);
-    });
-
-    if (dynamicModulePath && modules[dynamicModulePath]) {
-      if (modules[dynamicModulePath].pageTitle) {
-        return modules[dynamicModulePath].pageTitle;
-      }
-
-      if (typeof modules[dynamicModulePath].getPageTitle === "function") {
-        return modules[dynamicModulePath].getPageTitle(pageData);
-      }
-    }
-
-    return null;
-  }
-
-  /**
-   * Converts route segments to human-readable text
-   */
-  function formatBreadcrumbText(text: string): string {
-    // Handle special cases
-    if (text === "ui") return "UI Components";
-    if (text === "data-vis") return "Data Visualization";
-    if (text === "content") return "Content Components";
-    if (text === "layout") return "Layout Components";
-    if (text === "user-guide") return "User Guide";
-    if (text === "playground") return "Playground";
-    if (text === "components") return "Components";
-    if (text === "local-lib") return "Local Library";
-
-    // Default: capitalize and replace hyphens with spaces
-    return text
-      .split("-")
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(" ");
-  }
-</script>
-
-<nav
-  class="govuk-breadcrumbs
-    {collapseOnMobile ? 'govuk-breadcrumbs--collapse-on-mobile' : ''} 
-    {inverse ? 'govuk-breadcrumbs--inverse' : ''}"
-  aria-label={ariaLabel}
->
-  <ol class="govuk-breadcrumbs__list">
-    {#each breadcrumbItems as item}
-      <li class="govuk-breadcrumbs__list-item">
-        <a class="govuk-breadcrumbs__link" href={item.href}>{item.text}</a>
-      </li>
-    {/each}
-  </ol>
-</nav>

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

@@ -1,24 +0,0 @@
-/**
- * Breadcrumbs component
- *
- * Use this component to display a navigation path to the current page.
- *
- * Features:
- * - Automatically generates breadcrumbs based on the current route
- * - Set `collapseOnMobile` to true to show only the first and last items on mobile devices
- * - Set `inverse` to true to show white links on dark backgrounds (ensure contrast ratio of 4.5:1)
- * - Optionally provide custom items array to override automatic breadcrumb generation
- */
-export type BreadcrumbItem = {
-    text: string;
-    href: string;
-};
-type $$ComponentProps = {
-    items?: BreadcrumbItem[];
-    collapseOnMobile?: boolean;
-    inverse?: boolean;
-    ariaLabel?: string;
-};
-declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
-type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
-export default Breadcrumbs;

package/dist/components/ui/Footer.svelte

@@ -1,171 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-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

@@ -1,43 +0,0 @@
-<!-- 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

@@ -1,7 +0,0 @@
-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/ServiceNavigation.svelte

@@ -1,143 +0,0 @@
-<!-- Service Navigation component 
-Use the component with or without navigation items based on your needs. -->
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
-
-  // Define types for navigation items
-  type NavigationItem = {
-    href: string;
-    label: string;
-    isActive?: boolean;
-  };
-
-  let {
-    serviceName = "Service name",
-    serviceUrl = "#",
-    navigationItems = undefined,
-  } = $props<{
-    serviceName?: string;
-    serviceUrl?: string;
-    navigationItems?: NavigationItem[];
-  }>();
-
-  // Reactive state declarations
-  let hasNavigation = $derived(navigationItems && navigationItems.length > 0);
-  let menuIsOpen = $state(false);
-  let isDesktopView = $state(true); // Default to desktop view until we can check
-  let tabletBreakpoint = $state("");
-
-  // References to DOM elements
-  let navigationElement = $state<HTMLElement | null>(null);
-  let buttonElement = $state<HTMLButtonElement | null>(null);
-
-  // Derived values for UI state
-  let isMenuVisible = $derived(isDesktopView || menuIsOpen);
-  let isButtonHidden = $derived(isDesktopView);
-
-  onMount(() => {
-    if (!browser) return;
-
-    // Get the breakpoint from CSS custom property
-    const property = "--govuk-frontend-breakpoint-tablet";
-    const value = window
-      .getComputedStyle(document.documentElement)
-      .getPropertyValue(property)
-      .trim();
-
-    tabletBreakpoint = value || "768px";
-
-    if (!value) {
-      console.warn(
-        "CSS custom property (--govuk-frontend-breakpoint-tablet) not found, using fallback",
-      );
-    }
-
-    // Initialize media query
-    const mql = window.matchMedia(`(min-width: ${tabletBreakpoint})`);
-
-    // Set initial state
-    isDesktopView = mql.matches;
-
-    // Set up event listener for viewport changes
-    const handleViewportChange = (e: MediaQueryListEvent) => {
-      isDesktopView = e.matches;
-      if (isDesktopView) {
-        // Reset menu state when switching to desktop
-        menuIsOpen = false;
-      }
-    };
-
-    mql.addEventListener("change", handleViewportChange);
-
-    return () => {
-      mql.removeEventListener("change", handleViewportChange);
-    };
-  });
-
-  // Handle menu button click
-  function toggleMenu() {
-    menuIsOpen = !menuIsOpen;
-  }
-</script>
-
-<section
-  aria-label="Service information"
-  class="govuk-service-navigation"
-  data-module="govuk-service-navigation"
->
-  <div class="govuk-width-container">
-    <div class="govuk-service-navigation__container">
-      <span class="govuk-service-navigation__service-name">
-        <a href={serviceUrl} class="govuk-service-navigation__link">
-          {serviceName}
-        </a>
-      </span>
-
-      {#if hasNavigation}
-        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
-          <button
-            type="button"
-            class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
-            aria-controls="navigation"
-            aria-expanded={menuIsOpen}
-            onclick={toggleMenu}
-            bind:this={buttonElement}
-            hidden={isButtonHidden}
-          >
-            Menu
-          </button>
-          <ul
-            class="govuk-service-navigation__list"
-            id="navigation"
-            bind:this={navigationElement}
-            hidden={!isMenuVisible}
-          >
-            {#each navigationItems as item}
-              <li
-                class="govuk-service-navigation__item{item.isActive
-                  ? ' govuk-service-navigation__item--active'
-                  : ''}"
-              >
-                <a
-                  class="govuk-service-navigation__link"
-                  href={item.href}
-                  aria-current={item.isActive ? "true" : undefined}
-                >
-                  {#if item.isActive}
-                    <strong class="govuk-service-navigation__active-fallback"
-                      >{item.label}</strong
-                    >
-                  {:else}
-                    {item.label}
-                  {/if}
-                </a>
-              </li>
-            {/each}
-          </ul>
-        </nav>
-      {/if}
-    </div>
-  </div>
-</section>

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

@@ -1,13 +0,0 @@
-type NavigationItem = {
-    href: string;
-    label: string;
-    isActive?: boolean;
-};
-type $$ComponentProps = {
-    serviceName?: string;
-    serviceUrl?: string;
-    navigationItems?: NavigationItem[];
-};
-declare const ServiceNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
-type ServiceNavigation = ReturnType<typeof ServiceNavigation>;
-export default ServiceNavigation;