@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/tooltip.container.js

@@ -1 +1,130 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import{when}from"lit/directives/when.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import uniqueId from"./library/unique-id.js";let TooltipContainer=class TooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#t=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.role=t||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=uniqueId(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0})}"><div class="label-and-shortcut"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((t,e)=>html`<kbd>${t}</kbd> ${e===this.shortcut.length-1?"":" + "}`))}</kbd></div>${when(this.description,(()=>html`<div class="description">${this.description}</div>`))}</div>`}#t};__decorate([property({reflect:!0})],TooltipContainer.prototype,"description",void 0),__decorate([property({type:Boolean})],TooltipContainer.prototype,"disabled",null),__decorate([property()],TooltipContainer.prototype,"label",void 0),__decorate([property()],TooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],TooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],TooltipContainer.prototype,"shortcut",void 0),TooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],TooltipContainer);export default TooltipContainer;
+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 { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+import styles from './tooltip.container.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import uniqueId from './library/unique-id.js';
+// This component exists because Tooltip's target and its tooltip both need to
+// be in the light DOM so the `aria-describedby` on its target can be associated
+// with the ID it references. Tooltip adds this element to its light DOM and then
+// associates it with its target.
+//
+// One alternative solution is to ask consumers to add this component to Tooltip's
+// default slot. But that would be additional work for them and would be a less
+// natural API because consumers would pass `label`, `shortcut`, and other
+// attributes to Tooltip Container instead of Tooltip.
+//
+// Another is to require that consumers always wrap their default slot content
+// in an element, such as `<div>`. But an apparently stray `<div>` in our Storybook
+// code example would beget questions or may be removed by the consumer after
+// copying the code, resulting in an error from Tooltip and frustration.
+//
+// The latter solution would also prevent us from restricting allowed content by
+// using an attribute (`label`). We'd be forced to allow arbitrary content via a
+// slot.
+/**
+ * @attr {string} [description]
+ * @attr {boolean} [disabled=false]
+ * @attr {string} [label]
+ * @attr {'bottom'|'left'|'right'|'top'} [placement]
+ * @attr {boolean} [screenreader-hidden=false]
+ * @attr {string[]} [shortcut=[]]
+ */
+let TooltipContainer = class TooltipContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.screenreaderHidden = false;
+        this.shortcut = [];
+        this.#isDisabled = false;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get disabled() {
+        return this.#isDisabled;
+    }
+    set disabled(isDisabled) {
+        this.#isDisabled = isDisabled;
+        this.role = isDisabled || this.screenreaderHidden ? 'none' : 'tooltip';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id = uniqueId();
+        this.role = this.role =
+            this.disabled || this.screenreaderHidden ? 'none' : 'tooltip';
+        this.slot = 'private';
+    }
+    render() {
+        return html `
+      <div
+        aria-hidden=${this.screenreaderHidden}
+        class=${classMap({
+            component: true,
+        })}
+      >
+        <div class="label-and-shortcut">
+          <div class="label">${this.label}</div>
+
+          <kbd
+            class=${classMap({
+            shortcut: true,
+            visible: this.shortcut.length > 0,
+        })}
+            data-test="shortcut"
+          >
+            ${this.shortcut.length === 1
+            ? this.shortcut.at(0)
+            : map(this.shortcut, (shortcut, index) => {
+                return html `
+                    <kbd>${shortcut}</kbd>
+                    ${index === this.shortcut.length - 1 ? '' : ' + '}
+                  `;
+            })}
+          </kbd>
+        </div>
+
+        ${when(this.description, () => {
+            return html `<div class="description">${this.description}</div>`;
+        })}
+      </div>
+    `;
+    }
+    #isDisabled;
+};
+__decorate([
+    property({ reflect: true })
+], TooltipContainer.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], TooltipContainer.prototype, "disabled", null);
+__decorate([
+    property()
+], TooltipContainer.prototype, "label", void 0);
+__decorate([
+    property()
+], TooltipContainer.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: 'screenreader-hidden', type: Boolean })
+], TooltipContainer.prototype, "screenreaderHidden", void 0);
+__decorate([
+    property({ type: Array })
+], TooltipContainer.prototype, "shortcut", void 0);
+TooltipContainer = __decorate([
+    customElement('glide-core-private-tooltip-container'),
+    final
+], TooltipContainer);
+export default TooltipContainer;

package/dist/tooltip.container.styles.js

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     .component {
       background-color: var(
         --glide-core-private-color-tooltip-surface-container
@@ -48,4 +50,5 @@ import{css}from"lit";export default[css`
     kbd {
       font-family: var(--glide-core-typography-family-primary);
     }
-  `];
+  `,
+];

package/dist/tooltip.js

@@ -1 +1,484 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Tooltip=class Tooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#s=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#a}set label(e){this.#a=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get description(){return this.#n}set description(e){this.#n=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.description=e)}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#c():this.#d();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get offset(){return this.#p??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#p=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#c(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#h),clearTimeout(this.#m)}firstUpdated(){this.#l.value&&(this.#l.value.popover="manual"),this.open&&!this.disabled&&this.#c();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.description=this.description,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#u}" @mouseout="${this.#f}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#v}" @focusout="${this.#g}" @keydown="${this.#y}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#s)}></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#l)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#w;#h;#n;#t;#o;#i;#a;#p;#m;#r;#s;#l;#E(){clearTimeout(this.#h)}#d(){this.#l.value?.hidePopover(),this.#w?.()}#f(){this.#R(),clearTimeout(this.#m)}#u(){this.#E(),this.#m=setTimeout((()=>{this.open=!0}),Number(this.#l.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#s.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#v(){this.open=!0}#g(){this.open=!1}#y(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#R(){this.#h=setTimeout((()=>{this.open=!1}),Number(this.#l.value?.dataset.closeDelay))}#c(){this.disabled||(this.#w?.(),this.#s.value&&this.#l.value&&(this.#w=autoUpdate(this.#s.value,this.#l.value,(()=>{(async()=>{if(this.#s.value&&this.#l.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#s.value,this.#l.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#l.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#l.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0}),required],Tooltip.prototype,"label",null),__decorate([property({reflect:!0})],Tooltip.prototype,"description",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],Tooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"open",null),__decorate([property({reflect:!0})],Tooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],Tooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],Tooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],Tooltip.prototype,"version",void 0),__decorate([state()],Tooltip.prototype,"effectivePlacement",void 0),Tooltip=__decorate([customElement("glide-core-tooltip"),final],Tooltip);export default Tooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
+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 { html, LitElement } from 'lit';
+import { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, } from '@floating-ui/dom';
+import { choose } from 'lit/directives/choose.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './tooltip.styles.js';
+import './tooltip.container.js';
+import assertSlot from './library/assert-slot.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {string} [description]
+ * @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 {boolean} [screenreader-hidden=false]
+ * @attr {string[]} [shortcut=[]]
+ *
+ * @readonly
+ * @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.
+ *
+ * @fires {Event} toggle
+ */
+let Tooltip = class Tooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.version = packageJson.version;
+        this.effectivePlacement = this.placement ?? 'bottom';
+        this.#arrowElementRef = createRef();
+        this.#isDisabled = false;
+        this.#isOpen = false;
+        this.#isScreenreaderHidden = false;
+        this.#shortcut = [];
+        this.#targetSlotElementRef = createRef();
+        this.#tooltipElementRef = createRef();
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default undefined
+     */
+    get label() {
+        return this.#label;
+    }
+    set label(label) {
+        this.#label = label;
+        const container = this.querySelector('glide-core-private-tooltip-container');
+        if (container) {
+            container.label = label;
+        }
+    }
+    /**
+     * @default undefined
+     */
+    get description() {
+        return this.#description;
+    }
+    set description(description) {
+        this.#description = description;
+        const container = this.querySelector('glide-core-private-tooltip-container');
+        if (container) {
+            container.description = description;
+        }
+    }
+    /**
+     * @default false
+     */
+    get disabled() {
+        return this.#isDisabled;
+    }
+    set disabled(isDisabled) {
+        this.#isDisabled = isDisabled;
+        if (this.open && !isDisabled) {
+            this.#show();
+        }
+        else {
+            this.#hide();
+        }
+        const container = this.querySelector('glide-core-private-tooltip-container');
+        if (container) {
+            container.disabled = isDisabled;
+        }
+        const target = this.#targetSlotElementRef.value?.assignedElements().at(0);
+        if (container && target && !this.disabled && !this.screenreaderHidden) {
+            target.setAttribute('aria-describedby', container.id);
+        }
+        else if (container && target) {
+            target.removeAttribute('aria-describedby');
+        }
+    }
+    /**
+     * @default 4
+     */
+    get offset() {
+        return (this.#offset ??
+            Number.parseFloat(window
+                .getComputedStyle(document.body)
+                .getPropertyValue('--glide-core-spacing-base-xxs')) *
+                Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize));
+    }
+    set offset(offset) {
+        this.#offset = offset;
+    }
+    /**
+     * @default false
+     */
+    get open() {
+        return this.#isOpen;
+    }
+    /**
+     * @default false
+     */
+    set open(isOpen) {
+        const hasChanged = isOpen !== this.#isOpen;
+        this.#isOpen = isOpen;
+        if (isOpen && hasChanged && !this.disabled) {
+            this.#show();
+            this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+        }
+        else if (hasChanged && !this.disabled) {
+            this.#hide();
+            this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+        }
+    }
+    /**
+     * @default false
+     */
+    get screenreaderHidden() {
+        return this.#isScreenreaderHidden;
+    }
+    set screenreaderHidden(isHidden) {
+        this.#isScreenreaderHidden = isHidden;
+        const container = this.querySelector('glide-core-private-tooltip-container');
+        if (container) {
+            container.screenreaderHidden = isHidden;
+        }
+        const target = this.#targetSlotElementRef.value?.assignedElements().at(0);
+        if (container && target && !this.disabled && !this.screenreaderHidden) {
+            target.setAttribute('aria-describedby', container.id);
+        }
+        else if (container && target) {
+            target.removeAttribute('aria-describedby');
+        }
+    }
+    /**
+     * @default []
+     */
+    get shortcut() {
+        return this.#shortcut;
+    }
+    set shortcut(shortcut) {
+        this.#shortcut = shortcut;
+        const container = this.querySelector('glide-core-private-tooltip-container');
+        if (container) {
+            container.shortcut = shortcut;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this.#closeTimeoutId);
+        clearTimeout(this.#openTimeoutId);
+    }
+    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`.
+            //
+            // 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.
+            //
+            // "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.
+            this.#tooltipElementRef.value.popover = 'manual';
+        }
+        if (this.open && !this.disabled) {
+            this.#show();
+        }
+        const container = document.createElement('glide-core-private-tooltip-container');
+        container.label = this.label;
+        container.description = this.description;
+        container.screenreaderHidden = this.screenreaderHidden;
+        container.shortcut = this.shortcut;
+        // There's a comment at the top of `./tooltip.container.ts` explaining why we
+        // append this component to the light DOM.
+        this.append(container);
+    }
+    render() {
+        // Lit-a11y calls for "blur" and "focus" handlers but doesn't account for "focusin"
+        // and "focusout".
+        /* eslint-disable lit-a11y/mouse-events-have-key-events */
+        return html `
+      <div
+        class="component"
+        data-test="component"
+        @mouseover=${this.#onComponentMouseOver}
+        @mouseout=${this.#onComponentMouseOut}
+      >
+        <div class="target-slot-container">
+          <slot
+            class="target-slot"
+            data-test="target-slot"
+            name="target"
+            @focusin=${this.#onTargetSlotFocusIn}
+            @focusout=${this.#onTargetSlotFocusOut}
+            @keydown=${this.#onTargetSlotKeyDown}
+            @slotchange=${this.#onTargetSlotChange}
+            ${assertSlot()}
+            ${ref(this.#targetSlotElementRef)}
+          >
+            <!--
+              The element to which the tooltip will anchor.
+              Can be any element with an implicit or explicit ARIA role.
+
+              @required
+              @type {Element}
+            -->
+          </slot>
+        </div>
+
+        <div
+          class=${classMap({
+            tooltip: true,
+            [this.effectivePlacement]: true,
+        })}
+          id="tooltip"
+          data-test="tooltip"
+          data-open-delay="300"
+          data-close-delay="200"
+          ${ref(this.#tooltipElementRef)}
+        >
+          <div
+            class=${classMap({
+            arrow: true,
+            [this.effectivePlacement]: true,
+        })}
+            data-test="arrow"
+            ${ref(this.#arrowElementRef)}
+          >
+            ${choose(this.effectivePlacement, [
+            ['top', () => icons.topArrow],
+            ['right', () => icons.rightArrow],
+            ['bottom', () => icons.bottomArrow],
+            ['left', () => icons.leftArrow],
+        ])}
+          </div>
+
+          <div
+            class=${classMap({
+            content: true,
+        })}
+          >
+            <slot class="default-slot" name="private">
+              <!--
+                @type {TooltipContainer}
+              -->
+            </slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    #arrowElementRef;
+    #cleanUpFloatingUi;
+    #closeTimeoutId;
+    #description;
+    #isDisabled;
+    #isOpen;
+    #isScreenreaderHidden;
+    #label;
+    #offset;
+    #openTimeoutId;
+    #shortcut;
+    #targetSlotElementRef;
+    #tooltipElementRef;
+    #cancelClose() {
+        clearTimeout(this.#closeTimeoutId);
+    }
+    #hide() {
+        this.#tooltipElementRef.value?.hidePopover();
+        this.#cleanUpFloatingUi?.();
+    }
+    #onComponentMouseOut(event) {
+        // The timeout gives consumers a chance to cancel the event to prevent Tooltip
+        // from closing.
+        setTimeout(() => {
+            if (!event.defaultPrevented) {
+                this.#scheduleClose();
+                clearTimeout(this.#openTimeoutId);
+            }
+        });
+    }
+    #onComponentMouseOver(event) {
+        // The timeout gives consumers a chance to cancel the event to prevent Tooltip
+        // from opening.
+        setTimeout(() => {
+            if (!event.defaultPrevented) {
+                this.#cancelClose();
+                // The open and close delays are stored in data attributes so tests can
+                // configure them. Tests configure them, rather than using fake timers,
+                // because they need real timers so they can await Floating UI's setup.
+                //
+                // Conditionals based on `window.navigator.webdriver` in here and in
+                // `#scheduleClose()`  would be a lot nicer. But one of that condition's
+                // branches would never get hit in tests. So we'd fail to meet our coverage
+                // thresholds.
+                this.#openTimeoutId = setTimeout(() => {
+                    this.open = true;
+                }, Number(this.#tooltipElementRef.value?.dataset.openDelay));
+            }
+        });
+    }
+    #onTargetSlotChange() {
+        const container = this.querySelector('glide-core-private-tooltip-container');
+        const target = this.#targetSlotElementRef.value?.assignedElements().at(0);
+        if (container && target && !this.disabled && !this.screenreaderHidden) {
+            target.setAttribute('aria-describedby', container.id);
+        }
+    }
+    #onTargetSlotFocusIn() {
+        this.open = true;
+    }
+    #onTargetSlotFocusOut() {
+        this.open = false;
+    }
+    #onTargetSlotKeyDown(event) {
+        if (event.key === 'Escape') {
+            // Prevent Safari from leaving full screen.
+            event.preventDefault();
+            this.open = false;
+        }
+    }
+    #scheduleClose() {
+        this.#closeTimeoutId = setTimeout(() => {
+            this.open = false;
+        }, Number(this.#tooltipElementRef.value?.dataset.closeDelay));
+    }
+    #show() {
+        if (!this.disabled) {
+            this.#cleanUpFloatingUi?.();
+            if (this.#targetSlotElementRef.value && this.#tooltipElementRef.value) {
+                this.#cleanUpFloatingUi = autoUpdate(this.#targetSlotElementRef.value, this.#tooltipElementRef.value, () => {
+                    (async () => {
+                        if (this.#targetSlotElementRef.value &&
+                            this.#tooltipElementRef.value &&
+                            this.#arrowElementRef.value) {
+                            const { x, y, placement, middlewareData } = await computePosition(this.#targetSlotElementRef.value, this.#tooltipElementRef.value, {
+                                placement: this.placement,
+                                middleware: [
+                                    offset(this.offset),
+                                    flip({
+                                        fallbackStrategy: 'initialPlacement',
+                                    }),
+                                    shift({
+                                        // So the tooltip can overlap its target in cases where it would otherwise
+                                        // overflow the viewport.
+                                        //
+                                        // Give a form control a super long label. Now reduce the size of your viewport.
+                                        // The tooltip should flip to the left instead of overflowing on the right.
+                                        //
+                                        // https://github.com/floating-ui/floating-ui/blob/933cacc6672e2ccd9409cf0e9f64acd7ebf450c4/website/pages/docs/shift.mdx#crossaxiskey
+                                        crossAxis: true,
+                                        limiter: limitShift({
+                                            // Shifting is limited so the arrow is never near the tooltip's rounded
+                                            // corners, which would leave a gap between the arrow and the part of
+                                            // the corner that's missing due to rounding. `20` is just a round number.
+                                            // `15` isn't enough.
+                                            offset: 20,
+                                        }),
+                                    }),
+                                    arrow({ element: this.#arrowElementRef.value }),
+                                ],
+                            });
+                            Object.assign(this.#tooltipElementRef.value.style, {
+                                left: `${x}px`,
+                                top: `${y}px`,
+                            });
+                            Object.assign(this.#arrowElementRef.value.style, {
+                                left: middlewareData.arrow?.x
+                                    ? `${middlewareData.arrow.x}px`
+                                    : null,
+                                top: middlewareData.arrow?.y
+                                    ? `${middlewareData.arrow.y}px`
+                                    : null,
+                            });
+                            this.effectivePlacement = placement;
+                            this.#tooltipElementRef.value.showPopover();
+                            const container = this.querySelector('glide-core-private-tooltip-container');
+                            const isSupportedPlacement = placement === 'bottom' ||
+                                placement === 'left' ||
+                                placement === 'right' ||
+                                placement === 'top';
+                            if (container && isSupportedPlacement) {
+                                container.placement = placement;
+                            }
+                        }
+                    })();
+                });
+            }
+        }
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Tooltip.prototype, "label", null);
+__decorate([
+    property({ reflect: true })
+], Tooltip.prototype, "description", null);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Tooltip.prototype, "disabled", null);
+__decorate([
+    property({ reflect: true, type: Number })
+], Tooltip.prototype, "offset", null);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Tooltip.prototype, "open", null);
+__decorate([
+    property({ reflect: true })
+], Tooltip.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: 'screenreader-hidden', reflect: true, type: Boolean })
+], Tooltip.prototype, "screenreaderHidden", null);
+__decorate([
+    property({ reflect: true, type: Array })
+], Tooltip.prototype, "shortcut", null);
+__decorate([
+    property({ reflect: true })
+], Tooltip.prototype, "version", void 0);
+__decorate([
+    state()
+], Tooltip.prototype, "effectivePlacement", void 0);
+Tooltip = __decorate([
+    customElement('glide-core-tooltip'),
+    final
+], Tooltip);
+export default Tooltip;
+const icons = {
+    topArrow: html `<svg aria-hidden="true" viewBox="0 0 10 6" fill="none">
+    <path
+      d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z"
+      fill="currentColor"
+    />
+  </svg>`,
+    rightArrow: html `<svg aria-hidden="true" viewBox="0 0 6 10" fill="none">
+    <path
+      d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z"
+      fill="currentColor"
+    />
+  </svg>`,
+    bottomArrow: html `<svg aria-hidden="true" viewBox="0 0 10 6" fill="none">
+    <path
+      d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z"
+      fill="currentColor"
+    />
+  </svg>`,
+    leftArrow: html `<svg aria-hidden="true" viewBox="0 0 6 10" fill="none">
+    <path
+      d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z"
+      fill="currentColor"
+    />
+  </svg>`,
+};