@crowdstrike/glide-core 0.5.0 → 0.5.2

package/dist/checkbox.test.states.js

@@ -0,0 +1,62 @@
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckbox from './checkbox.js';
+GlideCoreCheckbox.shadowRootOptions.mode = 'open';
+it('is checked after being clicked', async () => {
+    const component = await fixture(html `<glide-core-checkbox></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(true);
+    expect(component.hasAttribute('checked')).to.be.false;
+});
+it('is unchecked after being clicked', async () => {
+    const component = await fixture(html `<glide-core-checkbox checked></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(false);
+    expect(component.hasAttribute('checked')).to.be.true;
+});
+it('is checked and not indeterminate after being clicked when unchecked and indeterminate', async () => {
+    const component = await fixture(html `<glide-core-checkbox indeterminate></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.indeterminate).to.be.false;
+    expect(component.checked).to.equal(true);
+    expect(component.indeterminate).to.equal(false);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.hasAttribute('indeterminate')).to.be.true;
+});
+it('is unchecked and not indeterminate after being clicked when checked and indeterminate', async () => {
+    const component = await fixture(html `<glide-core-checkbox checked indeterminate></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.indeterminate).to.be.false;
+    expect(component.checked).to.equal(false);
+    expect(component.indeterminate).to.equal(false);
+    expect(component.hasAttribute('checked')).to.be.true;
+    expect(component.hasAttribute('indeterminate')).to.be.true;
+});
+it('is still checked after being clicked when checked but disabled', async () => {
+    const component = await fixture(html `<glide-core-checkbox checked disabled></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(true);
+    expect(component.hasAttribute('checked')).to.be.true;
+});
+it('is still unchecked after being clicked when unchecked and disabled', async () => {
+    const component = await fixture(html `<glide-core-checkbox disabled></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.equal(false);
+});
+it('is still indeterminate after being clicked when unchecked and disabled', async () => {
+    const component = await fixture(html `<glide-core-checkbox disabled indeterminate></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.indeterminate).to.be.true;
+    expect(component.indeterminate).to.equal(true);
+    expect(component.hasAttribute('indeterminate')).to.be.true;
+});

package/dist/checkbox.test.validity.js

@@ -0,0 +1,51 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckbox from './checkbox.js';
+GlideCoreCheckbox.shadowRootOptions.mode = 'open';
+it('is valid if unchecked but not required', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});
+it('is valid but not aria-invalid after being checked when unchecked and required', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`);
+    component.click();
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+});
+it('is invalid but not aria-invalid if unchecked and required', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+});
+it('is invalid but not aria-invalid after being unchecked when required', async () => {
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      checked
+      required
+    ></glide-core-checkbox>`);
+    component.click();
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+});
+it('is both invalid and valid if unchecked and required but disabled', async () => {
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      disabled
+      required
+    ></glide-core-checkbox>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});

package/dist/drawer.d.ts

@@ -19,9 +19,9 @@ export default class GlideCoreDrawer extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    label: string;
+    pinned: boolean;
     close(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     firstUpdated(): void;
     open(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/drawer.js

@@ -1,15 +1 @@
-"use strict";var R=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var p=(o,e,t,d)=>{for(var n=d>1?void 0:d?O(e,t):e,h=o.length-1,v;h>=0;h--)(v=o[h])&&(n=(d?v(e,t,n):v(n))||n);return d&&n&&R(e,t,n),n};var f=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var s=(o,e,t)=>(f(o,e,"read from private field"),t?t.call(o):e.get(o)),a=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)};var g=(o,e,t)=>(f(o,e,"access private method"),t);var i,l,u,k,m,y;import{LitElement as S,html as $}from"lit";import{createRef as E,ref as L}from"lit/directives/ref.js";import{customElement as M,state as w}from"lit/decorators.js";import{owSlot as b}from"./library/ow.js";import T from"./drawer.styles.js";const c=new CSSStyleSheet;c.insertRule(`
-  @supports (scrollbar-gutter: stable) {
-    .private-glide-core-drawer-lock-scroll {
-      scrollbar-gutter: stable !important;
-      overflow: hidden !important;
-    }
-  }
-`),c.insertRule(`
-  @supports not (scrollbar-gutter: stable) {
-    .private-glide-core-drawer-lock-scroll {
-      padding-right: var(--glide-scroll-size, 0.9375rem) !important;
-      overflow: hidden !important;
-    }
-  }
-`);let r=class extends S{constructor(){super(...arguments);a(this,u);a(this,m);this.currentState="closed";this.isOpen=!1;a(this,i,E());a(this,l,E())}close(){this.currentState==="open"&&(s(this,l)?.value?.addEventListener("transitionend",()=>{this.isOpen=!1,s(this,l)?.value?.classList?.remove("open"),s(this,l)?.value?.classList?.remove("closing"),this.currentState="closed",this.dispatchEvent(new Event("close")),document.documentElement.classList.remove("private-glide-core-drawer-lock-scroll")},{once:!0}),s(this,l)?.value?.classList?.add("closing"),document.documentElement.classList.add("private-glide-core-drawer-lock-scroll"),this.currentState="closing")}connectedCallback(){super.connectedCallback(),document.adoptedStyleSheets.includes(c)||document.adoptedStyleSheets.push(c)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.contains("private-glide-core-drawer-lock-scroll")&&document.documentElement.classList.remove("private-glide-core-drawer-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter(t=>t!==c)}firstUpdated(){b(s(this,i).value)}open(){this.currentState==="closed"&&(s(this,l)?.value?.addEventListener("transitionend",()=>{this.currentState="open",s(this,l)?.value?.focus(),this.dispatchEvent(new Event("open")),document.documentElement.classList.remove("private-glide-core-drawer-lock-scroll")},{once:!0}),s(this,l)?.value?.classList?.add("open"),document.documentElement.classList.add("private-glide-core-drawer-lock-scroll"),this.currentState="opening",this.isOpen=!0)}render(){return $`<dialog class="component" tabindex="-1" ?open="${this.isOpen}" @keydown="${g(this,u,k)}" ${L(s(this,l))}><slot @slotchange="${g(this,m,y)}" ${L(s(this,i))}></slot></dialog>`}};i=new WeakMap,l=new WeakMap,u=new WeakSet,k=function(t){t.key==="Escape"&&this.close()},m=new WeakSet,y=function(){b(s(this,i).value)},r.shadowRootOptions={...S.shadowRootOptions,mode:"closed"},r.styles=T,p([w()],r.prototype,"currentState",2),p([w()],r.prototype,"isOpen",2),r=p([M("glide-core-drawer")],r);export{r as default};
+var __decorate=this&&this.__decorate||function(e,t,s,o){var i,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,s,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(l=(r<3?i(l):r>3?i(t,s,l):i(t,s))||l);return r>3&&l&&Object.defineProperty(t,s,l),l};import{LitElement,html,nothing}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}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.label="",this.pinned=!1,this.currentState="closed",this.isOpen=!1,this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){"open"===this.currentState&&(this.#e?.value?.addEventListener("transitionend",(()=>{this.isOpen=!1,this.#e?.value?.classList?.remove("open"),this.#e?.value?.classList?.remove("closing"),this.currentState="closed",this.dispatchEvent(new Event("close"))}),{once:!0}),this.#e?.value?.classList?.add("closing"),this.currentState="closing")}firstUpdated(){owSlot(this.#t.value)}open(){"closed"===this.currentState&&(this.#e?.value?.addEventListener("transitionend",(()=>{this.currentState="open",this.#e?.value?.focus(),this.dispatchEvent(new Event("open"))}),{once:!0}),this.#e?.value?.classList?.add("open"),this.currentState="opening",this.isOpen=!0)}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test-state="${this.isOpen?"open":"closed"}" @keydown="${this.#s}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#o}" ${ref(this.#t)}></slot></aside>`}#e;#t;#s(e){"Escape"===e.key&&this.close()}#o(){owSlot(this.#t.value)}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([state()],GlideCoreDrawer.prototype,"currentState",void 0),__decorate([state()],GlideCoreDrawer.prototype,"isOpen",void 0),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;

package/dist/drawer.styles.js

@@ -1,6 +1,5 @@
-"use strict";import{css as i}from"lit";export default[i`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     .component {
-      all: unset;
       background-color: var(--glide-core-surface-base-lighter);
       block-size: 0;
       border-end-start-radius: 0.625rem;
@@ -17,9 +16,25 @@
         transform 0.2s ease-out,
         opacity 0.3s ease-out;
       visibility: hidden;
+
+      &.pinned {
+        box-shadow: none;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${focusOutline};
+      }
     }
 
     .open {
+      /* prefix required for Safari */
+      /* stylelint-disable-next-line property-no-vendor-prefix */
+      -webkit-backdrop-filter: blur(50px);
+      backdrop-filter: blur(50px);
       block-size: auto;
       inline-size: var(--width, 27.375rem);
       inset: 0 0 0 auto;
@@ -31,4 +46,4 @@
     .closing {
       transform: translateX(100%);
     }
-  `];
+  `];

package/dist/drawer.test.accessibility.js

@@ -0,0 +1,22 @@
+import './drawer.js';
+import { expect, fixture, html } from '@open-wc/testing';
+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('is accessible', async () => {
+    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    drawer.shadowRoot
+        ?.querySelector('aside')
+        ?.dispatchEvent(new TransitionEvent('transitionend'));
+    drawer.open();
+    await expect(drawer).to.be.accessible();
+});
+it('focuses the aside upon opening', async () => {
+    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    drawer.open();
+    drawer.shadowRoot
+        ?.querySelector('aside')
+        ?.dispatchEvent(new TransitionEvent('transitionend'));
+    expect(drawer.shadowRoot?.activeElement).to.equal(drawer.shadowRoot?.querySelector('aside'));
+});

package/dist/drawer.test.basics.js

@@ -0,0 +1,43 @@
+import './drawer.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDrawer from './drawer.js';
+import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreDrawer.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-drawer')).to.equal(GlideCoreDrawer);
+});
+it('adds an aria-label when "label" is set', async () => {
+    const drawer = await fixture(html `<glide-core-drawer label="label">Drawer content</glide-core-drawer>`);
+    expect(drawer.shadowRoot?.querySelector('aside')?.ariaLabel).to.equal('label');
+});
+it('does not add an aria-label when "label" is unset', async () => {
+    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    expect(drawer.shadowRoot?.querySelector('aside')).to.not.have.attribute('aria-label');
+});
+it('can have a default slot', async () => {
+    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    drawer.open();
+    expect(drawer.textContent).to.equal('Drawer content');
+});
+it('sets the width of the element based on the "--width" CSS variable', async () => {
+    const styledDiv = document.createElement('div');
+    styledDiv.setAttribute('style', '--width: 750px');
+    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`, { parentNode: styledDiv });
+    drawer.open();
+    expect(drawer.shadowRoot?.querySelector('aside')?.clientWidth).to.equal(750);
+});
+it('throws if it does not have a default slot', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-drawer></glide-core-drawer>`);
+    });
+});
+it('adds a class when the "pinned" attribute is set', async () => {
+    const drawer = await fixture(html `<glide-core-drawer pinned>Drawer content</glide-core-drawer>`);
+    drawer.open();
+    expect(drawer.shadowRoot?.querySelector('aside')?.classList.contains('pinned')).to.be.true;
+});
+it('does not add a class when the "pinned" attribute is not set', async () => {
+    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    drawer.open();
+    expect(drawer.shadowRoot?.querySelector('aside')?.classList.contains('pinned')).to.be.false;
+});

package/dist/drawer.test.closing.js

@@ -0,0 +1,37 @@
+import './drawer.js';
+import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+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('closes when the "Escape" key is pressed', async () => {
+    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    drawer.open();
+    drawer.shadowRoot
+        ?.querySelector('aside')
+        ?.dispatchEvent(new TransitionEvent('transitionend'));
+    await elementUpdated(drawer);
+    await sendKeys({ press: 'Escape' });
+    setTimeout(() => {
+        drawer.shadowRoot
+            ?.querySelector('aside')
+            ?.dispatchEvent(new TransitionEvent('transitionend'));
+    });
+    await oneEvent(drawer, 'close');
+    await elementUpdated(drawer);
+    expect(drawer?.shadowRoot?.querySelector('aside[data-test-state="closed"]'))
+        .to.be.not.null;
+});
+it('does not close when a key other than "Escape" is pressed', async () => {
+    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    drawer.open();
+    drawer.shadowRoot
+        ?.querySelector('aside')
+        ?.dispatchEvent(new TransitionEvent('transitionend'));
+    await elementUpdated(drawer);
+    drawer.shadowRoot?.querySelector('aside')?.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(drawer?.shadowRoot?.querySelector('aside[data-test-state="open"]')).to
+        .be.not.null;
+});

package/dist/drawer.test.events.js

@@ -0,0 +1,52 @@
+import './drawer.js';
+import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+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
+        ?.querySelector('aside')
+        ?.dispatchEvent(new TransitionEvent('transitionend'));
+    await elementUpdated(drawer);
+    await sendKeys({ press: 'Escape' });
+    setTimeout(() => {
+        drawer.shadowRoot
+            ?.querySelector('aside')
+            ?.dispatchEvent(new TransitionEvent('transitionend'));
+    });
+    const event = await closeEvent;
+    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
+        ?.querySelector('aside')
+        ?.dispatchEvent(new TransitionEvent('transitionend'));
+    await elementUpdated(drawer);
+    drawer.close();
+    setTimeout(() => {
+        drawer.shadowRoot
+            ?.querySelector('aside')
+            ?.dispatchEvent(new TransitionEvent('transitionend'));
+    });
+    const event = await closeEvent;
+    expect(event instanceof Event).to.be.true;
+});

package/dist/drawer.test.methods.js

@@ -0,0 +1,34 @@
+import './drawer.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+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
+        ?.querySelector('aside')
+        ?.dispatchEvent(new TransitionEvent('transitionend'));
+    expect(drawer.shadowRoot?.querySelector('aside[data-test-state="open"]')).to
+        .be.not.null;
+    drawer.close();
+    drawer.shadowRoot
+        ?.querySelector('aside')
+        ?.dispatchEvent(new TransitionEvent('transitionend'));
+    await elementUpdated(drawer);
+    expect(drawer.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;
+});

package/dist/dropdown.d.ts

@@ -29,16 +29,18 @@ export default class GlideCoreDropdown extends LitElement {
     open: boolean;
     orientation: 'horizontal' | 'vertical';
     placeholder?: string;
+    readonly: boolean;
     selectAll: boolean;
     get size(): 'small' | 'large';
     set size(size: 'small' | 'large');
     get multiple(): boolean;
     set multiple(isMultiple: boolean);
     required: boolean;
-    value: string[];
+    get value(): string[];
+    set value(value: string[]);
     variant?: 'quiet';
     private get selectedOptions();
-    private get lastSelectedOptionWithValue();
+    private get lastSelectedOption();
     private get isAllSelected();
     private get isSomeSelected();
     private get activeOption();

package/dist/dropdown.js

@@ -1 +1 @@
-"use strict";var Lt=Object.defineProperty;var Rt=Object.getOwnPropertyDescriptor;var o=(c,h,t,i)=>{for(var l=i>1?void 0:i?Rt(h,t):h,a=c.length-1,ot;a>=0;a--)(ot=c[a])&&(l=(i?ot(h,t,l):ot(l))||l);return i&&l&&Lt(h,t,l),l};var ht=(c,h,t)=>{if(!h.has(c))throw TypeError("Cannot "+t)};var e=(c,h,t)=>(ht(c,h,"read from private field"),t?t.call(c):h.get(c)),s=(c,h,t)=>{if(h.has(c))throw TypeError("Cannot add the same private member more than once");h instanceof WeakSet?h.add(c):h.set(c,t)},y=(c,h,t,i)=>(ht(c,h,"write to private field"),i?i.call(c,t):h.set(c,t),t);var r=(c,h,t)=>(ht(c,h,"access private method"),t);var V,E,p,A,R,x,I,K,d,T,N,L,U,P,j,f,g,$,k,B,Q,v,b,O,S,W,X,J,ct,Y,pt,Z,vt,C,gt,D,mt,_,bt,G,Ot,tt,yt,et,At,it,St,st,Et,at,$t,lt,Ft,nt,kt,rt,Vt;import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import{LitElement as ut,html as F}from"lit";import{classMap as z}from"lit/directives/class-map.js";import{createRef as q,ref as H}from"lit/directives/ref.js";import{customElement as xt,property as m,state as M}from"lit/decorators.js";import{owSlotType as dt}from"./library/ow.js";import{repeat as It}from"lit/directives/repeat.js";import{svg as Mt}from"lit/static-html.js";import{when as w}from"lit/directives/when.js";import u from"./dropdown.option.js";import ft from"./tag.js";import wt from"./icons/magnifying-glass.js";import Tt from"./dropdown.styles.js";let n=class extends ut{constructor(){super();s(this,f);s(this,$);s(this,B);s(this,v);s(this,O);s(this,W);s(this,J);s(this,Y);s(this,Z);s(this,C);s(this,D);s(this,_);s(this,G);s(this,tt);s(this,et);s(this,it);s(this,st);s(this,at);s(this,lt);s(this,nt);s(this,rt);this.disabled=!1;this.hideLabel=!1;this.open=!1;this.orientation="horizontal";this.selectAll=!1;this.required=!1;this.value=[];this.ariaActivedescendant="";this.isCheckingValidity=!1;this.isEveryOptionFilteredOut=!1;this.isFilterable=!1;this.isFiltering=!1;this.isReportValidityOrSubmit=!1;s(this,V,q());s(this,E,q());s(this,p,q());s(this,A,void 0);s(this,R,!1);s(this,x,!1);s(this,I,!1);s(this,K,!1);s(this,d,q());s(this,T,void 0);s(this,N,"large");s(this,L,3);s(this,U,q());s(this,P,t=>{this.multiple&&!(t.target instanceof n||t.target instanceof u)?this.open=!1:!this.multiple&&!(t.target instanceof n)&&(this.open=!1)});s(this,j,({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,JSON.stringify(this.value))});y(this,A,this.attachInternals()),this.addEventListener("invalid",t=>{t?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())})}get size(){return e(this,N)}set size(t){if(y(this,N,t),e(this,$,k))for(const i of e(this,$,k))i.privateSize=t}get multiple(){return e(this,x)}set multiple(t){const i=e(this,x)&&!t,l=!e(this,x)&&t;y(this,x,t);for(const a of e(this,f,g))a.privateMultiple=t,i&&a!==this.lastSelectedOptionWithValue&&(a.selected=!1);i&&this.lastSelectedOptionWithValue?this.value=[this.lastSelectedOptionWithValue.value]:l&&this.lastSelectedOptionWithValue&&this.lastSelectedOptionWithValue.privateUpdateCheckbox()}get selectedOptions(){return e(this,f,g).filter(t=>t instanceof u&&t.selected)}get lastSelectedOptionWithValue(){return e(this,f,g).findLast(t=>t.selected&&t.value)}get isAllSelected(){return e(this,f,g).filter(({selected:t})=>t).length===e(this,f,g).length}get isSomeSelected(){return e(this,f,g).some(({selected:t})=>t)}get activeOption(){return e(this,$,k)?.find(({privateActive:t})=>t)}get internalLabel(){return!this.isFilterable&&this.selectedOptions.length===0?this.placeholder:!this.multiple&&!this.isFilterable&&this.selectedOptions.at(-1)?.label?this.selectedOptions.at(-1)?.label:""}checkValidity(){return this.isCheckingValidity=!0,e(this,A).checkValidity()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",e(this,P),{capture:!0})}createRenderRoot(){return y(this,T,super.createRenderRoot()),e(this,T)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",e(this,j)),document.removeEventListener("click",e(this,P),{capture:!0})}firstUpdated(){dt(e(this,E).value,[u,Text])}focus(){this.isFilterable?e(this,p).value?.focus():e(this,V).value?.focus()}get form(){return e(this,A).form}get validity(){return this.required&&this.selectedOptions.length===0?e(this,A).setValidity({valueMissing:!0}," ",e(this,p).value):e(this,A).setValidity({}),e(this,A).validity}get willValidate(){return e(this,A).willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",e(this,j))}formResetCallback(){for(const l of e(this,f,g))l.hasAttribute("selected")||(l.selected=!1);const t=e(this,f,g).filter(l=>l.hasAttribute("selected")),i=t.at(-1)?.value;this.value=this.multiple&&t.length>0?t.map(({value:l})=>l):!this.multiple&&i?[i]:[]}render(){return F`<div class="${z({component:!0,horizontal:this.orientation==="horizontal",vertical:this.orientation==="vertical"})}"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${e(this,J,ct)}" ?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="${r(this,Z,vt)}" @keydown="${r(this,C,gt)}"><div class="${z({dropdown:!0,quiet:this.variant==="quiet",disabled:this.disabled,error:e(this,J,ct),multiple:this.multiple})}" @click="${r(this,D,mt)}" @mousedown="${r(this,_,bt)}">${w(this.multiple&&this.selectedOptions.length>0,()=>F`<ul aria-describedby="tag-overflow-text" class="tags" ${H(e(this,U))}>${w(this.multiple&&this.selectedOptions.length>0,()=>F`${It(this.selectedOptions,({id:t})=>t,({id:t,label:i},l)=>F`<li class="${z({"tag-container":!0,hidden:l>e(this,L)-1})}" data-test="tag-container" data-test-hidden="${l>e(this,L)-1}"><glide-core-tag data-test="tag" data-id="${t}" removable-label="${i??""}" @remove="${r(this,rt,Vt).bind(this,t)}">${i}</glide-core-tag></li>`)}`)}</ul>`)} ${w(this.isFilterable,()=>F`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="label" autocapitalize="off" autocomplete="off" class="${z({input:!0,selection:!!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" @input="${r(this,G,Ot)}" @keydown="${r(this,tt,yt)}" ${H(e(this,p))}>`)} ${w(this.internalLabel,()=>F`<div data-test="internal-label">${this.internalLabel}</div>`)} ${w(this.selectedOptions.length>e(this,L),()=>F`<div class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-e(this,L)} </span>more</div>`)} <button aria-hidden="${this.isFilterable}" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="label" aria-describedby="description" class="button" data-test="button" id="button" tabindex="${this.isFilterable?"-1":"0"}" type="button" ${H(e(this,V))}>${w(this.isFiltering,()=>F`<div data-test="magnifying-glass-icon">${wt}</div>`,()=>Mt`<svg aria-label="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 aria-labelledby="${this.isFilterable?"input":"button"}" class="${z({options:!0,visible:this.open&&!this.disabled&&!this.isEveryOptionFilteredOut})}" data-test="options" data-test-visible="${this.open&&!this.disabled&&!this.isEveryOptionFilteredOut}" role="listbox" @mousedown="${r(this,it,St)}" @mouseover="${r(this,st,Et)}"><glide-core-dropdown-option class="select-all" data-test="select-all" label="Select All" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" @private-selected-change="${r(this,nt,kt)}" ${H(e(this,d))}></glide-core-dropdown-option><slot @focusin="${r(this,et,At)}" @private-selected-change="${r(this,at,$t)}" @private-value-change="${r(this,lt,Ft)}" @slotchange="${r(this,Y,pt)}" ${H(e(this,E))}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return e(this,A).reportValidity()}};V=new WeakMap,E=new WeakMap,p=new WeakMap,A=new WeakMap,R=new WeakMap,x=new WeakMap,I=new WeakMap,K=new WeakMap,d=new WeakMap,T=new WeakMap,N=new WeakMap,L=new WeakMap,U=new WeakMap,P=new WeakMap,j=new WeakMap,f=new WeakSet,g=function(){return e(this,E).value?.assignedElements().filter(t=>t instanceof u)??[]},$=new WeakSet,k=function(){const t=e(this,E).value?.assignedElements().filter(i=>i instanceof u);if(t&&e(this,d).value)return[e(this,d).value,...t]},B=new WeakSet,Q=function(){return e(this,E).value?.assignedElements().filter(t=>t instanceof u&&!t.hidden)},v=new WeakSet,b=function(){const t=e(this,E).value?.assignedElements().filter(i=>i instanceof u&&!i.hidden);return e(this,d).value&&!e(this,d).value.hidden&&t?[e(this,d).value,...t]:t},O=new WeakSet,S=function(){if(e(this,$,k))for(const t of e(this,$,k))t.privateActive=!1},W=new WeakSet,X=async function(){this.activeOption&&(await this.updateComplete,this.activeOption.focus())},J=new WeakSet,ct=function(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit},Y=new WeakSet,pt=function(){if(dt(e(this,E).value,[u,Text]),this.isFilterable=e(this,f,g).length>10,e(this,$,k))for(const i of e(this,$,k))i.privateIsFocusable=!this.isFilterable,i.privateSize=this.size,i.privateMultiple=this.multiple;this.lastSelectedOptionWithValue?.value&&(r(this,O,S).call(this),this.lastSelectedOptionWithValue.privateActive=!0,this.ariaActivedescendant=this.lastSelectedOptionWithValue.id),e(this,d).value&&(y(this,R,!0),e(this,d).value.selected=this.isAllSelected,e(this,d).value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected);const t=e(this,v,b)?.at(0);t&&(r(this,O,S).call(this),t.privateActive=!0,this.ariaActivedescendant=t.id),this.multiple?this.value=this.selectedOptions.filter(i=>!!i.value).map(({value:i})=>i):this.lastSelectedOptionWithValue?.value&&(this.value=[this.lastSelectedOptionWithValue.value])},Z=new WeakSet,vt=function(t){t.relatedTarget===null&&!e(this,I)&&(this.open=!1)},C=new WeakSet,gt=function(t){if(t.key==="Escape"){this.open=!1,this.focus();return}const i=t.target===e(this,V).value||t.target===e(this,p).value||t.target instanceof u;if(!(this.multiple&&!i)){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(t.key)){t.preventDefault(),this.open=!0,this.isFilterable||r(this,W,X).call(this);return}if(this.activeOption&&this.open){if(t.key==="Enter"||t.key===" "){if(!this.isFilterable&&e(this,T)?.activeElement===e(this,V).value)return;if(this.multiple||y(this,K,!0),t.key==="Enter"){this.activeOption.selected=!this.activeOption?.selected;return}if(t.key===" "&&!this.isFilterable){this.activeOption.selected=!this.activeOption?.selected;return}}const l=e(this,v,b)?.indexOf(this.activeOption);if(t.key==="ArrowUp"&&!t.metaKey&&e(this,v,b)&&typeof l=="number"){t.preventDefault();const a=e(this,v,b).at(l-1);a&&l!==0&&(r(this,O,S).call(this),a.privateActive=!0,this.ariaActivedescendant=a.id,this.isFilterable?this.ariaActivedescendant=a.id:a.focus());return}if(t.key==="ArrowDown"&&!t.metaKey&&e(this,v,b)&&typeof l=="number"){t.preventDefault();const a=e(this,v,b).at(l+1);a&&(r(this,O,S).call(this),a.privateActive=!0,this.isFilterable?this.ariaActivedescendant=a.id:a.focus());return}if((t.key==="ArrowUp"&&t.metaKey||t.key==="Home"||t.key==="PageUp")&&e(this,v,b)){t.preventDefault();const a=e(this,v,b).at(0);a&&(r(this,O,S).call(this),a.privateActive=!0,this.isFilterable?this.ariaActivedescendant=a.id:a.focus());return}if((t.key==="ArrowDown"&&t.metaKey||t.key==="End"||t.key==="PageDown")&&e(this,v,b)){t.preventDefault();const a=e(this,v,b).at(-1);a&&(r(this,O,S).call(this),a.privateActive=!0,this.isFilterable?this.ariaActivedescendant=a.id:a.focus());return}}}},D=new WeakSet,mt=function(t){if(e(this,I)){y(this,I,!1);return}t.target instanceof Node&&e(this,V).value?.contains(t.target)&&!e(this,K)&&this.open?this.open=!1:!this.open&&t.detail!==0&&(this.open=!0,this.isFilterable||r(this,W,X).call(this))},_=new WeakSet,bt=function(t){!(t.target instanceof ft)&&this.isFilterable?(t.preventDefault(),this.focus()):t.target instanceof ft||(t.preventDefault(),r(this,W,X).call(this))},G=new WeakSet,Ot=function(){if(e(this,p).value){this.open=!0,this.isFiltering=e(this,p).value.value.trim()!=="";for(const i of e(this,f,g))i.hidden=!i.label?.toLowerCase().includes(e(this,p).value?.value.toLowerCase().trim());const t=e(this,B,Q)?.at(0);t&&this.activeOption?.hidden&&(r(this,O,S).call(this),t.privateActive=!0,this.ariaActivedescendant=t.id),this.isEveryOptionFilteredOut=!e(this,B,Q)||e(this,B,Q).length===0}},tt=new WeakSet,yt=function(t){const i=this.selectedOptions.filter((l,a)=>a<=e(this,L)-1).at(-1);i&&t.key==="Backspace"&&this.multiple&&e(this,p).value&&e(this,p).value.selectionStart===0&&(i.selected=!1)},et=new WeakSet,At=function(t){t.target instanceof u&&(r(this,O,S).call(this),t.target.privateActive=!0)},it=new WeakSet,St=function(t){this.isFilterable&&t.preventDefault()},st=new WeakSet,Et=function(t){if(t.target instanceof u&&e(this,v,b)){r(this,O,S).call(this),t.target.privateActive=!0;for(const i of e(this,v,b))this.isFilterable&&i.privateActive?this.ariaActivedescendant=i.id:!this.isFilterable&&i===t.target&&i.focus()}},at=new WeakSet,$t=function(t){if(e(this,d).value&&t.target!==e(this,d).value&&(y(this,R,!0),e(this,d).value.selected=this.isAllSelected,e(this,d).value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.isFilterable&&e(this,p).value){e(this,p).value.value="",this.isFiltering=!1;for(const i of e(this,f,g))i.hidden=!1}t.target instanceof u&&(this.multiple?this.value=t.target.selected&&t.target.value?[...this.value,t.target.value]:this.value.filter(i=>t.target instanceof u&&i!==t.target.value):t.target.selected&&(this.value=t.target.value?[t.target.value]:[],this.open=!1,this.focus(),this.isFilterable&&e(this,p).value&&(this.isFiltering=!1))),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))},lt=new WeakSet,Ft=function(t){t.target instanceof u&&this.multiple&&t.target.selected&&t.target.value?this.value=[...this.value.filter(i=>i!==t.detail),t.target.value]:t.target instanceof u&&this.multiple?this.value=this.value.filter(i=>t.target instanceof u&&i!==t.detail):t.target instanceof u&&(this.value=t.target.value?[t.target.value]:[],this.open=!1,this.focus())},nt=new WeakSet,kt=function(){if(e(this,R)){y(this,R,!1);return}const t=this.isAllSelected;for(const i of e(this,f,g))i.selected=!t},rt=new WeakSet,Vt=async function(t){y(this,I,!0);for(const l of e(this,f,g))l.id===t&&(l.selected=!1,this.value=this.value.filter(a=>a!==l.value));const i=e(this,U).value?.querySelectorAll("glide-core-tag");if(i&&this.value.length>0){const l=[...i].findIndex(a=>a.dataset.id===t);await this.updateComplete,i[l<i.length-1?l+1:l-1]?.focus()}else this.focus()},n.formAssociated=!0,n.shadowRootOptions={...ut.shadowRootOptions,mode:"closed"},n.styles=Tt,o([m({reflect:!0,type:Boolean})],n.prototype,"disabled",2),o([m({attribute:"hide-label",reflect:!0,type:Boolean})],n.prototype,"hideLabel",2),o([m({reflect:!0})],n.prototype,"label",2),o([m({reflect:!0})],n.prototype,"name",2),o([m({reflect:!0,type:Boolean})],n.prototype,"open",2),o([m({reflect:!0})],n.prototype,"orientation",2),o([m({reflect:!0})],n.prototype,"placeholder",2),o([m({attribute:"select-all",reflect:!0,type:Boolean})],n.prototype,"selectAll",2),o([m({reflect:!0})],n.prototype,"size",1),o([m({reflect:!0,type:Boolean})],n.prototype,"multiple",1),o([m({reflect:!0,type:Boolean})],n.prototype,"required",2),o([m({type:Array})],n.prototype,"value",2),o([m({reflect:!0})],n.prototype,"variant",2),o([M()],n.prototype,"ariaActivedescendant",2),o([M()],n.prototype,"isCheckingValidity",2),o([M()],n.prototype,"isEveryOptionFilteredOut",2),o([M()],n.prototype,"isFilterable",2),o([M()],n.prototype,"isFiltering",2),o([M()],n.prototype,"isReportValidityOrSubmit",2),n=o([xt("glide-core-dropdown")],n);export{n as default};
+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{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.#f}" @mousedown="${this.#m}"><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.#E}" @keydown="${this.#y}" ${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="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.#A}" @mouseover="${this.#S}"><glide-core-dropdown-option class="select-all" data-test="select-all" label="Select All" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" @private-selected-change="${this.#C}" ${ref(this.#R)}></glide-core-dropdown-option><slot @private-selected-change="${this.#D}" @private-value-change="${this.#$}" @slotchange="${this.#G}" ${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.#_=!1,this.#k=!1,this.#i=!1,this.#I=!1,this.#F=!1,this.#R=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.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1)},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;#R;#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.#R.value)return[this.#R.value,...e]}get#L(){return this.#d.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#x(){const e=this.#d.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#R.value&&!this.#R.value.hidden&&e?[this.#R.value,...e]:e}#V(){if(this.#t)for(const e of this.#t)e.privateActive=!1}get#h(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#G(){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.#x?.at(0);this.lastSelectedOption?(this.#V(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.lastSelectedOption.id):e&&(this.#V(),e.privateActive=!0,this.ariaActivedescendant=e.id),this.#R.value&&(this.#k=!0,this.#R.value.selected=this.isAllSelected,this.#R.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])}#u(e){null!==e.relatedTarget||this.#I||(this.open=!1)}#v(e){if(this.disabled||this.readonly)return;if("Escape"===e.key)return this.open=!1,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))return e.preventDefault(),void(this.open=!0);if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.#F=!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.#x?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#x&&"number"==typeof t){e.preventDefault();const i=this.#x.at(t-1);return void(i&&0!==t&&(this.#V(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#x&&"number"==typeof t){e.preventDefault();const i=this.#x.at(t+1);return void(i&&(this.#V(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#x){e.preventDefault();const t=this.#x.at(0);return void(t&&(this.#V(),t.privateActive=!0,this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#x){e.preventDefault();const t=this.#x.at(-1);return void(t&&(this.#V(),t.privateActive=!0,this.ariaActivedescendant=t.id))}}}}#f(e){this.disabled||this.readonly||(this.#I?this.#I=!1:e.target instanceof Node&&this.#c.value?.contains(e.target)&&!this.#F&&this.open?this.open=!1:this.open||0===e.detail||(this.open=!0))}#m(e){e.target instanceof GlideCoreTag||!this.isFilterable?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#E(){if(this.#p.value){this.open=!0,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.#L?.at(0);e&&this.activeOption?.hidden&&(this.#V(),e.privateActive=!0,this.ariaActivedescendant=e.id),this.isEveryOptionFilteredOut=!this.#L||0===this.#L.length}}#y(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.#V(),e.target.privateActive=!0)}#A(e){this.isFilterable&&e.preventDefault()}#S(e){if(e.target instanceof GlideCoreDropdownOption&&this.#x){this.#V(),e.target.privateActive=!0;for(const e of this.#x)e.privateActive&&(this.ariaActivedescendant=e.id)}}#D(e){if(this.#R.value&&e.target!==this.#R.value&&(this.#k=!0,this.#R.value.selected=this.isAllSelected,this.#R.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.#_||(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.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()}#$(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]:[])}#C(){if(this.#k)return void(this.#k=!1);this.#_=!0;const e=this.isAllSelected;for(const t of this.#l)t.selected=!e;this.#_=!1,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}async#w(e){this.#I=!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;

package/dist/dropdown.option.d.ts

@@ -20,14 +20,12 @@ export default class GlideCoreDropdownOption extends LitElement {
     privateSize: 'small' | 'large';
     privateActive: boolean;
     privateIndeterminate: boolean;
-    privateIsFocusable: boolean;
     private get isMultiple();
     click(): void;
+    connectedCallback(): void;
     firstUpdated(): void;
     get value(): string;
     set value(value: string);
-    focus(): void;
     privateUpdateCheckbox(): Promise<void>;
     render(): import("lit").TemplateResult<1>;
-    constructor();
 }

package/dist/dropdown.option.js

@@ -1 +1 @@
-"use strict";var F=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var r=(i,t,e,a)=>{for(var o=a>1?void 0:a?L(t,e):t,k=i.length-1,$;k>=0;k--)($=i[k])&&(o=(a?$(t,e,o):$(o))||o);return a&&o&&F(t,e,o),o};var x=(i,t,e)=>{if(!t.has(i))throw TypeError("Cannot "+e)};var l=(i,t,e)=>(x(i,t,"read from private field"),e?e.call(i):t.get(i)),h=(i,t,e)=>{if(t.has(i))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(i):t.set(i,e)},E=(i,t,e,a)=>(x(i,t,"write to private field"),a?a.call(i,e):t.set(i,e),e);var M=(i,t,e)=>(x(i,t,"access private method"),e);var c,d,n,u,f,S,b,A,g,U;import{LitElement as I,html as y}from"lit";import{classMap as m}from"lit/directives/class-map.js";import{createRef as R,ref as z}from"lit/directives/ref.js";import{customElement as T,property as v,state as p}from"lit/decorators.js";import{when as B}from"lit/directives/when.js";import"./checkbox.js";import H from"./icons/checked.js";import q from"./dropdown.option.styles.js";let s=class extends I{constructor(){super();h(this,f);h(this,b);h(this,g);this.privateMultiple=!1;this.privateSize="large";this.privateActive=!1;this.privateIndeterminate=!1;this.privateIsFocusable=!0;h(this,c,R());h(this,d,R());h(this,n,!1);h(this,u,"");this.id=window.crypto.randomUUID()}get selected(){return l(this,n)}set selected(e){if(E(this,n,e),this.isMultiple)l(this,c).value&&(l(this,c).value.checked=e);else for(const a of l(this,f,S))a!==this&&this.selected&&a.selected&&(a.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)}firstUpdated(){l(this,c).value&&(l(this,c).value.checked=this.selected)}get value(){return l(this,u)}set value(e){const a=l(this,u);E(this,u,e),this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:a}))}focus(){l(this,d).value?.focus()}async privateUpdateCheckbox(){await this.updateComplete,l(this,c).value&&(l(this,c).value.checked=this.selected)}render(){return y`<div aria-selected="${this.selected?"true":"false"}" class="${m({component:!0,active:this.privateActive,[this.privateSize]:!0})}" data-test="component" tabindex="${this.privateActive&&this.privateIsFocusable?"0":"-1"}" role="option" @click="${M(this,g,U)}" ${z(l(this,d))}>${B(this.isMultiple,()=>y`<glide-core-checkbox class="${m({checkbox:!0,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-variant="minimal" value="${this.value}" ?indeterminate="${this.privateIndeterminate}" ?internally-inert="${!this.privateIsFocusable}" @change="${M(this,b,A)}" ${z(l(this,c))}></glide-core-checkbox>`,()=>y`<div class="${m({option:!0,[this.privateSize]:!0})}"><div class="${m({"checked-icon":!0,visible:this.selected})}">${H}</div><slot name="icon"></slot>${this.label}</div>`)}</div>`}};c=new WeakMap,d=new WeakMap,n=new WeakMap,u=new WeakMap,f=new WeakSet,S=function(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]},b=new WeakSet,A=function(){this.selected=!this.selected},g=new WeakSet,U=function(e){e.target!==l(this,c).value&&!this.isMultiple&&!this.selected&&(this.selected=!0)},s.shadowRootOptions={...I.shadowRootOptions,mode:"closed"},s.styles=q,r([v({reflect:!0})],s.prototype,"label",2),r([v({attribute:"private-multiple",type:Boolean})],s.prototype,"privateMultiple",2),r([v({type:Boolean})],s.prototype,"selected",1),r([v({attribute:"private-size",reflect:!0})],s.prototype,"privateSize",2),r([p()],s.prototype,"privateActive",2),r([p()],s.prototype,"privateIndeterminate",2),r([p()],s.prototype,"privateIsFocusable",2),r([p()],s.prototype,"isMultiple",1),r([v()],s.prototype,"value",1),s=r([T("glide-core-dropdown-option")],s);export{s as default};
+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;

package/dist/dropdown.option.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     .component {
       align-items: center;
       border-radius: var(--glide-core-spacing-sm);
@@ -61,4 +61,4 @@
     .indeterminate-icon {
       display: none;
     }
-  `];
+  `];

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

@@ -0,0 +1,59 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-dropdown-option')).to.equal(GlideCoreDropdownOption);
+});
+it('has defaults', async () => {
+    // Required attributes are supplied and not asserted below. The idea is that
+    // this test shouldn't fail to typecheck if these templates are eventually
+    // typechecked, which means supplying required attributes and slots.
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+    ></glide-core-dropdown-option>`);
+    expect(component.privateMultiple).to.equal(false);
+    expect(component.getAttribute('private-multiple')).to.equal(null);
+    expect(component.privateSize).to.equal('large');
+    expect(component.getAttribute('private-size')).to.equal('large');
+    // None are reflected, so no attribute assertions are necessary.
+    expect(component.privateActive).to.equal(false);
+    expect(component.privateIndeterminate).to.equal(false);
+    expect(component.selected).to.equal(false);
+    expect(component.value).to.equal('');
+});
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+    ></glide-core-dropdown-option>`);
+    expect(component.shadowRoot?.textContent?.trim()).to.equal('Label');
+});
+it('can have an icon', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option label="Label" value="value">
+      <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
+
+        <path
+          d="M12 16L12 12"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+
+        <circle cx="12" cy="8" r="1" fill="currentColor" />
+      </svg>
+    </glide-core-dropdown-option>`);
+    const icon = component?.shadowRoot
+        ?.querySelector('slot[name="icon"]')
+        ?.assignedElements()
+        .at(0);
+    expect(icon instanceof SVGElement).to.be.true;
+});
+it('can have a value', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+    ></glide-core-dropdown-option>`);
+    expect(component.getAttribute('value')).to.equal('value');
+    expect(component.value).to.equal('value');
+});