@crowdstrike/glide-core 0.9.1 → 0.9.2

package/dist/accordion.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".summary:focus-visible")}
+  `,css`
     .component {
       border-radius: 0.625rem;
       box-shadow: var(--glide-core-shadow-sm);
@@ -24,10 +26,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         outline: none;
       }
 
-      &:focus-visible {
-        ${focusOutline};
-      }
-
       &::marker,
       &::-webkit-details-marker {
         display: none;

package/dist/button-group.button.styles.js

@@ -1,4 +1,7 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${focusOutline(".component:focus-visible")}
+    ${visuallyHidden(".label.visually-hidden")}
+  `,css`
     :host(:first-of-type) {
       .component {
         &.horizontal {
@@ -58,8 +61,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         background-color: var(--glide-core-surface-selected);
         border-color: var(--glide-core-border-focus);
         color: var(--glide-core-color-white);
-
-        ${focusOutline};
         outline-offset: 2px;
 
         /* Create a stacking context so the outline isn't obscured by other elements. */
@@ -115,10 +116,4 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         }
       }
     }
-
-    .label {
-      &.visually-hidden {
-        ${visuallyHidden};
-      }
-    }
   `];

package/dist/button-group.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${visuallyHidden(".label")}
+  `,css`
     .component {
       border: 1px solid var(--glide-core-border-base);
       border-radius: 0.75rem;
@@ -13,8 +15,6 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
         checking for the entire component.
       */
       color: var(--glide-core-color-white);
-
-      ${visuallyHidden};
     }
 
     .container {

package/dist/button.d.ts

@@ -25,6 +25,7 @@ export default class GlideCoreButton extends LitElement {
     variant: 'primary' | 'secondary' | 'tertiary';
     size: 'large' | 'small';
     get form(): HTMLFormElement | null;
+    click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     constructor();

package/dist/button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};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{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./button.styles.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get form(){return this.#t.form}firstUpdated(){owSlot(this.#e.value)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,"has-prefix":this.hasPrefixSlot,"has-suffix":this.hasSuffixSlot})}" type="${this.type}" ?disabled="${this.disabled}" @click="${this.#o}" @keydown="${this.#i}"><slot name="prefix" @slotchange="${this.#r}" ${ref(this.#s)}></slot><slot @slotchange="${this.#a}" ${ref(this.#e)}></slot><slot name="suffix" @slotchange="${this.#l}" ${ref(this.#n)}></slot></button>`}constructor(){super(),this.ariaExpanded=null,this.ariaHasPopup=null,this.ariaControls=null,this.disabled=!1,this.type="button",this.variant="primary",this.size="large",this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef(),this.#s=createRef(),this.#n=createRef(),this.#t=this.attachInternals()}#e;#t;#s;#n;#o(){"button"!==this.type&&("submit"!==this.type?this.form?.reset():this.form?.requestSubmit())}#a(){owSlot(this.#e.value)}#i(t){["Enter"].includes(t.key)&&(t.preventDefault(),this.#o())}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)}#l(){const t=this.#n.value?.assignedNodes();this.hasSuffixSlot=!!(t&&t.length>0)}};__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreButton.prototype,"ariaHasPopup",void 0),__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreButton.prototype,"ariaControls",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixSlot",void 0),GlideCoreButton=__decorate([customElement("glide-core-button")],GlideCoreButton);export default GlideCoreButton;
+var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,l=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(l=(s<3?r(l):s>3?r(e,o,l):r(e,o))||l);return s>3&&l&&Object.defineProperty(e,o,l),l};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{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./button.styles.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get form(){return this.#t.form}click(){this.#e.value?.click()}firstUpdated(){owSlot(this.#o.value)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,"has-prefix":this.hasPrefixSlot,"has-suffix":this.hasSuffixSlot})}" type="${this.type}" ?disabled="${this.disabled}" @click="${this.#i}" ${ref(this.#e)}><slot name="prefix" @slotchange="${this.#r}" ${ref(this.#s)}></slot><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot><slot name="suffix" @slotchange="${this.#a}" ${ref(this.#n)}></slot></button>`}constructor(){super(),this.ariaExpanded=null,this.ariaHasPopup=null,this.ariaControls=null,this.disabled=!1,this.type="button",this.variant="primary",this.size="large",this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef(),this.#o=createRef(),this.#s=createRef(),this.#n=createRef(),this.#t=this.attachInternals()}#e;#o;#t;#s;#n;#i(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#l(){owSlot(this.#o.value)}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)}#a(){const t=this.#n.value?.assignedNodes();this.hasSuffixSlot=!!(t&&t.length>0)}};__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreButton.prototype,"ariaHasPopup",void 0),__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreButton.prototype,"ariaControls",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixSlot",void 0),GlideCoreButton=__decorate([customElement("glide-core-button")],GlideCoreButton);export default GlideCoreButton;

package/dist/button.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".component:focus-visible")}
+  `,css`
     :host {
       /* Contains elements with "padding" and "width". Inline by default. */
       display: inline-block;
@@ -28,10 +30,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         outline: none;
       }
 
-      &:focus-visible {
-        ${focusOutline};
-      }
-
       &:disabled {
         cursor: not-allowed;
         opacity: 1;

package/dist/button.test.events.js

@@ -4,23 +4,99 @@ import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreButton from './button.js';
 GlideCoreButton.shadowRootOptions.mode = 'open';
-it('dispatches an event when clicked and type="button"', async () => {
+it('dispatches a "click" event when clicked', async () => {
     const component = await fixture(html `
     <glide-core-button type="button">Button</glide-core-button>
   `);
-    const clickEvent = oneEvent(component, 'click');
-    component.shadowRoot?.querySelector('button')?.click();
-    const event = await clickEvent;
-    expect(event instanceof Event).to.be.true;
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(component, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches a "click" event on Enter', async () => {
+    const component = await fixture(html `
+    <glide-core-button type="button">Button</glide-core-button>
+  `);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(component, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
 });
-it('dispatches an event when hitting "enter" and type="button"', async () => {
+it('dispatches a "click" event on Space', async () => {
     const component = await fixture(html `
     <glide-core-button type="button">Button</glide-core-button>
   `);
-    const keyDownEvent = oneEvent(component, 'keydown');
     component.focus();
-    await sendKeys({ press: 'Enter' });
-    const event = await keyDownEvent;
+    sendKeys({ press: ' ' });
+    const event = await oneEvent(component, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches a "reset" event on click', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(form, 'reset');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches a "reset" event on Enter', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(form, 'reset');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches a "reset" event on Space', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    component.focus();
+    sendKeys({ press: ' ' });
+    const event = await oneEvent(form, 'reset');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches a "submit" event on click', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    form.addEventListener('submit', (event) => event.preventDefault());
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(form, 'submit');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches a "submit" event on Enter', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    form.addEventListener('submit', (event) => event.preventDefault());
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(form, 'submit');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches a "submit" event on Space', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    form.addEventListener('submit', (event) => event.preventDefault());
+    component.focus();
+    sendKeys({ press: ' ' });
+    const event = await oneEvent(form, 'submit');
     expect(event instanceof Event).to.be.true;
-    expect(event.key).to.equal('Enter');
 });

package/dist/checkbox.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(a<3?r(s):a>3?r(t,i,s):r(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};import"./label.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{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="indeterminate-icon"><rect x="0.5" y="0.5" width="13" height="13" rx="3.5"/><path d="M3 5C3 3.89543 3.89543 3 5 3H9.79289C10.2383 3 10.4614 3.53857 10.1464 3.85355L3.85355 10.1464C3.53857 10.4614 3 10.2383 3 9.79289V5Z" fill="currentColor"/></svg>`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get form(){return this.#i.form}blur(){this.#o.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#i.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#r=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#r.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#a),this.#r?.disconnect()}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#i.setValidity({valueMissing:!0}," ",this.#o.value):this.#i.setValidity({})),this.#i.validity}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#a)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">${when("minimal"===this.privateVariant,(()=>html`<label class="label-and-input-and-checkbox" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${this.#s}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#l}" @input="${this.#l}" ${ref(this.#o)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#s})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><glide-core-tooltip class="label-tooltip" offset="${this.privateLabelTooltipOffset}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateShowLabelTooltip}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" slot="target" ${ref(this.#n)}>${this.label}</div></glide-core-tooltip></label>`),(()=>html`<glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#s}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="input-and-checkbox" slot="control"><input aria-describedby="summary description" aria-invalid="${this.#s}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#l}" @input="${this.#l}" @blur="${this.#d}" ${ref(this.#o)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#s})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><div id="summary" slot="summary">${this.summary}</div><slot id="description" name="description" slot="description"></slot></glide-core-private-label>`))}</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#i.reportValidity();return this.requestUpdate(),e}setValidity(e,t,i){return this.#i.setValidity(e,t,i)}get willValidate(){return this.#i.willValidate}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.required=!1,this.value="",this.isReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#e="",this.#n=createRef(),this.#a=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#i=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#i;#r;#e;#n;#a;get#s(){return"minimal"===this.privateVariant?!this.validity.valid&&this.isReportValidityOrSubmit:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#d(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#l(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#t(){this.#n.value&&(this.isLabelOverflow=this.#n.value.scrollWidth>this.#n.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(a<3?r(s):a>3?r(t,i,s):r(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};import"./label.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{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="indeterminate-icon"><rect x="0.5" y="0.5" width="13" height="13" rx="3.5"/><path d="M3 5C3 3.89543 3.89543 3 5 3H9.79289C10.2383 3 10.4614 3.53857 10.1464 3.85355L3.85355 10.1464C3.53857 10.4614 3 10.2383 3 9.79289V5Z" fill="currentColor"/></svg>`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get form(){return this.#i.form}blur(){this.#o.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#i.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#r=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#r.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#a),this.#r?.disconnect()}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#i.setValidity({valueMissing:!0}," ",this.#o.value):this.#i.setValidity({})),this.#i.validity}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#a)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">${when("minimal"===this.privateVariant,(()=>html`<label class="label-and-input-and-checkbox" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${this.#s}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#l}" @input="${this.#l}" @keydown="${this.#n}" ${ref(this.#o)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#s})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><glide-core-tooltip class="label-tooltip" offset="${this.privateLabelTooltipOffset}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateShowLabelTooltip}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" slot="target" ${ref(this.#d)}>${this.label}</div></glide-core-tooltip></label>`),(()=>html`<glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#s}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="input-and-checkbox" slot="control"><input aria-describedby="summary description" aria-invalid="${this.#s}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @blur="${this.#h}" @change="${this.#l}" @input="${this.#l}" @keydown="${this.#n}" ${ref(this.#o)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#s})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><div id="summary" slot="summary">${this.summary}</div><slot id="description" name="description" slot="description"></slot></glide-core-private-label>`))}</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#i.reportValidity();return this.requestUpdate(),e}setValidity(e,t,i){return this.#i.setValidity(e,t,i)}get willValidate(){return this.#i.willValidate}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.required=!1,this.value="",this.isReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#e="",this.#d=createRef(),this.#a=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#i=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#i;#r;#e;#d;#a;get#s(){return"minimal"===this.privateVariant?!this.validity.valid&&this.isReportValidityOrSubmit:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#h(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#l(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#n(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#d.value&&(this.isLabelOverflow=this.#d.value.scrollWidth>this.#d.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;

package/dist/checkbox.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline("input:focus-visible ~ .checkbox, input:focus ~ .checkbox.error")}
+  `,css`
     /*
 Most states are handled on the host. But ":checked" and ":indeterminate" are
 handled on the input because browsers don't support those classes on the host.
@@ -47,6 +49,7 @@ when browsers support them.
       flex-shrink: 0; /* Don't shrink when the summary wraps. */
       inline-size: 100%;
       justify-content: center;
+      transition: box-shadow 200ms ease-in-out;
 
       &.error:not(.disabled) {
         border-color: var(--glide-core-status-error);
@@ -83,11 +86,6 @@ when browsers support them.
         border-color: var(--glide-core-surface-primary-disabled);
       }
 
-      &:focus-visible ~ .checkbox,
-      &:focus ~ .checkbox.error {
-        ${focusOutline};
-      }
-
       &:is(:checked, :indeterminate):not(:disabled) ~ .checkbox {
         background-color: var(--glide-core-surface-primary);
         border-color: transparent;
@@ -97,6 +95,24 @@ when browsers support them.
         background-color: var(--glide-core-surface-primary-disabled);
         border-color: transparent;
       }
+
+      &:checked ~ .checkbox > .checked-icon {
+        visibility: visible;
+
+        .check {
+          /*
+            Setting the animated offset to 48 is by design and aligns with the offset and array
+            properties below. 48 was chosen to ensure the animation goes from left-to-right
+            rather than right-to-left. Since our starting location is at 24 below we begin
+            at the left-most corner and need to span the entire viewbox of the SVG.
+
+            To do this, we'll multiply 24 by 2, which is the entire length of the viewbox
+            going in the opposite direction so that it'll animate from left-to-right.
+          */
+          stroke-dashoffset: 48;
+          transition: stroke-dashoffset 300ms cubic-bezier(0.32, 0, 0.67, 0);
+        }
+      }
     }
 
     .checked-icon {
@@ -104,13 +120,28 @@ when browsers support them.
 
       align-items: center;
       block-size: 100%;
-      display: none;
       inline-size: 100%;
       inset-block-start: 0;
       inset-inline-start: 0;
       justify-content: center;
       pointer-events: none;
       position: absolute;
+
+      /* We must rely on 'visibility: hidden' over 'display: none' for the animation transition to play properly. */
+      visibility: hidden;
+
+      .check {
+        /*
+          Safari doesn't support rem values for these CSS properties, otherwise we'd use calc() here.
+
+          With the path in our SVG, increasing the offset or array from 0 to 24 actually animates
+          it from right-to-left, which isn't the direction we want. To get it to go the correct
+          direction, from left-to-right, we have to begin at 24, which is the end of the SVG
+          viewbox.
+        */
+        stroke-dasharray: 24;
+        stroke-dashoffset: 24;
+      }
     }
 
     .indeterminate-icon {
@@ -128,4 +159,10 @@ when browsers support them.
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      .checked-icon .check {
+        transition: none !important;
+      }
+    }
   `];

package/dist/checkbox.test.form.js

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreCheckbox from './checkbox.js';
+import sinon from 'sinon';
 GlideCoreCheckbox.shadowRootOptions.mode = 'open';
 it('exposes standard form control properties and methods', async () => {
     const form = document.createElement('form');
@@ -115,3 +117,17 @@ it('has no `formData` value when checked but without a `value`', async () => {
     const formData = new FormData(form);
     expect(formData.get('name')).to.be.null;
 });
+it('submits its form on Enter', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
+    });
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(1);
+});

package/dist/checkbox.test.interactions.js

@@ -121,3 +121,11 @@ it('has no tooltip when minimal and with a short label', async () => {
     const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
     expect(tooltip?.checkVisibility()).to.be.false;
 });
+it('remains unchecked when its "click" event is canceled', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.addEventListener('click', (event) => {
+        event.preventDefault();
+    });
+    component.click();
+    expect(component.checked).to.be.false;
+});

package/dist/drawer.js

@@ -1 +1 @@
-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;
+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",{bubbles:!0}))}),{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",{bubbles:!0}))}),{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/dropdown.d.ts

@@ -44,13 +44,14 @@ export default class GlideCoreDropdown extends LitElement {
     get value(): string[];
     set value(value: string[]);
     variant?: 'quiet';
+    private get activeOption();
+    checkValidity(): boolean;
+    click(): void;
     private get selectedOptions();
     private get lastSelectedOption();
     private get isAllSelected();
     private get isSomeSelected();
-    private get activeOption();
     private get internalLabel();
-    checkValidity(): boolean;
     connectedCallback(): void;
     createRenderRoot(): ShadowRoot;
     disconnectedCallback(): void;
@@ -69,5 +70,6 @@ export default class GlideCoreDropdown extends LitElement {
     private isCheckingValidity;
     private isFilterable;
     private isFiltering;
+    private isOptionsHidden;
     private isReportValidityOrSubmit;
 }

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.#t()}get size(){return this.#o}set size(e){if(this.#o=e,this.#s)for(const t of this.#s)t.privateSize=e}get multiple(){return this.#n}set multiple(e){const t=this.#n&&!e,i=!this.#n&&e;this.#n=e;for(const i of this.#a)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#r=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#r}set value(e){this.#r=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.#a)t.selected=e.some((e=>e&&e===t.value))}get selectedOptions(){return this.#a.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#a.findLast((e=>e.selected))}get isAllSelected(){return this.#a.filter((({selected:e})=>e)).length===this.#a.length}get isSomeSelected(){return this.#a.some((({selected:e})=>e))}get activeOption(){return this.#s?.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:html`<span class="placeholder">${this.placeholder}</span>`}checkValidity(){this.isCheckingValidity=!0;const e=this.#d.checkValidity();return this.isCheckingValidity=!1,e}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#p,{capture:!0})}createRenderRoot(){return this.#h=super.createRenderRoot(),this.#h}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#c),document.removeEventListener("click",this.#p,{capture:!0})}firstUpdated(){owSlotType(this.#u.value,[GlideCoreDropdownOption,Text]),this.#m.value&&(this.#m.value.popover="manual"),this.open&&!this.disabled&&this.#i()}focus(e){this.isFilterable?this.#f.value?.focus(e):this.#v.value?.focus(e)}get form(){return this.#d.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#d.setValidity({valueMissing:!0}," ",this.#f.value):this.#d.setValidity({}),this.#d.validity}get willValidate(){return this.#d.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#c)}formResetCallback(){for(const e of this.#a){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#a.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#r=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.#w}" ?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.#b}" @keydown="${this.#E}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#w,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#y}" @mousedown="${this.#O}" ${ref(this.#A)}><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.#R)}>${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.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.#D}" @keydown="${this.#$}" ${ref(this.#f)}>`))} ${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-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.#v)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>html`<svg aria-label="${this.#G.term("open")}" class="${classMap({"caret-icon":!0,disabled:this.disabled,readonly:this.readonly})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div></div><div aria-labelledby="${this.isFilterable?"input":"button"}" class="options" data-test="options" id="options" role="listbox" @click="${this.#k}" @input="${this.#_}" @focusin="${this.#F}" @mousedown="${this.#I}" @mouseover="${this.#V}" @private-selected-change="${this.#L}" @private-value-change="${this.#x}" ${ref(this.#m)}><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#G.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.#u)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#d.reportValidity();return this.requestUpdate(),e}constructor(){super(),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.isReportValidityOrSubmit=!1,this.#v=createRef(),this.#u=createRef(),this.#A=createRef(),this.#f=createRef(),this.#e=!1,this.#n=!1,this.#l=!1,this.#M=!1,this.#z=!1,this.#T=!1,this.#G=new LocalizeController(this),this.#m=createRef(),this.#N=createRef(),this.#o="large",this.#C=3,this.#R=createRef(),this.#r=[],this.#p=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.#c=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#d=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;#B;#u;#A;#f;#d;#e;#n;#l;#M;#z;#T;#G;#m;#N;#h;#o;#C;#R;#r;#p;#c;#H(){if(this.#s)for(const e of this.#s)e.privateActive=!1}#t(){this.#B?.(),this.#m.value?.hidePopover(),this.ariaActivedescendant=""}get#a(){return this.#u.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#s(){const e=this.#u.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#N.value)return[this.#N.value,...e]}get#U(){return this.#u.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#q(){const e=this.#u.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#N.value&&!this.#N.value.hidden&&e?[this.#N.value,...e]:e}get#w(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#g(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#j(){if(owSlotType(this.#u.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#a.length>10,this.#s)for(const e of this.#s)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#q?.at(0);this.lastSelectedOption?(this.#H(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#H(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#N.value&&(this.#N.value.selected=this.isAllSelected),this.multiple?this.#r=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#r=[this.lastSelectedOption.value]),this.requestUpdate()}#b(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#h?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#M&&(this.open=!1),this.#g()}#E(e){if(this.disabled||this.readonly)return;if("Escape"===e.key)return this.open=!1,void this.focus();const t=e.target===this.#v.value||e.target===this.#f.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.#T=!0,"Enter"===e.key||" "===e.key&&!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.#H(),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.#H(),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.#H(),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.#H(),t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id))}}}}#y(e){this.disabled||this.readonly||(this.#M?this.#M=!1:e.target instanceof Node&&this.#v.value?.contains(e.target)&&!this.#T&&this.open?this.open=!1:!this.open&&0!==e.detail&&this.activeOption&&(this.open=!0))}#O(e){e.target instanceof GlideCoreTag||!this.isFilterable?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#D(e){if(ow(this.#f.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.activeOption){this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#f.value.value.trim();for(const e of this.#a)e.hidden=!e.label?.toLowerCase().includes(this.#f.value?.value.toLowerCase().trim());const e=this.#U?.at(0);e&&this.activeOption?.hidden&&(this.#H(),e.privateActive=!0),this.open=!(!this.#U||0===this.#U.length)}}#$(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#C-1)).at(-1);t&&"Backspace"===e.key&&this.multiple&&this.#f.value&&0===this.#f.value.selectionStart&&(t.selected=!1)}#k(e){e.target instanceof GlideCoreDropdownOption&&!e.target.selected&&(e.target.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.#H(),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.isFilterable&&e.preventDefault()}#V(e){if(e.target instanceof GlideCoreDropdownOption&&this.#q){this.#H(),e.target.privateActive=!0;for(const e of this.#q)e.privateActive&&(this.ariaActivedescendant=e.id)}}#L(e){e.target!==this.#N.value&&!this.#z&&this.#N.value&&(this.#N.value.selected=this.isAllSelected),e.target instanceof GlideCoreDropdownOption&&(this.multiple?this.#r=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.#r=e.target.value?[e.target.value]:[])),this.requestUpdate()}#x(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#r=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#r=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#r=e.target.value?[e.target.value]:[])}async#S(e){this.#M=!0;for(const t of this.#a)t.id===e&&(t.selected=!1,this.#r=this.value.filter((e=>e!==t.value)));const t=this.#R.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.#z=!0;for(const e of this.#a)e.selected=this.#N.value.selected;this.#z=!1}#i(){this.#B?.(),this.#A.value&&this.#m.value&&(this.#B=autoUpdate(this.#A.value,this.#m.value,(()=>{(async()=>{if(this.#A.value&&this.#m.value){const{x:e,y:t,placement:i}=await computePosition(this.#A.value,this.#m.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.#m.value.dataset.placement=i,Object.assign(this.#m.value.style,{left:`${e}px`,top:`${t}px`}),this.#m.value?.showPopover(),this.activeOption&&(this.ariaActivedescendant=this.activeOption.id)}})()})))}#K(){if(this.isFilterable&&this.#f.value){this.#f.value.value="",this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",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,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;
+var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import"./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(){return this.isFilterable||0!==this.selectedOptions.length?this.multiple||this.isFilterable||!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.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.#w}" ?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.#b}" @keydown="${this.#E}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#w,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.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-hidden="${this.isFilterable}" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>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.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.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;#T;#m;#R;#o;#p;#e;#a;#l;#H;#M;#z;#k;#v;#N;#u;#s;#C;#A;#d;#c;#f;#B(){if(this.#n)for(const e of this.#n)e.privateActive=!1}#t(){this.#T?.(),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#w(){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.#B(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#B(),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()}#b(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.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.#B(),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.#B(),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.#B(),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.#B(),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){e.target instanceof GlideCoreTag||!this.isFilterable?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.#B(),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.#B(),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.isFilterable&&e.preventDefault()}#V(e){if(e.target instanceof GlideCoreDropdownOption&&this.#q){this.#B(),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.#T?.(),this.#R.value&&this.#v.value&&(this.#T=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.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({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;

package/dist/dropdown.option.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(s=(r<3?l(s):r>3?l(t,i,s):l(t,i))||s);return r>3&&s&&Object.defineProperty(t,i,s),s};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.#r=!1,this.#s=""}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.#r}set selected(e){if(this.#r=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.#s}set value(e){const t=this.#s;this.#s=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})}"><div class="${classMap({"checked-icon":!0,visible:this.selected})}">${checkedIcon}</div><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>`))}</div>`}#e;#t;#i;#n;#o;#l;#r;#s;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.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})}"><div class="${classMap({"checked-icon":!0,visible:this.selected})}">${checkedIcon}</div><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>`))}</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;

package/dist/dropdown.option.styles.js

@@ -4,6 +4,7 @@ import{css}from"lit";export default[css`
       block-size: var(--private-option-height);
       border-radius: var(--glide-core-spacing-sm);
       max-inline-size: 21.875rem;
+      transition: background-color 100ms ease-in-out;
       user-select: none;
 
       &.active {