@iamproperty/components 7.3.0 → 7.5.0

package/assets/sass/elements/popover.scss

@@ -60,6 +60,32 @@ $darkMode: 'true' !default;
       }
     }
 
+    > [popover] {
+      display: var(--menu-display, none);
+      position: fixed;
+      top: anchor(bottom) !important;
+
+      left: anchor(left) !important;
+
+      position-try-fallbacks: flip-block, flip-inline !important;
+
+      //right: auto;
+      margin: 0 0 0 #{rem(4)};
+      padding: rem(16);
+
+      &::backdrop {
+        display: none;
+      }
+    }
+
+    > [popover]:popover-open {
+      display: block !important;
+    }
+
+    &:has([popover]:popover-open) > button {
+      background-color: var(--colour);
+    }
+
     > :is(dialog[open], dialog:popover-open) {
       left: 0;
       margin-top: -1rem;
@@ -79,22 +105,27 @@ $darkMode: 'true' !default;
 
       &.dialog--list {
         width: fit-content !important;
-
-        min-width: rem(140) !important;
-        max-width: rem(280) !important;
-        padding: rem(16);
+        min-width: rem(160) !important;
+        max-width: rem(240) !important;
+        padding: var(--menu-padding, 0.5rem);
         margin: 0;
+        background: var(--menu-bg, canvas);
+        border: var(--menu-border, 2px solid grey);
+        overflow: auto;
+        border: none !important;
+        border-radius: 0.5rem;
+        box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
 
         @include media-breakpoint-up(sm, $mobileOnly) {
           width: max-content !important;
         }
 
         hr {
-          height: 2px;
-          background: var(--colour-border);
-          margin-left: -#{rem(16)};
-          margin-right: -#{rem(16)};
-          margin-block: 0.25rem;
+          height: 1px !important;
+          background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
+          width: 100%;
+          margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
+          padding: 0 !important;
         }
 
         .radio--tick {
@@ -123,10 +154,33 @@ $darkMode: 'true' !default;
         }
 
         .btn-action {
+          background: unset;
+          border: unset;
+          color: var(--colour-primary);
+          font-weight: inherit;
+          font-family: inherit;
+          font-size: 1rem;
+          line-height: rem(19);
+          display: block;
+          margin: var(--menu-item-margin, 0 0 0.25rem 0);
+          padding-block: var(--menu-item-padding, 0.5rem);
+          width: var(--menu-item-width, 100%);
+          max-width: var(--menu-item-width, 100%);
+          text-align: var(--menu-item-text-align, left);
+
           &:not(:hover, :focus, :active) {
             border-color: transparent;
           }
-          margin: 0;
+
+          &:is(:hover, :focus) {
+            background: var(--colour-light) !important;
+            border-radius: 0.25rem !important;
+          }
+
+          &:is(:active) {
+            background: rgba(224, 224, 224, 1) !important;
+            border-radius: 0.25rem !important;
+          }
         }
       }
 

package/assets/sass/elements/toggle-button.scss

@@ -5,11 +5,11 @@ $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;
 
 @include layer('elements', $layers) {
-
-// #region toggle
+  // #region toggle
   .toggle {
-    --outline-width: 0.25rem!important;
+    --outline-width: 0.25rem !important;
     padding-left: 3.25rem !important;
+    max-width: fit-content !important;
   }
 
   .toggle:before {
@@ -21,14 +21,14 @@ $darkMode: 'true' !default;
     left: 0.25rem !important;
   }
 
-  label.toggle:has(:is(input[type='checkbox'],input[type="radio"]):not([disabled]):checked):before {
+  label.toggle:has(:is(input[type='checkbox'], input[type='radio']):not([disabled]):checked):before {
     background: var(--colour-primary-theme) !important;
   }
 
   .toggle:after {
     position: absolute !important;
     content: '' !important;
-    display: block!important;
+    display: block !important;
     top: 0.5rem !important;
     height: 1em !important;
     width: 1em !important;
@@ -40,7 +40,7 @@ $darkMode: 'true' !default;
     border-radius: 0.5em;
   }
 
-  label.toggle:has(:is(input[type='checkbox'],input[type='radio']):not([disabled]):not([disabled]):checked):after {
+  label.toggle:has(:is(input[type='checkbox'], input[type='radio']):not([disabled]):not([disabled]):checked):after {
     background: var(--colour-primary-theme) !important;
     background-color: white !important;
     -webkit-transform: translateX(1rem) !important;
@@ -50,6 +50,6 @@ $darkMode: 'true' !default;
   // #endregion
 
   label.toggle:has(+ label.toggle) {
-    margin-bottom: 0!important;
+    margin-bottom: 0 !important;
   }
-}
+}

package/assets/sass/elements/type.scss

@@ -17,15 +17,14 @@ $darkMode: 'true' !default;
   // #region headings
 
   %heading {
-
     margin-top: 0; // 1
     margin-bottom: 0;
     font-family: $headings-font-family;
     font-style: $headings-font-style;
     font-weight: bold;
 
-    line-height: round(calc(1em * var(--type-scale)),0.25rem);
-    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
+    line-height: round(calc(1em * var(--type-scale)), 0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)), 0.25rem);
     color: $headings-color;
     clear: both;
     display: block;
@@ -40,12 +39,10 @@ $darkMode: 'true' !default;
   }
 
   :is(.h1, h1) {
-
     font-size: map.get($heading-sizes, 'h1_fs');
     font-weight: 900;
   }
 
-
   :is(h2, .h2) {
     font-size: map.get($heading-sizes, 'h2_fs');
     font-weight: 900;
@@ -55,16 +52,16 @@ $darkMode: 'true' !default;
     font-size: map.get($heading-sizes, 'h3_fs');
     max-width: var(--content-max-width);
 
-    line-height: round(calc(1em * var(--type-scale)),0.25rem);
-    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
+    line-height: round(calc(1em * var(--type-scale)), 0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)), 0.25rem);
   }
 
   :is(.h4, h4, .h5, h5, .h6, h6) {
     font-size: map.get($heading-sizes, 'h4_fs');
     max-width: var(--content-max-width);
-    
-    line-height: round(calc(1em * var(--type-scale)),0.25rem);
-    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
+
+    line-height: round(calc(1em * var(--type-scale)), 0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)), 0.25rem);
   }
   // #endregion
 

package/assets/sass/foundations/reboot.scss

@@ -117,12 +117,19 @@ $darkMode: 'true' !default;
     color-scheme: light dark;
     @include var(background, --colour-canvas);
     @include var(font-family, --font-body);
-    @include var(color, --colour-body);
+
     width: 100%;
     line-height: 1.2;
     min-height: 100%;
     -webkit-text-size-adjust: 100%; // 3
     -webkit-tap-highlight-color: rgba($black, 0); // 4
+
+    @container style(--theme: dark) {
+      color: var(--colour-body);
+    }
+    @container style(--theme: light) {
+      color: var(--colour-body);
+    }
   }
 
   // #region scrollbars

package/assets/sass/foundations/root.scss

@@ -95,78 +95,68 @@ $darkMode: 'true' !default;
     }
   }
 
-  .reset-colours {
-    @each $color, $value in $theme-colors {
-      --colour-#{$color}: #{$value};
+  // Dark mode; functional colours get updated
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --theme: light;
+      --body-theme: light;
+    }
+  }
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --theme: dark;
+      --body-theme: dark;
     }
-    @include reset-colours();
   }
 
-  // Dark mode; functional colours get updated
-  @include dark-mode($darkMode) {
-    #{$root} {
-      @each $color, $value in $dark-mode-colors {
-        --colour-#{$color}: #{$value};
-      }
-      @include invert-colours();
+
+  :is(.bg-primary, .bg-danger, .bg-dark) {
+    --theme: dark;
+
+    > * {
+      color: var(--colour-heading);
     }
   }
 
-  @include light-mode($darkMode) {
-    // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-    html:not(.dark-theme)
-      [class*='bg-']:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(
-        .bg-canvas-2
-      ):not(.invert-colours) {
-      @each $color, $value in $theme-colors {
+
+  @container style(--theme: dark) {
+    * > *,
+    [class*='bg-'] {
+      @each $color, $value in $dark-mode-colors {
+        --colour-#{$color}: #{$value};
+      }
+      @each $color, $value in $dark-mode-functional-colors {
         --colour-#{$color}: #{$value};
       }
-      @include reset-colours();
-      --colour-body: rgb(89, 89, 89);
-      color: var(--colour-body);
     }
+  }
 
-    // Override the colours when on a dark background, similiar to dark mode but on a module level
-    [class*='bg-']:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(
-        .bg-canvas
-      ):not(.bg-canvas-2):not(.prevent-invert),
-    .invert-colours {
-      @include invert-colours();
+  @container style(--body-theme: dark) {
 
-      color: #{$colour-inverted};
-    }
-  }
 
-  @include dark-mode($darkMode) {
-    // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-    [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
-      @include reset-colours();
-      --colour-body: #{$primary};
-      color: var(--colour-body);
-    }
+    [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.ds-header):not(iam-header) {
+      --theme: light;
 
-    @each $color, $value in $theme-colors {
-      .bg-#{$color}[class*='gradient-'] {
-        background-color: var(--colour-#{$color}-theme) !important;
+      > * {
+        color: var(--colour-heading);
       }
-    }
+    }    
+
+  }
 
-    [class*='bg-'][class*='gradient-']:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
+
+  @container style(--theme: light) {
+    * > * {
       @each $color, $value in $theme-colors {
         --colour-#{$color}: #{$value};
       }
-      @include reset-colours();
-      --colour-body: var(--colour-primary-theme);
-      color: var(--colour-body);
-    }
-
-    [class*='bg-'][class*='gradient-']:not(.bg-info):not(.bg-success):not(.bg-warning):not(.prevent-invert) {
-      @include invert-colours();
-
-      color: #{$colour-inverted};
+      @each $color, $value in $non-theme-colors {
+        --colour-#{$color}: #{$value};
+      }
     }
   }
 
+
   @media (forced-colors: active) {
     #{$root} {
       --contrast-outline-width: 1px;

package/assets/sass/templates/form.scss

@@ -35,8 +35,6 @@ $darkMode: 'true' !default;
       line-height: map.get($heading-sizes, 'h3_lh');
       padding-bottom: map.get($heading-sizes, 'h3_pb');
       max-width: var(--content-max-width);
-
-
     }
 
     @include light-mode($darkMode) {

package/assets/ts/components/accordion/accordion.component.ts

@@ -1,14 +1,6 @@
-// Data layer Web component created
-declare global {
-  interface Window {
-    dataLayer: Array<object>;
-  }
-}
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'accordion',
-});
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-accordion');
 
 class iamAccordion extends HTMLElement {
   constructor() {
@@ -23,29 +15,34 @@ class iamAccordion extends HTMLElement {
       : `${assetLocation}/css/core.min.css`;
 
     const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    @import "${coreCSS}";
+    template.innerHTML = /* HTML */ `
+      <style>
+        @import '${coreCSS}';
 
-    :host {
-      margin-bottom: 2.5rem;
-      display: block;
-    }
-    
-    ::slotted(details) {
-      --border-radius: 0!important;
-      padding-bottom: 0!important;
-    }    
-    </style>
+        :host {
+          margin-bottom: 2.5rem;
+          display: block;
+        }
+
+        ::slotted(details) {
+          --border-radius: 0 !important;
+          padding-bottom: 0 !important;
+        }
+      </style>
       <slot></slot>
     `;
     this.shadowRoot?.appendChild(template.content.cloneNode(true));
   }
 
   connectedCallback(): void {
-    if (!this.classList.contains('accordion--keep-open')) {
-      const details: NodeListOf<HTMLElement> = this.querySelectorAll(':scope > details');
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const accordionComponent = this;
+
+    trackComponent(accordionComponent, 'iam-accordion', ['accordion-item-closed', 'accordion-item-opened']);
+
+    const details: NodeListOf<HTMLElement> = this.querySelectorAll(':scope > details');
 
+    if (!this.classList.contains('accordion--keep-open')) {
       // Add the toggle listeners.
       details.forEach((targetDetail) => {
         targetDetail.addEventListener('toggle', () => {
@@ -58,6 +55,30 @@ class iamAccordion extends HTMLElement {
         });
       });
     }
+
+    // Fire tracking events
+    details.forEach((targetDetail) => {
+      const summaryEle = targetDetail.querySelector('summary');
+      const summaryText = summaryEle?.innerText;
+
+      targetDetail.addEventListener('toggle', () => {
+        if (targetDetail?.hasAttribute('open')) {
+          itemInteractionEvent('accordion-item-opened', summaryText);
+        } else {
+          itemInteractionEvent('accordion-item-closed', summaryText);
+        }
+      });
+    });
+
+    const itemInteractionEvent = function (eventName: string, itemSummary: string): void {
+      const customEvent = new CustomEvent(eventName, {
+        detail: {
+          title: itemSummary,
+        },
+      });
+
+      accordionComponent.dispatchEvent(customEvent);
+    };
   }
 }
 

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -1,4 +1,4 @@
-import extendDialogs from '../../modules/dialogs';
+import { uniqueID } from '../../modules/helpers';
 
 // Data layer Web component created
 declare global {
@@ -58,23 +58,23 @@ class iamActionbar extends HTMLElement {
         <div class="safe-area">
           <slot></slot>
           <div class="body">
-            <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
-              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list" part="overflow">
+            <div class="menu__wrapper  menu__wrapper --right dialog-overflow d-none show">
+              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0" popovertarget="overflow" style="anchor-name: --anchor-overflow;">More actions</button>
+              <iam-menu class="dialog--list" part="overflow" id="overflow" style="position-anchor: --anchor-overflow;" popover>
                 <slot name="overflow"></slot>
                 <slot name="menu"></slot>
-              </dialog>
+              </iam-menu>
             </div>
 
 
-            <div class="dialog__wrapper dialog__wrapper--right filter-columns">
-              <button class="btn btn-secondary btn-compact btn-sm mb-0 me-0 fa-regular fa-table-columns" title="Select colums">Filter</button>
-              <dialog class="dialog--list">
+            <div class="menu__wrapper  menu__wrapper --right filter-columns">
+              <button class="btn btn-secondary btn-compact btn-sm mb-0 me-0 fa-regular fa-table-columns" title="Select colums" popovertarget="filter" style="anchor-name: --anchor-filter;">Filter</button>
+              <iam-menu class="dialog--list" id="filter" style="position-anchor: --anchor-filter;" popover>
                 <div class="pb-0 mb-0 checklists">
                   
                 </div>
                 <div class="text-right checklist-btns"><button id="cancelColumns" class="btn btn-action">Cancel</button><button id="saveColumns" class="btn btn-action btn-secondary">Save</button></div>
-              </dialog>
+              </iam-menu>
             </div>
 
             <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="" part="search-btn">Search</button>
@@ -85,11 +85,11 @@ class iamActionbar extends HTMLElement {
         <div class="safe-area">
           <slot name="selected"></slot>
           <div class="body">
-            <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
-              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list" part="selected-overflow">
+            <div class="menu__wrapper  menu__wrapper --right dialog-overflow d-none show">
+              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0" popovertarget="selected-overflow" style="anchor-name: --anchor-selected-overflow;">More actions</button>
+              <iam-menu class="dialog--list" part="selected-overflow" id="selected-overflow" style="position-anchor: --anchor-selected-overflow;" popover>
                 <slot name="selected-overflow"></slot>
-              </dialog>
+              </iam-menu>
             </div>
           </div>
         </div>
@@ -102,6 +102,7 @@ class iamActionbar extends HTMLElement {
           <label for="search" class="visually-hidden">Input field label</label>
           <button class="suffix" part="search-btn"><i class="fa-regular fa-search"></i></button>
           <input type="text" id="search" name="search" required="" part="search-input">
+          <button class="empty btn btn-action"><i class="fa-light fa-times me-0" aria-hidden="true"></i></button>
         </div>
 
       </div>
@@ -121,6 +122,37 @@ class iamActionbar extends HTMLElement {
     const actionbarWrapper = this.shadowRoot?.querySelector('.actionbar__wrapper');
     const checklistHolder = this.shadowRoot?.querySelector('.checklists');
 
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) {
+      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
+        .then((module) => {
+          window.customElements.define(`iam-menu`, module.default);
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+
+    const dialog = this.querySelector('.dialog__wrapper dialog');
+
+    // Transform dialog into a menu custom element
+    if (dialog) {
+      const btn = dialog.parentElement.querySelector('.btn');
+      const id = `menu${uniqueID(1)}`;
+
+      dialog.setAttribute('id', id);
+      dialog.setAttribute('popover', 'auto');
+      btn.setAttribute('popovertarget', id);
+
+      dialog.outerHTML = dialog.outerHTML.replace(/<dialog/g, '<iam-menu').replace(/<\/dialog>/g, '</iam-menu>');
+
+      dialog.parentElement?.classList.add('menu__wrapper');
+      dialog.parentElement?.classList.remove('dialog__wrapper');
+    }
+
     // #region select all
     if (this.hasAttribute('data-selectall')) {
       actionbarWrapper?.insertAdjacentHTML(
@@ -246,12 +278,16 @@ class iamActionbar extends HTMLElement {
         this.dispatchEvent(submitEvent);
       }
     });
-    // #endregion
 
-    // Make sure dialogs created in the shadow dom work
-    Array.from(this.shadowRoot.querySelectorAll('.body')).forEach((element) => {
-      extendDialogs(element);
+    const clearBtn = searchBar.querySelector('.empty');
+    const searchInput = searchBar.querySelector('#search');
+
+    clearBtn.addEventListener('click', function (e) {
+      searchInput.removeAttribute('placeholder');
+      searchInput.removeAttribute('data-value');
+      searchInput.value = '';
     });
+    // #endregion
 
     // #region Reponsive safe area
     const hideButtons = (): void => {
@@ -294,7 +330,7 @@ class iamActionbar extends HTMLElement {
       if (wrapperWidth < 576) {
         Array.from(
           this.querySelectorAll(
-            ':scope > .btn:not(.js-updated), :scope > .dialog__wrapper > .btn[class*="fa-"]:first-child:not(.js-updated)'
+            ':scope > .btn:not(.js-updated), :scope > .menu__wrapper  > .btn[class*="fa-"]:first-child:not(.js-updated)'
           )
         ).forEach((element: HTMLElement) => {
           element.className = element.className.replace(' btn-compact', ' _btn-compact');
@@ -303,7 +339,7 @@ class iamActionbar extends HTMLElement {
         });
       } else {
         Array.from(
-          this.querySelectorAll(':scope > .btn.js-updated, :scope > .dialog__wrapper > .btn.js-updated:first-child')
+          this.querySelectorAll(':scope > .btn.js-updated, :scope > .menu__wrapper  > .btn.js-updated:first-child')
         ).forEach((element: HTMLElement) => {
           element.classList.remove('btn-compact');
           element.classList.remove('js-updated');
@@ -342,7 +378,7 @@ class iamActionbar extends HTMLElement {
 
         // Foreach element this isn't an action button or dialog wrapper add to the width, these will not be moved into the overflow slot
         for (let i = 0; i < elements.length; i++) {
-          if (!elements[i].classList.contains('btn-action') && !elements[i].classList.contains('dialog__wrapper')) {
+          if (!elements[i].classList.contains('btn-action') && !elements[i].classList.contains('menu__wrapper ')) {
             tempWidth += elements[i].offsetWidth;
             tempWidth += elementMargin;
           }
@@ -350,7 +386,7 @@ class iamActionbar extends HTMLElement {
 
         // Foreach dialog wrapper decide if safe in safe area or move into the overflow slot, dialog wrappers have priority over the action buttons
         for (let i = 0; i < elements.length; i++) {
-          if (elements[i].classList.contains('dialog__wrapper')) {
+          if (elements[i].classList.contains('menu__wrapper ')) {
             elements[i].classList.add('show');
             tempWidth += elements[i].offsetWidth;
             tempWidth += elementMargin / 2;
@@ -384,7 +420,7 @@ class iamActionbar extends HTMLElement {
 
         // Decide which elements go into the overflow slot
         for (let i = 0; i < elements.length; i++) {
-          if (elements[i].classList.contains('btn-action') || elements[i].classList.contains('dialog__wrapper')) {
+          if (elements[i].classList.contains('btn-action') || elements[i].classList.contains('menu__wrapper ')) {
             if (!elements[i].classList.contains('show')) {
               // Move to the slot by changing the attribute
               elements[i].setAttribute('slot', overflowSlot);

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -28,10 +28,8 @@ class iamAddressLookup extends HTMLElement {
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <div class="wrapper">
@@ -40,25 +38,25 @@ class iamAddressLookup extends HTMLElement {
         <div>
         <label class="mb-2">Search <span class="title text-lowercase"></span> <span class="optional">(Optional)</span>
           <span>
-          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" />
-          <span class="suffix fa-regular fa-search"></span>
+          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" part="input" />
+          <span class="suffix fa-regular fa-search" part="suffix"></span>
           </span>
           <span class="invalid-feedback">Required Adddress fields missing</span>
         </label>
 
         </div>
-        <button class="btn btn-tertiary switch-to-manual-btn" type="button">Or enter address manually</button>
+        <button class="btn btn-tertiary switch-to-manual-btn" type="button" part="button">Or enter address manually</button>
       </div>
       <datalist id="address-lookup__addressess"></datalist>
 
       <div class="manual-address pb-2 js-hide">
-        <slot></slot>
-        <button class="btn btn-tertiary switch-to-lookup-btn" type="button">Use postcode lookup</button>
+        <slot part="contents"></slot>
+        <button class="btn btn-tertiary switch-to-lookup-btn" type="button" part="button">Use postcode lookup</button>
         <slot name="after"></slot>
       </div>
       <div class="pre-filled pb-2 js-hide">
         <strong class="title text-primary d-block"></strong>
-        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer" type="button"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
+        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer" type="button" part="edit-button"><i class="fa-regular fa-pen-to-square"></i> <span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
       </div>
     </div>
     `;