@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/checkbox.js

@@ -1,14 +1,220 @@
-var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};import"./label.js";import"./tooltip.js";import{html,LitElement}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{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Checkbox=class Checkbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get checked(){return this.#i}set checked(e){const t=e!==this.#i;this.#i=e,t&&this.dispatchEvent(new Event("private-checked-change",{bubbles:!0}))}get disabled(){return this.#s}set disabled(e){this.#s=e,this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get value(){return this.#a}set value(e){const t=this.#a;this.#a=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#r.form}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#l=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#l.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#n),this.#l?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#r.validity:this.required&&!this.checked?(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#o.value),this.#r.validity):this.required&&this.#r.validity.valueMissing&&this.checked?(this.#r.setValidity({}),this.#r.validity):(this.required||!this.#r.validity.valueMissing||this.checked||this.#r.setValidity({}),this.#r.validity)}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#n)}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`
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './label.js';
+import './tooltip.js';
+import { html, LitElement } 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 { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import packageJson from '../package.json' with { type: 'json' };
+import checkedIcon from './icons/checked.js';
+import styles from './checkbox.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {boolean} [checked=false]
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {boolean} [indeterminate=false]
+ * @attr {string} [name='']
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {boolean} [required=false]
+ * @attr {string} [summary]
+ * @attr {string} [tooltip]
+ * @attr {string} [value='']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} [description] - Additional information or context
+ * @slot {Element} [private-icon]
+ *
+ * @fires {Event} change
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
+ */
+let Checkbox = class Checkbox extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default undefined
+     */
+    get label() {
+        return this.#label;
+    }
+    set label(label) {
+        this.#label = label;
+        // Wait for the label to render. A rerender won't be scheduled by Lit
+        // until after this setter finishes. So awaiting `this.updateComplete`
+        // won't fly.
+        setTimeout(() => {
+            this.#updateLabelOverflow();
+        });
+    }
+    /**
+      @default false
+    */
+    get checked() {
+        return this.#isChecked;
+    }
+    set checked(isChecked) {
+        const hasChanged = isChecked !== this.#isChecked;
+        this.#isChecked = isChecked;
+        if (hasChanged) {
+            this.dispatchEvent(new Event('private-checked-change', { bubbles: true }));
+        }
+    }
+    /**
+     * @default false
+     */
+    get disabled() {
+        return this.#isDisabled;
+    }
+    set disabled(isDisabled) {
+        this.#isDisabled = isDisabled;
+        this.dispatchEvent(new Event('private-disabled-change', { bubbles: true }));
+    }
+    /**
+     * @default ''
+     */
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        const old = this.#value;
+        this.#value = value;
+        // `this.value` can be set programmatically. Checkbox Group needs to know when
+        // that happens so it can update its own `this.value`.
+        this.dispatchEvent(new CustomEvent('private-value-change', {
+            bubbles: true,
+            detail: {
+                // Without knowing what the old value was, Checkbox Group would be unable to
+                // find the value in its `this.value` array and remove it.
+                old,
+                new: value,
+            },
+        }));
+    }
+    get form() {
+        return this.#internals.form;
+    }
+    checkValidity() {
+        this.isCheckingValidity = true;
+        const isValid = this.#internals.checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
+    }
+    click() {
+        this.#inputElementRef.value?.click();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Checkbox can be arbitrarily shown and hidden as it is in Dropdown. So calling
+        // `#updateLabelOverflow` in the `label` setter isn't sufficient because the
+        // label's `scrollWidth` and `clientWidth` will both be zero until Checkbox is
+        // visible. So, rather than Checkbox expose a pseudo-private method, Checkbox
+        // simply monitors its own visibility.
+        this.#intersectionObserver = new IntersectionObserver(() => {
+            if (this.checkVisibility()) {
+                this.#updateLabelOverflow();
+            }
+        });
+        this.#intersectionObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.form?.removeEventListener('formdata', this.#onFormdata);
+        this.#intersectionObserver?.disconnect();
+    }
+    get validity() {
+        // If we're in a Checkbox Group, `disabled`, `required`, and whether or not
+        // the form has been submitted don't apply because Checkbox Group handles those
+        // states for the group as a whole.
+        if (this.privateVariant === 'minimal') {
+            return this.#internals.validity;
+        }
+        if (this.required && !this.checked) {
+            // A validation message is required but unused because we disable native validation
+            // feedback. And an empty string isn't allowed. Thus a single space.
+            this.#internals.setValidity({ customError: Boolean(this.validityMessage), valueMissing: true }, ' ', this.#inputElementRef.value);
+            return this.#internals.validity;
+        }
+        if (this.required &&
+            this.#internals.validity.valueMissing &&
+            this.checked) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        if (!this.required &&
+            this.#internals.validity.valueMissing &&
+            !this.checked) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        return this.#internals.validity;
+    }
+    focus(options) {
+        this.#inputElementRef.value?.focus(options);
+    }
+    formAssociatedCallback() {
+        this.form?.addEventListener('formdata', this.#onFormdata);
+    }
+    formResetCallback() {
+        this.checked = this.getAttribute('checked') === '';
+        this.indeterminate = this.getAttribute('indeterminate') === '';
+    }
+    render() {
+        return html `<div class="component" data-test="component">
+      ${when(this.privateVariant === 'minimal', () => html `
           <label
             class="label-and-input-and-checkbox"
             part="private-label-and-input-and-checkbox"
           >
             <div
-              class=${classMap({"input-and-checkbox":!0,disabled:this.disabled})}
+              class=${classMap({
+            'input-and-checkbox': true,
+            disabled: this.disabled,
+        })}
             >
               <input
-                aria-invalid=${this.#d}
+                aria-invalid=${this.#isShowValidationFeedback}
                 class="input"
                 data-test="input"
                 type="checkbox"
@@ -16,14 +222,17 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
                 .inert=${this.privateInternallyInert}
                 ?disabled=${this.disabled}
                 ?required=${this.required}
-                @change=${this.#h}
-                @input=${this.#h}
-                @keydown=${this.#c}
-                ${ref(this.#o)}
+                @change=${this.#onInputChangeOrInput}
+                @input=${this.#onInputChangeOrInput}
+                @keydown=${this.#onInputKeydown}
+                ${ref(this.#inputElementRef)}
               />
 
               <div
-                class=${classMap({checkbox:!0,disabled:this.disabled})}
+                class=${classMap({
+            checkbox: true,
+            disabled: this.disabled,
+        })}
               >
                 <div class="checked-icon">${checkedIcon}</div>
                 ${icons.indeterminate}
@@ -40,27 +249,31 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
                 data-test="label-tooltip"
                 label=${ifDefined(this.label)}
                 offset=${this.privateLabelTooltipOffset}
-                ?disabled=${!this.isLabelOverflow||this.privateDisableLabelTooltip}
+                ?disabled=${!this.isLabelOverflow ||
+            this.privateDisableLabelTooltip}
                 ?open=${this.privateShowLabelTooltip}
                 screenreader-hidden
               >
                 <div
-                  class=${classMap({label:!0,disabled:this.disabled})}
+                  class=${classMap({
+            label: true,
+            disabled: this.disabled,
+        })}
                   slot="target"
-                  ${ref(this.#p)}
+                  ${ref(this.#labelElementRef)}
                 >
                   ${this.label}
                 </div>
               </glide-core-tooltip>
             </div>
           </label>
-        `),(()=>html`<glide-core-private-label
+        `, () => html `<glide-core-private-label
             label=${ifDefined(this.label)}
             orientation=${this.orientation}
-            split=${ifDefined(this.privateSplit??void 0)}
+            split=${ifDefined(this.privateSplit ?? undefined)}
             tooltip=${ifDefined(this.tooltip)}
             ?disabled=${this.disabled}
-            ?error=${this.#d}
+            ?error=${this.#isShowValidationFeedback}
             ?hide=${this.hideLabel}
             ?required=${this.required}
           >
@@ -74,7 +287,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
             <div class="input-and-checkbox" slot="control">
               <input
                 aria-describedby="summary description"
-                aria-invalid=${this.#d}
+                aria-invalid=${this.#isShowValidationFeedback}
                 class="input"
                 data-test="input"
                 id="input"
@@ -82,28 +295,32 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
                 .checked=${this.checked}
                 ?disabled=${this.disabled}
                 ?required=${this.required}
-                @blur=${this.#b}
-                @change=${this.#h}
-                @input=${this.#h}
-                @keydown=${this.#c}
-                ${ref(this.#o)}
+                @blur=${this.#onBlur}
+                @change=${this.#onInputChangeOrInput}
+                @input=${this.#onInputChangeOrInput}
+                @keydown=${this.#onInputKeydown}
+                ${ref(this.#inputElementRef)}
               />
 
               <div
-                class=${classMap({checkbox:!0,disabled:this.disabled,error:this.#d})}
+                class=${classMap({
+            checkbox: true,
+            disabled: this.disabled,
+            error: this.#isShowValidationFeedback,
+        })}
               >
                 <div class="checked-icon">${checkedIcon}</div>
                 ${icons.indeterminate}
               </div>
             </div>
 
-            ${when(this.summary,(()=>html`<div
-                  class=${classMap({summary:!0,disabled:this.disabled})}
+            ${when(this.summary, () => html `<div
+                  class=${classMap({ summary: true, disabled: this.disabled })}
                   id="summary"
                   slot="summary"
                 >
                   ${this.summary}
-                </div>`))}
+                </div>`)}
 
             <div id="description" slot="description">
               <!--
@@ -111,7 +328,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
                 @type {Element | string}
               -->
               <slot
-                class=${classMap({description:!0,hidden:Boolean(this.#d&&this.validityMessage)})}
+                class=${classMap({
+            description: true,
+            hidden: Boolean(this.#isShowValidationFeedback && this.validityMessage),
+        })}
                 name="description"
               >
                 <!--
@@ -120,17 +340,283 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
                 -->
               </slot>
 
-              ${when(this.#d&&this.validityMessage,(()=>html`<span
+              ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<span
                     class="validity-message"
                     data-test="validity-message"
                     >${unsafeHTML(this.validityMessage)}</span
-                  >`))}
+                  >`)}
             </div>
-          </glide-core-private-label>`))}
-    </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#i=!1,this.#s=!1,this.#p=createRef(),this.#a="",this.#n=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#r=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#r;#l;#i;#s;#e;#p;#a;#n;get#d(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#b(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#h(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#p.value&&(this.isLabelOverflow=this.#p.value.scrollWidth>this.#p.value.clientWidth)}};__decorate([property({reflect:!0}),required],Checkbox.prototype,"label",null),__decorate([property({type:Boolean})],Checkbox.prototype,"checked",null),__decorate([property({attribute:"private-internally-inert",type:Boolean})],Checkbox.prototype,"privateInternallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],Checkbox.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],Checkbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],Checkbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0,useDefault:!0})],Checkbox.prototype,"orientation",void 0),__decorate([property({reflect:!0,useDefault:!0})],Checkbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,useDefault:!0,type:Number})],Checkbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],Checkbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],Checkbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property()],Checkbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],Checkbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],Checkbox.prototype,"required",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"value",null),__decorate([property({type:Boolean})],Checkbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"version",void 0),__decorate([state()],Checkbox.prototype,"isBlurring",void 0),__decorate([state()],Checkbox.prototype,"isCheckingValidity",void 0),__decorate([state()],Checkbox.prototype,"isLabelOverflow",void 0),__decorate([state()],Checkbox.prototype,"validityMessage",void 0),Checkbox=__decorate([customElement("glide-core-checkbox"),final],Checkbox);export default Checkbox;const icons={indeterminate:html`
+          </glide-core-private-label>`)}
+    </div>`;
+    }
+    reportValidity() {
+        this.privateIsReportValidityOrSubmit = true;
+        const isValid = this.#internals.reportValidity();
+        // Ensures that getters referencing `this.validity.valid` are updated.
+        this.requestUpdate();
+        return isValid;
+    }
+    resetValidityFeedback() {
+        this.privateIsReportValidityOrSubmit = false;
+    }
+    setCustomValidity(message) {
+        this.validityMessage = message;
+        if (message === '') {
+            this.#internals.setValidity({ customError: false }, '', this.#inputElementRef.value);
+        }
+        else {
+            // A validation message is required but unused because we disable native validation
+            // feedback. And an empty string isn't allowed. Thus a single space.
+            this.#internals.setValidity({
+                customError: true,
+                valueMissing: this.#internals.validity.valueMissing,
+            }, ' ', this.#inputElementRef.value);
+        }
+    }
+    setValidity(flags, message) {
+        this.validityMessage = message;
+        this.#internals.setValidity(flags, ' ', this.#inputElementRef.value);
+    }
+    updated() {
+        if (this.#inputElementRef.value) {
+            // `indeterminate` needs to be updated both on initial render and after it has
+            // changed. This handles both cases.
+            this.#inputElementRef.value.indeterminate = this.indeterminate;
+        }
+    }
+    constructor() {
+        super();
+        this.privateInternallyInert = false;
+        this.hideLabel = false;
+        this.indeterminate = false;
+        this.orientation = 'horizontal';
+        this.name = '';
+        // Private because it's only meant to be used by Dropdown Option to offset the
+        // tooltip by the option's padding.
+        this.privateLabelTooltipOffset = 4;
+        // Private because it's only meant to be used by Dropdown Option.
+        this.privateShowLabelTooltip = false;
+        // Private because it's only meant to be used by Dropdown Option.
+        this.privateDisableLabelTooltip = false;
+        this.required = false;
+        // Used by Checkbox Group.
+        this.privateIsReportValidityOrSubmit = false;
+        this.version = packageJson.version;
+        this.isBlurring = false;
+        this.isCheckingValidity = false;
+        this.isLabelOverflow = false;
+        this.#inputElementRef = createRef();
+        this.#isChecked = false;
+        this.#isDisabled = false;
+        this.#labelElementRef = createRef();
+        this.#value = '';
+        // An arrow function field instead of a method so `this` is closed over and
+        // set to the component instead of `document`.
+        this.#onFormdata = ({ formData }) => {
+            if (this.checked && this.name && this.value && !this.disabled) {
+                formData.append(this.name, this.value);
+            }
+        };
+        this.#internals = this.attachInternals();
+        // Event handlers on the host aren't great because consumers can remove them.
+        // Unfortunately, the host is the only thing on which this event is dispatched
+        // because it's the host that is form-associated.
+        this.addEventListener('invalid', (event) => {
+            event?.preventDefault(); // Canceled so a native validation message isn't shown.
+            // We only want to focus the input if the "invalid" event resulted from either:
+            //
+            // 1. A form submission.
+            // 2. A call of `reportValidity()` that did not result from the input's "blur"
+            //    event.
+            if (this.isCheckingValidity || this.isBlurring) {
+                return;
+            }
+            this.privateIsReportValidityOrSubmit = true;
+            const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
+            if (isFirstInvalidFormElement) {
+                // - `this.#internals.delegatesFocus` is preferred because it's declarative. But
+                //    it's limited to focusing the first focusable element. That doesn't work for
+                //    us because our first focusable element is the tooltip when it's present.
+                //
+                // - Canceling this event means the input won't get focus, even if we were to use
+                //   `this.#internals.delegatesFocus`.
+                //
+                // - The browser will ignore this if Checkbox isn't the first invalid form control.
+                //
+                // TODO
+                // Try passing `focusVisible` after browsers support it. It may prevent the issue
+                // where the checkbox itself has a focus outline after this call.
+                //
+                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
+                this.focus();
+            }
+        });
+    }
+    #inputElementRef;
+    #internals;
+    #intersectionObserver;
+    #isChecked;
+    #isDisabled;
+    #label;
+    #labelElementRef;
+    #value;
+    // An arrow function field instead of a method so `this` is closed over and
+    // set to the component instead of `document`.
+    #onFormdata;
+    get #isShowValidationFeedback() {
+        // If minimal, `disabled`, `required`, and whether the form has been submitted
+        // don't apply because the parent component handles those states itself.
+        if (this.privateVariant === 'minimal') {
+            return !this.validity.valid && this.privateIsReportValidityOrSubmit;
+        }
+        return (!this.disabled &&
+            !this.validity.valid &&
+            this.privateIsReportValidityOrSubmit);
+    }
+    #onBlur() {
+        this.isBlurring = true;
+        this.reportValidity();
+        this.isBlurring = false;
+    }
+    // Only "change" would need to be handled if not for some consumers needing
+    // to force Checkbox checked or unchecked until the user has completed some action.
+    //
+    // The way to force Checkbox checked or unchecked is to add an "input" or
+    // "change" handler and then immediately set `checked` back to its desired
+    // state inside that handler.
+    //
+    // To do that, consumers need to await `this.updateComplete` so `checked` isn't
+    // immediately reverted after Checkbox updates, which happens asynchronously and
+    // so would happen after their handler runs.
+    //
+    // To await `this.updateComplete`, however, an update has to be pending. That's
+    // why we're handling "input" as well: so that "input", like "change", results
+    // in an update that can be awaited.
+    //
+    // If "input" events were dispatched after "change" events, only handling
+    // "change" here would suffice because an update from "change" would already
+    // be pending by the time "input" is dispatched.
+    #onInputChangeOrInput(event) {
+        if (event.target instanceof HTMLInputElement) {
+            this.checked = event.target.checked;
+        }
+        // If the input is interacted with it's no longer indeterminate.
+        this.indeterminate = false;
+        if (event.type === 'change') {
+            // Unlike "input" events, "change" events aren't composed. So we have to
+            // manually dispatch them.
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    #onInputKeydown(event) {
+        if (event.key === 'Enter') {
+            this.form?.requestSubmit();
+        }
+    }
+    #updateLabelOverflow() {
+        if (this.#labelElementRef.value) {
+            this.isLabelOverflow =
+                this.#labelElementRef.value.scrollWidth >
+                    this.#labelElementRef.value.clientWidth;
+        }
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Checkbox.prototype, "label", null);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "checked", null);
+__decorate([
+    property({ attribute: 'private-internally-inert', type: Boolean })
+], Checkbox.prototype, "privateInternallyInert", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Checkbox.prototype, "disabled", null);
+__decorate([
+    property({ attribute: 'hide-label', type: Boolean })
+], Checkbox.prototype, "hideLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Checkbox.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Checkbox.prototype, "name", void 0);
+__decorate([
+    property({
+        attribute: 'private-label-tooltip-offset',
+        reflect: true,
+        useDefault: true,
+        type: Number,
+    })
+], Checkbox.prototype, "privateLabelTooltipOffset", void 0);
+__decorate([
+    property({
+        attribute: 'private-show-label-tooltip',
+        reflect: true,
+        type: Boolean,
+    })
+], Checkbox.prototype, "privateShowLabelTooltip", void 0);
+__decorate([
+    property({
+        attribute: 'private-disable-label-tooltip',
+        reflect: true,
+        type: Boolean,
+    })
+], Checkbox.prototype, "privateDisableLabelTooltip", void 0);
+__decorate([
+    property()
+], Checkbox.prototype, "privateSplit", void 0);
+__decorate([
+    property({ attribute: 'private-variant' })
+], Checkbox.prototype, "privateVariant", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true })
+], Checkbox.prototype, "summary", void 0);
+__decorate([
+    property({ reflect: true })
+], Checkbox.prototype, "tooltip", void 0);
+__decorate([
+    property({ reflect: true })
+], Checkbox.prototype, "value", null);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "privateIsReportValidityOrSubmit", void 0);
+__decorate([
+    property({ reflect: true })
+], Checkbox.prototype, "version", void 0);
+__decorate([
+    state()
+], Checkbox.prototype, "isBlurring", void 0);
+__decorate([
+    state()
+], Checkbox.prototype, "isCheckingValidity", void 0);
+__decorate([
+    state()
+], Checkbox.prototype, "isLabelOverflow", void 0);
+__decorate([
+    state()
+], Checkbox.prototype, "validityMessage", void 0);
+Checkbox = __decorate([
+    customElement('glide-core-checkbox'),
+    final
+], Checkbox);
+export default Checkbox;
+const icons = {
+    indeterminate: html `
     <svg
       aria-hidden="true"
-      style=${styleMap({height:"0.875rem",width:"0.875rem"})}
+      style=${styleMap({
+        height: '0.875rem',
+        width: '0.875rem',
+    })}
       viewBox="0 0 14 14"
       fill="none"
       class="indeterminate-icon"
@@ -141,4 +627,5 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
         fill="currentColor"
       />
     </svg>
-  `};
+  `,
+};

package/dist/checkbox.styles.js

@@ -1,7 +1,11 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".input:focus-visible ~ .checkbox")}
-    ${focusOutline(".input:focus ~ .checkbox.error")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+export default [
+    css `
+    ${focusOutline('.input:focus-visible ~ .checkbox')}
+    ${focusOutline('.input:focus ~ .checkbox.error')}
+  `,
+    css `
     .label-and-input-and-checkbox {
       align-items: center;
       column-gap: var(--glide-core-spacing-base-xs);
@@ -208,4 +212,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     .validity-message {
       display: block;
     }
-  `];
+  `,
+];