@iamproperty/components 7.6.4--beta2 → 7.6.4--beta4

package/assets/js/modules/dropdown.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import Cookies from 'js-cookie';
+import Cookies from '../../../node_modules/js-cookie/dist/js.cookie.mjs';
 export const filterList = (component, search) => {
     Array.from(component.querySelectorAll(`label:not([slot="checked"])`)).forEach((label) => {
         const checkbox = label.querySelector('input');
@@ -27,8 +27,10 @@ export const searchAjax = (component, search, callback) => __awaiter(void 0, voi
     const ajaxURL = component.getAttribute('data-url');
     const firstInput = component.querySelector('input');
     console.log(firstInput);
-    const inputType = firstInput.getAttribute('type');
-    const inputName = firstInput.getAttribute('name');
+    const inputType = firstInput && firstInput.hasAttribute('type') ? firstInput.getAttribute('type') : 'checkbox';
+    let inputName = firstInput && firstInput.hasAttribute('name') ? firstInput.getAttribute('name') : 'tags';
+    if (component.hasAttribute('data-name'))
+        inputName = component.hasAttribute('data-name');
     const searchAjaxURL = `${ajaxURL}?search_query=${encodeURI(searchterm)}`;
     // Setup controller vars if not already set
     if (!window.controller)
@@ -56,7 +58,7 @@ export const searchAjax = (component, search, callback) => __awaiter(void 0, voi
             let items = '';
             for (let i = 0; i < response['data'].length; i++) {
                 if (!component.querySelector(`[value="${response['data'][i].value}"]`))
-                    items += `<label class="tag"><input type="${inputType}" name="${component.hasAttribute('data-name') ? component.getAttribute('data-name') : inputName}" value="${response['data'][i].value}"/>${response['data'][i].title}</label>`;
+                    items += `<label class="tag dropdown__option"><input type="${inputType}" name="${component.hasAttribute('data-name') ? component.getAttribute('data-name') : inputName}" value="${response['data'][i].value}"/>${response['data'][i].title}</label>`;
             }
             component.insertAdjacentHTML('beforeend', `${items}`);
             callback(component, search);
@@ -84,3 +86,94 @@ export const setTag = (tag) => {
         tagIndex = 1;
     tag === null || tag === void 0 ? void 0 : tag.classList.add(`wider-colour-${tagIndex + 1}`);
 };
+export const addKeyboardEvents = (dropdown, search) => {
+    search.addEventListener('keydown', (e) => {
+        var _a;
+        switch (e.keyCode) {
+            case 40: // down
+                e.stopPropagation();
+                e.preventDefault();
+                (_a = dropdown.querySelector('label:not([slot="checked"]) input')) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+        }
+    });
+    dropdown.addEventListener('keydown', (event) => {
+        var _a, _b, _c;
+        const topLevelmenuItems = dropdown.querySelectorAll(':scope > a, :scope > button, :scope > details > summary, :scope > label:not([slot="checked"]) > input');
+        const menuItems = dropdown.querySelectorAll('a, button, input, label:not([slot="checked"]) > input');
+        const activeElement = document.activeElement;
+        if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary, label:not([slot="checked"]) > input')) {
+            const activeItem = document.activeElement;
+            const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;
+            const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;
+            switch (event.keyCode // change to event.key to key to use the above variable
+            ) {
+                case 27: // Esc
+                    if (activeItem.closest('details')) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        activeItem.closest('details').removeAttribute('open');
+                        activeItem.closest('details').querySelector(':scope summary').focus();
+                    }
+                    else {
+                        event.stopPropagation();
+                        //menuButton.focus();
+                    }
+                    break;
+                case 32: // Space
+                case 13: // Enter
+                    break;
+                case 35: // end
+                    event.stopPropagation();
+                    event.preventDefault();
+                    (_a = dropdown.querySelector('details[open]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('open');
+                    Array.from(menuItems)[menuItems.length - 1].focus();
+                    break;
+                case 36: // home
+                    event.stopPropagation();
+                    event.preventDefault();
+                    (_b = dropdown.querySelector('details[open]')) === null || _b === void 0 ? void 0 : _b.removeAttribute('open');
+                    Array.from(menuItems)[0].focus();
+                    break;
+                case 38: // up
+                    event.stopPropagation();
+                    event.preventDefault();
+                    if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+                        if (Array.from(topLevelmenuItems)[prevIndex] != undefined)
+                            Array.from(topLevelmenuItems)[prevIndex].focus();
+                        else
+                            Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();
+                    }
+                    else if (activeItem.closest('details')) {
+                        const subMenuItems = activeItem
+                            .closest('details')
+                            .querySelectorAll('a, button, :scope details > summary');
+                        subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;
+                        if (Array.from(subMenuItems)[subPrevIndex] != undefined)
+                            Array.from(subMenuItems)[subPrevIndex].focus();
+                        else
+                            Array.from(subMenuItems)[subMenuItems.length - 1].focus();
+                    }
+                    break;
+                case 40: // down
+                    event.stopPropagation();
+                    event.preventDefault();
+                    if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+                        if (Array.from(topLevelmenuItems)[nextIndex] != undefined)
+                            Array.from(topLevelmenuItems)[nextIndex].focus();
+                        else
+                            Array.from(topLevelmenuItems)[0].focus();
+                    }
+                    else if (activeItem.closest('details')) {
+                        const subMenuItems = (_c = activeItem.closest('details')) === null || _c === void 0 ? void 0 : _c.querySelectorAll('a, button, :scope details > summary');
+                        subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;
+                        if (Array.from(subMenuItems)[subNextIndex] != undefined)
+                            Array.from(subMenuItems)[subNextIndex].focus();
+                        else
+                            Array.from(subMenuItems)[0].focus();
+                    }
+                    break;
+            }
+        }
+    });
+};

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.6.4--beta2
+  * iamKey v7.6.4--beta4
   * Copyright 2022-2026 iamproperty
   */(function(d){typeof define=="function"&&define.amd?define(d):d()})((function(){"use strict";var d=a=>{a.classList.add("js-enabled"),(navigator.userAgent.indexOf("MSIE")!==-1||navigator.appVersion.indexOf("Trident/")>0)&&a.classList.add("ie")},g=a=>{var t=function(c){var r=document.querySelector('label[for="'.concat(c.replace("#",""),'"]')),o=document.querySelector(c+" summary"),i=document.querySelector("dialog".concat(c)),n=document.querySelector("detail".concat(c));r instanceof HTMLElement?r.click():o instanceof HTMLElement?o.click():i instanceof HTMLElement?i.showModal():n instanceof HTMLElement&&n.addAttribute("open")};location.hash&&t(location.hash),window.addEventListener("hashchange",function(){t(location.hash)},!1),addEventListener("popstate",e=>{if(e&&e.state&&e.state.type&&e.state.type=="pagination"){var c=document.querySelector("#".concat(e.state.form)),r=document.querySelector("#".concat(e.state.form," [data-pagination]"));r?r.value=e.state.page:c.innerHTML+='<input name="page" type="hidden" data-pagination="true" value="'.concat(e.state.page,'" />'),c.dispatchEvent(new Event("submit"))}}),Array.from(document.querySelectorAll("form")).forEach(e=>{e?.closest("iam-form")||e.addEventListener("submit",c=>{var r;e.querySelector(":invalid")&&(e.classList.add("was-validated"),(r=e?.querySelector("input:invalid"))===null||r===void 0||r.scrollIntoView(),c.preventDefault())})}),document.addEventListener("click",e=>{var c;if(e&&e.target instanceof HTMLElement&&e.target.matches("form button:not([type=button])")){var r=e.target.closest("form");r?.closest("iam-form")||(Array.from(r.querySelectorAll("[data-password-type]")).forEach(o=>{o.setAttribute("type","password")}),(r.querySelector(":invalid")||r.querySelector('.pwd-checker[data-strength="1"]')||r.querySelector('.pwd-checker[data-strength="2"]'))&&(r.classList.add("was-validated"),(c=r?.querySelector("input:invalid"))===null||c===void 0||c.scrollIntoView(),e.preventDefault()),r.querySelector("iam-multiselect[data-is-required][data-error]")&&(r.classList.add("was-validated"),e.preventDefault()))}}),document.addEventListener("keydown",e=>{e.key==="Escape"&&document.querySelector(".dialog--transactional[open], .dialog--acknowledgement[open]")&&(e.preventDefault(),e.stopPropagation())}),Array.from(document.querySelectorAll("label progress")).forEach(e=>{var c=e.closest("label");c.setAttribute("data-percent",e.getAttribute("value"))})};function m(){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Pageview",pageTitle:document.title}),document.addEventListener("click",a=>{var t=a.target.closest("[open] summary");if(t)window.dataLayer.push({event:"closeDetails",detailsTitle:t.textContent||""});else{var e=a.target.closest("summary"),c=a.target.closest("a"),r=a.target.closest("button");e&&window.dataLayer.push({event:"openDetails",detailsTitle:e.textContent||""}),c&&window.dataLayer.push({event:"linkClicked",linkText:c.hasAttribute("title")?c.getAttribute("title")||"":c.textContent||"",class:c.hasAttribute("class")&&c.getAttribute("class")||"",href:c.getAttribute("href")||""}),r&&window.dataLayer.push({event:"buttonClicked",buttonText:r.textContent||"",class:r.hasAttribute("class")&&r.getAttribute("class")||""})}})}window.triggerDynamicEvent=function(a){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"change";console.log("event"),a.hasAttribute("data-change-events")&&t=="change"&&l(a,a.getAttribute("data-change-events")),a.hasAttribute("data-click-events")&&t=="click"&&l(a,a.getAttribute("data-click-events"))};var p=()=>{document.addEventListener("change",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-change-events]")&&l(a.target,a.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("keyup",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-change-events]")&&l(a.target,a.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("click",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-click-events]")&&l(a.target,a.target.closest("[data-click-events]").getAttribute("data-click-events"))})},l=(a,t)=>{if(t||(t=a.parentNode.getAttribute("data-change-events")),!t)return!1;Array.from(JSON.parse(t)).forEach(e=>{v(a,e)})},v=(a,t)=>{if("matches"in t)return t.matches=="any"||a.value==t.matches?u(a,t,"if"):u(a,t,"else"),!1;if("in-list"in t){var e=document.querySelector("".concat(t["in-list"],' option[value="').concat(a.value,'"]'));return document.querySelector("".concat(t["in-list"],' option[value="').concat(a.value,'"]'))?u(e,t,"if"):u(e,t,"else"),!1}else"event"in t&&u(a,t,"event")},u=(a,t,e)=>{if(!(e in t))return!1;switch(t[e]){case"hide":if(document.querySelector(t.target)){var c=document.querySelector(t.target);c.classList.add("js-hide"),Array.from(c.querySelectorAll("[data-required]")).forEach(n=>{n.removeAttribute("required")})}break;case"show":if(document.querySelector(t.target)){var r=document.querySelector(t.target);r.classList.remove("js-hide"),Array.from(r.querySelectorAll("[data-required]")).forEach(n=>{n.closest(".js-hide")||n.setAttribute("required","true")})}break;case"populate-form":h(a,t);break;case"dispatchEvent":var o=new Event(t.value);document.querySelector("".concat(t.target)).dispatchEvent(o);break;case"setAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(n){n.setAttribute(t.attribute,t.value)});break;case"focus":document.querySelector("".concat(t.target)).focus();break;case"removeAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(n){n.removeAttribute(t.attribute)});break;case"updateValue":document.querySelector("".concat(t.target)).value=t.value?t.value:"";var i=new Event("change");document.querySelector("".concat(t.target)).dispatchEvent(i);break;case"submitForm":document.querySelector("".concat(t.target)).submit();break;case"openLink":document.querySelector("".concat(t.target)).value&&(window.location.href=document.querySelector("".concat(t.target)).value);break}},h=function(t,e){var c=JSON.parse(t.getAttribute("data-values")),r=document.querySelector(e.target);if(!c)return!1;Object.keys(c).forEach(o=>{document.getElementById(o)&&document.getElementById(o).tagName=="SPAN"&&(document.getElementById(o).innerHTML=c[o]),r.querySelector('select[name="'.concat(o,'"] [value="').concat(c[o],'"]'))?(r.querySelector('select[name="'.concat(o,'"]')).value=c[o],t.hasAttribute("data-lock-fields")&&(r.querySelector('select[name="'.concat(o,'"]')).disabled=!0)):r.querySelector('input[name="'.concat(o,'"][type="radio"][value="').concat(c[o],'"]'))?(Array.from(r.querySelectorAll('input[name="'.concat(o,'"][type="radio"]'))).forEach(function(i){i.disabled=!0}),r.querySelector('input[name="'.concat(o,'"][type="radio"][value="').concat(c[o],'"]')).checked=!0,r.querySelector('input[name="'.concat(o,'"][type="radio"][value="').concat(c[o],'"]')).disabled=!1):r.querySelector('input[name="'.concat(o,'"]'))&&(r.querySelector('input[name="'.concat(o,'"]')).value=c[o],t.hasAttribute("data-lock-fields")&&r.querySelector('input[name="'.concat(o,'"]')).setAttribute("readonly","true"))})},b=function(a,t,e,c){function r(o){return o instanceof e?o:new e(function(i){i(o)})}return new(e||(e=Promise))(function(o,i){function n(s){try{f(c.next(s))}catch(y){i(y)}}function q(s){try{f(c.throw(s))}catch(y){i(y)}}function f(s){s.done?o(s.value):r(s.value).then(n,q)}f((c=c.apply(a,t||[])).next())})};document.addEventListener("DOMContentLoaded",()=>b(void 0,void 0,void 0,function*(){m(),p(),d(document.body),g()}))}));
 //# sourceMappingURL=scripts.bundle.js.map

package/assets/js/scripts.bundle.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.6.4--beta2
+  * iamKey v7.6.4--beta4
   * Copyright 2022-2026 iamproperty
   */
 !function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";window.triggerDynamicEvent=function(t){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"change";console.log("event"),t.hasAttribute("data-change-events")&&"change"==a&&e(t,t.getAttribute("data-change-events")),t.hasAttribute("data-click-events")&&"click"==a&&e(t,t.getAttribute("data-click-events"))};var e=(e,a)=>{if(a||(a=e.parentNode.getAttribute("data-change-events")),!a)return!1;Array.from(JSON.parse(a)).forEach(a=>{t(e,a)})},t=(e,t)=>{if("matches"in t)return"any"==t.matches||e.value==t.matches?a(e,t,"if"):a(e,t,"else"),!1;if("in-list"in t){var n=document.querySelector("".concat(t["in-list"],' option[value="').concat(e.value,'"]'));return document.querySelector("".concat(t["in-list"],' option[value="').concat(e.value,'"]'))?a(n,t,"if"):a(n,t,"else"),!1}"event"in t&&a(e,t,"event")},a=(e,t,a)=>{if(!(a in t))return!1;switch(t[a]){case"hide":if(document.querySelector(t.target)){var r=document.querySelector(t.target);r.classList.add("js-hide"),Array.from(r.querySelectorAll("[data-required]")).forEach(e=>{e.removeAttribute("required")})}break;case"show":if(document.querySelector(t.target)){var c=document.querySelector(t.target);c.classList.remove("js-hide"),Array.from(c.querySelectorAll("[data-required]")).forEach(e=>{e.closest(".js-hide")||e.setAttribute("required","true")})}break;case"populate-form":n(e,t);break;case"dispatchEvent":var o=new Event(t.value);document.querySelector("".concat(t.target)).dispatchEvent(o);break;case"setAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(e){e.setAttribute(t.attribute,t.value)});break;case"focus":document.querySelector("".concat(t.target)).focus();break;case"removeAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(e){e.removeAttribute(t.attribute)});break;case"updateValue":document.querySelector("".concat(t.target)).value=t.value?t.value:"";var i=new Event("change");document.querySelector("".concat(t.target)).dispatchEvent(i);break;case"submitForm":document.querySelector("".concat(t.target)).submit();break;case"openLink":document.querySelector("".concat(t.target)).value&&(window.location.href=document.querySelector("".concat(t.target)).value)}},n=function(e,t){var a=JSON.parse(e.getAttribute("data-values")),n=document.querySelector(t.target);if(!a)return!1;Object.keys(a).forEach(t=>{document.getElementById(t)&&"SPAN"==document.getElementById(t).tagName&&(document.getElementById(t).innerHTML=a[t]),n.querySelector('select[name="'.concat(t,'"] [value="').concat(a[t],'"]'))?(n.querySelector('select[name="'.concat(t,'"]')).value=a[t],e.hasAttribute("data-lock-fields")&&(n.querySelector('select[name="'.concat(t,'"]')).disabled=!0)):n.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]'))?(Array.from(n.querySelectorAll('input[name="'.concat(t,'"][type="radio"]'))).forEach(function(e){e.disabled=!0}),n.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]')).checked=!0,n.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]')).disabled=!1):n.querySelector('input[name="'.concat(t,'"]'))&&(n.querySelector('input[name="'.concat(t,'"]')).value=a[t],e.hasAttribute("data-lock-fields")&&n.querySelector('input[name="'.concat(t,'"]')).setAttribute("readonly","true"))})};document.addEventListener("DOMContentLoaded",()=>{return t=void 0,a=void 0,r=function*(){var t,a;window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Pageview",pageTitle:document.title}),document.addEventListener("click",e=>{var t=e.target.closest("[open] summary");if(t)window.dataLayer.push({event:"closeDetails",detailsTitle:t.textContent||""});else{var a=e.target.closest("summary"),n=e.target.closest("a"),r=e.target.closest("button");a&&window.dataLayer.push({event:"openDetails",detailsTitle:a.textContent||""}),n&&window.dataLayer.push({event:"linkClicked",linkText:n.hasAttribute("title")?n.getAttribute("title")||"":n.textContent||"",class:n.hasAttribute("class")&&n.getAttribute("class")||"",href:n.getAttribute("href")||""}),r&&window.dataLayer.push({event:"buttonClicked",buttonText:r.textContent||"",class:r.hasAttribute("class")&&r.getAttribute("class")||""})}}),document.addEventListener("change",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-change-events]")&&e(t.target,t.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("keyup",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-change-events]")&&e(t.target,t.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("click",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-click-events]")&&e(t.target,t.target.closest("[data-click-events]").getAttribute("data-click-events"))}),(a=document.body).classList.add("js-enabled"),(-1!==navigator.userAgent.indexOf("MSIE")||navigator.appVersion.indexOf("Trident/")>0)&&a.classList.add("ie"),t=function(e){var t=document.querySelector('label[for="'.concat(e.replace("#",""),'"]')),a=document.querySelector(e+" summary"),n=document.querySelector("dialog".concat(e)),r=document.querySelector("detail".concat(e));t instanceof HTMLElement?t.click():a instanceof HTMLElement?a.click():n instanceof HTMLElement?n.showModal():r instanceof HTMLElement&&r.addAttribute("open")},location.hash&&t(location.hash),window.addEventListener("hashchange",function(){t(location.hash)},!1),addEventListener("popstate",e=>{if(e&&e.state&&e.state.type&&"pagination"==e.state.type){var t=document.querySelector("#".concat(e.state.form)),a=document.querySelector("#".concat(e.state.form," [data-pagination]"));a?a.value=e.state.page:t.innerHTML+='<input name="page" type="hidden" data-pagination="true" value="'.concat(e.state.page,'" />'),t.dispatchEvent(new Event("submit"))}}),Array.from(document.querySelectorAll("form")).forEach(e=>{e?.closest("iam-form")||e.addEventListener("submit",t=>{var a;e.querySelector(":invalid")&&(e.classList.add("was-validated"),null===(a=e?.querySelector("input:invalid"))||void 0===a||a.scrollIntoView(),t.preventDefault())})}),document.addEventListener("click",e=>{var t;if(e&&e.target instanceof HTMLElement&&e.target.matches("form button:not([type=button])")){var a=e.target.closest("form");a?.closest("iam-form")||(Array.from(a.querySelectorAll("[data-password-type]")).forEach(e=>{e.setAttribute("type","password")}),(a.querySelector(":invalid")||a.querySelector('.pwd-checker[data-strength="1"]')||a.querySelector('.pwd-checker[data-strength="2"]'))&&(a.classList.add("was-validated"),null===(t=a?.querySelector("input:invalid"))||void 0===t||t.scrollIntoView(),e.preventDefault()),a.querySelector("iam-multiselect[data-is-required][data-error]")&&(a.classList.add("was-validated"),e.preventDefault()))}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&document.querySelector(".dialog--transactional[open], .dialog--acknowledgement[open]")&&(e.preventDefault(),e.stopPropagation())}),Array.from(document.querySelectorAll("label progress")).forEach(e=>{e.closest("label").setAttribute("data-percent",e.getAttribute("value"))})},new((n=void 0)||(n=Promise))(function(e,c){function o(e){try{l(r.next(e))}catch(e){c(e)}}function i(e){try{l(r.throw(e))}catch(e){c(e)}}function l(t){t.done?e(t.value):function(e){return e instanceof n?e:new n(function(t){t(e)})}(t.value).then(o,i)}l((r=r.apply(t,a||[])).next())});var t,a,n,r})});

package/assets/sass/_components.scss

@@ -6,8 +6,6 @@
 
 @use 'components/nav.preload';
 @use 'components/carousel.config';
-@use 'components/multiselect.preload';
-@use 'components/tag.preload';
 @use 'components/multi-step-modal.global';
 
 @use 'components/inline-edit.preload';

package/assets/sass/_elements.scss

@@ -27,3 +27,4 @@
 @use 'elements/progress.scss';
 @use 'elements/code';
 @use 'elements/highlight';
+@use 'elements/dropdown';

package/assets/sass/components/multiselect.preload.scss

@@ -1,63 +1,8 @@
 @use '../_func' as *;
 
-
-
-
-
 @layer components {
-  iam-multiselect .tag[slot='checked'] {
-    margin-bottom: 0.5rem;
-    order: var(--order, 1);
-    margin-inline: rem(3);
-
-    &:not(:has(i)):after {
-      content: '\2715';
-      margin-left: 0.6em;
-      font-weight: bold;
-    }
-  }
-
-  iam-multiselect .tag[slot='checked']:first-child:last-child {
-
-    margin-inline: 0;
-  }
-
-  iam-multiselect .tag:not([slot='checked']) {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    margin: 0;
-    text-align: left;
-    border-radius: 0;
-    padding-inline: 1rem;
-    outline: none;
-    padding-block: 0.5rem;
-
-    &:not(:hover, :focus, :active, :focus-within) {
-      background: none !important;
-    }
-
-    &::after {
-      display: none;
-    }
-  }
 
-  iam-multiselect:has(label:not([slot='checked']):not([slot='notmatched'])) {
-    --display-panel: block;
-  }
 
-  iam-multiselect:has(label[slot='checked']) {
-    --display-button: block;
-  }
 
-  @container style(--theme: dark) {
-    iam-multiselect :is(.tag, .badge):not([slot='checked']) {
-      color: var(--colour-heading);
-    }
-  }
 
-  iam-multiselect[data-single] .tag[slot='checked'],
-  iam-multiselect[data-single] .tag[slot='checked'] * {
-    pointer-events: none!important;
-  }
 }

package/assets/sass/components/multiselect.scss

@@ -5,6 +5,7 @@
 @use '../elements/admin-panel.scss' as *;
 @use '../elements/buttons.scss' as *;
 @use '../elements/buttons--action.scss' as *;
+@use '../elements/dropdown.scss' as *;
 
 @use '../utilities/visually-hidden' as *;
 @use '../utilities/display' as *;
@@ -15,227 +16,224 @@
   box-sizing: border-box;
 }
 
-:host {
+@layer components {
+  :host {
 
-  margin-bottom: 1.5rem;
-}
-
-.outer {
-  position: relative;
-  max-width: var(--input-max-width, 50rem);
-  display: block;
-}
-
-label {
-  margin-bottom: 0;
-  padding-bottom: 0.5rem;
-}
-
-.inner-label:empty {
-  display: none;
-}
-
-.wrapper {
-  max-width: var(--input-max-width, 50rem);
+    margin-bottom: 1.5rem;
+  }
 
-  &:after {
-    content: '';
+  .outer {
+    position: relative;
+    max-width: var(--input-max-width, 50rem);
     display: block;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    height: 1rem;
   }
 
-  input {
-    margin-bottom: 0.5rem;
+  label {
+    margin-bottom: 0;
+    padding-bottom: 0.5rem;
   }
 
-  .feedback {
-    position: absolute;
-    right: 0;
-    bottom: 100%;
-    padding: 0.85rem;
-    width: min-content;
-    white-space: nowrap;
-    margin-bottom: 0.5rem;
+  .inner-label:empty {
     display: none;
   }
 
-  &.was-validated .feedback {
-    display: block;
-  }
-}
+  .wrapper {
+    max-width: var(--input-max-width, 50rem);
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      height: 1rem;
+    }
 
-.wrapper {
+    input {
+      margin-bottom: 0.5rem;
+    }
 
-  input {
+    .feedback {
+      position: absolute;
+      right: 0;
+      bottom: 100%;
+      padding: 0.85rem;
+      width: min-content;
+      white-space: nowrap;
+      margin-bottom: 0.5rem;
+      display: none;
+    }
 
-    margin-top: unset;
-  }
-}
-.wrapper.filled {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
-  padding: 0.5rem 2rem 0 #{rem(13)};
-  font-size: var(--input-fs, 1rem);
-  line-height: var(--input-lh, 1.25rem);
-  color: var(--colour-body);
-  background-color: var(--colour-canvas-2);
-  border: 2px solid var(--colour-primary);
-  border-radius: 0.5rem;
-
-  &:is(:focus-within, .focus-within):not(:disabled) {
-    border-color: var(--colour-info);
-    outline: 0;
-    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-  }
-
-  input {
-    all: unset;
-    font-size: 1rem;
-    line-height: rem(26);
-    display: var(--search-display,inline-block);
-    width: 0;
-    flex-grow: 1;
-    padding: 0 0.5rem 0 0 !important;
-    margin-inline: rem(3);
-    order: 999;
-    margin-bottom: 0.5rem;
+    &.was-validated .feedback {
+      display: block;
+    }
   }
 
-  .feedback {
-    display: none !important;
-  }
+  .wrapper {
+
+    input {
 
-  &:is(:focus, .focus):not(:disabled) {
-    border-color: var(--colour-info);
-    outline: 0;
-    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+      margin-top: unset;
+    }
   }
-}
+  .wrapper.filled {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
+    padding: 0.5rem 2rem 0 #{rem(13)};
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-body);
+    background-color: var(--colour-canvas-2);
+    border: 2px solid var(--colour-primary);
+    border-radius: 0.5rem;
+
+    &:is(:focus-within, .focus-within):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
 
-button {
-  position: absolute;
-  right: 0.5rem;
-  border: none;
-  padding-inline: 0.5rem;
-  display: var(--display-button, none);
+    input {
+      all: unset;
+      font-size: 1rem;
+      line-height: rem(26);
+      display: var(--search-display,inline-block);
+      width: 0;
+      flex-grow: 1;
+      padding: 0 0.5rem 0 0 !important;
+      margin-inline: rem(3);
+      order: 999;
+      margin-bottom: 0.5rem;
+    }
 
-  &:after {
-    content: '\2715';
-    font-weight: bold;
-  }
-}
+    .feedback {
+      display: none !important;
+    }
 
-.dropdown {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  padding: 0;
-  left: 0;
-  width: 100%;
-  margin: 0;
-  z-index: 99;
-  display: none;
-  max-height: rem(244) !important;
-  overflow: auto;
-
-  &:before {
-    display: none;
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
   }
-}
 
-.wrapper:is(:focus-within) .dropdown {
-  display: var(--display-panel, none);
-}
+  button {
+    position: absolute;
+    right: 0.5rem;
+    border: none;
+    padding-inline: 0.5rem;
+    display: var(--display-button, none);
 
-@media (hover: hover) {
-  .wrapper .dropdown:hover {
-    display: var(--display-panel, none);
+    &:after {
+      content: '\2715';
+      font-weight: bold;
+    }
   }
-}
 
-@media (hover: none) {
-  :host(.hover) .wrapper .dropdown {
-    display: block;
+  .wrapper:is(:focus-within) .dropdown {
+    display: var(--display-panel, none);
   }
-}
 
-// Inline edit
-:host-context(:focus-within) {
-  input {
-    background-color: none !important;
+  @media (hover: hover) {
+    .wrapper .dropdown:hover {
+      display: var(--display-panel, none);
+    }
   }
-}
-:host-context(iam-inline-edit) {
-  display: block;
-  --display-btns: none;
 
-  label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
-  .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
-    background-color: var(--colour-light);
+  @media (hover: none) {
+    :host(.hover) .wrapper .dropdown {
+      display: block;
+    }
+  }
 
+  // Inline edit
+  :host-context(:focus-within) {
     input {
+      background-color: none !important;
+    }
+  }
+  :host-context(iam-inline-edit) {
+    display: block;
+    --display-btns: none;
+
+    label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
+    .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
       background-color: var(--colour-light);
+
+      input {
+        background-color: var(--colour-light);
+      }
+
+      .dropdown {
+        display: none;
+      }
     }
 
-    .dropdown {
-      display: none;
+    .wrapper {
+      margin-bottom: 0;
     }
-  }
 
-  .wrapper {
-    margin-bottom: 0;
+    .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
+      input {
+        border-color: transparent;
+        background: none;
+        margin-left: var(--input-ms,-1rem);
+        width: calc(100% + 1rem);
+        max-width: calc(100% + 1rem);
+        box-shadow: none;
+      }
+
+      .dropdown {
+        display: none;
+      }
+    }
+    .wrapper.filled:not(:focus-within):not([data-mousedown]) {
+      background: none;
+      border: none;
+      padding-left: 0;
+    }
   }
 
-  .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
-    input {
-      border-color: transparent;
-      background: none;
-      margin-left: var(--input-ms,-1rem);
-      width: calc(100% + 1rem);
-      max-width: calc(100% + 1rem);
-      box-shadow: none;
+  :host([data-single]){
+
+    .wrapper.filled{
+      
+      slot[name='checked'] {
+        pointer-events: none;
+      }
     }
 
-    .dropdown {
+    #clear {
+      display: none;
+    }
+    ::slotted([slot='checked'])::after {
       display: none;
     }
   }
-  .wrapper.filled:not(:focus-within):not([data-mousedown]) {
-    background: none;
-    border: none;
-    padding-left: 0;
-  }
-}
-
-:host([data-single]){
+  :host-context(td){
 
-  .wrapper.filled{
-    
-    slot[name='checked'] {
-      pointer-events: none;
-    }
+      input,
+      textarea,
+      select {
+        margin-left: 0!important;
+        width: 100%!important;
+        max-width: 100%!important;
+      }
   }
 
-  #clear {
-    display: none;
+  ::slotted([slot='checked']) {
+    margin-bottom: 0.5rem;
+    order: var(--order, 1);
+    margin-inline: rem(3);
   }
+
   ::slotted([slot='checked'])::after {
-    display: none;
+    content: '\2715';
+    margin-left: 0.6em;
+    font-weight: bold;
   }
-}
-:host-context(td){
-
-    input,
-    textarea,
-    select {
-      margin-left: 0!important;
-      width: 100%!important;
-      max-width: 100%!important;
-    }
 }