@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/input.styles.js

@@ -1,4 +1,4 @@
-import{css}from"lit";export default css`
+import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default css`
   .meta {
     column-gap: var(--glide-core-spacing-xs);
     display: flex;
@@ -15,6 +15,10 @@ import{css}from"lit";export default css`
     &.error {
       font-weight: var(--glide-core-font-weight-bold);
     }
+
+    .hidden {
+      ${visuallyHidden};
+    }
   }
 
   .search-icon {
@@ -22,7 +26,7 @@ import{css}from"lit";export default css`
     display: flex;
   }
 
-  .input-box {
+  .input-container {
     align-items: center;
     background-color: var(--glide-core-surface-base-lighter);
     block-size: 2.125rem;
@@ -41,6 +45,7 @@ import{css}from"lit";export default css`
 
     &.focused:not(.error) {
       border-color: var(--glide-core-border-focus);
+      transition: border-color 200ms ease-in-out;
     }
 
     /* We had to resort to a class selector because there may be a bug in Chrome and Safari

package/dist/input.test.basics.js

@@ -54,7 +54,7 @@ it('changes to type text when password is revealed', async () => {
     const inputElement = element.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('password');
-    const passwordToggle = element.shadowRoot?.querySelector('.password-toggle');
+    const passwordToggle = element.shadowRoot?.querySelector('[data-test="password-toggle"]');
     passwordToggle?.click();
     await element.updateComplete;
     expect(inputElement?.getAttribute('type')).to.equal('text');
@@ -66,7 +66,7 @@ it('shows search icon with type search', async () => {
     const inputElement = element.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('search');
-    const searchIcon = element.shadowRoot?.querySelector('.search-icon');
+    const searchIcon = element.shadowRoot?.querySelector('[data-test="search-icon"]');
     expect(searchIcon).to.exist;
 });
 it('when using "focus() on input", the native input is focused', async () => {
@@ -100,7 +100,7 @@ it('clearable attribute allows for a button which can clear input', async () =>
     const element = await fixture(html `
     <glide-core-input label="Test" clearable></glide-core-input>
   `);
-    const clearButton = element.shadowRoot?.querySelector('.clear-icon-button');
+    const clearButton = element.shadowRoot?.querySelector('[data-test="clear-button"]');
     element.focus();
     await sendKeys({ type: 'testing' });
     expect(element.value).to.be.equal('testing');
@@ -119,8 +119,22 @@ it('displays a max character and current character count if maxlength is provide
     const element = await fixture(html `
     <glide-core-input label="Test label" maxlength="5"></glide-core-input>
   `);
-    const maxCharacterCountContainer = element.shadowRoot?.querySelector('.character-count');
-    expect(maxCharacterCountContainer?.textContent?.trim()).to.be.equal('0/5');
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('0/5');
+});
+it('displays visually hidden character count text for screenreaders', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test label" maxlength="5"></glide-core-input>
+  `);
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 0 of 5');
+});
+it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test label" maxlength="0"></glide-core-input>
+  `);
+    const container = element.shadowRoot?.querySelector('[data-test="character-count-container"]');
+    expect(container).to.be.null;
 });
 it('supports a "tooltip" slot', async () => {
     const component = await fixture(html `<glide-core-input label="test">

package/dist/input.test.events.js

@@ -65,7 +65,7 @@ it('does not dispatch an "invalid" event after `checkValidity` is called when no
     input.addEventListener('invalid', spy);
     input.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event after `checkValidity` is called when required and no value but disabled', async () => {
     const form = document.createElement('form');
@@ -74,7 +74,7 @@ it('does not dispatch an "invalid" event after `checkValidity` is called when re
     input.addEventListener('invalid', spy);
     input.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
     const form = document.createElement('form');
@@ -85,7 +85,7 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when no
     input.addEventListener('invalid', spy);
     input.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when required and no value but disabled', async () => {
     const form = document.createElement('form');
@@ -94,5 +94,5 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when re
     input.addEventListener('invalid', spy);
     input.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });

package/dist/input.test.focus.js

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './input.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import Input from './input.js';
-Input.shadowRootOptions.mode = 'open';
-it('focuses the input when `focus` is called', async () => {
+import GlideCoreInput from './input.js';
+GlideCoreInput.shadowRootOptions.mode = 'open';
+it('focuses the input when `focus()` is called', async () => {
     const input = await fixture(html `<glide-core-input required></glide-core-input>`);
     input.focus();
     const inputElement = input.shadowRoot?.querySelector('input');
@@ -27,7 +27,7 @@ it('blurs the input and reports validity if `blur` is called', async () => {
     await input.updateComplete;
     expect(input.shadowRoot?.activeElement).to.equal(null);
     expect(input.validity.valid).to.equal(false);
-    expect(input.shadowRoot?.querySelector('glide-core-label')?.error).to.equal(true);
+    expect(input.shadowRoot?.querySelector('glide-core-private-label')?.error).to.equal(true);
 });
 it('focuses the input after `reportValidity` is called when required and no value', async () => {
     const form = document.createElement('form');

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

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

package/dist/input.test.translations.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreInput from './input.js';
+GlideCoreInput.shadowRootOptions.mode = 'open';
+it('renders dynamic strings in Japanese', async () => {
+    const element = await fixture(html `
+    <glide-core-input
+      label="Test"
+      value="lorem"
+      maxlength="40"
+      clearable
+    ></glide-core-input>
+  `);
+    document.documentElement.setAttribute('lang', 'ja');
+    await elementUpdated(element);
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
+    expect(element.shadowRoot?.querySelector('[data-test="clear-button"]')?.label).to.equal('Clear Test entry');
+});
+it('renders dynamic strings in French', async () => {
+    const element = await fixture(html `
+    <glide-core-input
+      label="Test"
+      value="lorem"
+      maxlength="40"
+      clearable
+    ></glide-core-input>
+  `);
+    document.documentElement.setAttribute('lang', 'fr');
+    await elementUpdated(element);
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
+    expect(element.shadowRoot?.querySelector('[data-test="clear-button"]')?.label).to.equal('Clear Test entry');
+});

package/dist/input.test.validity.js

@@ -1,15 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './input.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
-import Input from './input.js';
-Input.shadowRootOptions.mode = 'open';
+import GlideCoreInput from './input.js';
+GlideCoreInput.shadowRootOptions.mode = 'open';
 it('is valid if empty but not required', async () => {
     const input = await fixture(html `<glide-core-input></glide-core-input>`);
     expect(input.validity?.valid).to.be.true;
     expect(input.validity?.valueMissing).to.be.false;
     expect(input.checkValidity()).to.be.true;
     expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
 });
 it('is valid after being filled in when empty and required', async () => {
     const input = await fixture(html `<glide-core-input required></glide-core-input>`);
@@ -19,6 +21,8 @@ it('is valid after being filled in when empty and required', async () => {
     expect(input.validity?.valueMissing).to.be.false;
     expect(input.checkValidity()).to.be.true;
     expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
 });
 it('is invalid if no value and required', async () => {
     const input = await fixture(html `<glide-core-input required></glide-core-input>`);
@@ -27,6 +31,8 @@ it('is invalid if no value and required', async () => {
     expect(input.willValidate).to.be.true;
     expect(input.checkValidity()).to.be.false;
     expect(input.reportValidity()).to.be.false;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
 });
 it('is invalid after value is cleared when required', async () => {
     const input = await fixture(html `<glide-core-input
@@ -34,13 +40,76 @@ it('is invalid after value is cleared when required', async () => {
       value="value"
       required
     ></glide-core-input>`);
-    const clearButton = input.shadowRoot?.querySelector('.clear-icon-button');
+    const clearButton = input.shadowRoot?.querySelector('[data-test="clear-button"]');
     clearButton?.click();
     await input.updateComplete;
     expect(input.validity?.valid).to.be.false;
     expect(input.validity?.valueMissing).to.be.true;
     expect(input.checkValidity()).to.be.false;
     expect(input.reportValidity()).to.be.false;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+});
+it('is valid when empty and does not exceed `maxlength`', async () => {
+    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.validity?.tooLong).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+});
+it('is valid when filled in and does not exceed `maxlength`', async () => {
+    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    input.focus();
+    await sendKeys({ type: 'val' });
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.validity?.tooLong).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+});
+it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
+    const input = await fixture(html `<glide-core-input
+      value="value"
+      maxlength="3"
+      disabled
+    ></glide-core-input>`);
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.validity?.tooLong).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+});
+it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
+    const input = await fixture(html `<glide-core-input
+      value="value"
+      maxlength="3"
+      readonly
+    ></glide-core-input>`);
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.validity?.tooLong).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+});
+it('is invalid when filled in and exceeds `maxlength`', async () => {
+    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    input.focus();
+    await sendKeys({ type: 'value' });
+    expect(input.validity?.valid).to.be.false;
+    expect(input.validity?.tooLong).to.be.true;
+    expect(input.checkValidity()).to.be.false;
+    expect(input.reportValidity()).to.be.false;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
 });
 it('is valid if no value and required but disabled', async () => {
     const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
@@ -48,4 +117,64 @@ it('is valid if no value and required but disabled', async () => {
     expect(input.validity?.valueMissing).to.be.false;
     expect(input.checkValidity()).to.be.true;
     expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+});
+it('updates validity when `required` and `value` is changed programmatically', async () => {
+    const input = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
+    expect(input.validity?.valid).to.be.false;
+    expect(input.validity?.valueMissing).to.be.true;
+    expect(input.checkValidity()).to.be.false;
+    expect(input.reportValidity()).to.be.false;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    input.value = 'text';
+    await elementUpdated(input);
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    // Resetting the value to empty to ensure it goes
+    // back to an invalid state
+    input.value = '';
+    await elementUpdated(input);
+    expect(input.validity?.valid).to.be.false;
+    expect(input.validity?.valueMissing).to.be.true;
+    expect(input.checkValidity()).to.be.false;
+    expect(input.reportValidity()).to.be.false;
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+});
+it('is invalid when `value` is empty and `required` is set to `true` programmatically', async () => {
+    const input = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    input.required = true;
+    await elementUpdated(input);
+    expect(input.validity?.valid).to.be.false;
+    expect(input.validity?.valueMissing).to.be.true;
+    expect(input.checkValidity()).to.be.false;
+    expect(input.reportValidity()).to.be.false;
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+});
+it('is valid when `value` is empty and `required` is set to `false` programmatically', async () => {
+    const input = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
+    expect(input.validity?.valid).to.be.false;
+    expect(input.validity?.valueMissing).to.be.true;
+    expect(input.checkValidity()).to.be.false;
+    expect(input.reportValidity()).to.be.false;
+    await elementUpdated(input);
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    input.required = false;
+    await elementUpdated(input);
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
 });

package/dist/label.d.ts

@@ -2,7 +2,7 @@ import './tooltip.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-label': GlideCoreLabel;
+        'glide-core-private-label': GlideCoreLabel;
     }
 }
 /**

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";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,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";import{svg}from"lit";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescriptionSlot=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({"tooltips-and-label":!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="tooltips-and-label"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-overflow-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${this.#h}" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#h(){const e=this.#o.value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=Boolean(e&&e.length>0)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescriptionSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-label")],GlideCoreLabel);export default GlideCoreLabel;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}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 ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescriptionSlot=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({"tooltips-and-label":!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="tooltips-and-label"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${this.#h}" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#h(){const e=this.#o.value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=Boolean(e&&e.length>0)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescriptionSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;

package/dist/label.styles.js

@@ -1,15 +1,11 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     .component {
       &.horizontal {
+        --column-gap: var(--glide-core-spacing-sm);
+
         column-gap: var(--glide-core-spacing-sm);
         display: grid;
-
-        /*
-       Since 1fr is actually minmax(auto, 1fr), this explicit minmax will make it so
-       the first column is sized to its content, and the second column fills the rest
-       of the space.
-      */
-        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-columns: auto minmax(min-content, 1fr);
       }
 
       &.vertical {
@@ -22,7 +18,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
 
       &.middle {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: calc(50% - var(--column-gap) / 2) calc(
+            50% - var(--column-gap) / 2
+          );
       }
 
       &.hidden-label {
@@ -35,10 +33,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       align-items: center;
       column-gap: var(--glide-core-spacing-xs);
       display: flex;
-      justify-content: flex-end;
 
-      /* Prevent it from growing larger than its column percentage when a child of Form Controls Layout. */
-      min-inline-size: 0;
+      /* 
+        Allows for an ellipsis on the label. See the linked comment for why it's "3ch" 
+        instead of "0".
+
+        - https://github.com/CrowdStrike/glide-core/pull/317#issuecomment-2297025365 
+        - https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child
+      */
+      min-inline-size: 3ch;
+
+      &.middle,
+      &.left {
+        justify-content: flex-end;
+      }
 
       &.hidden {
         ${visuallyHidden};
@@ -110,8 +118,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .label-overflow-tooltip {
-      inline-size: 100%;
+    .label-tooltip {
+      display: flex;
+      max-inline-size: 100%;
+
+      /* https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child */
+      min-inline-size: 0;
     }
 
     .required-symbol {

package/dist/label.test.basics.js

@@ -5,13 +5,13 @@ import GlideCoreLabel from './label.js';
 import sinon from 'sinon';
 GlideCoreLabel.shadowRootOptions.mode = 'open';
 it('registers', async () => {
-    expect(window.customElements.get('glide-core-label')).to.equal(GlideCoreLabel);
+    expect(window.customElements.get('glide-core-private-label')).to.equal(GlideCoreLabel);
 });
 it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.getAttribute('error')).to.equal(null);
     expect(component.error).to.equal(false);
     expect(component.getAttribute('hide')).to.equal(null);
@@ -22,80 +22,80 @@ it('has defaults', async () => {
     expect(component.required).to.be.false;
 });
 it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="tooltip">Tooltip</div>
       <div slot="description">Description</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     await expect(component).to.be.accessible();
 });
 it('can have a label', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     const assignedElements = component.shadowRoot
         ?.querySelector('slot:not([name])')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Label');
 });
 it('can have a description', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="description">Description</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="description"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Description');
 });
 it('can have a tooltip', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="tooltip">Tooltip</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="tooltip"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
 });
 it('can be required', async () => {
-    const component = await fixture(html `<glide-core-label required>
+    const component = await fixture(html `<glide-core-private-label required>
       <label for="input">Label</label>
       <input id="input" slot="control" />
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.hasAttribute('required')).to.be.true;
     expect(component.required).to.equal(true);
     const label = component.shadowRoot?.querySelector('[data-test="label"]');
     expect(label?.textContent?.includes('*')).to.be.true;
 });
 it('can have an `error`', async () => {
-    const component = await fixture(html `<glide-core-label ?error=${true}>
+    const component = await fixture(html `<glide-core-private-label ?error=${true}>
       <label for="input">Label</label>
       <input id="input" slot="control" />
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.hasAttribute('error')).to.be.true;
     expect(component.error).to.equal(true);
 });
 it('places the tooltip on the bottom when horizontal', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="tooltip">Tooltip</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.shadowRoot
         ?.querySelector('glide-core-tooltip')
         ?.getAttribute('placement')).to.equal('bottom');
 });
 it('places the tooltip on the right when vertical', async () => {
-    const component = await fixture(html `<glide-core-label orientation="vertical">
+    const component = await fixture(html `<glide-core-private-label orientation="vertical">
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="tooltip">Tooltip</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.shadowRoot
         ?.querySelector('glide-core-tooltip')
         ?.getAttribute('placement')).to.equal('right');
@@ -103,29 +103,31 @@ it('places the tooltip on the right when vertical', async () => {
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();
     try {
-        await fixture(html `<glide-core-label><input slot="control" /></glide-core-label>`);
+        await fixture(html `<glide-core-private-label
+        ><input slot="control"
+      /></glide-core-private-label>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if it does not have a "control" slot', async () => {
     const spy = sinon.spy();
     const stub = sinon.stub(console, 'error');
     try {
-        await fixture(html `<glide-core-label>
+        await fixture(html `<glide-core-private-label>
         <label>Label</label>
-      </glide-core-label>`);
+      </glide-core-private-label>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
     // It's not clear to me why the error logged by Ow shows up in the console
     // here and not in the above test or elsewhere. A bug in Web Test Runner?
     // Something I don't understand about Lit's lifecycle?

package/dist/library/expect-argument-error.js

@@ -1 +1 @@
-import{ArgumentError}from"ow";import{expect}from"@open-wc/testing";import sinon from"sinon";export default async function(o){const r=window.onerror;window.onerror=null;const n=sinon.spy();try{await o.call(context)}catch(o){o instanceof ArgumentError&&n()}expect(n.called).to.be.true,window.onerror=r}
+import{ArgumentError}from"ow";import{expect}from"@open-wc/testing";import sinon from"sinon";export default async function(o){const n=window.onerror;window.onerror=null;const r=sinon.spy();try{await o.call(context)}catch(o){o instanceof ArgumentError&&r()}expect(r.callCount).to.equal(1),window.onerror=n}

package/dist/library/localize.d.ts

@@ -10,10 +10,13 @@ export interface Translation extends DefaultTranslation {
     dismiss: string;
     open: string;
     selectAll: string;
-    clearEntry: string;
     moreInformation: string;
     notifications: string;
     nextTab: string;
     previousTab: string;
+    announcedCharacterCount: (current: number, maximum: number) => string;
+    displayedCharacterCount: (current: number, maximum: number) => string;
+    clearEntry: (label: string) => string;
     removeTag: (name: string) => string;
+    actionsFor: (label: string) => string;
 }