@crowdstrike/glide-core 0.9.0 → 0.9.2

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

@@ -9,8 +9,8 @@ import GlideCoreTabPanel from './tab.panel.js';
 import sinon from 'sinon';
 GlideCoreTabGroup.shadowRootOptions.mode = 'open';
 GlideCoreTabPanel.shadowRootOptions.mode = 'open';
-it('renders an end overflow button on end overflow', async () => {
-    const element = await fixture(html `
+it('does not render overflow buttons when there is no overflow', async () => {
+    const component = await fixture(html `
     <div style="width:25rem">
       <glide-core-tab-group>
         <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
@@ -29,13 +29,15 @@ it('renders an end overflow button on end overflow', async () => {
       </glide-core-tab-group>
     </div>
   `);
-    const tabGroup = element.querySelector('glide-core-tab-group');
+    const tabGroup = component.querySelector('glide-core-tab-group');
+    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
+    expect(startOverflowButton).to.be.null;
     const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(endOverflowButton).to.be.not.null;
+    expect(endOverflowButton).to.be.null;
 });
-it('does not render an end overflow button when there is no end overflow', async () => {
-    const element = await fixture(html `
-    <div style="width:25rem">
+it('renders overflow buttons when there is overflow', async () => {
+    const component = await fixture(html `
+    <div style="width:23rem">
       <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>
@@ -53,15 +55,15 @@ it('does not render an end overflow button when there is no end overflow', async
       </glide-core-tab-group>
     </div>
   `);
-    const tabGroup = element.querySelector('glide-core-tab-group');
-    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(endOverflowButton).to.be.not.null;
-    endOverflowButton?.click();
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
+    const tabGroup = component.querySelector('glide-core-tab-group');
+    await waitUntil(() => {
+        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
+            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
+    });
 });
-it('renders a start overflow button on start overflow', async () => {
-    const element = await fixture(html `
-    <div style="width:25rem">
+it('renders a disabled start-overflow button when there is only overflow towards the end', async () => {
+    const component = await fixture(html `
+    <div style="width:23rem">
       <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>
@@ -79,17 +81,19 @@ it('renders a start overflow button on start overflow', async () => {
       </glide-core-tab-group>
     </div>
   `);
-    const tabGroup = element.querySelector('glide-core-tab-group');
-    // Need to get the tab group into a state where there
-    // is overflow on the right -- do this by first scrolling to the right
+    const tabGroup = component.querySelector('glide-core-tab-group');
+    await waitUntil(() => {
+        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
+            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
+    });
+    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
+    expect(startOverflowButton?.disabled).to.be.true;
     const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(endOverflowButton).to.be.not.null;
-    endOverflowButton?.click();
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]'));
+    expect(endOverflowButton?.disabled).to.be.false;
 });
-it('does not render a start overflow button when there is no start overflow', async () => {
-    const element = await fixture(html `
-    <div style="width:25rem">
+it('renders a disabled end-overflow button when there is only overflow at the start', async () => {
+    const component = await fixture(html `
+    <div style="width:23rem">
       <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>
@@ -107,21 +111,27 @@ it('does not render a start overflow button when there is no start overflow', as
       </glide-core-tab-group>
     </div>
   `);
-    const tabGroup = element.querySelector('glide-core-tab-group');
+    const tabGroup = component.querySelector('glide-core-tab-group');
+    await waitUntil(() => {
+        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
+            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
+    });
+    // Need to get the tab group into a state where there
+    // is overflow at the start -- do this by first scrolling to the end
+    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
+    expect(startOverflowButton?.disabled).to.be.true;
     const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    let startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
-    expect(endOverflowButton).to.be.not.null;
-    expect(startOverflowButton).to.be.null;
+    expect(endOverflowButton?.disabled).to.be.false;
     endOverflowButton?.click();
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]'));
-    startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
-    startOverflowButton?.click();
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null);
+    await waitUntil(() => {
+        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]')?.disabled === true);
+    });
+    expect(startOverflowButton?.disabled).to.be.false;
 });
 it('scrolls tabs when overflow buttons are clicked', async () => {
     const spy = sinon.spy();
-    const element = await fixture(html `
-    <div style="width:25rem">
+    const component = await fixture(html `
+    <div style="width:23rem">
       <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>
@@ -139,25 +149,31 @@ it('scrolls tabs when overflow buttons are clicked', async () => {
       </glide-core-tab-group>
     </div>
   `);
-    const tabGroup = element.querySelector('glide-core-tab-group');
+    const tabGroup = component.querySelector('glide-core-tab-group');
+    await waitUntil(() => {
+        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
+            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
+    });
     tabGroup?.shadowRoot
         ?.querySelector('[role="tablist"]')
         ?.addEventListener('scroll', spy);
     const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(endOverflowButton).to.be.not.null;
     endOverflowButton?.click();
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
-    expect(spy.called).to.be.true;
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]')?.disabled === true);
+    expect(spy.callCount).to.equal(1);
     spy.resetHistory();
     const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
     expect(startOverflowButton).to.be.not.null;
+    expect(startOverflowButton?.disabled).to.be.false;
     startOverflowButton?.click();
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null);
-    expect(spy.called).to.be.true;
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]')?.disabled === true);
+    expect(spy.callCount).to.equal(1);
+    expect(startOverflowButton?.disabled).to.be.true;
+    expect(endOverflowButton?.disabled).to.be.false;
 });
 it('removes overflow buttons when the component is resized and there is no overflow', async () => {
-    const element = await fixture(html `
-    <div style="width:25rem" data-test="test-parent">
+    const component = await fixture(html `
+    <div style="width:23rem" data-test="test-parent">
       <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>
@@ -175,9 +191,11 @@ it('removes overflow buttons when the component is resized and there is no overf
       </glide-core-tab-group>
     </div>
   `);
-    const tabGroup = element.querySelector('glide-core-tab-group');
-    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(endOverflowButton).to.be.not.null;
+    const tabGroup = component.querySelector('glide-core-tab-group');
+    await waitUntil(() => {
+        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
+            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
+    });
     const container = document?.querySelector('[data-test="test-parent"]');
     expect(container).to.be.not.null;
     container.style.width = 'auto';
@@ -185,7 +203,7 @@ it('removes overflow buttons when the component is resized and there is no overf
         tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
 });
 it('renders overflow buttons when the component is resized and there is overflow', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <div data-test="test-parent">
       <glide-core-tab-group>
         <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
@@ -204,57 +222,16 @@ it('renders overflow buttons when the component is resized and there is overflow
       </glide-core-tab-group>
     </div>
   `);
-    const tabGroup = element.querySelector('glide-core-tab-group');
+    const tabGroup = component.querySelector('glide-core-tab-group');
+    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
     const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
+    expect(startOverflowButton).to.be.null;
     expect(endOverflowButton).to.be.null;
     const container = document?.querySelector('[data-test="test-parent"]');
     expect(container).to.be.not.null;
-    container.style.width = '25rem';
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null &&
-        tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]'));
-});
-it('scrolls using keyboard when there is overflow and only a few pixels of overflowed tabs are on-screen', async () => {
-    const spy = sinon.spy();
-    const element = await fixture(html `
-    <div style="width: 17rem;">
-      <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>
-        <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-        <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-
-        <glide-core-tab-panel name="1">Content for tab 1 </glide-core-tab-panel>
-        <glide-core-tab-panel name="2">
-          Content for tab 2
-        </glide-core-tab-panel>
-        <glide-core-tab-panel name="3">
-          Content for tab 3
-        </glide-core-tab-panel>
-        <glide-core-tab-panel name="4">
-          Content for tab 4
-        </glide-core-tab-panel>
-      </glide-core-tab-group>
-    </div>
-  `);
-    const tabGroup = element.querySelector('glide-core-tab-group');
-    expect(tabGroup).to.be.not.null;
-    tabGroup?.shadowRoot
-        ?.querySelector('[role="tablist"]')
-        ?.addEventListener('scroll', spy);
-    tabGroup?.tabElements[0].focus();
-    await sendKeys({ press: 'ArrowRight' });
-    await sendKeys({ press: 'ArrowRight' });
-    await sendKeys({ press: 'ArrowRight' });
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
-    expect(tabGroup?.tabElements[3]).to.have.focus;
-    expect(spy.callCount).to.equal(1);
-    spy.resetHistory();
-    await sendKeys({ press: 'ArrowLeft' });
-    await sendKeys({ press: 'ArrowLeft' });
-    await sendKeys({ press: 'ArrowLeft' });
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null);
-    expect(tabGroup?.tabElements[0]).to.have.focus;
-    expect(spy.callCount).to.equal(1);
+    container.style.width = '23rem';
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
+        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 `

package/dist/tab.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,i,o){var s,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(a=(r<3?s(a):r>3?s(e,i,a):s(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./tab.styles.js";let GlideCoreTab=class GlideCoreTab extends LitElement{constructor(){super(...arguments),this.panel="",this.active=!1,this.disabled=!1,this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tab"),this.id=this.#t}render(){return html`<div class="${classMap({component:!0,active:this.active,disabled:this.disabled})}"><span class="container"><slot name="icon"></slot><div class="default-slot"><slot></slot></div></span></div>`}updated(t){t.has("active")&&this.setAttribute("aria-selected",this.active?"true":"false"),t.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):this.removeAttribute("aria-disabled"))}#t};__decorate([property({reflect:!0})],GlideCoreTab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"active",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"disabled",void 0),GlideCoreTab=__decorate([customElement("glide-core-tab")],GlideCoreTab);export default GlideCoreTab;
+var __decorate=this&&this.__decorate||function(t,e,i,o){var s,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var d=t.length-1;d>=0;d--)(s=t[d])&&(a=(r<3?s(a):r>3?s(e,i,a):s(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./tab.styles.js";let GlideCoreTab=class GlideCoreTab extends LitElement{constructor(){super(...arguments),this.panel="",this.active=!1,this.disabled=!1,this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tab"),this.id=this.#t}render(){return html`<div class="${classMap({component:!0,active:this.active,disabled:this.disabled})}"><div class="container"><slot name="icon"></slot><div class="default-slot"><slot></slot></div></div></div>`}updated(t){t.has("active")&&this.setAttribute("aria-selected",this.active?"true":"false"),t.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):this.removeAttribute("aria-disabled"))}#t};__decorate([property({reflect:!0})],GlideCoreTab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"active",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"disabled",void 0),GlideCoreTab=__decorate([customElement("glide-core-tab")],GlideCoreTab);export default GlideCoreTab;

package/dist/tab.panel.styles.js

@@ -1,19 +1,13 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${focusOutline(":host(:focus-visible) .component")}
+    ${visuallyHidden(".hidden")}
+  `,css`
     :host(:focus-visible) {
       outline: none;
     }
 
-    /* stylelint-disable-next-line csstools/use-nesting */
-    :host(:focus-visible) .component {
-      ${focusOutline};
-    }
-
     .component {
       font-family: var(--glide-core-font-sans);
       outline: none;
     }
-
-    .hidden {
-      ${visuallyHidden};
-    }
   `];

package/dist/tab.styles.js

@@ -1,30 +1,22 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(":host(:focus-visible) .container")}
+  `,css`
     :host {
       outline: none;
     }
 
-    /* Using nesting creates an issue on Safari with :host */
-    /* stylelint-disable-next-line csstools/use-nesting */
-    :host(:focus-visible) .component .container {
-      ${focusOutline};
-    }
-
     .component {
       align-items: center;
+      box-sizing: border-box;
       cursor: pointer;
+      display: flex;
       font-family: var(--glide-core-heading-xxs-font-family);
       font-size: var(--glide-core-heading-xxxs-font-size);
       font-style: var(--glide-core-heading-xxs-font-style);
       font-weight: var(--glide-core-body-sm-font-weight);
       gap: 0.4375rem;
       justify-content: center;
-      line-height: 1.1875rem;
-      padding-block: var(--glide-core-spacing-xs);
-      padding-inline: var(--glide-core-spacing-md);
-
-      &.active {
-        border-block-end: 2px solid var(--glide-core-border-focus);
-      }
+      padding-block: 0.4375rem;
 
       &:hover {
         color: var(--glide-core-text-primary);
@@ -37,6 +29,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       & .container {
+        align-items: center;
         border-radius: 0.0625rem;
         display: flex;
         flex-shrink: 0;

package/dist/tab.test.basics.js

@@ -6,44 +6,42 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-tab')).to.equal(GlideCoreTab);
 });
 it('renders correct markup and sets correct attributes for the default case', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab>Tab</glide-core-tab>
   `);
-    await expect(element).to.not.be.accessible();
-    expect(element.active).to.equal(false, 'active defaults to false');
-    expect(element.disabled).to.equal(false, 'disabled defaults to false');
-    expect(element.getAttribute('aria-disabled')).to.equal(null, 'does not set aria-disabled');
-    expect([...element.shadowRoot.firstElementChild.classList]).to.deep.equal([
-        'component',
-    ]);
+    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.getAttribute('aria-disabled')).to.equal(null, 'does not set aria-disabled');
+    expect([...component.shadowRoot.firstElementChild.classList]).to.deep.equal(['component']);
 });
 it('sets the panel attribute', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab panel="details">Tab</glide-core-tab>
   `);
-    expect(element.panel).to.equal('details');
+    expect(component.panel).to.equal('details');
 });
 it('sets the active attribute', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab active>Tab</glide-core-tab>
   `);
-    expect(element.active).to.equal(true);
+    expect(component.active).to.equal(true);
 });
 it('sets the disabled attribute', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab disabled>Tab</glide-core-tab>
   `);
-    expect(element.disabled).to.equal(true);
-    expect(element).to.have.attribute('aria-disabled', 'true');
+    expect(component.disabled).to.equal(true);
+    expect(component).to.have.attribute('aria-disabled', 'true');
 });
 it('renders the icon slot', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tab>
       <span slot="icon">Icon</span>
       <span>Tab</span>
     </glide-core-tab>
   `);
-    const slotNodes = element
+    const slotNodes = component
         .shadowRoot.querySelector('slot[name="icon"]')
         ?.assignedNodes();
     expect(slotNodes?.length).to.equal(1);

package/dist/tabs.stories.d.ts

@@ -1,3 +1,4 @@
+import './icons/storybook.js';
 import './tab.group.js';
 import './tab.js';
 import './tab.panel.js';

package/dist/tag.d.ts

@@ -5,13 +5,10 @@ declare global {
     }
 }
 /**
- * @description A tag component to categorize information.
+ * @event remove - Emitted when the tag is removed.
  *
- * @event remove - Emitted when `glide-core-tag` is removed
- *
- * @slot - The content of the tag
- *
- * @slot prefix - A slot for an optional icon
+ * @slot - The content of the tag.
+ * @slot prefix - A slot for an optional icon.
  */
 export default class GlideCoreTag extends LitElement {
     #private;

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})}" ${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 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;

package/dist/tag.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline("button:focus-visible")}
+  `,css`
     .component {
       align-items: center;
       background: var(--glide-core-surface-base);
@@ -126,9 +128,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       &:focus {
         outline: none;
       }
-
-      &:focus-visible {
-        ${focusOutline};
-      }
     }
   `];

package/dist/tag.test.basics.js

@@ -8,64 +8,64 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-tag')).to.equal(GlideCoreTag);
 });
 it('is accessible', async () => {
-    const element = await fixture(html `<glide-core-tag>Tag</glide-core-tag>`);
+    const component = await fixture(html `<glide-core-tag>Tag</glide-core-tag>`);
     // Wait for the animation to complete
     await aTimeout(200);
-    await expect(element).to.be.accessible();
+    await expect(component).to.be.accessible();
 });
 it('renders with default slot content', async () => {
-    const element = await fixture(html `<glide-core-tag><span data-content>Tag</span></glide-core-tag>`);
-    expect(element).to.be.not.null;
-    const container = element.shadowRoot?.querySelector('.component');
+    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 = element.querySelector('[data-content]');
+    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 element = await fixture(html `<glide-core-tag><span data-content>Tag</span></glide-core-tag>`);
-    expect(element).to.not.have.attribute('removable-label');
-    const iconButton = element.shadowRoot?.querySelector('button');
+    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 element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
+    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(element).to.be.not.null;
-    expect(element).to.have.attribute('removable-label', 'test-aria-label');
-    const iconButton = element.shadowRoot?.querySelector('button');
+    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 element = await fixture(html `<glide-core-tag
+    const component = await fixture(html `<glide-core-tag
       ><span slot="prefix" data-prefix>test-prefix</span>Tag</glide-core-tag
     >`);
-    const prefixSlot = element.shadowRoot?.querySelector('slot[name="prefix"]');
+    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 element = await fixture(html `<glide-core-tag removable-label="test-aria-label" size="small"
+    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 = element.shadowRoot?.querySelector('.component');
-    const iconButton = element.shadowRoot?.querySelector('button');
+    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 element = await fixture(html `<glide-core-tag removable-label="test-aria-label" size="large"
+    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 = element.shadowRoot?.querySelector('.component');
-    const iconButton = element.shadowRoot?.querySelector('button');
+    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');
 });
@@ -94,23 +94,24 @@ it('does not throw an error when the default slot is non-empty', async () => {
     expect(spy.callCount).to.equal(0);
 });
 it('toggles the "activate" and "deactivate" clases when the button is clicked', async () => {
-    const element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
+    const component = await fixture(html `<glide-core-tag removable-label="test-aria-label"
       ><span slot="prefix">Prefix</span>Tag</glide-core-tag
     >`);
-    const container = element.shadowRoot?.querySelector('.component');
-    const iconButton = element.shadowRoot?.querySelector('button');
+    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 element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
+    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(element.shadowRoot?.querySelector('.component')).to.be.not.null;
+    expect(component.shadowRoot?.querySelector('[data-test="component"]')).to.be
+        .not.null;
     expect(document.querySelector('[data-content]')).to.be.not.null;
-    element?.click();
+    component?.click();
     // Wait for the animation to complete
     await aTimeout(300);
     // the tag and its contents should be removed

package/dist/tag.test.events.js

@@ -3,14 +3,14 @@ import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreTag from './tag.js';
 GlideCoreTag.shadowRootOptions.mode = 'open';
 it('dispatches a "remove" event when the icon button is clicked', async () => {
-    const element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
+    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 = element.shadowRoot?.querySelector('button');
+    const iconButton = component.shadowRoot?.querySelector('[data-test="button"]');
     setTimeout(() => {
         iconButton?.click();
     });
-    const event = await oneEvent(element, 'remove');
+    const event = await oneEvent(component, 'remove');
     expect(event?.type).to.be.equal('remove');
 });

package/dist/tag.test.focus.js

@@ -2,10 +2,10 @@ 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 element = await fixture(html `<glide-core-tag removable-label="Removable Label"
+    const component = await fixture(html `<glide-core-tag removable-label="Removable Label"
       >Tag</glide-core-tag
     >`);
-    element.focus();
-    const button = element.shadowRoot?.querySelector('[data-test="button"]');
-    expect(element.shadowRoot?.activeElement).to.equal(button);
+    component.focus();
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    expect(component.shadowRoot?.activeElement).to.equal(button);
 });

package/dist/textarea.d.ts

@@ -6,10 +6,11 @@ declare global {
     }
 }
 /**
- * @description A textarea with a label and optional description and toolip. Participates in forms and validation via `FormData` and various methods.
+ * @description A text area with a label and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
  *
- * @event change - (same as native textarea's `change` event)
- * @event input - (same as native textarea's `input` event)
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ * @event invalid - `(event: Event) => void`
  *
  * @slot tooltip - Content for the tooltip.
  * @slot description - Additional information or context.
@@ -18,7 +19,7 @@ export default class GlideCoreTextarea extends LitElement {
     #private;
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     value: string;
     label?: string;
     hideLabel?: boolean | undefined;