@crowdstrike/glide-core 0.8.0 → 0.9.0

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

@@ -247,12 +247,208 @@ it('scrolls using keyboard when there is overflow and only a few pixels of overf
     await sendKeys({ press: 'ArrowRight' });
     await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
     expect(tabGroup?.tabElements[3]).to.have.focus;
-    expect(spy.called).to.be.true;
+    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.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('has only one active tab that is tabbable after pressing the Enter key', async () => {
+    const tabGroup = 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>
+      <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>
+  `);
+    const [firstTab, secondTab, thirdTab, fourthTab] = tabGroup.tabElements;
+    expect(firstTab.active).to.be.true;
+    expect(secondTab.active).to.be.false;
+    expect(thirdTab.active).to.be.false;
+    expect(fourthTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(0);
+    expect(secondTab.tabIndex).to.equal(-1);
+    expect(thirdTab.tabIndex).to.equal(-1);
+    expect(fourthTab.tabIndex).to.equal(-1);
+    firstTab.focus();
+    await sendKeys({ press: 'ArrowRight' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.be.false;
+    expect(secondTab.active).to.be.true;
+    expect(thirdTab.active).to.be.false;
+    expect(fourthTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(-1);
+    expect(secondTab.tabIndex).to.equal(0);
+    expect(thirdTab.tabIndex).to.equal(-1);
+    expect(fourthTab.tabIndex).to.equal(-1);
+    await sendKeys({ press: 'End' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.be.false;
+    expect(secondTab.active).to.be.false;
+    expect(thirdTab.active).to.be.false;
+    expect(fourthTab.active).to.be.true;
+    expect(firstTab.tabIndex).to.equal(-1);
+    expect(secondTab.tabIndex).to.equal(-1);
+    expect(thirdTab.tabIndex).to.equal(-1);
+    expect(fourthTab.tabIndex).to.equal(0);
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.be.false;
+    expect(secondTab.active).to.be.false;
+    expect(thirdTab.active).to.be.true;
+    expect(fourthTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(-1);
+    expect(secondTab.tabIndex).to.equal(-1);
+    expect(thirdTab.tabIndex).to.equal(0);
+    expect(fourthTab.tabIndex).to.equal(-1);
+    await sendKeys({ press: 'Home' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.be.true;
+    expect(secondTab.active).to.be.false;
+    expect(thirdTab.active).to.be.false;
+    expect(fourthTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(0);
+    expect(secondTab.tabIndex).to.equal(-1);
+    expect(thirdTab.tabIndex).to.equal(-1);
+    expect(fourthTab.tabIndex).to.equal(-1);
+});
+it('has only one active tab that is tabbable when clicked', async () => {
+    const tabGroup = 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>
+      <glide-core-tab slot="nav" panel="3">Tab 3</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-group>
+  `);
+    const [firstTab, secondTab, thirdTab] = tabGroup.tabElements;
+    expect(firstTab.active).to.be.true;
+    expect(secondTab.active).to.be.false;
+    expect(thirdTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(0);
+    expect(secondTab.tabIndex).to.equal(-1);
+    expect(thirdTab.tabIndex).to.equal(-1);
+    secondTab.click();
+    expect(firstTab.active).to.be.false;
+    expect(secondTab.active).to.be.true;
+    expect(thirdTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(-1);
+    expect(secondTab.tabIndex).to.equal(0);
+    expect(thirdTab.tabIndex).to.equal(-1);
+    thirdTab.click();
+    expect(firstTab.active).to.be.false;
+    expect(secondTab.active).to.be.false;
+    expect(thirdTab.active).to.be.true;
+    expect(firstTab.tabIndex).to.equal(-1);
+    expect(secondTab.tabIndex).to.equal(-1);
+    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 `
+    <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-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-group>
+  `);
+    const [, secondTab] = tabGroup.tabElements;
+    const [firstPanel, secondPanel] = tabGroup.panelElements;
+    expect(firstPanel.isActive).to.be.true;
+    expect(secondPanel.isActive).to.be.false;
+    expect(firstPanel.tabIndex).to.equal(0);
+    expect(secondPanel.tabIndex).to.equal(-1);
+    secondTab.click();
+    expect(firstPanel.isActive).to.be.false;
+    expect(secondPanel.isActive).to.be.true;
+    expect(firstPanel.tabIndex).to.equal(-1);
+    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 `
+    <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-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-group>
+  `);
+    const [firstTab] = tabGroup.tabElements;
+    const [firstPanel, secondPanel] = tabGroup.panelElements;
+    expect(firstPanel.isActive).to.be.true;
+    expect(secondPanel.isActive).to.be.false;
+    expect(firstPanel.tabIndex).to.equal(0);
+    expect(secondPanel.tabIndex).to.equal(-1);
+    firstTab.focus();
+    await sendKeys({ press: 'ArrowRight' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstPanel.isActive).to.be.false;
+    expect(secondPanel.isActive).to.be.true;
+    expect(firstPanel.tabIndex).to.equal(-1);
+    expect(secondPanel.tabIndex).to.equal(0);
+});
+it('sets the last keyboard focused tab as tabbable ', async () => {
+    const tabGroup = 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>
+
+      <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-group>
+  `);
+    const [firstTab, secondTab] = tabGroup.tabElements;
+    expect(firstTab.active).to.be.true;
+    expect(secondTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(0);
+    expect(secondTab.tabIndex).to.equal(-1);
+    firstTab.focus();
+    await sendKeys({ press: 'ArrowRight' });
+    expect(firstTab.active).to.be.true;
+    expect(secondTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(-1);
+    expect(secondTab.tabIndex).to.equal(0);
+});
+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 `
+    <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-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-group>
+  `);
+    const [firstTab, secondTab] = tabGroup.tabElements;
+    expect(firstTab.active).to.be.true;
+    expect(secondTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(0);
+    expect(secondTab.tabIndex).to.equal(-1);
+    firstTab.focus();
+    await sendKeys({ press: 'ArrowRight' });
+    expect(firstTab.active).to.be.true;
+    expect(secondTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(-1);
+    expect(secondTab.tabIndex).to.equal(0);
+    secondTab.blur();
+    expect(firstTab.active).to.be.true;
+    expect(secondTab.active).to.be.false;
+    expect(firstTab.tabIndex).to.equal(0);
+    expect(secondTab.tabIndex).to.equal(-1);
 });

package/dist/tab.js

@@ -1 +1 @@
-var GlideCoreTab_1,__decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length,r=a<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(a<3?o(r):a>3?o(e,i,r):o(e,i))||r);return a>3&&r&&Object.defineProperty(e,i,r),r};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./tab.styles.js";let GlideCoreTab=class GlideCoreTab extends LitElement{constructor(){super(...arguments),this.panel="",this.active=!1,this.disabled=!1}static{GlideCoreTab_1=this}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id="glide-core-tab-"+GlideCoreTab_1.instanceCount++)}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"),this.setAttribute("tabindex","0")))}};__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=GlideCoreTab_1=__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 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;

package/dist/tab.panel.d.ts

@@ -11,6 +11,7 @@ declare global {
  *
  */
 export default class GlideCoreTabPanel extends LitElement {
+    #private;
     static instanceCount: number;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];

package/dist/tab.panel.js

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

package/dist/tab.panel.styles.js

@@ -1,6 +1,16 @@
-import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[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 {

package/dist/tag.test.basics.js

@@ -79,7 +79,7 @@ it('throws an error when the default slot is empty', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('does not throw an error when the default slot is non-empty', async () => {
     const spy = sinon.spy();
@@ -91,7 +91,7 @@ it('does not throw an error when the default slot is non-empty', async () => {
             spy();
         }
     }
-    expect(spy.notCalled).to.be.true;
+    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"

package/dist/textarea.d.ts

@@ -43,7 +43,6 @@ export default class GlideCoreTextarea extends LitElement {
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
-    updated(): void;
     constructor();
     private isBlurring;
     private isCheckingValidity;

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}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.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),this.removeEventListener("invalid",this.#a)}get form(){return this.#t.form}get validity(){return 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-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#r||this.#o}" ?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 class="${classMap({error:this.#r||this.#o})}" id="textarea" name="${ifDefined(this.name)}" placeholder="${ifDefined(this.placeholder)}" rows="${this.rows}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" aria-describedby="meta" ${ref(this.#e)} @input="${this.#l}" @change="${this.#s}" @blur="${this.#d}">
-        </textarea></div><div class="meta" data-test-description-container id="meta" slot="description"><slot name="description"></slot>${when(this.maxlength,(()=>html`<div class="${classMap({"character-count":!0,error:this.#o})}" data-test-maxlength>${this.value.length}/${this.maxlength}</div>`))}</div></glide-core-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}updated(){this.#e.value&&(this.#e.value.value=this.value),this.#n()}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.#e=createRef(),this.#i=({formData:e})=>{this.value.length>0&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",this.#a)}#t;#e;#i;get#r(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#o(){return!(!this.maxlength||this.disabled)&&this.value.length>this.maxlength}#d(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#s(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement));const t=this.#e.value.value;this.value=t,this.#n(),this.dispatchEvent(new Event(e.type,e))}#l(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement));const e=this.#e.value.value;this.value=e,this.#t.setFormValue(this.value),this.#n()}#a(e){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}async#n(){const e=this.#e.value;this.#o?this.#t.setValidity({...e?.validity,tooLong:!0}," ",e):this.#t.setValidity(e?.validity,e?.validationMessage,e),await this.updateComplete}};__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="${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;

package/dist/textarea.stories.d.ts

@@ -2,12 +2,11 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Default: StoryObj;
-export declare const Required: StoryObj;
-export declare const Vertical: StoryObj;
+export declare const WithError: StoryObj;
+export declare const Description: StoryObj;
 export declare const Readonly: StoryObj;
 export declare const Disabled: StoryObj;
 export declare const Placeholder: StoryObj;
 export declare const MaxLength: StoryObj;
-export declare const Description: StoryObj;
-export declare const WithError: StoryObj;
+export declare const MaxLengthAndDescription: StoryObj;
 export declare const Tooltip: StoryObj;

package/dist/textarea.styles.js

@@ -1,5 +1,5 @@
-import{css}from"lit";export default css`
-  glide-core-label::part(tooltips-and-label) {
+import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidden.js";const fieldSizingContent=unsafeCSS("\n  field-sizing: content;\n");export default css`
+  glide-core-private-label::part(tooltips-and-label) {
     align-items: flex-start;
     margin-block-start: var(--glide-core-spacing-sm);
   }
@@ -8,6 +8,10 @@ import{css}from"lit";export default css`
     display: flex;
   }
 
+  .description {
+    display: block;
+  }
+
   textarea {
     appearance: none;
     background-color: var(--glide-core-surface-base-lighter);
@@ -20,11 +24,14 @@ import{css}from"lit";export default css`
     font-family: var(--glide-core-body-xs-font-family);
     font-size: var(--glide-core-body-sm-font-size);
     font-weight: var(--glide-core-body-xs-font-weight);
-    min-block-size: 1.1875rem;
+    max-block-size: 5lh;
+    min-block-size: 3lh;
     padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
     resize: vertical;
     transition: border-color 200ms ease-in-out;
 
+    ${fieldSizingContent};
+
     &:hover {
       border-color: var(--glide-core-border-base);
     }
@@ -66,5 +73,9 @@ import{css}from"lit";export default css`
     &.error {
       font-weight: var(--glide-core-font-weight-bold);
     }
+
+    .hidden {
+      ${visuallyHidden};
+    }
   }
 `;

package/dist/textarea.test.basics.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { expect, fixture } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTextarea from './textarea.js';
 GlideCoreTextarea.shadowRootOptions.mode = 'open';
@@ -7,13 +7,17 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-textarea')).to.equal(GlideCoreTextarea);
 });
 it('is accessible', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     await expect(element).to.be.accessible();
 });
 it('renders a textarea with two rows and value when attribute `value` is set ', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(element);
     expect(element).to.have.attribute('rows', '2');
@@ -21,119 +25,151 @@ it('renders a textarea with two rows and value when attribute `value` is set ',
     expect(textarea).to.have.attribute('rows', '2');
 });
 it('renders the `rows` attribute on the textarea when set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" rows="5"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      rows="5"
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('rows', '5');
 });
 it('renders a label when attribute `label` is set', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     const label = element.shadowRoot.querySelector('label');
     expect(label).to.exist;
     expect(label?.textContent?.trim()).to.be.equal('label');
 });
 it('renders the textarea as readonly when attribute `readonly` is set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" readonly></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      readonly
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('readonly');
 });
 it('renders the textarea as disabled when attribute `disabled` is set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" disabled></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      disabled
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('disabled');
 });
 it('renders the textarea with a placeholder when attribute `placeholder` is set', async () => {
-    const template = `<glide-core-textarea value="" label="label" placeholder="placeholder"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value=""
+      label="label"
+      placeholder="placeholder"
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('placeholder', 'placeholder');
 });
 it('renders `required` on textarea when set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" required></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      required
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('required');
 });
 it('renders a `name` attribute on the textarea when set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" name="test-name"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      name="test-name"
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('name', 'test-name');
 });
 it('supports a "tooltip" slot', async () => {
-    const template = `
+    const element = await fixture(html `
     <glide-core-textarea value="value" label="label" required>
       <div slot="tooltip">Tooltip</div>
     </glide-core-textarea>
-  `;
-    const element = await fixture(template);
+  `);
     const assignedElements = element.shadowRoot
         ?.querySelector('slot[name="tooltip"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
 });
 it('renders a slot with description', async () => {
-    const template = `<glide-core-textarea value="value" label="label"><span slot="description" data-test-content>Description</slot></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea value="value" label="label"
+      ><span slot="description" data-test-content
+        >Description</span
+      ></glide-core-textarea
+    >`);
     expect(element).to.exist;
     const contentRendered = element.querySelector('[data-test-content]');
     expect(contentRendered).to.exist;
     expect(contentRendered?.textContent).to.be.equal('Description');
 });
+it('displays visually hidden character count text for screenreaders', async () => {
+    const element = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="10"
+    ></glide-core-textarea>`);
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 0 of 10');
+});
 it('renders a character count when attribute `maxlength` is set greater than zero', async () => {
-    const template = `<glide-core-textarea value="value" label="label" maxlength="10"><span slot="description">Description</span></glide-core-textarea>`;
-    const element = await fixture(template);
-    const container = element.shadowRoot.querySelector('[data-test-maxlength]');
+    const element = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="10"
+      ><span slot="description">Description</span></glide-core-textarea
+    >`);
+    const container = element.shadowRoot.querySelector('[data-test="character-count-text"]');
     expect(container?.textContent?.trim()).to.be.equal('5/10');
 });
 it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
-    const template = `<glide-core-textarea value="value" label="label" maxlength="0"><span slot="description" data-test-content>Description</span></glide-core-textarea>`;
-    const element = await fixture(template);
-    const container = element.shadowRoot.querySelector('[data-test-description-container]');
-    expect(container?.textContent?.trim()).to.be.equal('');
+    const element = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="0"
+      ><span slot="description">Description</span></glide-core-textarea
+    >`);
+    const container = element.shadowRoot?.querySelector('[data-test="character-count-container"]');
+    expect(container).to.be.null;
 });
 it('focuses the textarea when the label is clicked', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     const label = element.shadowRoot.querySelector('label');
     label?.click();
     expect(element).to.have.focus;
     await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('has tabbable textarea', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     await sendKeys({ press: 'Tab' });
     expect(element).to.have.focus;
     await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('renders text when typed into text area', async () => {
-    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     element.focus();
     await sendKeys({ type: 'test text' });
     expect(textarea?.value).to.equal('test text');
 });
 it('returns the content of the textarea when getting the `value` property', async () => {
-    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
     element.focus();
     await sendKeys({ type: 'test text' });
     expect(element.value).to.equal('test text');
 });
-it('focuses the textarea when `focus` is called', async () => {
-    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+it('focuses the textarea when `focus()` is called', async () => {
+    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
     element.focus();
     await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('blurs the textarea when `blur` is called', async () => {
-    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
     element.focus();
     await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
     element.blur();