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

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

@@ -177,7 +177,6 @@
         {#if topLabel && layout.topLabelY !== null}
           <text x={0} y={layout.topLabelY + 14} fill="#666" font-size="0.75em">
             Number of areas
-            {minX}, {maxX}
           </text>
         {/if}
 
@@ -201,28 +200,14 @@
 
         <g transform="translate(0, {layout.chartY})">
           {#if showYAxis}
-            <!-- <Axis
-              bind:axisDomain
-              bind:ticksArray={ticksDomain}
-              {chartHeight}
-              chartWidth={chartWidth - markerRadius * 2}
-              orientation={{ axis: "x", position: "bottom" }}
-              range={[markerRadius, chartWidth - markerRadius]}
-              domain={[xValueFirst, xValueLast]}
-              {min}
-              {max}
-              fontSize={14}
-              {floor}
-              {ceiling}
-              {numberOfTicks}
-              {polarity}
-              {showTickMarks}
-              {showGridlines}
-              {labelFormatter}
-              {niceTicks}
-              {markerRadius}
-              {distribution}
-            ></Axis> -->
+            {#each [3, 6, 9] as x, i}
+              <path
+                transform="translate(0, {scaleLinear([0, 9], [height, 0])(x)})"
+                d={`M0 0 l${containerWidth - 25} 0`}
+                stroke="grey"
+                stroke-width={0.25}
+              ></path>
+            {/each}
           {/if}
 
           {#each bins as bin, i}

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

@@ -391,6 +391,30 @@
               fill={colorScale[number]}
             ></rect></g
           >{/each}
+        {#if showAxis}
+          <Axis
+            bind:axisDomain
+            bind:ticksArray={ticksDomain}
+            {chartHeight}
+            chartWidth={chartWidth - markerRadius * 2}
+            orientation={{ axis: "x", position: "bottom" }}
+            range={[markerRadius, chartWidth - markerRadius]}
+            domain={[xTickFirst, xTickLast]}
+            {min}
+            {max}
+            fontSize={14}
+            {floor}
+            {ceiling}
+            {numberOfTicks}
+            {polarity}
+            {showTickMarks}
+            {showGridlines}
+            {labelFormatter}
+            {niceTicks}
+            {markerRadius}
+            {distribution}
+          ></Axis>
+        {/if}
         {#each Object.entries(positionChart.rowData) as [tier, points]}
           {#each points as rowValue, i}
             {#if !isNaN(Number(rowValue.value))}
@@ -430,7 +454,7 @@
                     stroke={rowValue.color === "inherit"
                       ? colorScale[segmentIndex(rowValue.value)]
                       : rowValue.color}
-                    stroke-width={rowValue.markerRadius * 5}
+                    stroke-width={rowValue.markerRadius * 7}
                     opacity={0}
                     pointer-events={rowValue.pointerEvents}
                   ></line>
@@ -455,7 +479,7 @@
                     fill={rowValue.color === "inherit"
                       ? colorScale[segmentIndex(rowValue.value)]
                       : rowValue.color}
-                    stroke-width={3}
+                    stroke-width={5}
                     opacity={rowValue.opacity}
                   ></circle>
                   <circle
@@ -465,8 +489,8 @@
                     fill={rowValue.color === "inherit"
                       ? colorScale[segmentIndex(rowValue.value)]
                       : rowValue.color}
-                    stroke="black"
-                    stroke-width={1.5}
+                    stroke="#111"
+                    stroke-width={3}
                     opacity={rowValue.opacity}
                   ></circle>
                 {/if}
@@ -474,30 +498,7 @@
             {/if}
           {/each}
         {/each}
-        {#if showAxis}
-          <Axis
-            bind:axisDomain
-            bind:ticksArray={ticksDomain}
-            {chartHeight}
-            chartWidth={chartWidth - markerRadius * 2}
-            orientation={{ axis: "x", position: "bottom" }}
-            range={[markerRadius, chartWidth - markerRadius]}
-            domain={[xTickFirst, xTickLast]}
-            {min}
-            {max}
-            fontSize={14}
-            {floor}
-            {ceiling}
-            {numberOfTicks}
-            {polarity}
-            {showTickMarks}
-            {showGridlines}
-            {labelFormatter}
-            {niceTicks}
-            {markerRadius}
-            {distribution}
-          ></Axis>
-        {/if}
+
         {#if showAverage}
           <g
             transform="translate({xFunction(chartDomain)(averageValue) +

package/dist/components/data-vis/table/Table.svelte

@@ -2,48 +2,63 @@
   import Button from "./../../ui/Button.svelte";
 
   let {
-    data = undefined,
-    metaData = undefined,
+    data = [],
+    metadata = {},
     caption = undefined,
     colourScale = undefined,
   } = $props();
 
-  let localCopyOfData = $derived([...data]);
+  let localCopyOfData = $state([...(data ?? [])]);
+
+  let sortState = $state({
+    column: null,
+    order: null, // "ascending" | "descending" | null
+  });
+
+  $effect(() => {
+    localCopyOfData = [...(data ?? [])];
+  });
 
   function hasUniqueValues(array, key) {
     const seen = new Set();
     for (const obj of array) {
       if (seen.has(obj[key])) {
-        return false; // Duplicate found
+        return false;
       }
       seen.add(obj[key]);
     }
-    return true; // All values are unique
+    return true;
   }
 
-  let columns = [];
-
-  for (const column in localCopyOfData[0]) {
-    // create a variable to store whether the key is unique or not
-    const keyIsUnique = hasUniqueValues(localCopyOfData, column);
-    // get data type of each column
-    const columnDataType = typeof localCopyOfData[0][column];
-    // for each one create an object and push it into the array
-    const columnObject = {
-      key: column,
-      isUnique: keyIsUnique,
-      dataType: columnDataType,
-    };
-    columns.push(columnObject);
-  }
+  let columns = $derived.by(() => {
+    if (!data || data.length === 0) return [];
+
+    const derivedColumns = [];
 
-  $inspect("columns array is ", columns);
+    for (const column in data[0]) {
+      const keyIsUnique = hasUniqueValues(data, column);
+      const columnDataType = typeof data[0][column];
+
+      derivedColumns.push({
+        key: column,
+        isUnique: keyIsUnique,
+        dataType: columnDataType,
+        id: metadata[column].order,
+      });
+    }
+
+    const orderedColumns = derivedColumns.sort((a, b) => a.id - b.id);
+
+    return orderedColumns;
+  });
 
-  const metrics = columns
-    .filter((column) => column.dataType === "number")
-    .map((column) => column.key);
+  $inspect(columns);
 
-  let sortState = $state({ column: "sortedColumn", order: "ascending" });
+  const metrics = $derived(
+    columns
+      .filter((column) => column.dataType === "number")
+      .map((column) => column.key),
+  );
 
   function updateSortState(columnToSort, sortOrder) {
     sortState.column = columnToSort;
@@ -51,61 +66,63 @@
   }
 
   function sortFunction() {
-    if (typeof localCopyOfData[0][sortState["column"]] === "number") {
+    if (!localCopyOfData.length || !sortState.column || !sortState.order)
+      return;
+
+    const sorted = [...localCopyOfData];
+
+    if (typeof sorted[0][sortState.column] === "number") {
       if (sortState.order === "ascending") {
-        localCopyOfData.sort(
-          (a, b) => a[sortState.column] - b[sortState.column],
-        );
+        sorted.sort((a, b) => a[sortState.column] - b[sortState.column]);
       } else {
-        localCopyOfData.sort(
-          (a, b) => b[sortState.column] - a[sortState.column],
-        );
+        sorted.sort((a, b) => b[sortState.column] - a[sortState.column]);
       }
     }
-    if (typeof localCopyOfData[0][sortState["column"]] === "string") {
+
+    if (typeof sorted[0][sortState.column] === "string") {
       if (sortState.order === "ascending") {
-        localCopyOfData.sort((a, b) =>
-          a[sortState["column"]].localeCompare(b[sortState["column"]]),
+        sorted.sort((a, b) =>
+          a[sortState.column].localeCompare(b[sortState.column]),
         );
       } else {
-        localCopyOfData.sort((a, b) =>
-          b[sortState["column"]].localeCompare(a[sortState["column"]]),
+        sorted.sort((a, b) =>
+          b[sortState.column].localeCompare(a[sortState.column]),
         );
       }
     }
-  }
-
-  $inspect(
-    sortState,
-    localCopyOfData[0],
-    typeof localCopyOfData[0][sortState["column"]],
-  );
 
-  // heat map
-
-  // calculate the min and max of each metric
-  const minAndMaxValues = {}; // create an empty object to store them in
-  for (const metric of metrics) {
-    // get the values
-    const metricValues = localCopyOfData.map((item) => item[metric]);
-    const min = Math.min(...metricValues);
-    const max = Math.max(...metricValues);
-    // store them
-    minAndMaxValues[metric] = { min, max };
+    localCopyOfData = sorted;
   }
 
-  localCopyOfData = localCopyOfData.map((row) => {
-    const rowWithNorms = { ...row };
+  const minAndMaxValues = $derived.by(() => {
+    const result = {};
 
     for (const metric of metrics) {
-      const { min, max } = minAndMaxValues[metric];
-      const value = row[metric];
-      const normalisedValue = (value - min) / (max - min);
+      const metricValues = localCopyOfData.map((item) => item[metric]);
+      const min = Math.min(...metricValues);
+      const max = Math.max(...metricValues);
 
-      rowWithNorms[`${metric}__normalised`] = normalisedValue;
+      result[metric] = { min, max };
     }
 
-    return rowWithNorms;
+    return result;
+  });
+
+  const displayRows = $derived.by(() => {
+    return localCopyOfData.map((row) => {
+      const rowWithNorms = { ...row };
+
+      for (const metric of metrics) {
+        const { min, max } = minAndMaxValues[metric];
+        const value = row[metric];
+
+        const normalisedValue = max === min ? 0.5 : (value - min) / (max - min);
+
+        rowWithNorms[`${metric}__normalised`] = normalisedValue;
+      }
+
+      return rowWithNorms;
+    });
   });
 
   function normToColor(norm) {
@@ -119,6 +136,27 @@
   }
 
   const colorKey = Object.entries({ Good: 1, Ok: 0.5, Bad: 0 });
+
+  function handleSort(columnKey) {
+    let newDirection = "ascending";
+
+    if (sortState.column === columnKey) {
+      if (sortState.order === "ascending") {
+        newDirection = "descending";
+      } else if (sortState.order === "descending") {
+        newDirection = null;
+      }
+    }
+
+    if (newDirection === null) {
+      updateSortState(null, null);
+      localCopyOfData = [...(data ?? [])];
+      return;
+    }
+
+    updateSortState(columnKey, newDirection);
+    sortFunction();
+  }
 </script>
 
 <div class="p-4">
@@ -126,7 +164,10 @@
     <div class="legend">
       <div>Colour key:</div>
       {#each colorKey as key}
-        <div class="color-keys" style="background-color: {normToColor(key[1])}">
+        <div
+          class="color-keys"
+          style={`background-color: ${normToColor(key[1])}`}
+        >
           {key[0]}
         </div>
       {/each}
@@ -135,62 +176,65 @@
 
   <div class="table-container">
     <div id="table-caption" class="sticky-caption">{caption}</div>
+
     <table class="govuk-table" data-module="moj-sortable-table">
-      <thead class="govuk-table__head"
-        ><tr class="govuk-table__row">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
           {#each columns as column}
             <th
               scope="col"
               class={`govuk-table__header ${column.dataType === "number" ? "govuk-table__header--numeric" : ""}`}
-              title={metaData[column.key].explainer}
-              aria-sort={sortState.column !== column.key
+              title={metadata[column.key]?.explainer}
+              style={metadata[column.key]?.width
+                ? `min-width: ${metadata[column.key].width}`
+                : undefined}
+              aria-sort={sortState.column !== column.key ||
+              sortState.order === null
                 ? "none"
-                : sortState.column === column.key &&
-                    sortState.order === "descending"
+                : sortState.order === "descending"
                   ? "descending"
                   : "ascending"}
             >
               <div class="header">
                 <Button
-                  textContent={metaData[column.key].shortLabel}
+                  textContent={metadata[column.key]?.shortLabel ?? column.key}
                   buttonType={"table header"}
-                  onClickFunction={() => {
-                    const newDirection =
-                      sortState.column === column.key &&
-                      sortState.order === "ascending"
-                        ? "descending"
-                        : "ascending";
-
-                    updateSortState(column.key, newDirection);
-                    sortFunction();
-                  }}
+                  direction={sortState.column === column.key
+                    ? sortState.order
+                    : null}
+                  onClickFunction={() => handleSort(column.key)}
                 ></Button>
-              </div></th
-            >
+              </div>
+            </th>
           {/each}
-        </tr></thead
-      >
+        </tr>
+      </thead>
+
       <tbody class="govuk-table__body">
-        {#each localCopyOfData as row}
+        {#each displayRows as row}
           <tr class="govuk-table__row">
             {#each columns as column}
               {#if column.dataType === "number"}
                 {#if colourScale === "On"}
                   <td
                     class="govuk-table__cell govuk-table__cell--numeric"
-                    style="background-color: {metaData[column.key].direction ===
-                    'Higher is better'
-                      ? normToColor(row[column.key + '__normalised'])
-                      : normToColorReverse(row[column.key + '__normalised'])}"
-                    >{row[column.key]}</td
+                    style={`background-color: ${
+                      metadata[column.key]?.direction === "Higher is better"
+                        ? normToColor(row[column.key + "__normalised"])
+                        : normToColorReverse(row[column.key + "__normalised"])
+                    }`}
                   >
+                    {@html row[column.key]}
+                  </td>
                 {:else}
-                  <td class="govuk-table__cell govuk-table__cell--numeric"
-                    >{row[column.key]}</td
-                  >
+                  <td class="govuk-table__cell govuk-table__cell--numeric">
+                    {@html row[column.key]}
+                  </td>
                 {/if}
               {:else}
-                <td class="govuk-table__cell">{row[column.key]}</td>
+                <td class="govuk-table__cell">
+                  {@html row[column.key]}
+                </td>
               {/if}
             {/each}
           </tr>
@@ -202,7 +246,7 @@
 
 <style>
   .table-container {
-    max-height: 85vh;
+    max-height: 60vh;
     overflow-y: auto;
     overflow-x: scroll;
     width: 100%;
@@ -228,8 +272,14 @@
     gap: 20px;
     margin: 10px;
   }
+
   .color-keys {
     border-radius: 10%;
     padding: 6px;
   }
+
+  .header {
+    display: flex;
+    align-items: center;
+  }
 </style>

package/dist/components/data-vis/table/Table.svelte.d.ts

@@ -4,14 +4,14 @@ type Table = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const Table: import("svelte").Component<{
-    data?: any;
-    metaData?: any;
+    data?: any[];
+    metadata?: Record<string, any>;
     caption?: any;
     colourScale?: any;
 }, {}, "">;
 type $$ComponentProps = {
-    data?: any;
-    metaData?: any;
+    data?: any[];
+    metadata?: Record<string, any>;
     caption?: any;
     colourScale?: any;
 };

package/dist/components/ui/Accordion.svelte

@@ -16,6 +16,8 @@
     minSectionsAllSectionToggle = 2,
     rememberIsExpandedState = true,
     headingLevel = "h4",
+    useCustomSectionIcon = false,
+    useLightweightAccordionStyles = false,
   }: {
     sections: {
       heading: string;
@@ -34,35 +36,35 @@
     minSectionsAllSectionToggle?: number;
     rememberIsExpandedState?: boolean;
     headingLevel?: string;
+    useCustomSectionIcon?: boolean;
+    useLightweightAccordionStyles?: boolean;
   } = $props();
 
-  //Attempt to ensure that ids are unique by attaching extra characters
+  // Attempt to ensure that ids are unique by attaching extra characters
   let uniqueSections = $derived(
-    sections.map((section) => {
-      return {
-        ...section,
-        uniqueid:
-          section.id +
-          section.heading.slice(1, 3) +
-          (section?.summary?.slice(0, 2) ?? ""),
-      };
-    }),
+          sections.map((section) => {
+            return {
+              ...section,
+              uniqueid:
+                      section.id +
+                      section.heading.slice(1, 3) +
+                      (section?.summary?.slice(0, 2) ?? ""),
+            };
+          }),
   );
 
   let expandedSections = $derived(
-    new SvelteSet(
-      uniqueSections
-        .filter((section) => section.expanded)
-        .map((section) => section.uniqueid),
-    ),
+          new SvelteSet(
+                  uniqueSections
+                          .filter((section) => section.expanded)
+                          .map((section) => section.uniqueid),
+          ),
   );
 
   let allExpanded = $derived(expandedSections.size === sections.length);
 
   let ariaLiveValue: "polite" | "off" | "assertive" | null | undefined =
-    $state("polite");
-
-  // Event handlers
+          $state("polite");
 
   function toggleSection(uniqueid: string) {
     if (expandedSections.has(uniqueid)) {
@@ -70,28 +72,25 @@
     } else {
       expandedSections.add(uniqueid);
     }
-    //Announce the contents change when an accoridion section is expanded
+
     ariaLiveValue = "polite";
   }
 
   function toggleAll() {
     if (!allExpanded) {
       uniqueSections.forEach((section) =>
-        expandedSections.add(section.uniqueid),
+              expandedSections.add(section.uniqueid),
       );
     } else {
       expandedSections.clear();
     }
-    //Don't announce all of the changes when we open all sections - this gets noisy and the content isn't associated with the label
+
     ariaLiveValue = "off";
   }
 
-  // Only use session storage logic if rememberIsExpandedState is true
   onMount(() => {
     if (rememberIsExpandedState) {
       uniqueSections.forEach((section) => {
-        // If the section is explicitly expanded, respect that.
-        // Otherwise, try to restore from session storage.
         if (section.expanded) {
           expandedSections.add(section.uniqueid);
         } else {
@@ -102,7 +101,6 @@
         }
       });
     } else {
-      // If rememberIsExpandedState is false, just respect the initial `section.expanded` values
       uniqueSections.forEach((section) => {
         if (section.expanded) {
           expandedSections.add(section.uniqueid);
@@ -111,13 +109,12 @@
     }
   });
 
-  // Effect to update sessionStorage when uniqueSections change
   $effect(() => {
     if (rememberIsExpandedState) {
       uniqueSections.forEach((section) => {
         sessionStorage.setItem(
-          section.uniqueid,
-          expandedSections.has(section.uniqueid).toString(),
+                section.uniqueid,
+                expandedSections.has(section.uniqueid).toString(),
         );
       });
     }
@@ -125,67 +122,112 @@
 </script>
 
 <div
-  class="govuk-accordion"
-  data-module="govuk-accordion"
-  id="accordion-default"
+        class="govuk-accordion"
+        class:govuk-accordion--download-style={useLightweightAccordionStyles}
+        data-module="govuk-accordion"
+        id="accordion-default"
 >
   <div
-    class="govuk-accordion__controls"
-    hidden={!allSectionToggle ||
+          class="govuk-accordion__controls"
+          hidden={!allSectionToggle ||
       uniqueSections.length < minSectionsAllSectionToggle}
+          style="display: flex; flex-direction: row"
   >
     <button
-      type="button"
-      class="govuk-accordion__show-all"
-      aria-expanded={allExpanded}
-      onclick={toggleAll}
+            type="button"
+            class="govuk-accordion__show-all"
+            aria-expanded={allExpanded}
+            onclick={toggleAll}
     >
       <span class="govuk-accordion__show-all-text">
         {allExpanded ? hideAllSections : showAllSections}
       </span>
       <span
-        class="govuk-accordion-nav__chevron"
-        class:govuk-accordion-nav__chevron--down={!allExpanded}
+              class="govuk-accordion-nav__chevron"
+              class:govuk-accordion-nav__chevron--down={!allExpanded}
       ></span>
     </button>
   </div>
 
   {#snippet headerContent(section, isExpanded)}
     <button
-      type="button"
-      aria-controls="{section.uniqueid}-content"
-      id="{section.uniqueid}-button"
-      class="govuk-accordion__section-button"
-      aria-expanded={isExpanded}
-      onclick={() => toggleSection(section.uniqueid)}
-      aria-label="{section.heading}, {section.summary
+            type="button"
+            aria-controls="{section.uniqueid}-content"
+            id="{section.uniqueid}-button"
+            class="govuk-accordion__section-button"
+            aria-expanded={isExpanded}
+            onclick={() => toggleSection(section.uniqueid)}
+            aria-label="{section.heading}, {section.summary
         ? section.summary + ','
         : ''} {isExpanded ? hideSectionAriaLabel : showSectionAriaLabel}"
     >
       <span class="govuk-accordion__section-heading-text">
-        <span class="govuk-accordion__section-heading-text-focus"
-          >{section.heading}</span
-        >
+        <span class="govuk-accordion__section-heading-text-focus">
+          {section.heading}
+        </span>
       </span>
 
       {#if section.summary}
         <span
-          class="govuk-visually-hidden govuk-accordion__section-heading-divider"
-          >,
+                class="govuk-visually-hidden govuk-accordion__section-heading-divider"
+        >
+          ,
         </span>
         <span class="govuk-accordion__section-summary govuk-body">
-          <span class="govuk-accordion__section-summary-focus"
-            >{section.summary}</span
-          >
+          <span class="govuk-accordion__section-summary-focus">
+            {section.summary}
+          </span>
         </span>
       {/if}
 
       <span class="govuk-accordion__section-toggle" data-nosnippet>
         <span class="govuk-accordion__section-toggle-focus">
-          <span
-            class="govuk-accordion-nav__chevron"
-            class:govuk-accordion-nav__chevron--down={!isExpanded}
-          ></span>
+          {#if useCustomSectionIcon}
+            <svg
+                    width="30"
+                    height="30"
+                    viewBox="0 0 30 30"
+                    aria-hidden="true"
+                    class="govuk-accordion__custom-icon"
+            >
+              <g
+                      transform="translate({12 + (isExpanded ? 3 : 0)},{15 + (isExpanded ? -3 : 0)}) rotate({isExpanded ? -45 : -135})"
+              >
+                {#each [-5, 5] as cxcy}
+                  <circle
+                          data-role={isExpanded
+                      ? "button-circle-selected"
+                      : "button-circle-unselected"}
+                          cx={cxcy}
+                          cy={cxcy}
+                  ></circle>
+                {/each}
+
+                <path
+                        data-role={isExpanded
+                    ? "button-path-selected"
+                    : "button-path-unselected"}
+                        d="M -5 -5 l0 9.75 m0.25 0.25 l9.75 0"
+                ></path>
+
+                <rect
+                        data-role={isExpanded
+                    ? "button-rect-selected"
+                    : "button-rect-unselected"}
+                        transform="translate(-6, 4)"
+                        width="2"
+                        height="2"
+                        rx="4px"
+                ></rect>
+              </g>
+            </svg>
+          {:else}
+            <span
+                    class="govuk-accordion-nav__chevron"
+                    class:govuk-accordion-nav__chevron--down={!isExpanded}
+            ></span>
+          {/if}
+
           <span class="govuk-accordion__section-toggle-text">
             {isExpanded ? hideSection : showSection}
           </span>
@@ -197,8 +239,8 @@
   {#each uniqueSections as section}
     {@const isExpanded = expandedSections.has(section.uniqueid)}
     <div
-      class="govuk-accordion__section"
-      class:govuk-accordion__section--expanded={isExpanded}
+            class="govuk-accordion__section"
+            class:govuk-accordion__section--expanded={isExpanded}
     >
       <div class="govuk-accordion__section-header">
         {#if headingLevel.toLowerCase() == "h2"}
@@ -223,13 +265,14 @@
           </h6>
         {/if}
       </div>
+
       <div
-        id="{section.uniqueid}-content"
-        class="govuk-accordion__section-content"
-        aria-live={ariaLiveValue}
-        hidden={!isExpanded}
-        role={uniqueSections.length < 6 ? "region" : ""}
-        aria-labelledby={uniqueSections.length < 6
+              id="{section.uniqueid}-content"
+              class="govuk-accordion__section-content"
+              aria-live={ariaLiveValue}
+              hidden={!isExpanded}
+              role={uniqueSections.length < 6 ? "region" : ""}
+              aria-labelledby={uniqueSections.length < 6
           ? section.uniqueid + "-button"
           : ""}
       >
@@ -242,3 +285,106 @@
     </div>
   {/each}
 </div>
+
+<style>
+  .govuk-accordion__custom-icon {
+    display: inline-block;
+    vertical-align: middle;
+    flex: 0 0 auto;
+    margin-right: 0.35rem;
+  }
+
+  [data-role="button-circle-unselected"] {
+    fill: #0B0C0C;
+    stroke: #0B0C0C;
+    stroke-width: 1.5;
+  }
+
+  [data-role="button-circle-selected"] {
+    fill: #0B0C0C;
+    stroke: #0B0C0C;
+    stroke-width: 1.5;
+  }
+
+  [data-role="button-path-unselected"] {
+    stroke: #0B0C0C;
+    stroke-width: 2;
+    fill: none;
+    stroke-linecap: round;
+  }
+
+  [data-role="button-path-selected"] {
+    stroke: #0B0C0C;
+    stroke-width: 2;
+    fill: none;
+    stroke-linecap: round;
+  }
+
+  [data-role="button-rect-unselected"] {
+    fill: #0B0C0C;
+  }
+
+  [data-role="button-rect-selected"] {
+    fill: #0B0C0C;
+  }
+
+  /* Alternative style mode */
+  .govuk-accordion--download-style {
+    background: #f8f8f8;
+    padding: 0.75rem 1rem;
+    border: 1px solid #e0e0e0;
+  }
+
+  .govuk-accordion--download-style.govuk-accordion {
+    border-bottom: 0;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section {
+    border-bottom: 1px solid #b1b4b6;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 1rem 0;
+    border: 0;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-button:hover {
+    color: #0b0c0c;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-toggle {
+    order: -1;
+    margin: 0;
+    min-width: 1rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-toggle-focus {
+    display: flex;
+    align-items: center;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-toggle-text {
+    display: none;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-content .govuk-body {
+    padding-top: 0;
+    margin-top: 0;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-heading-text {
+    margin-bottom: 0;
+  }
+
+  .govuk-accordion--download-style .govuk-hint {
+    all: unset;
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+</style>

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

@@ -17,6 +17,8 @@ type $$ComponentProps = {
     minSectionsAllSectionToggle?: number;
     rememberIsExpandedState?: boolean;
     headingLevel?: string;
+    useCustomSectionIcon?: boolean;
+    useLightweightAccordionStyles?: boolean;
 };
 declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
 type Accordion = ReturnType<typeof Accordion>;

package/dist/components/ui/Button.svelte

@@ -7,162 +7,257 @@
     componentNameProp = undefined,
     onClickFunction = undefined,
     noPadding = false,
+    direction = null, // "ascending" | "descending" | null
+    disabled = false,
   } = $props();
 
   let buttonClass = $derived(
-    buttonType === "default"
-      ? "govuk-button"
-      : buttonType === "secondary"
-        ? "govuk-button govuk-button--secondary"
-        : buttonType === "warning"
-          ? "govuk-button govuk-button--warning"
-          : buttonType === "dark background"
-            ? "govuk-button govuk-button--inverse"
-            : undefined,
+          buttonType === "default"
+                  ? "govuk-button"
+                  : buttonType === "secondary"
+                          ? "govuk-button govuk-button--secondary"
+                          : buttonType === "warning"
+                                  ? "govuk-button govuk-button--warning"
+                                  : buttonType === "dark background"
+                                          ? "govuk-button govuk-button--inverse"
+                                          : undefined,
   );
 </script>
 
 {#if noPadding}
   {#if buttonType === "moreInfo"}
     <div>
-      <button class="more-info-button" onclick={onClickFunction}>
+      <button class="more-info-button" type="button" onclick={onClickFunction}>
         <Icon kind="info" />
       </button>
     </div>
+
   {:else if buttonType === "start"}
     <a
-      href={"#"}
-      role="button"
-      draggable="false"
-      class="govuk-button govuk-button--start"
-      data-module="govuk-button"
-      onclick={onClickFunction}
+            href="#"
+            role="button"
+            draggable="false"
+            class="govuk-button govuk-button--start"
+            data-module="govuk-button"
+            onclick={onClickFunction}
     >
       {textContent}
       <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"
+              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>
+
   {:else if buttonType === "disabled"}
     <button
-      type="submit"
-      disabled
-      aria-disabled="true"
-      class="govuk-button"
-      data-module="govuk-button"
-      onclick={onClickFunction}
+            type="submit"
+            disabled
+            aria-disabled="true"
+            class="govuk-button"
+            data-module="govuk-button"
+            onclick={onClickFunction}
     >
       {textContent}
     </button>
+
   {:else if buttonType === "table header"}
-    <button type="button" class="text-header" onclick={onClickFunction}>
-      {textContent}
-      <svg
-        width="22"
-        height="22"
-        focusable="false"
-        aria-hidden="true"
-        role="img"
-        viewBox="0 0 22 22"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class="top-triangle"
-          d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
-          fill="currentColor"
-        ></path>
-        <path
-          class="bottom-triangle"
-          d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
-          fill="currentColor"
-        ></path>
-      </svg>
+    <button
+            type="button"
+            class="text-header"
+            onclick={onClickFunction}
+            disabled={disabled}
+    >
+      <span>{textContent}</span>
+
+      <span class="sort-icon" aria-hidden="true">
+        {#if direction === "ascending"}
+          <svg
+                  class="sort-arrow-single"
+                  width="1em"
+                  height="1em"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 22 22"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+                    d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+                    fill="currentColor"
+            ></path>
+          </svg>
+        {:else if direction === "descending"}
+          <svg
+                  class="sort-arrow-single"
+                  width="1em"
+                  height="1em"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 22 22"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+                    d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+                    fill="currentColor"
+            ></path>
+          </svg>
+        {:else}
+          <svg
+                  class="sort-arrow-both"
+                  width="1em"
+                  height="1em"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 22 22"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+                    d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+                    fill="currentColor"
+            ></path>
+            <path
+                    d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+                    fill="currentColor"
+            ></path>
+          </svg>
+        {/if}
+      </span>
     </button>
+
   {:else}
     <button
-      type="submit"
-      class={buttonClass}
-      data-module="govuk-button"
-      onclick={onClickFunction}
+            type="submit"
+            class={buttonClass}
+            data-module="govuk-button"
+            onclick={onClickFunction}
     >
       {textContent}
     </button>
   {/if}
+
 {:else}
   <div class="p-4">
     {#if buttonType === "start"}
       <a
-        href={"#"}
-        role="button"
-        draggable="false"
-        class="govuk-button govuk-button--start"
-        data-module="govuk-button"
-        onclick={onClickFunction}
+              href="#"
+              role="button"
+              draggable="false"
+              class="govuk-button govuk-button--start"
+              data-module="govuk-button"
+              onclick={onClickFunction}
       >
         {textContent}
         <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"
+                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>
+
     {:else if buttonType === "disabled"}
       <button
-        type="submit"
-        disabled
-        aria-disabled="true"
-        class="govuk-button"
-        data-module="govuk-button"
-        onclick={onClickFunction}
+              type="submit"
+              disabled
+              aria-disabled="true"
+              class="govuk-button"
+              data-module="govuk-button"
+              onclick={onClickFunction}
       >
         {textContent}
       </button>
+
     {:else if buttonType === "table header"}
-      <button type="button" class="text-header" onclick={onClickFunction}>
-        {textContent}
-        <svg
-          width="22"
-          height="22"
-          focusable="false"
-          aria-hidden="true"
-          role="img"
-          viewBox="0 0 22 22"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            class="top-triangle"
-            d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
-            fill="currentColor"
-          ></path>
-          <path
-            class="bottom-triangle"
-            d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
-            fill="currentColor"
-          ></path>
-        </svg>
+      <button
+              type="button"
+              class="text-header"
+              onclick={onClickFunction}
+              disabled={disabled}
+      >
+        <span>{textContent}</span>
+
+        <span class="sort-icon" aria-hidden="true">
+          {#if direction === "ascending"}
+            <svg
+                    class="sort-arrow-single"
+                    width="1em"
+                    height="1em"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 22 22"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                      d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+                      fill="currentColor"
+              ></path>
+            </svg>
+          {:else if direction === "descending"}
+            <svg
+                    class="sort-arrow-single"
+                    width="1em"
+                    height="1em"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 22 22"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                      d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+                      fill="currentColor"
+              ></path>
+            </svg>
+          {:else}
+            <svg
+                    class="sort-arrow-both"
+                    width="1em"
+                    height="1em"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 22 22"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                      d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+                      fill="currentColor"
+              ></path>
+              <path
+                      d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+                      fill="currentColor"
+              ></path>
+            </svg>
+          {/if}
+        </span>
       </button>
+
+    {:else if buttonType === "moreInfo"}
+      <button class="more-info-button" type="button" onclick={onClickFunction}>
+        <Icon kind="info" />
+      </button>
+
     {:else}
       <button
-        type="button"
-        class={buttonClass}
-        data-module="govuk-button"
-        onclick={onClickFunction}
+              type="button"
+              class={buttonClass}
+              data-module="govuk-button"
+              onclick={onClickFunction}
       >
         {textContent}
       </button>
@@ -176,6 +271,26 @@
     color: #005ea5;
   }
 
+  .sort-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sort-icon svg {
+    display: block;
+  }
+
+  .sort-arrow-single {
+    width: 1em;
+    height: 1em;
+  }
+
+  .sort-arrow-both {
+    width: 1em;
+    height: 1em;
+  }
+
   .more-info-button {
     display: flex;
     flex: none;
@@ -185,11 +300,11 @@
     cursor: pointer;
   }
 
-  /* For the scale on hover of group parent */
   :hover .more-info-button {
     transform: scale(1.25);
   }
+
   .more-info-button.custom-ring {
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 1);
   }
-</style>
+</style>

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

@@ -9,6 +9,8 @@ declare const Button: import("svelte").Component<{
     componentNameProp?: any;
     onClickFunction?: any;
     noPadding?: boolean;
+    direction?: any;
+    disabled?: boolean;
 }, {}, "">;
 type $$ComponentProps = {
     textContent?: any;
@@ -16,4 +18,6 @@ type $$ComponentProps = {
     componentNameProp?: any;
     onClickFunction?: any;
     noPadding?: boolean;
+    direction?: any;
+    disabled?: boolean;
 };

package/package.json

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