@crowdstrike/glide-core 0.5.1 → 0.6.0

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

@@ -0,0 +1,268 @@
+import './button-group.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreButtonGroup from './button-group.js';
+import GlideCoreButtonGroupButton from './button-group.button.js';
+import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
+GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-button-group')).to.equal(GlideCoreButtonGroup);
+});
+it('is accessible', async () => {
+    const element = await fixture(html `<glide-core-button-group label="label"
+      ><glide-core-button-group-button value="value"
+        >Button</glide-core-button-group-button
+      ></glide-core-button-group
+    >`);
+    await expect(element).to.be.accessible();
+});
+it('renders a label and unordered list', async () => {
+    const element = await fixture(html `<glide-core-button-group label="label"
+      ><glide-core-button-group-button value="value"
+        >Button</glide-core-button-group-button
+      ></glide-core-button-group
+    >`);
+    const ulElement = element.shadowRoot?.querySelector('ul');
+    const labelElement = element.shadowRoot?.querySelector('div.label');
+    expect(ulElement).to.not.be.null;
+    expect(labelElement).to.not.be.null;
+    expect(ulElement).to.have.attribute('aria-labelledby', labelElement?.id);
+});
+it('does not render a label when not given', async () => {
+    const element = await fixture(html `<glide-core-button-group
+      ><glide-core-button-group-button value="value"
+        >Button</glide-core-button-group-button
+      ></glide-core-button-group
+    >`);
+    const ulElement = element.shadowRoot?.querySelector('ul');
+    const labelElement = element.shadowRoot?.querySelector('label');
+    expect(ulElement).to.not.be.null;
+    expect(labelElement).to.be.null;
+});
+it('assigns buttons the correct positional presentation when in a group', 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"
+        >Button 3</glide-core-button-group-button
+      >
+      <glide-core-button-group-button value="value-4"
+        >Button 4</glide-core-button-group-button
+      >
+    </glide-core-button-group>`);
+    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttonElements.length).to.equal(4);
+    const liElement1 = buttonElements[0].shadowRoot?.querySelector('li');
+    expect(liElement1).to.have.class('first');
+    const liElement2 = buttonElements[1].shadowRoot?.querySelector('li');
+    expect(liElement2).to.have.class('inner');
+    const liElement3 = buttonElements[2].shadowRoot?.querySelector('li');
+    expect(liElement3).to.have.class('inner');
+    const liElement4 = buttonElements[3].shadowRoot?.querySelector('li');
+    expect(liElement4).to.have.class('last');
+});
+it('buttons have a vertical presention when attribute "orientation" is set to "vertical"', async () => {
+    await fixture(html `<glide-core-button-group orientation="vertical"
+      ><glide-core-button-group-button value="value"
+        >Button</glide-core-button-group-button
+      >
+      <glide-core-button-group-button value="value-2"
+        >Button 2</glide-core-button-group-button
+      >
+    </glide-core-button-group>`);
+    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
+    const liElement1 = buttonElements[0]?.shadowRoot?.querySelector('li');
+    const liElement2 = buttonElements[1]?.shadowRoot?.querySelector('li');
+    expect(buttonElements[0]).to.have.attribute('vertical');
+    expect(liElement1).to.have.class('vertical');
+    expect(buttonElements[1]).to.have.attribute('vertical');
+    expect(liElement2).to.have.class('vertical');
+});
+it('does not have a vertical presention when the "orientation" is not set to "vertical"', async () => {
+    await fixture(html `<glide-core-button-group label="label">
+      <glide-core-button-group-button value="value"
+        >Button</glide-core-button-group-button
+      >
+      <glide-core-button-group-button value="value-2"
+        >Button 2</glide-core-button-group-button
+      >
+    </glide-core-button-group>`);
+    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
+    const liElement1 = buttonElements[0]?.shadowRoot?.querySelector('li');
+    const liElement2 = buttonElements[1]?.shadowRoot?.querySelector('li');
+    expect(buttonElements[0]).to.not.have.attribute('vertical');
+    expect(liElement1).to.not.have.class('vertical');
+    expect(buttonElements[1]).to.not.have.attribute('vertical');
+    expect(liElement2).to.not.have.class('vertical');
+});
+it('reacts to "orientation" attribute when changed from "horizontal" to "vertical"', async () => {
+    const element = await fixture(html `<glide-core-button-group label="label" orientation="horizontal"
+      ><glide-core-button-group-button value="value"
+        >Button</glide-core-button-group-button
+      ></glide-core-button-group
+    >`);
+    const buttonElement = document.querySelector('glide-core-button-group-button');
+    const liElement = buttonElement?.shadowRoot?.querySelector('li');
+    expect(liElement).to.not.have.class('vertical');
+    element.setAttribute('orientation', 'vertical');
+    // wait for attributes to be set on li
+    await elementUpdated(element);
+    expect(liElement).to.have.class('vertical');
+    element.setAttribute('orientation', 'horizontal');
+    // wait for attributes to be set on li
+    await elementUpdated(element);
+    await expect(liElement).to.not.have.class('vertical');
+});
+it('applies an "icon-only" variant to buttons when set on the group', async () => {
+    await fixture(html `<glide-core-button-group label="label" variant="icon-only"
+      ><glide-core-button-group-button value="value"
+        ><span slot="prefix">Prefix 1</span>Button
+        1</glide-core-button-group-button
+      >
+      <glide-core-button-group-button value="value-2"
+        ><span slot="prefix">Prefix 2</span>Button
+        2</glide-core-button-group-button
+      >
+    </glide-core-button-group>`);
+    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
+    const liElement1 = buttonElements[0]?.shadowRoot?.querySelector('li');
+    const liElement2 = buttonElements[1]?.shadowRoot?.querySelector('li');
+    expect(buttonElements[0]).to.have.attribute('variant', 'icon-only');
+    expect(liElement1).to.have.class('icon-only');
+    expect(buttonElements[1]).to.have.attribute('variant', 'icon-only');
+    expect(liElement2).to.have.class('icon-only');
+});
+it('does not apply an "icon-only" variant to buttons when not set on the group', async () => {
+    await fixture(html `<glide-core-button-group label="label"
+      ><glide-core-button-group-button value="value"
+        >Button</glide-core-button-group-button
+      >
+      <glide-core-button-group-button value="value-2"
+        >Button 2</glide-core-button-group-button
+      >
+    </glide-core-button-group>`);
+    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
+    const liElement1 = buttonElements[0]?.shadowRoot?.querySelector('li');
+    const liElement2 = buttonElements[1]?.shadowRoot?.querySelector('li');
+    expect(buttonElements[0]).to.not.have.attribute('variant');
+    expect(liElement1).to.not.have.class('icon-only');
+    expect(buttonElements[1]).to.not.have.attribute('variant');
+    expect(liElement2).to.not.have.class('icon-only');
+});
+it('reacts to variant "icon-only" attribute when added and removed', async () => {
+    await fixture(html `<glide-core-button-group label="label"
+      ><glide-core-button-group-button value="value"
+        ><span slot="prefix">Prefix</span>Button</glide-core-button-group-button
+      ></glide-core-button-group
+    >`);
+    const element = document.querySelector('glide-core-button-group');
+    const buttonElement = document.querySelector('glide-core-button-group-button');
+    expect(element).to.not.be.null;
+    expect(buttonElement).to.not.be.null;
+    expect(buttonElement).to.not.have.attribute('variant');
+    element?.setAttribute('variant', 'icon-only');
+    // wait for attributes to be set
+    await elementUpdated(element);
+    expect(buttonElement).to.have.attribute('variant', 'icon-only');
+    element?.removeAttribute('variant');
+    // wait for attributes to be set
+    await elementUpdated(element);
+    expect(buttonElement).to.not.have.attribute('variant');
+});
+it('throws an error when an element other than `glide-core-button-group-button` is a child of the default slot', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-button-group label="label">
+        <div>Content</div>
+      </glide-core-button-group>
+    `);
+    });
+});
+it('throws an error when the group has no children', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-button-group label="label"> </glide-core-button-group>`);
+    });
+});
+it("has a tabble button if it's the first element in a button group", 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"
+        >Button 3</glide-core-button-group-button
+      >
+    </glide-core-button-group>`);
+    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttonElements.length).to.equal(3);
+    const liElement1 = buttonElements[0].shadowRoot?.querySelector('li');
+    expect(liElement1).to.have.attribute('tabindex', '0');
+    const liElement2 = buttonElements[1].shadowRoot?.querySelector('li');
+    expect(liElement2).to.have.attribute('tabindex', '-1');
+    const liElement3 = buttonElements[2].shadowRoot?.querySelector('li');
+    expect(liElement3).to.have.attribute('tabindex', '-1');
+});
+it('has the first non-disabled button set as tabbable when in a group', async () => {
+    await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button value="value-1" disabled
+        >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');
+    expect(buttonElements.length).to.equal(3);
+    const liElement1 = buttonElements[0].shadowRoot?.querySelector('li');
+    expect(liElement1).to.have.attribute('tabindex', '-1');
+    const liElement2 = buttonElements[1].shadowRoot?.querySelector('li');
+    expect(liElement2).to.have.attribute('tabindex', '0');
+    const liElement3 = buttonElements[2].shadowRoot?.querySelector('li');
+    expect(liElement3).to.have.attribute('tabindex', '-1');
+});
+it('has the "selected" button as tabbable and others are not when in a group', 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
+      >
+    </glide-core-button-group>`);
+    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttonElements.length).to.equal(3);
+    const liElement1 = buttonElements[0].shadowRoot?.querySelector('li');
+    expect(liElement1).to.have.attribute('tabindex', '-1');
+    const liElement2 = buttonElements[1].shadowRoot?.querySelector('li');
+    expect(liElement2).to.have.attribute('tabindex', '0');
+    const liElement3 = buttonElements[2].shadowRoot?.querySelector('li');
+    expect(liElement3).to.have.attribute('tabindex', '-1');
+});
+it('initially no button sets itself as tabbable if all are disabled in a group', async () => {
+    await fixture(html `<glide-core-button-group>
+      <glide-core-button-group-button value="value-1" disabled
+        >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>`);
+    const buttonElements = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttonElements.length).to.equal(2);
+    const liElement1 = buttonElements[0].shadowRoot?.querySelector('li');
+    expect(liElement1).to.have.attribute('tabindex', '-1');
+    const liElement2 = buttonElements[1].shadowRoot?.querySelector('li');
+    expect(liElement2).to.have.attribute('tabindex', '-1');
+});

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

@@ -0,0 +1,291 @@
+import './button-group.button.js';
+import { elementUpdated, 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';
+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
+      >
+    </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;
+});
+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
+      >
+    </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;
+});
+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
+      >
+    </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;
+});
+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
+      >
+    </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;
+});
+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
+      >
+    </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;
+});
+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
+      >
+    </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;
+});
+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
+      >
+    </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;
+});
+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
+      >
+    </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;
+});
+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
+      >
+    </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;
+});
+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
+      >
+    </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');
+});
+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
+      >
+    </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');
+});

package/dist/button.d.ts

@@ -14,8 +14,9 @@ export default class GlideCoreButton extends LitElement {
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    ariaExpanded: string | null;
-    ariaHasPopup: string | null;
+    ariaExpanded: 'true' | 'false' | null;
+    ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
+    ariaControls: string | null;
     disabled: boolean;
     type: 'button' | 'submit' | 'reset';
     variant: 'primary' | 'secondary' | 'tertiary';

package/dist/button.js

@@ -1 +1 @@
-"use strict";var I=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var a=(s,e,t,o)=>{for(var n=o>1?void 0:o?D(e,t):e,x=s.length-1,b;x>=0;x--)(b=s[x])&&(n=(o?b(e,t,n):b(n))||n);return o&&n&&I(e,t,n),n};var E=(s,e,t)=>{if(!e.has(s))throw TypeError("Cannot "+t)};var l=(s,e,t)=>(E(s,e,"read from private field"),t?t.call(s):e.get(s)),i=(s,e,t)=>{if(e.has(s))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(s):e.set(s,t)},M=(s,e,t,o)=>(E(s,e,"write to private field"),o?o.call(s,t):e.set(s,t),t);var f=(s,e,t)=>(E(s,e,"access private method"),t);var m,u,c,p,d,w,g,P,y,T,S,k,v,z;import{LitElement as H,html as K}from"lit";import{classMap as O}from"lit/directives/class-map.js";import{createRef as $,ref as R}from"lit/directives/ref.js";import{customElement as q,property as h,state as L}from"lit/decorators.js";import{owSlot as N}from"./library/ow.js";import A from"./button.styles.js";let r=class extends H{constructor(){super();i(this,d);i(this,g);i(this,y);i(this,S);i(this,v);this.ariaExpanded=null;this.ariaHasPopup=null;this.disabled=!1;this.type="button";this.variant="primary";this.size="large";this.hasPrefixSlot=!1;this.hasSuffixSlot=!1;i(this,m,$());i(this,u,void 0);i(this,c,$());i(this,p,$());M(this,u,this.attachInternals())}get form(){return l(this,u).form}firstUpdated(){N(l(this,m).value)}render(){return K`<button class="${O({component:!0,primary:this.variant==="primary",secondary:this.variant==="secondary",tertiary:this.variant==="tertiary",large:this.size==="large",small:this.size==="small","has-prefix":this.hasPrefixSlot,"has-suffix":this.hasSuffixSlot})}" type="${this.type}" ?disabled="${this.disabled}" @click="${f(this,d,w)}" @keydown="${f(this,y,T)}"><slot name="prefix" @slotchange="${f(this,S,k)}" ${R(l(this,c))}></slot><slot @slotchange="${f(this,g,P)}" ${R(l(this,m))}></slot><slot name="suffix" @slotchange="${f(this,v,z)}" ${R(l(this,p))}></slot></button>`}};m=new WeakMap,u=new WeakMap,c=new WeakMap,p=new WeakMap,d=new WeakSet,w=function(){if(this.type!=="button"){if(this.type==="submit"){this.form?.requestSubmit();return}this.form?.reset()}},g=new WeakSet,P=function(){N(l(this,m).value)},y=new WeakSet,T=function(t){["Enter"].includes(t.key)&&(t.preventDefault(),f(this,d,w).call(this))},S=new WeakSet,k=function(){const t=l(this,c).value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)},v=new WeakSet,z=function(){const t=l(this,p).value?.assignedNodes();this.hasSuffixSlot=!!(t&&t.length>0)},r.formAssociated=!0,r.shadowRootOptions={...H.shadowRootOptions,delegatesFocus:!0,mode:"closed"},r.styles=A,a([h({reflect:!0})],r.prototype,"ariaExpanded",2),a([h({reflect:!0})],r.prototype,"ariaHasPopup",2),a([h({type:Boolean,reflect:!0})],r.prototype,"disabled",2),a([h()],r.prototype,"type",2),a([h({reflect:!0})],r.prototype,"variant",2),a([h({reflect:!0})],r.prototype,"size",2),a([L()],r.prototype,"hasPrefixSlot",2),a([L()],r.prototype,"hasSuffixSlot",2),r=a([q("glide-core-button")],r);export{r as default};
+var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./button.styles.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get form(){return this.#t.form}firstUpdated(){owSlot(this.#e.value)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,"has-prefix":this.hasPrefixSlot,"has-suffix":this.hasSuffixSlot})}" type="${this.type}" ?disabled="${this.disabled}" @click="${this.#o}" @keydown="${this.#i}"><slot name="prefix" @slotchange="${this.#r}" ${ref(this.#s)}></slot><slot @slotchange="${this.#a}" ${ref(this.#e)}></slot><slot name="suffix" @slotchange="${this.#l}" ${ref(this.#n)}></slot></button>`}constructor(){super(),this.ariaExpanded=null,this.ariaHasPopup=null,this.ariaControls=null,this.disabled=!1,this.type="button",this.variant="primary",this.size="large",this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef(),this.#s=createRef(),this.#n=createRef(),this.#t=this.attachInternals()}#e;#t;#s;#n;#o(){"button"!==this.type&&("submit"!==this.type?this.form?.reset():this.form?.requestSubmit())}#a(){owSlot(this.#e.value)}#i(t){["Enter"].includes(t.key)&&(t.preventDefault(),this.#o())}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)}#l(){const t=this.#n.value?.assignedNodes();this.hasSuffixSlot=!!(t&&t.length>0)}};__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreButton.prototype,"ariaHasPopup",void 0),__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreButton.prototype,"ariaControls",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixSlot",void 0),GlideCoreButton=__decorate([customElement("glide-core-button")],GlideCoreButton);export default GlideCoreButton;

package/dist/button.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import r from"./styles/focus-outline.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     :host {
       /* Contains elements with "padding" and "width". Inline by default. */
       display: inline-block;
@@ -7,7 +7,7 @@
     .component {
       align-items: center;
       border-color: transparent;
-      border-radius: var(--glide-core-spacing-sm);
+      border-radius: 0.75rem;
       border-style: solid;
       border-width: 1px;
       cursor: pointer;
@@ -29,11 +29,11 @@
       }
 
       &:focus-visible {
-        ${r};
+        ${focusOutline};
       }
 
       &:disabled {
-        cursor: default;
+        cursor: not-allowed;
         opacity: 1;
       }
 
@@ -130,4 +130,4 @@
         min-inline-size: 4.375rem;
       }
     }
-  `];
+  `];