@crowdstrike/glide-core 0.10.0 → 0.12.0

package/dist/radio-group.test.validity.js

@@ -227,3 +227,85 @@ it('sets radios as valid initially when required', async () => {
     expect(radios[1]?.invalid).to.be.false;
     expect(radios[1]?.ariaInvalid).to.equal('false');
 });
+it('is valid after `value` is set and `required`', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    component.value = 'value-1';
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});
+it('sets the validity message with `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    component.setCustomValidity('validity message');
+    component.reportValidity();
+    await elementUpdated(component);
+    component.setCustomValidity('');
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('is invalid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    component.setValidity({ customError: true }, 'validity message');
+    expect(component.validity.valid).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.validity?.customError).to.be.true;
+    component.reportValidity();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('is valid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    component.setValidity({ customError: true }, 'validity message');
+    component.setValidity({});
+    await elementUpdated(component);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity.customError).to.be.false;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('retains existing validity state when `setCustomValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.validity?.valueMissing).to.be.true;
+});

package/dist/styles/variables.css

@@ -1 +1 @@
-:root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-base-transparent: #0000001a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-gray-lighter: #00000008;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #8a8a8a;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-base-transparent: #0000001a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #d7e7ff;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #ffffff;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #00000066;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-gray-lighter: #ffffff1a;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #000000e5;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #8a8a8a;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #c9c9c9;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}
+:root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-number-14: .875rem;--glide-core-number-16: 1rem;--glide-core-page-size-details-panel: 27.375rem;--glide-core-page-size-height: 46.875rem;--glide-core-page-size-width: 83.3125rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-base-transparent: #0000001a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-generic-border-active: #6d6d6d;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-gray-lighter: #00000008;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #d7e7ff;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-tag-default: #00000012;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #8a8a8a;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-base-transparent: #0000001a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-generic-border-active: #6d6d6d;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #d7e7ff;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #ffffff;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #f0f0f0;--glide-core-surface-base-gray: #00000066;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-gray-lighter: #ffffff1a;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-tag-default: #ffffff1a;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #000000e5;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #8a8a8a;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #c9c9c9;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}

package/dist/tab.group.d.ts

@@ -15,6 +15,7 @@ export default class GlideCoreTabGroup extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    sticky: boolean;
     get activeTab(): GlideCoreTab | null;
     set activeTab(tab: GlideCoreTab | null);
     isAfterFirstUpdated: boolean;

package/dist/tab.group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,s,i){var o,l=arguments.length,a=l<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,i);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(a=(l<3?o(a):l>3?o(e,s,a):o(e,s))||a);return l>3&&a&&Object.defineProperty(e,s,a),a};import"./icon-button.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,queryAssignedElements,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=null,this.#s=100,this.#i=createRef(),this.#o=new LocalizeController(this),this.#l=createRef(),this.#a=1,this.#r=createRef(),this.#n=createRef(),this.#c=null,this.#h=null,this.#b=null,this.#u=null,this.#f=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get activeTab(){return this.#e}set activeTab(t){this.#c=this.#e,this.#e=t}disconnectedCallback(){this.#h?.disconnect(),this.#h=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#i.value,[GlideCoreTabPanel]),this.#d()}render(){return html`<div class="component" @click="${this.#v}" @keydown="${this.#m}" ${ref(this.#t)}><div class="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" tabindex="-1" aria-label="${this.#o.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#n)} ?disabled="${this.isDisableOverflowStartButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}<div role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#f)} @scroll="${this.#w}" @focusout="${this.#E}" tabindex="-1"><slot name="nav" @slotchange="${this.#T}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#R}" tabindex="-1" aria-label="${this.#o.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#r)} ?disabled="${this.isDisableOverflowEndButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div><slot @slotchange="${this.#g}" ${ref(this.#i)}></slot></div>`}updated(){this.#S()}#t;#e;#s;#i;#o;#l;#a;#r;#n;#c;#h;#b;#u;#f;#v(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#O(e)}#R(){this.#y("right")}#p(){this.#y("left")}#g(){owSlotType(this.#i.value,[GlideCoreTabPanel])}#E(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#m(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#O(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.tabElements.find((t=>t.matches(":focus")));if("glide-core-tab"===e?.tagName.toLowerCase()){let s=this.tabElements.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[s]===t?0:-1;this.#B(),t.preventDefault()}}}#T(){owSlotType(this.#l.value,[GlideCoreTab]),this.#S(),this.#C(),this.#B()}#w(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#B()}),this.#s)}#y(t){const e="right"===t?1:-1;ow(this.#f.value,ow.object.instanceOf(HTMLElement));const s=e*this.#f.value?.clientWidth*.5;this.#f.value?.scrollBy({left:s,top:0})}#C(){for(const[t,e]of this.tabElements.entries())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),s=t.getAttribute("name");t.isActive=s===e,t.tabIndex=s===e?0:-1}if(this.activeTab!==this.#c&&this.activeTab&&this.tabElements.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-start")),e=this.activeTab===this.tabElements.at(0)?t:this.activeTab.offsetLeft-this.tabElements[0].offsetLeft;this.#t.value.style.setProperty("--active-tab-indicator-translate",`${e}px`);const s=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0,{width:i}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",i-s+"px"),this.isAfterFirstUpdated=!0}}#L(){const t=this.#f.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:s}=e,i=t.scrollLeft+s,o=t.scrollWidth;this.isDisableOverflowEndButton=o-i<=this.#a}}#B(){const t=this.#f.value,e=t?.getBoundingClientRect();if(t&&e){const{width:s}=e;this.isShowOverflowButtons=t.scrollWidth-s>this.#a}this.#A(),this.#L()}#A(){ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#f.value.scrollLeft<=0}#d(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#f.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#B()}),this.#s))})),ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#f.value)}#S(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);e?.getAttribute("id")&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))}}#O(t){this.activeTab=t,this.#C(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",void 0),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;
+var __decorate=this&&this.__decorate||function(t,e,s,o){var i,l=arguments.length,a=l<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,o);else for(var r=t.length-1;r>=0;r--)(i=t[r])&&(a=(l<3?i(a):l>3?i(e,s,a):i(e,s))||a);return l>3&&a&&Object.defineProperty(e,s,a),a};import"./icon-button.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,queryAssignedElements,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.sticky=!1,this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=null,this.#s=100,this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef(),this.#a=1,this.#r=createRef(),this.#n=createRef(),this.#c=null,this.#h=null,this.#b=null,this.#u=null,this.#d=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get activeTab(){return this.#e}set activeTab(t){this.#c=this.#e,this.#e=t}disconnectedCallback(){this.#h?.disconnect(),this.#h=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#o.value,[GlideCoreTabPanel]),this.#f()}render(){return html`<div class="component" @click="${this.#v}" @keydown="${this.#m}" ${ref(this.#t)}><div class="${classMap({"tab-container":!0,sticky:this.sticky})}">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" tabindex="-1" aria-label="${this.#i.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#n)} ?disabled="${this.isDisableOverflowStartButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}<div role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#d)} @scroll="${this.#w}" @focusout="${this.#T}" tabindex="-1"><slot name="nav" @slotchange="${this.#E}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#R}" tabindex="-1" aria-label="${this.#i.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#r)} ?disabled="${this.isDisableOverflowEndButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div><slot @slotchange="${this.#g}" ${ref(this.#o)}></slot></div>`}updated(){this.#y()}#t;#e;#s;#o;#i;#l;#a;#r;#n;#c;#h;#b;#u;#d;#v(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#S(e)}#R(){this.#O("right")}#p(){this.#O("left")}#g(){owSlotType(this.#o.value,[GlideCoreTabPanel])}#T(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#m(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#S(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.tabElements.find((t=>t.matches(":focus")));if("glide-core-tab"===e?.tagName.toLowerCase()){let s=this.tabElements.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[s]===t?0:-1;this.#B(),t.preventDefault()}}}#E(){owSlotType(this.#l.value,[GlideCoreTab]),this.#y(),this.#C(),this.#B()}#w(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#B()}),this.#s)}#O(t){const e="right"===t?1:-1;ow(this.#d.value,ow.object.instanceOf(HTMLElement));const s=e*this.#d.value?.clientWidth*.5;this.#d.value?.scrollBy({left:s,top:0})}#C(){for(const[t,e]of this.tabElements.entries())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),s=t.getAttribute("name");t.isActive=s===e,t.tabIndex=s===e?0:-1}if(this.activeTab!==this.#c&&this.activeTab&&this.tabElements.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-start")),e=this.activeTab===this.tabElements.at(0)?t:this.activeTab.offsetLeft-this.tabElements[0].offsetLeft;this.#t.value.style.setProperty("--active-tab-indicator-translate",`${e}px`);const s=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0,{width:o}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",o-s+"px"),this.isAfterFirstUpdated=!0}}#L(){const t=this.#d.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:s}=e,o=t.scrollLeft+s,i=t.scrollWidth;this.isDisableOverflowEndButton=i-o<=this.#a}}#B(){const t=this.#d.value,e=t?.getBoundingClientRect();if(t&&e){const{width:s}=e;this.isShowOverflowButtons=t.scrollWidth-s>this.#a}this.#G(),this.#L()}#G(){ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#d.value.scrollLeft<=0}#f(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#d.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#B()}),this.#s))})),ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#d.value)}#y(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);e?.getAttribute("id")&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))}}#S(t){this.activeTab=t,this.#C(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreTabGroup.prototype,"sticky",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",void 0),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;

package/dist/tab.group.styles.js

@@ -5,11 +5,17 @@ import{css}from"lit";export default[css`
       flex-direction: column;
 
       & .tab-container {
+        background-color: var(--glide-core-surface-page);
         border-block-end: 1px solid var(--glide-core-border-base-lighter);
         box-sizing: border-box;
         display: flex;
       }
 
+      & .sticky {
+        inset-block-start: 0;
+        position: sticky;
+      }
+
       & .tab-group {
         display: flex;
         gap: var(--glide-core-spacing-xl);

package/dist/tag.d.ts

@@ -13,12 +13,11 @@ export default class GlideCoreTag extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    disabled: boolean;
     label?: string;
     removable: boolean;
     size: 'small' | 'medium' | 'large';
     click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    get textContent(): string;
-    set textContent(label: string);
 }

package/dist/tag.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,r=arguments.length,s=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,l);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(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{when}from"lit/directives/when.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.removable=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=new LocalizeController(this),this.#i=()=>{setTimeout((()=>{this.remove()}),200),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}render(){return html`<div class="${classMap({component:!0,added:!0,[this.size]:!0})}" data-test="component" ${ref(this.#t)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" name="icon" ${ref(this.#o)}></slot>${this.label} ${when(this.removable,(()=>html`<button aria-label="${this.#l.term("removeTag",this.label)}" class="${classMap({[this.size]:!0})}" data-test="button" type="button" @click="${this.#i}" ${ref(this.#e)}><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>`}get textContent(){return this.label??""}set textContent(e){this.label=e}#e;#t;#o;#l;#i};__decorate([property({reflect:!0})],GlideCoreTag.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,r=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,o,r):l(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};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{when}from"lit/directives/when.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.removable=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled,[this.size]:!0})}" data-test="component" ${ref(this.#t)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" name="icon" ${ref(this.#o)}></slot>${this.label} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({button:!0,[this.size]:!0,disabled:this.disabled})}" data-test="button" type="button" @click="${this.#l}" ?disabled="${this.disabled}" ${ref(this.#e)}><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;#i;#l(){setTimeout((()=>{this.remove()}),200),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0}))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;

package/dist/tag.styles.js

@@ -3,7 +3,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
   `,css`
     .component {
       align-items: center;
-      background: var(--glide-core-surface-base);
+      background: var(--glide-core-surface-tag-default);
       border-radius: var(--glide-core-border-radius-round);
       color: var(--glide-core-text-body-1);
       display: flex;
@@ -35,6 +35,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         animation: fade-in 100ms ease-in-out;
       }
 
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+      }
+
       &.removed {
         animation: fade-out 200ms ease-in-out;
         animation-fill-mode: forwards;
@@ -61,7 +65,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    button {
+    .button {
       align-items: center;
       background-color: transparent;
       block-size: var(--glide-core-spacing-sm);
@@ -89,7 +93,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         margin-inline-start: var(--glide-core-spacing-xxs);
       }
 
-      &:hover {
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+        cursor: not-allowed;
+      }
+
+      &:hover:not(.disabled) {
         color: var(--glide-core-icon-primary-hover);
       }
 

package/dist/tag.test.basics.js

@@ -16,6 +16,7 @@ it('is accessible', async () => {
 });
 it('has defaults', async () => {
     const component = await fixture(html `<glide-core-tag label="Label"></glide-core-tag>`);
+    expect(component.disabled).to.be.false;
     expect(component.removable).to.be.false;
     expect(component.size).to.equal('medium');
 });

package/dist/tag.test.interactions.js

@@ -10,6 +10,14 @@ it('removes itself on click', async () => {
     await aTimeout(200);
     expect(document.querySelector('glide-core-tag')).to.be.null;
 });
+it('does not remove itself on click when disabled', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" disabled removable></glide-core-tag>`);
+    component.click();
+    // Wait for the animation to complete.
+    await aTimeout(200);
+    expect(document.querySelector('glide-core-tag') instanceof GlideCoreTag).to.be
+        .true;
+});
 it('removes itself on Space', async () => {
     const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
     component.focus();
@@ -26,9 +34,3 @@ it('removes itself on Enter', async () => {
     await aTimeout(200);
     expect(document.querySelector('glide-core-tag')).to.be.null;
 });
-it('supports `textContent`', async () => {
-    const component = await fixture(html `<glide-core-tag label="One"></glide-core-tag>`);
-    expect(component.textContent).to.equal('One');
-    component.textContent = 'Two';
-    expect(component.label).to.equal('Two');
-});

package/dist/textarea.d.ts

@@ -43,8 +43,11 @@ export default class GlideCoreTextarea extends LitElement {
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    setValidity(flags?: ValidityStateFlags, message?: string): void;
     constructor();
     private isBlurring;
     private isCheckingValidity;
     private isReportValidityOrSubmit;
+    private validityMessage?;
 }

package/dist/textarea.js

@@ -1,2 +1,58 @@
-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="${this.autocapitalize}" autocomplete="${this.autocomplete}" 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.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="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({reflect:!0})],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",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,s=arguments.length,o=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(o=(s<3?r(o):s>3?r(t,i,o):r(t,i))||o);return s>3&&o&&Object.defineProperty(t,i,o),o};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{unsafeHTML}from"lit/directives/unsafe-html.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)}get form(){return this.#t.form}get validity(){return!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),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.#a||this.#r}
+      ?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.#a||this.#r}
+          class=${classMap({error:this.#a||this.#r})}
+          id="textarea"
+          name=${ifDefined(this.name)}
+          placeholder=${ifDefined(this.placeholder)}
+          rows=${this.rows}
+          autocapitalize=${this.autocapitalize}
+          autocomplete=${this.autocomplete}
+          spellcheck=${this.spellcheck}
+          .value=${this.value}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          ${ref(this.#e)}
+          @input=${this.#s}
+          @change=${this.#o}
+          @blur=${this.#l}
+        >
+        </textarea>
+      </div>
+
+      <div class="meta" id="meta" slot="description">
+        <slot
+          class=${classMap({description:!0,hidden:Boolean(this.#a&&this.validityMessage)})}
+          name="description"
+        ></slot>
+
+        ${when(this.#a&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+              >${unsafeHTML(this.validityMessage)}</span
+            >`))}
+        ${this.maxlength?html`<div
+              class=${classMap({"character-count":!0,error:this.#r})}
+              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}setCustomValidity(e){this.validityMessage=e,""===e?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(e,t){this.validityMessage=t,this.#t.setValidity(e," ",this.#e.value)}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.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="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#a(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#n(){return this.value.length}get#r(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#n>this.maxlength)}#l(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#o(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value,this.dispatchEvent(new Event(e.type,e))}#s(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",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),__decorate([state()],GlideCoreTextarea.prototype,"validityMessage",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;

package/dist/textarea.styles.js

@@ -12,6 +12,14 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
 
     .description {
       display: block;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .validity-message {
+      display: block;
     }
 
     textarea {

package/dist/textarea.test.events.js

@@ -104,117 +104,3 @@ it('does not dispatch an `invalid` event when `reportValidity` is called when re
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
-it('dispatches an `invalid` event after `requestSubmit` is called when `maxlength` exceeded', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    setTimeout(async () => {
-        component.focus();
-        await sendKeys({ type: 'testing' });
-        form.requestSubmit();
-    });
-    const event = await oneEvent(component, 'invalid');
-    expect(event instanceof Event).to.be.true;
-});
-it('dispatches an `invalid` event after `checkValidity` is called when `maxlength` exceeded', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    setTimeout(async () => {
-        component.focus();
-        await sendKeys({ type: 'testing' });
-        component.checkValidity();
-    });
-    const event = await oneEvent(component, 'invalid');
-    expect(event instanceof Event).to.be.true;
-});
-it('dispatches an `invalid` event after `reportValidity` is called when `maxlength` exceeded', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    setTimeout(async () => {
-        component.focus();
-        await sendKeys({ type: 'testing' });
-        component.reportValidity();
-    });
-    const event = await oneEvent(component, 'invalid');
-    expect(event instanceof Event).to.be.true;
-});
-it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` not exceeded', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.focus();
-    await sendKeys({ type: 'ab' });
-    component.checkValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});
-it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` exceeded and disabled', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-      disabled
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.focus();
-    await sendKeys({ type: 'test' });
-    component.checkValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});
-it('does not dispatch an `invalid` event when `reportValidity` is called and `maxlength` is not exceeded,', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.focus();
-    await sendKeys({ type: 'ab' });
-    component.reportValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});
-it('does not dispatch an `invalid` event when `reportValidity` is called `maxlength` exceeded and disabled,', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-      disabled
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.focus();
-    await sendKeys({ type: 'test' });
-    component.reportValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});