@crowdstrike/glide-core 0.31.1 → 0.32.0

package/dist/accordion.js

@@ -140,7 +140,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)}

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/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.js

@@ -41,22 +41,40 @@ 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)}
+          target=${ifDefined(this.target)}
+          @click=${this.#onClick}
+          ${ref(this.#componentElementRef)}
+        >
+          ${this.label}
+        </a>`;
     }
     #componentElementRef;
     #onClick(event) {

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.
         //
@@ -571,62 +575,41 @@ let Menu = class Menu extends LitElement {
         event.preventDefault();
     }
     #onDefaultSlotMouseOver(event) {
-        // Chrome has this funky Popover API bug where the popover is, for about 10
-        // milliseconds, rendered above where it's supposed to be whenever `showPopover()`
-        // is called.
-        //
-        // It's not clear if the popover is invisible during that time, or if it's visible
-        // and 10 milliseconds isn't enough to be noticable. Either way, it's effectively
-        // invisible but still picks up "mouseover" events.
-        //
-        // If the user's mouse happens to be over one of the Option(s) that's inside our
-        // invisible, mispositioned popover, then the Option is activated. Thus this
-        // variable and the guard below it.
-        //
-        // There's no mention of the above issue in it. But this bug is probably a good one
-        // to keep an eye on: https://issues.chromium.org/issues/364669918.
-        const isOutOfBounds = this.#componentElementRef.value &&
-            event.y < this.#componentElementRef.value.getBoundingClientRect().y;
-        if (!isOutOfBounds) {
-            const option = event.target instanceof Element &&
-                event.target.closest('glide-core-option');
-            const isSubMenuTarget = event.target instanceof Element &&
-                event.target.closest('[slot="target"]');
-            const isOwnOption = option && this.#optionElements?.includes(option);
-            // This handler is also called when a sub-Menu Option is hovered because sub-Menu
-            // Option(s) are children of their super-Menu's default slot. And hovering a
-            // sub-Menu Option shouldn't deactivate the super-Menu's active Option. Thus
-            // `isOwnOption`.
-            if (isOwnOption && !isSubMenuTarget && !option.disabled) {
-                this.#previouslyActiveOption = this.#activeOption;
-                if (this.#activeOption) {
-                    this.#activeOption.privateActive = false;
-                }
-                option.privateActive = true;
-                if (this.#optionsElement) {
-                    this.#optionsElement.ariaActivedescendant = event.target.id;
-                }
-            }
-            if (this.#isSubMenu) {
-                // Allowing the event to propagate from a sub-Menu's parent Option means it would
-                // get picked up by the super-Menu Option's Tooltip "mouseover" handler. Then it
-                // would open the super-Menu's tooltip.
-                event.stopPropagation();
+        const option = event.target instanceof Element &&
+            event.target.closest('glide-core-option');
+        const isSubMenuTarget = event.target instanceof Element &&
+            event.target.closest('[slot="target"]');
+        const isOwnOption = option && this.#optionElements?.includes(option);
+        // This handler is also called when a sub-Menu Option is hovered because sub-Menu
+        // Option(s) are children of their super-Menu's default slot. And hovering a
+        // sub-Menu Option shouldn't deactivate the super-Menu's active Option. Thus
+        // `isOwnOption`.
+        if (isOwnOption && !isSubMenuTarget && !option.disabled) {
+            this.#previouslyActiveOption = this.#activeOption;
+            if (this.#activeOption) {
+                this.#activeOption.privateActive = false;
             }
-            if (isSubMenuTarget && this.#activeOption) {
-                // When the cursor is already inside an Option and the user mouses to the Option's
-                // sub-Menu target, the browser will dispatch "mouseout" followed by "mouseover".
-                //
-                // The Option's tooltip will pick up both events and will remain open because the
-                // tooltip will be closed then immediately reopened. But we want the tooltip to
-                // close when a sub-Menu target is hovered. Canceling the event stops the tooltip
-                // from reopening.
-                event.preventDefault();
+            option.privateActive = true;
+            if (this.#optionsElement) {
+                this.#optionsElement.ariaActivedescendant = event.target.id;
             }
         }
-    }
-    #onDefaultSlotMouseUp() {
-        this.#isDefaultSlotClick = true;
+        if (this.#isSubMenu) {
+            // Allowing the event to propagate from a sub-Menu's parent Option means it would
+            // get picked up by the super-Menu Option's Tooltip "mouseover" handler. Then it
+            // would open the super-Menu's tooltip.
+            event.stopPropagation();
+        }
+        if (isSubMenuTarget && this.#activeOption) {
+            // When the cursor is already inside an Option and the user mouses to the Option's
+            // sub-Menu target, the browser will dispatch "mouseout" followed by "mouseover".
+            //
+            // The Option's tooltip will pick up both events and will remain open because the
+            // tooltip will be closed then immediately reopened. But we want the tooltip to
+            // close when a sub-Menu target is hovered. Canceling the event stops the tooltip
+            // from reopening.
+            event.preventDefault();
+        }
     }
     #onDefaultSlotSlotChange() {
         const wasActiveOptionRemoved = this.#optionElements?.every((option) => option !== this.#activeOption);
@@ -1164,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) {
@@ -1196,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/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/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.1",
+  "version": "0.32.0",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",