@crowdstrike/glide-core 0.31.2 → 0.32.1

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 }));
                         }
                     });
@@ -140,7 +143,10 @@ let Accordion = class Accordion extends LitElement {
 
         <div class="label-container">
           <slot
-            class="prefix-icon-slot"
+            class=${classMap({
+            'prefix-icon-slot': true,
+            'slotted-content': this.hasPrefixIcon,
+        })}
             name="prefix-icon"
             @slotchange=${this.#onPrefixIconSlotChange}
             ${ref(this.#prefixIconSlotElementRef)}
@@ -199,14 +205,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/accordion.styles.js

@@ -94,6 +94,13 @@ export default [
       }
     }
 
+    .prefix-icon-slot {
+      &.slotted-content {
+        align-items: center;
+        display: flex;
+      }
+    }
+
     .suffix-icons-slot {
       align-items: center;
       color: var(--glide-core-color-interactive-icon-link);

package/dist/button.js

@@ -153,10 +153,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/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/library/request-idle-callback.d.ts

@@ -0,0 +1 @@
+export default function (): Promise<unknown>;

package/dist/library/request-idle-callback.js

@@ -0,0 +1,5 @@
+export default function () {
+    return new Promise((resolve) => {
+        requestIdleCallback(resolve);
+    });
+}

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
@@ -41,22 +42,41 @@ let Link = class Link extends LitElement {
         this.#componentElementRef.value?.click();
     }
     render() {
-        return html `<a
-      aria-disabled=${this.disabled}
-      class=${classMap({
-            component: true,
-            disabled: this.disabled,
-            href: Boolean(this.href),
-        })}
-      data-test="component"
-      download=${ifDefined(this.download)}
-      href=${ifDefined(this.href)}
-      target=${ifDefined(this.target)}
-      @click=${this.#onClick}
-      ${ref(this.#componentElementRef)}
-    >
-      ${this.label}
-    </a>`;
+        // Lit-a11y also wants a keyboard listener on anything with a "click" listener and
+        // doesn't account for `role="link"`.
+        //
+        /* eslint-disable lit-a11y/click-events-have-key-events */
+        return this.disabled
+            ? html `<span
+          aria-disabled="true"
+          class=${classMap({
+                component: true,
+                disabled: this.disabled,
+            })}
+          data-test="component"
+          role="link"
+          tabindex="0"
+          @click=${this.#onClick}
+          ${ref(this.#componentElementRef)}
+        >
+          ${this.label}
+        </span>`
+            : html `<a
+          class=${classMap({
+                component: true,
+                disabled: this.disabled,
+                href: Boolean(this.href),
+            })}
+          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)}
+        >
+          ${this.label}
+        </a>`;
     }
     #componentElementRef;
     #onClick(event) {
@@ -79,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/menu.d.ts

@@ -8,7 +8,7 @@ declare global {
  * @attr {boolean} [loading=false]
  * @attr {number} [offset=4]
  * @attr {boolean} [open=false]
- * @attr {'bottom'|'left'|'right'|'top'|'bottom-start'|'bottom-end'|'left-start'|'left-end'|'right-start'|'right-end'|'top-start'|'top-end'} [placement='bottom-start']
+ * @attr {'bottom'|'left'|'right'|'top'|'bottom-start'|'bottom-end'|'left-start'|'left-end'|'right-start'|'right-end'|'top-start'|'top-end'} [placement='bottom-start'] - Menu will try to move itself to the opposite of this value if not doing so would result in overflow. For example, if "bottom" results in overflow Menu will try "top" but not "right" or "left".
  *
  * @readonly
  * @attr {string} [version]
@@ -37,6 +37,10 @@ export default class Menu extends LitElement {
      */
     get open(): boolean;
     set open(isOpen: boolean);
+    /**
+     * Menu will try to move itself to the opposite of this value if not doing so would result in overflow.
+     * For example, if "bottom" results in overflow Menu will try "top" but not "right" or "left".
+     */
     placement: 'bottom' | 'left' | 'right' | 'top' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top-start' | 'top-end';
     privateOpenedViaKeyboard: boolean;
     readonly version: string;

package/dist/menu.js

@@ -25,7 +25,7 @@ import uniqueId from './library/unique-id.js';
  * @attr {boolean} [loading=false]
  * @attr {number} [offset=4]
  * @attr {boolean} [open=false]
- * @attr {'bottom'|'left'|'right'|'top'|'bottom-start'|'bottom-end'|'left-start'|'left-end'|'right-start'|'right-end'|'top-start'|'top-end'} [placement='bottom-start']
+ * @attr {'bottom'|'left'|'right'|'top'|'bottom-start'|'bottom-end'|'left-start'|'left-end'|'right-start'|'right-end'|'top-start'|'top-end'} [placement='bottom-start'] - Menu will try to move itself to the opposite of this value if not doing so would result in overflow. For example, if "bottom" results in overflow Menu will try "top" but not "right" or "left".
  *
  * @readonly
  * @attr {string} [version]
@@ -38,6 +38,10 @@ import uniqueId from './library/unique-id.js';
 let Menu = class Menu extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * Menu will try to move itself to the opposite of this value if not doing so would result in overflow.
+         * For example, if "bottom" results in overflow Menu will try "top" but not "right" or "left".
+         */
         this.placement = 'bottom-start';
         // Used in `#show()` to open the active Option's tooltip when Menu is opened via
         // keyboard. Unlike mouse users, keyboard users can't hover an Option to reveal
@@ -55,7 +59,7 @@ let Menu = class Menu extends LitElement {
         // `#onComponentFocusOut()` to decide if Menu should close. Also used in
         // `#onTargetAndDefaultSlotKeyDown()` to decide if we need to move focus.
         this.#hasVoiceOverMovedFocusToOptionsOrAnOption = false;
-        // Set in `#onDefaultSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
+        // Set in `#onDefaultSlotClick()`. Used in `#onDocumentClick()` to guard against
         // Menu closing when any number of things that are not an Option are clicked. Those
         // "click" events will be retargeted to Menu's host the moment they bubble out of
         // Menu. So checking in `#onDocumentClick()` if the click's `event.target` came
@@ -224,7 +228,7 @@ let Menu = class Menu extends LitElement {
             }
         }
         if (this.#defaultSlotElementRef.value) {
-            // `popover` so Options can break out of Modal or another container that has
+            // `popover` so Options can break out of Modal or another element that has
             // `overflow: hidden`. Elements with `popover` are positioned relative to the
             // viewport. Thus Floating UI in addition to `popover` until anchor positioning is
             // well supported.
@@ -294,7 +298,6 @@ let Menu = class Menu extends LitElement {
           @keydown=${this.#onTargetAndDefaultSlotKeyDown}
           @mousedown=${this.#onDefaultSlotMouseDown}
           @mouseover=${this.#onDefaultSlotMouseOver}
-          @mouseup=${this.#onDefaultSlotMouseUp}
           @private-disabled-change=${this.#onDefaultSlotDisabledChange}
           @private-slot-change=${this.#onDefaultSlotSlotChange}
           @toggle=${this.#onDefaultSlotToggle}
@@ -316,7 +319,7 @@ let Menu = class Menu extends LitElement {
     // `#onComponentFocusOut()` to decide if Menu should close. Also used in
     // `#onTargetAndDefaultSlotKeyDown()` to decide if we need to move focus.
     #hasVoiceOverMovedFocusToOptionsOrAnOption;
-    // Set in `#onDefaultSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
+    // Set in `#onDefaultSlotClick()`. Used in `#onDocumentClick()` to guard against
     // Menu closing when any number of things that are not an Option are clicked. Those
     // "click" events will be retargeted to Menu's host the moment they bubble out of
     // Menu. So checking in `#onDocumentClick()` if the click's `event.target` came
@@ -494,6 +497,7 @@ let Menu = class Menu extends LitElement {
         }
     }
     #onDefaultSlotClick(event) {
+        this.#isDefaultSlotClick = true;
         // When the padding or border on the default slot of a sub-Menu is clicked, the
         // event will be retargeted by the browser to the sub-Menu's parent Option.
         //
@@ -607,9 +611,6 @@ let Menu = class Menu extends LitElement {
             event.preventDefault();
         }
     }
-    #onDefaultSlotMouseUp() {
-        this.#isDefaultSlotClick = true;
-    }
     #onDefaultSlotSlotChange() {
         const wasActiveOptionRemoved = this.#optionElements?.every((option) => option !== this.#activeOption);
         if (wasActiveOptionRemoved &&
@@ -1146,6 +1147,60 @@ let Menu = class Menu extends LitElement {
     }
     #show() {
         this.#cleanUpFloatingUi?.();
+        // Ideally, we wouldn't show the popover until after Floating UI has calculated its
+        // position. But calling `showPopover()` changes the nature of how `top` and `left`
+        // affect an element's position when the element's containing block is something
+        // other than the document.
+        //
+        // Unlike non-popovers, popovers break out of containing blocks¹. So `top` and
+        // `left` are always relative to the document. For non-popovers, however, `top`
+        // and `left` are relative to the element's containing block.
+        //
+        // Imagine that Menu has a parent with `transform: scale(1)` and we let Floating UI
+        // calculate the default slot's position before calling `showPopover()`. Floating
+        // UI will correctly position the default slot relative to that parent. But, after
+        // `showPopover()` is called, Floating UI will recalculate the default slot's
+        // position and position it relative to the document.
+        //
+        // The problem is, during the time between when `showPopover()` is called and
+        // Floating UI does its recalculation, the default slot will have a `top` and
+        // `left` that were correct when it was positioned relative to its containing
+        // block, but are now incorrect. So the default slot will, for a moment, be
+        // positioned above or below where it should be.
+        //
+        // The recalculation and subsequent repositioning will happen so quickly that the
+        // user won't see it. But, if the user's mouse happens to be on top of the default
+        // slot while it's positioned incorrectly, then `#onDefaultSlotMouseOver()` will
+        // be called and whatever Option the user's mouse is on will be activated. Floating
+        // UI will finish its work, then default slot will become visible. But the wrong
+        // Option will be active when Menu finally appears open.
+        //
+        // To reproduce the issue:
+        //
+        // 1. Move the `showPopover()` call below inside `computePosition().then()`.
+        // 2. Go to Menu's Overview page in Storybook.
+        // 3. Place your mouse just above Menu's target.
+        // 4. Tab to Menu's target.
+        // 5. Press Space to open Menu.
+        //
+        // Note how the second or third Option is active instead of the first.
+        //
+        // I've omitted a test for this because calling `sendKey({ press: 'Tab' })`
+        // followed by `sendKey({ press: ' ' })`, after moving the mouse above Menu's
+        // target, introduces just enough of a delay for Floating UI to complete its
+        // recalculation, making the issue impossible to reproduce in a test.
+        //
+        // 1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block
+        this.#defaultSlotElementRef.value?.showPopover();
+        if (this.#isSubMenu && this.#parentOption) {
+            this.#parentOption.ariaExpanded = 'true';
+        }
+        else if (!this.#isSubMenu && this.#targetElement) {
+            this.#targetElement.ariaExpanded = 'true';
+        }
+        if (this.#optionsElement && this.#activeOption?.id) {
+            this.#optionsElement.ariaActivedescendant = this.#activeOption.id;
+        }
         if (this.#previouslyActiveOption &&
             !this.#previouslyActiveOption.disabled &&
             this.#optionsElement) {
@@ -1178,17 +1233,6 @@ let Menu = class Menu extends LitElement {
                                 left: `${x}px`,
                                 top: `${y}px`,
                             });
-                            if (this.#isSubMenu && this.#parentOption) {
-                                this.#parentOption.ariaExpanded = 'true';
-                            }
-                            else if (!this.#isSubMenu && this.#targetElement) {
-                                this.#targetElement.ariaExpanded = 'true';
-                            }
-                            this.#defaultSlotElementRef.value.showPopover();
-                        }
-                        if (this.#optionsElement && this.#activeOption?.id) {
-                            this.#optionsElement.ariaActivedescendant =
-                                this.#activeOption.id;
                         }
                     });
                 }

package/dist/menu.styles.js

@@ -35,7 +35,6 @@ export default [
       padding-block-end: 0;
       padding-block-start: var(--glide-core-spacing-base-xxxs);
       padding-inline: var(--glide-core-spacing-base-xxxs);
-      position: absolute;
 
       /*
         This little hack replaces "padding-block-end", which the last option overlaps

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/popover.d.ts

@@ -8,13 +8,13 @@ declare global {
  * @attr {boolean} [disabled=false]
  * @attr {number} [offset=4]
  * @attr {boolean} [open=false]
- * @attr {'bottom'|'left'|'right'|'top'} [placement]
+ * @attr {'bottom'|'left'|'right'|'top'} [placement] - Popover will try to move itself to the opposite of this value if not doing so would result in overflow. For example, if "bottom" results in overflow Popover will try "top" but not "right" or "left".
  *
  * @readonly
  * @attr {string} [version]
  *
  * @slot {Element | string} - The content of the popover
- * @slot {Element} [target] - The element to which the popover will anchor. Can be any focusable element.
+ * @slot {Element} [target] - The element to which Popover will anchor. Can be any focusable element.
  *
  * @fires {Event} toggle
  */
@@ -37,6 +37,10 @@ export default class Popover extends LitElement {
      */
     get open(): boolean;
     set open(isOpen: boolean);
+    /**
+     * Popover will try to move itself to the opposite of this value if not doing so would result in overflow.
+     * For example, if "bottom" results in overflow Popover will try "top" but not "right" or "left".
+     */
     placement?: 'bottom' | 'left' | 'right' | 'top';
     readonly version: string;
     connectedCallback(): void;

package/dist/popover.js

@@ -19,13 +19,13 @@ import final from './library/final.js';
  * @attr {boolean} [disabled=false]
  * @attr {number} [offset=4]
  * @attr {boolean} [open=false]
- * @attr {'bottom'|'left'|'right'|'top'} [placement]
+ * @attr {'bottom'|'left'|'right'|'top'} [placement] - Popover will try to move itself to the opposite of this value if not doing so would result in overflow. For example, if "bottom" results in overflow Popover will try "top" but not "right" or "left".
  *
  * @readonly
  * @attr {string} [version]
  *
  * @slot {Element | string} - The content of the popover
- * @slot {Element} [target] - The element to which the popover will anchor. Can be any focusable element.
+ * @slot {Element} [target] - The element to which Popover will anchor. Can be any focusable element.
  *
  * @fires {Event} toggle
  */
@@ -36,19 +36,26 @@ let Popover = class Popover extends LitElement {
         this.effectivePlacement = this.placement ?? 'bottom';
         this.#arrowElementRef = createRef();
         this.#defaultSlotElementRef = createRef();
+        // Set in `#onArrowClick()`. Used in `#onDocumentClick()` to guard against closing
+        // Popover when the user accidentally clicks the arrow.
         this.#isArrowClick = false;
+        // Set in `#onDefaultSlotClick()`. Used in `#onDocumentClick()` to guard against
+        // closing Popover when the user interacts with its default slot.
         this.#isDefaultSlotClick = false;
         this.#isDisabled = false;
         this.#isOpen = false;
+        // Set in `#onTargetSlotClick()`. Used in `#onDocumentClick()` to guard against
+        // immediately closing Popover when it's opened via `onTargetSlotClick()`.
         this.#isTargetSlotClick = false;
         this.#popoverElementRef = createRef();
         this.#targetSlotElementRef = createRef();
         // An arrow function field instead of a method so `this` is closed over and
         // set to the component instead of `document`.
         this.#onDocumentClick = () => {
-            // Checking that the click's `event.target` is equal to
-            // `#defaultSlotElementRef.value` would be a lot simpler. But, when the target is
-            // inside of another web component, `event.target` will be that component instead.
+            // Checking that `event.target` is equal to `this.#defaultSlotElementRef.value`
+            // would be simpler. But, when the default slot is inside of another web component,
+            // `event.target` will be that component instead.
+            //
             // Same for `this.#isTargetSlotClick` and `this.#isArrowClick`.
             if (this.#isDefaultSlotClick ||
                 this.#isTargetSlotClick ||
@@ -122,65 +129,34 @@ let Popover = class Popover extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        // 1. The consumer has a click handler on a button.
-        // 2. The user clicks the button.
-        // 3. The button's click handler is called and it sets `this.open` to `true`.
-        // 4. The "click" event bubbles up and is handled by `#onDocumentClick`.
-        // 5. That handler sets `open` to `false` because the click came from outside
-        //    Popover.
-        // 6. Popover is opened then closed in the same frame and so never opens.
-        //
-        // `capture` ensures `#onDocumentClick` is called before #3, so the button click
-        // handler setting `open` to `true` isn't overwritten by this handler setting
-        // `open` to `false`.
-        document.addEventListener('click', this.#onDocumentClick, {
-            capture: true,
-        });
+        document.addEventListener('click', this.#onDocumentClick);
     }
     firstUpdated() {
         if (this.#popoverElementRef.value) {
-            // `popover` is used so the popover can break out of Modal or another container
-            // that has `overflow: hidden`. And elements with `popover` are positioned
-            // relative to the viewport. Thus Floating UI in addition to `popover`.
+            // `popover` so Popover can break out of Modal or another element that has
+            // `overflow: hidden`. Elements with `popover` are positioned relative to the
+            // viewport. Thus Floating UI in addition to `popover` until anchor positioning is
+            // well supported.
             //
-            // Set here instead of in the template to escape Lit Analyzer, which isn't aware
-            // of `popover` and doesn't have a way to disable its "no-unknown-attribute" rule.
+            // "manual" is set here instead of in the template to circumvent Lit Analyzer,
+            // which isn't aware of `popover` and doesn't provide a way to disable its
+            // "no-unknown-attribute" rule.
             //
-            // "auto" means only one popover can be open at a time. Consumers, however, may
-            // have popovers in own components that need to be open while this one is open.
-            //
-            // "auto" also automatically opens the popover when its target is clicked. We want
-            // it to remain closed when clicked when there are no menu options.
+            // "manual" instead of "auto" because the latter only allows one popover to be open
+            // at a time. And consumers may have other popovers that need to remain open while
+            // this popover is open.
             this.#popoverElementRef.value.popover = 'manual';
         }
         if (this.open && !this.disabled) {
             this.#show();
         }
-        // Popover's "click" handler on `document` listens for clicks in the capture
-        // phase. There's a comment explaining why. `#isDefaultSlotclick` must be
-        // set before that handler is called so it has the information it needs
-        // to determine whether or not to close Popover. Same for `#isTargetSlotClick`
-        // and `#isArrowClick`.
-        this.#defaultSlotElementRef.value?.addEventListener('mouseup', () => {
-            this.#isDefaultSlotClick = true;
-        });
-        this.#targetSlotElementRef.value?.addEventListener('mouseup', () => {
-            this.#isTargetSlotClick = true;
-        });
-        this.#arrowElementRef.value?.addEventListener('mouseup', () => {
-            this.#isArrowClick = true;
-        });
-        this.#targetSlotElementRef.value?.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                this.#isTargetSlotClick = true;
-            }
-        });
     }
     render() {
-        // Lit-a11y calls for "blur" and "focus" handlers but doesn't account for "focusin"
-        // and "focusout". It also calls for popovers to have an `aria-label`, but then
-        // VoiceOver, at least, won't read the popover's content. So an element with an
-        // `aria-label` is placed inside the popover.
+        // Lit-a11y also wants a keyboard listener on anything with a "click" listener. The
+        // "click" listeners on the arrow and default slot, however, are for a specific
+        // purpose that Lit-a11y isn't aware of.
+        //
+        /* eslint-disable lit-a11y/click-events-have-key-events */
         return html `
       <div class="component">
         <slot
@@ -193,7 +169,7 @@ let Popover = class Popover extends LitElement {
           ${ref(this.#targetSlotElementRef)}
         >
           <!--
-            The element to which the popover will anchor. Can be any focusable element.
+            The element to which Popover will anchor. Can be any focusable element.
             @type {Element}
           -->
         </slot>
@@ -213,6 +189,7 @@ let Popover = class Popover extends LitElement {
             [this.effectivePlacement]: true,
         })}
             data-test="arrow"
+            @click=${this.#onArrowClick}
             ${ref(this.#arrowElementRef)}
           >
             ${choose(this.effectivePlacement, [
@@ -225,6 +202,7 @@ let Popover = class Popover extends LitElement {
 
           <slot
             class="default-slot"
+            @click=${this.#onDefaultSlotClick}
             ${assertSlot()}
             ${ref(this.#defaultSlotElementRef)}
           >
@@ -240,10 +218,16 @@ let Popover = class Popover extends LitElement {
     #arrowElementRef;
     #cleanUpFloatingUi;
     #defaultSlotElementRef;
+    // Set in `#onArrowClick()`. Used in `#onDocumentClick()` to guard against closing
+    // Popover when the user accidentally clicks the arrow.
     #isArrowClick;
+    // Set in `#onDefaultSlotClick()`. Used in `#onDocumentClick()` to guard against
+    // closing Popover when the user interacts with its default slot.
     #isDefaultSlotClick;
     #isDisabled;
     #isOpen;
+    // Set in `#onTargetSlotClick()`. Used in `#onDocumentClick()` to guard against
+    // immediately closing Popover when it's opened via `onTargetSlotClick()`.
     #isTargetSlotClick;
     #offset;
     #popoverElementRef;
@@ -258,14 +242,31 @@ let Popover = class Popover extends LitElement {
         }
         this.#cleanUpFloatingUi?.();
     }
-    #onTargetSlotClick() {
-        this.open = !this.open;
+    #onArrowClick() {
+        this.#isArrowClick = true;
+    }
+    #onDefaultSlotClick() {
+        this.#isDefaultSlotClick = true;
+    }
+    #onTargetSlotClick(event) {
+        this.#isTargetSlotClick = true;
+        // The timeout gives consumers a chance to cancel the event to prevent Popover
+        // from opening or closing.
+        setTimeout(() => {
+            if (!event.defaultPrevented) {
+                this.open = !this.open;
+            }
+        });
     }
     #onTargetSlotKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            this.#isTargetSlotClick = true;
+            return;
+        }
         if (event.key === 'Escape') {
-            // Prevent Safari from leaving full screen.
-            event.preventDefault();
+            event.preventDefault(); // Prevent Safari from leaving full screen.
             this.open = false;
+            return;
         }
     }
     get #targetElement() {

package/dist/slider.js

@@ -345,6 +345,7 @@ let Slider = class Slider extends LitElement {
         // input elements directly or via the handles. Exposing the
         // track via keyboard wouldn't bring any real value in this
         // instance.
+        //
         /*  eslint-disable lit-a11y/click-events-have-key-events */
         return html `
       <glide-core-private-label

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/dist/tooltip.d.ts

@@ -11,7 +11,7 @@ declare global {
  * @attr {boolean} [disabled=false]
  * @attr {number} [offset=4]
  * @attr {boolean} [open=false]
- * @attr {'bottom'|'left'|'right'|'top'} [placement] - The placement of the tooltip relative to its target. Automatic placement will take over if the tooltip is cut off by the viewport.
+ * @attr {'bottom'|'left'|'right'|'top'} [placement] - Tooltip will try to move itself to the opposite of this value if not doing so would result in overflow. For example, if "bottom" results in overflow Tooltip will try "top" but not "right" or "left".
  * @attr {boolean} [screenreader-hidden=false]
  * @attr {string[]} [shortcut=[]]
  *
@@ -19,7 +19,7 @@ declare global {
  * @attr {string} [version]
  *
  * @slot {TooltipContainer} [private]
- * @slot {Element} target - The element to which the tooltip will anchor. Can be any element with an implicit or explicit ARIA role.
+ * @slot {Element} target - The element to which Tooltip will anchor. Can be any interactive element with an implicit or explicit ARIA role.
  *
  * @fires {Event} toggle
  */
@@ -56,8 +56,8 @@ export default class Tooltip extends LitElement {
      */
     set open(isOpen: boolean);
     /**
-     * The placement of the tooltip relative to its target. Automatic placement will
-     * take over if the tooltip is cut off by the viewport.
+     * Tooltip will try to move itself to the opposite of this value if not doing so would result in overflow.
+     * For example, if "bottom" results in overflow Tooltip will try "top" but not "right" or "left".
      */
     placement?: 'bottom' | 'left' | 'right' | 'top';
     /**

package/dist/tooltip.js

@@ -23,7 +23,7 @@ import required from './library/required.js';
  * @attr {boolean} [disabled=false]
  * @attr {number} [offset=4]
  * @attr {boolean} [open=false]
- * @attr {'bottom'|'left'|'right'|'top'} [placement] - The placement of the tooltip relative to its target. Automatic placement will take over if the tooltip is cut off by the viewport.
+ * @attr {'bottom'|'left'|'right'|'top'} [placement] - Tooltip will try to move itself to the opposite of this value if not doing so would result in overflow. For example, if "bottom" results in overflow Tooltip will try "top" but not "right" or "left".
  * @attr {boolean} [screenreader-hidden=false]
  * @attr {string[]} [shortcut=[]]
  *
@@ -31,7 +31,7 @@ import required from './library/required.js';
  * @attr {string} [version]
  *
  * @slot {TooltipContainer} [private]
- * @slot {Element} target - The element to which the tooltip will anchor. Can be any element with an implicit or explicit ARIA role.
+ * @slot {Element} target - The element to which Tooltip will anchor. Can be any interactive element with an implicit or explicit ARIA role.
  *
  * @fires {Event} toggle
  */
@@ -179,18 +179,18 @@ let Tooltip = class Tooltip extends LitElement {
     }
     firstUpdated() {
         if (this.#tooltipElementRef.value) {
-            // `popover` is used so the tooltip can break out of Modal or another container
-            // that has `overflow: hidden`. And elements with `popover` are positioned
-            // relative to the viewport. Thus Floating UI in addition to `popover`.
+            // `popover` so Tooltip can break out of Modal or another element that has
+            // `overflow: hidden`. Elements with `popover` are positioned relative to the
+            // viewport. Thus Floating UI in addition to `popover` until anchor positioning is
+            // well supported.
             //
-            // Set here instead of in the template to escape Lit Analyzer, which isn't aware
-            // of `popover` and doesn't have a way to disable its "no-unknown-attribute" rule.
+            // "manual" is set here instead of in the template to circumvent Lit Analyzer,
+            // which isn't aware of `popover` and doesn't provide a way to disable its
+            // "no-unknown-attribute" rule.
             //
-            // "auto" means only one popover can be open at a time. Consumers, however, may
-            // have popovers in own components that need to be open while this one is open.
-            //
-            // "auto" also automatically opens the popover when its target is clicked. We
-            // only want it to open on hover or focus.
+            // "manual" instead of "auto" because the latter only allows one popover to be open
+            // at a time. And consumers may have other popovers that need to remain open while
+            // this popover is open.
             this.#tooltipElementRef.value.popover = 'manual';
         }
         if (this.open && !this.disabled) {
@@ -229,8 +229,8 @@ let Tooltip = class Tooltip extends LitElement {
             ${ref(this.#targetSlotElementRef)}
           >
             <!--
-              The element to which the tooltip will anchor.
-              Can be any element with an implicit or explicit ARIA role.
+              The element to which Tooltip will anchor.
+              Can be any interactive element with an implicit or explicit ARIA role.
 
               @required
               @type {Element}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.31.2",
+  "version": "0.32.1",
   "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"
   }
 }