@crowdstrike/glide-core 0.6.0 → 0.6.2

package/dist/dropdown.js

@@ -1 +1 @@
-var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{svg}from"lit/static-html.js";import{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{GlideCoreDropdown_1=this}static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get size(){return this.#e}set size(e){if(this.#e=e,this.#t)for(const t of this.#t)t.privateSize=e}get multiple(){return this.#i}set multiple(e){const t=this.#i&&!e,i=!this.#i&&e;this.#i=e;for(const i of this.#l)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#o=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#o}set value(e){this.#o=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`."));for(const t of this.#l)t.selected=e.some((e=>e&&e===t.value))}get selectedOptions(){return this.#l.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#l.findLast((e=>e.selected))}get isAllSelected(){return this.#l.filter((({selected:e})=>e)).length===this.#l.length}get isSomeSelected(){return this.#l.some((({selected:e})=>e))}get activeOption(){return this.#t?.find((({privateActive:e})=>e))}get internalLabel(){return this.isFilterable||0!==this.selectedOptions.length?this.multiple||this.isFilterable||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}checkValidity(){return this.isCheckingValidity=!0,this.#s.checkValidity()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#n,{capture:!0})}createRenderRoot(){return this.#a=super.createRenderRoot(),this.#a}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r),document.removeEventListener("click",this.#n,{capture:!0})}firstUpdated(){owSlotType(this.#d.value,[GlideCoreDropdownOption,Text])}focus(){this.isFilterable?this.#p.value?.focus():this.#c.value?.focus()}get form(){return this.#s.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#s.setValidity({valueMissing:!0}," ",this.#p.value):this.#s.setValidity({}),this.#s.validity}get willValidate(){return this.#s.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#l){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#l.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#o=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#h}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#u}" @keydown="${this.#v}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#h,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#m}" @mousedown="${this.#f}"><span class="selected-option-labels" id="selected-option-labels">${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">${e},</span>`))} </span>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul aria-describedby="tag-overflow-text" class="tags" ${ref(this.#g)}>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t},i)=>html`<li class="${classMap({"tag-container":!0,hidden:i>this.#b-1})}" data-test="tag-container" data-test-hidden="${i>this.#b-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#w.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.isFilterable,(()=>html`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="selected-option-labels label" autocapitalize="off" autocomplete="off" class="${classMap({input:!0,selection:Boolean(this.selectedOptions.at(0)),single:!this.multiple})}" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":this.selectedOptions.at(-1)?.label??""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#y}" @keydown="${this.#E}" ${ref(this.#p)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))} ${when(this.selectedOptions.length>this.#b,(()=>html`<div aria-hidden="true" class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-this.#b} </span>more</div>`))} <button aria-hidden="${this.isFilterable}" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#c)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>svg`<svg aria-label="${this.#A.term("open")}" class="${classMap({"caret-icon":!0,disabled:this.disabled,readonly:this.readonly})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div><div aria-labelledby="${this.isFilterable?"input":"button"}" class="${classMap({options:!0,visible:this.open&&!this.disabled&&!this.isEveryOptionFilteredOut})}" data-test="options" data-test-visible="${this.open&&!this.disabled&&!this.isEveryOptionFilteredOut}" id="options" role="listbox" @focusin="${this.#O}" @mousedown="${this.#S}" @mouseover="${this.#C}"><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#A.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" @private-selected-change="${this.#R}" ${ref(this.#D)}></glide-core-dropdown-option><slot @private-selected-change="${this.#$}" @private-value-change="${this.#G}" @slotchange="${this.#_}" ${ref(this.#d)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#s.reportValidity()}constructor(){super(),this.disabled=!1,this.hideLabel=!1,this.open=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isCheckingValidity=!1,this.isEveryOptionFilteredOut=!1,this.isFilterable=!1,this.isFiltering=!1,this.isReportValidityOrSubmit=!1,this.#c=createRef(),this.#d=createRef(),this.#p=createRef(),this.#k=!1,this.#I=!1,this.#i=!1,this.#F=!1,this.#L=!1,this.#A=new LocalizeController(this),this.#D=createRef(),this.#e="large",this.#b=3,this.#g=createRef(),this.#o=[],this.#n=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?(this.open=!1,this.ariaActivedescendant=""):this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1,this.ariaActivedescendant="")},this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#s=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#c;#d;#p;#s;#k;#I;#i;#F;#L;#A;#D;#a;#e;#b;#g;#o;#n;#r;get#l(){return this.#d.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#t(){const e=this.#d.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#D.value)return[this.#D.value,...e]}get#x(){return this.#d.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#V(){const e=this.#d.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#D.value&&!this.#D.value.hidden&&e?[this.#D.value,...e]:e}#M(){if(this.#t)for(const e of this.#t)e.privateActive=!1}get#h(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#_(){if(owSlotType(this.#d.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#l.length>10,this.#t)for(const e of this.#t)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#V?.at(0);this.lastSelectedOption?(this.#M(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#M(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#D.value&&(this.#I=!0,this.#D.value.selected=this.isAllSelected,this.#D.value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.multiple?this.#o=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#o=[this.lastSelectedOption.value]),this.requestUpdate()}#u(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.shadowRoot?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#F&&(this.open=!1,this.ariaActivedescendant="")}#v(e){if(this.disabled||this.readonly)return;if("Escape"===e.key)return this.open=!1,this.ariaActivedescendant="",void this.focus();const t=e.target===this.#c.value||e.target===this.#p.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),this.open=!0,void(this.ariaActivedescendant=this.activeOption.id);if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.#L=!0,"Enter"===e.key)return void(this.activeOption.selected=!this.activeOption?.selected);if(" "===e.key&&!this.isFilterable)return void(this.activeOption.selected=!this.activeOption?.selected)}const t=this.#V?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#V&&"number"==typeof t){e.preventDefault();const i=this.#V.at(t-1);return void(i&&0!==t&&(this.#M(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#V&&"number"==typeof t){e.preventDefault();const i=this.#V.at(t+1);return void(i&&(this.#M(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#V){e.preventDefault();const t=this.#V.at(0);return void(t&&(this.#M(),t.privateActive=!0,this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#V){e.preventDefault();const t=this.#V.at(-1);return void(t&&(this.#M(),t.privateActive=!0,this.ariaActivedescendant=t.id))}}}}#m(e){this.disabled||this.readonly||(this.#F?this.#F=!1:e.target instanceof Node&&this.#c.value?.contains(e.target)&&!this.#L&&this.open?(this.open=!1,this.ariaActivedescendant=""):!this.open&&0!==e.detail&&this.activeOption&&(this.open=!0,this.ariaActivedescendant=this.activeOption.id))}#f(e){e.target instanceof GlideCoreTag||!this.isFilterable?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#y(){if(this.#p.value&&this.activeOption){this.open=!0,this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#p.value.value.trim();for(const e of this.#l)e.hidden=!e.label?.toLowerCase().includes(this.#p.value?.value.toLowerCase().trim());const e=this.#x?.at(0);e&&this.activeOption?.hidden&&(this.#M(),e.privateActive=!0,this.ariaActivedescendant=e.id),this.isEveryOptionFilteredOut=!this.#x||0===this.#x.length}}#E(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#b-1)).at(-1);t&&"Backspace"===e.key&&this.multiple&&this.#p.value&&0===this.#p.value.selectionStart&&(t.selected=!1)}#O(e){e.target instanceof GlideCoreDropdownOption&&(this.#M(),e.target.privateActive=!0)}#S(e){this.isFilterable&&e.preventDefault()}#C(e){if(e.target instanceof GlideCoreDropdownOption&&this.#V){this.#M(),e.target.privateActive=!0;for(const e of this.#V)e.privateActive&&(this.ariaActivedescendant=e.id)}}#$(e){if(this.#D.value&&e.target!==this.#D.value&&(this.#I=!0,this.#D.value.selected=this.isAllSelected,this.#D.value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.isFilterable&&this.#p.value){this.#p.value.value="",this.isFiltering=!1;for(const e of this.#l)e.hidden=!1}e.target instanceof GlideCoreDropdownOption&&(this.multiple?(this.#o=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#k||(this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))):!this.multiple&&e.target.selected&&(this.#o=e.target.value?[e.target.value]:[],this.open=!1,this.ariaActivedescendant="",this.focus(),this.isFilterable&&this.#p.value&&(this.isFiltering=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))),this.requestUpdate()}#G(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#o=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#o=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#o=e.target.value?[e.target.value]:[])}#R(){if(this.#I)return void(this.#I=!1);this.#k=!0;const e=this.isAllSelected;for(const t of this.#l)t.selected=!e;this.#k=!1,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}async#w(e){this.#F=!0;for(const t of this.#l)t.id===e&&(t.selected=!1,this.#o=this.value.filter((e=>e!==t.value)));const t=this.#g.value?.querySelectorAll("glide-core-tag");if(t&&this.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,t[i<t.length-1?i+1:i-1]?.focus()}else this.focus()}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isEveryOptionFilteredOut",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;
+var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{svg}from"lit/static-html.js";import{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{GlideCoreDropdown_1=this}static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get size(){return this.#e}set size(e){if(this.#e=e,this.#t)for(const t of this.#t)t.privateSize=e}get multiple(){return this.#i}set multiple(e){const t=this.#i&&!e,i=!this.#i&&e;this.#i=e;for(const i of this.#l)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#o=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#o}set value(e){this.#o=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`."));for(const t of this.#l)this.#s=!0,t.selected=e.some((e=>e&&e===t.value));this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}get selectedOptions(){return this.#l.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#l.findLast((e=>e.selected))}get isAllSelected(){return this.#l.filter((({selected:e})=>e)).length===this.#l.length}get isSomeSelected(){return this.#l.some((({selected:e})=>e))}get activeOption(){return this.#t?.find((({privateActive:e})=>e))}get internalLabel(){return this.isFilterable||0!==this.selectedOptions.length?this.multiple||this.isFilterable||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}checkValidity(){return this.isCheckingValidity=!0,this.#n.checkValidity()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#r=super.createRenderRoot(),this.#r}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#d),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){owSlotType(this.#c.value,[GlideCoreDropdownOption,Text])}focus(){this.isFilterable?this.#p.value?.focus():this.#h.value?.focus()}get form(){return this.#n.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#n.setValidity({valueMissing:!0}," ",this.#p.value):this.#n.setValidity({}),this.#n.validity}get willValidate(){return this.#n.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#d)}formResetCallback(){for(const e of this.#l){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#l.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#o=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#u}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#v}" @keydown="${this.#m}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#u,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#f}" @mousedown="${this.#g}"><span class="selected-option-labels" id="selected-option-labels">${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">${e},</span>`))} </span>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul aria-describedby="tag-overflow-text" class="tags" ${ref(this.#b)}>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t},i)=>html`<li class="${classMap({"tag-container":!0,hidden:i>this.#E-1})}" data-test="tag-container" data-test-hidden="${i>this.#E-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#w.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.isFilterable,(()=>html`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="selected-option-labels label" autocapitalize="off" autocomplete="off" class="${classMap({input:!0,selection:Boolean(this.selectedOptions.at(0)),single:!this.multiple})}" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":this.selectedOptions.at(-1)?.label??""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#y}" @keydown="${this.#O}" ${ref(this.#p)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))} ${when(this.selectedOptions.length>this.#E,(()=>html`<div aria-hidden="true" class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-this.#E} </span>more</div>`))} <button aria-hidden="${this.isFilterable}" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>svg`<svg aria-label="${this.#A.term("open")}" class="${classMap({"caret-icon":!0,disabled:this.disabled,readonly:this.readonly})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div><div aria-labelledby="${this.isFilterable?"input":"button"}" class="${classMap({options:!0,visible:this.open&&!this.disabled&&!this.isEveryOptionFilteredOut})}" data-test="options" data-test-visible="${this.open&&!this.disabled&&!this.isEveryOptionFilteredOut}" id="options" role="listbox" @focusin="${this.#S}" @mousedown="${this.#C}" @mouseover="${this.#R}"><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#A.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" @private-selected-change="${this.#D}" ${ref(this.#$)}></glide-core-dropdown-option><slot @private-selected-change="${this.#G}" @private-value-change="${this.#_}" @slotchange="${this.#k}" ${ref(this.#c)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#n.reportValidity()}constructor(){super(),this.disabled=!1,this.hideLabel=!1,this.open=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isCheckingValidity=!1,this.isEveryOptionFilteredOut=!1,this.isFilterable=!1,this.isFiltering=!1,this.isReportValidityOrSubmit=!1,this.#h=createRef(),this.#c=createRef(),this.#p=createRef(),this.#s=!1,this.#I=!1,this.#i=!1,this.#F=!1,this.#x=!1,this.#A=new LocalizeController(this),this.#$=createRef(),this.#e="large",this.#E=3,this.#b=createRef(),this.#o=[],this.#a=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?(this.open=!1,this.ariaActivedescendant=""):this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1,this.ariaActivedescendant="")},this.#d=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#n=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#h;#c;#p;#n;#s;#I;#i;#F;#x;#A;#$;#r;#e;#E;#b;#o;#a;#d;get#l(){return this.#c.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#t(){const e=this.#c.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#$.value)return[this.#$.value,...e]}get#V(){return this.#c.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#L(){const e=this.#c.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#$.value&&!this.#$.value.hidden&&e?[this.#$.value,...e]:e}#M(){if(this.#t)for(const e of this.#t)e.privateActive=!1}get#u(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#k(){if(owSlotType(this.#c.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#l.length>10,this.#t)for(const e of this.#t)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#L?.at(0);this.lastSelectedOption?(this.#M(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#M(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#$.value&&(this.#I=!0,this.#$.value.selected=this.isAllSelected,this.#$.value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.multiple?this.#o=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#o=[this.lastSelectedOption.value]),this.requestUpdate()}#v(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.shadowRoot?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#F&&(this.open=!1,this.ariaActivedescendant="")}#m(e){if(this.disabled||this.readonly)return;if("Escape"===e.key)return this.open=!1,this.ariaActivedescendant="",void this.focus();const t=e.target===this.#h.value||e.target===this.#p.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),this.open=!0,void(this.ariaActivedescendant=this.activeOption.id);if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.#x=!0,"Enter"===e.key)return void(this.activeOption.selected=!this.activeOption?.selected);if(" "===e.key&&!this.isFilterable)return void(this.activeOption.selected=!this.activeOption?.selected)}const t=this.#L?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#L&&"number"==typeof t){e.preventDefault();const i=this.#L.at(t-1);return void(i&&0!==t&&(this.#M(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#L&&"number"==typeof t){e.preventDefault();const i=this.#L.at(t+1);return void(i&&(this.#M(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#L){e.preventDefault();const t=this.#L.at(0);return void(t&&(this.#M(),t.privateActive=!0,this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#L){e.preventDefault();const t=this.#L.at(-1);return void(t&&(this.#M(),t.privateActive=!0,this.ariaActivedescendant=t.id))}}}}#f(e){this.disabled||this.readonly||(this.#F?this.#F=!1:e.target instanceof Node&&this.#h.value?.contains(e.target)&&!this.#x&&this.open?(this.open=!1,this.ariaActivedescendant=""):!this.open&&0!==e.detail&&this.activeOption&&(this.open=!0,this.ariaActivedescendant=this.activeOption.id))}#g(e){e.target instanceof GlideCoreTag||!this.isFilterable?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#y(){if(this.#p.value&&this.activeOption){this.open=!0,this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#p.value.value.trim();for(const e of this.#l)e.hidden=!e.label?.toLowerCase().includes(this.#p.value?.value.toLowerCase().trim());const e=this.#V?.at(0);e&&this.activeOption?.hidden&&(this.#M(),e.privateActive=!0,this.ariaActivedescendant=e.id),this.isEveryOptionFilteredOut=!this.#V||0===this.#V.length}}#O(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#E-1)).at(-1);t&&"Backspace"===e.key&&this.multiple&&this.#p.value&&0===this.#p.value.selectionStart&&(t.selected=!1)}#S(e){e.target instanceof GlideCoreDropdownOption&&(this.#M(),e.target.privateActive=!0)}#C(e){this.isFilterable&&e.preventDefault()}#R(e){if(e.target instanceof GlideCoreDropdownOption&&this.#L){this.#M(),e.target.privateActive=!0;for(const e of this.#L)e.privateActive&&(this.ariaActivedescendant=e.id)}}#G(e){if(this.#$.value&&e.target!==this.#$.value&&(this.#I=!0,this.#$.value.selected=this.isAllSelected,this.#$.value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.isFilterable&&this.#p.value){this.#p.value.value="",this.isFiltering=!1;for(const e of this.#l)e.hidden=!1}e.target instanceof GlideCoreDropdownOption&&(this.multiple?(this.#o=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#s||(this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))):!this.multiple&&e.target.selected&&(this.#o=e.target.value?[e.target.value]:[],this.open=!1,this.ariaActivedescendant="",this.focus(),this.isFilterable&&this.#p.value&&(this.isFiltering=!1),this.#s||(this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))))),this.requestUpdate()}#_(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#o=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#o=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#o=e.target.value?[e.target.value]:[])}#D(){if(this.#I)return void(this.#I=!1);this.#s=!0;const e=this.isAllSelected;for(const t of this.#l)t.selected=!e;this.#s=!1,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}async#w(e){this.#F=!0;for(const t of this.#l)t.id===e&&(t.selected=!1,this.#o=this.value.filter((e=>e!==t.value)));const t=this.#b.value?.querySelectorAll("glide-core-tag");if(t&&this.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,t[i<t.length-1?i+1:i-1]?.focus()}else this.focus()}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isEveryOptionFilteredOut",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;

package/dist/dropdown.option.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(s<3?l(r):s>3?l(t,i,r):l(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreCheckbox from"./checkbox.js";import checkedIcon from"./icons/checked.js";import styles from"./dropdown.option.styles.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.privateIndeterminate=!1,this.#e=createRef(),this.#t=createRef(),this.#i=window.crypto.randomUUID(),this.#o=!1,this.#l=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get selected(){return this.#o}set selected(e){if(this.#o=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#s)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.isMultiple?this.selected=!this.selected:this.selected||(this.selected=!0)}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role="option",this.tabIndex=-1}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#l}set value(e){const t=this.#l;this.#l=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:t}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,[this.privateSize]:!0})}" data-test="component" @click="${this.#r}" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-variant="minimal" value="${this.value}" internally-inert ?indeterminate="${this.privateIndeterminate}" @change="${this.#c}" ${ref(this.#e)}></glide-core-checkbox>`),(()=>html`<div class="${classMap({option:!0,[this.privateSize]:!0})}"><div class="${classMap({"checked-icon":!0,visible:this.selected})}">${checkedIcon}</div><slot name="icon"></slot>${this.label}</div>`))}</div>`}#e;#t;#i;#o;#l;get#s(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#c(){this.selected=!this.selected}#r(e){e.target!==this.#e.value&&(this.isMultiple||this.selected||(this.selected=!0))}};__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"label",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([property()],GlideCoreDropdownOption.prototype,"value",null),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(s<3?l(r):s>3?l(t,i,r):l(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import GlideCoreCheckbox from"./checkbox.js";import checkedIcon from"./icons/checked.js";import styles from"./dropdown.option.styles.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.privateIndeterminate=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o=!1,this.#l=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get selected(){return this.#o}set selected(e){if(this.#o=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#s)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.isMultiple?this.selected=!this.selected:this.selected||(this.selected=!0)}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role="option",this.tabIndex=-1}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#l}set value(e){const t=this.#l;this.#l=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:t}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,[this.privateSize]:!0})}" data-test="component" @click="${this.#r}" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-variant="minimal" value="${this.value}" internally-inert ?indeterminate="${this.privateIndeterminate}" @change="${this.#c}" ${ref(this.#e)}></glide-core-checkbox>`),(()=>html`<div class="${classMap({option:!0,[this.privateSize]:!0})}"><div class="${classMap({"checked-icon":!0,visible:this.selected})}">${checkedIcon}</div><slot name="icon"></slot>${this.label}</div>`))}</div>`}#e;#t;#i;#o;#l;get#s(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#c(){this.selected=!this.selected}#r(e){e.target!==this.#e.value&&(this.isMultiple||this.selected||(this.selected=!0))}};__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"label",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([property()],GlideCoreDropdownOption.prototype,"value",null),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;

package/dist/dropdown.test.events.multiple.js

@@ -62,6 +62,68 @@ it('dispatches one "input" event when Select All is clicked', async () => {
     await aTimeout(0);
     expect(spy.calledOnce).to.be.true;
 });
+it('dispatches one "change" event when `value` is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Three"
+        value="three"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('change', spy);
+    setTimeout(() => {
+        component.value = ['one', 'two'];
+    });
+    await aTimeout(0);
+    expect(spy.calledOnce).to.be.true;
+});
+it('dispatches one "input" event when `value` is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Three"
+        value="three"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    setTimeout(() => {
+        component.value = ['one', 'two'];
+    });
+    await aTimeout(0);
+    expect(spy.calledOnce).to.be.true;
+});
 it('dispatches a "change" event when an option is selected after Select All is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"

package/dist/dropdown.test.events.single.d.ts

@@ -0,0 +1 @@
+import './dropdown.option.js';

package/dist/dropdown.test.events.single.js

@@ -0,0 +1,47 @@
+import './dropdown.option.js';
+import * as sinon from 'sinon';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdown from './dropdown.js';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+it('dispatches one "change" event when `value` is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('change', spy);
+    setTimeout(() => {
+        component.value = ['one'];
+    });
+    await aTimeout(0);
+    expect(spy.calledOnce).to.be.true;
+});
+it('dispatches one "input" event when `value` is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    setTimeout(() => {
+        component.value = ['one'];
+    });
+    await aTimeout(0);
+    expect(spy.calledOnce).to.be.true;
+});

package/dist/menu.button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(s=(n<3?i(s):n>3?i(e,o,s):i(e,o))||s);return n>3&&s&&Object.defineProperty(e,o,s),s};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./menu.button.styles.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#t=window.crypto.randomUUID()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive})}" data-test="component" type="button"><slot name="icon"></slot>${this.label}</button>`}#t};__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button")],GlideCoreMenuButton);export default GlideCoreMenuButton;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var n,i=arguments.length,s=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(s=(i<3?n(s):i>3?n(e,o,s):n(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./menu.button.styles.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive})}" data-test="component" type="button"><slot name="icon"></slot>${this.label}</button>`}#t};__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button")],GlideCoreMenuButton);export default GlideCoreMenuButton;

package/dist/menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,i,o){var n,s=arguments.length,l=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(l=(s<3?n(l):s>3?n(e,i,l):n(e,i))||l);return s>3&&l&&Object.defineProperty(e,i,l),l};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset,platform}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{offsetParent}from"composed-offset-position";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.isTargetDisabled=!1,this.#t=createRef(),this.#e=createRef(),this.#i=!1,this.#o=!1,this.#n="large",this.#s=createRef(),this.#l=t=>{t.target&&this.contains(t.target)||(this.open=!1,this.#a&&(this.#a.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(t){this.#o=t,t&&!this.isTargetDisabled&&this.#a?(this.#r(),this.#a.ariaActivedescendant=this.#c?.id??""):this.#a&&(this.#p?.(),this.#a.ariaActivedescendant=""),this.#h&&(this.#h.ariaExpanded=t&&!this.isTargetDisabled?"true":"false")}get size(){return this.#n}set size(t){this.#n=t,this.#a&&(this.#a.privateSize=t)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#l,{capture:!0})}createRenderRoot(){return this.#d=super.createRenderRoot(),this.#d}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#l,{capture:!0})}firstUpdated(){owSlot(this.#e.value),owSlot(this.#s.value),owSlotType(this.#e.value,[GlideCoreMenuOptions]);const t=this.#m?.at(0);this.open&&t&&this.#a&&(this.#r(),t.privateActive=!0,this.#a.ariaActivedescendant=t.id)}focus(){this.#h&&"focus"in this.#h&&this.#h?.focus()}render(){return html`<div class="component" @focusout="${this.#f}" ${ref(this.#t)}><slot class="target-slot" name="target" @click="${this.#u}" @keydown="${this.#E}" @slotchange="${this.#g}" ${ref(this.#s)}></slot><slot class="${classMap({"default-slot":!0,visible:this.open&&!this.isTargetDisabled})}" @click="${this.#v}" @focusin="${this.#S}" @keydown="${this.#E}" @mouseover="${this.#y}" @slotchange="${this.#C}" ${ref(this.#e)}></slot></div>`}setContainingBlock(t){this.containingBlock=t}#p;#t;#e;#i;#o;#d;#n;#s;get#c(){return this.#m?.find((({privateActive:t})=>t))}get#a(){const t=this.#e.value?.assignedElements().at(0);return t||null}#l;#C(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuOptions]);const t=this.#m?.at(0);t&&(t.privateActive=!0),this.#a&&(this.#a.privateSize=this.size)}#v(){this.open=!1,this.#a&&(this.#a.ariaActivedescendant="")}#S(t){(t.target instanceof GlideCoreMenuButton||t.target instanceof GlideCoreMenuLink)&&this.#c&&this.#a&&(this.#c.privateActive=!1,t.target.privateActive=!0,this.#a.ariaActivedescendant=t.target.id)}#y(t){if(t.target instanceof GlideCoreMenuLink||t.target instanceof GlideCoreMenuButton){if(this.#m)for(const e of this.#m)e.privateActive=e===t.target;this.#a&&(this.#a.ariaActivedescendant=t.target.id)}}#f(t){const e=t.relatedTarget instanceof HTMLElement&&this.#d?.contains(t.relatedTarget),i=t.relatedTarget instanceof HTMLElement&&this.contains(t.relatedTarget);e||i||(this.open=!1)}#E(t){if([" ","Enter","Escape"].includes(t.key)&&this.open&&this.#a)return this.open=!1,this.#a.ariaActivedescendant="",this.focus(),void(this.#i=!0);if([" ","ArrowUp","ArrowDown"].includes(t.key)&&!this.open&&this.#c&&this.#a)return t.preventDefault(),this.open=!0,void(this.#a.ariaActivedescendant=this.#c.id);if(this.open&&this.#c&&this.#m){const e=this.#m.indexOf(this.#c);if("ArrowUp"===t.key&&!t.metaKey){t.preventDefault();const i=this.#m?.at(e-1);return void(i&&0!==e&&this.#a&&(this.#c.privateActive=!1,this.#a.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===t.key&&!t.metaKey&&this.#a){t.preventDefault();const i=this.#m?.at(e+1);return void(i&&(this.#c.privateActive=!1,this.#a.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===t.key&&t.metaKey||"Home"===t.key||"PageUp"===t.key){t.preventDefault();const e=this.#m?.at(0);return void(e&&this.#a&&(this.#c.privateActive=!1,this.#a.ariaActivedescendant=e.id,e.privateActive=!0))}if("ArrowDown"===t.key&&t.metaKey||"End"===t.key||"PageDown"===t.key){t.preventDefault();const e=this.#m?.at(-1);return void(e&&this.#a&&(this.#c.privateActive=!1,this.#a.ariaActivedescendant=e.id,e.privateActive=!0))}}}#g(){owSlot(this.#s.value);const t=this.#h&&"disabled"in this.#h&&this.#h.disabled,e=this.#h&&"true"===this.#h.ariaDisabled;this.isTargetDisabled=Boolean(t)||Boolean(e),this.#h&&this.#a&&(this.#h.ariaHasPopup="true",this.#h.ariaExpanded=this.open&&!this.isTargetDisabled?"true":"false",this.#h.id=window.crypto.randomUUID(),this.#h.setAttribute("aria-controls",this.#a.id),this.#a.ariaLabelledby=this.#h.id)}#u(){this.isTargetDisabled||this.#i?this.#i=!1:(this.#h instanceof HTMLElement&&(this.#h.ariaExpanded=this.open?"true":"false"),this.open=!this.open,this.open&&this.#c&&this.#a?this.#a.ariaActivedescendant=this.#c.id:!this.open&&this.#a&&(this.#a.ariaActivedescendant="",this.focus()))}get#m(){const t=this.#e.value?.assignedElements()?.at(0)?.children;if(t)return[...t].filter((t=>t instanceof GlideCoreMenuLink||t instanceof GlideCoreMenuButton))}#r(){this.#h&&this.#e.value&&(this.#p=autoUpdate(this.#h,this.#e.value,(()=>{(async()=>{if(this.#h&&this.#e.value){const{x:t,y:e,placement:i}=await computePosition(this.#h,this.#e.value,{platform:{...platform,getOffsetParent:t=>this.containingBlock??platform.getOffsetParent(t,offsetParent)},placement:this.placement,middleware:[offset({mainAxis:16*Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))}),flip()]});this.#e.value.dataset.placement=i,Object.assign(this.#e.value.style,{left:`${t}px`,top:`${e}px`})}})()})))}get#h(){return this.#s.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([state()],GlideCoreMenu.prototype,"containingBlock",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([state()],GlideCoreMenu.prototype,"isTargetDisabled",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;
+var __decorate=this&&this.__decorate||function(t,e,i,o){var n,s=arguments.length,a=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(a=(s<3?n(a):s>3?n(e,i,a):n(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset,platform}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{offsetParent}from"composed-offset-position";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.isTargetDisabled=!1,this.#t=createRef(),this.#e=createRef(),this.#i=!1,this.#o=!1,this.#n="large",this.#s=createRef(),this.#a=t=>{t.target&&t.target instanceof Node&&this.contains(t.target)||(this.open=!1,this.#l&&(this.#l.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(t){this.#o=t,t&&!this.isTargetDisabled&&this.#l?(this.#r(),this.#l.ariaActivedescendant=this.#c?.id??""):this.#l&&(this.#p?.(),this.#l.ariaActivedescendant=""),this.#d&&(this.#d.ariaExpanded=t&&!this.isTargetDisabled?"true":"false")}get size(){return this.#n}set size(t){this.#n=t,this.#l&&(this.#l.privateSize=t)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#h=super.createRenderRoot(),this.#h}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){owSlot(this.#e.value),owSlot(this.#s.value),owSlotType(this.#e.value,[GlideCoreMenuOptions]);const t=this.#m?.at(0);this.open&&t&&this.#l&&(this.#r(),t.privateActive=!0,this.#l.ariaActivedescendant=t.id)}focus(){this.#d&&"focus"in this.#d&&this.#d?.focus()}render(){return html`<div class="component" @focusout="${this.#f}" ${ref(this.#t)}><slot class="target-slot" name="target" @click="${this.#u}" @keydown="${this.#E}" @slotchange="${this.#g}" ${ref(this.#s)}></slot><slot class="${classMap({"default-slot":!0,visible:this.open&&!this.isTargetDisabled})}" @click="${this.#v}" @focusin="${this.#S}" @keydown="${this.#E}" @mouseover="${this.#y}" @slotchange="${this.#C}" ${ref(this.#e)}></slot></div>`}setContainingBlock(t){this.containingBlock=t}#p;#t;#e;#i;#o;#h;#n;#s;get#c(){return this.#m?.find((({privateActive:t})=>t))}get#l(){const t=this.#e.value?.assignedElements().at(0);return t||null}#a;#C(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuOptions]);const t=this.#m?.at(0);t&&(t.privateActive=!0),this.#l&&(this.#l.privateSize=this.size)}#v(){this.open=!1,this.#l&&(this.#l.ariaActivedescendant="")}#S(t){(t.target instanceof GlideCoreMenuButton||t.target instanceof GlideCoreMenuLink)&&this.#c&&this.#l&&(this.#c.privateActive=!1,t.target.privateActive=!0,this.#l.ariaActivedescendant=t.target.id)}#y(t){if(t.target instanceof GlideCoreMenuLink||t.target instanceof GlideCoreMenuButton){if(this.#m)for(const e of this.#m)e.privateActive=e===t.target;this.#l&&(this.#l.ariaActivedescendant=t.target.id)}}#f(t){const e=t.relatedTarget instanceof HTMLElement&&this.#h?.contains(t.relatedTarget),i=t.relatedTarget instanceof GlideCoreMenuOptions,o=t.relatedTarget instanceof GlideCoreMenuButton||t.relatedTarget instanceof GlideCoreMenuLink;e||i||o||(this.open=!1)}#E(t){if([" ","Enter","Escape"].includes(t.key)&&this.open&&this.#l)return this.open=!1,this.#l.ariaActivedescendant="",this.focus(),void(this.#i=!0);if([" ","ArrowUp","ArrowDown"].includes(t.key)&&!this.open&&this.#c&&this.#l)return t.preventDefault(),this.open=!0,void(this.#l.ariaActivedescendant=this.#c.id);if(this.open&&this.#c&&this.#m){const e=this.#m.indexOf(this.#c);if("ArrowUp"===t.key&&!t.metaKey){t.preventDefault();const i=this.#m?.at(e-1);return void(i&&0!==e&&this.#l&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===t.key&&!t.metaKey&&this.#l){t.preventDefault();const i=this.#m?.at(e+1);return void(i&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===t.key&&t.metaKey||"Home"===t.key||"PageUp"===t.key){t.preventDefault();const e=this.#m?.at(0);return void(e&&this.#l&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=e.id,e.privateActive=!0))}if("ArrowDown"===t.key&&t.metaKey||"End"===t.key||"PageDown"===t.key){t.preventDefault();const e=this.#m?.at(-1);return void(e&&this.#l&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=e.id,e.privateActive=!0))}}}#g(){owSlot(this.#s.value);const t=this.#d&&"disabled"in this.#d&&this.#d.disabled,e=this.#d&&"true"===this.#d.ariaDisabled;this.isTargetDisabled=Boolean(t)||Boolean(e),this.#d&&this.#l&&(this.#d.ariaHasPopup="true",this.#d.ariaExpanded=this.open&&!this.isTargetDisabled?"true":"false",this.#d.id=nanoid(),this.#d.setAttribute("aria-controls",this.#l.id),this.#l.ariaLabelledby=this.#d.id)}#u(){this.isTargetDisabled||this.#i?this.#i=!1:(this.#d instanceof HTMLElement&&(this.#d.ariaExpanded=this.open?"true":"false"),this.open=!this.open,this.open&&this.#c&&this.#l?this.#l.ariaActivedescendant=this.#c.id:!this.open&&this.#l&&(this.#l.ariaActivedescendant="",this.focus()))}get#m(){let t=this.#e.value?.assignedElements()?.at(0)?.children;const e=t?.[0];if(e instanceof HTMLSlotElement&&(t=e.assignedElements()),t)return[...t].filter((t=>t instanceof GlideCoreMenuLink||t instanceof GlideCoreMenuButton))}#r(){this.#d&&this.#e.value&&(this.#p=autoUpdate(this.#d,this.#e.value,(()=>{(async()=>{if(this.#d&&this.#e.value){const{x:t,y:e,placement:i}=await computePosition(this.#d,this.#e.value,{platform:{...platform,getOffsetParent:t=>this.containingBlock??platform.getOffsetParent(t,offsetParent)},placement:this.placement,middleware:[offset({mainAxis:16*Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))}),flip()]});this.#e.value.dataset.placement=i,Object.assign(this.#e.value.style,{left:`${t}px`,top:`${e}px`})}})()})))}get#d(){return this.#s.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([state()],GlideCoreMenu.prototype,"containingBlock",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([state()],GlideCoreMenu.prototype,"isTargetDisabled",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;

package/dist/menu.link.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=window.crypto.randomUUID()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive})}" data-test="component" href="${ifDefined(this.url)}"><slot name="icon"></slot>${this.label}</a>`}#e};__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,l=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,i,l):r(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive})}" data-test="component" href="${ifDefined(this.url)}"><slot name="icon"></slot>${this.label}</a>`}#e};__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;

package/dist/menu.options.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,n=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(n=(r<3?l(n):r>3?l(t,o,n):l(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.#e=createRef(),this.#t=window.crypto.randomUUID()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menu",this.tabIndex=-1}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text])}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></div>`}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text])}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([state()],GlideCoreMenuOptions.prototype,"privateSize",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options")],GlideCoreMenuOptions);export default GlideCoreMenuOptions;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,n=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(n=(r<3?l(n):r>3?l(t,o,n):l(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.#e=createRef(),this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menu",this.tabIndex=-1}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text])}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></div>`}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text])}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([state()],GlideCoreMenuOptions.prototype,"privateSize",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options")],GlideCoreMenuOptions);export default GlideCoreMenuOptions;

package/dist/menu.test.events.d.ts

@@ -0,0 +1,2 @@
+import './menu.link.js';
+import './menu.options.js';

package/dist/menu.test.events.js

@@ -0,0 +1,30 @@
+import './menu.link.js';
+import './menu.options.js';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import GlideCoreMenu from './menu.js';
+it('dispatches a "click" event when a link is clicked', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    setTimeout(() => document.querySelector('glide-core-menu-link')?.click());
+    const event = await oneEvent(component, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches a "click" event when a button is clicked', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Link"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    setTimeout(() => document.querySelector('glide-core-menu-button')?.click());
+    const event = await oneEvent(component, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+});

package/dist/menu.test.interactions.js

@@ -1,9 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import './menu.link.js';
 import './menu.options.js';
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreMenu from './menu.js';
+let GlideCoreNestedSlot = class GlideCoreNestedSlot extends LitElement {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
+    render() {
+        return html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <slot></slot>
+      </glide-core-menu-options>
+    </glide-core-menu>`;
+    }
+};
+GlideCoreNestedSlot = __decorate([
+    customElement('glide-core-nested-slot')
+], GlideCoreNestedSlot);
 GlideCoreMenu.shadowRootOptions.mode = 'open';
+GlideCoreNestedSlot.shadowRootOptions.mode = 'open';
 it('opens when clicked', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
@@ -387,6 +414,21 @@ it('activates a menu link on "mouseover"', async () => {
     expect(links[1].privateActive).to.be.true;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(links[1].id);
 });
+it('activates a menu link on "mouseover" when the link is in a nested slot', async () => {
+    const component = await fixture(html `
+    <glide-core-nested-slot>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-nested-slot>
+  `);
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.shadowRoot?.querySelector('glide-core-menu-options');
+    links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
+    expect(links[0].privateActive).to.be.false;
+    expect(links[1].privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[1].id);
+});
 it('activates a menu button on "mouseover"', async () => {
     const component = await fixture(html `
     <glide-core-menu open>
@@ -406,6 +448,21 @@ it('activates a menu button on "mouseover"', async () => {
     expect(buttons[1].privateActive).to.be.true;
     expect(options?.getAttribute('aria-activedescendant')).equal(buttons[1].id);
 });
+it('activates a menu button on "mouseover" when the button is in a nested slot', async () => {
+    const component = await fixture(html `
+    <glide-core-nested-slot>
+      <glide-core-menu-button label="One"></glide-core-menu-button>
+      <glide-core-menu-button label="Two"></glide-core-menu-button>
+    </glide-core-nested-slot>
+  `);
+    const links = component.querySelectorAll('glide-core-menu-button');
+    const options = component.shadowRoot?.querySelector('glide-core-menu-options');
+    links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
+    expect(links[0].privateActive).to.be.false;
+    expect(links[1].privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[1].id);
+});
 it('activates the next option on ArrowDown', async () => {
     const component = await fixture(html `
     <glide-core-menu>

package/dist/tree.item.menu.d.ts

@@ -2,6 +2,7 @@ import './icon-button.js';
 import './menu.js';
 import './menu.options.js';
 import { LitElement } from 'lit';
+import type { Placement } from '@floating-ui/dom';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tree-item-menu': GlideCoreTreeItemMenu;
@@ -17,6 +18,7 @@ export default class GlideCoreTreeItemMenu extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    placement: Placement;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     setContainingBlock(containingBlock: Element): void;

package/dist/tree.item.menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}setContainingBlock(e){this.#t.value.setContainingBlock(e)}#e=createRef();#t=createRef();#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var r,n=arguments.length,i=n<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var m=e.length-1;m>=0;m--)(r=e[m])&&(i=(n<3?r(i):n>3?r(t,o,i):r(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}setContainingBlock(e){this.#t.value.setContainingBlock(e)}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;

package/dist/tree.item.menu.test.basics.js

@@ -2,6 +2,7 @@ import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import GlideCoreTreeItemMenu from './tree.item.menu.js';
 import expectArgumentError from './library/expect-argument-error.js';
 import sinon from 'sinon';
+GlideCoreTreeItemMenu.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-tree-item-menu')).to.equal(GlideCoreTreeItemMenu);
 });
@@ -31,3 +32,19 @@ it('throws if the default slot is the incorrect type', async () => {
     await waitUntil(() => stub.calledTwice);
     stub.restore();
 });
+it('defaults the placement of the menu to bottom start', async () => {
+    const treeItemMenu = await fixture(html `
+    <glide-core-tree-item-menu>
+      <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
+    </glide-core-tree-item-menu>
+  `);
+    expect(treeItemMenu.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-start');
+});
+it('can set placement of the menu', async () => {
+    const treeItemMenu = await fixture(html `
+    <glide-core-tree-item-menu placement="bottom-end">
+      <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
+    </glide-core-tree-item-menu>
+  `);
+    expect(treeItemMenu.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-end');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -41,6 +41,7 @@
     "@floating-ui/dom": "^1.6.8",
     "@shoelace-style/localize": "^3.1.2",
     "composed-offset-position": "^0.0.6",
+    "nanoid": "^5.0.7",
     "ow": "^1.1.1"
   },
   "devDependencies": {