@crowdstrike/glide-core 0.29.2 → 0.30.1

package/dist/checkbox-group.js

@@ -1,16 +1,249 @@
-var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length,r=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(r=(a<3?o(r):a>3?o(t,i,r):o(t,i))||r);return a>3&&r&&Object.defineProperty(t,i,r),r};import"./label.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{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import Checkbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let CheckboxGroup=class CheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#s.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#o}set value(e){this.#o=e;for(const t of this.#t){e.some((e=>""!==e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#s.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#a)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;const e=this.#t.every((({checked:e})=>!e));for(const t of this.#t)t.addEventListener("blur",this.#r.bind(this)),e&&(t.checked=this.value.includes(t.value),t.checked&&!this.disabled&&(t.disabled=!1))}get form(){return this.#s.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#s.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.required&&this.#s.validity.valueMissing&&e&&this.#s.setValidity({}),this.required||!this.#s.validity.valueMissing||e||this.#s.setValidity({});for(const e of this.#t)e.setValidity(this.#s.validity," "),e.requestUpdate();return this.#s.validity}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#a)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
+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 { 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 { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { when } from 'lit/directives/when.js';
+import packageJson from '../package.json' with { type: 'json' };
+import Checkbox from './checkbox.js';
+import styles from './checkbox-group.styles.js';
+import assertSlot from './library/assert-slot.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} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {string} [name='']
+ * @attr {'horizontal'} [orientation='horizontal']
+ * @attr {boolean} [required=false]
+ * @attr {string} [summary]
+ * @attr {string} [tooltip]
+ * @attr {string[]} [value=[]]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Checkbox}
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @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 CheckboxGroup = class CheckboxGroup extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get disabled() {
+        return this.#isDisabled;
+    }
+    set disabled(isDisabled) {
+        this.#isDisabled = isDisabled;
+        for (const checkbox of this.#checkboxElements) {
+            checkbox.disabled = isDisabled;
+        }
+    }
+    /**
+     * @default false
+     */
+    get required() {
+        return this.#isRequired;
+    }
+    set required(isRequired) {
+        this.#isRequired = isRequired;
+        // Changes to `required` change the validity state. If no checkboxes are
+        // checked and Checkbox Group is `required`, then Checkbox Group is invalid.
+        //
+        // However, if `required` is programmatically removed, then Checkbox Group
+        // is suddenly valid. So we update the validity of every checkbox to match
+        // Checkbox Group. This ensures that any visual feedback shown by Checkbox
+        // based on validity is correct.
+        for (const checkbox of this.#checkboxElements) {
+            if (isRequired) {
+                checkbox.setValidity(this.#internals.validity, ' ');
+            }
+            else {
+                checkbox.setValidity({});
+            }
+            // Checkbox's `this.#internals.validity` isn't reactive.
+            checkbox.requestUpdate();
+        }
+    }
+    // Intentionally not reflected to match native.
+    /**
+     * @default []
+     */
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        this.#value = value;
+        for (const checkbox of this.#checkboxElements) {
+            const isChecked = value.some((value) => value !== '' && value === checkbox.value);
+            // It would be simpler if we just checked and unchecked every Checkbox
+            // based on whether its value is in `value`. But doing so would uncheck
+            // Checkboxes that don't have a value but have nonetheless been checked
+            // by the user. Doing it this way ensures we change as little state as
+            // possible that isn't ours to change.
+            if (isChecked) {
+                checkbox.checked = true;
+            }
+            else if (checkbox.value) {
+                checkbox.checked = false;
+            }
+            // We have a few options if `value` is set programmatically to include
+            // the value of a disabled Checkbox. We can throw, remove the value from
+            // `value`, or enable the Checkbox.
+            //
+            // Throwing is attractive because the inclusion of a disabled Checkbox
+            // in `value` is likely a mistake, either due to bad data or developer
+            // error.
+            //
+            // But we only throw in development. So the form will be submitted with the
+            // new `value` in production regardless if it was by mistake. By enabling
+            // the Checkbox, we at least ensure the user is aware of the fact that it'll
+            // be included in the submission.
+            if (checkbox.checked && checkbox.disabled) {
+                checkbox.disabled = false;
+            }
+        }
+    }
+    checkValidity() {
+        this.isCheckingValidity = true;
+        const isValid = this.#internals.checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.form?.removeEventListener('formdata', this.#onFormdata);
+    }
+    firstUpdated() {
+        if (this.disabled) {
+            for (const checkbox of this.#checkboxElements) {
+                checkbox.disabled = true;
+            }
+        }
+        const hasNoCheckedCheckboxes = this.#checkboxElements.every(({ checked }) => !checked);
+        for (const checkbox of this.#checkboxElements) {
+            checkbox.addEventListener('blur', this.#onCheckboxBlur.bind(this));
+            // When `value` is set on initial render, its setter is called before
+            // `connectedCallback()` and thus before the default slot has any assigned
+            // elements. So we set it again here after the initial render is complete
+            // so `this.#checkboxElements` isn't empty.
+            //
+            // Additionally, `#onDefaultSlotChange()` is called after `firstUpdated()`
+            // and sets `value` based on which checkboxes are checked. And the initial `value`
+            // may conflict with the one derived from which checkboxes are checked.
+            //
+            // So we have a decision to make. On first render, do we defer to the initial
+            // `value` and check and uncheck checkboxes below? Or do we defer to
+            // `#onDefaultSlotChange()` and let that method change `value` from its initial
+            // value based on which checkboxes are checked?
+            //
+            // It's largely a toss-up. But the latter seems like the logical choice given
+            // `#onDefaultSlotChange()` is called after `firstUpdated()`. In other words, we
+            // defer to the lifecycle. `#onDefaultSlotChange()` is called second. So it gets to
+            // override what `value` was initially.
+            //
+            // If no checkboxes are checked, then it's obvious that the consumer's intention is
+            // to check checkboxes based on the initial `value` and that the initial `value` is
+            // the intended one. So we proceed.
+            if (hasNoCheckedCheckboxes) {
+                checkbox.checked = this.value.includes(checkbox.value);
+                if (checkbox.checked && !this.disabled) {
+                    checkbox.disabled = false;
+                }
+            }
+        }
+    }
+    get form() {
+        return this.#internals.form;
+    }
+    get validity() {
+        const isChecked = this.#checkboxElements.some(({ checked }) => checked);
+        if (this.required && !isChecked) {
+            // 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.#componentElementRef.value);
+        }
+        if (this.required && this.#internals.validity.valueMissing && isChecked) {
+            this.#internals.setValidity({});
+        }
+        if (!this.required && this.#internals.validity.valueMissing && !isChecked) {
+            this.#internals.setValidity({});
+        }
+        for (const checkbox of this.#checkboxElements) {
+            checkbox.setValidity(this.#internals.validity, ' ');
+            // Checkbox's `this.#internals.validity` isn't reactive.
+            checkbox.requestUpdate();
+        }
+        return this.#internals.validity;
+    }
+    focus(options) {
+        const checkbox = this.#checkboxElements.find(({ disabled }) => !disabled);
+        checkbox?.focus(options);
+    }
+    formAssociatedCallback() {
+        this.form?.addEventListener('formdata', this.#onFormdata);
+    }
+    formResetCallback() {
+        for (const checkbox of this.#checkboxElements) {
+            checkbox.formResetCallback();
+        }
+    }
+    render() {
+        return html `<div
       class="component"
       data-test="component"
-      ${ref(this.#l)}
+      ${ref(this.#componentElementRef)}
     >
       <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)}
         ?hide=${this.hideLabel}
         ?disabled=${this.disabled}
-        ?error=${this.#n}
+        ?error=${this.#isShowValidationFeedback}
         ?required=${this.required}
       >
         <label id="label">${this.label}</label>
@@ -20,16 +253,19 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length
           aria-labelledby="label description"
           role="group"
           slot="control"
-          class=${classMap({"checkbox-container":!0,invalid:this.#n})}
+          class=${classMap({
+            'checkbox-container': true,
+            invalid: this.#isShowValidationFeedback,
+        })}
         >
           <slot
             class="default-slot"
-            @private-checked-change=${this.#d}
-            @private-disabled-change=${this.#c}
-            @private-value-change=${this.#h}
-            @slotchange=${this.#p}
+            @private-checked-change=${this.#onCheckboxCheckedChange}
+            @private-disabled-change=${this.#onCheckboxDisabledChange}
+            @private-value-change=${this.#onCheckboxValueChange}
+            @slotchange=${this.#onDefaultSlotChange}
             ${assertSlot([Checkbox])}
-            ${ref(this.#u)}
+            ${ref(this.#defaultSlotElementRef)}
           >
             <!--
               @type {Checkbox}
@@ -40,7 +276,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length
 
         <div id="description" slot="description">
           <slot
-            class=${classMap({description:!0,hidden:Boolean(this.#n&&this.validityMessage)})}
+            class=${classMap({
+            description: true,
+            hidden: Boolean(this.#isShowValidationFeedback && this.validityMessage),
+        })}
             name="description"
           >
             <!--
@@ -49,9 +288,235 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length
             -->
           </slot>
 
-          ${when(this.#n&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+          ${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.isReportValidityOrSubmit=!0;const e=this.#s.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#s.setValidity({customError:!1},"",this.#l.value):this.#s.setValidity({customError:!0,valueMissing:this.#s.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#s.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#u=createRef(),this.#e=!1,this.#i=!1,this.#o=[],this.#a=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#s=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#l;#u;#s;#e;#i;#o;get#t(){return this.#u.value?this.#u.value.assignedElements().filter((e=>e instanceof Checkbox)):[]}#a;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#f(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#r(e){const t=e.relatedTarget;t&&t instanceof Checkbox&&this.#t.includes(t)||this.#f()}#d(e){e.target instanceof Checkbox&&e.target.checked&&e.target.value?this.#o=[...this.value,e.target.value]:e.target instanceof Checkbox&&!e.target.checked&&(this.#o=this.value.filter((t=>e.target instanceof Checkbox&&t!==e.target.value)))}#c(e){if(e.target instanceof Checkbox&&e.target.disabled&&e.target.checked){const t=this.#o.lastIndexOf(e.target.value);this.#o.splice(t,t+1)}else e.target instanceof Checkbox&&e.target.checked&&e.target.value&&this.#o.push(e.target.value)}#h(e){e.target instanceof Checkbox&&e.target.checked&&e.detail.new?this.value=this.#o.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof Checkbox&&e.target.checked&&(this.value=this.#o.filter((t=>t!==e.detail.old)))}#p(){for(const e of this.#t)e.privateVariant="minimal";this.#o=this.#t.filter((({checked:e,disabled:t,value:i})=>e&&!t&&""!==i)).map((({value:e})=>e))}};__decorate([property({reflect:!0}),required],CheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],CheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],CheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],CheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],CheckboxGroup.prototype,"orientation",void 0),__decorate([property()],CheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],CheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"tooltip",void 0),__decorate([property({type:Array})],CheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"version",void 0),__decorate([state()],CheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],CheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],CheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],CheckboxGroup.prototype,"validityMessage",void 0),CheckboxGroup=__decorate([customElement("glide-core-checkbox-group"),final],CheckboxGroup);export default CheckboxGroup;
+    </div>`;
+    }
+    reportValidity() {
+        this.isReportValidityOrSubmit = true;
+        const isValid = this.#internals.reportValidity();
+        // Ensures that getters referencing `this.validity.valid` are updated.
+        this.requestUpdate();
+        return isValid;
+    }
+    resetValidityFeedback() {
+        this.isReportValidityOrSubmit = false;
+    }
+    setCustomValidity(message) {
+        this.validityMessage = message;
+        if (message === '') {
+            this.#internals.setValidity({ customError: false }, '', this.#componentElementRef.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.#componentElementRef.value);
+        }
+    }
+    setValidity(flags, message) {
+        this.validityMessage = message;
+        // 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(flags, ' ', this.#componentElementRef.value);
+    }
+    constructor() {
+        super();
+        this.hideLabel = false;
+        this.name = '';
+        this.orientation = 'horizontal';
+        this.version = packageJson.version;
+        this.isBlurring = false;
+        this.isCheckingValidity = false;
+        this.isReportValidityOrSubmit = false;
+        this.#componentElementRef = createRef();
+        this.#defaultSlotElementRef = createRef();
+        this.#isDisabled = false;
+        this.#isRequired = false;
+        this.#value = [];
+        // An arrow function field instead of a method so `this` is closed over and
+        // set to the component instead of the form.
+        this.#onFormdata = ({ formData }) => {
+            if (this.name && this.value.length > 0 && !this.disabled) {
+                formData.append(this.name, JSON.stringify(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.isReportValidityOrSubmit = 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();
+            }
+        });
+    }
+    #componentElementRef;
+    #defaultSlotElementRef;
+    #internals;
+    #isDisabled;
+    #isRequired;
+    #value;
+    get #checkboxElements() {
+        return this.#defaultSlotElementRef.value
+            ? this.#defaultSlotElementRef.value
+                .assignedElements()
+                .filter((element) => {
+                return element instanceof Checkbox;
+            })
+            : [];
+    }
+    // An arrow function field instead of a method so `this` is closed over and
+    // set to the component instead of the form.
+    #onFormdata;
+    get #isShowValidationFeedback() {
+        return (!this.disabled && !this.validity.valid && this.isReportValidityOrSubmit);
+    }
+    #onBlur() {
+        for (const checkbox of this.#checkboxElements) {
+            checkbox.privateIsReportValidityOrSubmit = true;
+        }
+    }
+    #onCheckboxBlur(event) {
+        const newlyFocusedElement = event.relatedTarget;
+        if (!newlyFocusedElement ||
+            !(newlyFocusedElement instanceof Checkbox) ||
+            !this.#checkboxElements.includes(newlyFocusedElement)) {
+            this.#onBlur();
+        }
+    }
+    #onCheckboxCheckedChange(event) {
+        if (event.target instanceof Checkbox &&
+            event.target.checked &&
+            event.target.value) {
+            this.#value = [...this.value, event.target.value];
+        }
+        else if (event.target instanceof Checkbox && !event.target.checked) {
+            this.#value = this.value.filter((value) => {
+                return event.target instanceof Checkbox && value !== event.target.value;
+            });
+        }
+    }
+    #onCheckboxDisabledChange(event) {
+        if (event.target instanceof Checkbox &&
+            event.target.disabled &&
+            event.target.checked) {
+            // `this.#value` may include multiple of the same value because multiple checkboxes
+            // may have the same value. So we only remove the last.
+            //
+            // Ideally, Checkbox Group wouldn't always remove the last value but would know the
+            // exact index to remove. But Checkbox Group, the way it's built, doesn't know
+            // which value in `this.#value` corresponds to which checkbox. It probably should
+            // if cases like this continue to pile up. For now, though, consumers' needs seem
+            // to be met.
+            const index = this.#value.lastIndexOf(event.target.value);
+            this.#value.splice(index, index + 1);
+        }
+        else if (event.target instanceof Checkbox &&
+            event.target.checked &&
+            event.target.value) {
+            this.#value.push(event.target.value);
+        }
+    }
+    #onCheckboxValueChange(event) {
+        if (event.target instanceof Checkbox &&
+            event.target.checked &&
+            event.detail.new) {
+            this.value = this.#value.map((value) => {
+                return value === event.detail.old ? event.detail.new : value;
+            });
+        }
+        else if (event.target instanceof Checkbox && event.target.checked) {
+            this.value = this.#value.filter((value) => value !== event.detail.old);
+        }
+    }
+    #onDefaultSlotChange() {
+        for (const checkbox of this.#checkboxElements) {
+            checkbox.privateVariant = 'minimal';
+        }
+        this.#value = this.#checkboxElements
+            .filter(({ checked, disabled, value }) => checked && !disabled && value !== '')
+            .map(({ value }) => value);
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], CheckboxGroup.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], CheckboxGroup.prototype, "disabled", null);
+__decorate([
+    property({ attribute: 'hide-label', type: Boolean })
+], CheckboxGroup.prototype, "hideLabel", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], CheckboxGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], CheckboxGroup.prototype, "orientation", void 0);
+__decorate([
+    property()
+], CheckboxGroup.prototype, "privateSplit", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], CheckboxGroup.prototype, "required", null);
+__decorate([
+    property({ reflect: true })
+], CheckboxGroup.prototype, "summary", void 0);
+__decorate([
+    property({ reflect: true })
+], CheckboxGroup.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: Array })
+], CheckboxGroup.prototype, "value", null);
+__decorate([
+    property({ reflect: true })
+], CheckboxGroup.prototype, "version", void 0);
+__decorate([
+    state()
+], CheckboxGroup.prototype, "isBlurring", void 0);
+__decorate([
+    state()
+], CheckboxGroup.prototype, "isCheckingValidity", void 0);
+__decorate([
+    state()
+], CheckboxGroup.prototype, "isReportValidityOrSubmit", void 0);
+__decorate([
+    state()
+], CheckboxGroup.prototype, "validityMessage", void 0);
+CheckboxGroup = __decorate([
+    customElement('glide-core-checkbox-group'),
+    final
+], CheckboxGroup);
+export default CheckboxGroup;

package/dist/checkbox-group.styles.js

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     :host(:not(:disabled)) .component {
       &.error {
         .checkbox {
@@ -41,4 +43,5 @@ import{css}from"lit";export default[css`
     .validity-message {
       display: block;
     }
-  `];
+  `,
+];