@crowdstrike/glide-core 0.32.0 → 0.32.2

package/dist/accordion.js

@@ -65,6 +65,9 @@ let Accordion = class Accordion extends LitElement {
             return;
         }
         if (isOpen && hasChanged) {
+            // Used in a conditional below to avoid dispatching a "toggle" event on first
+            // render when Accordion is open initially.
+            const hasUpdated = this.hasUpdated;
             // Wait for `.summary` to re-render after the "active" class addition to
             // prevent animation jank, especially in Firefox and Safari.
             this.updateComplete.then(() => {
@@ -87,7 +90,7 @@ let Accordion = class Accordion extends LitElement {
                         easing: getComputedStyle(this.#defaultSlotElementRef.value).getPropertyValue('--private-easing'),
                     })
                         .addEventListener('finish', () => {
-                        if (this.#detailsElementRef.value) {
+                        if (this.#detailsElementRef.value && hasUpdated) {
                             this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
                         }
                     });
@@ -132,7 +135,6 @@ let Accordion = class Accordion extends LitElement {
             active: this.open || this.isClosing,
             open: this.open,
         })}
-        data-test="summary"
         @click=${this.#onSummaryClick}
         ${ref(this.#summaryElementRef)}
       >
@@ -178,7 +180,6 @@ let Accordion = class Accordion extends LitElement {
             'default-slot': true,
             indented: this.hasPrefixIcon,
         })}
-        data-test="default-slot"
         style=${styleMap({
             '--private-close-duration': 'var(--glide-core-duration-fast-02)',
             '--private-easing': 'var(--glide-core-animation-swoop)',
@@ -202,14 +203,18 @@ let Accordion = class Accordion extends LitElement {
     #prefixIconSlotElementRef;
     #suffixIconsSlotElementRef;
     #summaryElementRef;
+    /* v8 ignore start */
     #onPrefixIconSlotChange() {
         const assignedNodes = this.#prefixIconSlotElementRef.value?.assignedNodes();
         this.hasPrefixIcon = Boolean(assignedNodes && assignedNodes.length > 0);
     }
+    /* v8 ignore end */
+    /* v8 ignore start */
     #onSuffixIconsSlotChange() {
         const assignedNodes = this.#suffixIconsSlotElementRef.value?.assignedNodes();
         this.hasSuffixIcons = Boolean(assignedNodes && assignedNodes.length > 0);
     }
+    /* v8 ignore end */
     #onSummaryClick(event) {
         // Canceling it prevents `details` from immediately showing and hiding
         // the default slot on open and close, letting us animate it when we're ready.

package/dist/button.d.ts

@@ -14,7 +14,7 @@ declare global {
  * @attr {string} [tooltip]
  * @attr {'button'|'submit'|'reset'} [type='button']
  * @attr {string} [value='']
- * @attr {'primary'|'secondary'|'tertiary'} [variant='primary']
+ * @attr {'primary'|'secondary'|'tertiary'|'link'} [variant='primary']
  *
  * @readonly
  * @attr {string} [version]
@@ -42,7 +42,7 @@ export default class Button extends LitElement {
     tooltip?: string;
     type: 'button' | 'submit' | 'reset';
     value: string;
-    variant: 'primary' | 'secondary' | 'tertiary';
+    variant: 'primary' | 'secondary' | 'tertiary' | 'link';
     readonly version: string;
     get form(): HTMLFormElement | null;
     click(): void;

package/dist/button.js

@@ -23,7 +23,7 @@ import required from './library/required.js';
  * @attr {string} [tooltip]
  * @attr {'button'|'submit'|'reset'} [type='button']
  * @attr {string} [value='']
- * @attr {'primary'|'secondary'|'tertiary'} [variant='primary']
+ * @attr {'primary'|'secondary'|'tertiary'|'link'} [variant='primary']
  *
  * @readonly
  * @attr {string} [version]
@@ -80,18 +80,22 @@ let Button = class Button extends LitElement {
             primary: this.variant === 'primary',
             secondary: this.variant === 'secondary',
             tertiary: this.variant === 'tertiary',
+            link: this.variant === 'link',
             large: this.size === 'large',
             small: this.size === 'small',
             disabled: this.disabled,
             'prefix-icon': this.hasPrefixIcon,
             'suffix-icon': this.hasSuffixIcon,
         })}
-        data-test="button"
         slot="target"
         @click=${this.#onClick}
         ${ref(this.#buttonElementRef)}
       >
         <slot
+          class=${classMap({
+            'prefix-icon-slot': true,
+            hidden: this.variant === 'link',
+        })}
           name="prefix-icon"
           @slotchange=${this.#onPrefixIconSlotChange}
           ${ref(this.#prefixIconSlotElementRef)}
@@ -105,6 +109,10 @@ let Button = class Button extends LitElement {
         ${this.label}
 
         <slot
+          class=${classMap({
+            'suffix-icon-slot': true,
+            hidden: this.variant === 'link',
+        })}
           name="suffix-icon"
           @slotchange=${this.#onSuffixIconSlotChange}
           ${ref(this.#suffixIconSlotElementRef)}
@@ -153,10 +161,13 @@ let Button = class Button extends LitElement {
             return;
         }
     }
+    /* v8 ignore start */
     #onPrefixIconSlotChange() {
         const assignedNodes = this.#prefixIconSlotElementRef.value?.assignedNodes();
         this.hasPrefixIcon = Boolean(assignedNodes && assignedNodes.length > 0);
     }
+    /* v8 ignore end */
+    /* v8 ignore start */
     #onSuffixIconSlotChange() {
         const assignedNodes = this.#suffixIconSlotElementRef.value?.assignedNodes();
         this.hasSuffixIcon = Boolean(assignedNodes && assignedNodes.length > 0);

package/dist/button.styles.js

@@ -135,17 +135,48 @@ export default [
         }
       }
 
-      &.large {
+      &.link {
+        background-color: initial;
+        border: none;
+        border-radius: var(--glide-core-rounding-base-radius-xxs);
+        color: var(--glide-core-color-interactive-text-link);
+        font-size: var(--glide-core-typography-size-body-default);
+        font-weight: var(--glide-core-typography-weight-regular);
+        padding: 0;
+
+        &.disabled {
+          color: var(--glide-core-color-interactive-text-link--disabled);
+        }
+
+        &:not(:active):hover:not(.disabled) {
+          color: var(--glide-core-color-interactive-text-link--hover);
+          text-decoration: underline;
+        }
+      }
+
+      &.large:not(.link) {
         block-size: 2.125rem;
         font-size: var(--glide-core-typography-size-body-large);
         min-inline-size: 2.75rem;
       }
 
-      &.small {
+      &.small:not(.link) {
         block-size: 1.75rem;
         font-size: var(--glide-core-typography-size-body-small);
         min-inline-size: 2.5625rem;
       }
     }
+
+    .prefix-icon-slot {
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .suffix-icon-slot {
+      &.hidden {
+        display: none;
+      }
+    }
   `,
 ];

package/dist/checkbox.js

@@ -158,11 +158,13 @@ let Checkbox = class Checkbox extends LitElement {
         });
         this.#intersectionObserver.observe(this);
     }
+    /* v8 ignore start */
     disconnectedCallback() {
         super.disconnectedCallback();
         this.form?.removeEventListener('formdata', this.#onFormdata);
         this.#intersectionObserver?.disconnect();
     }
+    /* v8 ignore end */
     get validity() {
         // If we're in a Checkbox Group, `disabled`, `required`, and whether or not
         // the form has been submitted don't apply because Checkbox Group handles those
@@ -201,7 +203,7 @@ let Checkbox = class Checkbox extends LitElement {
         this.indeterminate = this.getAttribute('indeterminate') === '';
     }
     render() {
-        return html `<div class="component" data-test="component">
+        return html `<div class="component">
       ${when(this.privateVariant === 'minimal', () => html `
           <label
             class="label-and-input-and-checkbox"
@@ -289,7 +291,6 @@ let Checkbox = class Checkbox extends LitElement {
                 aria-describedby="summary description"
                 aria-invalid=${this.#isShowValidationFeedback}
                 class="input"
-                data-test="input"
                 id="input"
                 type="checkbox"
                 .checked=${this.checked}
@@ -343,8 +344,9 @@ let Checkbox = class Checkbox extends LitElement {
               ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<span
                     class="validity-message"
                     data-test="validity-message"
-                    >${unsafeHTML(this.validityMessage)}</span
-                  >`)}
+                  >
+                    ${unsafeHTML(this.validityMessage)}
+                  </span>`)}
             </div>
           </glide-core-private-label>`)}
     </div>`;
@@ -500,7 +502,7 @@ let Checkbox = class Checkbox extends LitElement {
         if (event.target instanceof HTMLInputElement) {
             this.checked = event.target.checked;
         }
-        // If the input is interacted with it's no longer indeterminate.
+        // If the input has been interacted with it's no longer indeterminate.
         this.indeterminate = false;
         if (event.type === 'change') {
             // Unlike "input" events, "change" events aren't composed. So we have to

package/dist/dropdown.styles.js

@@ -54,8 +54,12 @@ export default [
       padding-inline: var(--glide-core-spacing-base-sm);
       text-align: start;
       transition:
-        background-color 200ms ease-in-out,
-        border-color 200ms ease-in-out;
+        background-color var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop),
+        border-color var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop),
+        box-shadow var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop);
       user-select: none;
 
       &.quiet:not(.multiple) {
@@ -67,6 +71,10 @@ export default [
         min-inline-size: 3.75rem;
         padding-block: 0;
         padding-inline: var(--glide-core-spacing-base-sm);
+
+        .error {
+          border-color: var(--glide-core-color-advisory-stroke-error-primary);
+        }
       }
 
       &.disabled {
@@ -110,9 +118,21 @@ export default [
         border-color: var(--glide-core-color-interactive-stroke-focus);
       }
 
-      &:has(.primary-button:focus-visible, .input:focus-visible) {
-        &.quiet {
+      &:has(.primary-button:focus-visible, .input:focus-visible):not(
+          .readonly
+        ) {
+        &:not(.error) {
           border-color: var(--glide-core-color-interactive-stroke-focus);
+          box-shadow:
+            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
+            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+        }
+
+        &.error {
+          box-shadow:
+            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
+            1px 1px 4px -1px
+              var(--glide-core-color-advisory-stroke-error-primary);
         }
       }
     }
@@ -359,7 +379,8 @@ export default [
       inline-size: 100%;
       max-inline-size: 21.875rem;
       padding-inline: 0.625rem;
-      transition: background-color 100ms ease-in-out;
+      transition: background-color var(--glide-core-duration-fast-02)
+        var(--glide-core-animation-swoop);
       user-select: none;
       white-space: nowrap;
 

package/dist/input.styles.js

@@ -46,11 +46,11 @@ export default [
       display: flex;
       min-inline-size: 3.75rem;
       padding-inline: var(--glide-core-spacing-base-sm);
-      transition: border-color 200ms ease-in-out;
-
-      &.focused {
-        border-color: var(--glide-core-color-interactive-stroke-focus);
-      }
+      transition:
+        border-color var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop),
+        box-shadow var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop);
 
       &:not(.disabled, .error, .readonly) {
         &:hover,
@@ -65,6 +65,22 @@ export default [
         border-color: var(--glide-core-color-advisory-stroke-error-primary);
       }
 
+      &.focused:not(.readonly) {
+        &:not(.error) {
+          border-color: var(--glide-core-color-interactive-stroke-focus);
+          box-shadow:
+            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
+            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+        }
+
+        &.error {
+          box-shadow:
+            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
+            1px 1px 4px -1px
+              var(--glide-core-color-advisory-stroke-error-primary);
+        }
+      }
+
       /*
         We had to resort to a class selector because there may be a bug in Chrome and Safari
         with ":read-only": https://bugs.chromium.org/p/chromium/issues/detail?id=1519649

package/dist/link.d.ts

@@ -9,6 +9,7 @@ declare global {
  * @attr {boolean} [disabled=false]
  * @attr {string} [download]
  * @attr {string} [href]
+ * @attr {string} [rel]
  * @attr {'_blank'|'_parent'|'_self'|'_top'} [target]
  *
  * @readonly
@@ -22,6 +23,7 @@ export default class Link extends LitElement {
     disabled: boolean;
     download?: string;
     href?: string;
+    rel?: string;
     target?: '_blank' | '_parent' | '_self' | '_top';
     readonly version: string;
     click(): void;

package/dist/link.js

@@ -19,6 +19,7 @@ import required from './library/required.js';
  * @attr {boolean} [disabled=false]
  * @attr {string} [download]
  * @attr {string} [href]
+ * @attr {string} [rel]
  * @attr {'_blank'|'_parent'|'_self'|'_top'} [target]
  *
  * @readonly
@@ -69,6 +70,7 @@ let Link = class Link extends LitElement {
           data-test="component"
           download=${ifDefined(this.download)}
           href=${ifDefined(this.href)}
+          rel=${ifDefined(this.rel)}
           target=${ifDefined(this.target)}
           @click=${this.#onClick}
           ${ref(this.#componentElementRef)}
@@ -97,6 +99,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], Link.prototype, "href", void 0);
+__decorate([
+    property({ reflect: true })
+], Link.prototype, "rel", void 0);
 __decorate([
     property({ reflect: true })
 ], Link.prototype, "target", void 0);

package/dist/modal.styles.js

@@ -35,7 +35,9 @@ export default [
       );
       border: none;
       border-radius: var(--glide-core-rounding-base-radius-sm);
-      box-shadow: var(--glide-core-effect-floating);
+      box-shadow: 0 var(--glide-core-color-effect-position-elevation-floating-y)
+        var(--glide-core-color-effect-blur-elevation-floating-blur)
+        var(--glide-core-color-effect-color-elevation-dialog);
       font-family: var(--glide-core-typography-family-primary);
       opacity: 0;
       padding: 0;
@@ -70,7 +72,9 @@ export default [
 
       &::backdrop {
         backdrop-filter: blur(3px);
-        background-color: rgba(0 0 0 / 40%);
+        background-color: var(
+          --glide-core-private-color-dialog-and-modal-surface-overlay
+        );
 
         @media (prefers-reduced-motion: no-preference) {
           animation: backdrop-fade-in 250ms;

package/dist/styles/variables.css

@@ -137,6 +137,7 @@
   --glide-core-color-effect-color-elevation-raised-1: #0000000d;
   --glide-core-color-effect-color-elevation-raised-2: #00000026;
   --glide-core-color-effect-color-elevation-floating: #00000040;
+  --glide-core-color-effect-color-elevation-dialog: #00000040;
   --glide-core-color-effect-color-elevation-detail-panel: #adadad;
   --glide-core-color-effect-color-scroll-shadow: #0000001a;
   --glide-core-color-effect-position-elevation-floating-y: 0.25rem;
@@ -149,6 +150,7 @@
   --glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;
   --glide-core-private-color-radio-icon-default--disabled: #d9d9d9;
   --glide-core-private-color-dialog-and-modal-surface-container: #ffffff;
+  --glide-core-private-color-dialog-and-modal-surface-overlay: #0000008c;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #0000000d;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #0000001a;
   --glide-core-private-color-slider-and-scrollbar-surface-handle: #f0f0f0;
@@ -296,6 +298,7 @@
   --glide-core-color-effect-color-elevation-raised-1: #ffffff00;
   --glide-core-color-effect-color-elevation-raised-2: #ffffff00;
   --glide-core-color-effect-color-elevation-floating: #14141459;
+  --glide-core-color-effect-color-elevation-dialog: #000000f2;
   --glide-core-color-effect-color-elevation-detail-panel: #000000f2;
   --glide-core-color-effect-color-scroll-shadow: #ffffff0d;
   --glide-core-color-effect-position-elevation-floating-y: 0.75rem;
@@ -308,6 +311,7 @@
   --glide-core-private-color-checkbox-icon-default--disabled: #434343;
   --glide-core-private-color-radio-icon-default--disabled: #434343;
   --glide-core-private-color-dialog-and-modal-surface-container: #292929;
+  --glide-core-private-color-dialog-and-modal-surface-overlay: #141414d9;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #ffffff0d;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #ffffff1a;
   --glide-core-private-color-slider-and-scrollbar-surface-handle: #2c2c2c;

package/dist/textarea.styles.js

@@ -58,7 +58,11 @@ export default [
       padding: var(--glide-core-spacing-base-xs)
         var(--glide-core-spacing-base-sm);
       resize: vertical;
-      transition: border-color 200ms ease-in-out;
+      transition:
+        border-color var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop),
+        box-shadow var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop);
 
       /*
         Because 'field-sizing: content' is used, it allows the
@@ -81,7 +85,22 @@ export default [
         outline: none;
       }
 
-      &:focus-visible,
+      &:focus-visible:not([readonly]) {
+        &:not(.error) {
+          border-color: var(--glide-core-color-interactive-stroke-focus);
+          box-shadow:
+            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
+            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+        }
+
+        &.error {
+          box-shadow:
+            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
+            1px 1px 4px -1px
+              var(--glide-core-color-advisory-stroke-error-primary);
+        }
+      }
+
       &:hover {
         border-color: var(--glide-core-color-interactive-stroke-primary--hover);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -29,6 +29,7 @@
     "!dist/eslint",
     "!dist/figma",
     "!dist/icons/storybook.*",
+    "!dist/playwright",
     "!dist/storybook",
     "!dist/stylelint",
     "!dist/ts-morph"
@@ -58,6 +59,7 @@
     "lit": "^3.2.1"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.2",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.10",
     "@custom-elements-manifest/analyzer": "^0.10.4",
@@ -65,21 +67,28 @@
     "@eslint/js": "^9.28.0",
     "@figma/rest-api-spec": "^0.32.0",
     "@html-eslint/eslint-plugin": "^0.41.0",
+    "@jridgewell/trace-mapping": "^0.3.29",
+    "@lit-labs/ssr": "^3.3.1",
     "@open-wc/testing": "^4.0.0",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.54.2",
     "@rollup/plugin-commonjs": "^28.0.2",
-    "@storybook/addon-actions": "^8.6.3",
-    "@storybook/addon-controls": "^8.6.3",
-    "@storybook/addon-docs": "^8.6.3",
-    "@storybook/addon-toolbars": "^8.6.3",
-    "@storybook/core-events": "^8.6.3",
-    "@storybook/manager-api": "^8.6.3",
-    "@storybook/preview-api": "^8.6.3",
-    "@storybook/theming": "^8.6.3",
-    "@storybook/web-components": "^8.6.3",
-    "@storybook/web-components-vite": "^8.6.3",
+    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-controls": "^8.6.14",
+    "@storybook/addon-docs": "^8.6.14",
+    "@storybook/addon-toolbars": "^8.6.14",
+    "@storybook/core-events": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/preview-api": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
+    "@storybook/types": "^8.6.14",
+    "@storybook/web-components": "^8.6.14",
+    "@storybook/web-components-vite": "^8.6.14",
     "@stylistic/eslint-plugin": "^2.13.0",
+    "@types/convert-source-map": "^2.0.3",
     "@types/eslint": "^8.56.12",
+    "@types/istanbul-lib-coverage": "^2.0.6",
+    "@types/istanbul-lib-report": "^3.0.3",
+    "@types/istanbul-reports": "^3.0.4",
     "@types/mocha": "^10.0.10",
     "@types/sinon": "^17.0.3",
     "@typescript-eslint/rule-tester": "^8.33.0",
@@ -92,6 +101,7 @@
     "@web/test-runner-playwright": "^0.11.0",
     "chokidar-cli": "^3.0.0",
     "comment-parser": "^1.4.1",
+    "convert-source-map": "^2.0.0",
     "custom-elements-manifest": "^2.1.0",
     "esbuild": "^0.25.0",
     "eslint": "^9.31.0",
@@ -99,20 +109,26 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
+    "eslint-plugin-playwright": "^2.2.2",
     "eslint-plugin-sort-class-members": "^1.21.0",
     "eslint-plugin-unicorn": "^60.0.0",
     "globals": "^15.13.0",
     "globby": "^14.0.2",
+    "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "is-ci": "^4.1.0",
+    "istanbul-lib-coverage": "^3.2.2",
+    "istanbul-lib-report": "^3.0.1",
+    "istanbul-reports": "^3.1.7",
     "lint-staged": "^15.2.11",
     "lit": "^3.3.0",
     "lit-analyzer": "^2.0.3",
+    "matcher": "^5.0.0",
     "minify-literals": "^1.0.10",
     "node-html-parser": "^7.0.1",
     "npm-run-all2": "^7.0.2",
     "per-env": "^1.0.2",
-    "playwright": "^1.52.0",
+    "playwright": "^1.54.2",
     "postcss": "^8.5.6",
     "postcss-lit": "^1.2.0",
     "prettier": "^3.5.3",
@@ -120,10 +136,10 @@
     "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
     "sinon": "^19.0.2",
-    "storybook": "^8.6.3",
+    "storybook": "^8.6.14",
     "stylelint": "^16.21.1",
     "stylelint-config-standard": "^36.0.1",
-    "stylelint-order": "^6.0.4",
+    "stylelint-order": "^7.0.0",
     "stylelint-prettier": "^5.0.2",
     "stylelint-use-logical": "^2.1.2",
     "stylelint-use-nesting": "^6.0.0",
@@ -132,8 +148,8 @@
     "tsx": "^4.19.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.33.0",
+    "v8-to-istanbul": "^9.3.0",
     "vite": "^6.3.2",
-    "vitest": "^3.0.8",
     "yocto-spinner": "^0.2.0"
   },
   "engines": {
@@ -150,7 +166,7 @@
     "start:development:ts-morph:comment:tsx": "Remove `tsx` once Node.js type stripping is available.",
     "start:production": "rimraf ./dist && pnpm start:production:cem-analyze && pnpm start:production:ts-morph && npm-run-all --aggregate-output --print-label --parallel start:production:typescript start:production:storybook start:production:esbuild",
     "start:production:esbuild": "node ./esbuild.js",
-    "start:production:cem-analyze": "tsc --noCheck --outDir ./dist && NODE_OPTIONS=--no-warnings=ExperimentalWarning cem analyze --config ./custom-elements.config.js --quiet && git diff --quiet -- || { echo ERROR: Uncommitted elements manifest changes. Run this command locally and commit the changes.; exit 1; }",
+    "start:production:cem-analyze": "tsc --noCheck --outDir ./dist && NODE_OPTIONS=--no-warnings=ExperimentalWarning cem analyze --config ./custom-elements.config.js --quiet && git diff --quiet ./custom-elements.json || { echo ERROR: Uncommitted elements manifest changes. Run this command locally and commit the changes.; exit 1; }",
     "start:production:figma:dev-resources": "tsx ./src/figma/dev-resources/run.ts",
     "start:production:figma:variables": "tsx ./src/figma/variables/run.ts",
     "start:production:storybook": "storybook build --config-dir .storybook --disable-telemetry --output-dir ./dist/storybook",
@@ -170,22 +186,19 @@
     "lint:production:stylelint": "tsc --noCheck --outDir ./dist && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --no-color",
     "test": "per-env",
     "test:development": "pnpm test:development:web-test-runner",
-    "test:development:playwright": "playwright test --quiet --ui-port 6007 --update-snapshots --update-source-method=overwrite",
-    "test:development:playwright:update": "rimraf ./src/aria-snapshots && playwright test --quiet --project aria --update-snapshots --update-source-method=overwrite --workers 100%",
-    "test:development:vitest": "vitest --config ./vitest.config.js & chokidar './src/eslint/**' './src/stylelint/**' --ignore './src/eslint/rules/*.test.ts' './src/stylelint/*.test.ts' --initial --silent --command 'tsc --noCheck --outDir ./dist'",
-    "test:development:vitest:comment": "Excluded from `test:development` because Vitest muddies the console when running alongside Web Test Runner.",
+    "test:development:playwright": "npm-run-all --parallel test:development:playwright:coverage test:development:playwright:ui",
+    "test:development:playwright:coverage": "http-server ./dist/playwright/coverage-report --port 6008 --silent",
+    "test:development:playwright:ui": "playwright test --config ./src/playwright/playwright.config.ts --ui-port 6007 --update-snapshots --update-source-method=overwrite",
+    "test:development:playwright:update": "PLAYWRIGHT_SKIP_COVERAGE=true playwright test --config ./src/playwright/playwright.config.ts --quiet --project accessibility --update-snapshots --update-source-method=overwrite --workers 100%",
     "test:development:web-test-runner": "web-test-runner --watch",
     "test:production": "pnpm start:production:esbuild && npm-run-all --aggregate-output --print-label --parallel test:production:*",
-    "test:production:playwright:aria": "playwright test --quiet --only-changed origin/main",
-    "test:production:playwright:visuals": "playwright test --ignore-snapshots --quiet --only-changed origin/main",
-    "test:production:playwright:visuals:comment": "Snapshots are ignored because this is meant to be only a quick smoke test telling us when we've written a test incorrectly.",
-    "test:production:vitest": "tsc --noCheck --outDir ./dist && vitest run --config ./vitest.config.js",
+    "test:production:playwright": "playwright test --config ./src/playwright/playwright.config.ts --grep 'is accessible|@eslint|@events|@forms|@keyboard|@miscellaneous|@mouse|@stylelint'",
+    "test:production:playwright:comment": "Used locally by developers and as a pre-push hook. Running every '@accessibility' test would take too long. So we only run the 'is accessible' test, which in many cases completes code coverage.",
     "test:production:web-test-runner": "web-test-runner",
     "typecheck": "per-env",
     "typecheck:development": "tsc --erasableSyntaxOnly --outDir ./dist -w",
     "typecheck:production": "tsc --erasableSyntaxOnly --outDir ./dist",
-    "postinstall": "is-ci || pnpm dlx playwright@1.52.0 install --only-shell --with-deps chromium",
-    "postinstall:comment": "Not installing Chromium in CI every time we run `pnpm install` speeds up builds at the cost of having to also update Playwright's version in our workflows whenever we update Playwright here.",
+    "postinstall": "is-ci || pnpm dlx playwright@1.54.2 install --no-shell --with-deps chromium firefox webkit",
     "release": "changeset publish"
   }
 }

package/dist/library/localize.test.d.ts

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

package/dist/library/localize.test.js

@@ -1,38 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import en from '../translations/en.js';
-import { LocalizeController } from './localize.js';
-let Component = class Component extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.localize = new LocalizeController(this);
-    }
-};
-Component = __decorate([
-    customElement('glide-core-component')
-], Component);
-it('can call any term from en translation if locale is Japanese', async () => {
-    const host = await fixture(html `<glide-core-component></glide-core-component>`);
-    host.lang = 'ja';
-    expect(host.localize.lang()).to.equal('ja');
-    const keys = Object.keys(en);
-    for (const key of keys) {
-        expect(host.localize.term(key)).to.be.ok;
-    }
-});
-it('can call any term from en translation if locale is French', async () => {
-    const host = await fixture(html `<glide-core-component></glide-core-component>`);
-    host.lang = 'fr';
-    expect(host.localize.lang()).to.equal('fr');
-    const keys = Object.keys(en);
-    for (const key of keys) {
-        expect(host.localize.term(key)).to.be.ok;
-    }
-});