@crowdstrike/glide-core 0.7.0 → 0.9.0

package/README.md

@@ -1,13 +1,21 @@
-# Glide Core Components
+<p align="center">
+  <a href="https://glide-core.crowdstrike-ux.workers.dev">
+    <img src="https://github.com/CrowdStrike/glide-core/blob/main/.github/glide-core.png?raw=true" alt="Glide Core logo" width="300" />
+  </a>
+</p>
+
+<h1 align="center">The Glide Design System from CrowdStrike</h1>
+
+<br>
 
 This package contains Web Components built with [Lit](https://lit.dev/).
 
-## Installation
+## Usage
 
-### 1. Add Lit as a dependency
+### 1. Add this package and Lit as dependencies
 
 ```bash
-pnpm i @crowdstrike/glide-core lit
+pnpm install @crowdstrike/glide-core lit
 ```
 
 ### 2. Import the fonts and variables
@@ -29,7 +37,38 @@ import '@crowdstrike/glide-core/button.js';
 <glide-core-button size="small">Button</glide-core-button>
 ```
 
-## Adding CSS Custom Properties
+## Development
+
+### Contributing
+
+Follow our [Contribution Guidelines](./CONTRIBUTING.md).
+
+### Getting started
+
+First you'll need to install the dependencies for the repository. We use [PNPM](https://pnpm.io). Run the following command from the root of the repository:
+
+```bash
+pnpm install
+pnpm dlx playwright install
+```
+
+> [!NOTE]
+>
+> - If you have `ignore-scripts=true` in your `~/.npmrc`, you'll also need to run `pnpm prepare`, which will install some Git hooks for linting, formatting, typechecking, and testing.
+> - We recommend using [Corepack](https://pnpm.io/installation#using-corepack) to help manage the version of `pnpm` installed in this repository; however, it is not a requirement.
+
+### Running Storybook
+
+Run the following command from the root of the repository:
+
+```bash
+pnpm start
+```
+
+After Storybook's build completes, your browser should navigate to the Storybook instance.
+If this doesn't happen automatically, a URL will be shown in your terminal for you to browse to.
+
+### Adding CSS Custom Properties
 
 Glide Core uses scripts from [@crowdstrike/design-tokens](https://www.npmjs.com/package/@crowdstrike/design-tokens) to import variables from Figma and transform them into CSS custom properties.
 This allows us to maintain a single source of truth for color, typography, spacing, etc.

package/dist/accordion.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './accordion.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreAccordion from './accordion.js';

package/dist/accordion.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './accordion.js';
 import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import GlideCoreAccordion from './accordion.js';

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

@@ -1,33 +1,32 @@
-import { LitElement, type PropertyValueMap } from 'lit';
-import type { ButtonGroupVariant } from './button-group.js';
+import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-button-group-button': GlideCoreButtonGroupButton;
     }
 }
 /**
- * @description A button for use with `<glide-core-button-group>` with label and optional icon.
+ * @description A button with a label and optional icon for use in a `<glide-core-button-group>`.
  *
- * @event change - Dispatched when clicked or selected by key press.
- * @event input - Dispatched when clicked or selected by key press.
+ * @event change - Dispatched when the button is selected.
+ * @event input - Dispatched when the button is selected.
 
- * @slot prefix - Icon content.
- * @slot - Label content.
+ * @slot prefix - An icon.
+ * @slot - A label.
  */
 export default class GlideCoreButtonGroupButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    selected: boolean;
+    label?: string | undefined;
+    get selected(): boolean;
+    set selected(isSelected: boolean);
     disabled: boolean;
-    value: string;
-    variant?: ButtonGroupVariant;
-    vertical: boolean;
+    value?: string | undefined;
+    privateOrientation: 'horizontal' | 'vertical';
+    privateVariant?: 'icon-only';
+    click(): void;
     firstUpdated(): void;
     focus(options?: FocusOptions): void;
     render(): import("lit").TemplateResult<1>;
-    willUpdate(changedProperties: PropertyValueMap<GlideCoreButtonGroupButton>): void;
-    private isSingleButton;
-    private isTabbable;
-    private position;
+    private hasPrefixSlot;
 }

package/dist/button-group.button.js

@@ -1 +1 @@
-var _a,GlideCoreButtonGroupButton_1,__decorate=this&&this.__decorate||function(t,e,o,i){var s,l=arguments.length,n=l<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(s=t[r])&&(n=(l<3?s(n):l>3?s(e,o,n):s(e,o))||n);return l>3&&n&&Object.defineProperty(e,o,n),n};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{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.button.styles.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.selected=!1,this.disabled=!1,this.value="",this.vertical=!1,this.isSingleButton=!1,this.isTabbable=!1,this.position="inner",this.#t=createRef(),this.#e=createRef(),this.#o=createRef()}static{GlideCoreButtonGroupButton_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){if(owSlot(this.#t.value),owSlotType(this.#t.value,[Text]),this.selected&&(this.isTabbable=!0),"icon-only"===this.variant&&owSlot(this.#o.value),this.#i.length>0){if(this.#i.length>1&&this.#i.at(0)===this?this.position="first":this.#i.length>1&&this.#i.at(-1)===this?this.position="last":1===this.#i.length&&(this.isSingleButton=!0),this.#i.every((t=>t.disabled)))return;const t=this.#i.find((t=>!t.disabled&&t.selected));if(t&&t===this)this.isTabbable=!0;else if(!t){const t=this.#i.find((t=>!t.disabled));t&&t===this&&(this.isTabbable=!0)}}}focus(t){this.#e.value?.focus(t)}render(){return html`<li role="radio" aria-checked="${this.selected}" aria-disabled="${this.disabled}" tabindex="${!this.isTabbable||this.disabled?-1:0}" @click="${this.#s}" @keydown="${this.#l}" ${ref(this.#e)} class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.position]:!0,vertical:this.vertical,single:this.isSingleButton,"icon-only":"icon-only"===this.variant})}"><slot name="prefix" ${ref(this.#o)}></slot><span class="${classMap({"visually-hidden":"icon-only"===this.variant})}"><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot></span></li>`}willUpdate(t){if(this.hasUpdated&&t.has("selected")){const e=t.get("selected");if(!0===e)this.isTabbable=!1;else if(!1===e){this.isTabbable=!0,this.focus();for(const t of this.#i)t!==this&&t.selected&&(t.selected=!1)}}}#t;#e;#o;get#i(){return[...this.closest("glide-core-button-group")?.querySelectorAll("glide-core-button-group-button")??[]]}#r(t=this){t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t.value})),t.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:t.value}))}#s(){this.disabled||this.selected||(this.selected=!0,this.#r())}#n(){owSlot(this.#t.value),owSlotType(this.#t.value,[Text])}#l(t){if(!(this.disabled||this.#i.length<2&&" "!==t.key))switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault(),this.selected=!1;let e=this.previousElementSibling;for(;!e||e instanceof GlideCoreButtonGroupButton_1&&e.disabled;)if(null===e){const t=this.#i.at(-1);t&&(e=t)}else e=e.previousElementSibling;e&&e instanceof GlideCoreButtonGroupButton_1&&(e.selected=!0,this.#r(e));break}case"ArrowDown":case"ArrowRight":{t.preventDefault(),this.selected=!1;let e=this.nextElementSibling;for(;!e||e instanceof GlideCoreButtonGroupButton_1&&e.disabled;)if(null===e){const t=this.#i.at(0);t&&(e=t)}else e=e.nextElementSibling;e&&e instanceof GlideCoreButtonGroupButton_1&&(e.selected=!0,this.#r(e));break}case" ":t.preventDefault(),this.disabled||this.selected||(this.selected=!0,this.#r())}}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"variant",void 0),__decorate([property({type:Boolean})],GlideCoreButtonGroupButton.prototype,"vertical",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"isSingleButton",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"isTabbable",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"position",void 0),GlideCoreButtonGroupButton=GlideCoreButtonGroupButton_1=__decorate([customElement("glide-core-button-group-button")],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,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,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./button-group.button.styles.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.hasPrefixSlot=!1,this.#e=createRef(),this.#t=!1,this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get selected(){return this.#t}set selected(e){this.#t=e,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#e.value?.click()}firstUpdated(){"icon-only"===this.privateVariant&&owSlot(this.#o.value)}focus(e){this.#e.value?.focus(e)}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,prefix:this.hasPrefixSlot,"icon-only":"icon-only"===this.privateVariant})}" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#e)}><slot name="prefix" @slotchange="${this.#i}" ${ref(this.#o)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#e;#t;#o;#i(){ow(this.#o.value,ow.object.instanceOf(HTMLElement)),this.hasPrefixSlot=this.#o.value?.assignedNodes().length>0}};__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateVariant",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"hasPrefixSlot",void 0),GlideCoreButtonGroupButton=__decorate([customElement("glide-core-button-group-button")],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;

package/dist/button-group.button.styles.js

@@ -1,9 +1,35 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    :host(:first-of-type) {
+      .component {
+        &.horizontal {
+          border-end-start-radius: 0.6875rem;
+          border-start-start-radius: 0.6875rem;
+        }
+
+        &.vertical {
+          border-start-end-radius: 0.6875rem;
+          border-start-start-radius: 0.6875rem;
+        }
+      }
+    }
+
+    :host(:last-of-type) {
+      .component {
+        &.horizontal {
+          border-end-end-radius: 0.6875rem;
+          border-start-end-radius: 0.6875rem;
+        }
+
+        &.vertical {
+          border-end-end-radius: 0.6875rem;
+          border-end-start-radius: 0.6875rem;
+        }
+      }
+    }
+
     .component {
       align-items: center;
       appearance: none;
-      border: none;
-      border-inline-end: 1px solid var(--glide-core-border-base-lighter);
       cursor: pointer;
       display: flex;
       font-family: var(--glide-core-font-sans);
@@ -15,7 +41,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       line-height: 1;
       min-block-size: 1.125rem;
       min-inline-size: 5.1875rem;
-      outline: none;
       padding-block: var(--glide-core-spacing-xs);
       padding-inline: var(--glide-core-spacing-md);
       transition-duration: 150ms;
@@ -24,66 +49,39 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       user-select: none;
       white-space: nowrap;
 
-      &.icon-only {
-        min-inline-size: 0;
-        padding: var(--glide-core-spacing-xs);
+      &:focus {
+        outline: none;
       }
 
-      &.single {
-        border: none;
-        border-radius: 0.6875rem;
-      }
+      &:focus-visible {
+        background-color: var(--glide-core-surface-selected);
+        border-color: var(--glide-core-border-focus);
+        color: var(--glide-core-color-white);
+
+        ${focusOutline};
+        outline-offset: 2px;
 
-      &.first {
-        border-radius: 0.6875rem 0 0 0.6875rem;
+        /* Create a stacking context so the outline isn't obscured by other elements. */
+        transform: translateX(0);
       }
 
-      &.last {
-        border-radius: 0 0.6875rem 0.6875rem 0;
+      &.horizontal {
+        border-inline-end: 1px solid var(--glide-core-border-base-lighter);
       }
 
       &.vertical {
-        border: none;
         border-block-end: 1px solid var(--glide-core-border-base-lighter);
 
-        &.first {
-          border-radius: 0.6875rem 0.6875rem 0 0;
-        }
-
-        &.last {
-          border-radius: 0 0 0.6875rem 0.6875rem;
+        &.prefix {
+          &:not(.icon-only) {
+            justify-content: flex-start;
+          }
         }
       }
 
-      &:not(.disabled).selected {
-        background-color: var(--glide-core-surface-selected);
-        border-color: var(--glide-core-surface-selected);
-        color: var(--glide-core-color-white);
-      }
-
-      &:not(.disabled):active {
-        background-color: var(--glide-core-surface-selected);
-        border-color: var(--glide-core-border-focus);
-        color: var(--glide-core-color-white);
-      }
-
-      &:not(.disabled):focus-visible {
-        background-color: var(--glide-core-surface-selected);
-        border-color: var(--glide-core-border-focus);
-        color: var(--glide-core-color-white);
-
-        ${focusOutline};
-        outline-offset: 2px;
-
-        /* create a stacking context so the outline doesn't become obscured behind other elements */
-        transform: translateX(0);
-      }
-
-      &:not(.disabled, :active):hover {
-        background-color: var(--glide-core-surface-hover);
-        border-color: transparent;
-        box-shadow: var(--glide-core-glow-sm);
-        color: var(--glide-core-text-primary);
+      &.icon-only {
+        min-inline-size: 0;
+        padding: var(--glide-core-spacing-xs);
       }
 
       &.disabled {
@@ -92,9 +90,34 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         color: var(--glide-core-text-tertiary-disabled);
         cursor: not-allowed;
       }
+
+      &:not(.disabled) {
+        &:active {
+          background-color: var(--glide-core-surface-selected);
+          border-color: var(--glide-core-border-focus);
+          color: var(--glide-core-color-white);
+        }
+
+        &.selected {
+          background-color: var(--glide-core-surface-selected);
+          border-color: var(--glide-core-surface-selected);
+          color: var(--glide-core-color-white);
+        }
+      }
+
+      &:not(.disabled, :active) {
+        &:hover {
+          background-color: var(--glide-core-surface-hover);
+          border-color: transparent;
+          box-shadow: var(--glide-core-glow-sm);
+          color: var(--glide-core-text-primary);
+        }
+      }
     }
 
-    .visually-hidden {
-      ${visuallyHidden};
+    .label {
+      &.visually-hidden {
+        ${visuallyHidden};
+      }
     }
   `];

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

@@ -1 +1 @@
-export {};
+import './button-group.button.js';

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

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './button-group.button.js';
 import { ArgumentError } from 'ow';
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreButtonGroupButton from './button-group.button.js';
@@ -6,164 +8,99 @@ GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-button-group-button')).to.equal(GlideCoreButtonGroupButton);
 });
-it('is accessible', async () => {
-    const element = await fixture(html `<glide-core-button-group-button value="value"
-      >Button</glide-core-button-group-button
-    >`);
-    await expect(element).to.be.accessible();
-});
-it('renders an li with role "radio"', 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');
-    expect(liElement).to.have.attribute('role', 'radio');
-});
-it('renders "aria-checked" equal to "false" and "tabindex" equal to "-1" by default', 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');
-    expect(liElement).to.not.be.null;
-    expect(liElement).to.have.attribute('aria-checked', 'false');
-    expect(liElement).to.have.attribute('tabindex', '-1');
-});
-it('renders "aria-checked" equal to "true" and "tabindex" equal to "0" when attribute "selected" exists', async () => {
-    const element = await fixture(html `<glide-core-button-group-button value="value" selected
-      >Button</glide-core-button-group-button
-    >`);
-    const liElement = element.shadowRoot?.querySelector('li');
-    expect(liElement).to.have.attribute('aria-checked', 'true');
-    expect(liElement).to.have.attribute('tabindex', '0');
-});
-it('renders two slots, where one has name "prefix", and the other is default with given text', async () => {
-    const element = await fixture(html `<glide-core-button-group-button value="value" selected
-      ><span slot="prefix" data-prefix>Prefix</span
-      >Button</glide-core-button-group-button
-    >`);
-    const prefixSlot = element.shadowRoot?.querySelector('slot[name="prefix"]');
-    const defaultSlot = element.shadowRoot?.querySelector('slot:not([name="prefix"])');
-    // verify the slots exist
-    expect(prefixSlot).to.not.be.null;
-    expect(defaultSlot).to.not.be.null;
-    const prefixContent = document.querySelector('[data-prefix]');
-    const content = document.querySelector('glide-core-button-group-button');
-    // verify the content of the slots exist
-    expect(prefixContent).to.not.be.null;
-    expect(prefixContent?.textContent).to.equal('Prefix');
-    expect(content?.textContent).to.contain('Button');
-});
-it('is has a disabled presentation when the "disabled" attribute is true', async () => {
-    const element = await fixture(html `<glide-core-button-group-button value="value" disabled
-      >Button</glide-core-button-group-button
-    >`);
-    const liElement = element.shadowRoot?.querySelector('li');
-    expect(liElement).to.have.attribute('aria-disabled', 'true');
-});
-it('does not have a disabled presentation when "disabled" attribute is false', 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');
-    expect(liElement).to.have.attribute('aria-disabled', 'false');
-});
-it('has a vertical presention when the "vertical" attribute is set', async () => {
-    await fixture(html ` <glide-core-button-group-button value="value" vertical
-      >Button</glide-core-button-group-button
-    >`);
-    const buttonElement = document.querySelector('glide-core-button-group-button');
-    const liElement = buttonElement?.shadowRoot?.querySelector('li');
-    expect(liElement).to.have.class('vertical');
-});
-it('does not have a vertical presention when the "vertical" attribute is not set', async () => {
-    await fixture(html ` <glide-core-button-group-button value="value"
-      >Button</glide-core-button-group-button
-    >`);
-    const buttonElement = document.querySelector('glide-core-button-group-button');
-    const liElement = buttonElement?.shadowRoot?.querySelector('li');
-    expect(liElement).to.not.have.class('vertical');
-});
-it('sets buttons as not tabbable by default', 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');
-    await expect(liElement).to.have.attribute('tabindex', '-1');
+it('has defaults', async () => {
+    const component = await fixture(html `
+    <glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>
+  `);
+    expect(component.disabled).to.be.false;
+    expect(component.selected).to.be.false;
+    expect(component.value).to.equal('');
+    expect(component).to.have.attribute('value', '');
+    expect(component).to.not.have.attribute('disabled');
+    expect(component).to.not.have.attribute('selected');
 });
-it('sets a "selected" button as tabbable', async () => {
-    const element = await fixture(html `<glide-core-button-group-button value="value" selected
-      >Button</glide-core-button-group-button
-    >`);
-    const liElement = element.shadowRoot?.querySelector('li');
-    await expect(liElement).to.have.attribute('tabindex', '0');
-});
-it('has a presentation for variant "icon-only"', async () => {
-    const element = await fixture(html `<glide-core-button-group-button
-      value="value"
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>`);
+    await expect(component).to.be.accessible();
+});
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
       selected
-      variant="icon-only"
-      ><span slot="prefix">Prefix</span>Button</glide-core-button-group-button
-    >`);
-    const liElement = element.shadowRoot?.querySelector('li');
-    expect(liElement).to.have.class('icon-only');
-});
-it('does not apply class "icon-only" when variant "icon-only" is absent', 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');
-    expect(liElement).to.not.have.class('icon-only');
-});
-it('throws an error when no label is present and variant is `icon-only`', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-button-group-button
-        value="value"
-        selected
-        variant="icon-only"
-        ><span slot="prefix">Prefix</span></glide-core-button-group-button
-      >`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.called).to.be.true;
-});
-it('throws an error when prefix slot is empty and variant is `icon-only`', async () => {
+    ></glide-core-button-group-button>`);
+    expect(component.shadowRoot?.textContent?.trim()).to.equal('Button');
+});
+it('can have a "prefix" slot', async () => {
+    const component = await fixture(html `<glide-core-button-group-button label="Button">
+      <span slot="prefix">Prefix</span>
+    </glide-core-button-group-button>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="prefix"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Prefix');
+});
+it('sets `aria-checked` when selected', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+      selected
+    ></glide-core-button-group-button>`);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('aria-checked', 'true');
+});
+it('sets `aria-checked` when not selected', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>`);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('aria-checked', 'false');
+});
+it('sets `aria-disabled` when disabled', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+      disabled
+    ></glide-core-button-group-button>`);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('aria-disabled', 'true');
+});
+it('sets `aria-disabled` when not disabled', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>`);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+});
+it('is tabbable when selected', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+      selected
+    ></glide-core-button-group-button>`);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('tabindex', '0');
+});
+it('is not tabbable when not selected', async () => {
+    const component = await fixture(html `<glide-core-button-group-button
+      label="Button"
+    ></glide-core-button-group-button>`);
+    const radio = component.shadowRoot?.querySelector('[role="radio"]');
+    expect(radio).to.have.attribute('tabindex', '-1');
+});
+it('throws when icon-only and no "prefix" slot', async () => {
     const spy = sinon.spy();
-    // Not sure how to resolve the below, despite the test passing, so disabling console errors for now:
-    //
-    // Browser logs:
-    //     An error was thrown in a Promise outside a test. Did you forget to await a function or assertion?
-    sinon.stub(console, 'error'); // Disable console.error
     try {
         await fixture(html `<glide-core-button-group-button
         value="value"
         selected
-        variant="icon-only"
-        >Button</glide-core-button-group-button
-      >`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.called).to.be.true;
-});
-it('does not throw an error when prefix slot is empty and no variant is set', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-button-group-button value="value" selected
-        >Button</glide-core-button-group-button
-      >`);
+        privateVariant="icon-only"
+      ></glide-core-button-group-button>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {
             spy();
         }
     }
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });