@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/button-group.test.events.js

@@ -1,292 +1,239 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button-group.button.js';
-import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreButtonGroup from './button-group.js';
 import GlideCoreButtonGroupButton from './button-group.button.js';
+import sinon from 'sinon';
 GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
 GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
-it('emits a change event when arrow keys are pressed', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1"
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2" selected
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3"
-        >Button 3</glide-core-button-group-button
-      >
+it('emits a "change" event when a button is clicked and not already selected', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    // This pattern is adopted from https://open-wc.org/docs/testing/helpers/#testing-events
-    // Without the setTimeout the test fails. An `await` is used since `sendKeys` returns a
-    // promise, however the test seems to work without it. Keeping `await` here until this can
-    // be investigated further.
-    setTimeout(async () => await sendKeys({ press: 'ArrowLeft' }));
-    const changeEventLeft = await oneEvent(buttonElements[0], 'change');
-    expect(changeEventLeft instanceof Event).to.be.true;
-    expect(changeEventLeft.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowRight' }));
-    const changeEventRight = await oneEvent(buttonElements[1], 'change');
-    expect(changeEventRight instanceof Event).to.be.true;
-    expect(changeEventRight.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowUp' }));
-    const changeEventUp = await oneEvent(buttonElements[0], 'change');
-    expect(changeEventUp instanceof Event).to.be.true;
-    expect(changeEventUp.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowDown' }));
-    const changeEventDown = await oneEvent(buttonElements[1], 'change');
-    expect(changeEventDown instanceof Event).to.be.true;
-    expect(changeEventDown.bubbles).to.be.true;
+    const button = component.querySelector('glide-core-button-group-button:last-of-type');
+    setTimeout(() => {
+        button?.click();
+    });
+    const event = await oneEvent(component, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });
-it('emits an input event when arrow keys are pressed', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1"
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2" selected
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3"
-        >Button 3</glide-core-button-group-button
-      >
+it('emits an "input" event when a button is clicked and not already selected', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    setTimeout(async () => await sendKeys({ press: 'ArrowLeft' }));
-    const inputEventLeft = await oneEvent(buttonElements[0], 'input');
-    expect(inputEventLeft instanceof Event).to.be.true;
-    expect(inputEventLeft.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowRight' }));
-    const inputEventRight = await oneEvent(buttonElements[1], 'input');
-    expect(inputEventRight instanceof Event).to.be.true;
-    expect(inputEventRight.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowUp' }));
-    const inputEventUp = await oneEvent(buttonElements[0], 'input');
-    expect(inputEventUp instanceof Event).to.be.true;
-    expect(inputEventUp.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowDown' }));
-    const inputEventDown = await oneEvent(buttonElements[1], 'input');
-    expect(inputEventDown instanceof Event).to.be.true;
-    expect(inputEventDown.bubbles).to.be.true;
+    const button = component.querySelector('glide-core-button-group-button:last-of-type');
+    setTimeout(() => {
+        button?.click();
+    });
+    const event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });
-it('moves focus to previous button when left or up arrow keys are pressed', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1"
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2"
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3" selected
-        >Button 3</glide-core-button-group-button
-      >
+it('does not emit an "change" event when clicked button is clicked and already selected', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="One"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(buttonElements[1]).to.have.focus;
-    await sendKeys({ press: 'ArrowUp' });
-    expect(buttonElements[0]).to.have.focus;
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-button-group-button');
+    component.addEventListener('change', spy);
+    setTimeout(() => {
+        button?.click();
+    });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
 });
-it('moves focus to last button when left or up arrow keys are pressed on the first button', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1" selected
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2"
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3"
-        >Button 3</glide-core-button-group-button
-      >
+it('does not emit an "input" event when clicked button is clicked and already selected', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(buttonElements[2]).to.have.focus;
-    buttonElements[0].focus();
-    await sendKeys({ press: ' ' });
-    await sendKeys({ press: 'ArrowUp' });
-    expect(buttonElements[2]).to.have.focus;
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-button-group-button');
+    component.addEventListener('input', spy);
+    setTimeout(() => {
+        button?.click();
+    });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
 });
-it('moves focus to next button when right or down arrow keys are pressed', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1" selected
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2"
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3"
-        >Button 3</glide-core-button-group-button
-      >
+it('emits a "change" event when arrowing', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+        selected
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowRight' });
-    expect(buttonElements[1]).to.have.focus;
-    await sendKeys({ press: 'ArrowDown' });
-    expect(buttonElements[2]).to.have.focus;
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[0].focus();
+    let event;
+    sendKeys({ press: 'ArrowRight' });
+    event = await oneEvent(component, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    sendKeys({ press: 'ArrowLeft' });
+    event = await oneEvent(component, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    sendKeys({ press: 'ArrowDown' });
+    event = await oneEvent(component, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    sendKeys({ press: 'ArrowUp' });
+    event = await oneEvent(component, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });
-it('moves focus to first button when right or down arrow keys are pressed on the last button', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1"
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2"
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3" selected
-        >Button 3</glide-core-button-group-button
-      >
+it('emits an "input" event when arrowing', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowRight' });
-    expect(buttonElements[0]).to.have.focus;
-    buttonElements[2].focus();
-    await sendKeys({ press: ' ' });
-    expect(buttonElements[2]).to.have.focus;
-    await sendKeys({ press: 'ArrowDown' });
-    expect(buttonElements[0]).to.have.focus;
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[0].focus();
+    let event;
+    sendKeys({ press: 'ArrowRight' });
+    event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    sendKeys({ press: 'ArrowLeft' });
+    event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    sendKeys({ press: 'ArrowDown' });
+    event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    sendKeys({ press: 'ArrowUp' });
+    event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });
-it('moves focus to previous enabled button when pressing left or up arrow keys', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1"
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2" disabled
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3" selected
-        >Button 3</glide-core-button-group-button
-      >
+it('emits a "change" event when a button is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(buttonElements[0]).to.have.focus;
-    buttonElements[2].focus();
-    await sendKeys({ press: ' ' });
-    expect(buttonElements[2]).to.have.focus;
-    await sendKeys({ press: 'ArrowUp' });
-    expect(buttonElements[0]).to.have.focus;
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[1]?.focus();
+    sendKeys({ press: 'Space' });
+    const event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });
-it('moves focus to next enabled button when pressing right or down arrow keys', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1" selected
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2" disabled
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3"
-        >Button 3</glide-core-button-group-button
-      >
+it('emits a "change" event when a button is selected programmatically', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowRight' });
-    expect(buttonElements[2]).to.have.focus;
-    buttonElements[0].focus();
-    await sendKeys({ press: ' ' });
-    expect(buttonElements[0]).to.have.focus;
-    await sendKeys({ press: 'ArrowDown' });
-    expect(buttonElements[2]).to.have.focus;
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    setTimeout(() => {
+        buttons[1].selected = true;
+    });
+    const event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });
-it('does not move focus if there is only one button when pressing arrow keys', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1"
-        >Button 1</glide-core-button-group-button
-      >
+it('does not emit a "change" event when an already selected button is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElement = document.querySelector('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(buttonElement).to.have.focus;
-    await sendKeys({ press: 'ArrowRight' });
-    expect(buttonElement).to.have.focus;
-    await sendKeys({ press: 'ArrowUp' });
-    expect(buttonElement).to.have.focus;
-    await sendKeys({ press: 'ArrowDown' });
-    expect(buttonElement).to.have.focus;
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[0]?.focus();
+    const spy = sinon.spy();
+    component.addEventListener('change', spy);
+    sendKeys({ press: 'Space' });
+    expect(spy.callCount).to.equal(0);
 });
-it('changes the "selected" attribute when clicking', async () => {
-    const element = await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1" selected
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2"
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3"
-        >Button 3</glide-core-button-group-button
-      >
+it('does not emit a "change" event a button is selected programmatically', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    const liElement = buttonElements[2].shadowRoot.querySelector('li');
-    expect(liElement).to.exist;
-    liElement?.click();
-    await elementUpdated(element);
-    expect(buttonElements[2]).to.have.focus;
-    expect(buttonElements[2]).to.have.attribute('selected');
-    expect(buttonElements[0]).to.not.have.attribute('selected');
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    const spy = sinon.spy();
+    component.addEventListener('change', spy);
+    setTimeout(() => {
+        buttons[1].selected = true;
+    });
+    expect(spy.callCount).to.equal(0);
 });
-it('does not change focus nor the "selected" attribute when clicking a disabled button', async () => {
-    const element = await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1" selected
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2" disabled
-        >Button 2</glide-core-button-group-button
-      >
+it('does not emit a "input" event a button is selected programmatically', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
     </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    const liElement = buttonElements[0].shadowRoot.querySelector('li');
-    expect(liElement).to.exist;
-    liElement?.click();
-    await elementUpdated(element);
-    expect(buttonElements[0]).to.have.focus;
-    expect(buttonElements[0]).to.have.attribute('selected');
-    expect(buttonElements[1]).to.not.have.attribute('selected');
-});
-it('changes the "selected" attribute when pressing arrow and space keys', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button value="value-1" selected
-        >Button 1</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-2"
-        >Button 2</glide-core-button-group-button
-      >
-      <glide-core-button-group-button value="value-3"
-        >Button 3</glide-core-button-group-button
-      >
-    </glide-core-button-group>`);
-    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowRight' });
-    expect(buttonElements[1]).to.have.focus;
-    expect(buttonElements[1]).to.have.attribute('selected');
-    expect(buttonElements[0]).to.not.have.attribute('selected');
-    await sendKeys({ press: 'ArrowDown' });
-    expect(buttonElements[2]).to.have.focus;
-    expect(buttonElements[2]).to.have.attribute('selected');
-    expect(buttonElements[1]).to.not.have.attribute('selected');
-    await sendKeys({ press: 'ArrowUp' });
-    expect(buttonElements[1]).to.have.focus;
-    expect(buttonElements[1]).to.have.attribute('selected');
-    expect(buttonElements[2]).to.not.have.attribute('selected');
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(buttonElements[0]).to.have.focus;
-    expect(buttonElements[0]).to.have.attribute('selected');
-    expect(buttonElements[1]).to.not.have.attribute('selected');
-    buttonElements[2].focus();
-    await sendKeys({ press: ' ' });
-    expect(buttonElements[2]).to.have.focus;
-    expect(buttonElements[2]).to.have.attribute('selected');
-    expect(buttonElements[0]).to.not.have.attribute('selected');
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    setTimeout(() => {
+        buttons[1].selected = true;
+    });
+    expect(spy.callCount).to.equal(0);
 });

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

@@ -0,0 +1 @@
+import './button-group.button.js';

package/dist/button-group.test.focus.js

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './button-group.button.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreButtonGroup from './button-group.js';
+import GlideCoreButtonGroupButton from './button-group.button.js';
+GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
+GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
+it('moves focus', async () => {
+    await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+        disabled
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Three"
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Four"
+        selected
+      ></glide-core-button-group-button>
+    </glide-core-button-group>`);
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[3]?.focus();
+    await sendKeys({ press: 'ArrowRight' });
+    expect(buttons[0]).to.have.focus;
+    await sendKeys({ press: 'ArrowUp' });
+    expect(buttons[3]).to.have.focus;
+    await sendKeys({ press: 'ArrowLeft' });
+    expect(buttons[2]).to.have.focus;
+    await sendKeys({ press: 'ArrowDown' });
+    expect(buttons[3]).to.have.focus;
+});

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

@@ -0,0 +1 @@
+import './button-group.button.js';

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

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './button-group.button.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreButtonGroup from './button-group.js';
+import GlideCoreButtonGroupButton from './button-group.button.js';
+GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
+GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
+it('selects a button when clicked', async () => {
+    const component = await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
+    </glide-core-button-group>`);
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[1]?.click();
+    await elementUpdated(component);
+    expect(buttons[0].selected).to.be.false;
+    expect(buttons[1].selected).to.be.true;
+});
+it('selects buttons when arrowing', async () => {
+    await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        disabled
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Three"
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Four"
+        disabled
+      ></glide-core-button-group-button>
+    </glide-core-button-group>`);
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[1]?.focus();
+    await sendKeys({ press: 'ArrowRight' });
+    expect(buttons[2].selected).to.be.true;
+    await sendKeys({ press: 'ArrowDown' });
+    expect(buttons[1].selected).to.be.true;
+    await sendKeys({ press: 'ArrowLeft' });
+    expect(buttons[2].selected).to.be.true;
+    await sendKeys({ press: 'ArrowUp' });
+    expect(buttons[1].selected).to.be.true;
+});
+it('selects a button on Space', async () => {
+    await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
+    </glide-core-button-group>`);
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[1]?.focus();
+    await sendKeys({ press: 'Space' });
+    expect(buttons[0].selected).to.be.false;
+    expect(buttons[1].selected).to.be.true;
+});
+it('does not select a disabled button', async () => {
+    await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button
+        label="One"
+        selected
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+        disabled
+      ></glide-core-button-group-button>
+    </glide-core-button-group>`);
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    buttons[1]?.click();
+    expect(buttons[0].selected).to.be.true;
+    expect(buttons[1].selected).to.be.false;
+});