Add values to Checkbox Group's value in order of selection

.changeset/empty-guests-mix.md

@@ -0,0 +1,5 @@
+---
+'@crowdstrike/glide-core': minor
+---
+
+The values in Checkbox Group's `value` attribute now appear in the order they were selected.

src/checkbox-group.test.interactions.ts

@@ -8,6 +8,7 @@ import {
   fixture,
   html,
 } from '@open-wc/testing';
+import { click } from './library/mouse.js';
 import GlideCoreCheckboxGroup from './checkbox-group.js';
 
 GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
@@ -111,3 +112,26 @@ it('enables disabled Checkboxes when `value` is set programmatically', async ()
   const checkbox = component.querySelector('glide-core-checkbox');
   expect(checkbox?.disabled).to.be.false;
 });
+
+it('adds values to `value` in the order they were selected or deselected', async () => {
+  const component = await fixture<GlideCoreCheckboxGroup>(
+    html`<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="One" value="one"></glide-core-checkbox>
+      <glide-core-checkbox label="Two" value="two"></glide-core-checkbox>
+      <glide-core-checkbox label="Three" value="three"></glide-core-checkbox>
+    </glide-core-checkbox-group>`,
+  );
+
+  const checkboxes = component.querySelectorAll('glide-core-checkbox');
+
+  await click(checkboxes[1]);
+  await click(checkboxes[2]);
+  await click(checkboxes[0]);
+  expect(component.value).to.deep.equal(['two', 'three', 'one']);
+
+  await click(checkboxes[2]);
+  expect(component.value).to.deep.equal(['two', 'one']);
+
+  await click(checkboxes[2]);
+  expect(component.value).to.deep.equal(['two', 'one', 'three']);
+});

src/checkbox-group.ts

@@ -432,13 +432,26 @@ export default class GlideCoreCheckboxGroup extends LitElement {
     }
   }
 
-  #onCheckboxChange() {
-    this.value = this.#checkboxes
-      .filter(({ checked, disabled }) => checked && !disabled)
-      .map(({ value }) => value)
-      // Disabled because simply filtering by `Boolean` doesn't narrow the type.
-      // eslint-disable-next-line unicorn/prefer-native-coercion-functions
-      .filter((value): value is string => Boolean(value));
+  #onCheckboxChange(event: Event) {
+    if (
+      event.target instanceof GlideCoreCheckbox &&
+      event.target.checked &&
+      event.target.value
+    ) {
+      this.value = [...this.value, event.target.value];
+    } else if (
+      event.target instanceof GlideCoreCheckbox &&
+      !event.target.checked
+    ) {
+      this.value = this.value.filter((value) => {
+        return (
+          // No idea why TypeScript thinks `event.target` is possibly `null`
+          // when filtering given it's narrowed out above.
+          event.target instanceof GlideCoreCheckbox &&
+          value !== event.target.value
+        );
+      });
+    }
   }
 
   #onCheckboxesValueChange(event: CustomEvent<{ new: string; old: string }>) {