@crowdstrike/glide-core 0.9.5 → 0.10.0

package/README.md

@@ -1,21 +1,19 @@
-<p align="center">
+<div 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/).
+  <p align="center"> 
+    A Web Component design system from CrowdStrike.
+  </p>
+</div>
 
 ## Usage
 
-### 1. Add this package and Lit as dependencies
+### 1. Install the dependencies
 
 ```bash
-pnpm install @crowdstrike/glide-core lit
+$ pnpm install @crowdstrike/glide-core lit
 ```
 
 ### 2. Import the fonts and variables
@@ -25,7 +23,7 @@ pnpm install @crowdstrike/glide-core lit
 @import '@crowdstrike/glide-core/styles/variables.css';
 ```
 
-### 3. Import the component you want to use
+### 3. Import your component
 
 ```js
 import '@crowdstrike/glide-core/button.js';
@@ -34,57 +32,23 @@ import '@crowdstrike/glide-core/button.js';
 ### 4. Render your component
 
 ```html
-<glide-core-button size="small">Button</glide-core-button>
+<glide-core-button label="Button"></glide-core-button>
 ```
 
 ## 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
+$ pnpm install
+$ 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.
+- Follow our [contribution guidelines](./CONTRIBUTING.md) before opening a pull request.
+- We recommend using [Corepack](https://pnpm.io/installation#using-corepack) to manage PNPM.
+- If you have `ignore-scripts=true` in your `~/.npmrc`, also run `pnpm prepare` to install the Git hooks.
 
-### Adding CSS Custom Properties
+### Updating style variables
 
-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.
-
-Prior to running the script, you'll need to follow the steps to [generate a Figma personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
-
-Store this access token in your `.zshrc` or `.bashrc` as the following:
-
-```bash
-export FIGMA_TOKEN="<your-token-here>"
-```
-
-This setup is required only once; however, your access token may expire and require an update now and then. An error will be thrown if this occurs. Review the link above on managing access tokens in Figma if this happens.
-
-After the steps above are completed, to get new or updated custom properties run the following command:
-
-```bash
-pnpm start:production:figma
-```
+1. Generate a Figma [personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
+1. `$ FIGMA_TOKEN=<token> pnpm start:production:figma`

package/dist/accordion.d.ts

@@ -5,23 +5,23 @@ declare global {
     }
 }
 /**
- * @description An accordion with optional icons.
- *
- * @event toggle - `(event: "toggle", listener: (event: CustomEvent<{ newState: "open" | "closed", oldState: "open" | "closed" }>) => void) => void`.
- *                 Emitted when the Accordion opens or closes.
+ * @event toggle - `(event: "toggle", listener: (event: Event) => void) => void`.
  *
  * @slot - The content of the accordion.
- * @slot prefix - An optional icon to display before the label.
- * @slot suffix - Optional icons to display after the label.
+ * @slot prefix-icon - An optional icon before the label.
+ * @slot suffix-icons - Optional icons after the label.
  */
 export default class GlideCoreAccordion extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    label: string;
-    open: boolean;
+    label?: string;
+    get open(): boolean;
+    set open(isOpen: boolean);
+    click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    private hasPrefixSlot;
-    private hasSuffixSlot;
+    private hasPrefixIcon;
+    private hasSuffixIcons;
+    private isClosing;
 }

package/dist/accordion.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var i,l=arguments.length,a=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(a=(l<3?i(a):l>3?i(t,o,a):i(t,o))||a);return l>3&&a&&Object.defineProperty(t,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{owSlot}from"./library/ow.js";import styles from"./accordion.styles.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.label="",this.open=!1,this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#s=createRef(),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value)}render(){return html`<details class="component" ?open="${this.open}" ${ref(this.#o)}><summary class="summary" @click="${this.#l}" data-test="summary"><svg class="chevron" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="${classMap({"heading-box":!0,"heading-box-with-prefix":this.hasPrefixSlot})}" data-test="label"><div class="prefix-slot-box"><slot name="prefix" @slotchange="${this.#a}" ${ref(this.#s)}></slot></div><span class="label">${this.label}</span></div><div class="${classMap({"suffix-slot-box":!0,"suffix-slot-box-with-content":this.hasSuffixSlot})}" data-test="suffix"><slot name="suffix" @slotchange="${this.#n}" ${ref(this.#i)}></slot></div></summary><div class="${classMap({content:!0,"content-with-prefix":this.hasPrefixSlot})}" data-test="content" ${ref(this.#e)}><slot @slotchange="${this.#r}" ${ref(this.#t)}></slot></div></details>`}#e;#t;#o;#s;#i;#r(){owSlot(this.#t.value)}#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixSlot=!!(e&&e.length>0)}#n(){const e=this.#i.value?.assignedNodes();this.hasSuffixSlot=!!(e&&e.length>0)}#l(e){const t=this.#o.value,o=this.#e.value,s=!t.open,i=Number.parseFloat(getComputedStyle(o)?.paddingBottom);if(s)requestAnimationFrame((()=>{o.animate({height:["0px",o.offsetHeight-i+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}),this.dispatchEvent(new CustomEvent("toggle",{detail:{newState:"open",oldState:"closed"}}))}));else{e.preventDefault();o.animate({height:[o.offsetHeight-i+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{t.open=!1,this.dispatchEvent(new CustomEvent("toggle",{detail:{newState:"closed",oldState:"open"}}))}),{once:!0})}}};__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreAccordion.prototype,"open",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasSuffixSlot",void 0),GlideCoreAccordion=__decorate([customElement("glide-core-accordion")],GlideCoreAccordion);export default GlideCoreAccordion;
+var __decorate=this&&this.__decorate||function(e,t,o,s){var l,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(n=(i<3?l(n):i>3?l(t,o,n):l(t,o))||n);return i>3&&n&&Object.defineProperty(t,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}from"./library/ow.js";import styles from"./accordion.styles.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#l=createRef(),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){this.#o=e;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches&&this.#t.value)return this.#t.value.open=e,void this.dispatchEvent(new Event("toggle",{bubbles:!0}));if(e)this.updateComplete.then((()=>{if(this.#t.value&&this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#t.value.open=!0,this.#e.value.animate({height:["0px",this.#e.value.offsetHeight-e+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}).addEventListener("finish",(()=>{this.#t.value&&this.dispatchEvent(new Event("toggle",{bubbles:!0}))}))}}));else if(this.isClosing=!0,this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#e.value.animate({height:[this.#e.value.offsetHeight-e+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{this.#t.value&&(this.#t.value.open=!1,this.isClosing=!1,this.dispatchEvent(new Event("toggle",{bubbles:!0})))}))}}click(){this.#i.value?.click()}firstUpdated(){owSlot(this.#e.value)}render(){return html`<details class="component" ${ref(this.#t)}><summary class="${classMap({summary:!0,active:this.open||this.isClosing})}" data-test="summary" @click="${this.#n}" ${ref(this.#i)}><svg class="${classMap({chevron:!0,unrotated:this.open})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="label-container"><slot class="prefix-icon-slot" name="prefix-icon" @slotchange="${this.#a}" ${ref(this.#s)}></slot><span class="label">${this.label}</span></div><slot class="${classMap({"suffix-icons-slot":!0,icons:this.hasSuffixIcons})}" name="suffix-icons" @slotchange="${this.#r}" ${ref(this.#l)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" @slotchange="${this.#f}" ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#l;#i;#f(){owSlot(this.#e.value)}#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#l.value?.assignedNodes();this.hasSuffixIcons=Boolean(e&&e.length>0)}#n(e){e.preventDefault(),this.open=!this.open}};__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreAccordion.prototype,"open",null),__decorate([state()],GlideCoreAccordion.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasSuffixIcons",void 0),__decorate([state()],GlideCoreAccordion.prototype,"isClosing",void 0),GlideCoreAccordion=__decorate([customElement("glide-core-accordion")],GlideCoreAccordion);export default GlideCoreAccordion;

package/dist/accordion.stories.d.ts

@@ -1,4 +1,3 @@
-import './accordion.js';
 import './icons/storybook.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;

package/dist/accordion.styles.js

@@ -31,42 +31,24 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         display: none;
       }
 
-      .heading-box {
-        align-items: center;
-        display: flex;
-        flex: 1;
-        overflow: hidden;
-        white-space: nowrap;
-
-        &.heading-box-with-prefix {
-          gap: var(--glide-core-spacing-xs);
-        }
-
-        .prefix-slot-box {
-          display: flex;
-        }
-
-        .label {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+      &.active {
+        padding-block-end: var(--glide-core-spacing-xxs);
       }
+    }
 
-      .suffix-slot-box {
-        align-items: center;
-        color: var(--glide-core-icon-primary);
-        display: flex;
-        gap: 0.625rem;
-
-        &.suffix-slot-box-with-content {
-          margin-inline-start: var(--glide-core-spacing-xs);
-        }
-      }
+    .label-container {
+      align-items: center;
+      display: flex;
+      flex: 1;
+      gap: var(--glide-core-spacing-xs);
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-      .component[open] & {
-        padding-block-end: var(--glide-core-spacing-xxs);
-      }
+    .label {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .chevron {
@@ -74,24 +56,40 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       display: flex;
       margin-inline-end: var(--glide-core-spacing-xxs);
       rotate: -90deg;
-      transition: 250ms rotate ease;
 
-      .component[open] & {
+      &.unrotated {
         rotate: 0deg;
       }
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: 250ms rotate ease;
+      }
     }
 
-    .content {
+    .default-slot {
       color: var(--glide-core-text-body-1);
+      display: block;
       font-size: var(--glide-core-body-sm-font-size);
       font-weight: var(--glide-core-body-xs-font-weight);
+      overflow: hidden;
       padding-block-end: var(--glide-core-spacing-sm);
 
       /* Hardcoded spacing here is intentional so that it better aligns with the Accordion label */
       padding-inline: 2rem var(--glide-core-spacing-sm);
+
+      &.indented {
+        padding-inline-start: 3.5rem;
+      }
     }
 
-    .content-with-prefix {
-      padding-inline-start: 3.5rem;
+    .suffix-icons-slot {
+      align-items: center;
+      color: var(--glide-core-icon-primary);
+      gap: 0.625rem;
+      margin-inline-start: var(--glide-core-spacing-xs);
+
+      &.icons {
+        display: flex;
+      }
     }
   `];

package/dist/accordion.test.basics.js

@@ -1,110 +1,28 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './accordion.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreAccordion from './accordion.js';
 GlideCoreAccordion.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-accordion')).to.equal(GlideCoreAccordion);
 });
 it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-accordion label="label">
-      Inner content
-    </glide-core-accordion>`);
+    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
     await expect(component).to.be.accessible();
 });
-it('is closed by default', async () => {
-    const component = await fixture(html `<glide-core-accordion label="label">
-      Inner content
-    </glide-core-accordion>`);
-    const accordion = component.shadowRoot?.querySelector('details');
-    expect(accordion).to.be.ok;
-    expect(accordion?.hasAttribute('open')).to.be.false;
-});
-it('defaults to "open" when provided with the attribute', async () => {
-    const component = await fixture(html `<glide-core-accordion label="label" open>
-      Inner content
-    </glide-core-accordion>`);
-    const accordion = component.shadowRoot?.querySelector('details');
-    expect(accordion).to.be.ok;
-    expect(accordion?.hasAttribute('open')).to.be.true;
-});
-it('renders the provided "label"', async () => {
-    const component = await fixture(html `<glide-core-accordion label="Accordion Title">
-      Inner content
-    </glide-core-accordion>`);
-    const label = component.shadowRoot?.querySelector('[data-test="label"]');
-    expect(label).to.be.ok;
-    expect(label?.textContent?.trim()).to.equal('Accordion Title');
-});
-it('renders the provided default slotted content', async () => {
-    const component = await fixture(html `<glide-core-accordion label="label"
-      ><p data-body>Inner content</p></glide-core-accordion
-    >`);
-    const body = component.querySelector('[data-body]');
-    expect(body).to.be.ok;
-});
-it('renders with a prefix slot and applies the appropriate classes', async () => {
-    const component = await fixture(html `<glide-core-accordion label="label">
-      Inner content
-      <span slot="prefix" data-prefix>prefix</span>
-    </glide-core-accordion>`);
-    expect(document.querySelector('[data-prefix]')).to.be.ok;
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="label"]').classList,
-    ]).to.deep.equal(['heading-box', 'heading-box-with-prefix']);
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="content"]').classList,
-    ]).to.deep.equal(['content', 'content-with-prefix']);
-});
-it('does not apply prefix classes when no prefix slot is provided', async () => {
-    const component = await fixture(html `<glide-core-accordion label="label">
-      Inner content
-    </glide-core-accordion>`);
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="label"]').classList,
-    ]).to.deep.equal(['heading-box']);
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="content"]').classList,
-    ]).to.deep.equal(['content']);
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
+    expect(component.open).to.be.false;
 });
-it('renders with a suffix slot and applies the appropriate class', async () => {
-    const component = await fixture(html `<glide-core-accordion label="label">
-      Inner content
-      <span slot="suffix" data-suffix>suffix</span>
+it('`#onPrefixIconSlotChange` coverage', async () => {
+    await fixture(html `<glide-core-accordion label="Label">
+      Content
+      <div slot="prefix-icon"></div>
     </glide-core-accordion>`);
-    expect(component.querySelector('[data-suffix]')).to.be.ok;
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="suffix"]').classList,
-    ]).to.deep.equal(['suffix-slot-box', 'suffix-slot-box-with-content']);
 });
-it('does not apply the suffix class when no suffix slot is provided', async () => {
-    const component = await fixture(html `<glide-core-accordion label="label">
-      Inner content
+it('`#onSuffixIconsSlotChange` coverage', async () => {
+    await fixture(html `<glide-core-accordion label="Label">
+      Content
+      <div slot="suffix-icons"></div>
     </glide-core-accordion>`);
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="suffix"]').classList,
-    ]).to.deep.equal(['suffix-slot-box']);
-});
-it('renders without prefix and suffix classes after both are removed', async () => {
-    const component = await fixture(html `
-    <glide-core-accordion label="label">
-      Inner content
-      <span slot="prefix">prefix</span>
-      <span slot="suffix">suffix</span>
-    </glide-core-accordion>
-  `);
-    component.querySelector('[slot="prefix"]')?.remove();
-    component.querySelector('[slot="suffix"]')?.remove();
-    await elementUpdated(component);
-    // prefix
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="label"]').classList,
-    ]).to.deep.equal(['heading-box']);
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="content"]').classList,
-    ]).to.deep.equal(['content']);
-    // suffix
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="suffix"]').classList,
-    ]).to.deep.equal(['suffix-slot-box']);
 });

package/dist/accordion.test.events.js

@@ -1,40 +1,28 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './accordion.js';
-import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { emulateMedia } from '@web/test-runner-commands';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreAccordion from './accordion.js';
 GlideCoreAccordion.shadowRootOptions.mode = 'open';
-it('dispatches a "toggle" event when the Accordion opens', async () => {
-    let hasToggleBeenCalled = false;
-    const component = await fixture(html `<glide-core-accordion label="label">
-      Inner content
-    </glide-core-accordion>`);
-    component.addEventListener('toggle', () => (hasToggleBeenCalled = true));
-    const summary = component.shadowRoot?.querySelector('[data-test="summary"]');
-    expect(summary).to.be.ok;
-    summary?.click();
-    await oneEvent(component, 'toggle');
-    expect(hasToggleBeenCalled).to.be.true;
+it('dispatches a "toggle" event on open', async () => {
+    await emulateMedia({ reducedMotion: 'reduce' });
+    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(component, 'toggle');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });
-it('dispatches a "toggle" event when the Accordion closes', async () => {
-    let hasToggleBeenCalled = false;
-    const component = await fixture(html `<glide-core-accordion label="label" open>
-      Inner content
+it('dispatches a "toggle" event on close', async () => {
+    await emulateMedia({ reducedMotion: 'reduce' });
+    const component = await fixture(html `<glide-core-accordion label="Label" open>
+      Content
     </glide-core-accordion>`);
-    component.addEventListener('toggle', () => (hasToggleBeenCalled = true));
-    const summary = component.shadowRoot?.querySelector('[data-test="summary"]');
-    expect(summary).to.be.ok;
-    summary?.click();
-    // Force the animations to complete with javascript
-    // and by triggering a `finish` event ourselves.
-    component.shadowRoot
-        ?.querySelector('[data-test="content"]')
-        ?.getAnimations()
-        ?.at(0)
-        ?.finish();
-    component.shadowRoot
-        ?.querySelector('[data-test="content"]')
-        ?.dispatchEvent(new AnimationEvent('finish'));
-    await elementUpdated(component);
-    await oneEvent(component, 'toggle');
-    expect(hasToggleBeenCalled).to.be.true;
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(component, 'toggle');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
 });

package/dist/accordion.test.focus.d.ts

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

package/dist/accordion.test.focus.js

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './accordion.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreAccordion from './accordion.js';
+GlideCoreAccordion.shadowRootOptions.mode = 'open';
+it('focuses itself when `focus()` is called', async () => {
+    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
+    component.focus();
+    const summary = component?.shadowRoot?.querySelector('[data-test="summary"]');
+    expect(component?.shadowRoot?.activeElement).to.equal(summary);
+});

package/dist/accordion.test.interactions.d.ts

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

package/dist/accordion.test.interactions.js

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './accordion.js';
+import { emulateMedia } from '@web/test-runner-commands';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreAccordion from './accordion.js';
+GlideCoreAccordion.shadowRootOptions.mode = 'open';
+it('can be opened via click', async () => {
+    await emulateMedia({ reducedMotion: 'reduce' });
+    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
+    component.click();
+    expect(component.open).to.be.true;
+});
+it('can be opened via click when animated', async () => {
+    await emulateMedia({ reducedMotion: 'no-preference' });
+    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
+    component.click();
+    let animation;
+    let isAnimationFinished = false;
+    await waitUntil(() => {
+        animation = component.shadowRoot
+            ?.querySelector('[data-test="default-slot"]')
+            ?.getAnimations()
+            ?.at(0);
+        return animation;
+    });
+    animation?.addEventListener('finish', () => {
+        isAnimationFinished = true;
+    });
+    await waitUntil(() => isAnimationFinished);
+    expect(component.open).to.be.true;
+});
+it('can be opened via Space', async () => {
+    await emulateMedia({ reducedMotion: 'reduce' });
+    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
+    component.focus();
+    await sendKeys({ press: ' ' });
+    expect(component.open).to.be.true;
+});
+it('can be opened via Enter', async () => {
+    await emulateMedia({ reducedMotion: 'reduce' });
+    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.open).to.be.true;
+});
+it('can be closed via click', async () => {
+    await emulateMedia({ reducedMotion: 'reduce' });
+    const component = await fixture(html `<glide-core-accordion label="Label" open>
+      Content
+    </glide-core-accordion>`);
+    component.click();
+    expect(component.open).to.be.false;
+});
+it('can be closed via click when animated', async () => {
+    await emulateMedia({ reducedMotion: 'no-preference' });
+    const component = await fixture(html `<glide-core-accordion label="Label" open>
+      Content
+    </glide-core-accordion>`);
+    component.click();
+    let animation;
+    let isAnimationFinished = false;
+    await waitUntil(() => {
+        animation = component.shadowRoot
+            ?.querySelector('[data-test="default-slot"]')
+            ?.getAnimations()
+            ?.at(0);
+        return animation;
+    });
+    animation?.addEventListener('finish', () => {
+        isAnimationFinished = true;
+    });
+    await waitUntil(() => isAnimationFinished);
+    expect(component.open).to.be.false;
+});

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

@@ -5,10 +5,8 @@ declare global {
     }
 }
 /**
- * @description A button with a label and optional icon for use in a `<glide-core-button-group>`.
- *
  * @slot - A label.
- * @slot prefix - An optional icon to display before the label.
+ * @slot icon - An optional icon before the label.
  */
 export default class GlideCoreButtonGroupButton extends LitElement {
     #private;
@@ -25,5 +23,5 @@ export default class GlideCoreButtonGroupButton extends LitElement {
     firstUpdated(): void;
     focus(options?: FocusOptions): void;
     render(): import("lit").TemplateResult<1>;
-    private hasPrefixSlot;
+    private hasIcon;
 }

package/dist/button-group.button.js

@@ -1 +1 @@
-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;
+var __decorate=this&&this.__decorate||function(t,e,o,i){var r,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 s=t.length-1;s>=0;s--)(r=t[s])&&(n=(l<3?r(n):l>3?r(e,o,n):r(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 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.hasIcon=!1,this.#t=createRef(),this.#e=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get selected(){return this.#o}set selected(t){this.#o=t,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#t.value?.click()}firstUpdated(){"icon-only"===this.privateVariant&&owSlot(this.#e.value)}focus(t){this.#t.value?.focus(t)}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,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#t)}><slot name="icon" @slotchange="${this.#i}" ${ref(this.#e)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#t;#e;#o;#i(){ow(this.#e.value,ow.object.instanceOf(HTMLElement)),this.hasIcon=this.#e.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,"hasIcon",void 0),GlideCoreButtonGroupButton=__decorate([customElement("glide-core-button-group-button")],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;

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

@@ -70,7 +70,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       &.vertical {
         border-block-end: 1px solid var(--glide-core-border-base-lighter);
 
-        &.prefix {
+        &.icon {
           &:not(.icon-only) {
             justify-content: flex-start;
           }
@@ -90,12 +90,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
 
       &: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);
@@ -103,13 +97,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         }
       }
 
-      &: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);
-        }
+      &:not(.disabled, .selected):hover {
+        background-color: var(--glide-core-surface-hover);
+        border-color: transparent;
+        box-shadow: var(--glide-core-glow-sm);
+        color: var(--glide-core-text-primary);
       }
     }
   `];