From fee2b9124b859f9a548e3fa257d53294ce83dc08 Mon Sep 17 00:00:00 2001
From: Phil-NHS <philip.tate@nhs.net>
Date: Tue, 17 Jun 2025 17:14:08 +0100
Subject: [PATCH 1/9] feat(searchexperiment): in theory

---
 .../Components/BaseComponents/TELButton.razor |  40 ++--
 .../Core/Compliance/IAccessibleComponent.cs   |   8 +-
 .../SearchExperiment/DummyData.cs             |  65 ++++++
 .../SearchExperiment/SearchExperiment.razor   | 199 +++++++++++++++++-
 4 files changed, 285 insertions(+), 27 deletions(-)
 create mode 100644 TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/DummyData.cs

diff --git a/TELBlazor.Components/Components/BaseComponents/TELButton.razor b/TELBlazor.Components/Components/BaseComponents/TELButton.razor
index 057c840..867626c 100644
--- a/TELBlazor.Components/Components/BaseComponents/TELButton.razor
+++ b/TELBlazor.Components/Components/BaseComponents/TELButton.razor
@@ -19,26 +19,26 @@ else
 {
     @*FormData as the model doesnt really mean anything were not using it if its blazor*@
     <EditForm 
-    Model="FormData"
-    OnSubmit="HandleClick"
-    action="@NoJSActionUrl"
-    role="form"
-    tabindex="-1"
-    method="post">
-        @foreach (var keyValuePair in FormData)
-        {
-            <input tabindex="-1" type="hidden" name="@keyValuePair.Key" value="@keyValuePair.Value" />
-        }
-        <TELButtonSubComponent 
-        ButtonStyle="@ButtonStyle"
-        ButtonText="@ButtonText"
-        AriaLabel="@AriaLabel"
-        AssistiveText="@AssistiveText"
-        TabIndex="@TabIndex"
-        ToolTipTitle="@ToolTipTitle"
-        AdditionalCssClasses="@AdditionalCssClasses"
-        PreventDoubleClick="@PreventDoubleClick"
-        />
+        Model="FormData"
+        OnSubmit="HandleClick"
+        action="@NoJSActionUrl"
+        role="form"
+        tabindex="-1"
+        method="post">
+            @foreach (var keyValuePair in FormData)
+            {
+                <input tabindex="-1" type="hidden" name="@keyValuePair.Key" value="@keyValuePair.Value" />
+            }
+            <TELButtonSubComponent 
+            ButtonStyle="@ButtonStyle"
+            ButtonText="@ButtonText"
+            AriaLabel="@AriaLabel"
+            AssistiveText="@AssistiveText"
+            TabIndex="@TabIndex"
+            ToolTipTitle="@ToolTipTitle"
+            AdditionalCssClasses="@AdditionalCssClasses"
+            PreventDoubleClick="@PreventDoubleClick"
+            />
     </EditForm>
 }
 
diff --git a/TELBlazor.Components/Core/Compliance/IAccessibleComponent.cs b/TELBlazor.Components/Core/Compliance/IAccessibleComponent.cs
index c1a2036..85379d4 100644
--- a/TELBlazor.Components/Core/Compliance/IAccessibleComponent.cs
+++ b/TELBlazor.Components/Core/Compliance/IAccessibleComponent.cs
@@ -21,11 +21,15 @@ public interface IAccessibleComponent
 
         /// <summary>
         /// The title attribute for the button, shown as a tooltip.
+        /// <h1>😱😱😱😱😱 1st rule of aria don't use aria, second rule of aria ... 😱😱😱😱</h1>
+        /// qqqq
         /// </summary>
         /// <remarks>
         /// Use a brief message that reinforces the button's action. 
         /// Example: "Click to save the current list".
         /// Tooltips can provide additional context or information to users hovering over the button.
+        /// For more info, see <see href="https://service-manual.nhs.uk/accessibility/development" />
+        /// For more info, see <see href="https://service-manual.nhs.uk/accessibility/development#use-aria-patterns" />
         /// </remarks>
         public string ToolTipTitle { get; set; }
 
@@ -40,13 +44,14 @@ public interface IAccessibleComponent
         public string AssistiveText { get; set; }
 
         /// <summary>
-        /// The ARIA role of the button.
+        /// The ARIA role of the button
         /// </summary>
         /// <remarks>
         /// Define the role of the button to provide additional context for assistive technologies.
         /// Example: "button".
         /// Use roles that accurately describe the element's function. If unsure, refer to 
         /// the ARIA roles documentation to choose the appropriate role.
+
         /// </remarks>
         public string AriaRole { get; set; }
 
@@ -61,6 +66,7 @@ public interface IAccessibleComponent
         /// Example: 0.
         /// The default is 0, which includes it in the natural tab order. 
         /// This property helps with keyboard navigation.
+   
         /// </remarks>
         public int TabIndex { get; set; }
     }
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/DummyData.cs b/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/DummyData.cs
new file mode 100644
index 0000000..23d70e4
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/DummyData.cs
@@ -0,0 +1,65 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TELBlazor.Components.OptionalImplementations.TestComponents.SearchExperiment
+{
+    public static class DummyData
+    {
+        public static readonly List<string> AllTerms = new()
+{
+    "Dental care", "Dental hygiene", "Dental implants", "Dental braces", "Dental bleeding",
+    "Dental crowns", "Dental fillings", "Dental anxiety", "Dental pain", "Dental treatment",
+    "Dental checkup", "Dental cleaning", "Dental x-ray", "Dental surgery", "Dental emergency",
+    "Tooth extraction", "Toothache", "Tooth infection", "Tooth decay", "Tooth whitening",
+    "Gum disease", "Gum bleeding", "Gum recession", "Gum pain", "Gum treatment",
+    "False teeth", "Dentures", "Dental prosthetics", "Teeth grinding", "Teeth straightening",
+    "Teeth sensitivity", "Teeth whitening kits", "Wisdom teeth", "Root canal", "Jaw pain",
+
+    "Mouth ulcers", "Mouth guards", "Mouthwash", "Oral hygiene", "Oral pain", "Oral cancer",
+    "Oral surgery", "Oral examination", "Oral infection", "Bad breath", "Plaque control",
+
+    "Medical checkup", "Health checkup", "General examination", "Annual physical",
+    "Blood test", "Urine test", "X-ray chest", "CT scan", "MRI brain", "Eye examination",
+    "Vision test", "Hearing test", "Hearing aid fitting", "Skin check", "Skin biopsy",
+
+    "Back pain", "Neck pain", "Joint pain", "Chest pain", "Abdominal pain",
+    "Leg swelling", "Arm numbness", "Foot infection", "Hand injury", "Hip replacement",
+
+    "Heart checkup", "Heart surgery", "Heart failure", "Heart palpitations", "Chest tightness",
+    "Lung infection", "Pneumonia treatment", "Breathing problems", "Shortness of breath", "Asthma attack",
+
+    "Skin rash", "Skin irritation", "Eczema treatment", "Psoriasis care", "Acne treatment",
+    "Wound dressing", "Burn treatment", "Scar removal", "Skin peeling", "Allergy treatment",
+
+    "Ear infection", "Throat infection", "Sinus infection", "Eye infection", "Nasal bleeding",
+    "Frequent nosebleeds", "Throat pain", "Swollen lymph nodes", "Ear pain", "Voice loss",
+
+    "Fever symptoms", "High temperature", "Cough treatment", "Cold remedies", "Flu vaccination",
+    "COVID-19 testing", "COVID-19 symptoms", "Headache relief", "Migraine treatment", "Dizziness causes",
+
+    "Depression treatment", "Anxiety management", "Mental health support", "Counseling services",
+    "Sleep disorder", "Insomnia treatment", "Panic attacks", "Therapy sessions", "Psychiatric assessment",
+
+    "Diabetes checkup", "Blood sugar test", "Insulin treatment", "Weight management", "Obesity care",
+    "Dietician referral", "Nutrition advice", "Cholesterol test", "Hypertension treatment", "Blood pressure check",
+
+    "Cancer screening", "Mammogram exam", "Colon cancer test", "Prostate exam", "Biopsy procedure",
+    "Tumor removal", "Oncology referral", "Radiation therapy", "Chemotherapy care", "Cancer pain management",
+
+    "Pregnancy test", "Prenatal checkup", "Fertility consultation", "Birth plan", "Ultrasound scan",
+    "Labour support", "Midwife appointment", "Postnatal care", "Infant checkup", "Child immunisation",
+
+    "Vaccination record", "Tetanus shot", "Flu jab", "Hepatitis B shot", "Travel vaccines",
+
+    "Infection treatment", "Antibiotic prescription", "Inflammation control", "Immune system check",
+    "Wound infection", "Blood poisoning", "Sepsis symptoms", "Fungal infection", "Viral infection", "Bacterial infection",
+
+    "Pain management", "Bleeding control", "Emergency care", "Treatment plan", "Recovery plan",
+    "Follow-up visit", "Health advice", "Patient education", "Medication review", "Drug interaction"
+};
+
+    }
+}
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor b/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor
index 605f4da..9bfcdb5 100644
--- a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor
+++ b/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor
@@ -1,17 +1,76 @@
-<!--qqqq see microsoft default and ecommerce-->
+@using System.Diagnostics
+<!--qqqq see microsoft default and ecommerce-->
 <!--@bind-value="SearchText"
 @bind-value:event="oninput"-->
 <!--will want debounce-->
 <!--will want cancel if still going-->
-
+@inherits TELComponentBase
+<!--think it will be a specific service instead-->
+@inject NavigationManager NavigationManager 
+@* @implements IDisposable *@
+@using static DummyData
 <header class="nhsuk-header" role="banner">
     <div id="content-header">
         <div class="nhsuk-width-container nhsuk-header__container app-width-container ">
             <div class="nhsuk-header__search">
                 <div class="nhsuk-header__search-wrap" id="wrap-search">
-                    <form class="nhsuk-header__search-form" id="search" method="get" role="search" action="/search/results">
+                    <!--qqqq ending up with nojsfallback in both places may need button redesign-->
+                        <EditForm Model="FormData" OnSubmit="SendSearchRequest" action="@(NoJSActionUrl)"
+                                role="form" 
+                                tabindex="0" 
+                                method="post" >
+                                <!--shouldnt need-->
+                        @foreach (var keyValuePair in FormData)
+                        {
+                            <input tabindex="-1" type="hidden" name="@keyValuePair.Key" value="@keyValuePair.Value" />
+                        }
+                        <div class="nhsuk-header__search-form" role="search">
+                            <label class="nhsuk-u-visually-hidden" for="search-field">Search the learning hub</label>
+                            <input class="nhsuk-search__input"
+                                   id="search-field-some-guid"
+                                   name="term"
+                                   type="search"
+                                   list="search-suggestions-some-guid"
+                                   placeholder="Search the learning hub"
+                                   autocomplete="off"
+                                   @bind-value="searchText"
+                                   @bind-value:event="oninput"
+                                   @onkeyup="HandleInput"
+                                   @ref="searchInput" 
+                                   />
+                            <datalist id="search-suggestions-some-guid" class="nhsuk-list autosuggestion-menu">
+                                @foreach (var suggestion in suggestions)
+                                {
+                                    <option>@suggestion</option>
+                                }
+                            </datalist>
+                      
+
+                                   <!--button needs changing for icon-->
+                            <TELButton IsSubmitButtonForEditForm=true
+                                   NoJSActionUrl="@NoJSActionUrl"
+                                   ButtonStyle="TELButtonStyle.Primary"
+                                   PreventDoubleClick=false
+                                       ButtonText="🔎"
+                                   AdditionalCssClasses=""
+                                   AriaLabel="Make search request"
+                                   AssistiveText="The page will auto search on debounce if you have js enabled"
+                                   TabIndex="0"
+                                       ToolTipTitle="Click to search"/>
+                        @*          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
+                                    <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
+                                </svg>
+                            </TELButton>  *@
+                        </div>
+                 </EditForm>
+                  
+
+
+
+                    @*Copy original*@
+@*                     <form class="nhsuk-header__search-form" id="search" method="get" role="search" action="/search/results">
                         <label class="nhsuk-u-visually-hidden" for="search-field">Search the learning hub</label>
-                        <input class="nhsuk-search__input" id="search-field" name="term" type="search" placeholder="Search the learning hub" autocomplete="off" >
+                        <input class="nhsuk-search__input" id="search-field" name="term" type="search" placeholder="Search the learning hub" autocomplete="off">
                         <ul id="search-field_listbox" class="nhsuk-list autosuggestion-menu" style="display:none"></ul>
                         <button class="nhsuk-search__submit" type="submit">
                             <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
@@ -26,9 +85,137 @@
                             </svg>
                             <span class="nhsuk-u-visually-hidden">Close search</span>
                         </label>
-                    </form>
+                    </form> *@
+
+
                 </div>
             </div>
         </div>
     </div>
-</header>
\ No newline at end of file
+</header>
+@* <section class="search-suggestions">
+    <h3>Search Suggestions</h3>
+    <datalist id="search-suggestions-some-guid" class="nhsuk-list autosuggestion-menu">
+        @foreach (var suggestion in suggestions)
+        {
+            <option>@suggestion</option>
+        }
+</datalist>
+</section> *@
+<section class="search-results">
+    <h3>Search Results</h3>
+    <ul>
+        @foreach (var result in searchResults)
+        {
+            <li>@result</li>
+        }
+    </ul>
+</section>
+@code{
+
+    [Parameter] public Dictionary<string, string> FormData { get; set; } = new();//shouldnt need
+    [EditorRequired, Parameter] public required string NoJSActionUrl { get; set; } = "nojsfallback/mvcendpoint/search"; // URL for the form submission
+    private List<string> searchResults = new List<string>();
+    private string searchText = string.Empty;
+    private List<string> suggestions = new List<string>();
+    protected ElementReference searchInput;
+
+
+
+
+    private CancellationTokenSource _cts;
+    /*avoid potential memory leak from mvc taredown by counting down not up by not search on first 3 letters can initiate*/
+    private Timer? _debounceTimer;
+    private readonly TimeSpan _debouncePeriod = TimeSpan.FromMilliseconds(500);
+
+    // SendSearchRequest SendSuggestionRequest presumeably same end point but maybe a bool for no suggestions
+
+    private void StartDebounceCountdown()
+    {
+        // Dispose any existing timer first
+        _debounceTimer?.Dispose();
+
+        // Start a new one-shot countdown timer
+        _debounceTimer = new Timer(_ =>
+        {
+            _debounceTimer?.Dispose();
+            _debounceTimer = null;
+        },
+        null,
+        _debouncePeriod,
+        Timeout.InfiniteTimeSpan);
+    }
+
+    private async Task SendSearchRequest()
+    {
+        <!--qqqq will look very similar because isnt meta data or additional information per term to display-->
+        suggestions.Clear();
+
+        _cts?.Cancel(); // cancel prior search
+        _cts = new CancellationTokenSource();
+
+        try
+        {
+            await Task.Delay(200, _cts.Token); // simulate network delay
+        // Fake search results — in real life this could be an API call
+        searchResults = AllTerms
+                .Where(x => x.Contains(searchText, StringComparison.OrdinalIgnoreCase))
+            .OrderBy(x => x)
+            .ToList();
+        }
+        catch (OperationCanceledException)
+        {
+            // Ignore cancelled searches
+        }
+    }
+    private async Task GetSuggestionsAsync()
+    {
+        _cts?.Cancel(); // cancel prior search
+        _cts = new CancellationTokenSource();
+
+        try
+        {
+            await Task.Delay(200, _cts.Token); // simulate network delay
+
+            suggestions = DummyData.AllTerms
+                .Where(x => x.Contains(searchText, StringComparison.OrdinalIgnoreCase))
+                .OrderBy(x => x)
+                .Take(10)
+                .ToList();
+
+        }
+        catch (OperationCanceledException)
+        {
+            // Ignore cancelled searches
+        }
+    }
+
+    
+    public async Task HandleInput(KeyboardEventArgs args)
+    {
+        if (args.Key == null || args.Key.Equals("Enter"))
+        {
+            
+            /*fire forget?*/
+            await SendSearchRequest();
+            //_ = SendSearchRequest();
+        }
+        else if (_debounceTimer != null || searchText.Length < 4 )
+        {
+            StartDebounceCountdown();
+        }
+        else
+        {
+            StartDebounceCountdown();
+            /*fire forget?*/
+            await GetSuggestionsAsync();
+           // _ = GetSuggestionsAsync();
+        }
+    }
+    /*careful mvc taredown wont call it so self dispose too*/
+    // says not implement
+    // public void Dispose()
+    // {
+    //     _debounceTimer?.Dispose();
+    // }
+}
\ No newline at end of file

From 087f176c94b5c41b7bafa6702eab05ccad806238 Mon Sep 17 00:00:00 2001
From: Phil-NHS <philip.tate@nhs.net>
Date: Tue, 24 Jun 2025 16:14:10 +0100
Subject: [PATCH 2/9] chore(squash): squashed

---
 .github/workflows/dev.yml                     |  57 +-
 .github/workflows/pull_request.yml            |   2 +-
 .github/workflows/release.yml                 |  80 ++-
 .github/workflows/reuseable-ci-checks.yml     |  92 ++-
 .gitignore                                    |   1 +
 .runsettingsTemplate                          |  26 +-
 CHANGELOG.md                                  |  21 +
 CICD.runsettings                              |   3 -
 PackageSettings.props                         |  41 +-
 PackageSettings.props.local.template          |  19 +-
 README-previous -del-later.md                 | 573 ++++++++++++++++++
 README.md                                     | 522 ++++++----------
 .../Program.cs                                |  13 +-
 .../packages.lock.json                        |  14 +-
 .../appsettings.Development.json.template     |   4 +
 .../Program.cs                                |   4 +-
 .../_Imports.razor                            |   1 +
 .../appsettings.Development.json.template     |   4 +
 .../packages.lock.json                        |   4 +-
 .../packages.lock.json                        |   4 +-
 .../Layouts/ComponentLayouts/ShowCase.razor   |   5 +-
 .../Layouts/MainLayout.razor                  |   2 +
 .../Pages/Error.razor                         |   4 +-
 .../Pages/NoJSFormSubmitStubPage.razor        |  12 +
 .../SearchExperimentPage.razor                |  13 +-
 .../Utilities/JSDisabledWarning.razor         |   3 +
 .../_Imports.razor                            |   5 +-
 .../Program.cs                                |  18 +-
 .../packages.lock.json                        |  14 +-
 .../appsettings.Development.json.template     |   5 +
 TELBlazor.Components.UnitTests/_Imports.razor |   2 +-
 .../Components/BaseComponents/TELButton.razor |   2 +-
 .../OptionalImplementations/Core/DI/DI.cs     |   9 +
 .../TestComponents/CssSourceChecker.razor     |   0
 .../TestComponents/CssSourceChecker.razor.css |   0
 .../TestComponents/LogLevelSwitcher.razor     |   0
 .../SearchExperiment/DummyData.cs             |   2 +-
 .../ISearchExperimentService.cs               |  53 ++
 .../SearchExperiment/SearchExperiment.razor   |  89 ++-
 .../SearchExperimentModels.cs                 |  32 +
 .../SearchExperimentServiceOpenApi.cs         | 196 ++++++
 .../TELBlazor.Components.csproj               |  13 +-
 .../VersionInfo.TELBlazor.cs                  |   9 +-
 .../VersionInfo.TELBlazorAssembly.cs          |   8 +
 .../TELBlazorPackageVersion/VersionInfo.cs    |   5 -
 TELBlazor.Components/_Imports.razor           |   4 +-
 TELBlazor.sln                                 |   2 +
 nuget.config                                  |  25 +-
 nuget.config.cicd                             |  32 +
 nuget.config.template                         |  39 ++
 run-tests-and-report-with-env-values.ps1      |   7 +-
 51 files changed, 1455 insertions(+), 640 deletions(-)
 create mode 100644 README-previous -del-later.md
 create mode 100644 TELBlazor.Components.ShowCase.Shared/Pages/NoJSFormSubmitStubPage.razor
 create mode 100644 TELBlazor.Components.ShowCase.Shared/Utilities/JSDisabledWarning.razor
 rename TELBlazor.Components/OptionalImplementations/{ => Test}/TestComponents/CssSourceChecker.razor (100%)
 rename TELBlazor.Components/OptionalImplementations/{ => Test}/TestComponents/CssSourceChecker.razor.css (100%)
 rename TELBlazor.Components/OptionalImplementations/{ => Test}/TestComponents/LogLevelSwitcher.razor (100%)
 rename TELBlazor.Components/OptionalImplementations/{ => Test}/TestComponents/SearchExperiment/DummyData.cs (97%)
 create mode 100644 TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ISearchExperimentService.cs
 rename TELBlazor.Components/OptionalImplementations/{ => Test}/TestComponents/SearchExperiment/SearchExperiment.razor (68%)
 create mode 100644 TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentModels.cs
 create mode 100644 TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentServiceOpenApi.cs
 create mode 100644 TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazorAssembly.cs
 delete mode 100644 TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.cs
 create mode 100644 nuget.config.cicd
 create mode 100644 nuget.config.template

diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml
index e8054ba..db9f58e 100644
--- a/.github/workflows/dev.yml
+++ b/.github/workflows/dev.yml
@@ -13,18 +13,17 @@ permissions:
 env:
 
   # Permission
-  # Need more permissive token
   GITHUB_TOKEN: ${{ secrets.NUGETKEY }}
-  PACKAGES_TOKEN: ${{ secrets.NUGETKEY }}
+  TEL_GIT_PACKAGES_TOKEN: ${{ secrets.NUGETKEY }}
   GITHUB_USERNAME: "Phil-NHS"
 
   # Nuget Set Up
-  TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
-  TELBLAZOR_PACKAGE_SOURCE: "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json"
+  NUGET_PACKAGES_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
+  LOCAL_PACKAGES_PATH : ${{ github.workspace }}/CICDPackageLocation
+  TEL_GIT_PACKAGE_SOURCE: "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json"
   
   # Build Set Up
   USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: false
-  DISABLE_PACKAGE_GENERATION: false
 
 jobs:
 
@@ -41,7 +40,7 @@ jobs:
       WASMSERVERHOST_APPSETTINGS_DEVELOPMENT: ${{ secrets.WASMSERVERHOST_APPSETTINGS_DEVELOPMENT }}
       
       # Token
-      PACKAGES_TOKEN: ${{secrets.NUGETKEY }}
+      TEL_GIT_PACKAGES_TOKEN: ${{secrets.NUGETKEY }}
       
       # Prod
       UNITTESTS_APPSETTINGS_PRODUCTION: ${{ secrets.UNITTESTS_APPSETTINGS_PRODUCTION }}
@@ -150,8 +149,13 @@ jobs:
       - name: Debug version output DEV_TELBLAZOR_PACKAGE_VERSION
         run: echo "Extracted Version $DEV_TELBLAZOR_PACKAGE_VERSION "
         
+      - name: Replace nuget.config with CI template
+        run: |
+          rm -f nuget.config
+          cp nuget.config.cicd nuget.config
+    
       - name: Replace local environment variable in nuget config because cant provide it as a parameter
-        run: sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH|g" nuget.config
+        run: sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
        
       - name: Create appsettings development from secrets
         run: |
@@ -187,20 +191,18 @@ jobs:
         #CI is an install that adheres to package-lock
       
       - name: Build TELBlazor.Components (it publishes on build)
-        env:
-          DISABLE_PACKAGE_GENERATION: false
         run: |
           dotnet build TELBlazor.Components -c Release \
             /p:TELBlazorPackageVersion=$DEV_TELBLAZOR_PACKAGE_VERSION \
-            /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+            /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
             /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-            /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+            /p:DisablePackageGeneration=false
  
       - name: Publish to TechnologyEnhancedLearning as a Dev Package
         run: |
-          dotnet nuget push "$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH/TELBlazor.Components.*.nupkg" \
-          --source "$TELBLAZOR_PACKAGE_SOURCE" \
-          --api-key $PACKAGES_TOKEN \
+          dotnet nuget push "$NUGET_PACKAGES_OUTPUT_PATH/TELBlazor.Components.*.nupkg" \
+          --source $TEL_GIT_PACKAGE_SOURCE \
+          --api-key $TEL_GIT_PACKAGES_TOKEN \
           --skip-duplicate      
           
   
@@ -228,12 +230,17 @@ jobs:
           echo "Cleaning the solution..."
           dotnet clean TELBlazor.sln
           
-        
+      - name: Replace nuget.config with CI template
+        run: |
+          rm -f nuget.config
+          cp nuget.config.cicd nuget.config
+    
       - name: Replace local environment variable in nuget config because cant provide it as a parameter
         run: |
-          sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_SOURCE|g" nuget.config
+          sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$TEL_GIT_PACKAGE_SOURCE|g" nuget.config
           sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
-          sed -i "s|%GITHUB_PACKAGES_TOKEN%|$PACKAGES_TOKEN|g" nuget.config
+          sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
+
         
       - name: debug DEV_TELBLAZOR_PACKAGE_VERSION
         run: |
@@ -257,7 +264,7 @@ jobs:
             printf '%s' "${paths[$path]}" > "$path"
           done        
           
-      - name: Clean lock files because the newly generated package file will superseed the locks
+      - name: Clean lock files because the newly generated package file will supersede the locks
         run: |
           echo "Listing packages.lock.json files:"
           find . -name "packages.lock.json" -type f -print
@@ -277,24 +284,20 @@ jobs:
         run: npm ci   
 
       - name: Build solution without generating new package
-        env:
-              #Overwrite package generation
-          DISABLE_PACKAGE_GENERATION: true
         run: |
           dotnet build TELBlazor.sln -c Release \
             /p:TELBlazorPackageVersion=$DEV_TELBLAZOR_PACKAGE_VERSION \
-            /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+            /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
             /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-            /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-            /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+            /p:DisablePackageGeneration=true
 
       - name: Publish WasmStaticClient
         run: |
           dotnet publish ./TELBlazor.Components.ShowCase.WasmStaticClient/TELBlazor.Components.ShowCase.WasmStaticClient.csproj --configuration Release \
             /p:TELBlazorPackageVersion=$DEV_TELBLAZOR_PACKAGE_VERSION \
-            /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+            /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
             /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-            /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE
+            /p:DisablePackageGeneration=true
 
       #include hidden so we get jekyll
       - name: Creating artifact of publish folder for test gh page workflow
@@ -331,7 +334,7 @@ jobs:
           curl -L \
             -X POST \
             -H "Accept: application/vnd.github+json" \
-            -H "Authorization: Bearer $PACKAGES_TOKEN" \
+            -H "Authorization: Bearer $TEL_GIT_PACKAGES_TOKEN" \
             -H "X-GitHub-Api-Version: 2022-11-28" \
             https://api.github.com/repos/$repo_owner/$repo_name/dispatches \
             -d "{\"event_type\": \"$event_type\", \"client_payload\": {\"artifact_url\": \"$artifact_url\"}}"      
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
index 7456b19..371ddcc 100644
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -23,7 +23,7 @@ jobs:
       WASMSTATICCLIENT_APPSETTINGS_DEVELOPMENT: ${{ secrets.WASMSTATICCLIENT_APPSETTINGS_DEVELOPMENT }}
       WASMSERVERHOSTCLIENT_APPSETTINGS_DEVELOPMENT: ${{ secrets.WASMSERVERHOSTCLIENT_APPSETTINGS_DEVELOPMENT }}
       WASMSERVERHOST_APPSETTINGS_DEVELOPMENT: ${{ secrets.WASMSERVERHOST_APPSETTINGS_DEVELOPMENT }}
-      PACKAGES_TOKEN: ${{secrets.NUGETKEY }}
+      TEL_GIT_PACKAGES_TOKEN: ${{secrets.NUGETKEY }}
       
       UNITTESTS_APPSETTINGS_PRODUCTION: ${{ secrets.UNITTESTS_APPSETTINGS_PRODUCTION }}
       WASMSTATICCLIENT_APPSETTINGS_PRODUCTION: ${{ secrets.WASMSTATICCLIENT_APPSETTINGS_PRODUCTION }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index bb222bd..31f24a9 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -14,16 +14,17 @@ env:
   # Permission
   # Using key with more permissions
   GITHUB_TOKEN: ${{ secrets.NUGETKEY }}
-  PACKAGES_TOKEN: ${{ secrets.NUGETKEY }}
+  TEL_GIT_PACKAGES_TOKEN: ${{ secrets.NUGETKEY }}
   GITHUB_USERNAME: "Phil-NHS"
 
   # Nuget Set Up
-  TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
-  TELBLAZOR_PACKAGE_SOURCE: "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json"
+  NUGET_PACKAGES_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
+  LOCAL_PACKAGES_PATH: ${{ github.workspace }}/CICDPackageLocation
+  TEL_GIT_PACKAGE_SOURCE : "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json"
   
   # Build Set Up
   USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: false
-  DISABLE_PACKAGE_GENERATION: false
+
 
 jobs:
   generate-semantic-version:
@@ -52,7 +53,7 @@ jobs:
        
 
 
-      #configured with .releaseseec
+      #configured with .releaseserc
       - name: Run semantic release
         id: set_semantic_version
         run: |
@@ -97,9 +98,16 @@ jobs:
       - name: Remove local package settings (CI Only)
         run: rm -f PackageSettings.props.local
         
-
+      - name: Replace nuget.config with CI template
+        run: |
+          rm -f nuget.config
+          cp nuget.config.cicd nuget.config
+    
       - name: Replace local environment variable in nuget config because cant provide it as a parameter
-        run: sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH|g" nuget.config
+        run: |
+          sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
+          sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
+          sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
 
       - name: Create appsettings development from secrets
         run: |
@@ -131,37 +139,22 @@ jobs:
     
       - name: Install npm packages so we have gulp for retrieving TEL Frontend Css
         run: npm ci
-        #CI is an install with adhering to package-lock
+        #CI is an install that adheres to package-lock
         
-     # - name: Build solution without generating new package
-     #   env:
-     #     #Overwrite package generation
-     #     DISABLE_PACKAGE_GENERATION: true
-     #   run: |
-     #     dotnet build TELBlazor.sln -c Release \
-     #       /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-     #       /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
-     #       /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-     #       /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-     #       /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION 
-     #       
 
       - name: Build and pack TELBlazor.Components
-        env:
-            DISABLE_PACKAGE_GENERATION: false
         run: |
           dotnet build TELBlazor.Components -c Release \
             /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION  \
-            /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+            /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
             /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-            /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-            /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+            /p:DisablePackageGeneration=false
             
       - name: Publish to TELBlazor.Components Package
         run: |
-          dotnet nuget push "$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH/TELBlazor.Components.*.nupkg" \
-          --source "$TELBLAZOR_PACKAGE_SOURCE" \
-          --api-key $PACKAGES_TOKEN \
+          dotnet nuget push "$NUGET_PACKAGES_OUTPUT_PATH/TELBlazor.Components.*.nupkg" \
+          --source "$TEL_GIT_PACKAGE_SOURCE" \
+          --api-key $TEL_GIT_PACKAGES_TOKEN \
           --skip-duplicate      
 
 
@@ -185,12 +178,16 @@ jobs:
         - name: Remove local packagesettings (CI Only)
           run: rm -f PackageSettings.props.local
         
+        - name: Replace nuget.config with CI template
+          run: |
+            rm -f nuget.config
+            cp nuget.config.cicd nuget.config
+    
         - name: Replace local environment variable in nuget config because cant provide it as a parameter
           run: |
-            sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_SOURCE|g" nuget.config
+            sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$TEL_GIT_PACKAGE_SOURCE|g" nuget.config
             sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
-            sed -i "s|%GITHUB_PACKAGES_TOKEN%|$PACKAGES_TOKEN |g" nuget.config
-        
+            sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
 
         - name: Create appsettings development from secrets
           run: |
@@ -232,29 +229,20 @@ jobs:
           run: npm ci  
 
         - name: Build solution without generating new package
-          env:
-              #Overwrite package generation
-            DISABLE_PACKAGE_GENERATION: true
-            USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: false
           run: |
             dotnet build TELBlazor.sln -c Release \
               /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-              /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
-              /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-              /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-              /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+              /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
+              /p:UseTELBlazorComponentsProjectReference=false \
+              /p:DisablePackageGeneration=true
 
         - name: Publish WasmStaticClient TELBlazor ShowCase
-          env:
-              #Overwrite package generation
-            DISABLE_PACKAGE_GENERATION: true
-            USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: false
           run: |
             dotnet publish ./TELBlazor.Components.ShowCase.WasmStaticClient/TELBlazor.Components.ShowCase.WasmStaticClient.csproj --configuration Release \
               /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-              /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
-              /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-              /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE
+              /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
+              /p:UseTELBlazorComponentsProjectReference=false \
+              /p:DisablePackageGeneration=true
                   
         - name: Deploy to GitHub Pages
           uses: JamesIves/github-pages-deploy-action@v4
diff --git a/.github/workflows/reuseable-ci-checks.yml b/.github/workflows/reuseable-ci-checks.yml
index 2345450..077478e 100644
--- a/.github/workflows/reuseable-ci-checks.yml
+++ b/.github/workflows/reuseable-ci-checks.yml
@@ -25,23 +25,21 @@ on:
         required: true
       WASMSERVERHOST_APPSETTINGS_PRODUCTION:
         required: true
-      PACKAGES_TOKEN:
+      TEL_GIT_PACKAGES_TOKEN:
         required: true
         
 env:
 
   # Permission
-  PACKAGES_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
+  TEL_GIT_PACKAGES_TOKEN: ${{ secrets.TEL_GIT_PACKAGES_TOKEN }}
 
   # Nuget Set Up
-  TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
-  TELBLAZOR_PACKAGE_SOURCE: ${{ github.workspace }}/CICDPackageLocation
+  NUGET_PACKAGES_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
+  LOCAL_PACKAGES_PATH: ${{ github.workspace }}/CICDPackageLocation
 
-  
   # Build Set Up
   # May need coverlet.collector xplat if using the packaged version to test
   USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: true
-  DISABLE_PACKAGE_GENERATION: true
   
   # Check Dummy Data
   TELBLAZOR_PACKAGE_VERSION: "0.0.0-ci-checks"
@@ -59,15 +57,23 @@ jobs:
       steps:
       
         - name: Checkout code
-          uses: actions/checkout@v3
+          uses: actions/checkout@v4
           
         - name: Setup .NET
           uses: actions/setup-dotnet@v4
           with:
             global-json-file: global.json
               
+        - name: Replace nuget.config with CI template
+          run: |
+            rm -f nuget.config
+            cp nuget.config.cicd nuget.config
+    
         - name: Replace local environment variable in nuget config because cant provide it as a parameter
-          run: sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH|g" nuget.config
+          run: |
+            sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
+            # sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
+            # sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
           
         - name: Create appsettings development from secrets
           run: |
@@ -102,29 +108,21 @@ jobs:
           run: npm ci   
           
         - name: Build and create package locally
-          env:
-             #Overwrite package generation
-             DISABLE_PACKAGE_GENERATION: false
           run: |
             dotnet build TELBlazor.Components -c Release \
               /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-              /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+              /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
               /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-              /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-              /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+              /p:DisablePackageGeneration=false
 
               
         - name: Build solution without generating new package
-          env:
-              #Overwrite package generation
-              DISABLE_PACKAGE_GENERATION: true
           run: |
             dotnet build TELBlazor.sln -c Release \
               /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-              /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+              /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
               /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-              /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-              /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+              /p:DisablePackageGeneration=true
 
 
     reuseable-ci-checks-branch-name-check:
@@ -184,8 +182,16 @@ jobs:
             with:
               global-json-file: global.json
               
+          - name: Replace nuget.config with CI template
+            run: |
+              rm -f nuget.config
+              cp nuget.config.cicd nuget.config
+    
           - name: Replace local environment variable in nuget config because cant provide it as a parameter
-            run: sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH|g" nuget.config
+            run: |
+              sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
+            # sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
+            # sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
        
           - name: Clean lock files because the newly generated package file will superseed the locks
             run: |
@@ -222,30 +228,20 @@ jobs:
 
       
           - name: Build and create package locally
-            env:
-               #Overwrite package generation
-               DISABLE_PACKAGE_GENERATION: false
             run: |
               dotnet build TELBlazor.Components -c Debug \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-                /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+                /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-                /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-                /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION \
-                /p:E2ETracingEnabled=$E2E_TRACING_ENABLED \
-                /p:HeadlessTesting=$HEADLESS_TESTING 
+                /p:DisablePackageGeneration=false
               
           - name: Build solution without generating new package
-            env:
-                #Overwrite package generation
-                DISABLE_PACKAGE_GENERATION: true
             run: |
               dotnet build TELBlazor.sln -c Debug \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-                /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+                /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-                /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-                /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+                /p:DisablePackageGeneration=true
                 
               
           - name: Ensure browsers are installed
@@ -254,20 +250,12 @@ jobs:
 
           - name: Run tests with coverage threshold check
             id: unit_e2e_tests
-            env:
-              TELBlazorPackageVersion: ${{ env.TELBLAZOR_PACKAGE_VERSION }}
-              NupkgOutputPath: ${{ env.TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH }}
-              UseTELBlazorComponentsProjectReference: ${{ env.USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE }}
-              TELBlazorPackageSource: ${{ env.TELBLAZOR_PACKAGE_SOURCE }}
-              DisablePackageGeneration: ${{ env.DISABLE_PACKAGE_GENERATION }}
-
             run: |
               dotnet test --no-build --no-restore \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-                /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+                /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-                /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-                /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+                /p:DisablePackageGeneration=true
                 
             continue-on-error: true
 
@@ -289,8 +277,8 @@ jobs:
               
           - name: Get artifact location
             env:
-               PACKAGES_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
-               GH_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
+              # requires local set env
+              GH_TOKEN: ${{ secrets.TEL_GIT_PACKAGES_TOKEN }}
             run: |
               # Get the artifact list for the current workflow run
               ARTIFACT_LIST=$(gh api "repos/TechnologyEnhancedLearning/TELBlazor/actions/runs/${GITHUB_RUN_ID}/artifacts")
@@ -305,9 +293,6 @@ jobs:
               
           
           - name: Trigger workflow in TELBlazor-CodeReport repo
-            env:
-               PACKAGES_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
-               GH_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
             run: |
               repo_owner="TechnologyEnhancedLearning"
               repo_name="TELBlazor-CodeReport"
@@ -316,18 +301,17 @@ jobs:
               curl -L \
                 -X POST \
                 -H "Accept: application/vnd.github+json" \
-                -H "Authorization: Bearer $PACKAGES_TOKEN" \
+                -H "Authorization: Bearer $TEL_GIT_PACKAGES_TOKEN" \
                 -H "X-GitHub-Api-Version: 2022-11-28" \
                 https://api.github.com/repos/$repo_owner/$repo_name/dispatches \
                 -d "{\"event_type\": \"$event_type\", \"client_payload\": {\"artifact_url\": \"$artifact_url\"}}"  
                 
           - name: Fail job if test failed after report is generated
-            if: steps.unit_e2e_tests.outcome != 'success'  # optional conditional, but optional
+            if: steps.unit_e2e_tests.outcome != 'success'
             run: |
-              if [[ "${{ steps.some-step.outputs.status }}" != "success" ]]; then
+                echo "{{steps.unit_e2e_tests.outcome }}"
                 echo "❌ One or more steps failed."
                 exit 1
-              fi
             
 
     reuseable-ci-checks-check-for-failed-jobs:
diff --git a/.gitignore b/.gitignore
index 1b2e448..21b0753 100644
--- a/.gitignore
+++ b/.gitignore
@@ -206,3 +206,4 @@ CHANGELOG.md
 /TELBlazor.Components.ShowCase.E2ETests/appsettings.Production.json
 /TELBlazor.Components.ShowCase.E2ETests/appsettings.json
 /.runsettings
+/nuget.config
diff --git a/.runsettingsTemplate b/.runsettingsTemplate
index 8491451..b45a7fa 100644
--- a/.runsettingsTemplate
+++ b/.runsettingsTemplate
@@ -1,17 +1,15 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <RunSettings>
-
-  <RunConfiguration>
-    <EnvironmentVariables>
-        <TracingEnabled>True</TracingEnabled>
-        <RunSettingFile>".runsettingsTemplate"</RunSettingFile>
-    </EnvironmentVariables>
-  </RunConfiguration>
-  <Playwright>
-    <LaunchOptions>
-      <Headless>false</Headless>
-		
-    </LaunchOptions>
-  </Playwright>
-
+	<RunConfiguration>
+		<EnvironmentVariables>
+			<TracingEnabled>True</TracingEnabled>
+			<RunSettingFile>".runsettings"</RunSettingFile>
+		</EnvironmentVariables>
+	</RunConfiguration>
+	<Playwright>
+		<LaunchOptions>
+			<Headless>false</Headless>
+		</LaunchOptions>
+	</Playwright>
 </RunSettings>
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
index af7bfc5..a8093a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+# [1.9.0-feat-button-for-cicd-testing.1](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0...v1.9.0-feat-button-for-cicd-testing.1) (2025-06-23)
+
+
+### Features
+
+* **searchexperiment:** in theory ([fee2b91](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/fee2b9124b859f9a548e3fa257d53294ce83dc08))
+* **searchExpreriment:** ooops ([f63130d](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/f63130d25f6e1421a9a906c40bb548f991f1885f))
+* **search:** test feat ([9a89a89](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/9a89a8951c61fe2581a2b6001292eda3106423ec))
+
+# [1.8.0](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.7.0...v1.8.0) (2025-06-16)
+
+
+### Features
+
+* **button:** changed .runsetting ([06470d7](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/06470d7e71e8a074653a176f87c1a3732f3b44f0))
+* **button:** commit before change env vars ([1e4377f](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/1e4377fc768e7d770b769536e123453c024e8320))
+* **button:** test fix ([022f427](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/022f42765e463f3f46e5e7b672979212cef36339))
+* **button:** versioning from assembly not file parsing ([4b8c773](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/4b8c77356a834de351ad703394eeb060e9a99c01))
+* **cicd:** changing to runsetting config ([3b828b2](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/3b828b28ea7cc6d577ef0e15d9c6f8bc452705e1))
+* **readme:** readme update ([1a9ad4b](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/1a9ad4bda0771dd78fbe4140c21e0a6f65a2b337))
+
 # [1.8.0-feat-button-for-cicd-testing.3](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0-feat-button-for-cicd-testing.2...v1.8.0-feat-button-for-cicd-testing.3) (2025-06-16)
 
 
diff --git a/CICD.runsettings b/CICD.runsettings
index 5f2a63f..d79ab4f 100644
--- a/CICD.runsettings
+++ b/CICD.runsettings
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <RunSettings>
-	<!--<xUnit>-->
   <RunConfiguration>
     <EnvironmentVariables>
         <TracingEnabled>False</TracingEnabled>
@@ -10,8 +9,6 @@
   <Playwright>
     <LaunchOptions>
       <Headless>true</Headless>
-		
     </LaunchOptions>
   </Playwright>
-		<!--</xUnit>-->
 </RunSettings>
diff --git a/PackageSettings.props b/PackageSettings.props
index 2f02b9d..1506e02 100644
--- a/PackageSettings.props
+++ b/PackageSettings.props
@@ -1,6 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <!--Overwrite with PackageSettings.props.local-->
+
+
+	<!-- ===================================================
+       Test Property Group (Due to thresholds via msbuild most configuration for tests occurs here)
+       =================================================== -->
   <PropertyGroup>
 
 	  <!--gets overwritten by packagesettings.props.local to use .runsettings-->
@@ -9,45 +14,43 @@
 	<!-- coverlet.msbuild, specifically msbuild props here we set when cicd testing fails on coverage -->
 	<CollectCoverage>true</CollectCoverage>
 	<CoverletOutputFormat>cobertura</CoverletOutputFormat>
-	<Threshold>30</Threshold>
+	<Threshold>10</Threshold>
 	<ThresholdType>line</ThresholdType>
 	<ThresholdStat>total</ThresholdStat>
-	<ThresholdBranch>30</ThresholdBranch>
-	<ThresholdMethod>30</ThresholdMethod>
+	<ThresholdBranch>10</ThresholdBranch>
+	<ThresholdMethod>10</ThresholdMethod>
 
 	<!-- What to test -->
 	<Include>[TELBlazor.Components]*</Include>
 	<ExcludeByAttribute>ExcludeFromCodeCoverage</ExcludeByAttribute>
-	<ExcludeByFile>**/Program.cs,**/OptionalImplementations/TestComponents/**/*.*</ExcludeByFile>
+	<ExcludeByFile>**/Program.cs,**/OptionalImplementations/Test/**/*.*,**/OptionalImplementations/TestComponents/**/*.*,**/OptionalImplementations/TestComponentPages/**/*.*</ExcludeByFile>
+
 	<IncludeTestAssembly>true</IncludeTestAssembly>
 
 	<!--centralising TestResults output could reduce abitity to run tests in parralel-->
 	<CoverletOutput>$(MSBuildThisFileDirectory)AllTestResults/</CoverletOutput>
 	<MergeWith>$(MSBuildThisFileDirectory)AllTestResults/coverage.json</MergeWith>
 
-	  <!-- Define the output path where the package will be stored -->
-    <NupkgOutputPath>$(NupkgOutputPath)</NupkgOutputPath>
+  </PropertyGroup>
 	
-	  <!--can be local folder-->
-	  
-	<TELBlazorPackageSource>$(TELBlazorPackageSource)</TELBlazorPackageSource>
+	
+	<!-- ===================================================
+       Environment Configuration Property Group For CICD and Local Dev
+       =================================================== -->
+	<PropertyGroup>
+	  <!-- Define the output path where the package will be stored -->
+    <NugetPackagesOutputPath>$(NUGET_PACKAGES_OUTPUT_PATH)</NugetPackagesOutputPath>
 	
 	  <!--Use project reference for faster iteration in development-->
-	<UseTELBlazorComponentsProjectReference Condition="'$(UseTELBlazorComponentsProjectReference)' == '' ">false</UseTELBlazorComponentsProjectReference>
-	<UseTELBlazorComponentsProjectReference Condition="'$(UseTELBlazorComponentsProjectReference)' != '' ">$(UseTELBlazorComponentsProjectReference)</UseTELBlazorComponentsProjectReference>
+	<!--<UseTELBlazorComponentsProjectReference Condition="'$(UseTELBlazorComponentsProjectReference)' == '' ">false</UseTELBlazorComponentsProjectReference>-->
+	<UseTELBlazorComponentsProjectReference>$(USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE)</UseTELBlazorComponentsProjectReference>
 	
 	  <!--manually change this to build and use local packages, or add the project automated generation e.g. msbuild number-->
-	<TELBlazorPackageVersion>$(TELBlazorPackageVersion)</TELBlazorPackageVersion>
+	<TELBlazorPackageVersion>$(TEL_BLAZOR_PACKAGE_VERSION)</TELBlazorPackageVersion>
 	
 	  <!--Building the components project makes the package publish isnt needed-->
-    <DisablePackageGeneration>$(DisablePackageGeneration)</DisablePackageGeneration>
+    <DisablePackageGeneration>$(DISABLE_PACKAGE_GENERATION)</DisablePackageGeneration>
 	
-	  <!--Testing settings-->
-	<!--<E2ETracingEnabled Condition="'$(E2ETracingEnabled)' == ''">false</E2ETracingEnabled>
-	<E2ETracingEnabled Condition="'$(E2ETracingEnabled)' != ''">$(E2ETracingEnabled)</E2ETracingEnabled>
-	<HeadlessTesting Condition="'$(HeadlessTesting)' == ''">true</HeadlessTesting>
-	<HeadlessTesting Condition="'$(HeadlessTesting)' != ''">$(HeadlessTesting)</HeadlessTesting>-->
-  
   </PropertyGroup>
 
 </Project>
diff --git a/PackageSettings.props.local.template b/PackageSettings.props.local.template
index 6b0f3ba..f922827 100644
--- a/PackageSettings.props.local.template
+++ b/PackageSettings.props.local.template
@@ -1,25 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
 	<PropertyGroup>
-	    
-		<!--your local system environment variables-->
-		<TELBlazorPackageSource>$(TELBlazorPackageSource)</TELBlazorPackageSource>
-		<!--<TELBlazorPackageSource>$(LocalPackagePath)</TELBlazorPackageSource>-->
-		<!--<TELBlazorPackageSource>$(TELPackageSource)</TELBlazorPackageSource>-->
-		<NupkgOutputPath>$(LocalPackagePath)</NupkgOutputPath>
-		
-		<!--for faster iteration-->
+		<NugetPackagesOutputPath>$(LOCAL_PACKAGES_PATH)</NugetPackagesOutputPath>
 		<UseTELBlazorComponentsProjectReference>true</UseTELBlazorComponentsProjectReference>
-		
-		<!--manually change this to build and use local packages, or add the project automated generation e.g. msbuild number-->
-		<TELBlazorPackageVersion>10.9.9</TELBlazorPackageVersion>
-		
-		<!--Building the components project makes the package publish isnt needed-->
+		<TELBlazorPackageVersion>1.9.0-local</TELBlazorPackageVersion>
 		<DisablePackageGeneration>true</DisablePackageGeneration>
 		<RunSettingsFilePath>$(SolutionDir)\.runsettings</RunSettingsFilePath>
-		<!--Testing settings-->
-		<!--<E2ETracingEnabled>true</E2ETracingEnabled>
-		<HeadlessTesting>true</HeadlessTesting>-->
-
 	</PropertyGroup>
 </Project>
\ No newline at end of file
diff --git a/README-previous -del-later.md b/README-previous -del-later.md
new file mode 100644
index 0000000..af625ee
--- /dev/null
+++ b/README-previous -del-later.md	
@@ -0,0 +1,573 @@
+# TELBlazor
+TEL Blazor Component Library Package
+
+# This ReadMe
+
+This readme is the repo readme, it is also used as the package readme as this is the solution for making the TELBlazor.Components package.
+There is also a cicd readme in the workflow folder.
+
+The [MVCBlazor repo ](https://github.com/TechnologyEnhancedLearning/MVCBlazor) readme has exploration of various of the choices and alternatives to what is implemented here, which may be useful along with the other blazor repos, when developing for this repo.
+
+# Purpose
+
+Progressive components, that use the server prerendering in Global Wasm Blazor to ensure that if the user has no JS they will get html. And that html can be created to have working post actions.
+The render cycle will hydrate the prerender and the post actions will be overrided by services injected in the components.
+It is client side so the users browser will do the work.
+  
+  
+   
+# Links
+
+[Bottom file see tree diagram of solution](#Project-Structure-and-Comments)
+
+[Easy viewing of TELBlazor Repo ReadMe](https://raw.githubusercontent.com/TechnologyEnhancedLearning/TELBlazor/refs/heads/master/README.md)
+(best with Markdown Reader Chrome extension)
+
+[Last Published Package](https://github.com/orgs/TechnologyEnhancedLearning/packages?tab=packages&q=TELBlazor)
+
+[TELBlazor](https://github.com/TechnologyEnhancedLearning/TELBlazor)
+
+[TELBlazor Production Showcase](https://technologyenhancedlearning.github.io/TELBlazor/)
+
+[TELBlazor Dev Showcase](https://technologyenhancedlearning.github.io/TELBlazor-DevShowCase/)
+
+[View Packaged Dev Showcase Code](https://github.com/TechnologyEnhancedLearning/TELBlazor-DevShowCase/tree/gh-pages)
+
+[View Packaged Showcase Code](https://github.com/TechnologyEnhancedLearning/TELBlazor/tree/gh-pages/)
+
+[Code Report Page](https://technologyenhancedlearning.github.io/TELBlazor-CodeReport/)
+
+[NHSE TEL Frontend](https://github.com/TechnologyEnhancedLearning/nhse-tel-frontend)
+
+# Set Up
+
+## "It works on my machine"
+
+### Hi Kevin, Please rewrite or correct these steps. 
+- im expecting maybe global node may end up not working, if anything, as its already set up globally on my machine with the packages for this project.
+
+### 
+
+### Prerequisites
+- **Visual Studio 2022** (Community or higher)
+- **.NET 8 SDK version 8.0.407 or later** (see global.json requirement below)
+- **Node.js 18+** and npm
+- **Git** configured with your credentials
+- **PowerShell 5.1+** 
+> ⚠️ **Important:** All commands in this guide require **PowerShell running as Administrator**
+
+### Steps
+
+#### Get the repo
+1. Open powershell as admin
+1. In powershell navigate (```cd```) to the folder the repo will go
+1. Check prequisites
+	- ```
+		### 1. Verify Prerequisites
+
+		**Open PowerShell as Administrator** and verify your setup:
+
+		```powershell
+		# Check .NET SDK version (should be 8.0.407 or later)
+		dotnet --version
+
+		# Check Node.js version (should be 18+)
+		node --version
+	
+	  ```
+1. Go to [TELBlazor Repo](https://github.com/TechnologyEnhancedLearning/TELBlazor) hit code and get the clone string
+1. Clone the repo locally using powershell terminal
+1. Go to [TELBlazor Repo](https://github.com/TechnologyEnhancedLearning/TELBlazor) 
+	- create a branch (**there is branch name checks in cicd [branch lint rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.releaserc.json)**) so for example call it **"docs-readme-setup-instructions"**
+	- your commits should look like this **"docs(readme): added detail on commit rules"**
+1. Fetch, and checkout your new branch locally so you can add to the readme as you go
+	- create commit "docs(readme): first commit"
+	- see [commit rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.commitlintrc.json)
+	- *these rules also enable the versioning in cicd*
+	- Bonus (you could do this while cloning): if you don't want to wait for the pipeline to fail your commit names and for pushes to accidently expose your secrets: you may want to add
+		- gitguardian from confluence docs (follow it to the letter) [gitguardian global setup instructions](https://hee-tis.atlassian.net/wiki/spaces/TP/pages/3855253505/GitGuardian+Setup+-+Simplified+Version)
+        - and add a pre-commit and push hook (you need both as you cannot lint what hasnt yet been commit) you can add these to your git templates if you want them for every repo, or just to this repos pre- push- commits, or you can be lazy and add them into the gitguardian hook
+		- you will need git commitlint globally (angular because it goes with the versioning tool for repo versioning)
+			```
+				npm install -g @commitlint/cli @commitlint/config-angular
+			```
+		-	```
+				#### --- Commitlint Logic (force local config) ---
+				REPO_ROOT=$(git rev-parse --show-toplevel)
+				CONFIG_PATH="$REPO_ROOT/.commitlintrc.json"
+				echo "COMMIT_MSG_FILE is one msg behind it is only set to the commit your trying to commit after the commit succeeds so this script is one behind"
+				echo "so would work best in prepush template"
+				COMMIT_MSG_FILE="$REPO_ROOT/.git/COMMIT_EDITMSG"
+
+				# Check if the local .commitlintrc.json exists in the repository root
+				if [ -f "$CONFIG_PATH" ]; then
+
+					echo "✅ Local .commitlintrc.json found at: $CONFIG_PATH. Running commitlint..."
+					echo "⚠️ if commit lint fails in precommit its actually reading previous commit name you need to reset or squash make a new commit and change .git/COMMIT_EDITMSG to something that would pass. ⚠️"
+
+					if command -v npx &> /dev/null; then
+					
+							cd "$REPO_ROOT" || exit 1
+
+							# Debug: Print the commit message file content
+							if [ -f "$COMMIT_MSG_FILE" ]; then
+								echo "Commit message content:"
+								cat "$COMMIT_MSG_FILE"
+							else
+								echo "❌ Commit message file not found!"
+								exit 1
+							fi
+							
+							
+							# Run commitlint, explicitly pointing to the local config and providing the commit message via stdin
+							OUTPUT1=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --edit="$COMMIT_MSG_FILE" 2>&1)
+							
+							EXIT_CODE1=$?
+							# echo "!!!!!!!!!!! OUTPUT1"
+							# echo "$OUTPUT1"
+							
+							
+							# OUTPUT2=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --from=origin/master --to=HEAD 2>&1)
+							
+							# EXIT_CODE2=$?
+							# echo "!!!!!!!!!!! OUTPUT2"
+							# echo "$OUTPUT2"
+							
+							# OUTPUT3=$(npx.cmd --no -- commitlint --config=".commitlintrc.json"  --from-last-tag 2>&1)
+							
+							
+							# EXIT_CODE3=$?
+							# echo "!!!!!!!!!!! OUTPUT3"
+							# echo "$OUTPUT3"
+							
+
+
+						#if [ "$EXIT_CODE1" -ne 0 ] || [ "$EXIT_CODE2" -ne 0 ] || [ "$EXIT_CODE3" -ne 0 ];  then
+						if [ "$EXIT_CODE1" -ne 0 ];  then
+							echo "❌ Commitlint failed:"
+							
+							echo "$OUTPUT1"
+							exit 1
+						else
+							echo "✅ Commitlint passed!"
+						fi
+					else
+						echo "⚠️ npx not found. Please ensure Node.js and npm are installed to use commitlint."
+						# Optionally fail here
+						# exit 1
+					fi
+				else
+					echo "ℹ️ No local .commitlintrc.json found in $REPO_ROOT. Skipping commitlint."
+				fi
+			``` 
+#### About configuration (just to read)
+
+Visual studio caches the environmental variables so to avoid restarting it you may want to have multiple
+environment variables, even if at times they are set to the same values. Then you can switch in configuration
+which environment value is used rather than the underlying value, but be careful not to leave nuget.config
+changed. Remember to delete your lock files when changing which package your using* ```%envvalue%``` syntax in 
+nuget.config can be populated by environment values by visual studio but not via command line and cicd has to 
+replace the values with ```sed```
+
+- The intention of the configuration is you should be able to switch between local packages, remote package, and project references. It will also enable parrallel development with consuming projects, so package changes can be seen in situ during development.
+- Troubleshooting
+    - delete local `TELBlazor.Components` packages
+    - check `TELBlazorPackageVersion` has been incremented
+    - delete lock files
+	- clean solution
+	- check environment values in `props` and `nuget.config`
+	- restore nuget packages 
+	- restore solution
+	- if still not working close visual studio and reopen
+	- if there are still issues its easier to problem solve by using a random very high `TELBlazor.Components` package version number and ensuring it fails and says it found the source but not the version
+- Variables Recommended to add to environment variables (Do this in the next section)
+	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
+	- **TELPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
+	- **LocalPackageSource** → e.g. C:\dev\LocalPackages
+	- **NupkgOutputPath** → e.g. C:\dev\LocalPackages
+- Other variables you may want to set up
+	- Any of the nuget.config and PackageSetting.props values but visual studio caches environment values so nothing you expect to change regularly
+
+
+#### Create local files (do this)
+- Right click PackgeSettings.props.local and open with xml editor or any preferred way of opening it
+- copy paste PackgeSettings.props.local.template into it
+- Set environmental variables (go into windows, edit environmental system variables, then look for environmental variables button, then add to system wide) 	
+	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
+	- **TELPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
+	- **LocalPackageSource** → e.g. C:\dev\LocalPackages
+	- **NupkgOutputPath** → e.g. C:\dev\LocalPackages
+- Change system environment variables or PackageSetting.props.local variables can be changed but I recommend the latter
+    - **UseTELBlazorComponentsProjectReference** set it true for faster development
+	- **TELBlazorPackageVersion** set it to a number higher than the production value and increase it every-time you want to produce and use the package locally if not using the project reference
+      - if this were set to auto increment to a file accessible by other projects that would be ideal
+	- **DisablePackageGeneration** we publish the package on build if this isnt flagged. Set it to true so you can build the solution without making the package
+		- You may want to build the solution without package generation, the TELBlazor.Components with package generation for example
+
+#### Create More Environment Variables
+- To use remote git hosted nuget packages you need a personal git token. This is just because git tracks the use of packages rather than it being anonymous
+	- go onto your git profile
+	- go to settings → developer settings → Personal access tokens → Tokens classic
+		- as a minimum select read:packages and you may wish to increase the expiration date.
+			- copy the token it will disapear
+	- Set system wide environment variables as before
+		- GITHUB_USERNAME
+		- GITHUB_PACKAGES_TOKEN
+		- TELBlazorPackageSource
+			- previously we set this to a local location but if you were to want to generally use the remote package this is the source 
+			- https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
+			- for the test set this to https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json but you will probably want to point it back to a local folder afterwards
+    - check credentials are working
+		- open powershell somewhere you can put deletable content
+			- ``` 
+				# Create output folder if it doesn't exist
+				New-Item -ItemType Directory -Path deleteme-test -ErrorAction SilentlyContinue
+
+				# Build the auth string (username:token)
+				$auth = "$($env:GITHUB_USERNAME):$($env:GITHUB_PACKAGES_TOKEN)"
+
+				# Build base URL by removing trailing /index.json from the feed URL
+				$baseUrl = $env:TELBlazorPackageSource -replace "/index\.json$", ""
+				$baseUrl = $baseUrl.TrimEnd('/')
+
+				# Download the package with curl using authentication
+				curl.exe -u $auth `
+				  -L "$baseUrl/download/TELBlazor.Components/1.0.0/TELBlazor.Components.1.0.0.nupkg" `
+				  -o deleteme-test\TELBlazor.Components.1.0.0.nupkg
+
+			```
+	    - check there is a nupkg package. its an old one, so just delete it. 
+
+#### Set nuget to have the source (powershell)
+````
+dotnet nuget add source "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" `
+  --name "github" `
+  --username $env:GITHUB_USERNAME `
+  --password $env:GITHUB_TOKEN `
+  --store-password-in-clear-text
+````
+
+Note: You may also wish to go into your user appdata or roaming and find your global nuget config and add the credentials in there. Do this by copying the 
+TELPackage part of the config but with the system environment variable values you set earlier. This will mean LH for example will be able to access TEL packages and so will other projects.
+
+#### Create appsettings
+*Be aware that because WASM code is in the browser appsettings in the wasm client projects are not secret and sensitive data should not go in them*
+
+- **Solution Level**
+	- From the runsettingsTemplate you will make your local runnsettings for testing **".runsettings"** this is where you set tracing and headless
+	- From packagesettings.props.local.template make packagesettings.props.local
+	- packagesettings.props.local overwrite packagesettings.props in directory build props
+- **TELBlazor.Components.ShowCase.E2ETests.WasmServerHost**
+	- create appsettings.Development.json
+	- copy paste from appsettings.Development.json.template
+	- the template is source controlled so wont have anything that needs to be secure
+	- if you have preferences for logging this is where to configure it, if you want to add creating a text file for example add it here and then add it as dependency in the solution and a reference in the program.cs
+	- *logging can be used to get information during testing and test against it*
+- **TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client**
+	- follow the same process
+	- client side appsetting are exposed through the wasm so dont put secure information in them
+	- the client will have different logging options as it can only log to browser console, http to a logging api, storage
+- **TELBlazor.Components.ShowCase.ShowCase.WasmServerHost.Client**
+	- this is the project that become the gh-pages
+	- the appsettings go into the wasm so no secrets in here
+	- any of these projects could be used to view changes but if not looking at nojs this project could have different appsettings just for development as it isnt used to test against.
+- **TELBlazor.Components.UnitTests**
+		- as above
+
+#### Install packages
+- first set packagesettings.props.local if you havent already via environment variables to the following
+	- **TELBlazorPackageSource** → a local folder outside of the solution
+	- **NupkgOutputPath** → the same local folder outside of the solution
+	- **UseTELBlazorComponentsProjectReference** → true
+	- **TELBlazorPackageVersion** → 1.0.0 will do for now
+	- **DisablePackageGeneration** → true
+- in .runsettings
+	- **TracingEnabled** → true
+	- **Headless** → false
+- right click the solution and copy full path (we need admin rights so dont just open terminal)
+- open powershell from windows as administrator
+- paste the route paste and cd to the solution folder
+- then run the following
+- 	```   
+		# 1. Check environment variables and local props
+		Write-Output "Have you set your environment variables and local props?"
+        dotnet clean
+		
+		# 2. Restore NuGet packages (reads central package versions and props)
+		Write-Output "Restore Nuget"
+		dotnet restore
+
+		# 3. Restore .NET CLI tools (Playwright, report manager for code coverage)
+		Write-Output "Restore Tools"
+		dotnet tool restore
+
+		# 4. Install Node dependencies (gulp, playwright, frontend libs)
+		Write-Output "Restore Node"
+		npm install
+		
+		# 5. Build solution or run other commands as needed
+		Write-Output "Build solution without build package, using project references instead of local package or remote package"
+		dotnet build
+		
+		# 6. Setup playwright
+		Write-Output "Playwright setup"
+		& ".\TELBlazor.Components.ShowCase.E2ETests\bin\Debug\net8.0\playwright.ps1" install
+	```
+
+#### Check Setup Worked
+
+- Look in components **TELBlazor.Components.TELBlazorPackageVersion**
+	- **TELFrontEndPackageVersion** check the package versions
+	- it should match the version number in your `props.local` currently
+	- check nhsuk version in `package.json`
+- check `nhsuk.css` was generated by gulp in `TELBlazor.Components.ShowCase.Shared.wwwroot.css`
+- Open test runner and run tests 
+	- wait 10 seconds, then if its going make a cup of tea
+- reuse previous terminal, or right click solution and open a terminal
+	- ``` ./run-tests-and-report-with-env-values.ps1 ```
+		- (this is just a useful script for running tests and report similar to the cicd if you want to run the cicd locally you could use "nektos act" instead)
+	- it will quietly slowly do the E2E after the first tables appear so enjoy your tea and skim the readme for 5 minutes
+- look in AllTestResults folder at the solution level you should see coverage.cobertura.xml
+- find index.html at the the top level in the folder CoverageReport, open it in chrome and bookmark it if you like
+- run TELBlazor.Components.ShowCase.E2ETests.WasmServerHost
+    - take note of the TELBlazor Package Version
+	- have a click around, change the loglevel look in the browser console
+	- the host runs the client
+	- you can put debugger in program.cs of WasmServerHost because this part isnt running in the browser as the wasm
+	- once the wasm takes over to debug in the browser you need to do some setup
+		- TODO QQQQ I cant remember what i havent set up on new machine yet, i presume it doesnt work for you kevin?
+- run TELBlazor.Components.ShowCase.E2ETests.WasmServerHost	
+	- This is pure wasm so notice that there is a loader initially this is because there is no prerender
+- go into tools in the top vs bar you should see toggle test coverage highlighting. Go to loglevelswitcher.razor it should be highlighted red 
+	- qqqq todo isnt for mine is it for yours kevin?
+
+
+##### Check Setup with Package Creation
+*The TELBlazor Package Version is actually parsed from the number provided in props so don't rely on it to match the package being shown soley if your still using the ref, the project will display the new number you put in*
+- change local props to
+	- set `packagesettings.props.local` if you haven't already via environment variables and hard coding to the following
+		- **TELBlazorPackageSource** → a local folder outside of the solution
+		- **NupkgOutputPath** → the same local folder outside of the solution
+		- **UseTELBlazorComponentsProjectReference** → false
+		- **TELBlazorPackageVersion** → pick something greater than the production package number. The one without the dash [TELBlazor.Components Prod and Dev Package location](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
+			- make sure its changed so its more than the TELBlazor Package Version you previously noted
+		- **DisablePackageGeneration** → false
+	- set .runsettings
+		- **Tracing** → false
+		- **HeadlessTesting** → false 
+		
+*When doing package generation remember you need to keep incrementing the package number to get changes into the project, it would be nice to have this as an env value as an automated increment*
+- delete the local package in your package folder
+- delete the lock files
+- clean/build solution (because of build order you may need to build TELBlazor.Components first if there are issues)
+	- check package created in your package location
+- make a change to the html of `TELBlazor.Components.Components.TestComponents.CssSourceChecker.cs` you can search graphitti-wall add a <p> if you don't see it in the next build the package is in use rather than the reference :)
+- run the hosted project does it work now its set to use the package
+	- package number will have increased
+	- you shouldnt see the html you added
+- run the wasm project does it work now its set to uses package
+	- you shouldnt see the html you added
+	- Tip it can be useful to launch incognito 
+		- right click an index.html, browser with, add chrome chrome_proxy.exe and --incognito flag then select it when running the project its now an available options
+- Run tests in test runner
+	- its no longer headless so you should see multiple windows open
+
+###### Optional
+- run ps1 test script
+	
+
+##### Check Setup With Package reference remote
+
+- *You can change the value of the env system values but visual studio caches them so swapping for a different env value is faster just remember it needs changing back for cicd*
+	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
+		- change it in nuget.config and .props, the easiest way is to change the environment variable used, but dont commit it to cicd 
+		- *For development you will probably just use a local or remote source so you are likely just to set the environment variables and leave them after the setup checks*
+	- **NupkgOutputPath** → the same local folder outside of the solution
+	- **UseTELBlazorComponentsProjectReference** → false
+	- **TELBlazorPackageVersion** → [Find package number not dev package number, dev packages have -branchname](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
+	- **DisablePackageGeneration** → true
+	- set .runsettings
+		- **Tracing** → true
+		- **HeadlessTesting** → true 
+- delete lock files
+- clean/build
+- *if caching issues close and reopen visual studio*
+- Run tests in test runner
+- run the hosted project
+- run the wasm project
+- check that the right package is being used
+
+
+
+
+
+
+## How to consume TELBlazor.Components 
+1. Select a production version of the package [Package list for TELBlazor.Component on git](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
+1. Set up css references and dependency injection using lean host examples WasmServerHost, WasmServerHost.Client and WasmStaticClient
+from the repo and ShowCase project for how to include the package. 
+1. You will need a copy of nhsuk.css and a reference <link href="css/nhsuk.css" rel="stylesheet" /> see gulp in the previously mentioned projects
+
+
+# Solution and Pipeline
+
+## Features of solution
+- run-tests-and-report-with-env-values.ps1 runs test similar to pipeline
+	- create html coverage report and threshold check (recommendation: bookmark local html file in browser to easily view)
+	
+## Features of CICD
+- There is a readme in the CICD
+- A DevShowCase sight is created using a DevPackage and the same in production
+	- The dev pipeline also publishes a coverage report
+
+## Local Files and Development Settings
+
+
+# Solution Detail
+
+## Architecture
+
+### Project Structures used
+- Repo TELBlazor
+
+ - TELBlazor.Components
+	- this is a razor component library
+ - TELBlazor.Components.UnitTests
+	- Bunit template from bunit site, configured to use Xunit
+ - TELBlazor.Components.ShowCase.E2ETests
+    - NUnit Playwright Test project
+ - TELBlazor.Components.ShowCase.Shared
+	- this is a razor component library
+ - TELBlazor.Components.ShowCase.E2ETests.WasmServerHost
+	- Wasm global hosted
+ - TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client 
+	- Wasm global hosted
+ - TELBlazor.Components.ShowCase.WasmStaticClient
+	- Wasm global standalone 
+	
+## Configuration
+
+### Logging
+- For more detailed dependency injected logging see MVCBlazor project	
+	
+## Notes
+
+### Stuff you don't need to know (but may be useful for a specific issue on searching the readme)
+- It is not render auto per components because the intention is to be used in MVC views.
+- Xunit is used with Bunit and Nunit with playwright, either could be 
+changed so that they are using the same and this could be done in future 
+as the libraries improve but currently each is being used with the 
+recommend tool it is designed for though both support the others tool.
+- not using data-testid="TELButton" because we should use aria selectors. We may change this later.
+   - e.g. data-attribute-telblazorcomponentname="TelBlazorButton"
+- not using guid id as i have elsewhere either [Parameter] public string ElementId { get; set; } = $"tel-button-{Guid.NewGuid():N}";
+- various things have been cut from mvcblazor so it is worth returning to for potential solutions if developing this solution [MVCBlazor repo](https://github.com/TechnologyEnhancedLearning/MVCBlazor)
+
+
+# Project Structure and Comments
+
+Viewed best [raw ReadMe see chrome](https://raw.githubusercontent.com/TechnologyEnhancedLearning/TELBlazor/refs/heads/master/README.md)
+
+|  Description  | File Structure |
+|----------------|-------------|
+|  | &#9507; TELBlazor |
+| Test coverage from cicd or .ps1 | &#160;&#160;&#160;&#160;&#9507; AllTestResults |
+| Convenient in solution location | &#160;&#160;&#160;&#160;&#9507; CICDPackageLocation |
+| Test report site from cicd or .ps1 viewably locally or [Dev Report](https://technologyenhancedlearning.github.io/TELBlazor-CodeReport/) | &#160;&#160;&#160;&#160;&#9507; CoverageReport |
+| gh-pages site publish folder | &#160;&#160;&#160;&#160;&#9507; docs |
+| Sets centralised solution a report thresholds | &#160;&#160;&#160;&#160;&#9507; Directory.Build.props,  |
+| Centralised nuget packages | &#160;&#160;&#160;&#160;&#9507;  Directory.Packages.props |
+| CICD setting .net version | &#160;&#160;&#160;&#160;&#9507; global.json |
+| Uses environment variables to set packed package location locally or remote | &#160;&#160;&#160;&#160;&#9507; nuget.config|
+| Centralised npm packages used with gulp and for testing | &#160;&#160;&#160;&#160;&#9507; package.json |
+| Linting config for branch and commit names | &#160;&#160;&#160;&#160;&#9507; .releaserc.json, .commitlintrc.json |
+| Useful for running tests and generating test report locally | &#160;&#160;&#160;&#160;&#9507;  run-tests-and-report-with-env-values.ps1 |
+| Env Setup | &#160;&#160;&#160;&#160;&#9507; PackageSettings.props |
+| Env Setup, testing, package or project reference  | &#160;&#160;&#160;&#160;&#9507; PackageSettings.props.local |
+| The package create on build | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components |
+| All using in imports so can add components by assembly | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Components |
+| Standard components made to TEL and NoJS requirements | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BaseComponents |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; TELButton.razor |
+| Only to support main component TELButton | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonSubComponent.razor |
+| Useful components for development | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestComponents |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Core |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Compliance |
+| Create a contract of accessibility | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; IAccessibleComponent.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Configuration |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ITELBlazorBaseComponentConfiguration.cs |
+| Logging, NoJS bool  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELBlazorBaseComponentConfiguration.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; DI |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Enums |
+| Enum of css styles for testing and setting component | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonStyle.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Services |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; HelperServices |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; ILogLevelSwitcherService.cs |
+| Custom component base with configuration injected | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELComponentBase.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELBlazorPackageVersion |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; TELBlazorPackageVersionInformation.razor |
+| Programmatically generate via gulp csproj package versions | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; VersionInfo.cs |
+|  | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.E2ETests |
+| Enables run blazor pages in E2E | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BlazeWright |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BlazorApplicationFactory.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BlazorPageExtensions.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; BlazorPageTest.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Helpers |
+| Enables using attributes to run same tests with different viewports and browsers | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BrowserHelper.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; ViewportHelper.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Pages |
+| Structure to mirror ShowCase | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BaseComponentPages |
+| Check NoJs, in view, functionality | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonPageTests.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentPages |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestComponentPages |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Reports |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; SnapShots |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestDoubles |
+| Serverside so can have prerender behaviour for nojs lean host | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.E2ETests.WasmServerHost |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.E2ETests.WasmServerHost |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; App.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Program.cs |
+| Clientside for the host | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; App.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Program.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Routes.razor |
+| ShowCase is an example of implementation also provides site for E2E and showcase | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.Shared |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; DI |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Layouts |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentLayouts |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentNavMenu.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentPageLayout.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; ShowCase.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; MainLayout.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Pages |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentPages |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BaseComponentPages |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonPage.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestComponentPages |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; CssSourceCheckerPage.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; LogLevelSwitcherPage.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Error.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Home.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Services |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; HelperServices |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; SerilogLogLevelSwitcher.cs |
+| Published to create gh-pages [DevShowCase](https://technologyenhancedlearning.github.io/TELBlazor-DevShowCase/) [ShowCase](https://technologyenhancedlearning.github.io/TELBlazor/) | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.WasmStaticClient |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; App.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Program.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Routes.razor |
+|  | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.UnitTests |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Components |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BaseComponents |
+| Axe and functionality test, does not simulate nojs or browser | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonTests.razor |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestComponents |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Core |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; DI |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; DI.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; FallbackServiceProvider.cs |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; HtmlComparisons |
+|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestDoubles |
\ No newline at end of file
diff --git a/README.md b/README.md
index af625ee..4954110 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,8 @@ There is also a cicd readme in the workflow folder.
 
 The [MVCBlazor repo ](https://github.com/TechnologyEnhancedLearning/MVCBlazor) readme has exploration of various of the choices and alternatives to what is implemented here, which may be useful along with the other blazor repos, when developing for this repo.
 
+*For cicd information, component specific information see readmes in solution files*
+
 # Purpose
 
 Progressive components, that use the server prerendering in Global Wasm Blazor to ensure that if the user has no JS they will get html. And that html can be created to have working post actions.
@@ -41,14 +43,8 @@ It is client side so the users browser will do the work.
 
 # Set Up
 
-## "It works on my machine"
-
-### Hi Kevin, Please rewrite or correct these steps. 
-- im expecting maybe global node may end up not working, if anything, as its already set up globally on my machine with the packages for this project.
+## Prerequisites
 
-### 
-
-### Prerequisites
 - **Visual Studio 2022** (Community or higher)
 - **.NET 8 SDK version 8.0.407 or later** (see global.json requirement below)
 - **Node.js 18+** and npm
@@ -56,246 +52,48 @@ It is client side so the users browser will do the work.
 - **PowerShell 5.1+** 
 > ⚠️ **Important:** All commands in this guide require **PowerShell running as Administrator**
 
-### Steps
-
-#### Get the repo
-1. Open powershell as admin
-1. In powershell navigate (```cd```) to the folder the repo will go
-1. Check prequisites
-	- ```
-		### 1. Verify Prerequisites
-
-		**Open PowerShell as Administrator** and verify your setup:
-
-		```powershell
-		# Check .NET SDK version (should be 8.0.407 or later)
-		dotnet --version
-
-		# Check Node.js version (should be 18+)
-		node --version
-	
-	  ```
-1. Go to [TELBlazor Repo](https://github.com/TechnologyEnhancedLearning/TELBlazor) hit code and get the clone string
-1. Clone the repo locally using powershell terminal
-1. Go to [TELBlazor Repo](https://github.com/TechnologyEnhancedLearning/TELBlazor) 
-	- create a branch (**there is branch name checks in cicd [branch lint rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.releaserc.json)**) so for example call it **"docs-readme-setup-instructions"**
-	- your commits should look like this **"docs(readme): added detail on commit rules"**
-1. Fetch, and checkout your new branch locally so you can add to the readme as you go
-	- create commit "docs(readme): first commit"
-	- see [commit rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.commitlintrc.json)
-	- *these rules also enable the versioning in cicd*
-	- Bonus (you could do this while cloning): if you don't want to wait for the pipeline to fail your commit names and for pushes to accidently expose your secrets: you may want to add
-		- gitguardian from confluence docs (follow it to the letter) [gitguardian global setup instructions](https://hee-tis.atlassian.net/wiki/spaces/TP/pages/3855253505/GitGuardian+Setup+-+Simplified+Version)
-        - and add a pre-commit and push hook (you need both as you cannot lint what hasnt yet been commit) you can add these to your git templates if you want them for every repo, or just to this repos pre- push- commits, or you can be lazy and add them into the gitguardian hook
-		- you will need git commitlint globally (angular because it goes with the versioning tool for repo versioning)
-			```
-				npm install -g @commitlint/cli @commitlint/config-angular
-			```
-		-	```
-				#### --- Commitlint Logic (force local config) ---
-				REPO_ROOT=$(git rev-parse --show-toplevel)
-				CONFIG_PATH="$REPO_ROOT/.commitlintrc.json"
-				echo "COMMIT_MSG_FILE is one msg behind it is only set to the commit your trying to commit after the commit succeeds so this script is one behind"
-				echo "so would work best in prepush template"
-				COMMIT_MSG_FILE="$REPO_ROOT/.git/COMMIT_EDITMSG"
-
-				# Check if the local .commitlintrc.json exists in the repository root
-				if [ -f "$CONFIG_PATH" ]; then
-
-					echo "✅ Local .commitlintrc.json found at: $CONFIG_PATH. Running commitlint..."
-					echo "⚠️ if commit lint fails in precommit its actually reading previous commit name you need to reset or squash make a new commit and change .git/COMMIT_EDITMSG to something that would pass. ⚠️"
-
-					if command -v npx &> /dev/null; then
-					
-							cd "$REPO_ROOT" || exit 1
-
-							# Debug: Print the commit message file content
-							if [ -f "$COMMIT_MSG_FILE" ]; then
-								echo "Commit message content:"
-								cat "$COMMIT_MSG_FILE"
-							else
-								echo "❌ Commit message file not found!"
-								exit 1
-							fi
-							
-							
-							# Run commitlint, explicitly pointing to the local config and providing the commit message via stdin
-							OUTPUT1=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --edit="$COMMIT_MSG_FILE" 2>&1)
-							
-							EXIT_CODE1=$?
-							# echo "!!!!!!!!!!! OUTPUT1"
-							# echo "$OUTPUT1"
-							
-							
-							# OUTPUT2=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --from=origin/master --to=HEAD 2>&1)
-							
-							# EXIT_CODE2=$?
-							# echo "!!!!!!!!!!! OUTPUT2"
-							# echo "$OUTPUT2"
-							
-							# OUTPUT3=$(npx.cmd --no -- commitlint --config=".commitlintrc.json"  --from-last-tag 2>&1)
-							
-							
-							# EXIT_CODE3=$?
-							# echo "!!!!!!!!!!! OUTPUT3"
-							# echo "$OUTPUT3"
-							
-
-
-						#if [ "$EXIT_CODE1" -ne 0 ] || [ "$EXIT_CODE2" -ne 0 ] || [ "$EXIT_CODE3" -ne 0 ];  then
-						if [ "$EXIT_CODE1" -ne 0 ];  then
-							echo "❌ Commitlint failed:"
-							
-							echo "$OUTPUT1"
-							exit 1
-						else
-							echo "✅ Commitlint passed!"
-						fi
-					else
-						echo "⚠️ npx not found. Please ensure Node.js and npm are installed to use commitlint."
-						# Optionally fail here
-						# exit 1
-					fi
-				else
-					echo "ℹ️ No local .commitlintrc.json found in $REPO_ROOT. Skipping commitlint."
-				fi
-			``` 
-#### About configuration (just to read)
-
-Visual studio caches the environmental variables so to avoid restarting it you may want to have multiple
-environment variables, even if at times they are set to the same values. Then you can switch in configuration
-which environment value is used rather than the underlying value, but be careful not to leave nuget.config
-changed. Remember to delete your lock files when changing which package your using* ```%envvalue%``` syntax in 
-nuget.config can be populated by environment values by visual studio but not via command line and cicd has to 
-replace the values with ```sed```
-
-- The intention of the configuration is you should be able to switch between local packages, remote package, and project references. It will also enable parrallel development with consuming projects, so package changes can be seen in situ during development.
-- Troubleshooting
-    - delete local `TELBlazor.Components` packages
-    - check `TELBlazorPackageVersion` has been incremented
-    - delete lock files
-	- clean solution
-	- check environment values in `props` and `nuget.config`
-	- restore nuget packages 
-	- restore solution
-	- if still not working close visual studio and reopen
-	- if there are still issues its easier to problem solve by using a random very high `TELBlazor.Components` package version number and ensuring it fails and says it found the source but not the version
-- Variables Recommended to add to environment variables (Do this in the next section)
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **TELPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **LocalPackageSource** → e.g. C:\dev\LocalPackages
-	- **NupkgOutputPath** → e.g. C:\dev\LocalPackages
-- Other variables you may want to set up
-	- Any of the nuget.config and PackageSetting.props values but visual studio caches environment values so nothing you expect to change regularly
-
-
-#### Create local files (do this)
-- Right click PackgeSettings.props.local and open with xml editor or any preferred way of opening it
-- copy paste PackgeSettings.props.local.template into it
-- Set environmental variables (go into windows, edit environmental system variables, then look for environmental variables button, then add to system wide) 	
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **TELPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **LocalPackageSource** → e.g. C:\dev\LocalPackages
-	- **NupkgOutputPath** → e.g. C:\dev\LocalPackages
-- Change system environment variables or PackageSetting.props.local variables can be changed but I recommend the latter
-    - **UseTELBlazorComponentsProjectReference** set it true for faster development
-	- **TELBlazorPackageVersion** set it to a number higher than the production value and increase it every-time you want to produce and use the package locally if not using the project reference
-      - if this were set to auto increment to a file accessible by other projects that would be ideal
-	- **DisablePackageGeneration** we publish the package on build if this isnt flagged. Set it to true so you can build the solution without making the package
-		- You may want to build the solution without package generation, the TELBlazor.Components with package generation for example
-
-#### Create More Environment Variables
-- To use remote git hosted nuget packages you need a personal git token. This is just because git tracks the use of packages rather than it being anonymous
-	- go onto your git profile
-	- go to settings → developer settings → Personal access tokens → Tokens classic
-		- as a minimum select read:packages and you may wish to increase the expiration date.
-			- copy the token it will disapear
-	- Set system wide environment variables as before
-		- GITHUB_USERNAME
-		- GITHUB_PACKAGES_TOKEN
-		- TELBlazorPackageSource
-			- previously we set this to a local location but if you were to want to generally use the remote package this is the source 
-			- https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-			- for the test set this to https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json but you will probably want to point it back to a local folder afterwards
-    - check credentials are working
-		- open powershell somewhere you can put deletable content
-			- ``` 
-				# Create output folder if it doesn't exist
-				New-Item -ItemType Directory -Path deleteme-test -ErrorAction SilentlyContinue
-
-				# Build the auth string (username:token)
-				$auth = "$($env:GITHUB_USERNAME):$($env:GITHUB_PACKAGES_TOKEN)"
-
-				# Build base URL by removing trailing /index.json from the feed URL
-				$baseUrl = $env:TELBlazorPackageSource -replace "/index\.json$", ""
-				$baseUrl = $baseUrl.TrimEnd('/')
-
-				# Download the package with curl using authentication
-				curl.exe -u $auth `
-				  -L "$baseUrl/download/TELBlazor.Components/1.0.0/TELBlazor.Components.1.0.0.nupkg" `
-				  -o deleteme-test\TELBlazor.Components.1.0.0.nupkg
-
-			```
-	    - check there is a nupkg package. its an old one, so just delete it. 
-
-#### Set nuget to have the source (powershell)
-````
-dotnet nuget add source "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" `
-  --name "github" `
-  --username $env:GITHUB_USERNAME `
-  --password $env:GITHUB_TOKEN `
-  --store-password-in-clear-text
-````
-
-Note: You may also wish to go into your user appdata or roaming and find your global nuget config and add the credentials in there. Do this by copying the 
-TELPackage part of the config but with the system environment variable values you set earlier. This will mean LH for example will be able to access TEL packages and so will other projects.
-
-#### Create appsettings
-*Be aware that because WASM code is in the browser appsettings in the wasm client projects are not secret and sensitive data should not go in them*
-
-- **Solution Level**
-	- From the runsettingsTemplate you will make your local runnsettings for testing **".runsettings"** this is where you set tracing and headless
-	- From packagesettings.props.local.template make packagesettings.props.local
-	- packagesettings.props.local overwrite packagesettings.props in directory build props
-- **TELBlazor.Components.ShowCase.E2ETests.WasmServerHost**
-	- create appsettings.Development.json
-	- copy paste from appsettings.Development.json.template
-	- the template is source controlled so wont have anything that needs to be secure
-	- if you have preferences for logging this is where to configure it, if you want to add creating a text file for example add it here and then add it as dependency in the solution and a reference in the program.cs
-	- *logging can be used to get information during testing and test against it*
-- **TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client**
-	- follow the same process
-	- client side appsetting are exposed through the wasm so dont put secure information in them
-	- the client will have different logging options as it can only log to browser console, http to a logging api, storage
-- **TELBlazor.Components.ShowCase.ShowCase.WasmServerHost.Client**
-	- this is the project that become the gh-pages
-	- the appsettings go into the wasm so no secrets in here
-	- any of these projects could be used to view changes but if not looking at nojs this project could have different appsettings just for development as it isnt used to test against.
-- **TELBlazor.Components.UnitTests**
-		- as above
-
-#### Install packages
-- first set packagesettings.props.local if you havent already via environment variables to the following
-	- **TELBlazorPackageSource** → a local folder outside of the solution
-	- **NupkgOutputPath** → the same local folder outside of the solution
-	- **UseTELBlazorComponentsProjectReference** → true
-	- **TELBlazorPackageVersion** → 1.0.0 will do for now
-	- **DisablePackageGeneration** → true
-- in .runsettings
-	- **TracingEnabled** → true
-	- **Headless** → false
-- right click the solution and copy full path (we need admin rights so dont just open terminal)
-- open powershell from windows as administrator
-- paste the route paste and cd to the solution folder
-- then run the following
-- 	```   
-		# 1. Check environment variables and local props
-		Write-Output "Have you set your environment variables and local props?"
+### Quick Setup ⚡
+
+
+- **Get the repo:** open powershell as admin, ```cd``` to where you keep your repos. run ```git clone https://github.com/TechnologyEnhancedLearning/TELBlazor.git```
+- **Create local gitignored configuration files from templates:** open the project in visual studio
+	- search template
+		- create a copy of each template removing the .template post fix
+- **Create GitHub Personal Access Token (PAT) for remote package source:**
+	- go to your [GitHub profile](https://github.com/settings/profile)
+		- you maybe able to go directly with [your github tokens section](https://github.com/settings/tokens)
+	- go to Settings → Developer settings → Personal access tokens → Tokens classic → Generate new token (classic)
+		- give it a Note, e.g. "TELBlazor Package Access"
+		- set the expiration date to something reasonable (e.g. 90 days)
+		- select the scopes you need for the token
+			- as a minimum select `read:packages` and you may wish to increase the expiration date.
+			- if you want to publish packages you will need `write:packages` and `delete:packages` but this is not recommended for development
+		- Generate token
+		- copy the token ***immediately*** (it will not be accessible again)
+	- **Set system wide environment variables (useful for future projects too):**
+		- Open Start, type "Environment Variables", and select "Edit the system environment variables".
+		- In the System Properties window, click Environment Variables….
+		- Under **System variables**, click New….
+		- Enter the Variable name and Variable values:
+			- **Add:** GITHUB_USERNAME / [Your GitHub username]
+			- **Add:** TEL_GIT_PACKAGES_TOKEN / [The copied token]
+		- then click ok
+		- Click OK again to close all dialogs.
+		- Restart visual studio and any open command prompts or apps to pick up the change.
+- **Restore Nuget, Npm, Tooling, playwright and build:**
+	- run admin powershell terminal in the repo root
+	- run the following command
+	```   
+		#1. Restore
         dotnet clean
-		
-		# 2. Restore NuGet packages (reads central package versions and props)
-		Write-Output "Restore Nuget"
 		dotnet restore
+		
+		#2. Nuget TEL Git Feed setups
+		dotnet nuget add source "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" `
+		  --name "github" `
+		  --username $env:GITHUB_USERNAME `
+		  --password $env:TEL_GIT_PACKAGES_TOKEN `
+		  --store-password-in-clear-text
 
 		# 3. Restore .NET CLI tools (Playwright, report manager for code coverage)
 		Write-Output "Restore Tools"
@@ -314,91 +112,155 @@ TELPackage part of the config but with the system environment variable values yo
 		& ".\TELBlazor.Components.ShowCase.E2ETests\bin\Debug\net8.0\playwright.ps1" install
 	```
 
-#### Check Setup Worked
-
-- Look in components **TELBlazor.Components.TELBlazorPackageVersion**
-	- **TELFrontEndPackageVersion** check the package versions
-	- it should match the version number in your `props.local` currently
-	- check nhsuk version in `package.json`
-- check `nhsuk.css` was generated by gulp in `TELBlazor.Components.ShowCase.Shared.wwwroot.css`
-- Open test runner and run tests 
-	- wait 10 seconds, then if its going make a cup of tea
-- reuse previous terminal, or right click solution and open a terminal
-	- ``` ./run-tests-and-report-with-env-values.ps1 ```
-		- (this is just a useful script for running tests and report similar to the cicd if you want to run the cicd locally you could use "nektos act" instead)
-	- it will quietly slowly do the E2E after the first tables appear so enjoy your tea and skim the readme for 5 minutes
-- look in AllTestResults folder at the solution level you should see coverage.cobertura.xml
-- find index.html at the the top level in the folder CoverageReport, open it in chrome and bookmark it if you like
-- run TELBlazor.Components.ShowCase.E2ETests.WasmServerHost
-    - take note of the TELBlazor Package Version
-	- have a click around, change the loglevel look in the browser console
-	- the host runs the client
-	- you can put debugger in program.cs of WasmServerHost because this part isnt running in the browser as the wasm
-	- once the wasm takes over to debug in the browser you need to do some setup
-		- TODO QQQQ I cant remember what i havent set up on new machine yet, i presume it doesnt work for you kevin?
-- run TELBlazor.Components.ShowCase.E2ETests.WasmServerHost	
-	- This is pure wasm so notice that there is a loader initially this is because there is no prerender
-- go into tools in the top vs bar you should see toggle test coverage highlighting. Go to loglevelswitcher.razor it should be highlighted red 
-	- qqqq todo isnt for mine is it for yours kevin?
-
-
-##### Check Setup with Package Creation
-*The TELBlazor Package Version is actually parsed from the number provided in props so don't rely on it to match the package being shown soley if your still using the ref, the project will display the new number you put in*
-- change local props to
-	- set `packagesettings.props.local` if you haven't already via environment variables and hard coding to the following
-		- **TELBlazorPackageSource** → a local folder outside of the solution
-		- **NupkgOutputPath** → the same local folder outside of the solution
-		- **UseTELBlazorComponentsProjectReference** → false
-		- **TELBlazorPackageVersion** → pick something greater than the production package number. The one without the dash [TELBlazor.Components Prod and Dev Package location](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
-			- make sure its changed so its more than the TELBlazor Package Version you previously noted
-		- **DisablePackageGeneration** → false
-	- set .runsettings
-		- **Tracing** → false
-		- **HeadlessTesting** → false 
-		
-*When doing package generation remember you need to keep incrementing the package number to get changes into the project, it would be nice to have this as an env value as an automated increment*
-- delete the local package in your package folder
-- delete the lock files
-- clean/build solution (because of build order you may need to build TELBlazor.Components first if there are issues)
-	- check package created in your package location
-- make a change to the html of `TELBlazor.Components.Components.TestComponents.CssSourceChecker.cs` you can search graphitti-wall add a <p> if you don't see it in the next build the package is in use rather than the reference :)
-- run the hosted project does it work now its set to use the package
-	- package number will have increased
-	- you shouldnt see the html you added
-- run the wasm project does it work now its set to uses package
-	- you shouldnt see the html you added
-	- Tip it can be useful to launch incognito 
-		- right click an index.html, browser with, add chrome chrome_proxy.exe and --incognito flag then select it when running the project its now an available options
-- Run tests in test runner
-	- its no longer headless so you should see multiple windows open
-
-###### Optional
-- run ps1 test script
-	
+The project should now work. See other sections for what projects to run, and configuration.
 
-##### Check Setup With Package reference remote
+> ⚠️ read the contribution section before creating a branch or commits ⚠️
 
-- *You can change the value of the env system values but visual studio caches them so swapping for a different env value is faster just remember it needs changing back for cicd*
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-		- change it in nuget.config and .props, the easiest way is to change the environment variable used, but dont commit it to cicd 
-		- *For development you will probably just use a local or remote source so you are likely just to set the environment variables and leave them after the setup checks*
-	- **NupkgOutputPath** → the same local folder outside of the solution
-	- **UseTELBlazorComponentsProjectReference** → false
-	- **TELBlazorPackageVersion** → [Find package number not dev package number, dev packages have -branchname](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
-	- **DisablePackageGeneration** → true
-	- set .runsettings
-		- **Tracing** → true
-		- **HeadlessTesting** → true 
-- delete lock files
-- clean/build
-- *if caching issues close and reopen visual studio*
-- Run tests in test runner
-- run the hosted project
-- run the wasm project
-- check that the right package is being used
 
+### Getting Started with the Project
 
+#### Contributing to the project
 
+- [Branch naming rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.releaserc.json)
+- ⚠️ Commit names are used to generate the package version, repo version and change log so much be correct ⚠️[Commit Naming Rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.commitlintrc.json)
+	- e.g. "docs(readme): added detail on commit rules"
+	
+#### Configuring the project
+
+| File | Description | Variable | Purpose|
+|---|---|---|---|
+|runsettings|configures playwrights| headless, tracing| make tests more detailed or visible or run faster|
+|nuget.config|overwritten in cicd so feel free to change it| Remote and local telblazor nuget sources |Comment in/out depending which source you need|	
+|Package.Settings.Props | Used by CICD can receive environment variables or msbuild parameters | 	NugetPackagesOutputPath  UseTELBlazorComponentsProjectReference  TELBlazorPackageVersion DisablePackageGeneration | For CICD |
+|Package.Settings.Props.local| overwrite package.settings.props locally | NugetPackagesOutputPath | Where you want your package creating |
+|Package.Settings.Props.local|  | UseTELBlazorComponentsProjectReference | For quick development use the project reference instead of a package |
+|Package.Settings.Props.local| | TELBlazorPackageVersion | local package version you're creating or consuming |
+|Package.Settings.Props.local|	 | DisablePackageGeneration | Stops package creation on build. |
+|appsettings | | | Serilog configuration |
+
+*Its recommended not to build the solution with package generation enabled and project reference disabled at the same time.*
+*Creating your package outside of the project can be convenient for other local solutions consuming it.*
+
+#### Tips
+
+- If you don't want to wait for the pipeline to fail your commit names and for pushes to accidently expose your secrets: you may want to add
+	- gitguardian from confluence docs (follow it to the letter) [gitguardian global setup instructions](https://hee-tis.atlassian.net/wiki/spaces/TP/pages/3855253505/GitGuardian+Setup+-+Simplified+Version)
+	- and add a pre-commit and push hook (you need both as you cannot lint what hasnt yet been commit) you can add these to your git templates if you want them for every repo, or just to this repos pre- push- commits, or you can be lazy and add them into the gitguardian hook
+	- you will need git commitlint globally (angular because it goes with the versioning tool for repo versioning)
+		
+		```
+			npm install -g @commitlint/cli @commitlint/config-angular
+		```
+	-	```
+			#### --- Commitlint Logic (force local config) ---
+			REPO_ROOT=$(git rev-parse --show-toplevel)
+			CONFIG_PATH="$REPO_ROOT/.commitlintrc.json"
+			echo "COMMIT_MSG_FILE is one msg behind it is only set to the commit your trying to commit after the commit succeeds so this script is one behind"
+			echo "so would work best in prepush template"
+			COMMIT_MSG_FILE="$REPO_ROOT/.git/COMMIT_EDITMSG"
+
+			# Check if the local .commitlintrc.json exists in the repository root
+			if [ -f "$CONFIG_PATH" ]; then
+
+				echo "✅ Local .commitlintrc.json found at: $CONFIG_PATH. Running commitlint..."
+				echo "⚠️ if commit lint fails in precommit its actually reading previous commit name you need to reset or squash make a new commit and change .git/COMMIT_EDITMSG to something that would pass. ⚠️"
+
+				if command -v npx &> /dev/null; then
+				
+						cd "$REPO_ROOT" || exit 1
+
+						# Debug: Print the commit message file content
+						if [ -f "$COMMIT_MSG_FILE" ]; then
+							echo "Commit message content:"
+							cat "$COMMIT_MSG_FILE"
+						else
+							echo "❌ Commit message file not found!"
+							exit 1
+						fi
+						
+						
+						# Run commitlint, explicitly pointing to the local config and providing the commit message via stdin
+						OUTPUT1=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --edit="$COMMIT_MSG_FILE" 2>&1)
+						
+						EXIT_CODE1=$?
+						# echo "!!!!!!!!!!! OUTPUT1"
+						# echo "$OUTPUT1"
+						
+						
+						# OUTPUT2=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --from=origin/master --to=HEAD 2>&1)
+						
+						# EXIT_CODE2=$?
+						# echo "!!!!!!!!!!! OUTPUT2"
+						# echo "$OUTPUT2"
+						
+						# OUTPUT3=$(npx.cmd --no -- commitlint --config=".commitlintrc.json"  --from-last-tag 2>&1)
+						
+						
+						# EXIT_CODE3=$?
+						# echo "!!!!!!!!!!! OUTPUT3"
+						# echo "$OUTPUT3"
+						
+
+
+					#if [ "$EXIT_CODE1" -ne 0 ] || [ "$EXIT_CODE2" -ne 0 ] || [ "$EXIT_CODE3" -ne 0 ];  then
+					if [ "$EXIT_CODE1" -ne 0 ];  then
+						echo "❌ Commitlint failed:"
+						
+						echo "$OUTPUT1"
+						exit 1
+					else
+						echo "✅ Commitlint passed!"
+					fi
+				else
+					echo "⚠️ npx not found. Please ensure Node.js and npm are installed to use commitlint."
+					# Optionally fail here
+					# exit 1
+				fi
+			else
+				echo "ℹ️ No local .commitlintrc.json found in $REPO_ROOT. Skipping commitlint."
+			fi
+		``` 
+
+#### Building the package
+- To build a package
+	- nuget config
+		- ensure the feed is still set to local```<add key="TELBlazorPackageSource" value="%LOCAL_PACKAGES_PATH%" />```
+	- Package.settings.props.local to create package
+		- NugetPackagesOutputPath -> LOCAL_PACKAGES_PATH
+		- UseTELBlazorComponentsProjectReference -> true
+		- TELBlazorPackageVersion -> 9.9.9-local of something higher than you have
+		- DisablePackageGeneration -> false
+	- delete lock files
+	- build solution
+	- change package.settings.props.local to consume package
+		- UseTELBlazorComponentsProjectReference -> false
+		- DisablePackageGeneration -> true
+	- build solution
+
+#### Running the projects
+- depending on whether your consuming a package or using a project reference set package.settings.props.local UseTELBlazorComponentsProjectReference to what you want
+- run wasmserverhost to see the showcase as blazor wasm prerendered
+- run wasmstaticclient to see pure wasm site
+
+#### Testing the project
+- you can use the test runner
+- runsettings allows configuration of headless and tracing|
+- packagesettings.props sets thresholds
+- running at solution level ./run-tests-and-report-with-env-values.ps1 (see in the file for specific arguments you may want to set)
+	- will produce a test coverage site [your repo folder]/TELBlazor/CoverageReport/index.html
+	
+
+### Troubleshooting Package build errors 
+    - delete local `TELBlazor.Components` packages
+    - check `TELBlazorPackageVersion` has been incremented
+    - delete lock files
+	- clean solution
+	- check environment values in `props` and `nuget.config`
+	- restore nuget packages 
+	- restore solution
+	- if still not working delete bin and obj
+	- if still not working close visual studio and reopen
+	- if there are still issues its easier to problem solve by using a random very high `TELBlazor.Components` package version number and ensuring it fails and says it found the source but not the version
 
 
 
@@ -411,17 +273,11 @@ from the repo and ShowCase project for how to include the package.
 
 # Solution and Pipeline
 
-## Features of solution
-- run-tests-and-report-with-env-values.ps1 runs test similar to pipeline
-	- create html coverage report and threshold check (recommendation: bookmark local html file in browser to easily view)
-	
 ## Features of CICD
 - There is a readme in the CICD
 - A DevShowCase sight is created using a DevPackage and the same in production
 	- The dev pipeline also publishes a coverage report
 
-## Local Files and Development Settings
-
 
 # Solution Detail
 
@@ -445,7 +301,7 @@ from the repo and ShowCase project for how to include the package.
  - TELBlazor.Components.ShowCase.WasmStaticClient
 	- Wasm global standalone 
 	
-## Configuration
+
 
 ### Logging
 - For more detailed dependency injected logging see MVCBlazor project	
@@ -458,7 +314,7 @@ from the repo and ShowCase project for how to include the package.
 changed so that they are using the same and this could be done in future 
 as the libraries improve but currently each is being used with the 
 recommend tool it is designed for though both support the others tool.
-- not using data-testid="TELButton" because we should use aria selectors. We may change this later.
+- not using data-testid="TELButton" because we should use aria selectors. We may change this later (first rule of aria dont use aria).
    - e.g. data-attribute-telblazorcomponentname="TelBlazorButton"
 - not using guid id as i have elsewhere either [Parameter] public string ElementId { get; set; } = $"tel-button-{Guid.NewGuid():N}";
 - various things have been cut from mvcblazor so it is worth returning to for potential solutions if developing this solution [MVCBlazor repo](https://github.com/TechnologyEnhancedLearning/MVCBlazor)
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/Program.cs b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/Program.cs
index 3e478c6..12807f3 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/Program.cs
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/Program.cs
@@ -1,4 +1,6 @@
 // Microsoft namespaces
+// Still required server side even if not used so components dont fail
+using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
@@ -6,27 +8,22 @@
 using Microsoft.Extensions.Http;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
-
 // Serilog core (used via appsettings, do not delete even if vs marks not in use)
 using Serilog;
 using Serilog.Configuration;
 using Serilog.Core;
 using Serilog.Events;
-
 // Serilog extensions and sinks (used via appsettings, do not delete even if vs marks not in use)
 using Serilog.Extensions.Logging;
 using Serilog.Formatting.Compact;
 using Serilog.Settings.Configuration;
 using Serilog.Sinks.BrowserConsole;
-
-// Still required server side even if not used so components dont fail
-using Blazored.LocalStorage;
-
 // TELBlazor components
 using TELBlazor.Components.Core.Configuration;
 using TELBlazor.Components.Core.Services.HelperServices;
-using TELBlazor.Components.ShowCase.E2ETests.WasmServerHost;
+using TELBlazor.Components.OptionalImplementations.Core.DI;
 using TELBlazor.Components.OptionalImplementations.Core.Services.HelperServices;
+using TELBlazor.Components.ShowCase.E2ETests.WasmServerHost;
 
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -74,7 +71,7 @@
     // qqqq do we need it builder.Services.AddScoped<LoggingLevelSwitch>(sp => levelSwitch);
     builder.Services.AddScoped<ILogLevelSwitcherService, SerilogLogLevelSwitcherService>();
     builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+    builder.Services.AddTELBlazorComponentServicesForTestComponents();
     await builder.Build().RunAsync();
 }
 catch (Exception ex)
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
index ca686c8..8e2b83f 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
@@ -40,15 +40,15 @@
       },
       "Microsoft.NET.ILLink.Tasks": {
         "type": "Direct",
-        "requested": "[8.0.16, )",
-        "resolved": "8.0.16",
-        "contentHash": "0H1QaKpVibe++Zx6EYJQGhrpfz2bBPGiQ7Rpsmx8I3+oKv+ZRRIfVfmcj50KuZlhhRE6V02y5bUjP+V2oPM2ng=="
+        "requested": "[8.0.17, )",
+        "resolved": "8.0.17",
+        "contentHash": "x5/y4l8AtshpBOrCZdlE4txw8K3e3s9meBFeZeR3l8hbbku2V7kK6ojhXvrbjg1rk3G+JqL1BI26gtgc1ZrdUw=="
       },
       "Microsoft.NET.Sdk.WebAssembly.Pack": {
         "type": "Direct",
-        "requested": "[8.0.16, )",
-        "resolved": "8.0.16",
-        "contentHash": "Lu5e8iqQzLnMrD0WmHz6yw7EEauaP9Ip5RxtZgSmi1GhcymZvL1MU6vFerVHbT+FPuqHSlEyM3rXtcQE8NElAw=="
+        "requested": "[8.0.17, )",
+        "resolved": "8.0.17",
+        "contentHash": "wufm5kIsP5PlG54bahrhJDPbN114ru7mIYOdyVQS4sCr3811SLqcn1X6rg3mxZgGxRbyfMcMBXcg5P2HV/MRYQ=="
       },
       "Serilog": {
         "type": "Direct",
@@ -320,7 +320,7 @@
           "Blazored.LocalStorage": "[4.5.0, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
-          "TELBlazor.Components": "[1.8.0, )"
+          "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
       "Microsoft.AspNetCore.Components.Web": {
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/wwwroot/appsettings.Development.json.template b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/wwwroot/appsettings.Development.json.template
index 8423046..daec42c 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/wwwroot/appsettings.Development.json.template
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/wwwroot/appsettings.Development.json.template
@@ -1,5 +1,9 @@
 {
   "APIs": {
+    "SearchApi": {
+      "BaseUrl": "https://lh-openapi.dev.local",
+      "BearerToken": "your_token_here"
+    }
   },
 
   "Serilog": {
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/Program.cs b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/Program.cs
index fd02793..bc5c216 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/Program.cs
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/Program.cs
@@ -27,7 +27,7 @@
 using TELBlazor.Components.Core.Services.HelperServices;
 using TELBlazor.Components.ShowCase.E2ETests.WasmServerHost;
 using TELBlazor.Components.OptionalImplementations.Core.Services.HelperServices;
-
+using TELBlazor.Components.OptionalImplementations.Core.DI;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -76,7 +76,7 @@
     //Scoped because being consumed with storage where singleton doesnt survive mvc page teardown
     builder.Services.AddScoped<LoggingLevelSwitch>(sp => levelSwitch);
     builder.Services.AddScoped<ILogLevelSwitcherService, SerilogLogLevelSwitcherService>();
-
+    builder.Services.AddTELBlazorComponentServicesForTestComponents();
 
     var app = builder.Build();
     // This is less blazor more endpoint logging
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/_Imports.razor b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/_Imports.razor
index 203f309..0be6f53 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/_Imports.razor
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/_Imports.razor
@@ -2,3 +2,4 @@
 @using Microsoft.AspNetCore.Components.Web
 @using static Microsoft.AspNetCore.Components.Web.RenderMode
 @using TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client
+@using TELBlazor.Components.OptionalImplementations.Test
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/appsettings.Development.json.template b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/appsettings.Development.json.template
index bb1e628..319791f 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/appsettings.Development.json.template
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/appsettings.Development.json.template
@@ -1,5 +1,9 @@
 {
   "APIs": {
+    "SearchApi": {
+      "BaseUrl": "https://lh-openapi.dev.local",
+      "BearerToken": "your_token_here"
+    }
   },
   "Serilog": {
     "Using": [
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
index fd9d8fa..645a0f5 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
@@ -348,7 +348,7 @@
           "Serilog.Settings.Configuration": "[8.0.0, )",
           "Serilog.Sinks.BrowserConsole": "[8.0.0, )",
           "Serilog.Sinks.Http": "[8.0.0, )",
-          "TELBlazor.Components": "[1.8.0, )",
+          "TELBlazor.Components": "[1.9.2-local, )",
           "TELBlazor.Components.ShowCase.Shared": "[1.0.0, )"
         }
       },
@@ -358,7 +358,7 @@
           "Blazored.LocalStorage": "[4.5.0, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
-          "TELBlazor.Components": "[1.8.0, )"
+          "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
       "Microsoft.AspNetCore.Components.Web": {
diff --git a/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
index 6d47616..41560dc 100644
--- a/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
@@ -1601,7 +1601,7 @@
           "Serilog.Settings.Configuration": "[8.0.0, )",
           "Serilog.Sinks.BrowserConsole": "[8.0.0, )",
           "Serilog.Sinks.Http": "[8.0.0, )",
-          "TELBlazor.Components": "[1.8.0, )",
+          "TELBlazor.Components": "[1.9.2-local, )",
           "TELBlazor.Components.ShowCase.Shared": "[1.0.0, )"
         }
       },
@@ -1611,7 +1611,7 @@
           "Blazored.LocalStorage": "[4.5.0, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
-          "TELBlazor.Components": "[1.8.0, )"
+          "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
       "Blazored.LocalStorage": {
diff --git a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
index e22acfb..5a94434 100644
--- a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
@@ -1,4 +1,5 @@
-@layout ComponentPageLayout
+
+@layout ComponentPageLayout
 <div class="component-showcase">
     @if(IsTestComponent){
         <h1 class="test-component-warning-header">This is a Test Component</h1>
@@ -7,7 +8,9 @@
     }
     
     <h2>@Title</h2>
+    <JSDisabledWarning/>
     <TELBlazorPackageVersionInformation />
+    
     <div class="component-presentor">
         @ChildContent
     </div>
diff --git a/TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor b/TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor
index 9fdc4aa..e012873 100644
--- a/TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor
@@ -21,6 +21,7 @@
 
     <div class="nhsuk-navigation-container">
     </div>
+
 </header>
 
 
@@ -29,6 +30,7 @@
 
     <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s app-main-wrapper" id="maincontent" role="main">
         <TELBlazorPackageVersionInformation/>
+        <JSDisabledWarning/>
         <div class="nhsuk-grid-row">
             <div class="nhsuk-grid-column-full app-component-reading-width">
 
diff --git a/TELBlazor.Components.ShowCase.Shared/Pages/Error.razor b/TELBlazor.Components.ShowCase.Shared/Pages/Error.razor
index 4248f90..36c62e9 100644
--- a/TELBlazor.Components.ShowCase.Shared/Pages/Error.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Pages/Error.razor
@@ -1,4 +1,6 @@
 @page "/Error/"
-<img src="https://images.app.goo.gl/KNwMr1KibcuxXCkN8"
+
+<h1>This error has taken you to the ocean! ...</h1>
+<img src="https://i.pinimg.com/474x/d8/eb/af/d8ebaf49f69484240880535db02dbe33.jpg"
      alt="Error Image Finn Ocean"
      style="width:75%; height:75%; object-fit: cover; display: block;" />
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.Shared/Pages/NoJSFormSubmitStubPage.razor b/TELBlazor.Components.ShowCase.Shared/Pages/NoJSFormSubmitStubPage.razor
new file mode 100644
index 0000000..48d32a5
--- /dev/null
+++ b/TELBlazor.Components.ShowCase.Shared/Pages/NoJSFormSubmitStubPage.razor
@@ -0,0 +1,12 @@
+@page "/nojsformsubmitstubpage"
+
+<h1> Welcome to nojsformsubmitstubpage </h1>
+<p>NoJS form submit stub page, if your here your in a nojs browser or clicked quick on a prerender hosting of the page, 
+    testing can catch the request before it gets here and check the data being sent is correct before redirection happens.
+</p>
+    <p> but if you're not here because of the about then something went wrong...</p>
+    <h2>Welcome to the ocean!</h2>
+<img src="https://i.pinimg.com/474x/d8/eb/af/d8ebaf49f69484240880535db02dbe33.jpg"
+     alt="Error Image Finn Ocean"
+     style="width:75%; height:75%; object-fit: cover; display: block;" />
+
diff --git a/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor b/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
index 4e3352d..24f8e14 100644
--- a/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
@@ -4,12 +4,21 @@
           Instructions="@Instructions"
           Description="@Description"
           IsTestComponent="@IsTestComponent">
-    <SearchExperiment />
+    <SearchExperiment NoJSActionUrl="@NoJSActionUrl"
+          NoJSControllerSetSearchText="@NoJSSearchText"
+          NoJSControllerSetSearchResults="@NoJSSearchResults"
+          NoJSControllerSetSuggestions="@NoJSSuggestions"/>
+    <h1>qqqq put a readme link or markdig section per component here in future</h1>
 </ShowCase>
 
 @code {
     private bool IsTestComponent => true;
     private string Title => "SearchExperiment";
-    private string Instructions => "Try searching";
+    private string Instructions => "Try searching: ⚠️ Warning: This is a test element. It is only hitting the suggestion endpoint currently for searches and for suggestions, as that is all that is available. Suggestions shown won’t necessarily lead to effective or relevant search results.";
     private string Description => "This is not a prototype for the new search component its a test component just for a component needing a service only";
+    private string NoJSSearchText = "Example previous nojs search";
+    private string NoJSActionUrl = "/nojsformsubmitstubpage";
+    private List<string> NoJSSearchResults = new List<string>() {"In a nojs browser", " the user would first get a blanks components ", " they then send their data",  " the Controller would provide","this static info back", "including original provideds search", "having used the same service", "serverside in its controller"};
+    private List<string> NoJSSuggestions = new List<string>() {"Unsure if this would work ","it might do but we wouldnt", " want to spam a page reload per button press ", " so maybe there would be different suggestions in nojs" };
+
 }
diff --git a/TELBlazor.Components.ShowCase.Shared/Utilities/JSDisabledWarning.razor b/TELBlazor.Components.ShowCase.Shared/Utilities/JSDisabledWarning.razor
new file mode 100644
index 0000000..667a1b3
--- /dev/null
+++ b/TELBlazor.Components.ShowCase.Shared/Utilities/JSDisabledWarning.razor
@@ -0,0 +1,3 @@
+<noscript b-e5z3y0iorl="">
+    <div style="border: 2px solid #e67e22; background-color: #fef5e7; padding: 1em; margin: 1em 0; border-radius: 5px; font-family: sans-serif;">⚠️ <strong b-e5z3y0iorl="">JavaScript Disabled:</strong> The showcase does not have controller endpoints, it's' pure blazor, form posts to generate more static content will result in seeing a form error. However the tests can intersept the posts and check the right data is passed.</div>
+</noscript>
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.Shared/_Imports.razor b/TELBlazor.Components.ShowCase.Shared/_Imports.razor
index a54e1eb..62c1560 100644
--- a/TELBlazor.Components.ShowCase.Shared/_Imports.razor
+++ b/TELBlazor.Components.ShowCase.Shared/_Imports.razor
@@ -11,8 +11,9 @@
 @using TELBlazor.Components.Core.Extensions
 @using Microsoft.AspNetCore.Components.Forms
 @using TELBlazor.Components.Components.BaseComponents
-@using TELBlazor.Components.OptionalImplementations.TestComponents
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents
 @using Microsoft.Extensions.Logging;
 @using Microsoft.AspNetCore.Components.Routing
 @using TELBlazor.Components.ShowCase.Shared.Layouts.ComponentLayouts
-@using TELBlazor.Components.OptionalImplementations.TestComponents.SearchExperiment
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+@using TELBlazor.Components.ShowCase.Shared.Utilities
diff --git a/TELBlazor.Components.ShowCase.WasmStaticClient/Program.cs b/TELBlazor.Components.ShowCase.WasmStaticClient/Program.cs
index 143e35f..9387134 100644
--- a/TELBlazor.Components.ShowCase.WasmStaticClient/Program.cs
+++ b/TELBlazor.Components.ShowCase.WasmStaticClient/Program.cs
@@ -1,35 +1,31 @@
 // Microsoft namespaces
+// Still required server side even if not used so components dont fail
+using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
 using Microsoft.Extensions.Http;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
-using Microsoft.Extensions.Hosting;
-using Microsoft.Extensions.DependencyInjection;
-
 // Serilog core (used via appsettings, do not delete even if vs marks not in use)
 using Serilog;
 using Serilog.Configuration;
 using Serilog.Core;
 using Serilog.Events;
-
 // Serilog extensions and sinks (used via appsettings, do not delete even if vs marks not in use)
 using Serilog.Extensions.Logging;
 using Serilog.Formatting.Compact;
 using Serilog.Settings.Configuration;
 using Serilog.Sinks.BrowserConsole;
-
-// Still required server side even if not used so components dont fail
-using Blazored.LocalStorage;
-
 // TELBlazor components
 using TELBlazor.Components.Core.Configuration;
 using TELBlazor.Components.Core.Services.HelperServices;
-
-using TELBlazor.Components.ShowCase.WasmStaticClient;
+using TELBlazor.Components.OptionalImplementations.Core.DI;
 using TELBlazor.Components.OptionalImplementations.Core.Services.HelperServices;
+using TELBlazor.Components.ShowCase.WasmStaticClient;
 
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -78,7 +74,7 @@
     builder.Services.AddScoped<LoggingLevelSwitch>(sp => levelSwitch);
     builder.Services.AddScoped<ILogLevelSwitcherService, SerilogLogLevelSwitcherService>();
     builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+    builder.Services.AddTELBlazorComponentServicesForTestComponents();
     await builder.Build().RunAsync();
 }
 catch (Exception ex)
diff --git a/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json b/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
index a5fc1e5..e3f0b36 100644
--- a/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
@@ -76,15 +76,15 @@
       },
       "Microsoft.NET.ILLink.Tasks": {
         "type": "Direct",
-        "requested": "[8.0.16, )",
-        "resolved": "8.0.16",
-        "contentHash": "0H1QaKpVibe++Zx6EYJQGhrpfz2bBPGiQ7Rpsmx8I3+oKv+ZRRIfVfmcj50KuZlhhRE6V02y5bUjP+V2oPM2ng=="
+        "requested": "[8.0.17, )",
+        "resolved": "8.0.17",
+        "contentHash": "x5/y4l8AtshpBOrCZdlE4txw8K3e3s9meBFeZeR3l8hbbku2V7kK6ojhXvrbjg1rk3G+JqL1BI26gtgc1ZrdUw=="
       },
       "Microsoft.NET.Sdk.WebAssembly.Pack": {
         "type": "Direct",
-        "requested": "[8.0.16, )",
-        "resolved": "8.0.16",
-        "contentHash": "Lu5e8iqQzLnMrD0WmHz6yw7EEauaP9Ip5RxtZgSmi1GhcymZvL1MU6vFerVHbT+FPuqHSlEyM3rXtcQE8NElAw=="
+        "requested": "[8.0.17, )",
+        "resolved": "8.0.17",
+        "contentHash": "wufm5kIsP5PlG54bahrhJDPbN114ru7mIYOdyVQS4sCr3811SLqcn1X6rg3mxZgGxRbyfMcMBXcg5P2HV/MRYQ=="
       },
       "Serilog": {
         "type": "Direct",
@@ -463,7 +463,7 @@
           "Blazored.LocalStorage": "[4.5.0, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
-          "TELBlazor.Components": "[1.8.0, )"
+          "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
       "Microsoft.AspNetCore.Components.Web": {
diff --git a/TELBlazor.Components.ShowCase.WasmStaticClient/wwwroot/appsettings.Development.json.template b/TELBlazor.Components.ShowCase.WasmStaticClient/wwwroot/appsettings.Development.json.template
index 91a07f1..9508ceb 100644
--- a/TELBlazor.Components.ShowCase.WasmStaticClient/wwwroot/appsettings.Development.json.template
+++ b/TELBlazor.Components.ShowCase.WasmStaticClient/wwwroot/appsettings.Development.json.template
@@ -1,5 +1,10 @@
 {
   "APIs": {
+    /*Not in production there needs to be a specific soluton for security*/
+    "SearchApi": {
+      "BaseUrl": "https://lh-openapi.dev.local",
+      "BearerToken": "your_token_here"
+    }
   },
 
   "Serilog": {
diff --git a/TELBlazor.Components.UnitTests/_Imports.razor b/TELBlazor.Components.UnitTests/_Imports.razor
index d70747a..97cfa9b 100644
--- a/TELBlazor.Components.UnitTests/_Imports.razor
+++ b/TELBlazor.Components.UnitTests/_Imports.razor
@@ -28,7 +28,7 @@
 
 // Unit tests
 @using TELBlazor.Components.UnitTests.DI
-@using TELBlazor.Components.OptionalImplementations.TestComponents
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents
 @using TELBlazor.Components.Core.Enums
 @using TELBlazor.Components.Core.Extensions
 
diff --git a/TELBlazor.Components/Components/BaseComponents/TELButton.razor b/TELBlazor.Components/Components/BaseComponents/TELButton.razor
index 867626c..82046c9 100644
--- a/TELBlazor.Components/Components/BaseComponents/TELButton.razor
+++ b/TELBlazor.Components/Components/BaseComponents/TELButton.razor
@@ -55,7 +55,7 @@ else
     ///</summary>
     [Parameter] public bool IsSubmitButtonForEditForm { get; set; } = false;
     [Parameter] public Dictionary<string, string> FormData { get; set; } = new();
-    [EditorRequired, Parameter] public required string NoJSActionUrl { get; set; } // URL for the form submission
+    [Parameter] public string NoJSActionUrl { get; set; } = null; // URL for the form submission (not required because there may be a parent form with it if its a submit for a form)
     [Parameter] public EventCallback OnClick { get; set; } // Not required because the submit wont use it, when its placed in a form.
     [Parameter] public bool PreventDoubleClick { get; set; } = false; // View Component equivalent behaviour
 
diff --git a/TELBlazor.Components/OptionalImplementations/Core/DI/DI.cs b/TELBlazor.Components/OptionalImplementations/Core/DI/DI.cs
index ecf309d..72edd36 100644
--- a/TELBlazor.Components/OptionalImplementations/Core/DI/DI.cs
+++ b/TELBlazor.Components/OptionalImplementations/Core/DI/DI.cs
@@ -9,11 +9,13 @@
 using System.Text;
 using System.Threading.Tasks;
 using TELBlazor.Components.Core.Configuration;
+using TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment;
 
 namespace TELBlazor.Components.OptionalImplementations.Core.DI
 {
     public static class DI
     {
+
         private static IServiceCollection AddTELBlazorComponentServicessShared(this IServiceCollection services,
             ITELBlazorBaseComponentConfiguration TELBlazorBaseComponentConfiguration
             )
@@ -34,5 +36,12 @@ ITELBlazorBaseComponentConfiguration TELBlazorBaseComponentConfiguration
         {
             throw new NotImplementedException("This method is not implemented yet. See DI task");
         }
+        public static IServiceCollection AddTELBlazorComponentServicesForTestComponents(this IServiceCollection services)
+        {
+            services.AddHttpClient();
+            services.AddScoped<ISearchExperimentService, SearchExperimentServiceOpenApi>();
+            return services;
+        }
+
     }
 }
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/CssSourceChecker.razor b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/CssSourceChecker.razor
similarity index 100%
rename from TELBlazor.Components/OptionalImplementations/TestComponents/CssSourceChecker.razor
rename to TELBlazor.Components/OptionalImplementations/Test/TestComponents/CssSourceChecker.razor
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/CssSourceChecker.razor.css b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/CssSourceChecker.razor.css
similarity index 100%
rename from TELBlazor.Components/OptionalImplementations/TestComponents/CssSourceChecker.razor.css
rename to TELBlazor.Components/OptionalImplementations/Test/TestComponents/CssSourceChecker.razor.css
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/LogLevelSwitcher.razor b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/LogLevelSwitcher.razor
similarity index 100%
rename from TELBlazor.Components/OptionalImplementations/TestComponents/LogLevelSwitcher.razor
rename to TELBlazor.Components/OptionalImplementations/Test/TestComponents/LogLevelSwitcher.razor
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/DummyData.cs b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/DummyData.cs
similarity index 97%
rename from TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/DummyData.cs
rename to TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/DummyData.cs
index 23d70e4..ac565b4 100644
--- a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/DummyData.cs
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/DummyData.cs
@@ -4,7 +4,7 @@
 using System.Text;
 using System.Threading.Tasks;
 
-namespace TELBlazor.Components.OptionalImplementations.TestComponents.SearchExperiment
+namespace TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
 {
     public static class DummyData
     {
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ISearchExperimentService.cs b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ISearchExperimentService.cs
new file mode 100644
index 0000000..9de77ec
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ISearchExperimentService.cs
@@ -0,0 +1,53 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+{
+    public interface ISearchExperimentService
+    {
+
+            /// <summary>
+            /// Gets search suggestions for a term
+            /// </summary>
+            /// <param name="term">The search term</param>
+            /// <param name="cancellationToken">Cancellation token</param>
+            /// <returns>List of suggestion strings</returns>
+            public Task<IEnumerable<string>> GetSuggestionsAsync(string term, CancellationToken cancellationToken = default);
+
+            /// <summary>
+            /// Performs a search and returns results
+            /// </summary>
+            /// <param name="searchTerm">The search term</param>
+            /// <param name="cancellationToken">Cancellation token</param>
+            /// <returns>List of search result strings</returns>
+            public Task<IEnumerable<string>> SearchAsync(string searchTerm, CancellationToken cancellationToken = default);
+        }
+
+        ///// <summary>
+        ///// Extended search service interface for more advanced scenarios
+        ///// If you need more complex results, implement this instead
+        ///// </summary>
+        //public interface IAdvancedSearchService
+        //{
+        //    /// <summary>
+        //    /// Gets search suggestions with metadata
+        //    /// </summary>
+        //    /// <param name="term">The search term</param>
+        //    /// <param name="cancellationToken">Cancellation token</param>
+        //    /// <returns>Search suggestions with metadata</returns>
+        //    Task<SuggestionResult> GetSuggestionsAsync(string term, CancellationToken cancellationToken = default);
+
+        //    /// <summary>
+        //    /// Performs a search with pagination and filtering
+        //    /// </summary>
+        //    /// <param name="request">The search request</param>
+        //    /// <param name="cancellationToken">Cancellation token</param>
+        //    /// <returns>Paginated search results</returns>
+        //    Task<SearchResult> SearchAsync(SearchRequest request, CancellationToken cancellationToken = default);
+        //}
+
+    
+}
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperiment.razor
similarity index 68%
rename from TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor
rename to TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperiment.razor
index 9bfcdb5..8d7470d 100644
--- a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperiment.razor
@@ -5,8 +5,11 @@
 <!--will want debounce-->
 <!--will want cancel if still going-->
 @inherits TELComponentBase
-<!--think it will be a specific service instead-->
+<!--think it will be a specific service instead but we would probably have this in an option on this component potentially?-->
+<!-- NavigationManager.NavigateTo($"search/{searchText}/1");-->
+<!--also we on query a bit so navigation manager would be good for that https://example.com/search?Term=blazor&Filters=video&Filters=article&Sortby=1&CataloguePageIndex=2-->
 @inject NavigationManager NavigationManager 
+@inject ISearchExperimentService searchExperimentService
 @* @implements IDisposable *@
 @using static DummyData
 <header class="nhsuk-header" role="banner">
@@ -16,14 +19,17 @@
                 <div class="nhsuk-header__search-wrap" id="wrap-search">
                     <!--qqqq ending up with nojsfallback in both places may need button redesign-->
                         <EditForm Model="FormData" OnSubmit="SendSearchRequest" action="@(NoJSActionUrl)"
-                                role="form" 
+                              FormName="SearchMainForm"
+                              name="SearchMainForm"
+                              role="form" 
                                 tabindex="0" 
                                 method="post" >
                                 <!--shouldnt need-->
-                        @foreach (var keyValuePair in FormData)
+                         @foreach (var keyValuePair in FormData)
                         {
                             <input tabindex="-1" type="hidden" name="@keyValuePair.Key" value="@keyValuePair.Value" />
-                        }
+                        } 
+
                         <div class="nhsuk-header__search-form" role="search">
                             <label class="nhsuk-u-visually-hidden" for="search-field">Search the learning hub</label>
                             <input class="nhsuk-search__input"
@@ -48,7 +54,7 @@
 
                                    <!--button needs changing for icon-->
                             <TELButton IsSubmitButtonForEditForm=true
-                                   NoJSActionUrl="@NoJSActionUrl"
+
                                    ButtonStyle="TELButtonStyle.Primary"
                                    PreventDoubleClick=false
                                        ButtonText="🔎"
@@ -63,45 +69,13 @@
                             </TELButton>  *@
                         </div>
                  </EditForm>
-                  
-
-
-
-                    @*Copy original*@
-@*                     <form class="nhsuk-header__search-form" id="search" method="get" role="search" action="/search/results">
-                        <label class="nhsuk-u-visually-hidden" for="search-field">Search the learning hub</label>
-                        <input class="nhsuk-search__input" id="search-field" name="term" type="search" placeholder="Search the learning hub" autocomplete="off">
-                        <ul id="search-field_listbox" class="nhsuk-list autosuggestion-menu" style="display:none"></ul>
-                        <button class="nhsuk-search__submit" type="submit">
-                            <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-                            </svg>
-                            <span class="nhsuk-u-visually-hidden">Search</span>
-                        </button>
-
-                        <label for="header-mobile-search-control" class="nhsuk-search__close" id="close-search">
-                            <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-                            </svg>
-                            <span class="nhsuk-u-visually-hidden">Close search</span>
-                        </label>
-                    </form> *@
-
 
                 </div>
             </div>
         </div>
     </div>
 </header>
-@* <section class="search-suggestions">
-    <h3>Search Suggestions</h3>
-    <datalist id="search-suggestions-some-guid" class="nhsuk-list autosuggestion-menu">
-        @foreach (var suggestion in suggestions)
-        {
-            <option>@suggestion</option>
-        }
-</datalist>
-</section> *@
+
 <section class="search-results">
     <h3>Search Results</h3>
     <ul>
@@ -120,8 +94,18 @@
     private List<string> suggestions = new List<string>();
     protected ElementReference searchInput;
 
-
-
+    ///  <summary>
+    ///  This is just for controller actions in a nojs environment
+    /// </summary>
+    [Parameter] public string NoJSControllerSetSearchText { get; set; } = String.Empty;
+    ///  <summary>
+    ///  This is just for controller actions in a nojs environment
+    /// </summary>
+    [Parameter] public List<string> NoJSControllerSetSearchResults { get; set; } = new();
+    ///  <summary>
+    ///  This is just for controller actions in a nojs environment
+    /// </summary>
+    [Parameter] public List<string> NoJSControllerSetSuggestions { get; set; } = new();
 
     private CancellationTokenSource _cts;
     /*avoid potential memory leak from mvc taredown by counting down not up by not search on first 3 letters can initiate*/
@@ -130,6 +114,15 @@
 
     // SendSearchRequest SendSuggestionRequest presumeably same end point but maybe a bool for no suggestions
 
+
+    protected override void OnParametersSet()
+    {
+        searchText = NoJSControllerSetSearchText;
+        searchResults = NoJSControllerSetSearchResults;
+        suggestions = NoJSControllerSetSuggestions;
+    }
+
+
     private void StartDebounceCountdown()
     {
         // Dispose any existing timer first
@@ -156,12 +149,7 @@
 
         try
         {
-            await Task.Delay(200, _cts.Token); // simulate network delay
-        // Fake search results — in real life this could be an API call
-        searchResults = AllTerms
-                .Where(x => x.Contains(searchText, StringComparison.OrdinalIgnoreCase))
-            .OrderBy(x => x)
-            .ToList();
+            searchResults = (await searchExperimentService.SearchAsync(searchText)).ToList<string>();
         }
         catch (OperationCanceledException)
         {
@@ -175,13 +163,8 @@
 
         try
         {
-            await Task.Delay(200, _cts.Token); // simulate network delay
-
-            suggestions = DummyData.AllTerms
-                .Where(x => x.Contains(searchText, StringComparison.OrdinalIgnoreCase))
-                .OrderBy(x => x)
-                .Take(10)
-                .ToList();
+           
+            suggestions = (await searchExperimentService.GetSuggestionsAsync(searchText)).ToList<string>();
 
         }
         catch (OperationCanceledException)
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentModels.cs b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentModels.cs
new file mode 100644
index 0000000..ca4cdab
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentModels.cs
@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+{
+    //qqqq no mvp
+    public class SearchRequest
+    {
+        public string SearchTerm { get; set; } = string.Empty;
+        public int PageIndex { get; set; } = 0;
+        public int PageSize { get; set; } = 10;
+        public Dictionary<string, object> AdditionalParameters { get; set; } = new();
+    }
+
+    public class SearchResult
+    {
+        public IEnumerable<string> Results { get; set; } = Enumerable.Empty<string>();
+        public int TotalCount { get; set; }
+        public int PageIndex { get; set; }
+        public int PageSize { get; set; }
+        public bool HasMore => (PageIndex + 1) * PageSize < TotalCount;
+    }
+
+    public class SuggestionResult
+    {
+        public IEnumerable<string> Suggestions { get; set; } = Enumerable.Empty<string>();
+        public int Count { get; set; }
+    }
+}
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentServiceOpenApi.cs b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentServiceOpenApi.cs
new file mode 100644
index 0000000..16d352d
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentServiceOpenApi.cs
@@ -0,0 +1,196 @@
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging;
+using Serilog.Core;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net.Http.Headers;
+using System.Net.Http.Json;
+using System.Text;
+using System.Threading.Tasks;
+using System.Text.Json;
+
+namespace TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+{
+    //curl -X 'GET' \
+    //  'https://lh-openapi.dev.local/Search/GetAutoSuggestionResult/blood' \
+    //  -H 'accept: */*' \
+    //  -H 'Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IkVCREI0RUNGNzZCRDk4Rjc2MzU1RkQxQzg3OTAzRTdGIiwidHlwIjoiYXQrand0In0.eyJuYmYiOjE3NTAyNDY1NzEsImV4cCI6MTc1MDI1MDE3MSwiaXNzIjoiaHR0cHM6Ly9saC1hdXRoLmRldi5sb2NhbCIsImF1ZCI6ImxlYXJuaW5naHViYXBpIiwiY2xpZW50X2lkIjoibGVhcm5pbmdodWJvcGVuYXBpIiwic3ViIjoiNTc1NDEiLCJhdXRoX3RpbWUiOjE3NTAyNDY0NjAsImlkcCI6ImxvY2FsIiwiZW1haWwiOiJwaGlsaXAudGF0ZUBuaHMubmV0IiwiZ2l2ZW5fbmFtZSI6IlRlc3RRUVFRRmlyc3QiLCJmYW1pbHlfbmFtZSI6IlRlc3RRUVFRTGFzdCIsInJvbGUiOiJBZG1pbmlzdHJhdG9yIiwiZWxmaF91c2VyTmFtZSI6IlRlc3RRUVFRIiwianRpIjoiQ0JBRTRFODY3QjM1M0FGMDcxNDQ2NUI5NEJBRjUyOEYiLCJzaWQiOiIxRURDNTUyRUREMDVFNEI2ODk3REFEQzI1MTVCQUZENSIsImlhdCI6MTc1MDI0NjU3MSwic2NvcGUiOlsibGVhcm5pbmdodWJhcGkiXSwiYW1yIjpbInB3ZCJdfQ.spMsOk4OAB9CDMEleutkmRygzOgOFXq15MFvHP9I0WmWHYWJOLwO-0GmfV5MzDvP-ovYQvuphE5XDJibpyzfOkGAMeFq58o2PwzHvmDfDNhqsgexBd8pXm6VEin_obj70hngvG_VFD1_JkndrT7_091fU4St6Z6_UfyVvKYD9uSOwpbr5UaBAtJYbYnB3p_0C5qtzLUhKK6Xjgbr_BMLKTo9d0RGRJ5an16_VYh8Vm3gOxBjdfizzEyOoGOns2tROPB3WO6z1RO5jODVALzZDORs_ad6wlMDq4-cORBHuRbOIwOQW6k7xLIIex5VKTEebFBwAP8ihS6SvsGa16Fs-A'
+
+//    {
+//  "stats": {
+//    "totalHits": 23,
+//    "searchEngineTimeInMillis": 3,
+//    "searchEngineRoundTripTimeInMillis": 4,
+//    "searchProcessingTimeInMillis": 5
+//  },
+//  "catalogueDocument": {
+//    "id": "catalogues_documents",
+//    "totalHits": 0,
+//    "catalogueDocumentList": []
+//  },
+//  "conceptDocument": {
+//    "id": "concepts_documents",
+//    "totalHits": 6,
+//    "conceptDocumentList": [
+//      {
+//        "id": "blood transfusion_hee-local",
+//        "title": "426 Blood Transfusion - Non Registered Staff, Mandatory Training Workbook 2019-20",
+//        "concept": "blood transfusion",
+//        "click": {
+//            "payload": {
+//                "searchSignal": {
+//                    "stats": {
+//                        "totalHits": 23
+//                    },
+//              "searchId": "5b3e2cb9-2a6b-4d9a-8879-a7ba336abf3e",
+//              "profileSignature": {
+//                        "applicationId": "HEE",
+//                "profileType": "SEARCHER",
+//                "profileId": "auto-suggestion-local"
+//              },
+//              "userQuery": "q=blood",
+//              "query": "q=blood",
+//              "timeOfSearch": 1750247278498
+//                },
+//            "hitNumber": 4,
+//            "clickTargetUrl": "blood transfusion_hee-local",
+//            "documentFields": {
+//                    "name": null,
+//              "title": "426 Blood Transfusion - Non Registered Staff, Mandatory Training Workbook 2019-20"
+//            },
+//            "containerId": "concepts_documents",
+//            "timeOfClick": null
+//            },
+//          "url": "/signals/hee/signal/click-hee"
+//        }
+//    }
+//    ]
+//  },
+//  "resourceDocument": {
+//    "id": "resources_documents",
+//    "totalHits": 17,
+//    "resourceDocumentList": [
+//      {
+
+//    }
+//    ]
+//  }
+//}
+    public class SearchExperimentServiceOpenApi :ISearchExperimentService
+    {
+        //qqqq can do alot better
+        private readonly HttpClient _httpClient;
+        private readonly string _baseUrl;
+        private readonly ILogger<SearchExperimentServiceOpenApi> _logger; // logger
+
+        public SearchExperimentServiceOpenApi(HttpClient httpClient, IConfiguration configuration, ILogger<SearchExperimentServiceOpenApi> logger)
+        {
+            _httpClient = httpClient;
+            _baseUrl = configuration["SearchApi:BaseUrl"] ?? "https://lh-openapi.dev.local";
+            _logger = logger;
+
+            //var token = configuration["SearchApi:BearerToken"];
+            //if (!string.IsNullOrEmpty(token))
+            //{
+            //    _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
+            //}
+        }
+        public async Task<IEnumerable<string>> GetSuggestionsAsync(string term, CancellationToken cancellationToken = default)
+        {
+            try
+            {
+                var url = $"{_baseUrl}/Search/GetAutoSuggestionResult/{term}";
+                var response = await _httpClient.GetFromJsonAsync<SearchResponse>(url);
+                _logger.LogWarning(JsonSerializer.Serialize(response));
+                return response?.conceptDocument?.conceptDocumentList?
+                    .Select(x => x.title)
+                    .Where(x => !string.IsNullOrWhiteSpace(x))
+                    ?? Enumerable.Empty<string>();
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Error in GetSuggestionsAsync: {ex.Message}");
+                return Enumerable.Empty<string>();
+            }
+        }
+
+        public async Task<IEnumerable<string>> SearchAsync(string term, CancellationToken cancellationToken = default)
+        {
+            try
+            {
+                var url = $"{_baseUrl}/Search/GetAutoSuggestionResult/{term}";
+                var response = await _httpClient.GetFromJsonAsync<SearchResponse>(url);
+                _logger.LogWarning(JsonSerializer.Serialize(response));
+                return response?.conceptDocument?.conceptDocumentList?
+            .Select(x => x.click?.payload?.clickTargetUrl)
+            .Where(url => !string.IsNullOrWhiteSpace(url)).DefaultIfEmpty("Soz nout found. ⚠️I'm actually just hitting the suggestion endpoint atm. coz t'uther bokked. ⚠️").ToList<string>()
+            ?? new List<string>() { "Soz nout found. ⚠I'm actually just hitting the suggestion endpoint atm.coz t'uther bokked. ⚠️" };
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Error in SearchAsync: {ex.Message}");
+                return Enumerable.Empty<string>();
+            }
+        }
+
+        private class SearchResponse
+        {
+            public ConceptDocument conceptDocument { get; set; }
+            // You could also add resourceDocument or catalogueDocument if needed
+        }
+
+        private class ConceptDocument
+        {
+            public List<ConceptItem> conceptDocumentList { get; set; }
+        }
+
+        private class ConceptItem
+        {
+            public string id { get; set; }
+            public string title { get; set; }
+            public string concept { get; set; }
+            public Click click { get; set; }
+        }
+
+        private class Click
+        {
+            public Payload payload { get; set; }
+            public string url { get; set; }
+        }
+
+        private class Payload
+        {
+            public string clickTargetUrl { get; set; }
+        }
+
+        //    // Minimal classes to match the API response shape
+        //    private class SearchResponse
+        //    {
+        //        public ConceptDocument conceptDocument { get; set; }
+        //    }
+
+        //    private class ConceptDocument
+        //    {
+        //        public List<ConceptItem> conceptDocumentList { get; set; }
+        //    }
+
+        //    private class ConceptItem
+        //    {
+        //        public string title { get; set; }
+        //        public Click click { get; set; }
+        //    }
+
+        //    private class Click
+        //    {
+        //        public Payload payload { get; set; }
+        //    }
+
+        //    private class Payload
+        //    {
+        //        public string clickTargetUrl { get; set; }
+        //    }
+        }
+
+    }
+
diff --git a/TELBlazor.Components/TELBlazor.Components.csproj b/TELBlazor.Components/TELBlazor.Components.csproj
index aa7f8c3..da945a4 100644
--- a/TELBlazor.Components/TELBlazor.Components.csproj
+++ b/TELBlazor.Components/TELBlazor.Components.csproj
@@ -22,7 +22,7 @@
 		<RepositoryUrl>https://github.com/TechnologyEnhancedLearning/TELBlazor</RepositoryUrl>
 		<RepositoryType>git</RepositoryType>
 		<PackageReadmeFile>README.md</PackageReadmeFile>
-		<PackageOutputPath>$(NupkgOutputPath)</PackageOutputPath>
+		<PackageOutputPath>$(NugetPackagesOutputPath)</PackageOutputPath>
 		<Configurations>Debug;Release</Configurations>
 
 	</PropertyGroup>
@@ -48,12 +48,19 @@
 		<Content Remove="..\CICDPackageLocation\**\*" />
 		<None Remove="..\CICDPackageLocation\**\*" />
 	</ItemGroup>
+	<ItemGroup>
+	  <Compile Remove="TELBlazorPackageVersion\VersionInfo.TELBlazorAssembly.cs" />
+	</ItemGroup>
+	<ItemGroup>
+	  <Content Include="TELBlazorPackageVersion\VersionInfo.TELBlazorAssembly.cs" />
+	</ItemGroup>
 
 	<!--<ItemGroup>
 	  <Content Include="Core\DI\gitinclude.txt" />
 	</ItemGroup>-->
 	<ItemGroup>
 		<Folder Include="Assets\" />
+		<Folder Include="OptionalImplementations\Test\TestServices\" />
 		<Folder Include="wwwroot\css\" />
 		<Folder Include="wwwroot\js\" />
 	</ItemGroup>
@@ -70,6 +77,10 @@
 		  -->
 		<Exec WorkingDirectory="$(MSBuildProjectDirectory)/.." Command="npx gulp --cwd &quot;$(MSBuildProjectDirectory)&quot; --gulpfile &quot;$(MSBuildProjectDirectory)/gulpfile.js&quot;" />
 	</Target>
+	<Target Name="GenerateTELBlazorPackageVersion" BeforeTargets="RunGulp">
+		<Delete Files="TELBlazorPackageVersion/VersionInfo.cs" />
+		<WriteLinesToFile File="TELBlazorPackageVersion\VersionInfo.TELBlazor.cs" Lines="namespace TELBlazor.Components.TELBlazorPackageVersion{public static partial class VersionInfo{public const string TELBlazorPackageVersion = &quot;$(TELBlazorPackageVersion)&quot; %3B; } }" Overwrite="true" Encoding="UTF-8" />
+	</Target>
 
 </Project>
 
diff --git a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazor.cs b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazor.cs
index 20c743f..206cd28 100644
--- a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazor.cs
+++ b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazor.cs
@@ -1,7 +1,2 @@
-namespace TELBlazor.Components.TELBlazorPackageVersion
-{
-    public static partial class VersionInfo
-    {
-        public static readonly string TELBlazorPackageVersion = typeof(_Imports).Assembly.GetName().Version?.ToString() ?? "Unknown";
-    }
-}
+namespace TELBlazor.Components.TELBlazorPackageVersion{public static partial class VersionInfo{public const string TELBlazorPackageVersion = "1.9.2-local" ;
+} }
diff --git a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazorAssembly.cs b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazorAssembly.cs
new file mode 100644
index 0000000..b81e103
--- /dev/null
+++ b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazorAssembly.cs
@@ -0,0 +1,8 @@
+namespace TELBlazor.Components.TELBlazorPackageVersion
+{
+    public static partial class VersionInfo
+    {
+        //its not the package version its the assembly so no text at the end
+        public static readonly string TELBlazorPackageAssemblyVersion = typeof(_Imports).Assembly.GetName().Version?.ToString() ?? "Unknown";
+    }
+}
diff --git a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.cs b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.cs
deleted file mode 100644
index 4b1a9a6..0000000
--- a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-// VersionInfo.cs
-namespace TELBlazor.Components.TELBlazorPackageVersion
-{
-    public static partial class VersionInfo { }
-}
\ No newline at end of file
diff --git a/TELBlazor.Components/_Imports.razor b/TELBlazor.Components/_Imports.razor
index 74150bd..a267336 100644
--- a/TELBlazor.Components/_Imports.razor
+++ b/TELBlazor.Components/_Imports.razor
@@ -7,7 +7,9 @@
 @using TELBlazor.Components.Core.Extensions
 @using Microsoft.AspNetCore.Components.Forms
 @using TELBlazor.Components.Components.BaseComponents
-@using TELBlazor.Components.OptionalImplementations.TestComponents
+@using TELBlazor.Components.OptionalImplementations.Test
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
 @using Microsoft.Extensions.Logging
 @using TELBlazor.Components.Core.Services.HelperServices
 @using System.Diagnostics.CodeAnalysis
\ No newline at end of file
diff --git a/TELBlazor.sln b/TELBlazor.sln
index b6cadbc..d2181b9 100644
--- a/TELBlazor.sln
+++ b/TELBlazor.sln
@@ -14,7 +14,9 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		Directory.Packages.props = Directory.Packages.props
 		global.json = global.json
 		nuget.config = nuget.config
+		nuget.config.template = nuget.config.template
 		package-lock.json = package-lock.json
+		nuget.config.cicd = nuget.config.cicd
 		package.json = package.json
 		PackageSettings.props = PackageSettings.props
 		PackageSettings.props.local = PackageSettings.props.local
diff --git a/nuget.config b/nuget.config
index 586c212..79f337b 100644
--- a/nuget.config
+++ b/nuget.config
@@ -1,28 +1,39 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!--
+
+This config is replaced with the template in cicd.
+It is gitignored too so further changes wont propogate.
+Source can be safely changed without needing to change the environmental variable and reload vs.
+
+-->
 <configuration>
 	<packageSources>
 		<clear />
 		<add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
-
-		<add key="TELBlazorPackageSource" value="%TELBlazorPackageSource%" />
-		
+		<!--Check local source first prioritise local over remote where duplicate version number accidently occurs-->
+		<add key="TELBlazorPackageSource" value="%LOCAL_PACKAGES_PATH%" />
+		<!--<add key="TELGitPackageSource" value="https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" />-->
 	</packageSources>
 	<packageSourceCredentials>
-		<TELBlazorPackageSource>
+		<TELGitPackageSource>
 			<!-- for cicd -->
 			<add key="Username" value="%GITHUB_USERNAME%" />
 			<!--cleartext for benefit of github actions-->
-			<add key="ClearTextPassword" value="%GITHUB_PACKAGES_TOKEN%" />
-		</TELBlazorPackageSource>
+			<add key="ClearTextPassword" value="%TEL_GIT_PACKAGES_TOKEN%" />
+		</TELGitPackageSource>
 	</packageSourceCredentials>
 	<packageSourceMapping>
 		<!-- Filter by package to get right package from GitHub -->
 		<packageSource key="TELBlazorPackageSource">
 			<package pattern="TELBlazor.Components" />
 		</packageSource>
+		<!-- Filter by package to get right package from GitHub -->
+		<!--<packageSource key="TELGitPackageSource">
+			<package pattern="TELBlazor.Components" />
+		</packageSource>-->
 		<!-- All other packages will be fetched from NuGet.org -->
 		<packageSource key="nuget.org">
 			<package pattern="*" />
 		</packageSource>
-</packageSourceMapping>
+	</packageSourceMapping>
 </configuration>
\ No newline at end of file
diff --git a/nuget.config.cicd b/nuget.config.cicd
new file mode 100644
index 0000000..9905465
--- /dev/null
+++ b/nuget.config.cicd
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+This config is replaces nuget.config in cicd.
+It provides credentials incase the TEL git packages feed is used.
+
+-->
+<configuration>
+	<packageSources>
+		<clear />
+		<add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+		<add key="TELBlazorPackageSource" value="%TEL_BLAZOR_PACKAGE_SOURCE%" />
+	</packageSources>
+	<packageSourceCredentials>
+		<TELBlazorPackageSource>
+			<!-- for cicd -->
+			<add key="Username" value="%GITHUB_USERNAME%" />
+			<!--cleartext for benefit of github actions-->
+			<add key="ClearTextPassword" value="%TEL_GIT_PACKAGES_TOKEN%" />
+		</TELBlazorPackageSource>
+	</packageSourceCredentials>
+	<packageSourceMapping>
+		<!-- Filter by package to get right package from GitHub -->
+		<packageSource key="TELBlazorPackageSource">
+			<package pattern="TELBlazor.Components" />
+		</packageSource>
+		<!-- All other packages will be fetched from NuGet.org -->
+		<packageSource key="nuget.org">
+			<package pattern="*" />
+		</packageSource>
+</packageSourceMapping>
+</configuration>
\ No newline at end of file
diff --git a/nuget.config.template b/nuget.config.template
new file mode 100644
index 0000000..79f337b
--- /dev/null
+++ b/nuget.config.template
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+This config is replaced with the template in cicd.
+It is gitignored too so further changes wont propogate.
+Source can be safely changed without needing to change the environmental variable and reload vs.
+
+-->
+<configuration>
+	<packageSources>
+		<clear />
+		<add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+		<!--Check local source first prioritise local over remote where duplicate version number accidently occurs-->
+		<add key="TELBlazorPackageSource" value="%LOCAL_PACKAGES_PATH%" />
+		<!--<add key="TELGitPackageSource" value="https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" />-->
+	</packageSources>
+	<packageSourceCredentials>
+		<TELGitPackageSource>
+			<!-- for cicd -->
+			<add key="Username" value="%GITHUB_USERNAME%" />
+			<!--cleartext for benefit of github actions-->
+			<add key="ClearTextPassword" value="%TEL_GIT_PACKAGES_TOKEN%" />
+		</TELGitPackageSource>
+	</packageSourceCredentials>
+	<packageSourceMapping>
+		<!-- Filter by package to get right package from GitHub -->
+		<packageSource key="TELBlazorPackageSource">
+			<package pattern="TELBlazor.Components" />
+		</packageSource>
+		<!-- Filter by package to get right package from GitHub -->
+		<!--<packageSource key="TELGitPackageSource">
+			<package pattern="TELBlazor.Components" />
+		</packageSource>-->
+		<!-- All other packages will be fetched from NuGet.org -->
+		<packageSource key="nuget.org">
+			<package pattern="*" />
+		</packageSource>
+	</packageSourceMapping>
+</configuration>
\ No newline at end of file
diff --git a/run-tests-and-report-with-env-values.ps1 b/run-tests-and-report-with-env-values.ps1
index e733be8..3ddac89 100644
--- a/run-tests-and-report-with-env-values.ps1
+++ b/run-tests-and-report-with-env-values.ps1
@@ -2,10 +2,9 @@
 # book mark in chrome file:///C:/dev/repos/TELBlazor/coveragereport/index.html
 # or use nektos act on the specific job to locally run the pipeline job
 $env:TELBLAZOR_PACKAGE_VERSION = "10.9.9"
-$env:NupkgOutputPath = "$PSScriptRoot\CICDPackageLocation"
-$env:UseTELBlazorComponentsProjectReference = "true"
-$env:TELBlazorPackageSource = "$PSScriptRoot\CICDPackageLocation"
-$env:DisablePackageGeneration = "false"
+$env:NUGET_PACKAGES_OUTPUT_PATH = "$PSScriptRoot\CICDPackageLocation"
+$env:USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE = "true"
+$env:DISABLE_PACKAGE_GENERATION = "false"
 
 
 # Run Tests

From e69883da24e97fa89d97e0ba750a5f26b666945e Mon Sep 17 00:00:00 2001
From: Phil-NHS <philip.tate@nhs.net>
Date: Tue, 24 Jun 2025 16:45:03 +0100
Subject: [PATCH 3/9] chore(squash): squash

---
 .gitignore   |  1 +
 nuget.config | 39 ---------------------------------------
 2 files changed, 1 insertion(+), 39 deletions(-)
 delete mode 100644 nuget.config

diff --git a/.gitignore b/.gitignore
index 21b0753..934d9ab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -207,3 +207,4 @@ CHANGELOG.md
 /TELBlazor.Components.ShowCase.E2ETests/appsettings.json
 /.runsettings
 /nuget.config
+/nuget.config
diff --git a/nuget.config b/nuget.config
deleted file mode 100644
index 79f337b..0000000
--- a/nuget.config
+++ /dev/null
@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-
-This config is replaced with the template in cicd.
-It is gitignored too so further changes wont propogate.
-Source can be safely changed without needing to change the environmental variable and reload vs.
-
--->
-<configuration>
-	<packageSources>
-		<clear />
-		<add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
-		<!--Check local source first prioritise local over remote where duplicate version number accidently occurs-->
-		<add key="TELBlazorPackageSource" value="%LOCAL_PACKAGES_PATH%" />
-		<!--<add key="TELGitPackageSource" value="https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" />-->
-	</packageSources>
-	<packageSourceCredentials>
-		<TELGitPackageSource>
-			<!-- for cicd -->
-			<add key="Username" value="%GITHUB_USERNAME%" />
-			<!--cleartext for benefit of github actions-->
-			<add key="ClearTextPassword" value="%TEL_GIT_PACKAGES_TOKEN%" />
-		</TELGitPackageSource>
-	</packageSourceCredentials>
-	<packageSourceMapping>
-		<!-- Filter by package to get right package from GitHub -->
-		<packageSource key="TELBlazorPackageSource">
-			<package pattern="TELBlazor.Components" />
-		</packageSource>
-		<!-- Filter by package to get right package from GitHub -->
-		<!--<packageSource key="TELGitPackageSource">
-			<package pattern="TELBlazor.Components" />
-		</packageSource>-->
-		<!-- All other packages will be fetched from NuGet.org -->
-		<packageSource key="nuget.org">
-			<package pattern="*" />
-		</packageSource>
-	</packageSourceMapping>
-</configuration>
\ No newline at end of file

From 3968423ddbe18d3ed14125294c010af3936a3391 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 24 Jun 2025 15:50:06 +0000
Subject: [PATCH 4/9] chore(release): 1.8.0-feat-button-for-cicd-testing.4
 [skip ci]

# [1.8.0-feat-button-for-cicd-testing.4](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0-feat-button-for-cicd-testing.3...v1.8.0-feat-button-for-cicd-testing.4) (2025-06-24)

### Features

* **searchexperiment:** in theory ([fee2b91](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/fee2b9124b859f9a548e3fa257d53294ce83dc08))
---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a8093a6..12c4967 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [1.8.0-feat-button-for-cicd-testing.4](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0-feat-button-for-cicd-testing.3...v1.8.0-feat-button-for-cicd-testing.4) (2025-06-24)
+
+
+### Features
+
+* **searchexperiment:** in theory ([fee2b91](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/fee2b9124b859f9a548e3fa257d53294ce83dc08))
+
 # [1.9.0-feat-button-for-cicd-testing.1](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0...v1.9.0-feat-button-for-cicd-testing.1) (2025-06-23)
 
 

From d2c823c6b0d9d195ea2a8bf94419d2a3b38b8e9e Mon Sep 17 00:00:00 2001
From: Phil-NHS <philip.tate@nhs.net>
Date: Wed, 25 Jun 2025 10:07:39 +0100
Subject: [PATCH 5/9] ci(fix commitlint): commitlint given base commit

---
 .github/workflows/dev.yml                 |   4 +
 .github/workflows/reuseable-ci-checks.yml |  10 ++
 README.md                                 | 155 ++++++++++++----------
 TELBlazor.sln                             |   2 +-
 4 files changed, 97 insertions(+), 74 deletions(-)

diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml
index db9f58e..9bc1649 100644
--- a/.github/workflows/dev.yml
+++ b/.github/workflows/dev.yml
@@ -32,6 +32,9 @@ jobs:
     uses: ./.github/workflows/reuseable-ci-checks.yml
     with:
       runall: true
+      # Commit being run against
+      base_sha: ${{ github.event.before }}
+      head_sha: ${{ github.event.after }}
     secrets:
       # Dev
       UNITTESTS_APPSETTINGS_DEVELOPMENT: ${{ secrets.UNITTESTS_APPSETTINGS_DEVELOPMENT }}
@@ -47,6 +50,7 @@ jobs:
       WASMSTATICCLIENT_APPSETTINGS_PRODUCTION: ${{ secrets.WASMSTATICCLIENT_APPSETTINGS_PRODUCTION }}
       WASMSERVERHOSTCLIENT_APPSETTINGS_PRODUCTION: ${{ secrets.WASMSERVERHOSTCLIENT_APPSETTINGS_PRODUCTION }}
       WASMSERVERHOST_APPSETTINGS_PRODUCTION: ${{ secrets.WASMSERVERHOST_APPSETTINGS_PRODUCTION }}
+      
 
 
   # Now we've done due diligence
diff --git a/.github/workflows/reuseable-ci-checks.yml b/.github/workflows/reuseable-ci-checks.yml
index 077478e..21f85d0 100644
--- a/.github/workflows/reuseable-ci-checks.yml
+++ b/.github/workflows/reuseable-ci-checks.yml
@@ -8,6 +8,12 @@ on:
         required: false
         type: boolean
         default: false
+      base_sha:
+        required: false
+        type: string
+      head_sha:
+        required: false
+        type: string
     secrets:
       UNITTESTS_APPSETTINGS_DEVELOPMENT:
         required: true
@@ -27,6 +33,7 @@ on:
         required: true
       TEL_GIT_PACKAGES_TOKEN:
         required: true
+
         
 env:
 
@@ -164,6 +171,9 @@ jobs:
         - uses: wagoid/commitlint-github-action@v5
           with:
             configFile: .commitlintrc.json
+            # Only set from/to if inputs are provided, otherwise let action use defaults
+            from: ${{ inputs.base_sha != '' && inputs.base_sha || null }}
+            to: ${{ inputs.head_sha != '' && inputs.head_sha || null }}
      
     reuseable-ci-e2e-unit-tests:
         name: E2E Unit threshold and code report trigger
diff --git a/README.md b/README.md
index 4954110..e188103 100644
--- a/README.md
+++ b/README.md
@@ -8,14 +8,12 @@ There is also a cicd readme in the workflow folder.
 
 The [MVCBlazor repo ](https://github.com/TechnologyEnhancedLearning/MVCBlazor) readme has exploration of various of the choices and alternatives to what is implemented here, which may be useful along with the other blazor repos, when developing for this repo.
 
-*For cicd information, component specific information see readmes in solution files*
+*There are specific readmes within the solution for topics like components and cicd*
 
 # Purpose
 
-Progressive components, that use the server prerendering in Global Wasm Blazor to ensure that if the user has no JS they will get html. And that html can be created to have working post actions.
-The render cycle will hydrate the prerender and the post actions will be overrided by services injected in the components.
-It is client side so the users browser will do the work.
-  
+Progressive Blazor components, intended for a Hosted Blazor Webassembly architecture with prerendering. They provide clientside functionality with 
+the ability to produce static prerendered html. The prerendered html is written to have server-side interactvity via form posts and fallback mechanism to support browsers without javascript enabled. 
   
    
 # Links
@@ -46,7 +44,7 @@ It is client side so the users browser will do the work.
 ## Prerequisites
 
 - **Visual Studio 2022** (Community or higher)
-- **.NET 8 SDK version 8.0.407 or later** (see global.json requirement below)
+- **.NET 8 SDK version 8.0.407 or later** (see global.json file in the solution)
 - **Node.js 18+** and npm
 - **Git** configured with your credentials
 - **PowerShell 5.1+** 
@@ -55,15 +53,14 @@ It is client side so the users browser will do the work.
 ### Quick Setup ⚡
 
 
-- **Get the repo:** open powershell as admin, ```cd``` to where you keep your repos. run ```git clone https://github.com/TechnologyEnhancedLearning/TELBlazor.git```
+- **Get the repo:** open powershell as admin, ```cd``` to where you keep your repos. Run ```git clone https://github.com/TechnologyEnhancedLearning/TELBlazor.git```
 - **Create local gitignored configuration files from templates:** open the project in visual studio
 	- search template
 		- create a copy of each template removing the .template post fix
-- **Create GitHub Personal Access Token (PAT) for remote package source:**
-	- go to your [GitHub profile](https://github.com/settings/profile)
-		- you maybe able to go directly with [your github tokens section](https://github.com/settings/tokens)
-	- go to Settings → Developer settings → Personal access tokens → Tokens classic → Generate new token (classic)
-		- give it a Note, e.g. "TELBlazor Package Access"
+- **Create GitHub Personal Access Token (PAT) for consuming [TEL git hosted nuget packages](https://github.com/orgs/TechnologyEnhancedLearning/packages) :**
+	- go to your [GitHub profile tokens section](https://github.com/settings/tokens)
+	- Select Personal access tokens → Tokens classic → Generate new token (classic)
+		- give it a Note, e.g. "TEL Package Access" (we will be storing it as the env var TEL_GIT_PACKAGES_TOKEN)
 		- set the expiration date to something reasonable (e.g. 90 days)
 		- select the scopes you need for the token
 			- as a minimum select `read:packages` and you may wish to increase the expiration date.
@@ -71,21 +68,20 @@ It is client side so the users browser will do the work.
 		- Generate token
 		- copy the token ***immediately*** (it will not be accessible again)
 	- **Set system wide environment variables (useful for future projects too):**
-		- Open Start, type "Environment Variables", and select "Edit the system environment variables".
-		- In the System Properties window, click Environment Variables….
-		- Under **System variables**, click New….
-		- Enter the Variable name and Variable values:
-			- **Add:** GITHUB_USERNAME / [Your GitHub username]
-			- **Add:** TEL_GIT_PACKAGES_TOKEN / [The copied token]
-		- then click ok
+		- Open Start, type "Environment Variables", and select "Edit the system environment variables"
+		- In the System Properties window, click Environment Variables
+		- Under **System variables**, click New
+		- Enter the variable names and variable values as follows:
+			- GITHUB_USERNAME / [Your GitHub username]
+			- TEL_GIT_PACKAGES_TOKEN / [The copied token]
+		- then click OK
 		- Click OK again to close all dialogs.
-		- Restart visual studio and any open command prompts or apps to pick up the change.
 - **Restore Nuget, Npm, Tooling, playwright and build:**
-	- run admin powershell terminal in the repo root
-	- run the following command
+	- run a new admin powershell terminal in the TELBlazor repo root
+	- run the following commands
 	```   
 		#1. Restore
-        dotnet clean
+		dotnet clean
 		dotnet restore
 		
 		#2. Nuget TEL Git Feed setups
@@ -117,13 +113,16 @@ The project should now work. See other sections for what projects to run, and co
 > ⚠️ read the contribution section before creating a branch or commits ⚠️
 
 
-### Getting Started with the Project
+### Getting Started with the Project following Setup
+
+It is recommended you check setup by reading this section and making sure packages can be created and consumed and all tests pass.
 
 #### Contributing to the project
 
 - [Branch naming rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.releaserc.json)
 - ⚠️ Commit names are used to generate the package version, repo version and change log so much be correct ⚠️[Commit Naming Rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.commitlintrc.json)
-	- e.g. "docs(readme): added detail on commit rules"
+	- e.g. 
+		> "docs(readme): added detail on commit rules"
 	
 #### Configuring the project
 
@@ -133,25 +132,60 @@ The project should now work. See other sections for what projects to run, and co
 |nuget.config|overwritten in cicd so feel free to change it| Remote and local telblazor nuget sources |Comment in/out depending which source you need|	
 |Package.Settings.Props | Used by CICD can receive environment variables or msbuild parameters | 	NugetPackagesOutputPath  UseTELBlazorComponentsProjectReference  TELBlazorPackageVersion DisablePackageGeneration | For CICD |
 |Package.Settings.Props.local| overwrite package.settings.props locally | NugetPackagesOutputPath | Where you want your package creating |
-|Package.Settings.Props.local|  | UseTELBlazorComponentsProjectReference | For quick development use the project reference instead of a package |
-|Package.Settings.Props.local| | TELBlazorPackageVersion | local package version you're creating or consuming |
-|Package.Settings.Props.local|	 | DisablePackageGeneration | Stops package creation on build. |
+|Package.Settings.Props.local| overwrite package.settings.props locally | UseTELBlazorComponentsProjectReference | For quick development use the project reference instead of a package |
+|Package.Settings.Props.local| overwrite package.settings.props locally| TELBlazorPackageVersion | local package version you're creating or consuming |
+|Package.Settings.Props.local|overwrite package.settings.props locally | DisablePackageGeneration | Stops package creation on build. |
 |appsettings | | | Serilog configuration |
 
-*Its recommended not to build the solution with package generation enabled and project reference disabled at the same time.*
-*Creating your package outside of the project can be convenient for other local solutions consuming it.*
+> **Nb.** Its recommended not to build the solution with package generation enabled and project reference disabled at the same time.
+> **Nb.** Creating your package outside of the project can be convenient for other local solutions consuming it.
+
+
+
+#### Running the projects
+- depending on whether your consuming a package or using a project reference set package.settings.props.local UseTELBlazorComponentsProjectReference to what you want
+- run wasmserverhost to see the showcase as blazor wasm prerendered
+- run wasmstaticclient to see pure wasm site
+
+#### Building the package
+- To build a package
+	- nuget config
+		- ensure the feed is still set to local```<add key="TELBlazorPackageSource" value="%LOCAL_PACKAGES_PATH%" />```
+	- Package.settings.props.local to create package
+		- NugetPackagesOutputPath -> LOCAL_PACKAGES_PATH
+		- UseTELBlazorComponentsProjectReference -> true
+		- TELBlazorPackageVersion -> 9.9.9-local of something higher than you have
+		- DisablePackageGeneration -> false
+	- delete lock files
+	- build solution
+	- change package.settings.props.local to consume package
+		- UseTELBlazorComponentsProjectReference -> false
+		- DisablePackageGeneration -> true
+	- build solution
+
+
+
+#### Testing the project
+- you can use the test runner
+- runsettings allows configuration of headless and tracing|
+- packagesettings.props sets thresholds
+- running at solution level ./run-tests-and-report-with-env-values.ps1 (see in the file for specific arguments you may want to set)
+	- will produce a test coverage site [your repo folder]/TELBlazor/CoverageReport/index.html
+
+
 
 #### Tips
 
 - If you don't want to wait for the pipeline to fail your commit names and for pushes to accidently expose your secrets: you may want to add
 	- gitguardian from confluence docs (follow it to the letter) [gitguardian global setup instructions](https://hee-tis.atlassian.net/wiki/spaces/TP/pages/3855253505/GitGuardian+Setup+-+Simplified+Version)
-	- and add a pre-commit and push hook (you need both as you cannot lint what hasnt yet been commit) you can add these to your git templates if you want them for every repo, or just to this repos pre- push- commits, or you can be lazy and add them into the gitguardian hook
+	- and add a pre-commit and push hook (you need both as you cannot lint what hasn't yet been commit) you can add these to your git templates if you want them for every repo, or just to this repos pre- push- commits, or you can be lazy and add them into the gitguardian hook
 	- you will need git commitlint globally (angular because it goes with the versioning tool for repo versioning)
 		
 		```
 			npm install -g @commitlint/cli @commitlint/config-angular
 		```
-	-	```
+	-	You can put into your pre-push, pre-commit hook, or into the gitguardian hooks some logic like the below.
+	```
 			#### --- Commitlint Logic (force local config) ---
 			REPO_ROOT=$(git rev-parse --show-toplevel)
 			CONFIG_PATH="$REPO_ROOT/.commitlintrc.json"
@@ -221,47 +255,22 @@ The project should now work. See other sections for what projects to run, and co
 			fi
 		``` 
 
-#### Building the package
-- To build a package
-	- nuget config
-		- ensure the feed is still set to local```<add key="TELBlazorPackageSource" value="%LOCAL_PACKAGES_PATH%" />```
-	- Package.settings.props.local to create package
-		- NugetPackagesOutputPath -> LOCAL_PACKAGES_PATH
-		- UseTELBlazorComponentsProjectReference -> true
-		- TELBlazorPackageVersion -> 9.9.9-local of something higher than you have
-		- DisablePackageGeneration -> false
-	- delete lock files
-	- build solution
-	- change package.settings.props.local to consume package
-		- UseTELBlazorComponentsProjectReference -> false
-		- DisablePackageGeneration -> true
-	- build solution
-
-#### Running the projects
-- depending on whether your consuming a package or using a project reference set package.settings.props.local UseTELBlazorComponentsProjectReference to what you want
-- run wasmserverhost to see the showcase as blazor wasm prerendered
-- run wasmstaticclient to see pure wasm site
-
-#### Testing the project
-- you can use the test runner
-- runsettings allows configuration of headless and tracing|
-- packagesettings.props sets thresholds
-- running at solution level ./run-tests-and-report-with-env-values.ps1 (see in the file for specific arguments you may want to set)
-	- will produce a test coverage site [your repo folder]/TELBlazor/CoverageReport/index.html
-	
-
-### Troubleshooting Package build errors 
-    - delete local `TELBlazor.Components` packages
-    - check `TELBlazorPackageVersion` has been incremented
-    - delete lock files
-	- clean solution
-	- check environment values in `props` and `nuget.config`
-	- restore nuget packages 
-	- restore solution
-	- if still not working delete bin and obj
-	- if still not working close visual studio and reopen
-	- if there are still issues its easier to problem solve by using a random very high `TELBlazor.Components` package version number and ensuring it fails and says it found the source but not the version
-
+### Troubleshooting 
+#### Package build errors 
+- delete local `TELBlazor.Components` packages
+- check `TELBlazorPackageVersion` has been incremented
+- delete lock files
+- clean solution
+- check environment values in `props` and `nuget.config`
+- restore nuget packages 
+- restore solution
+- if still not working delete bin and obj
+- if still not working close visual studio and reopen
+- if there are still issues its easier to problem solve by using a random very high `TELBlazor.Components` package version number and ensuring it fails and says it found the source but not the version
+#### Git commit names
+- git commit names can be caught locally
+- if they are not
+	- fetch, pull, squash to before the change and then git push force
 
 
 ## How to consume TELBlazor.Components 
diff --git a/TELBlazor.sln b/TELBlazor.sln
index d2181b9..d2f65a3 100644
--- a/TELBlazor.sln
+++ b/TELBlazor.sln
@@ -14,9 +14,9 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		Directory.Packages.props = Directory.Packages.props
 		global.json = global.json
 		nuget.config = nuget.config
+		nuget.config.cicd = nuget.config.cicd
 		nuget.config.template = nuget.config.template
 		package-lock.json = package-lock.json
-		nuget.config.cicd = nuget.config.cicd
 		package.json = package.json
 		PackageSettings.props = PackageSettings.props
 		PackageSettings.props.local = PackageSettings.props.local

From 7e67edb4f266dbdc8bf87f9dc599cf149c347834 Mon Sep 17 00:00:00 2001
From: Phil-NHS <philip.tate@nhs.net>
Date: Wed, 25 Jun 2025 10:31:39 +0100
Subject: [PATCH 6/9] chore(squash): squash the test fail commit

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e188103..860113f 100644
--- a/README.md
+++ b/README.md
@@ -167,7 +167,7 @@ It is recommended you check setup by reading this section and making sure packag
 
 #### Testing the project
 - you can use the test runner
-- runsettings allows configuration of headless and tracing|
+- runsettings allows configuration of headless and tracing
 - packagesettings.props sets thresholds
 - running at solution level ./run-tests-and-report-with-env-values.ps1 (see in the file for specific arguments you may want to set)
 	- will produce a test coverage site [your repo folder]/TELBlazor/CoverageReport/index.html
@@ -273,7 +273,7 @@ It is recommended you check setup by reading this section and making sure packag
 	- fetch, pull, squash to before the change and then git push force
 
 
-## How to consume TELBlazor.Components 
+# How to consume TELBlazor.Components 
 1. Select a production version of the package [Package list for TELBlazor.Component on git](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
 1. Set up css references and dependency injection using lean host examples WasmServerHost, WasmServerHost.Client and WasmStaticClient
 from the repo and ShowCase project for how to include the package. 

From 92e00831a950d1c3d432b7f74e0a88ad8176aeeb Mon Sep 17 00:00:00 2001
From: Phil-NHS <philip.tate@nhs.net>
Date: Wed, 25 Jun 2025 10:52:46 +0100
Subject: [PATCH 7/9] chore(license): from lh

---
 LICENSE.txt                   |  21 ++
 README-previous -del-later.md | 573 ----------------------------------
 README.md                     |   2 +-
 3 files changed, 22 insertions(+), 574 deletions(-)
 create mode 100644 LICENSE.txt
 delete mode 100644 README-previous -del-later.md

diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 0000000..63b4b68
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README-previous -del-later.md b/README-previous -del-later.md
deleted file mode 100644
index af625ee..0000000
--- a/README-previous -del-later.md	
+++ /dev/null
@@ -1,573 +0,0 @@
-# TELBlazor
-TEL Blazor Component Library Package
-
-# This ReadMe
-
-This readme is the repo readme, it is also used as the package readme as this is the solution for making the TELBlazor.Components package.
-There is also a cicd readme in the workflow folder.
-
-The [MVCBlazor repo ](https://github.com/TechnologyEnhancedLearning/MVCBlazor) readme has exploration of various of the choices and alternatives to what is implemented here, which may be useful along with the other blazor repos, when developing for this repo.
-
-# Purpose
-
-Progressive components, that use the server prerendering in Global Wasm Blazor to ensure that if the user has no JS they will get html. And that html can be created to have working post actions.
-The render cycle will hydrate the prerender and the post actions will be overrided by services injected in the components.
-It is client side so the users browser will do the work.
-  
-  
-   
-# Links
-
-[Bottom file see tree diagram of solution](#Project-Structure-and-Comments)
-
-[Easy viewing of TELBlazor Repo ReadMe](https://raw.githubusercontent.com/TechnologyEnhancedLearning/TELBlazor/refs/heads/master/README.md)
-(best with Markdown Reader Chrome extension)
-
-[Last Published Package](https://github.com/orgs/TechnologyEnhancedLearning/packages?tab=packages&q=TELBlazor)
-
-[TELBlazor](https://github.com/TechnologyEnhancedLearning/TELBlazor)
-
-[TELBlazor Production Showcase](https://technologyenhancedlearning.github.io/TELBlazor/)
-
-[TELBlazor Dev Showcase](https://technologyenhancedlearning.github.io/TELBlazor-DevShowCase/)
-
-[View Packaged Dev Showcase Code](https://github.com/TechnologyEnhancedLearning/TELBlazor-DevShowCase/tree/gh-pages)
-
-[View Packaged Showcase Code](https://github.com/TechnologyEnhancedLearning/TELBlazor/tree/gh-pages/)
-
-[Code Report Page](https://technologyenhancedlearning.github.io/TELBlazor-CodeReport/)
-
-[NHSE TEL Frontend](https://github.com/TechnologyEnhancedLearning/nhse-tel-frontend)
-
-# Set Up
-
-## "It works on my machine"
-
-### Hi Kevin, Please rewrite or correct these steps. 
-- im expecting maybe global node may end up not working, if anything, as its already set up globally on my machine with the packages for this project.
-
-### 
-
-### Prerequisites
-- **Visual Studio 2022** (Community or higher)
-- **.NET 8 SDK version 8.0.407 or later** (see global.json requirement below)
-- **Node.js 18+** and npm
-- **Git** configured with your credentials
-- **PowerShell 5.1+** 
-> ⚠️ **Important:** All commands in this guide require **PowerShell running as Administrator**
-
-### Steps
-
-#### Get the repo
-1. Open powershell as admin
-1. In powershell navigate (```cd```) to the folder the repo will go
-1. Check prequisites
-	- ```
-		### 1. Verify Prerequisites
-
-		**Open PowerShell as Administrator** and verify your setup:
-
-		```powershell
-		# Check .NET SDK version (should be 8.0.407 or later)
-		dotnet --version
-
-		# Check Node.js version (should be 18+)
-		node --version
-	
-	  ```
-1. Go to [TELBlazor Repo](https://github.com/TechnologyEnhancedLearning/TELBlazor) hit code and get the clone string
-1. Clone the repo locally using powershell terminal
-1. Go to [TELBlazor Repo](https://github.com/TechnologyEnhancedLearning/TELBlazor) 
-	- create a branch (**there is branch name checks in cicd [branch lint rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.releaserc.json)**) so for example call it **"docs-readme-setup-instructions"**
-	- your commits should look like this **"docs(readme): added detail on commit rules"**
-1. Fetch, and checkout your new branch locally so you can add to the readme as you go
-	- create commit "docs(readme): first commit"
-	- see [commit rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.commitlintrc.json)
-	- *these rules also enable the versioning in cicd*
-	- Bonus (you could do this while cloning): if you don't want to wait for the pipeline to fail your commit names and for pushes to accidently expose your secrets: you may want to add
-		- gitguardian from confluence docs (follow it to the letter) [gitguardian global setup instructions](https://hee-tis.atlassian.net/wiki/spaces/TP/pages/3855253505/GitGuardian+Setup+-+Simplified+Version)
-        - and add a pre-commit and push hook (you need both as you cannot lint what hasnt yet been commit) you can add these to your git templates if you want them for every repo, or just to this repos pre- push- commits, or you can be lazy and add them into the gitguardian hook
-		- you will need git commitlint globally (angular because it goes with the versioning tool for repo versioning)
-			```
-				npm install -g @commitlint/cli @commitlint/config-angular
-			```
-		-	```
-				#### --- Commitlint Logic (force local config) ---
-				REPO_ROOT=$(git rev-parse --show-toplevel)
-				CONFIG_PATH="$REPO_ROOT/.commitlintrc.json"
-				echo "COMMIT_MSG_FILE is one msg behind it is only set to the commit your trying to commit after the commit succeeds so this script is one behind"
-				echo "so would work best in prepush template"
-				COMMIT_MSG_FILE="$REPO_ROOT/.git/COMMIT_EDITMSG"
-
-				# Check if the local .commitlintrc.json exists in the repository root
-				if [ -f "$CONFIG_PATH" ]; then
-
-					echo "✅ Local .commitlintrc.json found at: $CONFIG_PATH. Running commitlint..."
-					echo "⚠️ if commit lint fails in precommit its actually reading previous commit name you need to reset or squash make a new commit and change .git/COMMIT_EDITMSG to something that would pass. ⚠️"
-
-					if command -v npx &> /dev/null; then
-					
-							cd "$REPO_ROOT" || exit 1
-
-							# Debug: Print the commit message file content
-							if [ -f "$COMMIT_MSG_FILE" ]; then
-								echo "Commit message content:"
-								cat "$COMMIT_MSG_FILE"
-							else
-								echo "❌ Commit message file not found!"
-								exit 1
-							fi
-							
-							
-							# Run commitlint, explicitly pointing to the local config and providing the commit message via stdin
-							OUTPUT1=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --edit="$COMMIT_MSG_FILE" 2>&1)
-							
-							EXIT_CODE1=$?
-							# echo "!!!!!!!!!!! OUTPUT1"
-							# echo "$OUTPUT1"
-							
-							
-							# OUTPUT2=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --from=origin/master --to=HEAD 2>&1)
-							
-							# EXIT_CODE2=$?
-							# echo "!!!!!!!!!!! OUTPUT2"
-							# echo "$OUTPUT2"
-							
-							# OUTPUT3=$(npx.cmd --no -- commitlint --config=".commitlintrc.json"  --from-last-tag 2>&1)
-							
-							
-							# EXIT_CODE3=$?
-							# echo "!!!!!!!!!!! OUTPUT3"
-							# echo "$OUTPUT3"
-							
-
-
-						#if [ "$EXIT_CODE1" -ne 0 ] || [ "$EXIT_CODE2" -ne 0 ] || [ "$EXIT_CODE3" -ne 0 ];  then
-						if [ "$EXIT_CODE1" -ne 0 ];  then
-							echo "❌ Commitlint failed:"
-							
-							echo "$OUTPUT1"
-							exit 1
-						else
-							echo "✅ Commitlint passed!"
-						fi
-					else
-						echo "⚠️ npx not found. Please ensure Node.js and npm are installed to use commitlint."
-						# Optionally fail here
-						# exit 1
-					fi
-				else
-					echo "ℹ️ No local .commitlintrc.json found in $REPO_ROOT. Skipping commitlint."
-				fi
-			``` 
-#### About configuration (just to read)
-
-Visual studio caches the environmental variables so to avoid restarting it you may want to have multiple
-environment variables, even if at times they are set to the same values. Then you can switch in configuration
-which environment value is used rather than the underlying value, but be careful not to leave nuget.config
-changed. Remember to delete your lock files when changing which package your using* ```%envvalue%``` syntax in 
-nuget.config can be populated by environment values by visual studio but not via command line and cicd has to 
-replace the values with ```sed```
-
-- The intention of the configuration is you should be able to switch between local packages, remote package, and project references. It will also enable parrallel development with consuming projects, so package changes can be seen in situ during development.
-- Troubleshooting
-    - delete local `TELBlazor.Components` packages
-    - check `TELBlazorPackageVersion` has been incremented
-    - delete lock files
-	- clean solution
-	- check environment values in `props` and `nuget.config`
-	- restore nuget packages 
-	- restore solution
-	- if still not working close visual studio and reopen
-	- if there are still issues its easier to problem solve by using a random very high `TELBlazor.Components` package version number and ensuring it fails and says it found the source but not the version
-- Variables Recommended to add to environment variables (Do this in the next section)
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **TELPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **LocalPackageSource** → e.g. C:\dev\LocalPackages
-	- **NupkgOutputPath** → e.g. C:\dev\LocalPackages
-- Other variables you may want to set up
-	- Any of the nuget.config and PackageSetting.props values but visual studio caches environment values so nothing you expect to change regularly
-
-
-#### Create local files (do this)
-- Right click PackgeSettings.props.local and open with xml editor or any preferred way of opening it
-- copy paste PackgeSettings.props.local.template into it
-- Set environmental variables (go into windows, edit environmental system variables, then look for environmental variables button, then add to system wide) 	
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **TELPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **LocalPackageSource** → e.g. C:\dev\LocalPackages
-	- **NupkgOutputPath** → e.g. C:\dev\LocalPackages
-- Change system environment variables or PackageSetting.props.local variables can be changed but I recommend the latter
-    - **UseTELBlazorComponentsProjectReference** set it true for faster development
-	- **TELBlazorPackageVersion** set it to a number higher than the production value and increase it every-time you want to produce and use the package locally if not using the project reference
-      - if this were set to auto increment to a file accessible by other projects that would be ideal
-	- **DisablePackageGeneration** we publish the package on build if this isnt flagged. Set it to true so you can build the solution without making the package
-		- You may want to build the solution without package generation, the TELBlazor.Components with package generation for example
-
-#### Create More Environment Variables
-- To use remote git hosted nuget packages you need a personal git token. This is just because git tracks the use of packages rather than it being anonymous
-	- go onto your git profile
-	- go to settings → developer settings → Personal access tokens → Tokens classic
-		- as a minimum select read:packages and you may wish to increase the expiration date.
-			- copy the token it will disapear
-	- Set system wide environment variables as before
-		- GITHUB_USERNAME
-		- GITHUB_PACKAGES_TOKEN
-		- TELBlazorPackageSource
-			- previously we set this to a local location but if you were to want to generally use the remote package this is the source 
-			- https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-			- for the test set this to https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json but you will probably want to point it back to a local folder afterwards
-    - check credentials are working
-		- open powershell somewhere you can put deletable content
-			- ``` 
-				# Create output folder if it doesn't exist
-				New-Item -ItemType Directory -Path deleteme-test -ErrorAction SilentlyContinue
-
-				# Build the auth string (username:token)
-				$auth = "$($env:GITHUB_USERNAME):$($env:GITHUB_PACKAGES_TOKEN)"
-
-				# Build base URL by removing trailing /index.json from the feed URL
-				$baseUrl = $env:TELBlazorPackageSource -replace "/index\.json$", ""
-				$baseUrl = $baseUrl.TrimEnd('/')
-
-				# Download the package with curl using authentication
-				curl.exe -u $auth `
-				  -L "$baseUrl/download/TELBlazor.Components/1.0.0/TELBlazor.Components.1.0.0.nupkg" `
-				  -o deleteme-test\TELBlazor.Components.1.0.0.nupkg
-
-			```
-	    - check there is a nupkg package. its an old one, so just delete it. 
-
-#### Set nuget to have the source (powershell)
-````
-dotnet nuget add source "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" `
-  --name "github" `
-  --username $env:GITHUB_USERNAME `
-  --password $env:GITHUB_TOKEN `
-  --store-password-in-clear-text
-````
-
-Note: You may also wish to go into your user appdata or roaming and find your global nuget config and add the credentials in there. Do this by copying the 
-TELPackage part of the config but with the system environment variable values you set earlier. This will mean LH for example will be able to access TEL packages and so will other projects.
-
-#### Create appsettings
-*Be aware that because WASM code is in the browser appsettings in the wasm client projects are not secret and sensitive data should not go in them*
-
-- **Solution Level**
-	- From the runsettingsTemplate you will make your local runnsettings for testing **".runsettings"** this is where you set tracing and headless
-	- From packagesettings.props.local.template make packagesettings.props.local
-	- packagesettings.props.local overwrite packagesettings.props in directory build props
-- **TELBlazor.Components.ShowCase.E2ETests.WasmServerHost**
-	- create appsettings.Development.json
-	- copy paste from appsettings.Development.json.template
-	- the template is source controlled so wont have anything that needs to be secure
-	- if you have preferences for logging this is where to configure it, if you want to add creating a text file for example add it here and then add it as dependency in the solution and a reference in the program.cs
-	- *logging can be used to get information during testing and test against it*
-- **TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client**
-	- follow the same process
-	- client side appsetting are exposed through the wasm so dont put secure information in them
-	- the client will have different logging options as it can only log to browser console, http to a logging api, storage
-- **TELBlazor.Components.ShowCase.ShowCase.WasmServerHost.Client**
-	- this is the project that become the gh-pages
-	- the appsettings go into the wasm so no secrets in here
-	- any of these projects could be used to view changes but if not looking at nojs this project could have different appsettings just for development as it isnt used to test against.
-- **TELBlazor.Components.UnitTests**
-		- as above
-
-#### Install packages
-- first set packagesettings.props.local if you havent already via environment variables to the following
-	- **TELBlazorPackageSource** → a local folder outside of the solution
-	- **NupkgOutputPath** → the same local folder outside of the solution
-	- **UseTELBlazorComponentsProjectReference** → true
-	- **TELBlazorPackageVersion** → 1.0.0 will do for now
-	- **DisablePackageGeneration** → true
-- in .runsettings
-	- **TracingEnabled** → true
-	- **Headless** → false
-- right click the solution and copy full path (we need admin rights so dont just open terminal)
-- open powershell from windows as administrator
-- paste the route paste and cd to the solution folder
-- then run the following
-- 	```   
-		# 1. Check environment variables and local props
-		Write-Output "Have you set your environment variables and local props?"
-        dotnet clean
-		
-		# 2. Restore NuGet packages (reads central package versions and props)
-		Write-Output "Restore Nuget"
-		dotnet restore
-
-		# 3. Restore .NET CLI tools (Playwright, report manager for code coverage)
-		Write-Output "Restore Tools"
-		dotnet tool restore
-
-		# 4. Install Node dependencies (gulp, playwright, frontend libs)
-		Write-Output "Restore Node"
-		npm install
-		
-		# 5. Build solution or run other commands as needed
-		Write-Output "Build solution without build package, using project references instead of local package or remote package"
-		dotnet build
-		
-		# 6. Setup playwright
-		Write-Output "Playwright setup"
-		& ".\TELBlazor.Components.ShowCase.E2ETests\bin\Debug\net8.0\playwright.ps1" install
-	```
-
-#### Check Setup Worked
-
-- Look in components **TELBlazor.Components.TELBlazorPackageVersion**
-	- **TELFrontEndPackageVersion** check the package versions
-	- it should match the version number in your `props.local` currently
-	- check nhsuk version in `package.json`
-- check `nhsuk.css` was generated by gulp in `TELBlazor.Components.ShowCase.Shared.wwwroot.css`
-- Open test runner and run tests 
-	- wait 10 seconds, then if its going make a cup of tea
-- reuse previous terminal, or right click solution and open a terminal
-	- ``` ./run-tests-and-report-with-env-values.ps1 ```
-		- (this is just a useful script for running tests and report similar to the cicd if you want to run the cicd locally you could use "nektos act" instead)
-	- it will quietly slowly do the E2E after the first tables appear so enjoy your tea and skim the readme for 5 minutes
-- look in AllTestResults folder at the solution level you should see coverage.cobertura.xml
-- find index.html at the the top level in the folder CoverageReport, open it in chrome and bookmark it if you like
-- run TELBlazor.Components.ShowCase.E2ETests.WasmServerHost
-    - take note of the TELBlazor Package Version
-	- have a click around, change the loglevel look in the browser console
-	- the host runs the client
-	- you can put debugger in program.cs of WasmServerHost because this part isnt running in the browser as the wasm
-	- once the wasm takes over to debug in the browser you need to do some setup
-		- TODO QQQQ I cant remember what i havent set up on new machine yet, i presume it doesnt work for you kevin?
-- run TELBlazor.Components.ShowCase.E2ETests.WasmServerHost	
-	- This is pure wasm so notice that there is a loader initially this is because there is no prerender
-- go into tools in the top vs bar you should see toggle test coverage highlighting. Go to loglevelswitcher.razor it should be highlighted red 
-	- qqqq todo isnt for mine is it for yours kevin?
-
-
-##### Check Setup with Package Creation
-*The TELBlazor Package Version is actually parsed from the number provided in props so don't rely on it to match the package being shown soley if your still using the ref, the project will display the new number you put in*
-- change local props to
-	- set `packagesettings.props.local` if you haven't already via environment variables and hard coding to the following
-		- **TELBlazorPackageSource** → a local folder outside of the solution
-		- **NupkgOutputPath** → the same local folder outside of the solution
-		- **UseTELBlazorComponentsProjectReference** → false
-		- **TELBlazorPackageVersion** → pick something greater than the production package number. The one without the dash [TELBlazor.Components Prod and Dev Package location](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
-			- make sure its changed so its more than the TELBlazor Package Version you previously noted
-		- **DisablePackageGeneration** → false
-	- set .runsettings
-		- **Tracing** → false
-		- **HeadlessTesting** → false 
-		
-*When doing package generation remember you need to keep incrementing the package number to get changes into the project, it would be nice to have this as an env value as an automated increment*
-- delete the local package in your package folder
-- delete the lock files
-- clean/build solution (because of build order you may need to build TELBlazor.Components first if there are issues)
-	- check package created in your package location
-- make a change to the html of `TELBlazor.Components.Components.TestComponents.CssSourceChecker.cs` you can search graphitti-wall add a <p> if you don't see it in the next build the package is in use rather than the reference :)
-- run the hosted project does it work now its set to use the package
-	- package number will have increased
-	- you shouldnt see the html you added
-- run the wasm project does it work now its set to uses package
-	- you shouldnt see the html you added
-	- Tip it can be useful to launch incognito 
-		- right click an index.html, browser with, add chrome chrome_proxy.exe and --incognito flag then select it when running the project its now an available options
-- Run tests in test runner
-	- its no longer headless so you should see multiple windows open
-
-###### Optional
-- run ps1 test script
-	
-
-##### Check Setup With Package reference remote
-
-- *You can change the value of the env system values but visual studio caches them so swapping for a different env value is faster just remember it needs changing back for cicd*
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-		- change it in nuget.config and .props, the easiest way is to change the environment variable used, but dont commit it to cicd 
-		- *For development you will probably just use a local or remote source so you are likely just to set the environment variables and leave them after the setup checks*
-	- **NupkgOutputPath** → the same local folder outside of the solution
-	- **UseTELBlazorComponentsProjectReference** → false
-	- **TELBlazorPackageVersion** → [Find package number not dev package number, dev packages have -branchname](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
-	- **DisablePackageGeneration** → true
-	- set .runsettings
-		- **Tracing** → true
-		- **HeadlessTesting** → true 
-- delete lock files
-- clean/build
-- *if caching issues close and reopen visual studio*
-- Run tests in test runner
-- run the hosted project
-- run the wasm project
-- check that the right package is being used
-
-
-
-
-
-
-## How to consume TELBlazor.Components 
-1. Select a production version of the package [Package list for TELBlazor.Component on git](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
-1. Set up css references and dependency injection using lean host examples WasmServerHost, WasmServerHost.Client and WasmStaticClient
-from the repo and ShowCase project for how to include the package. 
-1. You will need a copy of nhsuk.css and a reference <link href="css/nhsuk.css" rel="stylesheet" /> see gulp in the previously mentioned projects
-
-
-# Solution and Pipeline
-
-## Features of solution
-- run-tests-and-report-with-env-values.ps1 runs test similar to pipeline
-	- create html coverage report and threshold check (recommendation: bookmark local html file in browser to easily view)
-	
-## Features of CICD
-- There is a readme in the CICD
-- A DevShowCase sight is created using a DevPackage and the same in production
-	- The dev pipeline also publishes a coverage report
-
-## Local Files and Development Settings
-
-
-# Solution Detail
-
-## Architecture
-
-### Project Structures used
-- Repo TELBlazor
-
- - TELBlazor.Components
-	- this is a razor component library
- - TELBlazor.Components.UnitTests
-	- Bunit template from bunit site, configured to use Xunit
- - TELBlazor.Components.ShowCase.E2ETests
-    - NUnit Playwright Test project
- - TELBlazor.Components.ShowCase.Shared
-	- this is a razor component library
- - TELBlazor.Components.ShowCase.E2ETests.WasmServerHost
-	- Wasm global hosted
- - TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client 
-	- Wasm global hosted
- - TELBlazor.Components.ShowCase.WasmStaticClient
-	- Wasm global standalone 
-	
-## Configuration
-
-### Logging
-- For more detailed dependency injected logging see MVCBlazor project	
-	
-## Notes
-
-### Stuff you don't need to know (but may be useful for a specific issue on searching the readme)
-- It is not render auto per components because the intention is to be used in MVC views.
-- Xunit is used with Bunit and Nunit with playwright, either could be 
-changed so that they are using the same and this could be done in future 
-as the libraries improve but currently each is being used with the 
-recommend tool it is designed for though both support the others tool.
-- not using data-testid="TELButton" because we should use aria selectors. We may change this later.
-   - e.g. data-attribute-telblazorcomponentname="TelBlazorButton"
-- not using guid id as i have elsewhere either [Parameter] public string ElementId { get; set; } = $"tel-button-{Guid.NewGuid():N}";
-- various things have been cut from mvcblazor so it is worth returning to for potential solutions if developing this solution [MVCBlazor repo](https://github.com/TechnologyEnhancedLearning/MVCBlazor)
-
-
-# Project Structure and Comments
-
-Viewed best [raw ReadMe see chrome](https://raw.githubusercontent.com/TechnologyEnhancedLearning/TELBlazor/refs/heads/master/README.md)
-
-|  Description  | File Structure |
-|----------------|-------------|
-|  | &#9507; TELBlazor |
-| Test coverage from cicd or .ps1 | &#160;&#160;&#160;&#160;&#9507; AllTestResults |
-| Convenient in solution location | &#160;&#160;&#160;&#160;&#9507; CICDPackageLocation |
-| Test report site from cicd or .ps1 viewably locally or [Dev Report](https://technologyenhancedlearning.github.io/TELBlazor-CodeReport/) | &#160;&#160;&#160;&#160;&#9507; CoverageReport |
-| gh-pages site publish folder | &#160;&#160;&#160;&#160;&#9507; docs |
-| Sets centralised solution a report thresholds | &#160;&#160;&#160;&#160;&#9507; Directory.Build.props,  |
-| Centralised nuget packages | &#160;&#160;&#160;&#160;&#9507;  Directory.Packages.props |
-| CICD setting .net version | &#160;&#160;&#160;&#160;&#9507; global.json |
-| Uses environment variables to set packed package location locally or remote | &#160;&#160;&#160;&#160;&#9507; nuget.config|
-| Centralised npm packages used with gulp and for testing | &#160;&#160;&#160;&#160;&#9507; package.json |
-| Linting config for branch and commit names | &#160;&#160;&#160;&#160;&#9507; .releaserc.json, .commitlintrc.json |
-| Useful for running tests and generating test report locally | &#160;&#160;&#160;&#160;&#9507;  run-tests-and-report-with-env-values.ps1 |
-| Env Setup | &#160;&#160;&#160;&#160;&#9507; PackageSettings.props |
-| Env Setup, testing, package or project reference  | &#160;&#160;&#160;&#160;&#9507; PackageSettings.props.local |
-| The package create on build | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components |
-| All using in imports so can add components by assembly | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Components |
-| Standard components made to TEL and NoJS requirements | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BaseComponents |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; TELButton.razor |
-| Only to support main component TELButton | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonSubComponent.razor |
-| Useful components for development | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestComponents |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Core |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Compliance |
-| Create a contract of accessibility | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; IAccessibleComponent.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Configuration |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ITELBlazorBaseComponentConfiguration.cs |
-| Logging, NoJS bool  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELBlazorBaseComponentConfiguration.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; DI |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Enums |
-| Enum of css styles for testing and setting component | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonStyle.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Services |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; HelperServices |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; ILogLevelSwitcherService.cs |
-| Custom component base with configuration injected | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELComponentBase.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELBlazorPackageVersion |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; TELBlazorPackageVersionInformation.razor |
-| Programmatically generate via gulp csproj package versions | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; VersionInfo.cs |
-|  | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.E2ETests |
-| Enables run blazor pages in E2E | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BlazeWright |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BlazorApplicationFactory.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BlazorPageExtensions.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; BlazorPageTest.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Helpers |
-| Enables using attributes to run same tests with different viewports and browsers | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BrowserHelper.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; ViewportHelper.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Pages |
-| Structure to mirror ShowCase | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BaseComponentPages |
-| Check NoJs, in view, functionality | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonPageTests.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentPages |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestComponentPages |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Reports |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; SnapShots |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestDoubles |
-| Serverside so can have prerender behaviour for nojs lean host | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.E2ETests.WasmServerHost |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.E2ETests.WasmServerHost |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; App.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Program.cs |
-| Clientside for the host | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; App.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Program.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Routes.razor |
-| ShowCase is an example of implementation also provides site for E2E and showcase | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.Shared |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; DI |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Layouts |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentLayouts |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentNavMenu.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentPageLayout.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; ShowCase.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; MainLayout.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Pages |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; ComponentPages |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BaseComponentPages |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonPage.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestComponentPages |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; CssSourceCheckerPage.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; LogLevelSwitcherPage.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Error.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Home.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Services |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; HelperServices |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; SerilogLogLevelSwitcher.cs |
-| Published to create gh-pages [DevShowCase](https://technologyenhancedlearning.github.io/TELBlazor-DevShowCase/) [ShowCase](https://technologyenhancedlearning.github.io/TELBlazor/) | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.ShowCase.WasmStaticClient |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; App.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Program.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; Routes.razor |
-|  | &#160;&#160;&#160;&#160;&#9507; TELBlazor.Components.UnitTests |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; _Imports.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Components |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; BaseComponents |
-| Axe and functionality test, does not simulate nojs or browser | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TELButtonTests.razor |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestComponents |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; Core |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; DI |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; DI.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; FallbackServiceProvider.cs |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9507; HtmlComparisons |
-|  | &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9495; TestDoubles |
\ No newline at end of file
diff --git a/README.md b/README.md
index 860113f..4a0319a 100644
--- a/README.md
+++ b/README.md
@@ -273,7 +273,7 @@ It is recommended you check setup by reading this section and making sure packag
 	- fetch, pull, squash to before the change and then git push force
 
 
-# How to consume TELBlazor.Components 
+# How to consume TELBlazor.Components
 1. Select a production version of the package [Package list for TELBlazor.Component on git](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
 1. Set up css references and dependency injection using lean host examples WasmServerHost, WasmServerHost.Client and WasmStaticClient
 from the repo and ShowCase project for how to include the package. 

From a058fe6f034b5097fb72c9f72a8b98c57ed2b607 Mon Sep 17 00:00:00 2001
From: Phil-NHS <philip.tate@nhs.net>
Date: Wed, 25 Jun 2025 12:48:15 +0100
Subject: [PATCH 8/9] feat(showcase): added component readme displayer

---
 Directory.Packages.props                      |  1 +
 README.md                                     |  9 +--
 .../packages.lock.json                        |  7 +++
 .../packages.lock.json                        |  7 +++
 .../packages.lock.json                        |  7 +++
 .../Layouts/ComponentLayouts/ShowCase.razor   | 58 +++++++++++++++----
 .../ComponentLayouts/ShowCase.razor.css       | 15 +++++
 .../SearchExperimentPage.razor                |  9 +--
 ...ELBlazor.Components.ShowCase.Shared.csproj |  2 +
 .../packages.lock.json                        |  6 ++
 .../packages.lock.json                        |  7 +++
 .../TestComponents/SearchExperiment/ReadMe.md | 12 ++++
 12 files changed, 122 insertions(+), 18 deletions(-)
 create mode 100644 TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ReadMe.md

diff --git a/Directory.Packages.props b/Directory.Packages.props
index 4b2a014..074ee19 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -9,6 +9,7 @@
   <ItemGroup>
     <!-- Microsoft packages tied to .NET 8 -->
     <PackageVersion Include="coverlet.collector" Version="6.0.4" />
+    <PackageVersion Include="Markdig" Version="0.41.3" />
     <PackageVersion Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="8.0.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="8.0.14" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.14" />
diff --git a/README.md b/README.md
index 4a0319a..006ef10 100644
--- a/README.md
+++ b/README.md
@@ -191,6 +191,7 @@ It is recommended you check setup by reading this section and making sure packag
 			CONFIG_PATH="$REPO_ROOT/.commitlintrc.json"
 			echo "COMMIT_MSG_FILE is one msg behind it is only set to the commit your trying to commit after the commit succeeds so this script is one behind"
 			echo "so would work best in prepush template"
+			echo "To fix squash out the commit following renaming and renaming commit_editmsg and if pushed to remote git push --force"
 			COMMIT_MSG_FILE="$REPO_ROOT/.git/COMMIT_EDITMSG"
 
 			# Check if the local .commitlintrc.json exists in the repository root
@@ -278,7 +279,7 @@ It is recommended you check setup by reading this section and making sure packag
 1. Set up css references and dependency injection using lean host examples WasmServerHost, WasmServerHost.Client and WasmStaticClient
 from the repo and ShowCase project for how to include the package. 
 1. You will need a copy of nhsuk.css and a reference <link href="css/nhsuk.css" rel="stylesheet" /> see gulp in the previously mentioned projects
-
+1. See setup notes for instructions on getting a git nuget token for consuming the package.
 
 # Solution and Pipeline
 
@@ -304,11 +305,11 @@ from the repo and ShowCase project for how to include the package.
  - TELBlazor.Components.ShowCase.Shared
 	- this is a razor component library
  - TELBlazor.Components.ShowCase.E2ETests.WasmServerHost
-	- Wasm global hosted
+	- Wasm host
  - TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client 
-	- Wasm global hosted
+	- Wasm hosted
  - TELBlazor.Components.ShowCase.WasmStaticClient
-	- Wasm global standalone 
+	- Wasm standalone 
 	
 
 
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
index 8e2b83f..ed2f56d 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
@@ -318,11 +318,18 @@
         "type": "Project",
         "dependencies": {
           "Blazored.LocalStorage": "[4.5.0, )",
+          "Markdig": "[0.41.3, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
           "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
+      "Markdig": {
+        "type": "CentralTransitive",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "CentralTransitive",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
index 645a0f5..9dda67d 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
@@ -356,11 +356,18 @@
         "type": "Project",
         "dependencies": {
           "Blazored.LocalStorage": "[4.5.0, )",
+          "Markdig": "[0.41.3, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
           "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
+      "Markdig": {
+        "type": "CentralTransitive",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "CentralTransitive",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
index 41560dc..9515f63 100644
--- a/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
@@ -1609,6 +1609,7 @@
         "type": "Project",
         "dependencies": {
           "Blazored.LocalStorage": "[4.5.0, )",
+          "Markdig": "[0.41.3, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
           "TELBlazor.Components": "[1.9.2-local, )"
@@ -1623,6 +1624,12 @@
           "Microsoft.AspNetCore.Components.Web": "8.0.0"
         }
       },
+      "Markdig": {
+        "type": "CentralTransitive",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "CentralTransitive",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
index 5a94434..6cbdb6e 100644
--- a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
@@ -1,6 +1,7 @@
 
 @layout ComponentPageLayout
-<div class="component-showcase">
+@inject HttpClient Http
+<section class="component-showcase">
     @if(IsTestComponent){
         <h1 class="test-component-warning-header">This is a Test Component</h1>
         <p>Test components are components not for production but to aid testing. Or to demo a feature not planned for production.</p>
@@ -11,19 +12,28 @@
     <JSDisabledWarning/>
     <TELBlazorPackageVersionInformation />
     
-    <div class="component-presentor">
+    <section class="component-presentor">
+        <h2>Component Example Implementation</h2>
         @ChildContent
-    </div>
-    <div class="component-information">
+    </section>
+    <section class="component-information">
         <h2>Instructions</h2>
         <p>@Instructions</p>
-    </div>
-    <div class="component-information">
-        <h2>Description</h2>
+    </section>
+    <section class="component-information">
+        <h2>Short Description</h2>
         <p>@Description</p>
-    </div>
+    </section>
+    @if (ComponentReadMeMarkdownUrl != string.Empty)
+    {
+        <section class="component-readme">
+            <h2>ReadMe.Md from Components Folder in the Solution</h2>
+            <a href="@ComponentReadMeMarkdownUrl" target="_blank" rel="noopener noreferrer">See the file directly</a>
+            <div class="component-readme-html-container">@((MarkupString)ComponentReadMeHtmlContent)</div>
+        </section>
+    }
 
-</div>
+</section>
 @code
 {
 
@@ -33,13 +43,41 @@
     [Parameter, EditorRequired]
     public required string Title { get; set; } = string.Empty;
 
+    /// <summary>
+    /// Description of what the example implementation shows
+    /// </summary>
     [Parameter,EditorRequired]
     public required string Description { get; set; } = string.Empty;
-
+    /// <summary>
+    /// Instructions of how to interact with example implementation
+    /// </summary>
     [Parameter, EditorRequired]
     public required string Instructions { get; set; } = string.Empty;
 
     [Parameter, EditorRequired]
     public required RenderFragment ChildContent { get; set; }
+    /// <summary>
+    /// Markdown of how the generic component not the showcase specific implementation
+    /// </summary>
+    [Parameter] public string ComponentReadMeMarkdownUrl { get; set; } = string.Empty;
+
+    private string ComponentReadMeHtmlContent = "<em>Loading...</em>";
+
+    protected override async Task OnInitializedAsync()
+    {
+        try
+        {
+            if (!string.IsNullOrWhiteSpace(ComponentReadMeMarkdownUrl))
+            {
+                var markdown = await Http.GetStringAsync(ComponentReadMeMarkdownUrl);
+                ComponentReadMeHtmlContent = Markdig.Markdown.ToHtml(markdown);
+            }
+        }
+        catch (Exception ex)
+        {
+            ComponentReadMeHtmlContent = $"<p><strong>Error:</strong> Could not load markdown.<br/>{ex.Message}</p>";
+        }
+    }
 }
 
+
diff --git a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css
index 8a4da01..7f3acbb 100644
--- a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css
+++ b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css
@@ -30,3 +30,18 @@
     color: #4b5563;  
     line-height: 1.6;
 }
+h1, h2, h3, h4, h5, h6 {
+    color: #4b5563;
+}
+.component-readme-html-container {
+    border: 1.5px solid #d1d5db; /* subtle gray border */
+    background-color: #f9fafb; /* very light gray background */
+    padding: 1.25rem; /* comfortable padding */
+    border-radius: 0.5rem; /* rounded corners */
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05); /* gentle inset shadow */
+    max-height: 400px; /* limit height */
+    overflow-y: auto; /* scroll if content is tall */
+    color: #374151; /* dark gray text */
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor b/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
index 24f8e14..2f1c1d4 100644
--- a/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
@@ -3,12 +3,13 @@
 <ShowCase Title="@Title"
           Instructions="@Instructions"
           Description="@Description"
-          IsTestComponent="@IsTestComponent">
+          IsTestComponent="@IsTestComponent"
+          ComponentReadMeMarkdownUrl="@ComponentReadMeMarkdownUrl">
     <SearchExperiment NoJSActionUrl="@NoJSActionUrl"
           NoJSControllerSetSearchText="@NoJSSearchText"
           NoJSControllerSetSearchResults="@NoJSSearchResults"
           NoJSControllerSetSuggestions="@NoJSSuggestions"/>
-    <h1>qqqq put a readme link or markdig section per component here in future</h1>
+    
 </ShowCase>
 
 @code {
@@ -20,5 +21,5 @@
     private string NoJSActionUrl = "/nojsformsubmitstubpage";
     private List<string> NoJSSearchResults = new List<string>() {"In a nojs browser", " the user would first get a blanks components ", " they then send their data",  " the Controller would provide","this static info back", "including original provideds search", "having used the same service", "serverside in its controller"};
     private List<string> NoJSSuggestions = new List<string>() {"Unsure if this would work ","it might do but we wouldnt", " want to spam a page reload per button press ", " so maybe there would be different suggestions in nojs" };
-
-}
+    private string ComponentReadMeMarkdownUrl = "https://raw.githubusercontent.com/TechnologyEnhancedLearning/TELBlazor/refs/heads/master/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/README.md";
+}
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.Shared/TELBlazor.Components.ShowCase.Shared.csproj b/TELBlazor.Components.ShowCase.Shared/TELBlazor.Components.ShowCase.Shared.csproj
index 46dc96c..8e19aef 100644
--- a/TELBlazor.Components.ShowCase.Shared/TELBlazor.Components.ShowCase.Shared.csproj
+++ b/TELBlazor.Components.ShowCase.Shared/TELBlazor.Components.ShowCase.Shared.csproj
@@ -10,6 +10,7 @@
 	</ItemGroup>
 	<ItemGroup>
 		<PackageReference Include="Blazored.LocalStorage" />
+		<PackageReference Include="Markdig" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" />
 		<PackageReference Include="Serilog" />
 		<PackageReference Include="TELBlazor.Components" />
@@ -33,4 +34,5 @@
 		-->
 		<Exec WorkingDirectory="$(MSBuildProjectDirectory)/.." Command="npx gulp --cwd &quot;$(MSBuildProjectDirectory)&quot; --gulpfile &quot;$(MSBuildProjectDirectory)/gulpfile.js&quot;" />
 	</Target>
+
 </Project>
diff --git a/TELBlazor.Components.ShowCase.Shared/packages.lock.json b/TELBlazor.Components.ShowCase.Shared/packages.lock.json
index 555483d..354fe01 100644
--- a/TELBlazor.Components.ShowCase.Shared/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.Shared/packages.lock.json
@@ -11,6 +11,12 @@
           "Microsoft.AspNetCore.Components.Web": "8.0.0"
         }
       },
+      "Markdig": {
+        "type": "Direct",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "Direct",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json b/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
index e3f0b36..05c381e 100644
--- a/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
@@ -461,11 +461,18 @@
         "type": "Project",
         "dependencies": {
           "Blazored.LocalStorage": "[4.5.0, )",
+          "Markdig": "[0.41.3, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
           "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
+      "Markdig": {
+        "type": "CentralTransitive",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "CentralTransitive",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ReadMe.md b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ReadMe.md
new file mode 100644
index 0000000..3d5cb22
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ReadMe.md
@@ -0,0 +1,12 @@
+# Search Component
+
+The search component is given a search service using the search interface.
+The interface requires a search endpoint and a search suggestion endpoint.
+
+# Usage
+For searching
+
+# NoJs
+
+The component has parameter for the search button action. On search it will hit the specified controller.
+IT receives search information via the same interface so it can be populated in a view.
\ No newline at end of file

From 0bc5381d393338ff3408b266cd7fc19f490ec741 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Wed, 25 Jun 2025 11:57:48 +0000
Subject: [PATCH 9/9] chore(release): 1.9.0-feat-button-for-cicd-testing.1
 [skip ci]

# [1.9.0-feat-button-for-cicd-testing.1](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0...v1.9.0-feat-button-for-cicd-testing.1) (2025-06-25)

### Features

* **searchexperiment:** in theory ([fee2b91](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/fee2b9124b859f9a548e3fa257d53294ce83dc08))
* **showcase:** added component readme displayer ([a058fe6](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/a058fe6f034b5097fb72c9f72a8b98c57ed2b607))
---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e69de29..c8a4a36 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,7 @@
+# [1.9.0-feat-button-for-cicd-testing.1](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0...v1.9.0-feat-button-for-cicd-testing.1) (2025-06-25)
+
+
+### Features
+
+* **searchexperiment:** in theory ([fee2b91](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/fee2b9124b859f9a548e3fa257d53294ce83dc08))
+* **showcase:** added component readme displayer ([a058fe6](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/a058fe6f034b5097fb72c9f72a8b98c57ed2b607))