@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/tab.group.test.basics.js

@@ -18,27 +18,25 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-tab-panel')).to.equal(GlideCoreTabPanel);
 });
 it('renders correct markup and sets correct attributes for the default case', async () => {
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    await expect(tabGroup).to.be.accessible();
-    const [firstTab] = tabGroup.tabElements;
-    expect(tabGroup.activeTab).to.equal(firstTab, 'activeTab defaults to first tab');
-    expect([...tabGroup.shadowRoot.firstElementChild.classList]).to.deep.equal([
-        'component',
-    ]);
+    await expect(component).to.be.accessible();
+    const [firstTab] = component.tabElements;
+    expect(component.activeTab).to.equal(firstTab, 'activeTab defaults to first tab');
+    expect([...component.shadowRoot.firstElementChild.classList]).to.deep.equal(['component']);
     expect([
-        ...tabGroup.shadowRoot.querySelector('.tab-group').classList,
+        ...component.shadowRoot.querySelector('.tab-group').classList,
     ]).to.deep.equal(['tab-group', 'animated']);
-    const slot = tabGroup.shadowRoot.querySelector('slot:not([name="nav"])');
+    const slot = component.shadowRoot.querySelector('slot:not([name="nav"])');
     expect(slot).to.exist;
     expect(slot.assignedElements.length).to.equal(0);
 });
 it('can switch tabs', async () => {
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
@@ -51,19 +49,27 @@ it('can switch tabs', async () => {
       <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    const listener = oneEvent(tabGroup, 'tab-show');
-    const [firstTab, secondTab, thirdTab, disabledTab] = tabGroup.tabElements;
-    const [firstPanel, secondPanel, thirdPanel] = tabGroup.panelElements;
-    expect(firstTab.active).to.equal(true, 'first tab defaults to active');
-    expect(secondTab.active).to.equal(false, 'other tabs default to not active');
-    expect(isPanelHidden(firstPanel)).to.equal(false, 'first panel is not hidden by default');
-    expect(isPanelHidden(secondPanel)).to.equal(true, 'nonactive panel is hidden by default');
+    const listener = oneEvent(component, 'tab-show');
+    const [firstTab, secondTab, thirdTab, disabledTab] = component.tabElements;
+    const [firstPanel, secondPanel, thirdPanel] = component.panelElements;
+    // first tab defaults to active
+    expect(firstTab.active).to.be.true;
+    // other tabs default to not active
+    expect(secondTab.active).to.be.false;
+    // first panel is not hidden by default
+    expect(isPanelHidden(firstPanel)).to.be.false;
+    // nonactive panel is hidden by default
+    expect(isPanelHidden(secondPanel)).to.be.true;
     secondTab.click();
     const triggeredEvent = await listener;
-    await expect(firstTab.active).to.equal(false, 'after clicking a different tab, previous tab is no longer active');
-    expect(secondTab.active).to.equal(true, 'clicked tab becomes active');
-    expect(isPanelHidden(firstPanel)).to.equal(true, 'after clicking a different tab, previous panel is hidden');
-    expect(isPanelHidden(secondPanel)).to.equal(false, `clicked tab's panel is no longer hidden`);
+    // after clicking a different tab, previous tab is no longer active
+    expect(firstTab.active).to.be.false;
+    // clicked tab becomes active
+    expect(secondTab.active).to.be.true;
+    // after clicking a different tab, previous panel is hidden
+    expect(isPanelHidden(firstPanel)).to.be.true;
+    // clicked tab's panel is no longer hidden
+    expect(isPanelHidden(secondPanel)).to.be.false;
     expect(triggeredEvent.type).to.equal('tab-show', 'correct tab event fires');
     expect(triggeredEvent.bubbles).to.be.true;
     expect(triggeredEvent.detail.panel).to.equal('2', 'Can get the panel name from the tab click event');
@@ -72,18 +78,23 @@ it('can switch tabs', async () => {
     // Should be focused on third tab. Press Enter on it
     await sendKeys({ press: 'Enter' });
     const secondTriggeredEvent = await listener;
-    expect(secondTab.active).to.equal(false, 'after pressing Enter on a different tab, previous tab is no longer active');
-    expect(thirdTab.active).to.equal(true, 'new tab becomes active');
-    expect(isPanelHidden(secondPanel)).to.equal(true, 'after pressing Enter on a different tab, previous panel is hidden');
-    expect(isPanelHidden(thirdPanel)).to.equal(false, `new tab's panel is no longer hidden`);
+    // after pressing Enter on a different tab, previous tab is no longer active
+    expect(secondTab.active).to.be.false;
+    // new tab becomes active
+    expect(thirdTab.active).to.be.true;
+    // after pressing Enter on a different tab, previous panel is hidden
+    expect(isPanelHidden(secondPanel)).to.be.true;
+    // new tab's panel is no longer hidden
+    expect(isPanelHidden(thirdPanel)).to.be.false;
     expect(secondTriggeredEvent.type).to.equal('tab-show', 'correct tab event fires for keydown');
     expect(secondTriggeredEvent.bubbles).to.be.true;
     expect(secondTriggeredEvent.detail.panel).to.equal('2', 'Can get the panel name from the tab show event');
     disabledTab.click();
-    expect(disabledTab.active).to.equal(false, 'clicking on a disabled tab does not make it active');
+    // clicking on a disabled tab does not make it active
+    expect(disabledTab.active).to.be.false;
 });
 it('can use left/right, home and end keys to focus on tabs', async () => {
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
@@ -94,26 +105,30 @@ it('can use left/right, home and end keys to focus on tabs', async () => {
       <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    const [firstTab, secondTab, thirdTab] = tabGroup.tabElements;
+    const [firstTab, secondTab, thirdTab] = component.tabElements;
     firstTab.focus();
     await sendKeys({ press: 'ArrowRight' });
     await sendKeys({ press: 'Enter' });
-    expect(secondTab.active).to.equal(true, 'right works');
+    // right works
+    expect(secondTab.active).to.be.true;
     await sendKeys({ press: 'ArrowLeft' });
     await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.equal(true, 'left works');
+    // left works
+    expect(firstTab.active).to.be.true;
     await sendKeys({ press: 'ArrowLeft' });
     await sendKeys({ press: 'Enter' });
-    expect(thirdTab.active).to.equal(true, 'left from first goes to last');
+    // left from first goes to last
+    expect(thirdTab.active).to.be.true;
     await sendKeys({ press: 'ArrowRight' });
     await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.equal(true, 'right from last goes to first');
+    // right from last goes to first
+    expect(firstTab.active).to.be.true;
     await sendKeys({ press: 'Home' });
     await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.equal(true);
+    expect(firstTab.active).to.be.true;
     await sendKeys({ press: 'End' });
     await sendKeys({ press: 'Enter' });
-    expect(thirdTab.active).to.equal(true);
+    expect(thirdTab.active).to.be.true;
 });
 it('throws an error when an element other than `glide-core-tab` is a child of the `nav` slot', async () => {
     await expectArgumentError(() => {

package/dist/tab.group.test.interactions.js

@@ -2,6 +2,7 @@
 import './tab.group.js';
 import './tab.js';
 import './tab.panel.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 GlideCoreTabGroup from './tab.group.js';
@@ -129,6 +130,7 @@ it('renders a disabled end-overflow button when there is only overflow at the st
     expect(startOverflowButton?.disabled).to.be.false;
 });
 it('scrolls tabs when overflow buttons are clicked', async () => {
+    await emulateMedia({ reducedMotion: 'reduce' });
     const spy = sinon.spy();
     const component = await fixture(html `
     <div style="width:23rem">
@@ -170,6 +172,7 @@ it('scrolls tabs when overflow buttons are clicked', async () => {
     expect(spy.callCount).to.equal(1);
     expect(startOverflowButton?.disabled).to.be.true;
     expect(endOverflowButton?.disabled).to.be.false;
+    await emulateMedia({ reducedMotion: 'no-preference' });
 });
 it('removes overflow buttons when the component is resized and there is no overflow', async () => {
     const component = await fixture(html `
@@ -234,7 +237,7 @@ it('renders overflow buttons when the component is resized and there is overflow
         tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
 });
 it('has only one active tab that is tabbable after pressing the Enter key', async () => {
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
@@ -247,7 +250,7 @@ it('has only one active tab that is tabbable after pressing the Enter key', asyn
       <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    const [firstTab, secondTab, thirdTab, fourthTab] = tabGroup.tabElements;
+    const [firstTab, secondTab, thirdTab, fourthTab] = component.tabElements;
     expect(firstTab.active).to.be.true;
     expect(secondTab.active).to.be.false;
     expect(thirdTab.active).to.be.false;
@@ -299,7 +302,7 @@ it('has only one active tab that is tabbable after pressing the Enter key', asyn
     expect(fourthTab.tabIndex).to.equal(-1);
 });
 it('has only one active tab that is tabbable when clicked', async () => {
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
@@ -310,7 +313,7 @@ it('has only one active tab that is tabbable when clicked', async () => {
       <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    const [firstTab, secondTab, thirdTab] = tabGroup.tabElements;
+    const [firstTab, secondTab, thirdTab] = component.tabElements;
     expect(firstTab.active).to.be.true;
     expect(secondTab.active).to.be.false;
     expect(thirdTab.active).to.be.false;
@@ -333,7 +336,7 @@ it('has only one active tab that is tabbable when clicked', async () => {
     expect(thirdTab.tabIndex).to.equal(0);
 });
 it('has only one tab panel that is active and tabbable when a tab is clicked', async () => {
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
@@ -342,8 +345,8 @@ it('has only one tab panel that is active and tabbable when a tab is clicked', a
       <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    const [, secondTab] = tabGroup.tabElements;
-    const [firstPanel, secondPanel] = tabGroup.panelElements;
+    const [, secondTab] = component.tabElements;
+    const [firstPanel, secondPanel] = component.panelElements;
     expect(firstPanel.isActive).to.be.true;
     expect(secondPanel.isActive).to.be.false;
     expect(firstPanel.tabIndex).to.equal(0);
@@ -355,7 +358,7 @@ it('has only one tab panel that is active and tabbable when a tab is clicked', a
     expect(secondPanel.tabIndex).to.equal(0);
 });
 it('has only one tab panel that is active and tabbable when using the keyboard to make selections', async () => {
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
@@ -364,8 +367,8 @@ it('has only one tab panel that is active and tabbable when using the keyboard t
       <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    const [firstTab] = tabGroup.tabElements;
-    const [firstPanel, secondPanel] = tabGroup.panelElements;
+    const [firstTab] = component.tabElements;
+    const [firstPanel, secondPanel] = component.panelElements;
     expect(firstPanel.isActive).to.be.true;
     expect(secondPanel.isActive).to.be.false;
     expect(firstPanel.tabIndex).to.equal(0);
@@ -379,7 +382,7 @@ it('has only one tab panel that is active and tabbable when using the keyboard t
     expect(secondPanel.tabIndex).to.equal(0);
 });
 it('sets the last keyboard focused tab as tabbable ', async () => {
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
@@ -388,7 +391,7 @@ it('sets the last keyboard focused tab as tabbable ', async () => {
       <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    const [firstTab, secondTab] = tabGroup.tabElements;
+    const [firstTab, secondTab] = component.tabElements;
     expect(firstTab.active).to.be.true;
     expect(secondTab.active).to.be.false;
     expect(firstTab.tabIndex).to.equal(0);
@@ -403,7 +406,7 @@ it('sets the last keyboard focused tab as tabbable ', async () => {
 it('sets the active tab as tabbable on tab blur', async () => {
     // This behavior is to ensure that the last active tab is the first tabbable
     // element in the component.
-    const tabGroup = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab-group>
       <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
       <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
@@ -412,7 +415,7 @@ it('sets the active tab as tabbable on tab blur', async () => {
       <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
     </glide-core-tab-group>
   `);
-    const [firstTab, secondTab] = tabGroup.tabElements;
+    const [firstTab, secondTab] = component.tabElements;
     expect(firstTab.active).to.be.true;
     expect(secondTab.active).to.be.false;
     expect(firstTab.tabIndex).to.equal(0);

package/dist/tab.panel.d.ts

@@ -5,10 +5,7 @@ declare global {
     }
 }
 /**
- * @description A single tab panel, associated with a `<glide-core-tab>`.
- *
  * @slot - Main content for the tab panel
- *
  */
 export default class GlideCoreTabPanel extends LitElement {
     #private;

package/dist/tab.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tab.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTab from './tab.js';
@@ -10,8 +11,8 @@ it('renders correct markup and sets correct attributes for the default case', as
     <glide-core-tab>Tab</glide-core-tab>
   `);
     await expect(component).to.not.be.accessible();
-    expect(component.active).to.equal(false, 'active defaults to false');
-    expect(component.disabled).to.equal(false, 'disabled defaults to false');
+    expect(component.active).to.be.false;
+    expect(component.disabled).to.be.false;
     expect(component.getAttribute('aria-disabled')).to.equal(null, 'does not set aria-disabled');
     expect([...component.shadowRoot.firstElementChild.classList]).to.deep.equal(['component']);
 });
@@ -25,14 +26,14 @@ it('sets the active attribute', async () => {
     const component = await fixture(html `
     <glide-core-tab active>Tab</glide-core-tab>
   `);
-    expect(component.active).to.equal(true);
+    expect(component.active).to.be.true;
 });
 it('sets the disabled attribute', async () => {
     const component = await fixture(html `
     <glide-core-tab disabled>Tab</glide-core-tab>
   `);
-    expect(component.disabled).to.equal(true);
-    expect(component).to.have.attribute('aria-disabled', 'true');
+    expect(component.disabled).to.be.true;
+    expect(component?.getAttribute('aria-disabled')).to.equal('true');
 });
 it('renders the icon slot', async () => {
     const component = await fixture(html `

package/dist/tag.d.ts

@@ -5,17 +5,18 @@ declare global {
     }
 }
 /**
- * @event remove - Emitted when the tag is removed.
+ * @event remove - `(event: Event) => void`
  *
- * @slot - The content of the tag.
- * @slot prefix - A slot for an optional icon.
+ * @slot icon
  */
 export default class GlideCoreTag extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    label?: string;
+    removable: boolean;
     size: 'small' | 'medium' | 'large';
-    removableLabel?: string | undefined;
     click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/tag.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,r=arguments.length,s=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,o,s):i(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import{when}from"lit/directives/when.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.size="medium",this.removableLabel="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=new LocalizeController(this),this.#i=createRef(),this.#r=200,this.#s=()=>{new Promise((()=>setTimeout((()=>{this.remove()}),this.#r))),this.#t.value?.classList.toggle("activate"),this.#t.value?.classList.toggle("deactivate"),this.dispatchEvent(new Event("remove"))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){owSlot(this.#o.value)}render(){return html`<div class="${classMap({component:!0,activate:!0,[this.size]:!0})}" data-test="component" ${ref(this.#t)}><slot name="prefix" ${ref(this.#i)}></slot><slot @slotchange="${this.#a}" ${ref(this.#o)}></slot>${when(this.removableLabel,(()=>html`<button type="button" class="${classMap({[this.size]:!0})}" aria-label="${this.#l.term("removeTag",this.removableLabel)}" data-test="button" ${ref(this.#e)} @click="${this.#s}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div>`}#e;#t;#o;#l;#i;#r;#s;#a(){owSlot(this.#o.value)}};__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),__decorate([property({attribute:"removable-label"})],GlideCoreTag.prototype,"removableLabel",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,r=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,o,r):l(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.removable=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled,[this.size]:!0})}" data-test="component" ${ref(this.#t)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" name="icon" ${ref(this.#o)}></slot>${this.label} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({button:!0,[this.size]:!0,disabled:this.disabled})}" data-test="button" type="button" @click="${this.#l}" ?disabled="${this.disabled}" ${ref(this.#e)}><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div>`}#e;#t;#o;#i;#l(){setTimeout((()=>{this.remove()}),200),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0}))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;

package/dist/tag.styles.js

@@ -6,7 +6,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       background: var(--glide-core-surface-base);
       border-radius: var(--glide-core-border-radius-round);
       color: var(--glide-core-text-body-1);
-      display: inline-flex;
+      display: flex;
       font-family: var(--glide-core-body-xs-font-family);
       font-size: var(--glide-core-body-xs-font-size);
       font-style: var(--glide-core-body-xs-font-variant);
@@ -14,6 +14,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       justify-content: center;
       line-height: 1;
       margin: 0;
+      max-inline-size: max-content;
       min-block-size: var(--glide-core-spacing-md);
       opacity: 1;
       overflow: hidden;
@@ -30,46 +31,17 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         padding: 0 var(--glide-core-spacing-xs);
       }
 
-      &.activate {
+      &.added {
         animation: fade-in 100ms ease-in-out;
       }
 
-      &.deactivate {
-        animation: fade-out 200ms ease-in-out;
-        animation-fill-mode: forwards;
-      }
-
-      & ::slotted([slot='prefix']) {
-        --size: var(--glide-core-spacing-sm);
-
-        align-items: center;
-        block-size: var(--glide-core-spacing-sm);
-        display: flex;
-        inline-size: var(--glide-core-spacing-sm);
-        justify-content: center;
-        margin-inline-end: 0.375rem;
-      }
-
-      &.small ::slotted([slot='prefix']) {
-        --size: 0.625rem;
-
-        align-items: center;
-        block-size: 0.625rem;
-        display: flex;
-        inline-size: 0.625rem;
-        justify-content: center;
-        margin-inline-end: var(--glide-core-spacing-xxs);
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
       }
 
-      &.large ::slotted([slot='prefix']) {
-        --size: 0.875rem;
-
-        align-items: center;
-        block-size: 0.875rem;
-        display: flex;
-        inline-size: 0.875rem;
-        justify-content: center;
-        margin-inline-end: var(--glide-core-spacing-xs);
+      &.removed {
+        animation: fade-out 200ms ease-in-out;
+        animation-fill-mode: forwards;
       }
     }
 
@@ -93,7 +65,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    button {
+    .button {
       align-items: center;
       background-color: transparent;
       block-size: var(--glide-core-spacing-sm);
@@ -121,7 +93,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         margin-inline-start: var(--glide-core-spacing-xxs);
       }
 
-      &:hover {
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+        cursor: not-allowed;
+      }
+
+      &:hover:not(.disabled) {
         color: var(--glide-core-icon-primary-hover);
       }
 
@@ -129,4 +106,36 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         outline: none;
       }
     }
+
+    .icon-slot {
+      &.large {
+        &::slotted(*) {
+          block-size: 0.875rem;
+          inline-size: 0.875rem;
+          margin-inline-end: var(--glide-core-spacing-xs);
+        }
+      }
+
+      &.medium {
+        &::slotted(*) {
+          block-size: 0.75rem;
+          inline-size: 0.75rem;
+          margin-inline-end: 0.375rem;
+        }
+      }
+
+      &.small {
+        &::slotted(*) {
+          block-size: 0.625rem;
+          inline-size: 0.625rem;
+          margin-inline-end: var(--glide-core-spacing-xxs);
+        }
+      }
+
+      &::slotted(*) {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+      }
+    }
   `];

package/dist/tag.test.basics.js

@@ -1,120 +1,28 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { ArgumentError } from 'ow';
-import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import GlideCoreTag from './tag.js';
-import sinon from 'sinon';
 GlideCoreTag.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-tag')).to.equal(GlideCoreTag);
 });
 it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-tag>Tag</glide-core-tag>`);
-    // Wait for the animation to complete
-    await aTimeout(200);
+    const component = await fixture(html `<glide-core-tag label="Label"></glide-core-tag>`);
+    // Wait for the animation to complete.
+    await aTimeout(100);
+    await expect(component).to.be.accessible();
+    component.removable = true;
+    await elementUpdated(component);
     await expect(component).to.be.accessible();
 });
-it('renders with default slot content', async () => {
-    const component = await fixture(html `<glide-core-tag><span data-content>Tag</span></glide-core-tag>`);
-    expect(component).to.be.not.null;
-    const container = component.shadowRoot?.querySelector('[data-test="component"]');
-    expect(container).to.be.not.null;
-    const contentRendered = component.querySelector('[data-content]');
-    expect(contentRendered).to.be.not.null;
-    expect(contentRendered?.textContent).to.be.equal('Tag');
-});
-it('does not render an icon button when "removable-label" attribute is not set', async () => {
-    const component = await fixture(html `<glide-core-tag><span data-content>Tag</span></glide-core-tag>`);
-    expect(component).to.not.have.attribute('removable-label');
-    const iconButton = component.shadowRoot?.querySelector('[data-test="button"]');
-    expect(iconButton).to.be.null;
-});
-it('renders an icon button with aria-label when "removable-label" attribute is set', async () => {
-    const component = await fixture(html `<glide-core-tag removable-label="test-aria-label"
-      ><span slot="prefix">Prefix</span
-      ><span data-content>Tag</span></glide-core-tag
-    >`);
-    expect(component).to.be.not.null;
-    expect(component).to.have.attribute('removable-label', 'test-aria-label');
-    const iconButton = component.shadowRoot?.querySelector('[data-test="button"]');
-    expect(iconButton).to.be.not.null;
-    expect(iconButton).to.have.attribute('aria-label', `Remove tag: test-aria-label`);
-    expect(iconButton).to.have.attribute('type', 'button');
-});
-it('renders the "prefix" slot and its content', async () => {
-    const component = await fixture(html `<glide-core-tag
-      ><span slot="prefix" data-prefix>test-prefix</span>Tag</glide-core-tag
-    >`);
-    const prefixSlot = component.shadowRoot?.querySelector('slot[name="prefix"]');
-    expect(prefixSlot?.assignedNodes()?.length).to.be.equal(1);
-    expect(document.querySelector('[data-prefix]')).to.be.not.null;
-    expect(document.querySelector('[data-prefix]')?.textContent).to.be.equal('test-prefix');
-});
-it('renders correctly when the "size" attribute is set to "small"', async () => {
-    const component = await fixture(html `<glide-core-tag removable-label="test-aria-label" size="small"
-      ><span slot="prefix">Prefix</span
-      ><span data-content>Tag</span></glide-core-tag
-    >`);
-    const container = component.shadowRoot?.querySelector('[data-test="component"]');
-    const iconButton = component.shadowRoot?.querySelector('[data-test="button"]');
-    expect(container).to.have.class('small');
-    expect(iconButton).to.have.class('small');
-});
-it('renders correctly when the "size" attribute is set to "large"', async () => {
-    const component = await fixture(html `<glide-core-tag removable-label="test-aria-label" size="large"
-      ><span slot="prefix">Prefix</span
-      ><span data-content>Tag</span></glide-core-tag
-    >`);
-    const container = component.shadowRoot?.querySelector('[data-test="component"]');
-    const iconButton = component.shadowRoot?.querySelector('[data-test="button"]');
-    expect(container).to.have.class('large');
-    expect(iconButton).to.have.class('large');
-});
-it('throws an error when the default slot is empty', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-tag></glide-core-tag>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(1);
-});
-it('does not throw an error when the default slot is non-empty', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-tag>Tag</glide-core-tag>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(0);
-});
-it('toggles the "activate" and "deactivate" clases when the button is clicked', async () => {
-    const component = await fixture(html `<glide-core-tag removable-label="test-aria-label"
-      ><span slot="prefix">Prefix</span>Tag</glide-core-tag
-    >`);
-    const container = component.shadowRoot?.querySelector('[data-test="component"]');
-    const iconButton = component.shadowRoot?.querySelector('[data-test="button"]');
-    expect(container).to.have.class('activate');
-    iconButton?.click();
-    expect(container).to.have.class('deactivate');
-});
-it('removes the tag from the DOM when the button is clicked', async () => {
-    const component = await fixture(html `<glide-core-tag removable-label="test-aria-label"
-      ><span slot="prefix">Prefix</span
-      ><span data-content>Tag</span></glide-core-tag
-    >`);
-    expect(component.shadowRoot?.querySelector('[data-test="component"]')).to.be
-        .not.null;
-    expect(document.querySelector('[data-content]')).to.be.not.null;
-    component?.click();
-    // Wait for the animation to complete
-    await aTimeout(300);
-    // the tag and its contents should be removed
-    expect(document.querySelector('glide-core-tag')).to.be.null;
-    expect(document.querySelector('[data-content]')).to.be.null;
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label"></glide-core-tag>`);
+    expect(component.disabled).to.be.false;
+    expect(component.removable).to.be.false;
+    expect(component.size).to.equal('medium');
+});
+it('can be removed', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    expect(button?.checkVisibility()).to.be.true;
+    expect(button?.getAttribute('aria-label')).to.equal('Remove tag: Label');
 });