@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/tab.styles.js

@@ -1,4 +1,14 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[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;
       cursor: pointer;
@@ -11,73 +21,88 @@
       line-height: 1.1875rem;
       padding-block: var(--glide-core-spacing-xs);
       padding-inline: var(--glide-core-spacing-md);
-    }
 
-    /* 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,
-      &.tab: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;
+      &:hover {
+        color: var(--glide-core-text-primary);
       }
-    }
 
-    .tab:hover {
-      color: var(--glide-core-text-primary);
-    }
+      &.disabled {
+        border: none;
+        color: var(--glide-core-text-tertiary-disabled);
+        pointer-events: none;
+      }
 
-    .disabled {
-      border: none;
-      color: var(--glide-core-text-tertiary-disabled);
-      pointer-events: none;
-    }
+      & .container {
+        border-radius: 0.0625rem;
+        display: flex;
+        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);
 
-    /* Secondary */
+        &.active,
+        &:hover:not(.disabled) {
+          background-color: var(--glide-core-surface-base);
+          border: 1px solid var(--glide-core-border-primary);
 
-    .secondary {
-      border-color: transparent;
-      border-style: solid;
-      border-width: 1px;
-      font-weight: var(--glide-core-body-sm-font-weight);
+          /* hide the outer tab-group bottom border */
+          border-block-end: 1px solid var(--glide-core-surface-base);
+          margin-block-end: -1px;
+        }
 
-      &.active {
-        border-block-end: 2px solid var(--glide-core-border-focus);
+        & .active.default-slot {
+          background-color: red;
+        }
       }
-    }
 
-    /* Vertical */
+      /* Secondary */
 
-    .vertical {
-      flex-direction: column;
-      font-weight: var(--glide-core-body-sm-font-weight);
-      padding-inline: var(--glide-core-spacing-xxs);
+      &.secondary {
+        border-color: transparent;
+        border-style: solid;
+        border-width: 1px;
+        font-weight: var(--glide-core-body-sm-font-weight);
 
-      & .default-slot {
-        transform: rotate(180deg);
-        writing-mode: vertical-lr;
+        &.active {
+          border-block-end: 2px solid var(--glide-core-border-focus);
+        }
       }
 
-      &.active {
-        border-inline-start: 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);
+        }
 
-      &.active,
-      &.disabled,
-      &.tab-wrapper:hover {
-        background-color: var(--glide-core-surface-base);
+        & .container {
+          display: flex;
+          flex-direction: column;
+          gap: var(--glide-core-spacing-xs);
+        }
       }
     }
-  `];
+  `];

package/dist/tab.test.basics.js

@@ -0,0 +1,71 @@
+import './tab.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTab from './tab.js';
+GlideCoreTab.shadowRootOptions.mode = 'open';
+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 `
+    <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.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 () => {
+    const element = await fixture(html `
+    <glide-core-tab panel="details">Tab</glide-core-tab>
+  `);
+    expect(element.panel).to.equal('details');
+});
+it('sets the active attribute', async () => {
+    const element = await fixture(html `
+    <glide-core-tab active>Tab</glide-core-tab>
+  `);
+    expect(element.active).to.equal(true);
+});
+it('sets the disabled attribute', async () => {
+    const element = 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');
+});
+it('renders the icon slot', async () => {
+    const element = await fixture(html `
+    <glide-core-tab>
+      <span slot="icon">Icon</span>
+      <span>Tab</span>
+    </glide-core-tab>
+  `);
+    const slotNodes = element
+        .shadowRoot.querySelector('slot[name="icon"]')
+        ?.assignedNodes();
+    expect(slotNodes?.length).to.equal(1);
+    expect(slotNodes?.at(0)?.textContent?.trim()).to.equal('Icon');
+});

package/dist/tag.js

@@ -1 +1 @@
-"use strict";var y=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var h=(t,e,o,c)=>{for(var s=c>1?void 0:c?H(e,o):e,E=t.length-1,L;E>=0;E--)(L=t[E])&&(s=(c?L(e,o,s):L(s))||s);return c&&s&&y(e,o,s),s};var k=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var i=(t,e,o)=>(k(t,e,"read from private field"),o?o.call(t):e.get(t)),r=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)};var g=(t,e,o)=>(k(t,e,"access private method"),o);var m,a,n,v,p,f,b,x;import{LitElement as w,html as $}from"lit";import{classMap as M}from"lit/directives/class-map.js";import{createRef as u,ref as d}from"lit/directives/ref.js";import{customElement as z,property as R}from"lit/decorators.js";import{owSlot as S}from"./library/ow.js";import{when as D}from"lit/directives/when.js";import j from"./tag.styles.js";let l=class extends w{constructor(){super(...arguments);r(this,b);this.size="medium";this.removableLabel="";r(this,m,u());r(this,a,u());r(this,n,u());r(this,v,u());r(this,p,200);r(this,f,()=>{new Promise(()=>setTimeout(()=>{this.remove()},i(this,p))),i(this,a).value?.classList.toggle("activate"),i(this,a).value?.classList.toggle("deactivate"),this.dispatchEvent(new Event("remove"))})}click(){i(this,m).value?.click()}firstUpdated(){S(i(this,n).value)}render(){return $`<div class="${M({component:!0,activate:!0,[this.size]:!0})}" ${d(i(this,a))}><slot name="prefix" ${d(i(this,v))}></slot><slot @slotchange="${g(this,b,x)}" ${d(i(this,n))}></slot>${D(this.removableLabel,()=>$`<button type="button" class="${M({[this.size]:!0})}" aria-label="Remove ${this.removableLabel}" data-test="button" ${d(i(this,m))} @click="${i(this,f)}"><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>`}};m=new WeakMap,a=new WeakMap,n=new WeakMap,v=new WeakMap,p=new WeakMap,f=new WeakMap,b=new WeakSet,x=function(){S(i(this,n).value)},l.shadowRootOptions={...w.shadowRootOptions,delegatesFocus:!0,mode:"closed"},l.styles=j,h([R({reflect:!0})],l.prototype,"size",2),h([R({attribute:"removable-label"})],l.prototype,"removableLabel",2),l=h([z("glide-core-tag")],l);export{l as default};
+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;

package/dist/tag.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     .component {
       align-items: center;
       background: var(--glide-core-surface-base);
@@ -96,6 +96,7 @@
       background-color: transparent;
       block-size: var(--glide-core-spacing-sm);
       border: none;
+      border-radius: 0.0625rem;
       color: var(--glide-core-icon-display);
       cursor: pointer;
       display: flex;
@@ -127,7 +128,7 @@
       }
 
       &:focus-visible {
-        ${i};
+        ${focusOutline};
       }
     }
-  `];
+  `];

package/dist/tag.test.basics.js

@@ -0,0 +1,118 @@
+import { ArgumentError } from 'ow';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTag from './tag.js';
+import sinon from 'sinon';
+GlideCoreTag.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-tag')).to.equal(GlideCoreTag);
+});
+it('is accessible', async () => {
+    const element = 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();
+});
+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');
+    expect(container).to.be.not.null;
+    const contentRendered = element.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');
+    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"
+      ><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(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
+      ><span slot="prefix" data-prefix>test-prefix</span>Tag</glide-core-tag
+    >`);
+    const prefixSlot = element.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"
+      ><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');
+    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"
+      ><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');
+    expect(container).to.have.class('large');
+    expect(iconButton).to.have.class('large');
+});
+it('throws an error when the default slot is empty', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-tag></glide-core-tag>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('does not throw an error when the default slot is non-empty', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-tag>Tag</glide-core-tag>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.notCalled).to.be.true;
+});
+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"
+      ><span slot="prefix">Prefix</span>Tag</glide-core-tag
+    >`);
+    const container = element.shadowRoot?.querySelector('.component');
+    const iconButton = element.shadowRoot?.querySelector('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"
+      ><span slot="prefix">Prefix</span
+      ><span data-content>Tag</span></glide-core-tag
+    >`);
+    expect(element.shadowRoot?.querySelector('.component')).to.be.not.null;
+    expect(document.querySelector('[data-content]')).to.be.not.null;
+    element?.click();
+    // Wait for the animation to complete
+    await aTimeout(300);
+    // the tag and its contents should be removed
+    expect(document.querySelector('glide-core-tag')).to.be.null;
+    expect(document.querySelector('[data-content]')).to.be.null;
+});

package/dist/tag.test.events.js

@@ -0,0 +1,16 @@
+import './tag.js';
+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"
+      ><span slot="prefix">Prefix</span
+      ><span data-content>Tag</span></glide-core-tag
+    >`);
+    const iconButton = element.shadowRoot?.querySelector('button');
+    setTimeout(() => {
+        iconButton?.click();
+    });
+    const event = await oneEvent(element, 'remove');
+    expect(event?.type).to.be.equal('remove');
+});

package/dist/tag.test.focus.js

@@ -0,0 +1,11 @@
+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"
+      >Tag</glide-core-tag
+    >`);
+    element.focus();
+    const button = element.shadowRoot?.querySelector('[data-test="button"]');
+    expect(element.shadowRoot?.activeElement).to.equal(button);
+});

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

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

package/dist/tag.test.translations.js

@@ -0,0 +1,25 @@
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTag from './tag.js';
+GlideCoreTag.shadowRootOptions.mode = 'open';
+it('renders dynamic string in Japanese', async () => {
+    const element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
+      ><span slot="prefix">Prefix</span
+      ><span data-content>Tag</span></glide-core-tag
+    >`);
+    document.documentElement.setAttribute('lang', 'ja');
+    await elementUpdated(element);
+    const iconButton = element.shadowRoot?.querySelector('button');
+    expect(iconButton).to.have.attribute('aria-label', `タグを削除: test-aria-label`);
+    expect(iconButton).to.have.attribute('type', 'button');
+});
+it('renders dynamic string in French', async () => {
+    const element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
+      ><span slot="prefix">Prefix</span
+      ><span data-content>Tag</span></glide-core-tag
+    >`);
+    document.documentElement.setAttribute('lang', 'fr');
+    await elementUpdated(element);
+    const iconButton = element.shadowRoot?.querySelector('button');
+    expect(iconButton).to.have.attribute('aria-label', `Supprimer la balise : test-aria-label`);
+    expect(iconButton).to.have.attribute('type', 'button');
+});

package/dist/textarea.js

@@ -1,2 +1,2 @@
-"use strict";var O=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var l=(a,s,t,d)=>{for(var u=d>1?void 0:d?N(s,t):s,E=a.length-1,k;E>=0;E--)(k=a[E])&&(u=(d?k(s,t,u):k(u))||u);return d&&u&&O(s,t,u),u};var w=(a,s,t)=>{if(!s.has(a))throw TypeError("Cannot "+t)};var e=(a,s,t)=>(w(a,s,"read from private field"),t?t.call(a):s.get(a)),o=(a,s,t)=>{if(s.has(a))throw TypeError("Cannot add the same private member more than once");s instanceof WeakSet?s.add(a):s.set(a,t)},S=(a,s,t,d)=>(w(a,s,"write to private field"),d?d.call(a,t):s.set(a,t),t);var c=(a,s,t)=>(w(a,s,"access private method"),t);var n,h,f,b,R,m,p,$,F,V,M,y,I,v,g;import"./label.js";import{LitElement as A,html as q}from"lit";import{classMap as z}from"lit/directives/class-map.js";import{createRef as D,ref as H}from"lit/directives/ref.js";import{customElement as U,property as r,state as B}from"lit/decorators.js";import{ifDefined as L}from"lit/directives/if-defined.js";import{when as j}from"lit/directives/when.js";import x from"./textarea.styles.js";let i=class extends A{constructor(){super();o(this,b);o(this,m);o(this,$);o(this,V);o(this,y);o(this,v);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.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;o(this,n,void 0);o(this,h,D());o(this,f,({formData:t})=>{this.value.length>0&&this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)});S(this,n,this.attachInternals()),this.addEventListener("invalid",c(this,y,I))}blur(){e(this,h).value?.blur()}checkValidity(){return this.isCheckingValidity=!0,e(this,n).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",e(this,f)),this.removeEventListener("invalid",c(this,y,I))}get form(){return e(this,n).form}get validity(){return e(this,n).validity}get willValidate(){return e(this,n).willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",e(this,f))}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return q`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${e(this,b,R)||e(this,m,p)}" ?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="${z({error:e(this,b,R)||e(this,m,p)})}" id="textarea" name="${L(this.name)}" placeholder="${L(this.placeholder)}" rows="${this.rows}" autocapitalize="${L(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" aria-describedby="meta" ${H(e(this,h))} @input="${c(this,V,M)}" @change="${c(this,$,F)}">
-        </textarea></div><div class="meta" data-test-description-container id="meta" slot="description"><slot name="description"></slot>${j(this.maxlength,()=>q`<div class="${z({"character-count":!0,error:e(this,m,p)})}" data-test-maxlength>${this.value.length}/${this.maxlength}</div>`)}</div></glide-core-label>`}reportValidity(){return e(this,n).reportValidity()}updated(){e(this,h).value&&(e(this,h).value.value=this.value),c(this,v,g).call(this)}};n=new WeakMap,h=new WeakMap,f=new WeakMap,b=new WeakSet,R=function(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit},m=new WeakSet,p=function(){return!this.maxlength||this.disabled?!1:this.value.length>this.maxlength},$=new WeakSet,F=function(t){const d=e(this,h).value.value;this.value=d,c(this,v,g).call(this),this.dispatchEvent(new Event(t.type,t))},V=new WeakSet,M=function(){const t=e(this,h).value.value;this.value=t,e(this,n).setFormValue(this.value),c(this,v,g).call(this)},y=new WeakSet,I=function(t){t.preventDefault(),this.isCheckingValidity||(this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!0)},v=new WeakSet,g=async function(){const t=e(this,h).value;e(this,m,p)?e(this,n).setValidity({...t?.validity,tooLong:!0}," ",t):e(this,n).setValidity(t?.validity,t?.validationMessage,t),await this.updateComplete},i.formAssociated=!0,i.shadowRootOptions={...A.shadowRootOptions,mode:"closed",delegatesFocus:!0},i.styles=x,l([r()],i.prototype,"value",2),l([r()],i.prototype,"label",2),l([r({attribute:"hide-label",type:Boolean})],i.prototype,"hideLabel",2),l([r({reflect:!0})],i.prototype,"orientation",2),l([r()],i.prototype,"placeholder",2),l([r({reflect:!0,type:Number})],i.prototype,"rows",2),l([r({type:Boolean})],i.prototype,"required",2),l([r({type:Boolean})],i.prototype,"readonly",2),l([r({type:Boolean})],i.prototype,"disabled",2),l([r({type:Number,converter(t){return t&&Number.parseInt(t,10)}})],i.prototype,"maxlength",2),l([r({reflect:!0})],i.prototype,"name",2),l([r({type:Boolean})],i.prototype,"spellcheck",2),l([r()],i.prototype,"autocapitalize",2),l([B()],i.prototype,"isCheckingValidity",2),l([B()],i.prototype,"isReportValidityOrSubmit",2),i=l([U("glide-core-textarea")],i);export{i as default};
+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 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(){return this.isCheckingValidity=!0,this.#t.checkValidity()}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 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}">
+        </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(){return this.#t.reportValidity()}updated(){this.#e.value&&(this.#e.value.value=this.value),this.#d()}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.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}#s(e){const t=this.#e.value.value;this.value=t,this.#d(),this.dispatchEvent(new Event(e.type,e))}#l(){const e=this.#e.value.value;this.value=e,this.#t.setFormValue(this.value),this.#d()}#a(e){e.preventDefault(),this.isCheckingValidity||(this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!0)}async#d(){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([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.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default e`
+import{css}from"lit";export default css`
   glide-core-label::part(tooltip-and-label-container) {
     align-items: flex-start;
     margin-block-start: var(--glide-core-spacing-sm);
@@ -33,7 +33,8 @@
       outline: none;
     }
 
-    &:focus-visible {
+    &:focus-visible,
+    &:focus-visible[readonly] {
       border-color: var(--glide-core-border-focus);
     }
 
@@ -48,7 +49,7 @@
     }
 
     &[disabled] {
-      background-color: var(--glide-core-surface-base-gray-light);
+      background-color: var(--glide-core-surface-disabled);
       border: 0.0625rem solid var(--glide-core-border-base-light);
       color: var(--glide-core-text-tertiary-disabled);
     }
@@ -66,4 +67,4 @@
       font-weight: var(--glide-core-font-weight-bold);
     }
   }
-`;
+`;