@crowdstrike/glide-core 0.6.5 → 0.8.0

package/README.md

@@ -1,13 +1,21 @@
-# Glide Core Components
+<p align="center">
+  <a href="https://glide-core.crowdstrike-ux.workers.dev">
+    <img src="https://github.com/CrowdStrike/glide-core/blob/main/.github/glide-core.png?raw=true" alt="Glide Core logo" width="300" />
+  </a>
+</p>
+
+<h1 align="center">The Glide Design System from CrowdStrike</h1>
+
+<br>
 
 This package contains Web Components built with [Lit](https://lit.dev/).
 
-## Installation
+## Usage
 
-### 1. Add Lit as a dependency
+### 1. Add this package and Lit as dependencies
 
 ```bash
-pnpm i @crowdstrike/glide-core lit
+pnpm install @crowdstrike/glide-core lit
 ```
 
 ### 2. Import the fonts and variables
@@ -29,7 +37,38 @@ import '@crowdstrike/glide-core/button.js';
 <glide-core-button size="small">Button</glide-core-button>
 ```
 
-## Adding CSS Custom Properties
+## Development
+
+### Contributing
+
+Follow our [Contribution Guidelines](./CONTRIBUTING.md).
+
+### Getting started
+
+First you'll need to install the dependencies for the repository. We use [PNPM](https://pnpm.io). Run the following command from the root of the repository:
+
+```bash
+pnpm install
+pnpm dlx playwright install
+```
+
+> [!NOTE]
+>
+> - If you have `ignore-scripts=true` in your `~/.npmrc`, you'll also need to run `pnpm prepare`, which will install some Git hooks for linting, formatting, typechecking, and testing.
+> - We recommend using [Corepack](https://pnpm.io/installation#using-corepack) to help manage the version of `pnpm` installed in this repository; however, it is not a requirement.
+
+### Running Storybook
+
+Run the following command from the root of the repository:
+
+```bash
+pnpm start
+```
+
+After Storybook's build completes, your browser should navigate to the Storybook instance.
+If this doesn't happen automatically, a URL will be shown in your terminal for you to browse to.
+
+### Adding CSS Custom Properties
 
 Glide Core uses scripts from [@crowdstrike/design-tokens](https://www.npmjs.com/package/@crowdstrike/design-tokens) to import variables from Figma and transform them into CSS custom properties.
 This allows us to maintain a single source of truth for color, typography, spacing, etc.

package/dist/accordion.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './accordion.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreAccordion from './accordion.js';

package/dist/accordion.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './accordion.js';
 import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import GlideCoreAccordion from './accordion.js';

package/dist/button-group.button.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreButtonGroupButton from './button-group.button.js';

package/dist/button-group.button.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button-group.button.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';

package/dist/button-group.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button-group.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreButtonGroup from './button-group.js';

package/dist/button-group.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button-group.button.js';
 import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';

package/dist/button.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button.js';
 import { ArgumentError } from 'ow';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';

package/dist/button.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';

package/dist/button.test.form.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';

package/dist/checkbox-group.d.ts

@@ -39,6 +39,7 @@ export default class GlideCoreCheckboxGroup extends LitElement {
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
     constructor();
+    private isBlurring;
     private isCheckingValidity;
     private isReportValidityOrSubmit;
 }

package/dist/checkbox-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,l=arguments.length,s=l<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--)(r=e[a])&&(s=(l<3?r(s):l>3?r(t,i,s):r(t,i))||s);return l>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{LitElement,html}from"lit";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,owSlotType}from"./library/ow.js";import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}checkValidity(){return this.isCheckingValidity=!0,this.#o.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox]),this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal"}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e?this.#o.setValidity({valueMissing:!0}," ",this.#s.value):this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}get willValidate(){return this.#o.willValidate}focus(e){this.#t.at(0)?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div class="component" data-test="component" ${ref(this.#s)}><glide-core-label split="${ifDefined(this.privateSplit??void 0)}" ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${this.#a}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control"><slot class="checkboxes" @change="${this.#d}" @slotchange="${this.#c}" ${ref(this.#l)}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#o.reportValidity()}constructor(){super(),this.hideLabel=!1,this.value=[],this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#s=createRef(),this.#l=createRef(),this.#e=!1,this.#i=!1,this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#s;#l;#o;#e;#i;get#t(){return this.#l.value?this.#l.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#a(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#d(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#c(){owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({type:Array})],GlideCoreCheckboxGroup.prototype,"value",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,i,l):r(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import"./label.js";import{LitElement,html}from"lit";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,owSlotType}from"./library/ow.js";import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(owSlot(this.#s.value),owSlotType(this.#s.value,[GlideCoreCheckbox]),this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal",e.addEventListener("blur",this.#l.bind(this))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e?this.#o.setValidity({valueMissing:!0}," ",this.#a.value):this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}get willValidate(){return this.#o.willValidate}focus(e){this.#t.at(0)?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div class="component" data-test="component" ${ref(this.#a)}><glide-core-label split="${ifDefined(this.privateSplit??void 0)}" ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${this.#d}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control"><slot class="checkboxes" @change="${this.#c}" @slotchange="${this.#n}" ${ref(this.#s)}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.hideLabel=!1,this.value=[],this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#a=createRef(),this.#s=createRef(),this.#e=!1,this.#i=!1,this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#a;#s;#o;#e;#i;get#t(){return this.#s.value?this.#s.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#h(){for(const e of this.#t)e.isReportValidityOrSubmit=!0}#l(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#h()}#c(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#n(){owSlot(this.#s.value),owSlotType(this.#s.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({type:Array})],GlideCoreCheckboxGroup.prototype,"value",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

package/dist/checkbox-group.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './checkbox.js';
 import { ArgumentError } from 'ow';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';

package/dist/checkbox-group.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './checkbox.js';
 import * as sinon from 'sinon';
 import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';

package/dist/checkbox-group.test.focus.js

@@ -1,7 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './checkbox.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreCheckbox from './checkbox.js';
 import GlideCoreCheckboxGroup from './checkbox-group.js';
 GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
+GlideCoreCheckbox.shadowRootOptions.mode = 'open';
 it('focuses the first checkbox when `focus` is called', async () => {
     const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
       <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
@@ -43,3 +47,23 @@ it('does not focus the input after `checkValidity` is called', async () => {
     component.checkValidity();
     expect(document.activeElement).to.not.equal(component.querySelector('glide-core-checkbox'));
 });
+it('reports validity of checkboxes if blurred', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox1"></glide-core-checkbox>
+      <glide-core-checkbox label="Checkbox2"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    component.focus();
+    const checkboxes = component.querySelectorAll('glide-core-checkbox');
+    expect(document.activeElement === checkboxes[0]).to.be.true;
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement === checkboxes[1]).to.be.true;
+    expect(checkboxes[0].isReportValidityOrSubmit).to.equal(false);
+    expect(checkboxes[1].isReportValidityOrSubmit).to.equal(false);
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement === document.body).to.be.true;
+    expect(component.validity.valid).to.equal(false);
+    expect(checkboxes[0].validity.valid).to.equal(false);
+    expect(checkboxes[0].isReportValidityOrSubmit).to.equal(true);
+    expect(checkboxes[1].validity.valid).to.equal(false);
+    expect(checkboxes[1].isReportValidityOrSubmit).to.equal(true);
+});

package/dist/checkbox-group.test.form.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './checkbox.js';
 import { assert, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckboxGroup from './checkbox-group.js';

package/dist/checkbox-group.test.validity.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './checkbox.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckboxGroup from './checkbox-group.js';

package/dist/checkbox.d.ts

@@ -32,7 +32,9 @@ export default class GlideCoreCheckbox extends LitElement {
     required: boolean;
     summary?: string;
     value?: string;
+    isReportValidityOrSubmit: boolean;
     get form(): HTMLFormElement | null;
+    blur(): void;
     checkValidity(): boolean;
     click(): void;
     disconnectedCallback(): void;
@@ -46,6 +48,6 @@ export default class GlideCoreCheckbox extends LitElement {
     get willValidate(): boolean;
     updated(): void;
     constructor();
+    private isBlurring;
     private isCheckingValidity;
-    private isReportValidityOrSubmit;
 }

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 n=e.length-1;n>=0;n--)(r=e[n])&&(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{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 ow from"./library/ow.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 form(){return this.#e.form}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}click(){this.#t.value?.click()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#e.setValidity({valueMissing:!0}," ",this.#t.value):this.#e.setValidity({})),this.#e.validity}focus(e){this.#t.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}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.#o}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#r}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#o})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div>${this.label}</label>`),(()=>html`<glide-core-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#o}" ?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.#o}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#r}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#o})}"><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-label>`))}</div>`}reportValidity(){return this.#e.reportValidity()}setValidity(e,t,i){return this.#e.setValidity(e,t,i)}get willValidate(){return this.#e.willValidate}updated(){ow(this.#t.value,ow.object.instanceOf(HTMLInputElement)),this.#t.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.required=!1,this.value="",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#t=createRef(),this.#i=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#t;#e;#i;get#o(){return"minimal"===this.privateVariant?!this.validity.valid:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#r(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,this.dispatchEvent(new Event(e.type,e))}};__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",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",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,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;
+var __decorate=this&&this.__decorate||function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};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{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 form(){return this.#e.form}blur(){this.#t.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#t.value?.click()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#e.setValidity({valueMissing:!0}," ",this.#t.value):this.#e.setValidity({})),this.#e.validity}focus(e){this.#t.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}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.#r}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#o}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#r})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div>${this.label}</label>`),(()=>html`<glide-core-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#r}" ?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.#r}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#o}" @blur="${this.#a}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#r})}"><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-label>`))}</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}setValidity(e,t,i){return this.#e.setValidity(e,t,i)}get willValidate(){return this.#e.willValidate}updated(){this.#t.value&&(this.#t.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.required=!1,this.value="",this.isReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.#t=createRef(),this.#i=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#e;#i;get#r(){return"minimal"===this.privateVariant?!this.validity.valid&&this.isReportValidityOrSubmit:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#a(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#o(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,this.dispatchEvent(new Event(e.type,e))}};__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",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",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),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;

package/dist/checkbox.styles.js

@@ -83,7 +83,8 @@ when browsers support them.
         border-color: var(--glide-core-surface-primary-disabled);
       }
 
-      &:focus-visible ~ .checkbox {
+      &:focus-visible ~ .checkbox,
+      &:focus ~ .checkbox.error {
         ${focusOutline};
       }
 
@@ -114,9 +115,7 @@ when browsers support them.
 
     .indeterminate-icon {
       display: none;
-
-      /* Hard-coded colors since the value of --glide-core-icon-active presently doesn't work in dark mode */
-      fill: #0073e6;
-      stroke: #0073e6;
+      fill: var(--glide-core-icon-active);
+      stroke: var(--glide-core-icon-active);
     }
   `];

package/dist/checkbox.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';
 GlideCoreCheckbox.shadowRootOptions.mode = 'open';

package/dist/checkbox.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import * as sinon from 'sinon';
 import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';

package/dist/checkbox.test.focus.js

@@ -36,3 +36,14 @@ it('does not focus the input after `checkValidity` is called', async () => {
     component.checkValidity();
     expect(component.shadowRoot?.activeElement).to.equal(null);
 });
+it('blurs the input and reports validity if `blur` is called', async () => {
+    const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox>`);
+    component.focus();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+    component.blur();
+    await component.updateComplete;
+    expect(component.shadowRoot?.activeElement).to.equal(null);
+    expect(component.validity.valid).to.equal(false);
+    expect(component.shadowRoot?.querySelector('glide-core-label')?.error).to.equal(true);
+});

package/dist/checkbox.test.form.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';
 GlideCoreCheckbox.shadowRootOptions.mode = 'open';

package/dist/checkbox.test.states.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';
 GlideCoreCheckbox.shadowRootOptions.mode = 'open';

package/dist/checkbox.test.validity.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';
 GlideCoreCheckbox.shadowRootOptions.mode = 'open';

package/dist/drawer.styles.js

@@ -12,9 +12,6 @@ import{css}from"lit";export default[css`
       opacity: 0;
       position: absolute;
       transform: translateX(100%);
-      transition:
-        transform 0.2s ease-out,
-        opacity 0.3s ease-out;
       visibility: hidden;
 
       &.pinned {
@@ -36,10 +33,14 @@ import{css}from"lit";export default[css`
       inset: 0 0 0 auto;
       opacity: 1;
       transform: none;
+      transition:
+        transform 0.3s cubic-bezier(0.33, 1, 0.68, 1),
+        opacity 0.3s ease-in;
       visibility: visible;
     }
 
     .closing {
       transform: translateX(100%);
+      transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
     }
   `];

package/dist/drawer.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './drawer.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDrawer from './drawer.js';

package/dist/drawer.test.closing.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './drawer.js';
 import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';

package/dist/drawer.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './drawer.js';
 import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';

package/dist/drawer.test.floating-components.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './drawer.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDrawer from './drawer.js';

package/dist/drawer.test.methods.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './drawer.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDrawer from './drawer.js';

package/dist/dropdown.d.ts

@@ -61,6 +61,7 @@ export default class GlideCoreDropdown extends LitElement {
     reportValidity(): boolean;
     constructor();
     private ariaActivedescendant;
+    private isBlurring;
     private isCheckingValidity;
     private isEveryOptionFilteredOut;
     private isFilterable;

package/dist/dropdown.js

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

@@ -1,3 +1,4 @@
+import './checkbox.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/dropdown.option.js

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';
 import GlideCoreDropdownOption from './dropdown.option.js';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';

package/dist/dropdown.styles.js

@@ -93,10 +93,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       visibility: hidden;
 
       /*
-        ".dropdown-and-options" is relative and many Dropdowns may be stacked in a column.
-        This ensures the ".options" of Dropdowns earlier in the column aren't obscured by
-        the ".dropdown-and-options" that come later.
-      */
+      ".dropdown-and-options" is relative and many Dropdowns may be stacked in a column.
+      This ensures the ".options" of Dropdowns earlier in the column aren't obscured by
+      the ".dropdown-and-options" that come later.
+    */
       z-index: 1;
 
       &.visible {
@@ -114,6 +114,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
+    .placeholder {
+      color: var(--glide-core-text-placeholder);
+    }
+
     .tags {
       display: flex;
       gap: var(--glide-core-spacing-xs);