@communitiesuk/svelte-component-library 0.1.19-beta.3 → 0.1.19-beta.34

package/dist/components/ui/Select.svelte

@@ -225,20 +225,31 @@
 
 <style>
   .select-row {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: stretch;
-    -moz-column-gap: 0;
-         column-gap: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.5rem;
+    width: 100%;
   }
 
   .select-cell {
+    flex: 0 1 auto;
     min-width: 0;
+    max-width: 100%;
   }
 
   .select-addon {
     display: flex;
-    align-items: stretch; /* match .choices container height */
-    max-height: 46px;
+    align-items: stretch;
+    flex: 0 0 auto;
+  }
+
+  .govuk-select {
+    max-width: 100%;
+    min-width: 0;
+    padding-right: 2rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 </style>

package/dist/components/ui/Tabs.svelte

@@ -19,12 +19,14 @@
     idPrefix = "tab",
     selectedTabId = $bindable(),
     autoAddHeadings = true,
+    forceTabBehavior = false,
   } = $props<{
     title?: string;
     tabs: TabItem[];
     idPrefix?: string;
     selectedTabId?: string | null;
     autoAddHeadings?: boolean;
+    forceTabBehavior?: boolean;
   }>();
 
   // Component state variables
@@ -32,6 +34,9 @@
   let isSupported = $state(false);
   let isMobile = $state(false);
 
+  // Derived value: use mobile behavior only if isMobile is true AND forceTabBehavior is false
+  let useMobileBehavior = $derived(isMobile && !forceTabBehavior);
+
   // DOM element references for programmatic focus
   let tabElements: { [key: string]: HTMLAnchorElement } = {};
 
@@ -56,7 +61,7 @@
     }
 
     // Update URL hash on non-mobile views
-    if (!isMobile) {
+    if (!useMobileBehavior) {
       // Use history.replaceState to update the displayed URL hash without causing scroll/navigation.
       const currentUrl = window.location.href;
       const hashIndex = currentUrl.indexOf("#");
@@ -67,10 +72,12 @@
     }
   }
 
+  //$inspect(isSupported, "isSupported");
+
   // Handle keyboard navigation
   function handleKeydown(event: KeyboardEvent, currentIndex: number): void {
     // Skip navigation on mobile or if component isn't ready
-    if (isMobile || !isSupported || !isInitialized) return;
+    if (useMobileBehavior || !isSupported || !isInitialized) return;
 
     // Initialize to null, indicating no valid navigation key pressed yet.
     // Will be updated to a valid index (0+) if ArrowLeft/Right is pressed.
@@ -107,7 +114,7 @@
   // Handle tab click
   function handleTabClick(event: MouseEvent, tabId: string): void {
     // On mobile or without JS support, let default browser behavior happen
-    if (isMobile || !isSupported) return;
+    if (useMobileBehavior || !isSupported) return;
     event.preventDefault();
     selectTab(tabId);
   }
@@ -115,7 +122,7 @@
   // Handle hash change
   function handleHashChange(): void {
     // Skip on mobile or when not properly initialized
-    if (isMobile || !isSupported || !isInitialized) return;
+    if (useMobileBehavior || !isSupported || !isInitialized) return;
 
     const hash = window.location.hash.substring(1);
     if (hash && tabs.some((tab) => tab.id === hash)) {
@@ -225,32 +232,45 @@
   });
 </script>
 
-<div class="govuk-tabs" data-module="govuk-tabs">
+<div
+  class="govuk-tabs"
+  data-module="govuk-tabs"
+  data-force-desktop={forceTabBehavior || null}
+>
   <h2 class="govuk-tabs__title">
     {title}
   </h2>
 
   <ul
     class="govuk-tabs__list"
-    role={isSupported && !isMobile ? "tablist" : null}
+    role={isSupported && !useMobileBehavior ? "tablist" : null}
   >
     {#each tabs as tab, index}
       {@const isSelected = selectedTabId === tab.id}
       {#key tab.id}
         <li
           class="govuk-tabs__list-item"
-          class:govuk-tabs__list-item--selected={isSelected && !isMobile}
-          role={isSupported && !isMobile ? "presentation" : null}
+          class:govuk-tabs__list-item--selected={isSelected &&
+            !useMobileBehavior}
+          role={isSupported && !useMobileBehavior ? "presentation" : null}
         >
           <!-- svelte-ignore binding_property_non_reactive -->
           <a
             class="govuk-tabs__tab"
             href={"#" + tab.id}
-            id={isSupported && !isMobile ? `${idPrefix}_${tab.id}` : null}
-            role={isSupported && !isMobile ? "tab" : null}
-            aria-controls={isSupported && !isMobile ? tab.id : null}
-            aria-selected={isSupported && !isMobile ? isSelected : null}
-            tabindex={isSupported && !isMobile ? (isSelected ? 0 : -1) : null}
+            id={isSupported && !useMobileBehavior
+              ? `${idPrefix}_${tab.id}`
+              : null}
+            role={isSupported && !useMobileBehavior ? "tab" : null}
+            aria-controls={isSupported && !useMobileBehavior ? tab.id : null}
+            aria-selected={isSupported && !useMobileBehavior
+              ? isSelected
+              : null}
+            tabindex={isSupported && !useMobileBehavior
+              ? isSelected
+                ? 0
+                : -1
+              : null}
             onclick={(e) => handleTabClick(e, tab.id)}
             onkeydown={(e) => handleKeydown(e, index)}
             bind:this={tabElements[tab.id]}
@@ -266,13 +286,15 @@
     {@const isSelected = selectedTabId === tab.id}
     <div
       class="govuk-tabs__panel"
-      class:govuk-tabs__panel--hidden={!isSelected && isSupported && !isMobile}
+      class:govuk-tabs__panel--hidden={!isSelected &&
+        isSupported &&
+        !useMobileBehavior}
       id={tab.id}
-      role={isSupported && !isMobile ? "tabpanel" : null}
-      aria-labelledby={isSupported && !isMobile
+      role={isSupported && !useMobileBehavior ? "tabpanel" : null}
+      aria-labelledby={isSupported && !useMobileBehavior
         ? `${idPrefix}_${tab.id}`
         : null}
-      hidden={!isSelected && isSupported && !isMobile}
+      hidden={!isSelected && isSupported && !useMobileBehavior}
     >
       {#if autoAddHeadings}
         <h2 class="govuk-heading-l">{tab.label}</h2>
@@ -287,7 +309,8 @@
       {:else if tab.content satisfies Snippet}
         {@render tab.content()}
       {:else if tab.content}
-        <svelte:component this={tab.content} />
+        {@const Component = tab.content}
+        <Component />
       {/if}
     </div>
   {/each}
@@ -303,4 +326,155 @@
   .govuk-tabs__panel--hidden {
     display: none;
   }
+
+  /* 
+   * Force desktop tab appearance when forceTabBehavior is enabled
+   * These styles are copied verbatim from GOV.UK Frontend's desktop (40.0625em+) styles
+   * but applied at mobile breakpoints when data-force-desktop attribute is present
+   */
+  @media (max-width: 40.0624em) {
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list {
+      margin-bottom: 0;
+      border-bottom: 1px solid #b1b4b6;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list:after {
+      content: "";
+      display: block;
+      clear: both;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__title {
+      display: none;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list-item {
+      position: relative;
+      margin-right: 5px;
+      margin-bottom: 0;
+      margin-left: 0;
+      padding: 10px 20px;
+      float: left;
+      background-color: #f3f2f1;
+      text-align: center;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list-item:before {
+      content: none;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list-item--selected {
+      position: relative;
+      margin-top: -5px;
+      margin-bottom: -1px;
+      padding: 14px 19px 16px;
+      border: 1px solid #b1b4b6;
+      border-bottom: 0;
+      background-color: #fff;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list-item--selected
+      .govuk-tabs__tab {
+      text-decoration: none;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab {
+      margin-bottom: 0;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:link,
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:visited {
+      color: #0b0c0c;
+    }
+
+    @media print {
+      :global(.govuk-frontend-supported)
+        .govuk-tabs[data-force-desktop]
+        .govuk-tabs__tab:link,
+      :global(.govuk-frontend-supported)
+        .govuk-tabs[data-force-desktop]
+        .govuk-tabs__tab:visited {
+        color: #000;
+      }
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:hover {
+      color: rgba(11, 12, 12, 0.99);
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:active,
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:focus {
+      color: #0b0c0c;
+    }
+
+    @media print {
+      :global(.govuk-frontend-supported)
+        .govuk-tabs[data-force-desktop]
+        .govuk-tabs__tab:active,
+      :global(.govuk-frontend-supported)
+        .govuk-tabs[data-force-desktop]
+        .govuk-tabs__tab:focus {
+        color: #000;
+      }
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__panel {
+      margin-bottom: 0;
+      padding: 30px 20px;
+      border: 1px solid #b1b4b6;
+      border-top: 0;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__panel
+      > :last-child {
+      margin-bottom: 0;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__panel--hidden {
+      display: none;
+    }
+  }
 </style>

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

@@ -12,6 +12,7 @@ type $$ComponentProps = {
     idPrefix?: string;
     selectedTabId?: string | null;
     autoAddHeadings?: boolean;
+    forceTabBehavior?: boolean;
 };
 declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "selectedTabId">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.svelte';
+export { default as Tag } from './components/content/Tag.svelte';
 export { default as WarningText } from './components/content/WarningText.svelte';
+export { default as Histogram } from './components/data-vis/Histogram.svelte';
 export { default as Axis } from './components/data-vis/axis/Axis.svelte';
 export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
 export { default as Line } from './components/data-vis/line-chart/Line.svelte';
@@ -28,8 +30,11 @@ export { default as MobileNav } from './components/layout/service-navigation-nes
 export { default as ServiceNavigationNestedMobile } from './components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte';
 export { default as SideNav } from './components/layout/service-navigation-nested-mobile/SideNav.svelte';
 export { default as Accordion } from './components/ui/Accordion.svelte';
+export { default as BasicMultiSelect } from './components/ui/BasicMultiSelect.svelte';
 export { default as Button } from './components/ui/Button.svelte';
 export { default as Card } from './components/ui/Card.svelte';
+export { default as CardHeader } from './components/ui/CardHeader.svelte';
+export { default as ChartExporter } from './components/ui/ChartExporter.svelte';
 export { default as CheckBox } from './components/ui/CheckBox.svelte';
 export { default as ContentsList } from './components/ui/ContentsList.svelte';
 export { default as CookieBanner } from './components/ui/CookieBanner.svelte';

package/dist/index.js

@@ -1,7 +1,9 @@
 // this file is auto-generated — do not edit by hand
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.svelte';
+export { default as Tag } from './components/content/Tag.svelte';
 export { default as WarningText } from './components/content/WarningText.svelte';
+export { default as Histogram } from './components/data-vis/Histogram.svelte';
 export { default as Axis } from './components/data-vis/axis/Axis.svelte';
 export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
 export { default as Line } from './components/data-vis/line-chart/Line.svelte';
@@ -29,8 +31,11 @@ export { default as MobileNav } from './components/layout/service-navigation-nes
 export { default as ServiceNavigationNestedMobile } from './components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte';
 export { default as SideNav } from './components/layout/service-navigation-nested-mobile/SideNav.svelte';
 export { default as Accordion } from './components/ui/Accordion.svelte';
+export { default as BasicMultiSelect } from './components/ui/BasicMultiSelect.svelte';
 export { default as Button } from './components/ui/Button.svelte';
 export { default as Card } from './components/ui/Card.svelte';
+export { default as CardHeader } from './components/ui/CardHeader.svelte';
+export { default as ChartExporter } from './components/ui/ChartExporter.svelte';
 export { default as CheckBox } from './components/ui/CheckBox.svelte';
 export { default as ContentsList } from './components/ui/ContentsList.svelte';
 export { default as CookieBanner } from './components/ui/CookieBanner.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.3",
+  "version": "0.1.19-beta.34",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"
@@ -101,13 +101,16 @@
     "@types/dompurify": "^3.0.5",
     "accessible-autocomplete": "^3.0.1",
     "choices.js": "^11.1.0",
+    "chroma-js": "^3.2.0",
     "csv-parser": "^3.0.0",
     "d3": "^7.9.0",
+    "d3-array": "^3.2.4",
     "decimal.js": "^10.5.0",
     "dompurify": "^3.2.5",
     "flowbite-svelte-icons": "^2.0.3",
     "gh-pages": "^6.3.0",
     "govuk-frontend": "^5.11.1",
+    "html-to-image": "^1.11.13",
     "labelplacer": "^0.0.0",
     "leaflet": "^1.9.4",
     "mapbox-gl": "^1.13.3",