@crowdstrike/glide-core 0.29.1 → 0.30.0

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 disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#n():this.#c();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.#d??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#d=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#c(),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.#p),clearTimeout(this.#h)}firstUpdated(){this.#l.value&&(this.#l.value.popover="manual"),this.open&&!this.disabled&&this.#n();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#u}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#f}" @focusout="${this.#v}" @keydown="${this.#g}" @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;#y;#p;#t;#o;#i;#a;#d;#h;#r;#s;#l;#w(){clearTimeout(this.#p)}#c(){this.#l.value?.hidePopover(),this.#y?.()}#u(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=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)}#f(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#l.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#s.value&&this.#l.value&&(this.#y=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,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>`,
+};

package/dist/tooltip.styles.js

@@ -1,10 +1,25 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";export default[css`
-    ${opacityAndScaleAnimation(".tooltip:popover-open")}
-    ${focusOutline(".target-slot:focus-visible")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+import opacityAndScaleAnimation from './styles/opacity-and-scale-animation.js';
+export default [
+    css `
+    ${opacityAndScaleAnimation('.tooltip:popover-open')}
+    ${focusOutline('.target-slot:focus-visible')}
+  `,
+    css `
     :host {
       /* https://github.com/CrowdStrike/glide-core/pull/307/files#r1718545771 */
       display: inline-block;
+
+      /*
+        We've found that many consumers put Tooltip in a container that has
+        "white-space: nowrap", preventing Tooltip's "label" and "description"
+        from wrapping.
+
+        It's easy enough for them to add "white-space: normal" to Tooltip's
+        host. But it reduces our support load to add it for them.
+      */
+      white-space: normal;
     }
 
     .component {
@@ -94,4 +109,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         order: 2;
       }
     }
-  `];
+  `,
+];

package/dist/translations/en.js

@@ -1 +1,36 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noAvailableOptions:"No options available",noMatchingOptions:"No matching options",tooltip:"Tooltip:",severityInformational:"Severity: Informational",severityCritical:"Severity: Critical",severityMedium:"Severity: Medium",success:"Success:",error:"Error:",informational:"Informational:",loading:"Loading",add:"Add",announcedCharacterCount:(i,t)=>`Character count ${i} of ${t}`,displayedCharacterCount:(i,t)=>`${i}/${t}`,clearEntry:i=>`Clear ${i} entry`,editOption:i=>`Edit option: ${i}`,editTag:i=>`Edit tag: ${i}`,removeTag:i=>`Remove tag: ${i}`,itemCount:i=>`${i} items`,maximum:i=>`Maximum ${i}`,setMaximum:i=>`Set maximum ${i}`,minimum:i=>`Minimum ${i}`,setMinimum:i=>`Set minimum ${i}`};export default translation;
+const translation = {
+    $code: 'en',
+    $name: 'English',
+    $dir: 'ltr',
+    // All of these should have corresponding entries in ./en.json,
+    // using ICU message syntax in place of any of dynamic functions
+    close: 'Close',
+    dismiss: 'Dismiss',
+    selectAll: 'Select all',
+    notifications: 'Notifications',
+    nextTab: 'Next tab',
+    previousTab: 'Previous tab',
+    noAvailableOptions: 'No options available',
+    noMatchingOptions: 'No matching options',
+    tooltip: 'Tooltip:',
+    severityInformational: 'Severity: Informational',
+    severityCritical: 'Severity: Critical',
+    severityMedium: 'Severity: Medium',
+    success: 'Success:',
+    error: 'Error:',
+    informational: 'Informational:',
+    loading: 'Loading',
+    add: 'Add',
+    announcedCharacterCount: (current, maximum) => `Character count ${current} of ${maximum}`,
+    displayedCharacterCount: (current, maximum) => `${current}/${maximum}`,
+    clearEntry: (label) => `Clear ${label} entry`,
+    editOption: (label) => `Edit option: ${label}`,
+    editTag: (label) => `Edit tag: ${label}`,
+    removeTag: (label) => `Remove tag: ${label}`,
+    itemCount: (count) => `${count} items`,
+    maximum: (label) => `Maximum ${label}`,
+    setMaximum: (label) => `Set maximum ${label}`,
+    minimum: (label) => `Minimum ${label}`,
+    setMinimum: (label) => `Set minimum ${label}`,
+};
+export default translation;

package/dist/translations/fr.js

@@ -1 +1,37 @@
-export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions","maximum","setMaximum","minimum","setMinimum","add"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"Info-bulle :",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} sur ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,editOption:e=>`Modifier l'option : ${e}`,editTag:e=>`Modifier la balise : ${e}`,removeTag:e=>`Enlever la balise : ${e}`,itemCount:e=>`${e} éléments`};export default translation;
+export const PENDING_STRINGS = [
+    'severityInformational',
+    'severityCritical',
+    'severityMedium',
+    'success',
+    'error',
+    'informational',
+    'loading',
+    'noAvailableOptions',
+    'noMatchingOptions',
+    'maximum',
+    'setMaximum',
+    'minimum',
+    'setMinimum',
+    'add',
+];
+const translation = {
+    $code: 'fr',
+    $name: 'French',
+    $dir: 'ltr',
+    // These come from ./fr.json
+    close: 'FERMER',
+    dismiss: 'Ignorer',
+    selectAll: 'Tout sélectionner',
+    notifications: 'Notifications',
+    nextTab: 'Onglet suivant',
+    previousTab: 'Onglet précédent',
+    tooltip: 'Info-bulle :',
+    announcedCharacterCount: (current, maximum) => `Nombre de caractères ${current} sur ${maximum}`,
+    displayedCharacterCount: (current, maximum) => `${current}/${maximum}`,
+    clearEntry: (label) => `Effacer l'entrée ${label}`,
+    editOption: (label) => `Modifier l'option : ${label}`,
+    editTag: (label) => `Modifier la balise : ${label}`,
+    removeTag: (label) => `Enlever la balise : ${label}`,
+    itemCount: (count) => `${count} éléments`,
+};
+export default translation;

package/dist/translations/ja.js

@@ -1 +1,37 @@
-export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions","maximum","setMaximum","minimum","setMinimum","add"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"ツールチップ：",announcedCharacterCount:(t,e)=>`文字数 ${t}/${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}入力をクリア`,editOption:t=>`編集オプション：${t}`,editTag:t=>`タグの編集：${t}`,removeTag:t=>`タグの削除：${t}`,itemCount:t=>`${t}件`};export default translation;
+export const PENDING_STRINGS = [
+    'severityInformational',
+    'severityCritical',
+    'severityMedium',
+    'success',
+    'error',
+    'informational',
+    'loading',
+    'noAvailableOptions',
+    'noMatchingOptions',
+    'maximum',
+    'setMaximum',
+    'minimum',
+    'setMinimum',
+    'add',
+];
+const translation = {
+    $code: 'ja',
+    $name: 'Japanese',
+    $dir: 'ltr',
+    // These come from ./ja.json
+    close: '閉じる',
+    dismiss: '閉じる',
+    selectAll: 'すべて選択',
+    notifications: '通知',
+    nextTab: 'Onglet suivant',
+    previousTab: 'Onglet précédent',
+    tooltip: 'ツールチップ：',
+    announcedCharacterCount: (current, maximum) => `文字数 ${current}/${maximum}`,
+    displayedCharacterCount: (current, maximum) => `${current}/${maximum}`,
+    clearEntry: (label) => `${label}入力をクリア`,
+    editOption: (label) => `編集オプション：${label}`,
+    editTag: (label) => `タグの編集：${label}`,
+    removeTag: (label) => `タグの削除：${label}`,
+    itemCount: (count) => `${count}件`,
+};
+export default translation;