@communitiesuk/svelte-component-library 0.1.19-beta.23 → 0.1.19-beta.26

package/dist/components/data-vis/Histogram.svelte

@@ -141,10 +141,24 @@
     }
   }
 
-  let colorScale = $derived(
-    customColorScale ??
-      interpolateColors(startColor, endColor, nBins, midColor, skew),
-  );
+  let colorScale = $derived(() => {
+    if (customColorScale) return customColorScale;
+
+    if (!startColor || !endColor || !nBins) return [];
+
+    if (skew) {
+      if (
+        !midColor ||
+        averageValue == null ||
+        xTickFirst == null ||
+        xTickLast == null
+      ) {
+        return [];
+      }
+    }
+
+    return interpolateColors(startColor, endColor, nBins, midColor, skew);
+  });
 
   $inspect({ colorScale });
 

package/dist/components/data-vis/axis/Axis.svelte

@@ -56,6 +56,7 @@
     showGridlines = false,
     showTickMarks = false,
     strokeWidth = 2,
+    niceTicks = true,
   }: {
     chartHeight?: number;
     chartWidth?: number;
@@ -83,6 +84,7 @@
     strokeWidth?: Number;
     showGridlines?: Boolean;
     showTickMarks?: Boolean;
+    niceTicks?: Boolean;
   } = $props();
 
   // --- Helpers to compute default domain/range when not supplied ---
@@ -156,6 +158,7 @@
         {showGridlines}
         {showTickMarks}
         {strokeWidth}
+        {niceTicks}
       />
     {/key}
   {/if}

package/dist/components/data-vis/axis/Axis.svelte.d.ts

@@ -31,6 +31,7 @@ type $$ComponentProps = {
     strokeWidth?: Number;
     showGridlines?: Boolean;
     showTickMarks?: Boolean;
+    niceTicks?: Boolean;
 };
 declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "chartWidth">;
 type Axis = ReturnType<typeof Axis>;

package/dist/components/data-vis/axis/Ticks.svelte

@@ -36,6 +36,7 @@
 
     strokeWidth = 2,
     labelFormatter = undefined as LabelFormatter | undefined,
+    niceTicks = true,
   }: {
     ticksArray?: number[]; // bindable
     chartWidth: number;
@@ -54,6 +55,7 @@
 
     strokeWidth?: number;
     labelFormatter?: LabelFormatter;
+    niceTicks?: Boolean;
   } = $props();
   function axisValue(fn: any, tick: number): number {
     // Try single-call first: axisFunction(tick)
@@ -142,7 +144,9 @@
   );
 
   let rawTicks = $derived(
-    generateTicks(min, max, computedTickCount, floor, ceiling),
+    niceTicks
+      ? generateTicks(min, max, computedTickCount, floor, ceiling)
+      : [min, max],
   );
 
   let ticksOrdered = $derived(

package/dist/components/data-vis/axis/Ticks.svelte.d.ts

@@ -23,6 +23,7 @@ type $$ComponentProps = {
     showTickMarks?: Boolean;
     strokeWidth?: number;
     labelFormatter?: LabelFormatter;
+    niceTicks?: Boolean;
 };
 declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
 type Ticks = ReturnType<typeof Ticks>;

package/dist/components/data-vis/line-chart/ValueLabel.svelte

@@ -11,6 +11,7 @@
     markerRect = undefined,
     tooltipSnippet,
     labelText = undefined,
+    yOffset = 20,
   } = $props();
 
   let textDimensions = $state();
@@ -31,7 +32,7 @@ left: {markerRect?.x +
   style="position:absolute; left: {markerRect?.x - textDimensions?.width / 2}px;
       top: {markerRect?.y -
     textDimensions?.height -
-    20}px; pointer-events: none"
+    yOffset}px; pointer-events: none"
   bind:contentRect={textDimensions}
 >
   {#if tooltipSnippet === undefined}

package/dist/components/data-vis/line-chart/ValueLabel.svelte.d.ts

@@ -15,6 +15,7 @@ declare const ValueLabel: import("svelte").Component<{
     markerRect?: any;
     tooltipSnippet: any;
     labelText?: any;
+    yOffset?: number;
 }, {}, "">;
 type $$ComponentProps = {
     activeMarkerId: any;
@@ -28,4 +29,5 @@ type $$ComponentProps = {
     markerRect?: any;
     tooltipSnippet: any;
     labelText?: any;
+    yOffset?: number;
 };

package/dist/components/data-vis/position-chart/PositionChart.svelte

@@ -96,6 +96,7 @@
     labelFormatter = (tick, index, ticksArrayLength) => {
       return tick;
     },
+    niceTicks = true,
   } = $props();
 
   let xTicks = $state([]);
@@ -478,6 +479,7 @@
             {showTickMarks}
             {showGridlines}
             {labelFormatter}
+            {niceTicks}
           ></Axis>
         {/if}
         {#if showAverage}
@@ -576,6 +578,7 @@
       {showTickMarks}
       {showGridlines}
       {labelFormatter}
+      {niceTicks}
     ></Axis>
   {/if}
 </div>

package/dist/components/data-vis/position-chart/PositionChart.svelte.d.ts

@@ -54,6 +54,7 @@ declare const PositionChart: import("svelte").Component<{
     showTickMarks?: boolean;
     showGridlines?: boolean;
     labelFormatter?: Function;
+    niceTicks?: boolean;
 }, {}, "chartWidth">;
 type $$ComponentProps = {
     value?: any;
@@ -106,4 +107,5 @@ type $$ComponentProps = {
     showTickMarks?: boolean;
     showGridlines?: boolean;
     labelFormatter?: Function;
+    niceTicks?: boolean;
 };

package/dist/components/ui/BasicMultiSelect.svelte

@@ -1,72 +1,174 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
-
+  import IconSearch from "../../icons/IconSearch.svelte";
+  import crossIconUrl from "./../../assets/govuk_publishing_components/images/cross-icon.svg";
   type Option = { id: string | number; label: string };
   type SelectedWithColor = Option & { color: string };
+  type SelectedItem = Option | SelectedWithColor;
 
-  // ---------- Props ----------
   let {
     options = [],
-    selectedWithColors = $bindable<SelectedWithColor[]>([]),
+    selected = $bindable<SelectedItem[]>([]),
     colorArray = ["#808080"],
-    placeholder = "Select...",
+    placeholder = "Search and select…",
+    label = "Choose options",
+    hint,
+    enableColors = true,
+    startsWithSearch = true,
+    resetButton = false,
+  }: {
+    options?: Option[];
+    selected?: SelectedItem[];
+    colorArray?: string[];
+    placeholder?: string;
+    label?: string;
+    hint?: string;
+    enableColors?: boolean;
+    startsWithSearch?: boolean;
+    resetButton?: boolean;
   } = $props();
 
   let showDropdown = $state(false);
   let search = $state("");
 
-  // ---------- Assign colours to incoming items ----------
+  let initialSelected = [];
+
+  const isAtDefault = $derived(() => {
+    if (!hasInitialSelection) return true;
+
+    const current = selected
+      .map((s) => s.id)
+      .sort()
+      .join(",");
+    const initial = initialSelected
+      .map((s) => s.id)
+      .sort()
+      .join(",");
+
+    return current === initial;
+  });
+
+  const hasInitialSelection = $derived(() => initialSelected.length > 0);
+
+  function resetToInitial() {
+    selected = initialSelected.map((item) => ({ ...item }));
+    search = "";
+    queueMicrotask(() => inputEl?.focus());
+  }
+
+  // Cursor used ONLY when palette is exhausted (Option 2)
+  let colorCursor = $state(0);
+
+  function nextColorPreferUnused(used?: Set<string>) {
+    if (!Array.isArray(colorArray) || colorArray.length === 0) return "#808080";
+
+    const usedColors =
+      used ??
+      new Set(
+        selected
+          .filter(
+            (s): s is SelectedWithColor => "color" in s && !!(s as any).color,
+          )
+          .map((s) => (s as SelectedWithColor).color),
+      );
+
+    // 1) Prefer unused
+    const unused = colorArray.find((c) => !usedColors.has(c));
+    if (unused) return unused;
+
+    // 2) Otherwise cycle
+    const color = colorArray[colorCursor % colorArray.length];
+    colorCursor = (colorCursor + 1) % colorArray.length;
+    return color;
+  }
+
   $effect(() => {
-    if (!Array.isArray(selectedWithColors)) return;
-    if (!colorArray.length) return;
+    if (!enableColors) return;
+    if (!Array.isArray(selected)) return;
+    if (!Array.isArray(colorArray) || colorArray.length === 0) return;
+
+    if (colorCursor >= colorArray.length) colorCursor = 0;
 
     const used = new Set(
-      selectedWithColors.map((s) => s.color).filter(Boolean),
+      selected
+        .filter(
+          (s): s is SelectedWithColor => "color" in s && !!(s as any).color,
+        )
+        .map((s) => (s as SelectedWithColor).color),
     );
+
     let changed = false;
 
-    const updated = selectedWithColors.map((item) => {
-      if (item.color) return item;
-      const color = colorArray.find((c) => !used.has(c)) ?? colorArray[0];
+    const updated = selected.map((item) => {
+      if ("color" in item && (item as any).color) return item;
+
+      const color = nextColorPreferUnused(used);
       used.add(color);
       changed = true;
-      return { ...item, color };
+
+      return { ...(item as Option), color };
     });
 
-    if (changed) selectedWithColors = updated;
+    if (changed) selected = updated;
   });
 
-  // ---------- Compute filtered options ----------
-  const filteredOptions = $derived(
-    options.filter(
-      (o) =>
-        !selectedWithColors.some((s) => s.id === o.id) &&
-        o.label.toLowerCase().includes(search.toLowerCase()),
-    ),
-  );
+  const filteredOptions = $derived.by(() => {
+    const q = search.trim().toLowerCase();
+    const selectedIds = new Set(selected.map((s) => s.id));
 
-  // ---------- Helpers ----------
-  function getFirstAvailableColor() {
-    const used = new Set(selectedWithColors.map((s) => s.color));
-    return colorArray.find((c) => !used.has(c)) ?? colorArray[0];
-  }
+    // remove already-selected
+    const available = options
+      .filter((o) => !selectedIds.has(o.id))
+      // ✅ alphabetical sort
+      .slice() // avoid mutating original
+      .sort((a, b) =>
+        a.label.localeCompare(b.label, undefined, {
+          sensitivity: "base", // case-insensitive
+          numeric: true, // "Item 2" < "Item 10"
+        }),
+      );
+
+    // apply search match after sort (or before—either is fine)
+    const matched = q
+      ? available.filter((o) => {
+          const label = o.label.toLowerCase();
+          return startsWithSearch ? label.startsWith(q) : label.includes(q);
+        })
+      : available;
+
+    return matched;
+  });
+
+  function selectOption(option: Option) {
+    if (enableColors) {
+      const color = nextColorPreferUnused();
+      selected = [...selected, { ...option, color }];
+    } else {
+      selected = [...selected, option];
+    }
 
-  function select(option: Option) {
-    const color = getFirstAvailableColor();
-    selectedWithColors = [...selectedWithColors, { ...option, color }];
     search = "";
   }
 
-  function remove(item: SelectedWithColor) {
-    selectedWithColors = selectedWithColors.filter((s) => s.id !== item.id);
+  function remove(id: Option["id"]) {
+    selected = selected.filter((s) => s.id !== id);
   }
 
   // Close dropdown on outside click — browser only
   let container: HTMLDivElement | null = null;
+  let inputEl: HTMLInputElement | null = null;
+
+  function open() {
+    showDropdown = true;
+    queueMicrotask(() => inputEl?.focus());
+  }
 
   onMount(() => {
     if (!browser) return;
+    if (resetButton === true) {
+      initialSelected = selected.map((item) => ({ ...item }));
+    }
 
     function handleOutside(e: MouseEvent) {
       if (container && !container.contains(e.target as Node)) {
@@ -77,109 +179,566 @@
     document.addEventListener("mousedown", handleOutside);
     return () => document.removeEventListener("mousedown", handleOutside);
   });
+
+  function clearAll() {
+    selected = [];
+    search = "";
+    queueMicrotask(() => inputEl?.focus());
+  }
 </script>
 
-<!-- ---------- TEMPLATE ---------- -->
-<div class="container" bind:this={container}>
-  <div class="box" on:click={() => (showDropdown = true)}>
-    <input
-      {placeholder}
-      bind:value={search}
-      on:input={() => (showDropdown = true)}
-    />
-
-    <div class="tags">
-      {#each selectedWithColors as item (item.id)}
-        <span class="tag">
-          <span class="dot" style={`background:${item.color}`}></span>
-          {item.label}
-          <button on:click|stopPropagation={() => remove(item)}>×</button>
-        </span>
-      {/each}
+<div class="gem-c-select-with-search" bind:this={container}>
+  <label class="govuk-label" for="ms-input">{label}</label>
+  {#if hint}
+    <div class="govuk-hint">{hint}</div>
+  {/if}
+
+  <div
+    class:choices={true}
+    class:is-open={showDropdown}
+    class:is-focused={showDropdown}
+    data-type="select-multiple"
+    on:click={open}
+  >
+    <div class="choices__search-row">
+      <div class="choices__box">
+        <div class="choices__inner">
+          <input
+            id="ms-input"
+            class="choices__input"
+            bind:this={inputEl}
+            bind:value={search}
+            {placeholder}
+            autocomplete="off"
+            on:focus={() => (showDropdown = true)}
+            on:input={() => (showDropdown = true)}
+          />
+        </div>
+
+        {#if selected.length}
+          <div
+            class="choices__list choices__list--multiple"
+            aria-label="Selected items"
+          >
+            {#each selected as item (item.id)}
+              <span class="choices__item">
+                {#if enableColors && "color" in item}
+                  <span
+                    class="choices__item-circle"
+                    style={`background:${(item as any).color}`}
+                  ></span>
+                {/if}
+
+                <span class="choices__item-label">{item.label}</span>
+
+                <button
+                  type="button"
+                  class="choices__button"
+                  on:click|stopPropagation={() => remove(item.id)}
+                  aria-label={`Remove ${item.label}`}
+                  title={`Remove ${item.label}`}
+                >
+                  <img
+                    src={crossIconUrl}
+                    alt=""
+                    aria-hidden="true"
+                    width="18"
+                    height="18"
+                  />
+                </button>
+              </span>
+            {/each}
+          </div>
+        {/if}
+        {#if selected.length || (resetButton && hasInitialSelection && !isAtDefault)}
+          <div class="choices__actions">
+            {#if selected.length}
+              <button
+                type="button"
+                class="choices__clear-all"
+                on:click|stopPropagation={clearAll}
+              >
+                Remove all selected
+              </button>
+            {/if}
+
+            {#if resetButton && hasInitialSelection && !isAtDefault}
+              <button
+                type="button"
+                class="choices__reset"
+                on:click|stopPropagation={resetToInitial}
+              >
+                Reset to default
+              </button>
+            {/if}
+          </div>
+        {/if}
+      </div>
+
+      <button
+        type="button"
+        class="search-addon-btn"
+        aria-label="Search"
+        on:click|stopPropagation={() => open()}
+      >
+        <span class="search-addon-icon"><IconSearch /></span>
+      </button>
     </div>
   </div>
-
   {#if showDropdown}
-    <ul class="dropdown">
+    <div
+      class="choices__list choices__list--dropdown"
+      class:is-open={showDropdown}
+      role="listbox"
+      aria-label="Options"
+    >
       {#each filteredOptions as o (o.id)}
-        <li on:click={() => select(o)}>{o.label}</li>
+        <div
+          class="choices__item choices__item--selectable"
+          role="option"
+          on:click={() => selectOption(o)}
+        >
+          {o.label}
+        </div>
       {/each}
 
       {#if filteredOptions.length === 0}
-        <li class="no">No results</li>
+        <div class="choices__item" aria-disabled="true" style="opacity:0.75">
+          No results found
+        </div>
       {/if}
-    </ul>
+    </div>
   {/if}
 </div>
 
 <style>
-  .container {
-    position: relative;
-    width: 100%;
+  :root {
+    --govuk-black: #0b0c0c;
+    --govuk-blue: #1d70b8;
+    --govuk-grey: #b1b4b6;
+    --govuk-light-grey: #f3f2f1;
+    --govuk-focus: #fd0;
+
+    --select-height: 46px;
+    --item-height: 44px;
+    --addon-width: 46px; /* ✅ used for dropdown width alignment */
   }
 
-  .box {
-    border: 1px solid #ccc;
-    padding: 8px;
-    border-radius: 6px;
-    cursor: pointer;
+  :global(.gem-c-select-with-search) {
+    display: block;
+    width: 100%; /* ✅ inherit parent width */
+    max-width: 100%; /* ✅ never exceed parent */
+    box-sizing: border-box;
   }
 
-  input {
+  :global(.govuk-label) {
+    font-family: "GDS Transport", arial, sans-serif;
+    font-size: 1.1875rem;
+    line-height: 1.31;
+    color: var(--govuk-black);
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  /* ========================================
+     CHOICES BASE
+  ======================================== */
+
+  :global(.gem-c-select-with-search) .choices {
     width: 100%;
-    font-size: 16px;
+    max-width: 100%;
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .choices__search-row {
+    display: flex;
+    flex-direction: row; /* side by side */
+    align-items: flex-start; /* ✅ align items to bottom of row */
+    gap: 0;
+  }
+
+  /* ✅ ONE box around input + divider + chips */
+  :global(.gem-c-select-with-search) .choices__box {
+    border: 2px solid var(--govuk-black);
+    border-radius: 0;
+    background: white;
+
+    flex: 1 1 auto;
+    min-width: 0;
+
+    /* ✅ stacks input, divider, chips in one box */
+    display: flex;
+    flex-direction: column;
+
+    padding-right: 0; /* reserve space for button */
+    box-sizing: border-box;
+  }
+
+  /* Yellow focus ring around WHOLE box */
+  :global(.gem-c-select-with-search) .choices.is-focused .choices__box,
+  :global(.gem-c-select-with-search) .choices.is-open .choices__box {
+    outline: 3px solid var(--govuk-focus);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px var(--govuk-black);
+  }
+
+  :global(.gem-c-select-with-search) .choices__inner {
+    border: 0;
+    background: white;
+    min-height: var(--select-height);
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    gap: 8px;
+    cursor: text;
+    flex: 0 0 var(--select-height);
+  }
+
+  :global(.gem-c-select-with-search) .choices__input {
     border: none;
+    font-size: 19px;
+    margin: 0;
+    width: 100%;
+    min-width: 0;
+  }
+
+  :global(.gem-c-select-with-search) .choices__input:focus {
     outline: none;
   }
 
-  .tags {
-    margin-top: 6px;
+  /* ✅ Divider is now an internal border line */
+  .ms-divider {
+    border-top: 1px solid var(--govuk-grey);
+    margin: 0 5px;
+  }
+
+  /* ========================================
+     MULTI SELECT CHIPS (now INSIDE the same box)
+  ======================================== */
+
+  :global(.gem-c-select-with-search) .choices__list--multiple {
     display: flex;
     flex-wrap: wrap;
-    gap: 4px;
+    align-items: flex-start;
+    gap: 4px 10px;
+    width: 100%;
+
+    border-top: 1px solid var(--govuk-grey); /* ✅ the ONE divider */
+    margin: 0 5px; /* aligns with input padding */
+    padding: 8px 8px 10px; /* slightly nicer spacing */
+    width: calc(100% - 10px);
+
+    box-sizing: border-box;
   }
 
-  .tag {
-    background: #f3f2f1;
-    padding: 2px 6px;
-    border-radius: 4px;
+  :global(.gem-c-select-with-search) .choices__list--multiple .choices__item {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    background: var(--govuk-light-grey);
+    color: var(--govuk-black);
+    box-shadow: 0 2px 0 var(--govuk-grey);
+    border-radius: 0;
+
+    min-height: 32px;
+    padding: 2px 0 2px 10px;
+    margin: 4px 10px 0 0;
+    line-height: 1.2;
+
+    max-width: 100%;
+    box-sizing: border-box;
   }
 
-  .dot {
-    width: 10px;
-    height: 10px;
+  :global(.gem-c-select-with-search) .choices__item-circle {
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
-    border: 1px solid #999;
+    margin-right: 8px;
+    border: 1px solid var(--govuk-black);
   }
 
-  .dropdown {
-    position: absolute;
-    background: white;
+  :global(.gem-c-select-with-search) .choices__item-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: visible;
+    text-overflow: unset;
+    white-space: normal;
+    word-break: break-word;
+    max-width: 26ch;
+    line-height: 1.2;
+  }
+
+  :global(.gem-c-select-with-search)
+    .choices[data-type*="select-multiple"]
+    .choices__button {
+    width: 32px;
+    padding: 0;
+
+    border: 0;
+    margin-left: 8px;
+
+    background: transparent;
+    color: var(--govuk-black);
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: 0.85;
+    cursor: pointer;
+    transition:
+      background-color 120ms ease,
+      opacity 120ms ease;
+
+    align-self: stretch;
+    height: auto;
+    min-height: 100%;
+    padding: 0 10px;
+    border-left: 1px solid var(--govuk-grey);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.gem-c-select-with-search)
+    .choices[data-type*="select-multiple"]
+    .choices__button:hover {
+    background-color: #e0e0e0;
+    opacity: 1;
+  }
+
+  :global(.gem-c-select-with-search)
+    .choices[data-type*="select-multiple"]
+    .choices__button:focus {
+    outline: 3px solid var(--govuk-focus);
+    outline-offset: 0;
+    opacity: 1;
+  }
+
+  /* ========================================
+     SEARCH BUTTON
+  ======================================== */
+
+  .search-addon-btn {
+    width: var(--addon-width); /* keeps the width fixed */
+    height: var(--select-height); /* match the input box height */
+    display: inline-flex;
+    align-items: center; /* center the icon vertically */
+    justify-content: center; /* center the icon horizontally */
+    background-color: var(--govuk-blue); /* keep the blue */
+    color: #fff;
+    border: 0;
+    padding: 0;
+    font-size: 19px;
+    font-family: "GDS Transport", arial, sans-serif;
+    cursor: pointer;
+  }
+
+  .search-addon-btn:focus-visible {
+    outline: 3px solid var(--govuk-focus);
+    box-shadow: inset 0 0 0 4px var(--govuk-black);
+  }
+
+  .search-addon-icon {
+    position: relative;
+    width: var(--addon-width);
+    height: var(--addon-width);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.gem-c-select-with-search) .choices__list--dropdown {
+    /* IMPORTANT: ensure it participates in normal layout */
+    position: static !important;
+    inset: auto !important; /* cancels top/left/right/bottom if set somewhere */
+    transform: none !important;
+
+    /* layout */
+    display: block !important;
     width: 100%;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    margin-top: 4px;
-    z-index: 10;
-    max-height: 200px;
+    box-sizing: border-box;
+
+    margin-top: 0;
+    border: 2px solid var(--govuk-black);
+    border-top: none;
+    background: white;
+
+    max-height: 300px;
     overflow-y: auto;
+    z-index: auto; /* z-index not needed when in normal flow */
+    width: calc(100% - var(--addon-width));
+    margin-left: 0;
+  }
+
+  :global(.gem-c-select-with-search) .choices__list--dropdown .choices__item {
+    display: flex;
+    align-items: center;
+    min-height: var(--item-height);
+    padding: 12px 10px;
+    position: relative;
+    width: 100%;
+
+    box-sizing: border-box;
+    flex: 0 0 auto; /* don't shrink into columns */
+    white-space: normal; /* allow wrappintext */
+  }
+
+  :global(.gem-c-select-with-search)
+    .choices__list--dropdown
+    .choices__item::after {
+    content: "";
+    position: absolute;
+    left: 15px;
+    right: 15px;
+    bottom: 0;
+    height: 1px;
+    background: var(--govuk-grey);
+  }
+
+  :global(.gem-c-select-with-search) .choices__item--selectable:hover {
+    background: var(--govuk-blue);
+    color: white;
+    cursor: pointer;
+  }
+  :global(.gem-c-select-with-search) .choices__list--dropdown {
+    display: block !important;
+  }
+
+  :global(.gem-c-select-with-search)
+    .choices.is-open
+    .choices__box
+    .choices__inner,
+  :global(.gem-c-select-with-search)
+    .choices.is-focused
+    .choices__box
+    .choices__inner {
+    border-bottom: 0;
+    box-shadow: none;
+    margin-bottom: 0 !important;
+  }
+
+  /* Only when chips are present: make the inner section visually merge into chips */
+  :global(.gem-c-select-with-search)
+    .choices.is-open
+    .choices__box:has(.choices__list--multiple)
+    .choices__inner,
+  :global(.gem-c-select-with-search)
+    .choices.is-focused
+    .choices__box:has(.choices__list--multiple)
+    .choices__inner {
+    border-bottom: 0;
+    padding-bottom: 0; /* optional: removes gap above the divider */
+  }
+
+  :global(.gem-c-select-with-search) .choices.is-focused .choices__box,
+  :global(.gem-c-select-with-search) .choices.is-open .choices__box {
+    outline: none;
+    /* keep a subtle black inset so focus isn't invisible */
+    box-shadow: inset 0 0 0 2px var(--govuk-black);
+  }
+
+  /* Remove yellow outline on the blue search button */
+  .search-addon-btn:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 3px var(--govuk-black);
+  }
+
+  /* Remove yellow outline on the chip remove buttons */
+  :global(.gem-c-select-with-search)
+    .choices[data-type*="select-multiple"]
+    .choices__button:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 3px var(--govuk-black);
+  }
+
+  .choices__actions {
+    /* stack inside the box under chips */
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+
+    /* spacing aligned with your chips area */
+    margin: 0 5px;
+    width: calc(100% - 10px);
+    padding: 8px 8px 10px;
+
+    /* optional divider line (remove if you don't want another line) */
+    .choices__actions {
+      border-top: 0;
+    }
+
+    text-align: left; /* keeps it looking like it belongs "under" */
+  }
+
+  .choices__clear-all {
+    background: transparent;
+    border: 0;
     padding: 0;
-    list-style: none;
+    color: var(--govuk-blue);
+    font-family: "GDS Transport", arial, sans-serif;
+    font-size: 19px;
+    cursor: pointer;
+    text-decoration: underline;
   }
 
-  .dropdown li {
-    padding: 8px;
+  .choices__clear-all:hover {
+    color: #003078; /* slightly darker GOV.UK blue */
+  }
+
+  .choices__clear-all:focus-visible {
+    outline: 3px solid var(--govuk-focus);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 3px var(--govuk-black);
+    text-decoration: none;
+  }
+
+  :global(.gem-c-select-with-search) .choices__list--dropdown {
+    margin: 0 !important; /* ✅ kills the 16px */
+    padding: 0;
+  }
+
+  .choices__reset {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin-left: 16px;
+
+    color: var(--govuk-blue);
+    font-family: "GDS Transport", arial, sans-serif;
+    font-size: 19px;
     cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .choices__reset:hover {
+    color: #003078;
+  }
+
+  .choices__reset:focus-visible {
+    outline: 3px solid var(--govuk-focus);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 3px var(--govuk-black);
+    text-decoration: none;
+  }
+
+  :global(.gem-c-select-with-search) .choices__list--dropdown {
+    scrollbar-width: thin;
+  }
+
+  :global(.gem-c-select-with-search)
+    .choices__list--dropdown::-webkit-scrollbar {
+    width: 10px;
   }
 
-  .dropdown li:hover {
-    background: #eef4ff;
+  :global(.gem-c-select-with-search)
+    .choices__list--dropdown::-webkit-scrollbar-thumb {
+    background-color: var(--govuk-grey);
+    border-radius: 0;
   }
 
-  .no {
-    color: #777;
-    padding: 8px;
+  .choices__actions:empty {
+    display: none;
   }
 </style>

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

@@ -1,8 +1,22 @@
-declare const BasicMultiSelect: import("svelte").Component<{
-    options?: any[];
-    selectedWithColors?: any[];
-    colorArray?: any[];
+type Option = {
+    id: string | number;
+    label: string;
+};
+type SelectedWithColor = Option & {
+    color: string;
+};
+type SelectedItem = Option | SelectedWithColor;
+type $$ComponentProps = {
+    options?: Option[];
+    selected?: SelectedItem[];
+    colorArray?: string[];
     placeholder?: string;
-}, {}, "selectedWithColors">;
+    label?: string;
+    hint?: string;
+    enableColors?: boolean;
+    startsWithSearch?: boolean;
+    resetButton?: boolean;
+};
+declare const BasicMultiSelect: import("svelte").Component<$$ComponentProps, {}, "selected">;
 type BasicMultiSelect = ReturnType<typeof BasicMultiSelect>;
 export default BasicMultiSelect;

package/dist/components/ui/CheckBox.svelte

@@ -58,6 +58,7 @@
   // Modify toggleCheckbox to handle non-JS scenarios
   function toggleCheckbox(option: CheckboxOption) {
     // If JS/modern features aren't supported, let the native checkbox behavior work
+
     if (!isSupported) return;
 
     if (option.exclusive) {

package/dist/components/ui/Tabs.svelte

@@ -72,6 +72,8 @@
     }
   }
 
+  //$inspect(isSupported, "isSupported");
+
   // Handle keyboard navigation
   function handleKeydown(event: KeyboardEvent, currentIndex: number): void {
     // Skip navigation on mobile or if component isn't ready

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.23",
+  "version": "0.1.19-beta.26",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"