@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/button.d.ts

@@ -5,6 +5,9 @@ declare global {
     }
 }
 /**
+ *
+ * @description A group of buttons that work like radios—with labels and optional icons.
+ *
  * @slot - A label for the contents of the button.
  * @slot prefix - An optional icon slot to display before the label.
  * @slot suffix - An optional icon slot to display after the label.

package/dist/button.test.basics.js

@@ -199,5 +199,5 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });

package/dist/checkbox-group.d.ts

@@ -6,7 +6,11 @@ declare global {
     }
 }
 /**
- * @description A group of checkboxes with a label and optional tooltip and description. Participates in forms and validation via `FormData` and various methods.
+ * @description A group of checkboxes with a label and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
+ *
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ * @event invalid - `(event: Event) => void`
  *
  * @slot - One or more of `<glide-core-checkbox>`.
  * @slot description - Additional information or context.
@@ -26,7 +30,7 @@ export default class GlideCoreCheckboxGroup extends LitElement {
     get required(): boolean;
     set required(isRequired: boolean);
     summary?: string;
-    value: string[];
+    value: readonly string[];
     checkValidity(): boolean;
     disconnectedCallback(): void;
     firstUpdated(): void;

package/dist/checkbox-group.js

@@ -1 +1 @@
-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;
+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){const t=this.#t.find((({disabled:e})=>!e));t?.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-private-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-private-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.stories.d.ts

@@ -3,5 +3,5 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Vertical: StoryObj;
-export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithTooltip: StoryObj;
 export declare const VerticalWithError: StoryObj;

package/dist/checkbox-group.styles.js

@@ -7,7 +7,7 @@ import{css}from"lit";export default[css`
       }
     }
 
-    glide-core-label::part(tooltips-and-label) {
+    glide-core-private-label::part(tooltips-and-label) {
       align-items: flex-start;
     }
 

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

@@ -109,7 +109,7 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if the default slot is the incorrect type', async () => {
     await expectArgumentError(() => {

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

@@ -74,7 +74,7 @@ it('does not dispatch an "invalid" event after `checkValidity` is called when no
     component.addEventListener('invalid', spy);
     component.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event after `checkValidity` is called when disabled but required and the checkbox is unchecked', async () => {
     const form = document.createElement('form');
@@ -85,7 +85,7 @@ it('does not dispatch an "invalid" event after `checkValidity` is called when di
     component.addEventListener('invalid', spy);
     component.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
     const form = document.createElement('form');
@@ -96,7 +96,7 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when no
     component.addEventListener('invalid', spy);
     component.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when disabled but required and the checkbox is unchecked', async () => {
     const form = document.createElement('form');
@@ -107,5 +107,5 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when di
     component.addEventListener('invalid', spy);
     component.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });

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

@@ -6,12 +6,13 @@ 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 () => {
+it('focuses the first enabled 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>
+      <glide-core-checkbox label="One" disabled></glide-core-checkbox>
+      <glide-core-checkbox label="Two"></glide-core-checkbox>
     </glide-core-checkbox-group>`);
     component.focus();
-    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
+    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox:last-of-type'));
 });
 it('focuses the first checkbox after submit when required but the checkbox is unchecked', async () => {
     const form = document.createElement('form');

package/dist/checkbox.d.ts

@@ -1,4 +1,5 @@
 import './label.js';
+import './tooltip.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
@@ -8,9 +9,10 @@ declare global {
 /**
  * @description A checkbox with a label and optional tooltip, summary, and description. Participates in forms and validation via `FormData` and various methods.
  *
- * @event change - Dispatched when checked or unchecked.
- * @event input - Dispatched when checked or unchecked.
-
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ * @event invalid - `(event: Event) => void`
+ *
  * @slot description - Additional information or context.
  * @slot tooltip - Content for the tooltip.
  */
@@ -24,19 +26,23 @@ export default class GlideCoreCheckbox extends LitElement {
     disabled: boolean;
     hideLabel: boolean;
     indeterminate: boolean;
-    label?: string;
+    get label(): string;
+    set label(label: string);
     orientation: 'horizontal' | 'vertical';
     name?: string;
+    privateLabelTooltipOffset: number;
+    privateShowLabelTooltip: boolean;
     privateSplit?: 'left' | 'middle';
     privateVariant?: 'minimal';
     required: boolean;
     summary?: string;
-    value?: string;
+    value: string;
     isReportValidityOrSubmit: boolean;
     get form(): HTMLFormElement | null;
     blur(): void;
     checkValidity(): boolean;
     click(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     get validity(): ValidityState;
     focus(options?: FocusOptions): void;
@@ -50,4 +56,5 @@ export default class GlideCoreCheckbox extends LitElement {
     constructor();
     private isBlurring;
     private isCheckingValidity;
+    private isLabelOverflow;
 }

package/dist/checkbox.js

@@ -1 +1 @@
-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;
+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;

package/dist/checkbox.stories.d.ts

@@ -5,5 +5,5 @@ export declare const Horizontal: StoryObj;
 export declare const HorizontalWithTooltip: StoryObj;
 export declare const HorizontalWithError: StoryObj;
 export declare const Vertical: StoryObj;
-export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithTooltip: StoryObj;
 export declare const VerticalWithError: StoryObj;

package/dist/checkbox.styles.js

@@ -118,4 +118,14 @@ when browsers support them.
       fill: var(--glide-core-icon-active);
       stroke: var(--glide-core-icon-active);
     }
+
+    .label-tooltip {
+      overflow: hidden;
+    }
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   `];

package/dist/checkbox.test.basics.js

@@ -50,12 +50,18 @@ it('can have a description', async () => {
     expect(assignedElements?.at(0)?.textContent).to.equal('Description');
 });
 it('can have a name', async () => {
-    const component = await fixture(html `<glide-core-checkbox name="name"></glide-core-checkbox> `);
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      name="name"
+    ></glide-core-checkbox> `);
     expect(component.getAttribute('name')).to.equal('name');
     expect(component.name).to.equal('name');
 });
 it('can have a summary', async () => {
-    const component = await fixture(html `<glide-core-checkbox summary="Summary"></glide-core-checkbox> `);
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      summary="Summary"
+    ></glide-core-checkbox> `);
     expect(component.getAttribute('summary')).to.equal('Summary');
     expect(component.summary).to.equal('Summary');
 });
@@ -69,22 +75,25 @@ it('can have a tooltip', async () => {
     expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
 });
 it('can be checked', async () => {
-    const component = await fixture(html `<glide-core-checkbox checked></glide-core-checkbox> `);
+    const component = await fixture(html `<glide-core-checkbox label="Label" checked></glide-core-checkbox> `);
     expect(component.hasAttribute('checked')).to.be.true;
     expect(component.checked).to.equal(true);
 });
 it('can be disabled', async () => {
-    const component = await fixture(html `<glide-core-checkbox disabled></glide-core-checkbox> `);
+    const component = await fixture(html `<glide-core-checkbox label="Label" disabled></glide-core-checkbox> `);
     expect(component.hasAttribute('disabled')).to.be.true;
     expect(component.disabled).to.equal(true);
 });
 it('can be indeterminate', async () => {
-    const component = await fixture(html `<glide-core-checkbox indeterminate></glide-core-checkbox> `);
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      indeterminate
+    ></glide-core-checkbox> `);
     expect(component.hasAttribute('indeterminate')).to.be.true;
     expect(component.indeterminate).to.equal(true);
 });
 it('can be required', async () => {
-    const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox> `);
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox> `);
     expect(component.hasAttribute('required')).to.be.true;
     expect(component.required).to.equal(true);
 });

package/dist/checkbox.test.events.js

@@ -31,7 +31,7 @@ it('dispatches an "input" event when clicked', async () => {
 });
 it('dispatches an "invalid" event on submit when required and unchecked', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox>`, { parentNode: form });
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
     setTimeout(() => form.requestSubmit());
     const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
@@ -45,7 +45,7 @@ it('dispatches an "invalid" event after `checkValidity` is called when required
 });
 it('dispatches an "invalid" event after `reportValidity` is called when required and unchecked', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox>`, { parentNode: form });
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
     setTimeout(() => component.reportValidity());
     const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
@@ -57,16 +57,20 @@ it('does not dispatch an "invalid" event after `checkValidity` is called when no
     component.addEventListener('invalid', spy);
     component.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event after `checkValidity` is called when required and unchecked but disabled', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox disabled required></glide-core-checkbox>`, { parentNode: form });
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      disabled
+      required
+    ></glide-core-checkbox>`, { parentNode: form });
     const spy = sinon.spy();
     component.addEventListener('invalid', spy);
     component.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
     const form = document.createElement('form');
@@ -75,14 +79,18 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when no
     component.addEventListener('invalid', spy);
     component.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when required and unchecked but disabled', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox disabled required></glide-core-checkbox>`, { parentNode: form });
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      disabled
+      required
+    ></glide-core-checkbox>`, { parentNode: form });
     const spy = sinon.spy();
     component.addEventListener('invalid', spy);
     component.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });

package/dist/checkbox.test.focus.js

@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';
 GlideCoreCheckbox.shadowRootOptions.mode = 'open';
-it('focuses the input when `focus` is called', async () => {
+it('focuses the input when `focus()` is called', async () => {
     const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
     component.focus();
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
@@ -37,7 +37,7 @@ it('does not focus the input after `checkValidity` is called', async () => {
     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>`);
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`);
     component.focus();
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(component.shadowRoot?.activeElement).to.equal(input);
@@ -45,5 +45,5 @@ it('blurs the input and reports validity if `blur` is called', async () => {
     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);
+    expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error).to.equal(true);
 });

package/dist/checkbox.test.form.js

@@ -42,6 +42,7 @@ it('has `formData` value when checked', async () => {
 it('has `formData` value when checked and indeterminate', async () => {
     const form = document.createElement('form');
     await fixture(html `<glide-core-checkbox
+      label="Label"
       name="name"
       value="value"
       checked

package/dist/checkbox.test.interactions.js

@@ -0,0 +1,123 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import GlideCoreCheckbox from './checkbox.js';
+GlideCoreCheckbox.shadowRootOptions.mode = 'open';
+it('is checked after being clicked', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(true);
+    expect(component.hasAttribute('checked')).to.be.false;
+});
+it('is unchecked after being clicked', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label" checked></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(false);
+    expect(component.hasAttribute('checked')).to.be.true;
+});
+it('is checked and not indeterminate after being clicked when unchecked and indeterminate', async () => {
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      indeterminate
+    ></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.indeterminate).to.be.false;
+    expect(component.checked).to.equal(true);
+    expect(component.indeterminate).to.equal(false);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.hasAttribute('indeterminate')).to.be.true;
+});
+it('is unchecked and not indeterminate after being clicked when checked and indeterminate', async () => {
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      checked
+      indeterminate
+    ></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.indeterminate).to.be.false;
+    expect(component.checked).to.equal(false);
+    expect(component.indeterminate).to.equal(false);
+    expect(component.hasAttribute('checked')).to.be.true;
+    expect(component.hasAttribute('indeterminate')).to.be.true;
+});
+it('is still checked after being clicked when checked but disabled', async () => {
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      checked
+      disabled
+    ></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(true);
+    expect(component.hasAttribute('checked')).to.be.true;
+});
+it('is still unchecked after being clicked when unchecked and disabled', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label" disabled></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.equal(false);
+});
+it('is unchecked after being clicked then forcibly unchecked via a "input" listener', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.addEventListener('input', async () => {
+        await component.updateComplete;
+        component.checked = false;
+    });
+    component.click();
+    await elementUpdated(component);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.equal(false);
+});
+it('is unchecked after being clicked then forcibly unchecked via an "change" listener', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.addEventListener('change', async () => {
+        await component.updateComplete;
+        component.checked = false;
+    });
+    component.click();
+    await elementUpdated(component);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.equal(false);
+});
+it('is still indeterminate after being clicked when unchecked and disabled', async () => {
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      disabled
+      indeterminate
+    ></glide-core-checkbox>`);
+    component.click();
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.indeterminate).to.be.true;
+    expect(component.indeterminate).to.equal(true);
+    expect(component.hasAttribute('indeterminate')).to.be.true;
+});
+it('has a tooltip when minimal and with a long label', async () => {
+    const component = await fixture(html `<glide-core-checkbox
+      style="display: block; max-width: 100px;"
+      label=${'.'.repeat(100)}
+      private-variant="minimal"
+      private-show-label-tooltip
+    ></glide-core-checkbox>`);
+    // Wait for the tooltip.
+    await aTimeout(0);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    expect(tooltip?.checkVisibility()).to.be.true;
+});
+it('has no tooltip when minimal and with a short label', async () => {
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      private-variant="minimal"
+      private-show-label-tooltip
+    ></glide-core-checkbox>`);
+    // Wait for the tooltip.
+    await aTimeout(0);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    expect(tooltip?.checkVisibility()).to.be.false;
+});

package/dist/drawer.d.ts

@@ -5,13 +5,13 @@ declare global {
     }
 }
 /**
- * @cssprop [--width] - Sets the width of the Drawer when open.
  *
- * @event close - Emitted when the Drawer closes.
- * @event open - Emitted when the Drawer opens.
+ * @description A drawer for arbitrary content.
  *
- * @method close - A method on the `glide-core-drawer` component to close the Drawer programmatically.
- * @method open - A method on the `glide-core-drawer` component to open the Drawer programmatically.
+ * @cssprop [--width] - The width the drawer.
+ *
+ * @event close
+ * @event open
  *
  * @slot - The content of the Drawer.
  */

package/dist/drawer.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,s,o){var i,l=arguments.length,r=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,o);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(r=(l<3?i(r):l>3?i(t,s,r):i(t,s))||r);return l>3&&r&&Object.defineProperty(t,s,r),r};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{setContainingBlock}from"./library/set-containing-block.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);const e=this.#t.value.assignedElements();setContainingBlock({elements:e,containingBlock:this.#e.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"))}),{once:!0}),this.#e?.value?.classList?.add("closing"),this.currentState="closing")}firstUpdated(){owSlot(this.#t.value)}open(){"closed"===this.currentState&&(this.#e?.value?.addEventListener("transitionend",(()=>{this.currentState="open",this.#e?.value?.focus(),this.dispatchEvent(new Event("open"))}),{once:!0}),this.#e?.value?.classList?.add("open"),this.currentState="opening",this.isOpen=!0)}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test-state="${this.isOpen?"open":"closed"}" @keydown="${this.#s}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#o}" ${ref(this.#t)}></slot></aside>`}#e;#t;#s(e){"Escape"===e.key&&this.close()}#o(){owSlot(this.#t.value)}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([state()],GlideCoreDrawer.prototype,"currentState",void 0),__decorate([state()],GlideCoreDrawer.prototype,"isOpen",void 0),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;

package/dist/drawer.stories.d.ts

@@ -4,4 +4,3 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Default: StoryObj;
-export declare const WithCSSVariable: StoryObj;