@crowdstrike/glide-core 0.7.0 → 0.9.0

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/tab.styles.js

@@ -12,16 +12,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     .component {
       align-items: center;
       cursor: pointer;
-      display: inline-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);
+      }
+
       &:hover {
         color: var(--glide-core-text-primary);
       }
@@ -35,74 +39,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       & .container {
         border-radius: 0.0625rem;
         display: flex;
+        flex-shrink: 0;
         gap: var(--glide-core-spacing-xs);
-      }
-
-      /* Primary */
-
-      &.primary {
-        border: 1px solid transparent;
-        border-block-end-width: 0;
-        border-end-end-radius: 0;
-        border-end-start-radius: 0;
-        border-start-end-radius: var(--glide-core-spacing-sm);
-        border-start-start-radius: var(--glide-core-spacing-sm);
-        font-weight: var(--glide-core-heading-xxs-font-weight);
-
-        &.active,
-        &:hover:not(.disabled) {
-          background-color: var(--glide-core-surface-base);
-          border: 1px solid var(--glide-core-border-primary);
-
-          /* hide the outer tab-group bottom border */
-          border-block-end: 1px solid var(--glide-core-surface-base);
-          margin-block-end: -1px;
-        }
-
-        & .active.default-slot {
-          background-color: red;
-        }
-      }
-
-      /* Secondary */
-
-      &.secondary {
-        border-color: transparent;
-        border-style: solid;
-        border-width: 1px;
-        font-weight: var(--glide-core-body-sm-font-weight);
-
-        &.active {
-          border-block-end: 2px solid var(--glide-core-border-focus);
-        }
-      }
-
-      /* Vertical */
-
-      &.vertical {
-        flex-direction: column;
-        font-weight: var(--glide-core-body-sm-font-weight);
-        padding-inline: var(--glide-core-spacing-xxs);
-
-        & .default-slot {
-          transform: rotate(180deg);
-          writing-mode: vertical-lr;
-        }
-
-        &.active {
-          border-inline-start: 2px solid var(--glide-core-border-focus);
-        }
-
-        &.active,
-        &.disabled {
-          background-color: var(--glide-core-surface-base);
-        }
-
-        & .container {
-          display: flex;
-          flex-direction: column;
-          gap: var(--glide-core-spacing-xs);
-        }
+        white-space: nowrap;
       }
     }
   `];

package/dist/tab.test.basics.js

@@ -12,29 +12,9 @@ it('renders correct markup and sets correct attributes for the default case', as
     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.variant).to.equal('primary');
     expect(element.getAttribute('aria-disabled')).to.equal(null, 'does not set aria-disabled');
     expect([...element.shadowRoot.firstElementChild.classList]).to.deep.equal([
         'component',
-        'primary',
-    ]);
-});
-it('renders a secondary variant', async () => {
-    const element = await fixture(html `
-    <glide-core-tab variant="secondary">Tab</glide-core-tab>
-  `);
-    expect([...element.shadowRoot.firstElementChild.classList]).to.deep.equal([
-        'component',
-        'secondary',
-    ]);
-});
-it('renders a vertical variant', async () => {
-    const element = await fixture(html `
-    <glide-core-tab variant="vertical">Tab</glide-core-tab>
-  `);
-    expect([...element.shadowRoot.firstElementChild.classList]).to.deep.equal([
-        'component',
-        'vertical',
     ]);
 });
 it('sets the panel attribute', async () => {

package/dist/tabs.stories.d.ts

@@ -5,5 +5,4 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Primary: StoryObj;
-export declare const Secondary: StoryObj;
-export declare const Vertical: StoryObj;
+export declare const Overflow: StoryObj;

package/dist/tag.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTag from './tag.js';
@@ -78,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();
@@ -90,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,4 +1,5 @@
-import { expect, fixture } from '@open-wc/testing';
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTextarea from './textarea.js';
 GlideCoreTextarea.shadowRootOptions.mode = 'open';
@@ -6,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');
@@ -20,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();