@crowdstrike/glide-core 0.9.6 → 0.10.0

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

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './checkbox.js';
+import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import GlideCoreCheckboxGroup from './checkbox-group.js';
+GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
+it('checks and unchecks Checkboxes when `value` is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="One" value="one"></glide-core-checkbox>
+      <glide-core-checkbox label="Two" checked></glide-core-checkbox>
+
+      <glide-core-checkbox
+        label="Three"
+        value="three"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    component.value = ['one'];
+    const checkboxes = component.querySelectorAll('glide-core-checkbox');
+    expect(checkboxes[0].checked).to.be.true;
+    expect(checkboxes[1].checked).to.be.true;
+    expect(checkboxes[2].checked).to.be.false;
+});
+it('updates `value` when the `value` of a checked Checkbox is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox
+        label="One"
+        value="one"
+        checked
+      ></glide-core-checkbox>
+
+      <glide-core-checkbox
+        label="Two"
+        value="two"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    const checkbox = component.querySelector('glide-core-checkbox');
+    assert(checkbox);
+    checkbox.value = 'three';
+    await elementUpdated(component);
+    expect(component.value).to.deep.equal(['three', 'two']);
+    expect(component.getAttribute('value')).to.equal('["three","two"]');
+});
+it('updates `value` when the `value` of a checked Checkbox is emptied programmatically', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox
+        label="One"
+        value="one"
+        checked
+      ></glide-core-checkbox>
+
+      <glide-core-checkbox
+        label="Two"
+        value="two"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    const checkbox = component.querySelector('glide-core-checkbox');
+    assert(checkbox);
+    checkbox.value = '';
+    await elementUpdated(component);
+    expect(component.value).to.deep.equal(['two']);
+    expect(component.getAttribute('value')).to.equal('["two"]');
+});
+it('enables disabled Checkboxes when `value` is set programmatically', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox
+        label="One"
+        value="one"
+        disabled
+      ></glide-core-checkbox>
+
+      <glide-core-checkbox
+        label="Two"
+        value="two"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    component.value = ['one', 'two'];
+    const checkbox = component.querySelector('glide-core-checkbox');
+    expect(checkbox?.disabled).to.be.false;
+});

package/dist/checkbox.d.ts

@@ -7,14 +7,13 @@ 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 - `(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.
+ * @slot private-icon
  */
 export default class GlideCoreCheckbox extends LitElement {
     #private;
@@ -29,14 +28,16 @@ export default class GlideCoreCheckbox extends LitElement {
     get label(): string;
     set label(label: string);
     orientation: 'horizontal' | 'vertical';
-    name?: string;
+    name: string;
     privateLabelTooltipOffset: number;
     privateShowLabelTooltip: boolean;
+    privateSize: 'large' | 'small';
     privateSplit?: 'left' | 'middle';
     privateVariant?: 'minimal';
     required: boolean;
     summary?: string;
-    value: string;
+    get value(): string;
+    set value(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}" @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;
+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 value(){return this.#i}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#i=e}get form(){return this.#o.form}blur(){this.#r.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#r.value?.click()}connectedCallback(){super.connectedCallback(),this.#a=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#a.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s),this.#a?.disconnect()}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#o.setValidity({valueMissing:!0}," ",this.#r.value):this.#o.setValidity({})),this.#o.validity}focus(e){this.#r.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}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="${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${this.#l}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#n}" @input="${this.#n}" @keydown="${this.#d}" ${ref(this.#r)}><div class="${classMap({checkbox:!0,disabled:this.disabled})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><div class="icon-and-label"><slot name="private-icon"></slot><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.#h)}>${this.label}</div></glide-core-tooltip></div></label>`),(()=>html`<glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#l}" ?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.#l}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @blur="${this.#c}" @change="${this.#n}" @input="${this.#n}" @keydown="${this.#d}" ${ref(this.#r)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#l})}"><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.#o.reportValidity();return this.requestUpdate(),e}setValidity(e,t,i){return this.#o.setValidity(e,t,i)}get willValidate(){return this.#o.willValidate}updated(){this.#r.value&&(this.#r.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.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateSize="large",this.required=!1,this.isReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#r=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#s=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,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()}))}#r;#o;#a;#e;#h;#i;#s;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.isReportValidityOrSubmit:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.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({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",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",null),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;

package/dist/checkbox.styles.js

@@ -15,13 +15,25 @@ when browsers support them.
     .label-and-input-and-checkbox {
       align-items: center;
       display: flex;
-      font-family: var(--glide-core-heading-xxxs-font-family);
-      font-size: var(--glide-core-heading-xxxs-font-size);
-      font-style: var(--glide-core-heading-xxxs-font-style);
-      font-variant: var(--glide-core-heading-xxxs-font-variant);
-      font-weight: var(--glide-core-body-xs-font-weight);
-      gap: var(--glide-core-spacing-sm);
       line-height: 100%;
+
+      &.large {
+        column-gap: var(--glide-core-spacing-sm);
+        font-family: var(--glide-core-body-sm-font-family);
+        font-size: var(--glide-core-body-sm-font-size);
+        font-style: var(--glide-core-body-sm-font-style);
+        font-variant: var(--glide-core-body-sm-font-variant);
+        font-weight: var(--glide-core-body-sm-font-weight);
+      }
+
+      &.small {
+        column-gap: var(--glide-core-spacing-xs);
+        font-family: var(--glide-core-body-xs-font-family);
+        font-size: var(--glide-core-body-xs-font-size);
+        font-style: var(--glide-core-body-xs-font-style);
+        font-variant: var(--glide-core-body-xs-font-variant);
+        font-weight: var(--glide-core-body-xs-font-weight);
+      }
     }
 
     .input-and-checkbox-and-summary {
@@ -49,7 +61,10 @@ 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;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: box-shadow 200ms ease-in-out;
+      }
 
       &.error:not(.disabled) {
         border-color: var(--glide-core-status-error);
@@ -83,7 +98,8 @@ when browsers support them.
       }
 
       &:disabled:not(:is(:checked, :indeterminate)) ~ .checkbox {
-        border-color: var(--glide-core-surface-primary-disabled);
+        background-color: var(--glide-core-surface-disabled);
+        border-color: var(--glide-core-border-base);
       }
 
       &:is(:checked, :indeterminate):not(:disabled) ~ .checkbox {
@@ -110,7 +126,10 @@ when browsers support them.
             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);
+
+          @media (prefers-reduced-motion: no-preference) {
+            transition: stroke-dashoffset 300ms cubic-bezier(0.32, 0, 0.67, 0);
+          }
         }
       }
     }
@@ -150,6 +169,13 @@ when browsers support them.
       stroke: var(--glide-core-icon-active);
     }
 
+    .icon-and-label {
+      align-items: center;
+      column-gap: var(--glide-core-spacing-xs);
+      display: flex;
+      overflow: hidden;
+    }
+
     .label-tooltip {
       overflow: hidden;
     }
@@ -159,10 +185,4 @@ 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

@@ -7,24 +7,15 @@ it('registers', async () => {
 });
 it('has defaults', async () => {
     const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
-    expect(component.hasAttribute('checked')).to.be.false;
     expect(component.checked).to.be.false;
-    expect(component.hasAttribute('disabled')).to.be.false;
     expect(component.disabled).to.be.false;
-    expect(component.hasAttribute('hide-label')).to.be.false;
     expect(component.hideLabel).to.be.false;
-    expect(component.hasAttribute('indeterminate')).to.be.false;
     expect(component.indeterminate).to.be.false;
-    expect(component.getAttribute('name')).to.be.null;
-    expect(component.name).to.equal(undefined);
-    expect(component.getAttribute('orientation')).to.equal('horizontal');
+    expect(component.name).to.be.empty.string;
     expect(component.orientation).to.equal('horizontal');
-    expect(component.hasAttribute('required')).to.be.false;
     expect(component.required).to.be.false;
-    expect(component.getAttribute('summary')).to.be.null;
     expect(component.summary).to.equal(undefined);
-    expect(component.getAttribute('value')).to.equal('');
-    expect(component.value).to.equal('');
+    expect(component.value).to.be.empty.string;
 });
 it('is accessible', async () => {
     const component = await fixture(html `<glide-core-checkbox label="Label">
@@ -77,12 +68,12 @@ it('can have a tooltip', async () => {
 it('can be checked', async () => {
     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);
+    expect(component.checked).to.be.true;
 });
 it('can be disabled', async () => {
     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);
+    expect(component.disabled).to.be.true;
 });
 it('can be indeterminate', async () => {
     const component = await fixture(html `<glide-core-checkbox
@@ -90,10 +81,10 @@ it('can be indeterminate', async () => {
       indeterminate
     ></glide-core-checkbox> `);
     expect(component.hasAttribute('indeterminate')).to.be.true;
-    expect(component.indeterminate).to.equal(true);
+    expect(component.indeterminate).to.be.true;
 });
 it('can be required', async () => {
     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);
+    expect(component.required).to.be.true;
 });

package/dist/checkbox.test.focus.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';
 GlideCoreCheckbox.shadowRootOptions.mode = 'open';
@@ -44,6 +45,7 @@ it('blurs the input and reports validity if `blur` is called', async () => {
     component.blur();
     await component.updateComplete;
     expect(component.shadowRoot?.activeElement).to.equal(null);
-    expect(component.validity.valid).to.equal(false);
-    expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error).to.equal(true);
+    expect(component.validity.valid).to.be.false;
+    expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
+        .to.be.true;
 });

package/dist/checkbox.test.interactions.js

@@ -6,14 +6,14 @@ 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.checked).to.be.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.checked).to.be.false;
     expect(component.hasAttribute('checked')).to.be.true;
 });
 it('is checked and not indeterminate after being clicked when unchecked and indeterminate', async () => {
@@ -25,8 +25,8 @@ it('is checked and not indeterminate after being clicked when unchecked and inde
     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.checked).to.be.true;
+    expect(component.indeterminate).to.be.false;
     expect(component.hasAttribute('checked')).to.be.false;
     expect(component.hasAttribute('indeterminate')).to.be.true;
 });
@@ -40,8 +40,8 @@ it('is unchecked and not indeterminate after being clicked when checked and inde
     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.checked).to.be.false;
+    expect(component.indeterminate).to.be.false;
     expect(component.hasAttribute('checked')).to.be.true;
     expect(component.hasAttribute('indeterminate')).to.be.true;
 });
@@ -53,7 +53,7 @@ it('is still checked after being clicked when checked but disabled', async () =>
     ></glide-core-checkbox>`);
     component.click();
     await elementUpdated(component);
-    expect(component.checked).to.equal(true);
+    expect(component.checked).to.be.true;
     expect(component.hasAttribute('checked')).to.be.true;
 });
 it('is still unchecked after being clicked when unchecked and disabled', async () => {
@@ -61,7 +61,7 @@ it('is still unchecked after being clicked when unchecked and disabled', async (
     component.click();
     await elementUpdated(component);
     expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.checked).to.equal(false);
+    expect(component.checked).to.be.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>`);
@@ -72,7 +72,7 @@ it('is unchecked after being clicked then forcibly unchecked via a "input" liste
     component.click();
     await elementUpdated(component);
     expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.checked).to.equal(false);
+    expect(component.checked).to.be.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>`);
@@ -83,7 +83,7 @@ it('is unchecked after being clicked then forcibly unchecked via an "change" lis
     component.click();
     await elementUpdated(component);
     expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.checked).to.equal(false);
+    expect(component.checked).to.be.false;
 });
 it('is still indeterminate after being clicked when unchecked and disabled', async () => {
     const component = await fixture(html `<glide-core-checkbox
@@ -95,7 +95,7 @@ it('is still indeterminate after being clicked when unchecked and disabled', asy
     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.indeterminate).to.be.true;
     expect(component.hasAttribute('indeterminate')).to.be.true;
 });
 it('has a tooltip when minimal and with a long label', async () => {

package/dist/drawer.d.ts

@@ -5,13 +5,10 @@ declare global {
     }
 }
 /**
- *
- * @description A drawer for arbitrary content.
  *
  * @cssprop [--width] - The width the drawer.
  *
  * @event close
- * @event open
  *
  * @slot - The content of the Drawer.
  */
@@ -23,8 +20,8 @@ export default class GlideCoreDrawer extends LitElement {
     pinned: boolean;
     close(): void;
     firstUpdated(): void;
-    open(): void;
     render(): import("lit").TemplateResult<1>;
-    private currentState;
+    show(): void;
     private isOpen;
+    private state;
 }

package/dist/drawer.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,s,o){var i,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,s,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(l=(r<3?i(l):r>3?i(t,s,l):i(t,s))||l);return r>3&&l&&Object.defineProperty(t,s,l),l};import{LitElement,html,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.label="",this.pinned=!1,this.currentState="closed",this.isOpen=!1,this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){"open"===this.currentState&&(this.#e?.value?.addEventListener("transitionend",(()=>{this.isOpen=!1,this.#e?.value?.classList?.remove("open"),this.#e?.value?.classList?.remove("closing"),this.currentState="closed",this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),this.#e?.value?.classList?.add("closing"),this.currentState="closing")}firstUpdated(){owSlot(this.#t.value)}open(){"closed"===this.currentState&&(this.#e?.value?.addEventListener("transitionend",(()=>{this.currentState="open",this.#e?.value?.focus(),this.dispatchEvent(new Event("open",{bubbles:!0}))}),{once:!0}),this.#e?.value?.classList?.add("open"),this.currentState="opening",this.isOpen=!0)}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test-state="${this.isOpen?"open":"closed"}" @keydown="${this.#s}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#o}" ${ref(this.#t)}></slot></aside>`}#e;#t;#s(e){"Escape"===e.key&&this.close()}#o(){owSlot(this.#t.value)}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([state()],GlideCoreDrawer.prototype,"currentState",void 0),__decorate([state()],GlideCoreDrawer.prototype,"isOpen",void 0),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;
+var __decorate=this&&this.__decorate||function(e,t,s,o){var i,l=arguments.length,a=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,s,o);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(l<3?i(a):l>3?i(t,s,a):i(t,s))||a);return l>3&&a&&Object.defineProperty(t,s,a),a};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.isOpen=!1,this.state="closed",this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){"open"===this.state&&(this.#e?.value?.addEventListener("transitionend",(()=>{this.isOpen=!1,this.#e?.value?.classList?.remove("open"),this.#e?.value?.classList?.remove("closing"),this.state="closed",this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),this.#e?.value?.classList?.add("closing"),this.state="closing")}firstUpdated(){owSlot(this.#t.value)}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>`}show(){"closed"===this.state&&(this.#e?.value?.addEventListener("transitionend",(()=>{this.state="open",this.#e?.value?.focus()}),{once:!0}),this.#e?.value?.classList?.add("open"),this.state="opening",this.isOpen=!0)}#e;#t;#o(){owSlot(this.#t.value)}#s(e){"Escape"===e.key&&this.close()}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([state()],GlideCoreDrawer.prototype,"isOpen",void 0),__decorate([state()],GlideCoreDrawer.prototype,"state",void 0),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;

package/dist/drawer.test.accessibility.js

@@ -5,18 +5,18 @@ GlideCoreDrawer.shadowRootOptions.mode = 'open';
 // NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
 // to manually dispatch the `transitionend` event in tests.
 it('is accessible', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    drawer.shadowRoot
+    const component = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    component.shadowRoot
         ?.querySelector('aside')
         ?.dispatchEvent(new TransitionEvent('transitionend'));
-    drawer.open();
-    await expect(drawer).to.be.accessible();
+    component.show();
+    await expect(component).to.be.accessible();
 });
 it('focuses the aside upon opening', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    drawer.open();
-    drawer.shadowRoot
+    const component = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    component.show();
+    component.shadowRoot
         ?.querySelector('aside')
         ?.dispatchEvent(new TransitionEvent('transitionend'));
-    expect(drawer.shadowRoot?.activeElement).to.equal(drawer.shadowRoot?.querySelector('aside'));
+    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('aside'));
 });

package/dist/drawer.test.basics.js

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

package/dist/drawer.test.closing.js

@@ -1,38 +1,40 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './drawer.js';
 import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { emulateMedia } from '@web/test-runner-commands';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDrawer from './drawer.js';
 GlideCoreDrawer.shadowRootOptions.mode = 'open';
 // NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
 // to manually dispatch the `transitionend` event in tests.
 it('closes when the "Escape" key is pressed', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    drawer.open();
-    drawer.shadowRoot
+    await emulateMedia({ reducedMotion: 'no-preference' });
+    const component = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    component.show();
+    component.shadowRoot
         ?.querySelector('aside')
         ?.dispatchEvent(new TransitionEvent('transitionend'));
-    await elementUpdated(drawer);
+    await elementUpdated(component);
     await sendKeys({ press: 'Escape' });
     setTimeout(() => {
-        drawer.shadowRoot
+        component.shadowRoot
             ?.querySelector('aside')
             ?.dispatchEvent(new TransitionEvent('transitionend'));
     });
-    await oneEvent(drawer, 'close');
-    await elementUpdated(drawer);
-    expect(drawer?.shadowRoot?.querySelector('aside[data-test-state="closed"]'))
-        .to.be.not.null;
+    await oneEvent(component, 'close');
+    await elementUpdated(component);
+    expect(component?.shadowRoot?.querySelector('aside[data-test-state="closed"]')).to.be.not.null;
 });
 it('does not close when a key other than "Escape" is pressed', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
-    drawer.open();
-    drawer.shadowRoot
+    await emulateMedia({ reducedMotion: 'no-preference' });
+    const component = await fixture(html `<glide-core-drawer>Drawer content</glide-core-drawer>`);
+    component.show();
+    component.shadowRoot
         ?.querySelector('aside')
         ?.dispatchEvent(new TransitionEvent('transitionend'));
-    await elementUpdated(drawer);
-    drawer.shadowRoot?.querySelector('aside')?.focus();
+    await elementUpdated(component);
+    component.shadowRoot?.querySelector('aside')?.focus();
     await sendKeys({ press: 'Enter' });
-    expect(drawer?.shadowRoot?.querySelector('aside[data-test-state="open"]')).to
-        .be.not.null;
+    expect(component?.shadowRoot?.querySelector('aside[data-test-state="open"]'))
+        .to.be.not.null;
 });