@tmorrow/cre8-wc 2.3.4 → 2.3.6

package/dist/assets/{multi-select.stories-CPMil75q.js → multi-select.stories-BsUU_ii5.js}

@@ -1,5 +1,5 @@
-import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spread-CEvCYGEM.js";import{o as k}from"./if-defined-CE1QkYoV.js";import{C as z,n as o}from"./cre8-element-C32P9iMC.js";import{r as x}from"./state-D1tm_mFF.js";import{n as v}from"./index.browser-BY9c7rfI.js";import"./remove-tag-BNsCfIXN.js";import"./field-note-VLKkFhY-.js";import"./button-CKAKDdnt.js";import"./checkbox-field-item-CMFG4Oj2.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-CRGiEUM0.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-C-cxFbUF.js";import"./loading-spinner-KSDrx_ka.js";const I=C`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as C,b as c,A as y}from"./iframe-B4bTcHfE.js";import{s as _}from"./spread-Bid2THYj.js";import{o as k}from"./if-defined-DA22R8ho.js";import{C as I,n as o}from"./cre8-element-C-P96xHp.js";import{r as x}from"./state-DNEXh1sp.js";import{n as v}from"./index.browser-BY9c7rfI.js";import"./remove-tag-BMrp6VdQ.js";import"./field-note-Bo9Uvf0_.js";import"./button-BYSQD8Gp.js";import"./checkbox-field-item-AzitqhZQ.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-JqBqZA-z.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-1YjfSY90.js";import"./loading-spinner-DKyQa4wk.js";const D=C`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -96,23 +96,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -120,23 +120,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -144,32 +144,32 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -177,23 +177,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -201,23 +201,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -225,23 +225,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -249,23 +249,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -273,23 +273,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -297,23 +297,23 @@ import{a as C,b as c,A as y}from"./iframe-BH5yZqve.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -329,7 +329,6 @@ body {
   font-size: var(--cre8-typography-body-default-font-size);
   font-weight: var(--cre8-typography-body-default-font-weight);
   line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
   display: flex;
@@ -337,7 +336,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -831,19 +830,19 @@ cre8-icon {
 .cre8-c-multi-select__field-note-success,
 .cre8-c-multi-select__field-note-error {
   flex-basis: 100%;
-}`;var D=Object.defineProperty,i=(s,e,r,l)=>{for(var a=void 0,d=s.length-1,n;d>=0;d--)(n=s[d])&&(a=n(e,r,a)||a);return a&&D(e,r,a),a};const $=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+}`;var $=Object.defineProperty,i=(s,e,t,l)=>{for(var a=void 0,d=s.length-1,n;d>=0;d--)(n=s[d])&&(a=n(e,t,a)||a);return a&&$(e,t,a),a};const S=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.7869 4.87827L8.51452 12.1506C8.44698 12.2182 8.36677 12.2719 8.27849 12.3085C8.1902 12.3451 8.09557 12.3639 8 12.3639C7.90443 12.3639 7.8098 12.3451 7.72151 12.3085C7.63323 12.2719 7.55302 12.2182 7.48548 12.1506L0.213121 4.87827C0.0766618 4.74181 0 4.55673 0 4.36375C0 4.17077 0.0766618 3.98569 0.213121 3.84923C0.34958 3.71277 0.534658 3.63611 0.72764 3.63611C0.920622 3.63611 1.1057 3.71277 1.24216 3.84923L8 10.608L14.7578 3.84923C14.8254 3.78166 14.9056 3.72806 14.9939 3.6915C15.0822 3.65493 15.1768 3.63611 15.2724 3.63611C15.3679 3.63611 15.4625 3.65493 15.5508 3.6915C15.6391 3.72806 15.7193 3.78166 15.7869 3.84923C15.8544 3.9168 15.908 3.99701 15.9446 4.08529C15.9812 4.17357 16 4.26819 16 4.36375C16 4.4593 15.9812 4.55392 15.9446 4.6422C15.908 4.73049 15.8544 4.8107 15.7869 4.87827Z"/>
 </svg>
-`,S=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+`,E=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.8969 5.97385L8.87 8L10.8969 10.0262C10.9541 10.0833 10.9995 10.1512 11.0304 10.2259C11.0613 10.3006 11.0773 10.3807 11.0773 10.4615C11.0773 10.5424 11.0613 10.6225 11.0304 10.6972C10.9995 10.7719 10.9541 10.8397 10.8969 10.8969C10.8397 10.9541 10.7719 10.9994 10.6972 11.0304C10.6225 11.0613 10.5424 11.0773 10.4615 11.0773C10.3807 11.0773 10.3006 11.0613 10.2259 11.0304C10.1512 10.9994 10.0833 10.9541 10.0262 10.8969L8 8.87L5.97385 10.8969C5.91667 10.9541 5.8488 10.9994 5.77409 11.0304C5.69939 11.0613 5.61932 11.0773 5.53846 11.0773C5.45761 11.0773 5.37754 11.0613 5.30283 11.0304C5.22813 10.9994 5.16025 10.9541 5.10308 10.8969C5.0459 10.8397 5.00055 10.7719 4.96961 10.6972C4.93866 10.6225 4.92274 10.5424 4.92274 10.4615C4.92274 10.3807 4.93866 10.3006 4.96961 10.2259C5.00055 10.1512 5.0459 10.0833 5.10308 10.0262L7.13 8L5.10308 5.97385C4.98761 5.85837 4.92274 5.70176 4.92274 5.53846C4.92274 5.37516 4.98761 5.21855 5.10308 5.10308C5.21855 4.9876 5.37516 4.92273 5.53846 4.92273C5.70176 4.92273 5.85838 4.9876 5.97385 5.10308L8 7.13L10.0262 5.10308C10.0833 5.0459 10.1512 5.00055 10.2259 4.9696C10.3006 4.93866 10.3807 4.92273 10.4615 4.92273C10.5424 4.92273 10.6225 4.93866 10.6972 4.9696C10.7719 5.00055 10.8397 5.0459 10.8969 5.10308C10.9541 5.16025 10.9995 5.22813 11.0304 5.30283C11.0613 5.37753 11.0773 5.4576 11.0773 5.53846C11.0773 5.61932 11.0613 5.69939 11.0304 5.77409C10.9995 5.84879 10.9541 5.91667 10.8969 5.97385ZM16 8C16 9.58225 15.5308 11.129 14.6518 12.4446C13.7727 13.7602 12.5233 14.7855 11.0615 15.391C9.59966 15.9965 7.99113 16.155 6.43928 15.8463C4.88743 15.5376 3.46197 14.7757 2.34315 13.6569C1.22433 12.538 0.462403 11.1126 0.153721 9.56072C-0.15496 8.00887 0.00346628 6.40034 0.608967 4.93853C1.21447 3.47672 2.23985 2.22729 3.55544 1.34824C4.87103 0.469192 6.41775 0 8 0C10.121 0.00223986 12.1546 0.845814 13.6544 2.34562C15.1542 3.84542 15.9978 5.87895 16 8ZM14.7692 8C14.7692 6.66117 14.3722 5.35241 13.6284 4.23922C12.8846 3.12602 11.8274 2.25839 10.5905 1.74605C9.35356 1.2337 7.99249 1.09965 6.67939 1.36084C5.36629 1.62203 4.16013 2.26674 3.21343 3.21343C2.26674 4.16012 1.62203 5.36629 1.36084 6.67939C1.09965 7.99249 1.2337 9.35356 1.74605 10.5905C2.2584 11.8274 3.12603 12.8846 4.23922 13.6284C5.35241 14.3722 6.66117 14.7692 8 14.7692C9.79469 14.7672 11.5153 14.0534 12.7843 12.7843C14.0534 11.5153 14.7672 9.79468 14.7692 8Z"/>
 </svg>
-`,w=class w extends z{constructor(){super(),this.items=[],this.selectedTagItems=[],this.dropdownOpen=!1,this._handleOnClick=this._handleOnClick.bind(this)}firstUpdated(){this.preselectedItems&&this.setPreselectedItemsinDropdown(),this.selectedTagItems=this.preselectedItems||[],this._initializeAria()}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleOnClick,!1)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this._handleOnClick,!1)}_renderDropdownItems(){return this.items.map((e,r)=>c`<li
-        @click="${l=>this._handleListItemClick(l,r)}"
+`,w=class w extends I{constructor(){super(),this.items=[],this.selectedTagItems=[],this.dropdownOpen=!1,this._handleOnClick=this._handleOnClick.bind(this)}firstUpdated(){this.preselectedItems&&this.setPreselectedItemsinDropdown(),this.selectedTagItems=this.preselectedItems||[],this._initializeAria()}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleOnClick,!1)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this._handleOnClick,!1)}_renderDropdownItems(){return this.items.map((e,t)=>c`<li
+        @click="${l=>this._handleListItemClick(l,t)}"
       >
         <cre8-checkbox-field-item
           .checked="${!!this.selectedTagItems.includes(e)}"
           label=${e}
-          id=${r}
+          id=${t}
           @input="${l=>this._handleDropdownItemInput(e,l)}"
         >
         </cre8-checkbox-field-item>
@@ -855,7 +854,7 @@ cre8-icon {
           ?disabled="${this.disabled}"
           @remove-tag-click="${()=>this._handleRemoveTagClick(e)}"
         ></cre8-remove-tag>
-      </li>`):y}setPreselectedItemsinDropdown(){this.preselectedItems.forEach(e=>{this.selectedTagItems=this.selectedTagItems.concat(e)})}clearAllTags(){this.disabled||(this.dropdownOpen&&this.selectedTagItems.forEach(e=>{this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click()}),this.selectedTagItems=[],this.emitSelectedItems())}emitSelectedItems(){const e=new CustomEvent("multi-select-change",{detail:{selectedItems:this.selectedTagItems},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}toggleDropDown(){this.dropdownOpen=!this.dropdownOpen}_handleOnClick(e){if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");const r=e.composedPath().includes(this.shadowRoot.host),l=this.renderRoot.querySelector(".cre8-c-multi-select__label"),a=this.renderRoot.querySelector(".cre8-c-multi-select__icons-wrapper"),d=this.shadowRoot?.querySelector(".cre8-c-multi-select__tag-wrapper"),n=this.shadowRoot?.querySelector(".cre8-c-multi-select__dropdown");r?!e.composedPath().includes(l)&&!e.composedPath().includes(d)&&!e.composedPath().includes(a)&&!e.composedPath().includes(n)&&!this.disabled&&this.toggleDropDown():this.dropdownOpen=!1}_handleListItemClick(e,r){e.target!==this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`)&&this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`).shadowRoot?.querySelector("input").click()}_handleDropdownItemInput(e,r){r.target.checked?this.selectedTagItems=this.selectedTagItems.concat(e):this.selectedTagItems=this.selectedTagItems.filter(a=>a!==e),this.emitSelectedItems()}async _handleRemoveTagClick(e){this.disabled||(this.selectedTagItems=this.selectedTagItems.filter(r=>r!==e),this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click(),await this.updateComplete,this.emitSelectedItems())}dropdownArrowClick(){this.disabled||this.toggleDropDown()}_handleButtonToListKeydown(e){e.code==="Escape"&&(e.preventDefault(),this.toggleDropDown())}_handleListKeydown(e){e.code==="Escape"&&(e.preventDefault(),this.toggleDropDown())}_initializeAria(){this.fieldId=this.fieldId||v(),(this.fieldNote||this.slotNotEmpty("fieldNote"))&&(this.ariaDescribedBy=this.ariaDescribedBy||v()),(this.successNote||this.errorNote)&&(this.validationAriaDescribedBy=this.validationAriaDescribedBy||v())}_fieldNoteAria(){return this.validationAriaDescribedBy&&this.ariaDescribedBy?`${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`:this.validationAriaDescribedBy&&!this.ariaDescribedBy?this.validationAriaDescribedBy:this.ariaDescribedBy}_renderSuccessErrorFieldNote(){return this.successNote?c` <cre8-field-note
+      </li>`):y}setPreselectedItemsinDropdown(){this.preselectedItems.forEach(e=>{this.selectedTagItems=this.selectedTagItems.concat(e)})}clearAllTags(){this.disabled||(this.dropdownOpen&&this.selectedTagItems.forEach(e=>{this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click()}),this.selectedTagItems=[],this.emitSelectedItems())}emitSelectedItems(){const e=new CustomEvent("multi-select-change",{detail:{selectedItems:this.selectedTagItems},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}toggleDropDown(){this.dropdownOpen=!this.dropdownOpen}_handleOnClick(e){if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");const t=e.composedPath().includes(this.shadowRoot.host),l=this.renderRoot.querySelector(".cre8-c-multi-select__label"),a=this.renderRoot.querySelector(".cre8-c-multi-select__icons-wrapper"),d=this.shadowRoot?.querySelector(".cre8-c-multi-select__tag-wrapper"),n=this.shadowRoot?.querySelector(".cre8-c-multi-select__dropdown");t?!e.composedPath().includes(l)&&!e.composedPath().includes(d)&&!e.composedPath().includes(a)&&!e.composedPath().includes(n)&&!this.disabled&&this.toggleDropDown():this.dropdownOpen=!1}_handleListItemClick(e,t){e.target!==this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${t}"]`)&&this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${t}"]`).shadowRoot?.querySelector("input").click()}_handleDropdownItemInput(e,t){t.target.checked?this.selectedTagItems=this.selectedTagItems.concat(e):this.selectedTagItems=this.selectedTagItems.filter(a=>a!==e),this.emitSelectedItems()}async _handleRemoveTagClick(e){this.disabled||(this.selectedTagItems=this.selectedTagItems.filter(t=>t!==e),this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click(),await this.updateComplete,this.emitSelectedItems())}dropdownArrowClick(){this.disabled||this.toggleDropDown()}_handleButtonToListKeydown(e){e.code==="Escape"&&(e.preventDefault(),this.toggleDropDown())}_handleListKeydown(e){e.code==="Escape"&&(e.preventDefault(),this.toggleDropDown())}_initializeAria(){this.fieldId=this.fieldId||v(),(this.fieldNote||this.slotNotEmpty("fieldNote"))&&(this.ariaDescribedBy=this.ariaDescribedBy||v()),(this.successNote||this.errorNote)&&(this.validationAriaDescribedBy=this.validationAriaDescribedBy||v())}_fieldNoteAria(){return this.validationAriaDescribedBy&&this.ariaDescribedBy?`${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`:this.validationAriaDescribedBy&&!this.ariaDescribedBy?this.validationAriaDescribedBy:this.ariaDescribedBy}_renderSuccessErrorFieldNote(){return this.successNote?c` <cre8-field-note
         ?isSuccess=${this.isSuccess}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-multi-select__field-note-success"
@@ -889,7 +888,7 @@ cre8-icon {
           <div class="cre8-c-multi-select__icons-wrapper">
             <cre8-button
               ?hideText=${!0}
-              svg="${S}"
+              svg="${E}"
               text="Clear All"
               variant="tertiary"
               ?disabled="${this.disabled}"
@@ -899,7 +898,7 @@ cre8-icon {
             </cre8-button>
             <cre8-button
               hideText
-              svg=${$}
+              svg=${S}
               variant="tertiary"
               ?disabled="${this.disabled}"
               class="cre8-c-multi-select__down_icon"
@@ -928,7 +927,7 @@ cre8-icon {
             <slot name="fieldNote">${this.fieldNote}</slot>
           </cre8-field-note>`:y}
       ${this._renderSuccessErrorFieldNote()}
-    `}};w.styles=[I];let t=w;i([o({type:Array})],t.prototype,"items");i([x()],t.prototype,"selectedTagItems");i([o({type:Array})],t.prototype,"preselectedItems");i([x()],t.prototype,"dropdownOpen");i([o()],t.prototype,"label");i([o()],t.prototype,"fieldId");i([o()],t.prototype,"fieldNote");i([o()],t.prototype,"ariaDescribedBy");i([o()],t.prototype,"validationAriaDescribedBy");i([o({type:Boolean,reflect:!0})],t.prototype,"disabled");i([o({type:Boolean,reflect:!0})],t.prototype,"isError");i([o()],t.prototype,"errorNote");i([o({type:Boolean,reflect:!0})],t.prototype,"isSuccess");i([o()],t.prototype,"successNote");customElements.get("cre8-multi-select")===void 0&&customElements.define("cre8-multi-select",t);const M={title:"In Development/MultiSelect",component:"cre8-multi-select",render:s=>c`<cre8-multi-select
+    `}};w.styles=[D];let r=w;i([o({type:Array})],r.prototype,"items");i([x()],r.prototype,"selectedTagItems");i([o({type:Array})],r.prototype,"preselectedItems");i([x()],r.prototype,"dropdownOpen");i([o()],r.prototype,"label");i([o()],r.prototype,"fieldId");i([o()],r.prototype,"fieldNote");i([o()],r.prototype,"ariaDescribedBy");i([o()],r.prototype,"validationAriaDescribedBy");i([o({type:Boolean,reflect:!0})],r.prototype,"disabled");i([o({type:Boolean,reflect:!0})],r.prototype,"isError");i([o()],r.prototype,"errorNote");i([o({type:Boolean,reflect:!0})],r.prototype,"isSuccess");i([o()],r.prototype,"successNote");customElements.get("cre8-multi-select")===void 0&&customElements.define("cre8-multi-select",r);const M={title:"In Development/MultiSelect",component:"cre8-multi-select",render:s=>c`<cre8-multi-select
       ${_(s)}
       .items=${s.items}
       .preselectedItems=${s.preselectedItems}