@patternfly/elements 3.0.0 → 3.0.2

package/pf-tooltip/pf-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport {\n  FloatingDOMController,\n  type Placement,\n} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\n\nimport { StringListConverter } from '@patternfly/pfe-core';\n\n\nimport styles from './pf-tooltip.css';\n\nconst EnterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst ExitEvents = ['focusout', 'blur', 'mouseleave'];\n\n/**\n * A **tooltip** is in-app messaging used to identify elements on a page with short,\n * clarifying text.\n *\n * @summary Toggle the visibility of helpful or contextual information.\n *\n * @slot\n *       This slot wraps around the element that should be used to invoke the tooltip content to display.\n *       Typically this would be an icon, button, or other small sized element.\n * @slot content\n *       This slot renders the content that will be displayed inside of the tooltip.\n *       Typically this would include a string of text without any additional elements.\n *       This element is wrapped with a div inside of the component to give it the stylings and background colors.\n *\n * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor\n *              Sets the background color for the tooltip content.\n *              {@default `#1b1d21`}\n * @cssprop     {<color>} --pf-c-tooltip__content--Color\n *              Sets the font color for the tooltip content.\n *              {@default `#e0e0e0`}\n * @cssprop     {<number>} --pf-c-tooltip--line-height\n *              Sets the font color for the tooltip content.\n *              {@default `1.5`}\n * @cssprop     {<length>} --pf-c-tooltip--MaxWidth\n *              Maximum width for the tooltip.\n *              {@default `18.75rem`}\n * @cssprop     --pf-c-tooltip--BoxShadow\n *              Box shadow for the tooltip.\n *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop\n *              Top padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight\n *              Right padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom\n *              Bottom padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft\n *              Left Padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__content--FontSize\n *              Font size for the tooltip content.\n *              {@default `0.875rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Width\n *              Tooltip arrow width.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Height\n *              Tooltip arrow height.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX\n *              Positions the tooltip arrow along the x axis for `top` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY\n *              Positions the tooltip arrow along the y axis for `top` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX\n *              Positions the tooltip arrow along the x axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY\n *              Positions the tooltip arrow along the y axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX\n *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY\n *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX\n *              Positions the tooltip arrow along the x axis for `left` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY\n *              Positions the tooltip arrow along the y axis for `left` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.\n *              {@default `45deg`}\n */\n@customElement('pf-tooltip')\nexport class PfTooltip extends LitElement {\n  static readonly styles = [styles];\n\n  /** The position of the tooltip, relative to the invoking content */\n  @property() position: Placement = 'top';\n\n  /** Tooltip content. Overridden by the content slot */\n  @property() content?: string;\n\n  /** If false, prevents the tooltip from trying to remain in view by flipping itself when necessary */\n  @property({ type: Boolean, attribute: 'no-flip' }) noFlip = false;\n\n  @property() trigger?: string | Element;\n\n  /**\n   * The flip order when flip is enabled and the initial position is not possible.\n   * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n   * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n   * The default is [oppositePlacement], where only the opposite placement is tried.\n   */\n  @property({\n    attribute: 'flip-behavior',\n    converter: StringListConverter,\n  }) flipBehavior?: Placement[];\n\n  get #invoker(): HTMLSlotElement | null {\n    return this.shadowRoot?.querySelector('#invoker') ?? null;\n  }\n\n  get #content(): HTMLElement | null {\n    return this.shadowRoot?.querySelector('#tooltip') ?? null;\n  }\n\n  #referenceTrigger?: HTMLElement | null;\n\n  #float = new FloatingDOMController(this, {\n    content: (): HTMLElement | null | undefined => this.#content,\n    invoker: (): HTMLElement | null | undefined => {\n      if (this.#referenceTrigger) {\n        return this.#referenceTrigger;\n      } else if (this.#invoker instanceof HTMLSlotElement && this.#invoker.assignedElements().length > 0) {\n        return this.#invoker.assignedElements().at(0) as HTMLElement;\n      } else {\n        return this.#invoker;\n      }\n    },\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.#invokerChanged();\n    this.#updateTrigger();\n  }\n\n  /**\n   * Removes event listeners from the old trigger element and attaches\n   * them to the new trigger element.\n   */\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('trigger')) {\n      this.#updateTrigger();\n    }\n  }\n\n  override render() {\n    const { alignment, anchor, open, styles } = this.#float;\n\n    const blockInvoker =\n      this.#invoker?.assignedElements().length === 0 &&\n      this.#invoker?.assignedNodes().length > 0;\n    const display = blockInvoker ? 'block' : 'contents';\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ open,\n                               [anchor]: !!anchor,\n                               [alignment]: !!alignment })}\">\n        <div role=\"tooltip\"\n             style=\"${styleMap({ display })}\"\n             aria-labelledby=\"tooltip\">\n          <slot id=\"invoker\" @slotchange=\"${this.#invokerChanged}\"></slot>\n        </div>\n        <div aria-hidden=\"${String(!open) as 'true' | 'false'}\">\n          <slot id=\"tooltip\" name=\"content\">${this.content}</slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** the invoker slot should render at block level if it only has text nodes */\n  #invokerChanged() {\n    this.requestUpdate();\n  }\n\n  #getReferenceTrigger() {\n    return (this.getRootNode() as Document | ShadowRoot).getElementById(this.trigger?.normalize() ?? '');\n  }\n\n  #updateTrigger() {\n    const oldReferenceTrigger = this.#referenceTrigger;\n    this.#referenceTrigger =\n        this.trigger instanceof HTMLElement ? this.trigger\n      : typeof this.trigger === 'string' ? this.#getReferenceTrigger()\n      : null;\n    for (const evt of EnterEvents) {\n      if (this.#referenceTrigger) {\n        this.removeEventListener(evt, this.show);\n        this.#referenceTrigger.addEventListener(evt, this.show);\n      } else {\n        oldReferenceTrigger?.removeEventListener(evt, this.show);\n        this.addEventListener(evt, this.show);\n      }\n    }\n    for (const evt of ExitEvents) {\n      if (this.#referenceTrigger) {\n        this.removeEventListener(evt, this.hide);\n        this.#referenceTrigger.addEventListener(evt, this.hide);\n      } else {\n        oldReferenceTrigger?.removeEventListener(evt, this.hide);\n        this.addEventListener(evt, this.hide);\n      }\n    }\n  }\n\n  @bound async show() {\n    await this.updateComplete;\n    const placement = this.position;\n    const offset =\n        !placement?.match(/top|bottom/) ? 15\n      : { mainAxis: 15, alignmentAxis: -4 };\n    await this.#float.show({\n      offset,\n      placement,\n      flip: !this.noFlip,\n      fallbackPlacements: this.flipBehavior,\n    });\n  }\n\n  @bound async hide() {\n    await this.#float.hide();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tooltip': PfTooltip;\n  }\n}\n"]}
+{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport {\n  FloatingDOMController,\n  type Placement,\n} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\n\nimport { StringListConverter } from '@patternfly/pfe-core';\n\n\nimport styles from './pf-tooltip.css';\n\nconst EnterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst ExitEvents = ['focusout', 'blur', 'mouseleave'];\n\n/**\n * A **tooltip** is in-app messaging used to identify elements on a page with short,\n * clarifying text.\n * @summary Toggle the visibility of helpful or contextual information.\n * @slot\n *       This slot wraps around the element that should be used to invoke the tooltip content to display.\n *       Typically this would be an icon, button, or other small sized element.\n * @slot content\n *       This slot renders the content that will be displayed inside of the tooltip.\n *       Typically this would include a string of text without any additional elements.\n *       This element is wrapped with a div inside of the component to give it the stylings and background colors.\n * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor\n *              Sets the background color for the tooltip content.\n *              {@default `#1b1d21`}\n * @cssprop     {<color>} --pf-c-tooltip__content--Color\n *              Sets the font color for the tooltip content.\n *              {@default `#e0e0e0`}\n * @cssprop     {<number>} --pf-c-tooltip--line-height\n *              Sets the font color for the tooltip content.\n *              {@default `1.5`}\n * @cssprop     {<length>} --pf-c-tooltip--MaxWidth\n *              Maximum width for the tooltip.\n *              {@default `18.75rem`}\n * @cssprop     --pf-c-tooltip--BoxShadow\n *              Box shadow for the tooltip.\n *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop\n *              Top padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight\n *              Right padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom\n *              Bottom padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft\n *              Left Padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__content--FontSize\n *              Font size for the tooltip content.\n *              {@default `0.875rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Width\n *              Tooltip arrow width.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Height\n *              Tooltip arrow height.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX\n *              Positions the tooltip arrow along the x axis for `top` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY\n *              Positions the tooltip arrow along the y axis for `top` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX\n *              Positions the tooltip arrow along the x axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY\n *              Positions the tooltip arrow along the y axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX\n *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY\n *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX\n *              Positions the tooltip arrow along the x axis for `left` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY\n *              Positions the tooltip arrow along the y axis for `left` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.\n *              {@default `45deg`}\n */\n@customElement('pf-tooltip')\nexport class PfTooltip extends LitElement {\n  static readonly styles = [styles];\n\n  /** The position of the tooltip, relative to the invoking content */\n  @property() position: Placement = 'top';\n\n  /** Tooltip content. Overridden by the content slot */\n  @property() content?: string;\n\n  /** If false, prevents the tooltip from trying to remain in view by flipping itself when necessary */\n  @property({ type: Boolean, attribute: 'no-flip' }) noFlip = false;\n\n  @property() trigger?: string | Element;\n\n  /**\n   * The flip order when flip is enabled and the initial position is not possible.\n   * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n   * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n   * The default is [oppositePlacement], where only the opposite placement is tried.\n   */\n  @property({\n    attribute: 'flip-behavior',\n    converter: StringListConverter,\n  }) flipBehavior?: Placement[];\n\n  get #invoker(): HTMLSlotElement | null {\n    return this.shadowRoot?.querySelector('#invoker') ?? null;\n  }\n\n  get #content(): HTMLElement | null {\n    return this.shadowRoot?.querySelector('#tooltip') ?? null;\n  }\n\n  #referenceTrigger?: HTMLElement | null;\n\n  #float = new FloatingDOMController(this, {\n    content: (): HTMLElement | null | undefined => this.#content,\n    invoker: (): HTMLElement | null | undefined => {\n      if (this.#referenceTrigger) {\n        return this.#referenceTrigger;\n      } else if (this.#invoker instanceof HTMLSlotElement\n              && this.#invoker.assignedElements().length > 0) {\n        return this.#invoker.assignedElements().at(0) as HTMLElement;\n      } else {\n        return this.#invoker;\n      }\n    },\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.#invokerChanged();\n    this.#updateTrigger();\n  }\n\n  /**\n   * Removes event listeners from the old trigger element and attaches\n   * them to the new trigger element.\n   */\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('trigger')) {\n      this.#updateTrigger();\n    }\n  }\n\n  override render() {\n    const { alignment, anchor, open, styles } = this.#float;\n\n    const blockInvoker =\n      this.#invoker?.assignedElements().length === 0\n      && this.#invoker?.assignedNodes().length > 0;\n    const display = blockInvoker ? 'block' : 'contents';\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ open,\n                               [anchor]: !!anchor,\n                               [alignment]: !!alignment })}\">\n        <div role=\"tooltip\"\n             style=\"${styleMap({ display })}\"\n             aria-labelledby=\"tooltip\">\n          <slot id=\"invoker\" @slotchange=\"${this.#invokerChanged}\"></slot>\n        </div>\n        <div aria-hidden=\"${String(!open) as 'true' | 'false'}\">\n          <slot id=\"tooltip\" name=\"content\">${this.content}</slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** the invoker slot should render at block level if it only has text nodes */\n  #invokerChanged() {\n    this.requestUpdate();\n  }\n\n  #getReferenceTrigger() {\n    return (this.getRootNode() as Document | ShadowRoot)\n        .getElementById(this.trigger?.normalize() ?? '');\n  }\n\n  #updateTrigger() {\n    const oldReferenceTrigger = this.#referenceTrigger;\n    this.#referenceTrigger =\n        this.trigger instanceof HTMLElement ? this.trigger\n      : typeof this.trigger === 'string' ? this.#getReferenceTrigger()\n      : null;\n    for (const evt of EnterEvents) {\n      if (this.#referenceTrigger) {\n        this.removeEventListener(evt, this.show);\n        this.#referenceTrigger.addEventListener(evt, this.show);\n      } else {\n        oldReferenceTrigger?.removeEventListener(evt, this.show);\n        this.addEventListener(evt, this.show);\n      }\n    }\n    for (const evt of ExitEvents) {\n      if (this.#referenceTrigger) {\n        this.removeEventListener(evt, this.hide);\n        this.#referenceTrigger.addEventListener(evt, this.hide);\n      } else {\n        oldReferenceTrigger?.removeEventListener(evt, this.hide);\n        this.addEventListener(evt, this.hide);\n      }\n    }\n  }\n\n  @bound async show() {\n    await this.updateComplete;\n    const placement = this.position;\n    const offset =\n        !placement?.match(/top|bottom/) ? 15\n      : { mainAxis: 15, alignmentAxis: -4 };\n    await this.#float.show({\n      offset,\n      placement,\n      flip: !this.noFlip,\n      fallbackPlacements: this.flipBehavior,\n    });\n  }\n\n  @bound async hide() {\n    await this.#float.hide();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tooltip': PfTooltip;\n  }\n}\n"]}

package/pf-tooltip/test/pf-tooltip.e2e.d.ts

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

package/pf-tooltip/test/pf-tooltip.e2e.js

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-tooltip';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-tooltip.e2e.js.map

package/pf-tooltip/test/pf-tooltip.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tooltip.e2e.js","sourceRoot":"","sources":["pf-tooltip.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,YAAY,CAAC;AAE7B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-tooltip';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-tooltip/test/pf-tooltip.spec.d.ts

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

package/pf-tooltip/test/pf-tooltip.spec.js

@@ -0,0 +1,53 @@
+import { expect, html, fixture } from '@open-wc/testing';
+import { PfTooltip } from '../pf-tooltip.js';
+import { setViewport, sendMouse } from '@web/test-runner-commands';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+describe('<pf-tooltip>', function () {
+    let element;
+    let snapshot;
+    beforeEach(async function () {
+        await setViewport({ width: 1000, height: 1000 });
+    });
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-tooltip')).to.be.an.instanceof(PfTooltip);
+    });
+    it('should upgrade', async function () {
+        element = await fixture(html `<pf-tooltip></pf-tooltip>`);
+        const klass = customElements.get('pf-tooltip');
+        expect(element)
+            .to.be.an.instanceOf(klass)
+            .and
+            .to.be.an.instanceOf(PfTooltip);
+    });
+    describe('typical usage', function () {
+        beforeEach(async function () {
+            element = await fixture(html `
+        <pf-tooltip content="Content">Tooltip</pf-tooltip>
+      `);
+            snapshot = await a11ySnapshot();
+        });
+        it('should be accessible', async function () {
+            await expect(element).shadowDom.to.be.accessible();
+        });
+        it('should hide tooltip content from assistive technology', async function () {
+            expect(snapshot.children).to.deep.equal([
+                { name: 'Tooltip', role: 'text' },
+            ]);
+        });
+        describe('hovering the element', function () {
+            beforeEach(async function () {
+                const { x, y } = element.getBoundingClientRect();
+                await sendMouse({ position: [x + 5, y + 5], type: 'move' });
+                await element.updateComplete;
+                snapshot = await a11ySnapshot();
+            });
+            it('should show tooltip content to assistive technology', async function () {
+                expect(snapshot.children).to.deep.equal([
+                    { name: 'Tooltip', role: 'text' },
+                    { name: 'Content', role: 'text' },
+                ]);
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-tooltip.spec.js.map

package/pf-tooltip/test/pf-tooltip.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tooltip.spec.js","sourceRoot":"","sources":["pf-tooltip.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAE3E,QAAQ,CAAC,cAAc,EAAE;IACvB,IAAI,OAAkB,CAAC;IACvB,IAAI,QAA0B,CAAC;IAE/B,UAAU,CAAC,KAAK;QACd,MAAM,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE;QAC9B,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IAC9E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,OAAO,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,2BAA2B,CAAC,CAAC;QACpE,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAC/C,MAAM,CAAC,OAAO,CAAC;aACV,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;aAC1B,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE;QACxB,UAAU,CAAC,KAAK;YACd,OAAO,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA;;OAEtC,CAAC,CAAC;YACH,QAAQ,GAAG,MAAM,YAAY,EAAE,CAAC;QAClC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK;YAC9B,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK;YAC/D,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;gBACtC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;aAClC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,sBAAsB,EAAE;YAC/B,UAAU,CAAC,KAAK;gBACd,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;gBACjD,MAAM,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;gBAC5D,MAAM,OAAO,CAAC,cAAc,CAAC;gBAC7B,QAAQ,GAAG,MAAM,YAAY,EAAE,CAAC;YAClC,CAAC,CAAC,CAAC;YACH,EAAE,CAAC,qDAAqD,EAAE,KAAK;gBAC7D,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;oBACtC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;oBACjC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;iBAClC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html, fixture } from '@open-wc/testing';\nimport type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nimport { PfTooltip } from '../pf-tooltip.js';\nimport { setViewport, sendMouse } from '@web/test-runner-commands';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\ndescribe('<pf-tooltip>', function() {\n  let element: PfTooltip;\n  let snapshot: A11yTreeSnapshot;\n\n  beforeEach(async function() {\n    await setViewport({ width: 1000, height: 1000 });\n  });\n\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-tooltip')).to.be.an.instanceof(PfTooltip);\n  });\n\n  it('should upgrade', async function() {\n    element = await fixture<PfTooltip>(html`<pf-tooltip></pf-tooltip>`);\n    const klass = customElements.get('pf-tooltip');\n    expect(element)\n        .to.be.an.instanceOf(klass)\n        .and\n        .to.be.an.instanceOf(PfTooltip);\n  });\n\n  describe('typical usage', function() {\n    beforeEach(async function() {\n      element = await fixture<PfTooltip>(html`\n        <pf-tooltip content=\"Content\">Tooltip</pf-tooltip>\n      `);\n      snapshot = await a11ySnapshot();\n    });\n\n    it('should be accessible', async function() {\n      await expect(element).shadowDom.to.be.accessible();\n    });\n\n    it('should hide tooltip content from assistive technology', async function() {\n      expect(snapshot.children).to.deep.equal([\n        { name: 'Tooltip', role: 'text' },\n      ]);\n    });\n\n    describe('hovering the element', function() {\n      beforeEach(async function() {\n        const { x, y } = element.getBoundingClientRect();\n        await sendMouse({ position: [x + 5, y + 5], type: 'move' });\n        await element.updateComplete;\n        snapshot = await a11ySnapshot();\n      });\n      it('should show tooltip content to assistive technology', async function() {\n        expect(snapshot.children).to.deep.equal([\n          { name: 'Tooltip', role: 'text' },\n          { name: 'Content', role: 'text' },\n        ]);\n      });\n    });\n  });\n});\n"]}