@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/drawer.test.events.js

@@ -6,28 +6,17 @@ import GlideCoreDrawer from './drawer.js';
 GlideCoreDrawer.shadowRootOptions.mode = 'open';
 // NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
 // to manually dispatch the `transitionend` event in tests.
-it('dispatches an "open" event when opened via the "open" method', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    const openEvent = oneEvent(drawer, 'open');
-    drawer.open();
-    drawer.shadowRoot
-        ?.querySelector('aside')
-        ?.dispatchEvent(new TransitionEvent('transitionend'));
-    await elementUpdated(drawer);
-    const event = await openEvent;
-    expect(event instanceof Event).to.be.true;
-});
 it('dispatches a "close" event when the "Escape" key is pressed', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    const closeEvent = oneEvent(drawer, 'close');
-    drawer.open();
-    drawer.shadowRoot
+    const component = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    const closeEvent = oneEvent(component, 'close');
+    component.show();
+    component.shadowRoot
         ?.querySelector('aside')
         ?.dispatchEvent(new TransitionEvent('transitionend'));
-    await elementUpdated(drawer);
+    await elementUpdated(component);
     await sendKeys({ press: 'Escape' });
     setTimeout(() => {
-        drawer.shadowRoot
+        component.shadowRoot
             ?.querySelector('aside')
             ?.dispatchEvent(new TransitionEvent('transitionend'));
     });
@@ -35,16 +24,16 @@ it('dispatches a "close" event when the "Escape" key is pressed', async () => {
     expect(event instanceof Event).to.be.true;
 });
 it('dispatches a "close" event when closed via the "close" method', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    const closeEvent = oneEvent(drawer, 'close');
-    drawer.open();
-    drawer.shadowRoot
+    const component = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    const closeEvent = oneEvent(component, 'close');
+    component.show();
+    component.shadowRoot
         ?.querySelector('aside')
         ?.dispatchEvent(new TransitionEvent('transitionend'));
-    await elementUpdated(drawer);
-    drawer.close();
+    await elementUpdated(component);
+    component.close();
     setTimeout(() => {
-        drawer.shadowRoot
+        component.shadowRoot
             ?.querySelector('aside')
             ?.dispatchEvent(new TransitionEvent('transitionend'));
     });

package/dist/drawer.test.methods.js

@@ -5,31 +5,31 @@ import GlideCoreDrawer from './drawer.js';
 GlideCoreDrawer.shadowRootOptions.mode = 'open';
 // NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
 // to manually dispatch the `transitionend` event in tests.
-it('opens the drawer via the "open()" method and closes it via "close()"', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    drawer.open();
-    await elementUpdated(drawer);
-    drawer.shadowRoot
+it('opens the drawer via the "show()" method and closes it via "close()"', async () => {
+    const component = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    component.show();
+    await elementUpdated(component);
+    component.shadowRoot
         ?.querySelector('aside')
         ?.dispatchEvent(new TransitionEvent('transitionend'));
-    expect(drawer.shadowRoot?.querySelector('aside[data-test-state="open"]')).to
-        .be.not.null;
-    drawer.close();
-    drawer.shadowRoot
+    expect(component.shadowRoot?.querySelector('aside[data-test-state="open"]'))
+        .to.be.not.null;
+    component.close();
+    component.shadowRoot
         ?.querySelector('aside')
         ?.dispatchEvent(new TransitionEvent('transitionend'));
-    await elementUpdated(drawer);
-    expect(drawer.shadowRoot?.querySelector('aside[data-test-state="closed"]')).to
-        .be.not.null;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('aside[data-test-state="closed"]'))
+        .to.be.not.null;
 });
-it('remains open if "open()" is called an additional time after it is already opened', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    drawer.open();
-    await elementUpdated(drawer);
-    expect(drawer.shadowRoot?.querySelector('aside[data-test-state="open"]')).to
-        .be.not.null;
-    drawer.open();
-    await elementUpdated(drawer);
-    expect(drawer.shadowRoot?.querySelector('aside[data-test-state="open"]')).to
-        .be.not.null;
+it('remains open if "show()" is called an additional time after it is already opened', async () => {
+    const component = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    component.show();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('aside[data-test-state="open"]'))
+        .to.be.not.null;
+    component.show();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('aside[data-test-state="open"]'))
+        .to.be.not.null;
 });

package/dist/dropdown.d.ts

@@ -9,15 +9,14 @@ declare global {
     }
 }
 /**
- * @description A dropdown with optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
- *
  * @event change - `(event: Event) => void`
  * @event input - `(event: Event) => void`
  * @event invalid - `(event: Event) => void`
  *
  * @slot - One or more of `<glide-core-dropdown-option>`.
- * @slot tooltip - Content for the tooltip.
  * @slot description - Additional information or context.
+ * @slot icon:<value> - Icons for the selected option or options. Slot one icon per option. `<value>` should be equal to the `value` of each option.
+ * @slot tooltip - Content for the tooltip.
  */
 export default class GlideCoreDropdown extends LitElement {
     #private;
@@ -26,10 +25,11 @@ export default class GlideCoreDropdown extends LitElement {
     static styles: import("lit").CSSResult[];
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
-    filterable: boolean;
+    get filterable(): boolean;
+    set filterable(isFilterable: boolean);
     hideLabel: boolean;
     label?: string;
-    name?: string;
+    name: string;
     get open(): boolean;
     set open(isOpen: boolean);
     orientation: 'horizontal' | 'vertical';
@@ -73,4 +73,6 @@ export default class GlideCoreDropdown extends LitElement {
     private isFiltering;
     private isOptionsHidden;
     private isReportValidityOrSubmit;
+    private isShowSingleSelectIcon;
+    private tagOverflowLimit;
 }

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"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{autoUpdate,computePosition,flip,offset}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{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.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 disabled(){return this.#e}set disabled(e){this.#e=e,this.open&&e?this.#t():this.open&&this.#i()}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#i():!this.multiple&&this.#o.value&&this.selectedOptions.length>0?(this.#o.value.value=this.selectedOptions[0].label,this.isFiltering=!1,this.#t()):this.#t()}get size(){return this.#s}set size(e){if(this.#s=e,this.#n)for(const t of this.#n)t.privateSize=e}get multiple(){return this.#a}set multiple(e){const t=this.#a&&!e,i=!this.#a&&e;this.#a=e;for(const i of this.#r)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#d=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#d}set value(e){this.#d=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.#r)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#n?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#p.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?(this.#o.value.click(),this.#o.value.select()):this.#h.value?.click()}get selectedOptions(){return this.#r.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#r.findLast((e=>e.selected))}get isAllSelected(){return this.#r.filter((({selected:e})=>e)).length===this.#r.length}get isSomeSelected(){return this.#r.some((({selected:e})=>e))}get internalLabel(){const e=this.filterable||this.isFilterable;return e||0!==this.selectedOptions.length?this.multiple||e||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:html`<span class="${classMap({placeholder:!0,disabled:this.disabled,quiet:"quiet"===this.variant})}">${this.placeholder}</span>`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#u=super.createRenderRoot(),this.#u}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#f),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.#v.value&&(this.#v.value.popover="manual"),this.open&&!this.disabled&&this.#i()}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#h.value?.focus(e)}get form(){return this.#p.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#p.setValidity({valueMissing:!0}," ",this.#o.value):this.#p.setValidity({}),this.#p.validity}get willValidate(){return this.#p.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#f)}formResetCallback(){for(const e of this.#r){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#r.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#d=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})}" @blur="${this.#g}"><glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#b}" ?hide="${this.hideLabel}" ?required="${this.required}" @blur="${this.#g}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#w}" @keydown="${this.#E}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#b,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#y}" @mousedown="${this.#O}" ${ref(this.#R)}><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.#A)}>${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.#C-1})}" data-test="tag-container" data-test-hidden="${i>this.#C-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#S.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.filterable||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="input" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#D}" @keydown="${this.#$}" ${ref(this.#o)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))}<div class="tag-overflow-text-and-button">${when(this.selectedOptions.length>this.#C,(()=>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.#C} </span>more</div>`))} <button aria-expanded="${this.open}" aria-haspopup="listbox" aria-hidden="${this.filterable||this.isFilterable}" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.filterable||this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>html`<svg aria-label="${this.#k.term("open")}" 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><div aria-labelledby="${this.filterable||this.isFilterable?"input":"button"}" class="${classMap({options:!0,hidden:this.isOptionsHidden})}" data-test="options" id="options" role="listbox" @click="${this.#G}" @input="${this.#_}" @focusin="${this.#F}" @mousedown="${this.#I}" @mouseover="${this.#V}" @private-selected-change="${this.#L}" @private-value-change="${this.#x}" ${ref(this.#v)}><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#k.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" ?private-indeterminate="${this.isSomeSelected&&!this.isAllSelected}" ${ref(this.#N)}></glide-core-dropdown-option><slot @slotchange="${this.#j}" ${ref(this.#m)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#p.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.filterable=!1,this.hideLabel=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isFilterable=!1,this.isFiltering=!1,this.isOptionsHidden=!1,this.isReportValidityOrSubmit=!1,this.#h=createRef(),this.#m=createRef(),this.#R=createRef(),this.#o=createRef(),this.#e=!1,this.#a=!1,this.#l=!1,this.#H=!1,this.#M=!1,this.#z=!1,this.#k=new LocalizeController(this),this.#v=createRef(),this.#N=createRef(),this.#s="large",this.#C=3,this.#A=createRef(),this.#d=[],this.#c=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?this.open=!1:this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1)},this.#f=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#p=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#h;#B;#m;#R;#o;#p;#e;#a;#l;#H;#M;#z;#k;#v;#N;#u;#s;#C;#A;#d;#c;#f;#T(){if(this.#n)for(const e of this.#n)e.privateActive=!1}#t(){this.#B?.(),this.#v.value?.hidePopover(),this.ariaActivedescendant=""}get#r(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#n(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#N.value)return[this.#N.value,...e]}get#U(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#q(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#N.value&&!this.#N.value.hidden&&e?[this.#N.value,...e]:e}get#b(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#g(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#j(){if(owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#r.length>10,this.#n)for(const e of this.#n)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#q?.at(0);this.lastSelectedOption?(this.#T(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#T(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#N.value&&(this.#N.value.selected=this.isAllSelected),this.multiple?this.#d=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#d=[this.lastSelectedOption.value]),this.requestUpdate(),this.updateComplete.then((()=>{!this.multiple&&this.#o.value&&this.lastSelectedOption?.value&&(this.#o.value.value=this.lastSelectedOption.label)}))}#w(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#u?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#H&&(this.open=!1),this.#g()}#E(e){if(this.disabled||this.readonly)return;if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if("Escape"===e.key)return this.open=!1,void this.focus();const t=e.target===this.#h.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),void(this.open=!0);if(this.activeOption&&this.open){if(("Enter"===e.key||" "===e.key)&&(this.#z=!0,"Enter"===e.key||" "===e.key&&!this.filterable&&!this.isFilterable))return e.preventDefault(),this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#N.value&&this.#P(),this.#K(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}));const t=this.#q?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t-1);return void(i&&0!==t&&(this.#T(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t+1);return void(i&&(this.#T(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(0);return void(t&&(this.#T(),t.privateActive=!0,t.scrollIntoView({block:"end"}),this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(-1);return void(t&&(this.#T(),t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id))}}}}#y(e){this.disabled||this.readonly||(this.#H?this.#H=!1:e.target instanceof Node&&this.#h.value?.contains(e.target)&&!this.#z&&this.open?this.open=!1:0!==e.detail&&(this.open=!0,this.#o.value?.select()))}#O(e){const t=this.filterable||this.isFilterable;e.target instanceof GlideCoreTag||!t?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#D(e){if(ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.activeOption){this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#o.value.value.trim();for(const e of this.#r)e.hidden=!e.label?.toLowerCase().includes(this.#o.value?.value.toLowerCase().trim());const e=this.#U?.at(0);e&&this.activeOption?.hidden&&(this.#T(),e.privateActive=!0),this.open=!0,this.isOptionsHidden=!this.#U||0===this.#U.length}}#$(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#C-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return void(t.selected=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.#C-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)for(const e of i)e.selected=!1;else;}#G(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");t instanceof GlideCoreDropdownOption&&!t.selected&&(t.selected=!0,this.#K(),this.multiple||this.#t(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}}#F(e){e.target instanceof GlideCoreDropdownOption&&(this.#T(),e.target.privateActive=!0)}#_(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#N.value&&this.#P(),this.#K(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#I(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#V(e){if(e.target instanceof GlideCoreDropdownOption&&this.#q){this.#T(),e.target.privateActive=!0;for(const e of this.#q)e.privateActive&&(this.ariaActivedescendant=e.id)}}#L(e){e.target!==this.#N.value&&!this.#M&&this.#N.value&&(this.#N.value.selected=this.isAllSelected),e.target instanceof GlideCoreDropdownOption&&(this.multiple?this.#d=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)):!this.multiple&&e.target.selected&&(this.#d=e.target.value?[e.target.value]:[],this.#o.value&&(this.#o.value.value=e.target.label))),this.requestUpdate()}#x(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#d=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#d=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#d=e.target.value?[e.target.value]:[])}async#S(e){this.#H=!0;for(const t of this.#r)t.id===e&&(t.selected=!1,this.#d=this.value.filter((e=>e!==t.value)));const t=this.#A.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();this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#P(){ow(this.#N.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#M=!0;for(const e of this.#r)e.selected=this.#N.value.selected;this.#M=!1}#i(){this.#B?.(),this.#R.value&&this.#v.value&&(this.#B=autoUpdate(this.#R.value,this.#v.value,(()=>{(async()=>{if(this.#R.value&&this.#v.value){const{x:e,y:t,placement:i}=await computePosition(this.#R.value,this.#v.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#v.value.dataset.placement=i,Object.assign(this.#v.value.style,{left:`${e}px`,top:`${t}px`}),this.#v.value?.showPopover(),this.activeOption&&(this.ariaActivedescendant=this.activeOption.id)}})()})))}#K(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#r)e.hidden=!1}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",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",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,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,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isOptionsHidden",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;
+var __decorate=this&&this.__decorate||function(e,t,i,l){var s,o=arguments.length,n=o<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--)(s=e[a])&&(n=(o<3?s(n):o>3?s(t,i,n):s(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{autoUpdate,computePosition,flip,offset}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{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.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{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.open&&e?this.#t():this.open&&this.#i()}get filterable(){return this.#l}set filterable(e){this.#l!==e&&e&&!this.multiple?setTimeout((()=>{this.updateComplete.then((()=>{this.#s.value&&this.selectedOptions.length>0&&(this.#s.value.value=this.selectedOptions[0].label)}))})):this.#l!==e&&this.#o(),this.#l=e}get open(){return this.#n}set open(e){this.#n=e,!e||this.disabled?(!this.multiple&&this.#s.value&&this.selectedOptions.length>0&&(this.#s.value.value=this.selectedOptions[0].label,this.isFiltering=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value)),this.#t(),this.activeOption&&(this.activeOption.privateIsOpenTooltip=!1)):this.#i()}get size(){return this.#a}set size(e){if(this.#a=e,this.#r)for(const t of this.#r)t.privateSize=e}get multiple(){return this.#p}set multiple(e){const t=this.#p&&!e,i=!this.#p&&e;this.#p=e,this.isShowSingleSelectIcon=!1;for(const i of this.#d)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.lastSelectedOption.privateUpdateCheckbox(),this.#h())}get value(){return this.#c}set value(e){this.#c=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.#d)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#r?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#u.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#s.value?(this.#s.value.click(),this.#s.value.select()):this.#v.value?.click()}get selectedOptions(){return this.#d.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#d.findLast((e=>e.selected))}get isAllSelected(){return this.#d.filter((({selected:e})=>e)).length===this.#d.length}get isSomeSelected(){return this.#d.some((({selected:e})=>e))}get internalLabel(){const e=this.filterable||this.isFilterable;return e||0!==this.selectedOptions.length?this.multiple||e||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#m,{capture:!0})}createRenderRoot(){return this.#f=super.createRenderRoot(),this.#f}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#g),document.removeEventListener("click",this.#m,{capture:!0})}firstUpdated(){owSlotType(this.#w.value,[GlideCoreDropdownOption,Text]),this.#b.value&&(this.#b.value.popover="manual"),this.open&&!this.disabled&&this.#i();const e=new ResizeObserver((()=>{this.#h()}));this.#E.value&&(e.observe(this.#E.value),this.#E.value.addEventListener("mouseup",(()=>{this.#O=!0})))}focus(e){this.filterable||this.isFilterable?this.#s.value?.focus(e):this.#v.value?.focus(e)}get form(){return this.#u.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#u.setValidity({valueMissing:!0}," ",this.#s.value):this.#u.setValidity({}),this.#u.validity}get willValidate(){return this.#u.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#g)}formResetCallback(){for(const e of this.#d){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#d.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#c=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})}" @blur="${this.#y}" ${ref(this.#E)}><glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#R}" ?hide="${this.hideLabel}" ?required="${this.required}" @blur="${this.#y}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#S}" @keydown="${this.#C}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#R,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#A}" @mousedown="${this.#D}" ${ref(this.#$)}><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.#k)}>${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t,value:i},l)=>html`<li class="${classMap({"tag-container":!0,hidden:l>this.tagOverflowLimit-1})}" data-test="tag-container" data-test-hidden="${l>this.tagOverflowLimit-1}"><glide-core-tag data-test="tag" data-id="${e}" label="${t}" removable size="${this.size}" @remove="${this.#_.bind(this,e)}">${when(i,(()=>html`<slot data-test="multiselect-icon-slot" name="icon:${i}" slot="icon"></slot>`))}</glide-core-tag></li>`))}</ul>`))} ${when(this.isShowSingleSelectIcon,(()=>html`<slot class="${classMap({"single-select-icon-slot":!0,quiet:"quiet"===this.variant})}" data-test="single-select-icon-slot" name="icon:${this.selectedOptions.at(0)?.value}"></slot>`))} ${when(this.filterable||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="input" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @focusin="${this.#F}" @input="${this.#I}" @keydown="${this.#G}" ${ref(this.#s)}>`))} ${when(this.internalLabel,(()=>html`<div class="internal-label" data-test="internal-label">${when(this.internalLabel===this.placeholder,(()=>html`<span class="${classMap({placeholder:!0,disabled:this.disabled,quiet:"quiet"===this.variant})}">${this.internalLabel}</span>`),(()=>this.internalLabel))}</div>`))}<div class="tag-overflow-text-and-button">${when(this.multiple&&this.selectedOptions.length>this.tagOverflowLimit,(()=>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.tagOverflowLimit} </span>more</div>`))} <button aria-expanded="${this.open}" aria-haspopup="listbox" aria-hidden="${this.filterable||this.isFilterable}" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.filterable||this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#v)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>html`<svg aria-label="${this.#L.term("open")}" 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><div aria-labelledby="${this.filterable||this.isFilterable?"input":"button"}" class="${classMap({options:!0,hidden:this.isOptionsHidden,[this.size]:!0})}" data-test="options" id="options" role="listbox" @click="${this.#T}" @input="${this.#V}" @focusin="${this.#z}" @mousedown="${this.#x}" @mouseover="${this.#N}" @private-label-change="${this.#H}" @private-selected-change="${this.#M}" @private-value-change="${this.#j}" ${ref(this.#b)}><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#L.term("selectAll")}" private-size="${this.size}" private-multiple ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" ?private-indeterminate="${this.isSomeSelected&&!this.isAllSelected}" ${ref(this.#B)}></glide-core-dropdown-option><slot @slotchange="${this.#U}" ${ref(this.#w)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#u.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isFilterable=!1,this.isFiltering=!1,this.isOptionsHidden=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.tagOverflowLimit=0,this.#v=createRef(),this.#E=createRef(),this.#w=createRef(),this.#$=createRef(),this.#s=createRef(),this.#O=!1,this.#e=!1,this.#l=!1,this.#p=!1,this.#n=!1,this.#q=!1,this.#P=!1,this.#K=!1,this.#W=!1,this.#L=new LocalizeController(this),this.#b=createRef(),this.#B=createRef(),this.#a="large",this.#k=createRef(),this.#c=[],this.#m=()=>{this.#O?setTimeout((()=>{this.#O=!1})):this.open=!1},this.#g=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#u=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#v;#J;#E;#w;#$;#s;#u;#O;#e;#l;#p;#n;#q;#P;#K;#W;#L;#b;#B;#f;#a;#k;#c;#m;#g;#t(){this.#J?.(),this.#b.value?.hidePopover(),this.ariaActivedescendant=""}get#R(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#y(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#U(){owSlotType(this.#w.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#d.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#d)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#Q?.at(0);!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#B.value&&(this.#B.value.selected=this.isAllSelected),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),this.updateComplete.then((()=>{!this.multiple&&this.#s.value&&this.lastSelectedOption?.value&&(this.#s.value.value=this.lastSelectedOption.label)}))}#S(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#f?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#P&&(this.open=!1),this.#y()}#C(e){if(this.disabled||this.readonly)return;if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if("Escape"===e.key)return this.open=!1,void this.focus();const t=e.target===this.#v.value||e.target===this.#s.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.activeOption.privateIsOpenTooltip=!0);if(this.activeOption&&this.open){if(("Enter"===e.key||" "===e.key)&&(this.#W=!0,"Enter"===e.key&&this.#X&&this.#X.length>0||" "===e.key&&!this.filterable&&!this.isFilterable))return e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#B.value&&this.#Y(),this.#o(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}));const t=this.#Q?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#Q&&"number"==typeof t){e.preventDefault();const i=this.#Q.at(t-1);return void(i&&0!==t&&(this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsOpenTooltip=!0,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#Q&&"number"==typeof t){e.preventDefault();const i=this.#Q.at(t+1);return void(i&&(this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsOpenTooltip=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#Q){e.preventDefault();const t=this.#Q.at(0);return void(t&&(this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,t.privateActive=!0,t.privateIsOpenTooltip=!0,t.scrollIntoView({block:"end"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#Q){e.preventDefault();const t=this.#Q.at(-1);return void(t&&this.activeOption&&(this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,t.privateActive=!0,t.privateIsOpenTooltip=!0,t.scrollIntoView()))}}}}#A(e){this.disabled||this.readonly||(this.#P?this.#P=!1:e.target instanceof Node&&this.#v.value?.contains(e.target)&&!this.#W&&this.open?this.open=!1:0!==e.detail&&(this.open=!0,this.focus()))}#D(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#s.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}get#d(){return this.#w.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#r(){const e=this.#w.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#B.value)return[this.#B.value,...e]}get#X(){return this.#w.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#Q(){const e=this.#w.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#B.value&&!this.#B.value.hidden&&e?[this.#B.value,...e]:e}#F(){this.#s.value?.select()}#I(e){if(ow(this.#s.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.multiple&&""!==this.#s.value.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#s.value.value&&this.#s.value.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1,this.isShowSingleSelectIcon=!1,this.activeOption){this.ariaActivedescendant=this.activeOption.id;for(const e of this.#d)e.hidden=!e.label?.toLowerCase().includes(this.#s.value?.value.toLowerCase().trim());const e=this.#X?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,e.privateActive=!0),this.open=!0,this.isOptionsHidden=!this.#X||0===this.#X.length}this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,detail:this.#s.value.value}))}#G(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#s.value&&0===this.#s.value.selectionStart)return void(t.selected=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#s.value&&0===this.#s.value.selectionStart)for(const e of i)e.selected=!1;else;}#T(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");t instanceof GlideCoreDropdownOption&&!t.selected&&(t.selected=!0,this.#o(),this.multiple||this.#t(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}}#z(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0)}#V(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#B.value&&this.#Y(),this.#o(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#H(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))):this.#s.value?this.#s.value.value=this.selectedOptions[0].label:this.requestUpdate())}#x(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#N(e){if(e.target instanceof GlideCoreDropdownOption&&this.#Q&&this.activeOption){this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,e.target.privateActive=!0;for(const e of this.#Q)e.privateActive&&(this.ariaActivedescendant=e.id)}}#M(e){e.target!==this.#B.value&&!this.#K&&this.#B.value&&(this.#B.value.selected=this.isAllSelected),this.isFiltering=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple?(this.#c=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.value&&(this.#s.value.value=""),this.#h()):!this.multiple&&e.target.selected&&(this.#c=e.target.value?[e.target.value]:[],this.#s.value&&(this.#s.value.value=e.target.label))),this.requestUpdate()}#j(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.detail.new?this.#c=this.value.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#c=this.value.filter((t=>t!==e.detail.old)):e.target instanceof GlideCoreDropdownOption&&(this.#c=e.detail.new?[e.detail.new]:[])}async#_(e){this.#P=!0;for(const t of this.#d)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#k.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();this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#Y(){ow(this.#B.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#K=!0;for(const e of this.#d)e.selected=this.#B.value.selected;this.#K=!1}async#h(){if(this.#E.value){const e=this.#E.value.scrollWidth>this.#E.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#h()):!e&&!this.#q&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#q=!0,await this.updateComplete,this.#h()):this.#q=!1}}#i(){this.#J?.(),this.#$.value&&this.#b.value&&(this.#J=autoUpdate(this.#$.value,this.#b.value,(()=>{(async()=>{if(this.#$.value&&this.#b.value){const{x:e,y:t,placement:i}=await computePosition(this.#$.value,this.#b.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#b.value.dataset.placement=i,Object.assign(this.#b.value.style,{left:`${e}px`,top:`${t}px`}),this.#b.value?.showPopover(),this.activeOption&&(this.ariaActivedescendant=this.activeOption.id)}})()})))}#o(){if((this.filterable||this.isFilterable)&&this.#s.value){this.isFiltering=!1;for(const e of this.#d)e.hidden=!1}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__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",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,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,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isOptionsHidden",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],GlideCoreDropdown.prototype,"tagOverflowLimit",void 0),GlideCoreDropdown=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;

package/dist/dropdown.option.d.ts

@@ -7,9 +7,7 @@ declare global {
     }
 }
 /**
- * @description An individual option for use with <glide-core-dropdown>.
- *
- * @slot icon - An icon.
+ * @slot icon - An icon before the label.
  */
 export default class GlideCoreDropdownOption extends LitElement {
     #private;
@@ -24,6 +22,7 @@ export default class GlideCoreDropdownOption extends LitElement {
     privateSize: 'small' | 'large';
     privateActive: boolean;
     private get isMultiple();
+    privateIsOpenTooltip: boolean;
     click(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

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 a=e.length-1;a>=0;a--)(l=e[a])&&(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"./checkbox.js";import"./tooltip.js";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 checkedIcon from"./icons/checked.js";import styles from"./dropdown.option.styles.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o="",this.#l=createRef(),this.#s=!1,this.#r=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#o}set label(e){this.#o=e,setTimeout((()=>{this.#a()}))}get selected(){return this.#s}set selected(e){if(this.#s=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#c)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.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role="option",this.tabIndex=-1,this.#n=new IntersectionObserver((()=>{this.checkVisibility()&&this.#a()})),this.#n.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#n?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#r}set value(e){const t=this.#r;this.#r=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" ${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-label-tooltip-offset="${12}" private-variant="minimal" value="${this.value}" internally-inert @click="${this.#p}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateActive}" ${ref(this.#e)}></glide-core-checkbox>`),(()=>html`<div class="${classMap({option:!0,[this.privateSize]:!0})}"><slot data-test="icon-slot" name="icon"></slot><glide-core-tooltip class="tooltip" offset="${10}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateActive}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip><div class="${classMap({"checked-icon":!0,visible:this.selected})}">${checkedIcon}</div></div>`))}</div>`}#e;#t;#i;#n;#o;#l;#s;#r;get#c(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#p(e){e.stopPropagation()}#a(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,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,"isMultiple",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),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 a=e.length-1;a>=0;a--)(l=e[a])&&(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"./checkbox.js";import"./tooltip.js";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 checkedIcon from"./icons/checked.js";import styles from"./dropdown.option.styles.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.privateIsOpenTooltip=!1,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o="",this.#l=createRef(),this.#s=!1,this.#r=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#o}set label(e){this.#o=e,setTimeout((()=>{this.#a()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#s}set selected(e){if(this.#s=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#n)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.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role="option",this.tabIndex=-1,this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#a()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#r}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#r=e}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" ${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-label-tooltip-offset="${12}" private-size="${this.privateSize}" private-variant="minimal" value="${this.value}" internally-inert @click="${this.#p}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsOpenTooltip}" ${ref(this.#e)}><slot class="icon-slot" data-test="icon-slot" name="icon" slot="private-icon"></slot></glide-core-checkbox>`),(()=>html`<div class="${classMap({option:!0,[this.privateSize]:!0})}"><slot class="icon-slot" name="icon"></slot><glide-core-tooltip class="tooltip" offset="${10}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateIsOpenTooltip}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip><div class="${classMap({"checked-icon":!0,visible:this.selected})}">${checkedIcon}</div></div>`))}</div>`}#e;#t;#i;#c;#o;#l;#s;#r;get#n(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#p(e){e.stopPropagation()}#a(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,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,"isMultiple",null),__decorate([state()],GlideCoreDropdownOption.prototype,"privateIsOpenTooltip",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;

package/dist/dropdown.option.styles.js

@@ -10,45 +10,49 @@ import{css}from"lit";export default[css`
       &.active {
         background-color: var(--glide-core-surface-hover);
       }
+    }
 
-      &.large {
-        --height: 1.75rem;
-        --gap: var(--glide-core-spacing-sm);
-        --padding-inline: var(--glide-core-spacing-sm);
+    .option {
+      align-items: center;
+      block-size: 100%;
+      column-gap: var(--glide-core-spacing-xs);
+      display: flex;
+      user-select: none;
 
+      &.large {
         font-family: var(--glide-core-body-sm-font-family);
         font-size: var(--glide-core-body-sm-font-size);
         font-style: var(--glide-core-body-sm-font-style);
         font-weight: var(--glide-core-body-sm-font-weight);
         line-height: var(--glide-core-body-sm-line-height);
+        padding-inline: var(--glide-core-spacing-sm);
       }
 
       &.small {
-        --height: 1.25rem;
-        --gap: var(--glide-core-spacing-xs);
-        --padding-inline: var(--glide-core-spacing-xs);
-
         font-family: var(--glide-core-body-xs-font-family);
         font-size: var(--glide-core-body-xs-font-size);
         font-style: var(--glide-core-body-xs-font-style);
         font-weight: var(--glide-core-body-xs-font-weight);
         line-height: var(--glide-core-body-xs-line-height);
+        padding-inline: var(--glide-core-spacing-xs);
       }
     }
 
-    .option {
-      align-items: center;
-      block-size: var(--height);
-      display: flex;
-      gap: var(--gap);
-      padding-inline: var(--padding-inline);
-      user-select: none;
-    }
+    .checkbox {
+      &.large {
+        &::part(private-label-and-input-and-checkbox) {
+          padding-inline: var(--glide-core-spacing-sm);
+        }
+      }
+
+      &.small {
+        &::part(private-label-and-input-and-checkbox) {
+          padding-inline: var(--glide-core-spacing-xs);
+        }
+      }
 
-    glide-core-checkbox {
       &::part(private-label-and-input-and-checkbox) {
-        block-size: var(--height);
-        padding-inline: var(--padding-inline);
+        block-size: var(--private-option-height);
       }
     }
 
@@ -67,6 +71,14 @@ import{css}from"lit";export default[css`
       display: none;
     }
 
+    .icon-slot {
+      &::slotted(*) {
+        block-size: 1rem;
+        display: block;
+        inline-size: 1rem;
+      }
+    }
+
     .tooltip {
       overflow: hidden;
     }

package/dist/dropdown.option.test.basics.js

@@ -12,17 +12,17 @@ it('has defaults', async () => {
     const component = await fixture(html `<glide-core-dropdown-option
       label="Label"
     ></glide-core-dropdown-option>`);
-    expect(component.privateMultiple).to.equal(false);
+    expect(component.privateMultiple).to.be.false;
     expect(component.getAttribute('private-multiple')).to.equal(null);
     expect(component.privateSize).to.equal('large');
     expect(component.getAttribute('private-size')).to.equal('large');
-    expect(component.selected).to.equal(false);
+    expect(component.selected).to.be.false;
     expect(component.hasAttribute('selected')).to.be.false;
     expect(component.value).to.equal('');
     expect(component.getAttribute('value')).to.equal('');
     // None are reflected, so no attribute assertions are necessary.
-    expect(component.privateActive).to.equal(false);
-    expect(component.privateIndeterminate).to.equal(false);
+    expect(component.privateActive).to.be.false;
+    expect(component.privateIndeterminate).to.be.false;
 });
 it('can have a label', async () => {
     const component = await fixture(html `<glide-core-dropdown-option

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

@@ -2,10 +2,18 @@
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('dispatches a "private-label-change" event', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option label="One"></glide-core-dropdown-option>`);
+    setTimeout(() => {
+        component.label = 'Two';
+    });
+    const event = await oneEvent(component, 'private-label-change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
 it('dispatches a "private-selected-change" event', async () => {
     const component = await fixture(html `<glide-core-dropdown-option
       label="Label"
-      value="value"
     ></glide-core-dropdown-option>`);
     setTimeout(() => {
         component.selected = true;

package/dist/dropdown.option.test.interactions.single.js

@@ -18,7 +18,7 @@ it('has a tooltip when active and with a long label', async () => {
       label=${'.'.repeat(500)}
       value="value"
     ></glide-core-dropdown-option>`);
-    component.privateActive = true;
+    component.privateIsOpenTooltip = true;
     // Wait for the tooltip.
     await aTimeout(0);
     const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
@@ -40,7 +40,7 @@ it('has a tooltip when active and with a long label set programmatically', async
       label="Label"
       value="value"
     ></glide-core-dropdown-option>`);
-    component.privateActive = true;
+    component.privateIsOpenTooltip = true;
     // The period is arbitrary. 500 of them ensures we exceed the maximum
     // width even if it's increased.
     component.label = '.'.repeat(500);

package/dist/dropdown.styles.js

@@ -44,7 +44,7 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
         block-size: 1.5rem;
         border-color: transparent;
         border-radius: var(--glide-core-border-radius-round);
-        gap: var(--glide-core-spacing-xxs);
+        column-gap: var(--glide-core-spacing-xxs);
         min-inline-size: 3.75rem;
         padding-block: 0;
         padding-inline: 0.375rem;
@@ -97,7 +97,6 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
     .options {
       --border-width: 1px;
       --padding: var(--glide-core-spacing-xxxs);
-      --private-option-height: 1.75rem;
 
       background-color: var(--glide-core-surface-modal);
       border: var(--border-width) solid var(--glide-core-surface-modal);
@@ -118,6 +117,14 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       &.hidden {
         display: none;
       }
+
+      &.large {
+        --private-option-height: 1.75rem;
+      }
+
+      &.small {
+        --private-option-height: 1.25rem;
+      }
     }
 
     .select-all {
@@ -172,9 +179,32 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
     }
 
     .tag-overflow-text {
+      align-content: center;
       color: var(--glide-core-text-link);
     }
 
+    .single-select-icon-slot {
+      &.quiet {
+        &::slotted(*) {
+          margin-inline-end: var(--glide-core-spacing-xxs);
+        }
+      }
+
+      &::slotted(*) {
+        block-size: 1rem;
+        display: block;
+        inline-size: 1rem;
+      }
+    }
+
+    .internal-label {
+      /* 
+        2px so the label is vertically aligned. "vertical-align: middle" has no 
+        effect on flex children. 
+      */
+      padding-block-start: 0.125rem;
+    }
+
     .button {
       align-items: center;
       background: none;
@@ -198,7 +228,13 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       font-family: var(--glide-core-font-sans);
       font-size: inherit;
       min-inline-size: var(--min-inline-size);
-      padding: 0;
+
+      /* 
+        2px so the value is vertically aligned. "vertical-align: middle" has no 
+        effect flex children. 
+      */
+      padding-block: 0.125rem 0;
+      padding-inline: 0;
 
       &:focus {
         outline: none;

package/dist/dropdown.test.basics.d.ts

@@ -1 +1 @@
-import './dropdown.option.js';
+export {};