@crowdstrike/glide-core 0.7.0 → 0.9.0

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

@@ -1,73 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button-group.button.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreButtonGroupButton from './button-group.button.js';
-import sinon from 'sinon';
-GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
-it('emits a change event when clicked', async () => {
-    const element = await fixture(html `<glide-core-button-group-button value="value"
-      >Button</glide-core-button-group-button
-    >`);
-    const liElement = element.shadowRoot?.querySelector('li');
-    // This pattern is adopted from https://open-wc.org/docs/testing/helpers/#testing-events
-    // Without setTimeout the test fails. The suspicion is this is related to task scheduling,
-    // however this can be investigated later.
+it('emits a "private-selected" event when selected', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>`);
     setTimeout(() => {
-        liElement?.click();
+        component.selected = true;
     });
-    const changeEvent = await oneEvent(element, 'change');
-    expect(changeEvent instanceof Event).to.be.true;
-});
-it('emits an input event when clicked', async () => {
-    const element = await fixture(html `<glide-core-button-group-button value="value"
-      >Button</glide-core-button-group-button
-    >`);
-    const liElement = element.shadowRoot.querySelector('li');
-    setTimeout(() => {
-        liElement?.click();
-    });
-    const inputEvent = await oneEvent(element, 'input');
-    expect(inputEvent instanceof Event).to.be.true;
-});
-it('emits a change event when a space key is pressed and is not already selected', async () => {
-    const buttonElement = await fixture(html `<glide-core-button-group-button value="value-1"
-      >Button 1</glide-core-button-group-button
-    >`);
-    buttonElement.focus();
-    setTimeout(async () => {
-        await sendKeys({ press: ' ' });
-    });
-    const changeEvent = await oneEvent(buttonElement, 'change');
-    expect(changeEvent instanceof Event).to.be.true;
-});
-it('does not emit change event when a space key is pressed and is selected', async () => {
-    const buttonElement = await fixture(html `<glide-core-button-group-button value="value-1" selected
-      >Button 1</glide-core-button-group-button
-    > `);
-    const spy = sinon.spy();
-    buttonElement.addEventListener('change', spy);
-    buttonElement.focus();
-    await sendKeys({ press: ' ' });
-    expect(spy.notCalled).to.be.true;
-});
-it('emits an input event when a space key is pressed and is not already selected', async () => {
-    const buttonElement = await fixture(html ` <glide-core-button-group-button value="value-1"
-      >Button 1</glide-core-button-group-button
-    >`);
-    buttonElement.focus();
-    setTimeout(async () => {
-        await sendKeys({ press: ' ' });
-    });
-    const inputEvent = await oneEvent(buttonElement, 'input');
-    expect(inputEvent instanceof Event).to.be.true;
-});
-it('does not emit an input event when a space key is pressed and is selected', async () => {
-    const buttonElement = await fixture(html `<glide-core-button-group-button value="value-1" selected
-      >Button 1</glide-core-button-group-button
-    >`);
-    buttonElement.focus();
-    const spy = sinon.spy();
-    buttonElement.addEventListener('input', spy);
-    await sendKeys({ press: ' ' });
-    expect(spy.notCalled).to.be.true;
+    const event = await oneEvent(component, 'private-selected');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });

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

@@ -0,0 +1,13 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreButtonGroupButton from './button-group.button.js';
+GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
+it('focuses itself when `focus()` is called ', async () => {
+    const component = await fixture(html `
+    <glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>
+  `);
+    component.focus();
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(component.shadowRoot?.activeElement).to.equal(radio);
+});

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

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

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

@@ -0,0 +1,42 @@
+import './button-group.button.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreButtonGroupButton from './button-group.button.js';
+GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
+it('sets `aria-checked` when selected programmatically', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>`);
+    component.selected = true;
+    await elementUpdated(component);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('aria-checked', 'true');
+});
+it('sets `aria-checked` when deselected programmatically', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+      selected
+    ></glide-core-button-group-button>`);
+    component.selected = false;
+    await elementUpdated(component);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('aria-checked', 'false');
+});
+it('sets `aria-disabled` when disabled programmatically', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>`);
+    component.disabled = true;
+    await elementUpdated(component);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('aria-disabled', 'true');
+});
+it('sets `aria-disabled` when enabled programmatically', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+      disabled
+    ></glide-core-button-group-button>`);
+    component.disabled = false;
+    await elementUpdated(component);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+});

package/dist/button-group.d.ts

@@ -1,26 +1,23 @@
-import { LitElement, type PropertyValueMap } from 'lit';
-import GlideCoreButtonGroupButton from './button-group.button.js';
+import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-button-group': GlideCoreButtonGroup;
     }
 }
-export type ButtonGroupVariant = 'icon-only';
-export type ButtonGroupOrientation = 'vertical' | 'horizontal';
 /**
- * @description A button group for use with `<glide-core-button-group-button>`.
+ * @description A button group.
  *
- * @slot - One or more `<glide-core-button-group-button>` components.
+ * @slot - One or more of `<glide-core-button-group-button>`.
  */
 export default class GlideCoreButtonGroup extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     label?: string | undefined;
-    listItems: GlideCoreButtonGroupButton[];
-    variant?: ButtonGroupVariant;
-    orientation: ButtonGroupOrientation;
+    get variant(): 'icon-only' | undefined;
+    set variant(variant: 'icon-only' | undefined);
+    get orientation(): 'horizontal' | 'vertical';
+    set orientation(orientation: 'horizontal' | 'vertical');
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    willUpdate(changedProperties: PropertyValueMap<GlideCoreButtonGroup>): void;
 }

package/dist/button-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,l=arguments.length,s=l<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(l<3?i(s):l>3?i(e,o,s):i(e,o))||s);return l>3&&s&&Object.defineProperty(e,o,s),s};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements}from"lit/decorators.js";import{owSlotType}from"./library/ow.js";import{when}from"lit/directives/when.js";import GlideCoreButtonGroupButton from"./button-group.button.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.orientation="horizontal",this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){if(owSlotType(this.#t.value,[GlideCoreButtonGroupButton]),"vertical"===this.orientation)for(const t of this.listItems)t.toggleAttribute("vertical");if("icon-only"===this.variant)for(const t of this.listItems)t.setAttribute("variant","icon-only")}render(){return html`${when(Boolean(this.label),(()=>html`<div class="label" id="glide-core-button-group">${this.label}</div>`))}<ul aria-labelledby="glide-core-button-group" role="radiogroup" class="${classMap({"radio-group":!0,vertical:"vertical"===this.orientation})}"><slot @slotchange="${this.#e}" ${ref(this.#t)}></slot></ul>`}willUpdate(t){if(this.hasUpdated&&t.has("variant")){if("icon-only"===t.get("variant"))for(const t of this.listItems)t.removeAttribute("variant");else for(const t of this.listItems)t.setAttribute("variant","icon-only")}if(this.hasUpdated&&t.has("orientation")){const e=t.get("orientation");if("vertical"===e)for(const t of this.listItems)t.removeAttribute("vertical");else if("horizontal"===e)for(const t of this.listItems)t.toggleAttribute("vertical")}}#t;#e(){owSlotType(this.#t.value,[GlideCoreButtonGroupButton])}};__decorate([property()],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([queryAssignedElements({selector:"glide-core-button-group-button"})],GlideCoreButtonGroup.prototype,"listItems",void 0),__decorate([property()],GlideCoreButtonGroup.prototype,"variant",void 0),__decorate([property()],GlideCoreButtonGroup.prototype,"orientation",void 0),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
+var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,l=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(l=(i<3?r(l):i>3?r(e,o,l):r(e,o))||l);return i>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import GlideCoreButtonGroupButton from"./button-group.button.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#n)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#n)e.privateOrientation=t;this.#t=t}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton])}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#r}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#n(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){ow(this.#n.length,ow.number.greaterThan(1).message("A Button Group must contain two or more Button Group Buttons.")),owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton]);if(!this.#n.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#n.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#n)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#r(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0)}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(ow(e,ow.object.instanceOf(GlideCoreButtonGroupButton)),t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#n.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#n.at(-1);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#n.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#n.at(0);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");e&&!e.disabled&&(e.selected=!0)}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#n)e!==t.target&&(e.selected=!1);t.target.focus(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}}};__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"orientation",null),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;

package/dist/button-group.stories.d.ts

@@ -8,9 +8,5 @@ export declare const Default: StoryObj;
 export declare const DefaultWithOrientationVertical: StoryObj;
 export declare const DefaultWithPrefixIcon: StoryObj;
 export declare const DefaultWithOrientationVerticalPrefixIcon: StoryObj;
-export declare const DefaultWithVariantIconOnly: StoryObj;
+export declare const DefaultWithIconOnly: StoryObj;
 export declare const DefaultWithOrientationVerticalOnlyIcon: StoryObj;
-export declare const DefaultWithNoneSelected: StoryObj;
-export declare const DefaultWithSelected: StoryObj;
-export declare const DefaultWithDisabled: StoryObj;
-export declare const DefaultWithOneButton: StoryObj;

package/dist/button-group.styles.js

@@ -1,8 +1,24 @@
 import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    .radio-group {
-      appearance: none;
+    .component {
       border: 1px solid var(--glide-core-border-base);
       border-radius: 0.75rem;
+      display: inline-block;
+    }
+
+    .label {
+      /* 
+        Colored to pass the contrast check in the "is accessible" test. It's visually 
+        hidden and doesn't need to meet contrast requirements. But the alternative 
+        is to add "ignoredRules: ['color-contrast']" to that test, disabling contrast 
+        checking for the entire component.
+      */
+      color: var(--glide-core-color-white);
+
+      ${visuallyHidden};
+    }
+
+    .container {
+      appearance: none;
       display: inline-flex;
       margin: 0;
       padding: 0;
@@ -11,8 +27,4 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
         flex-direction: column;
       }
     }
-
-    .label {
-      ${visuallyHidden};
-    }
   `];

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

@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button-group.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { 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';
@@ -8,261 +9,140 @@ 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
-      >
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-button-group label="Label">
+      <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');
-    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');
+    expect(component.orientation).to.equal('horizontal');
+    expect(component.variant).to.equal(undefined);
+    expect(component).to.have.attribute('orientation', 'horizontal');
+    expect(component).to.not.have.attribute('variant');
 });
-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
-      >
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-button-group label="label">
+      <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');
-    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's unfortunate to ignore this rule. But the label doesn't meet color
+    // contrast requirements.
+    // Axe has an `ignoreTags` but no `ignoreSelectors`.
+    await expect(component).to.be.accessible({
+        ignoredRules: ['color-contrast'],
+    });
 });
-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
-      >
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-button-group label="label">
+      <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');
-    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');
+    const label = component.shadowRoot?.querySelector('[data-test="label"]');
+    const radioGroup = component.shadowRoot?.querySelector('[role="radiogroup"]');
+    expect(label?.textContent).to.equal('label');
+    expect(radioGroup).to.have.attribute('aria-labelledby', label?.id);
 });
-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
-      >
+it('sets the orientation of each button when horizontal', 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"
+      ></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
-      >
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttons[0]?.privateOrientation).to.equal('horizontal');
+    expect(buttons[1]?.privateOrientation).to.equal('horizontal');
+});
+it('sets the orientation of each button when vertical', async () => {
+    await fixture(html `<glide-core-button-group orientation="vertical">
+      <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');
-    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');
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttons[0]?.privateOrientation).to.equal('vertical');
+    expect(buttons[1]?.privateOrientation).to.equal('vertical');
+});
+it('sets `privateVariant` on each button', async () => {
+    await fixture(html `<glide-core-button-group label="label" variant="icon-only">
+      <glide-core-button-group-button label="One">
+        <div slot="prefix">Prefix</div>
+      </glide-core-button-group-button>
+
+      <glide-core-button-group-button label="Two">
+        <div slot="prefix">Prefix</div>
+      </glide-core-button-group-button>
+    </glide-core-button-group>`);
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttons[0].privateVariant).to.equal('icon-only');
+    expect(buttons[1].privateVariant).to.equal('icon-only');
 });
-it('throws an error when an element other than `glide-core-button-group-button` is a child of the default slot', async () => {
+it('throws when its default slot is the wrong type', async () => {
     await expectArgumentError(() => {
         return fixture(html `
       <glide-core-button-group label="label">
-        <div>Content</div>
+        <div></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 () => {
+it('selects the first button not disabled', 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-button
+        label="One"
+        disabled
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Three"
+      ></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');
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttons[0].selected).to.be.false;
+    expect(buttons[1].selected).to.be.true;
+    expect(buttons[2].selected).to.be.false;
 });
-it('initially no button sets itself as tabbable if all are disabled in a group', async () => {
+it('selects no buttons when all are disabled', 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-button
+        label="One"
+        disabled
+      ></glide-core-button-group-button>
+
+      <glide-core-button-group-button
+        label="Two"
+        disabled
+      ></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');
+    const buttons = document.querySelectorAll('glide-core-button-group-button');
+    expect(buttons[0].selected).to.be.false;
+    expect(buttons[1].selected).to.be.false;
 });