@crowdstrike/glide-core 0.9.6 → 0.10.0

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,18 +5,20 @@ 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[];
+    label?: string;
+    removable: boolean;
     size: 'small' | 'medium' | 'large';
-    removableLabel?: string | undefined;
     click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
+    get textContent(): string;
+    set textContent(label: string);
 }

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,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 n=e.length-1;n>=0;n--)(i=e[n])&&(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{when}from"lit/directives/when.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.removable=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=new LocalizeController(this),this.#i=()=>{setTimeout((()=>{this.remove()}),200),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0}))}}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,[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.#l.term("removeTag",this.label)}" class="${classMap({[this.size]:!0})}" data-test="button" type="button" @click="${this.#i}" ${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>`}get textContent(){return this.label??""}set textContent(e){this.label=e}#e;#t;#o;#l;#i};__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,47 +31,14 @@ 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 {
+      &.removed {
         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);
-      }
-
-      &.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);
-      }
     }
 
     @keyframes fade-in {
@@ -129,4 +97,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,27 @@
 /* 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('has defaults', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label"></glide-core-tag>`);
+    expect(component.removable).to.be.false;
+    expect(component.size).to.equal('medium');
 });
-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('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');
 });

package/dist/tag.test.events.js

@@ -1,16 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tag.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreTag from './tag.js';
+import sinon from 'sinon';
 GlideCoreTag.shadowRootOptions.mode = 'open';
-it('dispatches a "remove" event when the icon 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
-    >`);
-    const iconButton = component.shadowRoot?.querySelector('[data-test="button"]');
+it('dispatches one "remove" event', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    const spy = sinon.spy();
+    component.addEventListener('remove', spy);
     setTimeout(() => {
-        iconButton?.click();
+        component.shadowRoot
+            ?.querySelector('[data-test="button"]')
+            ?.click();
     });
     const event = await oneEvent(component, 'remove');
-    expect(event?.type).to.be.equal('remove');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });

package/dist/tag.test.focus.js

@@ -1,10 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTag from './tag.js';
 GlideCoreTag.shadowRootOptions.mode = 'open';
 it('calling `focus()` focuses the button', async () => {
-    const component = await fixture(html `<glide-core-tag removable-label="Removable Label"
-      >Tag</glide-core-tag
-    >`);
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
     component.focus();
     const button = component.shadowRoot?.querySelector('[data-test="button"]');
     expect(component.shadowRoot?.activeElement).to.equal(button);

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

@@ -0,0 +1 @@
+export {};

package/dist/tag.test.interactions.js

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreTag from './tag.js';
+GlideCoreTag.shadowRootOptions.mode = 'open';
+it('removes itself on click', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    component.click();
+    // Wait for the animation to complete.
+    await aTimeout(200);
+    expect(document.querySelector('glide-core-tag')).to.be.null;
+});
+it('removes itself on Space', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    component.focus();
+    await sendKeys({ press: ' ' });
+    // Wait for the animation to complete.
+    await aTimeout(200);
+    expect(document.querySelector('glide-core-tag')).to.be.null;
+});
+it('removes itself on Enter', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    // Wait for the animation to complete.
+    await aTimeout(200);
+    expect(document.querySelector('glide-core-tag')).to.be.null;
+});
+it('supports `textContent`', async () => {
+    const component = await fixture(html `<glide-core-tag label="One"></glide-core-tag>`);
+    expect(component.textContent).to.equal('One');
+    component.textContent = 'Two';
+    expect(component.label).to.equal('Two');
+});

package/dist/textarea.d.ts

@@ -6,8 +6,6 @@ declare global {
     }
 }
 /**
- * @description A text area with a label and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
- *
  * @event change - `(event: Event) => void`
  * @event input - `(event: Event) => void`
  * @event invalid - `(event: Event) => void`
@@ -30,9 +28,10 @@ export default class GlideCoreTextarea extends LitElement {
     readonly: boolean;
     disabled: boolean;
     maxlength?: number;
-    name?: string;
+    name: string;
     spellcheck: boolean;
     autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
+    autocomplete: 'on' | 'off';
     privateSplit?: 'left' | 'middle';
     blur(): void;
     checkValidity(): boolean;

package/dist/textarea.js

@@ -1,2 +1,2 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,l=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(o<3?r(l):o>3?r(t,i,l):r(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import"./label.js";import{LitElement,html,nothing}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,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import ow from"./library/ow.js";import styles from"./textarea.styles.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#t.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get form(){return this.#t.form}get validity(){return!this.required||this.value||this.disabled?this.#a?this.#t.setValidity({tooLong:!0}," ",this.#e.value):this.#t.setValidity({}):this.#t.setValidity({valueMissing:!0}," ",this.#e.value),this.#t.validity}get willValidate(){return this.#t.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#r||this.#a}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label class="label" for="textarea">${this.label}</label><div class="textarea-container" slot="control"><textarea aria-describedby="meta" aria-invalid="${this.#r||this.#a}" class="${classMap({error:this.#r||this.#a})}" id="textarea" name="${ifDefined(this.name)}" placeholder="${ifDefined(this.placeholder)}" rows="${this.rows}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" .value="${this.value}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ${ref(this.#e)} @input="${this.#o}" @change="${this.#l}" @blur="${this.#s}">
-        </textarea></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?html`<div class="${classMap({"character-count":!0,error:this.#a})}" data-test="character-count-container"><span aria-hidden="true" data-test="character-count-text">${this.#d.term("displayedCharacterCount",this.#n,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#d.term("announcedCharacterCount",this.#n,this.maxlength)}</span></div>`:nothing}</div></glide-core-private-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.spellcheck=!1,this.autocapitalize="on",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=new LocalizeController(this),this.#e=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#d;#e;#i;get#r(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#n(){return this.value.length}get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#n>this.maxlength)}#s(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#l(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value,this.dispatchEvent(new Event(e.type,e))}#o(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property()],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property()],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10)})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;
+var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,l=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(o<3?r(l):o>3?r(t,i,l):r(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import"./label.js";import{LitElement,html,nothing}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,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import ow from"./library/ow.js";import styles from"./textarea.styles.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#t.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get form(){return this.#t.form}get validity(){return!this.required||this.value||this.disabled?this.#a?this.#t.setValidity({tooLong:!0}," ",this.#e.value):this.#t.setValidity({}):this.#t.setValidity({valueMissing:!0}," ",this.#e.value),this.#t.validity}get willValidate(){return this.#t.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#r||this.#a}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label class="label" for="textarea">${this.label}</label><div class="textarea-container" slot="control"><textarea aria-describedby="meta" aria-invalid="${this.#r||this.#a}" class="${classMap({error:this.#r||this.#a})}" id="textarea" name="${ifDefined(this.name)}" placeholder="${ifDefined(this.placeholder)}" rows="${this.rows}" autocapitalize="${this.autocapitalize}" autocomplete="${this.autocomplete}" spellcheck="${this.spellcheck}" .value="${this.value}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ${ref(this.#e)} @input="${this.#o}" @change="${this.#l}" @blur="${this.#s}">
+        </textarea></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?html`<div class="${classMap({"character-count":!0,error:this.#a})}" data-test="character-count-container"><span aria-hidden="true" data-test="character-count-text">${this.#d.term("displayedCharacterCount",this.#n,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#d.term("announcedCharacterCount",this.#n,this.maxlength)}</span></div>`:nothing}</div></glide-core-private-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=new LocalizeController(this),this.#e=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#d;#e;#i;get#r(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#n(){return this.value.length}get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#n>this.maxlength)}#s(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#l(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value,this.dispatchEvent(new Event(e.type,e))}#o(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;