@crowdstrike/glide-core 0.9.0 → 0.9.2

package/dist/accordion.d.ts

@@ -5,10 +5,14 @@ declare global {
     }
 }
 /**
- * @event toggle - Emitted when the Accordion opens or closes.
- * @slot - The content of the Accordion.
+ * @description An accordion with optional icons.
+ *
+ * @event toggle - `(event: "toggle", listener: (event: CustomEvent<{ newState: "open" | "closed", oldState: "open" | "closed" }>) => void) => void`.
+ *                 Emitted when the Accordion opens or closes.
+ *
+ * @slot - The content of the accordion.
  * @slot prefix - An optional icon to display before the label.
- * @slot suffix - An optional section to add additional iconography.
+ * @slot suffix - Optional icons to display after the label.
  */
 export default class GlideCoreAccordion extends LitElement {
     #private;

package/dist/accordion.styles.js

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

package/dist/button-group.button.d.ts

@@ -7,11 +7,8 @@ declare global {
 /**
  * @description A button with a label and optional icon for use in a `<glide-core-button-group>`.
  *
- * @event change - Dispatched when the button is selected.
- * @event input - Dispatched when the button is selected.
-
- * @slot prefix - An icon.
  * @slot - A label.
+ * @slot prefix - An optional icon to display before the label.
  */
 export default class GlideCoreButtonGroupButton extends LitElement {
     #private;

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

@@ -1,4 +1,7 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${focusOutline(".component:focus-visible")}
+    ${visuallyHidden(".label.visually-hidden")}
+  `,css`
     :host(:first-of-type) {
       .component {
         &.horizontal {
@@ -30,6 +33,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .component {
       align-items: center;
       appearance: none;
+      background-color: var(--glide-core-surface-page);
       cursor: pointer;
       display: flex;
       font-family: var(--glide-core-font-sans);
@@ -57,8 +61,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         background-color: var(--glide-core-surface-selected);
         border-color: var(--glide-core-border-focus);
         color: var(--glide-core-color-white);
-
-        ${focusOutline};
         outline-offset: 2px;
 
         /* Create a stacking context so the outline isn't obscured by other elements. */
@@ -114,10 +116,4 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         }
       }
     }
-
-    .label {
-      &.visually-hidden {
-        ${visuallyHidden};
-      }
-    }
   `];

package/dist/button-group.d.ts

@@ -7,6 +7,9 @@ declare global {
 /**
  * @description A button group.
  *
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ *
  * @slot - One or more of `<glide-core-button-group-button>`.
  */
 export default class GlideCoreButtonGroup extends LitElement {

package/dist/button-group.styles.js

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

package/dist/button.d.ts

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

package/dist/button.js

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

package/dist/button.styles.js

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

package/dist/button.test.events.js

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

package/dist/checkbox-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.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.d.ts

@@ -9,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.
  */
@@ -35,7 +36,7 @@ export default class GlideCoreCheckbox extends LitElement {
     privateVariant?: 'minimal';
     required: boolean;
     summary?: string;
-    value?: string;
+    value: string;
     isReportValidityOrSubmit: boolean;
     get form(): HTMLFormElement | null;
     blur(): void;

package/dist/checkbox.js

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

package/dist/checkbox.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

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

package/dist/checkbox.test.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;
@@ -61,7 +61,11 @@ it('does not dispatch an "invalid" event after `checkValidity` is called when no
 });
 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();
@@ -79,7 +83,11 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when no
 });
 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();

package/dist/checkbox.test.focus.js

@@ -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);

package/dist/checkbox.test.form.js

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