@patternfly/elements 1.0.0

package/pf-tooltip/BaseTooltip.css

@@ -0,0 +1,74 @@
+:host {
+  display: inline;
+}
+
+
+#container {
+  display: inline-flex;
+  position: relative;
+  --_floating-arrow-size: 0.5rem;
+}
+
+#invoker {
+  display: inline-block;
+  position: relative;
+}
+
+#tooltip,
+#tooltip::after {
+  position: absolute;
+}
+
+#tooltip {
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10000;
+  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
+  text-align: center;
+  word-break: break-word;
+  translate: var(--_floating-content-translate);
+  max-width: calc(100vw - 10px);
+  width: max-content;
+  top: 0;
+  left: 0;
+  will-change: opacity;
+}
+
+#tooltip::after {
+  display: block;
+  content: '';
+  rotate: 45deg;
+  width: var(--_floating-arrow-size);
+  height: var(--_floating-arrow-size);
+  will-change: left top right bottom;
+}
+
+.open #tooltip {
+  opacity: 1;
+}
+
+/* LEFT */
+.left #tooltip::after          { right: calc(-0.5 * var(--_floating-arrow-size)); }
+.left.center #tooltip::after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.left.start #tooltip::after    { top: var(--_floating-arrow-size); }
+.left.end #tooltip::after      { bottom: var(--_floating-arrow-size); }
+
+/* TOP */
+.top #tooltip::after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.top.center #tooltip::after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.top.start #tooltip::after     { left: var(--_floating-arrow-size); }
+.top.end #tooltip::after       { right: var(--_floating-arrow-size); }
+
+/* RIGHT */
+.right #tooltip::after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.right.center #tooltip::after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.right.start #tooltip::after   { top: var(--_floating-arrow-size); }
+.right.end #tooltip::after     { bottom: var(--_floating-arrow-size); }
+
+/* BOTTOM */
+.bottom #tooltip::after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.bottom.center #tooltip::after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.bottom.start #tooltip::after  { left: var(--_floating-arrow-size); }
+.bottom.end #tooltip::after    { right: var(--_floating-arrow-size); }
+

package/pf-tooltip/BaseTooltip.d.ts

@@ -0,0 +1,13 @@
+import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { LitElement } from 'lit';
+export declare abstract class BaseTooltip extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    abstract content?: string;
+    /** The position of the tooltip, relative to the invoking content */
+    abstract position?: Placement;
+    connectedCallback(): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/pf-tooltip/BaseTooltip.js

@@ -0,0 +1,52 @@
+var _BaseTooltip_float;
+import { __classPrivateFieldGet } from "tslib";
+import { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { css } from "lit";
+const style = css `:host {\n  display: inline;\n}\n\n\n#container {\n  display: inline-flex;\n  position: relative;\n  --_floating-arrow-size: 0.5rem;\n}\n\n#invoker {\n  display: inline-block;\n  position: relative;\n}\n\n#tooltip,\n#tooltip::after {\n  position: absolute;\n}\n\n#tooltip {\n  display: block;\n  opacity: 0;\n  pointer-events: none;\n  z-index: 10000;\n  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;\n  text-align: center;\n  word-break: break-word;\n  translate: var(--_floating-content-translate);\n  max-width: calc(100vw - 10px);\n  width: max-content;\n  top: 0;\n  left: 0;\n  will-change: opacity;\n}\n\n#tooltip::after {\n  display: block;\n  content: '';\n  rotate: 45deg;\n  width: var(--_floating-arrow-size);\n  height: var(--_floating-arrow-size);\n  will-change: left top right bottom;\n}\n\n.open #tooltip {\n  opacity: 1;\n}\n\n/* LEFT */\n.left #tooltip::after          { right: calc(-0.5 * var(--_floating-arrow-size)); }\n.left.center #tooltip::after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.left.start #tooltip::after    { top: var(--_floating-arrow-size); }\n.left.end #tooltip::after      { bottom: var(--_floating-arrow-size); }\n\n/* TOP */\n.top #tooltip::after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.top.center #tooltip::after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.top.start #tooltip::after     { left: var(--_floating-arrow-size); }\n.top.end #tooltip::after       { right: var(--_floating-arrow-size); }\n\n/* RIGHT */\n.right #tooltip::after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.right.center #tooltip::after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.right.start #tooltip::after   { top: var(--_floating-arrow-size); }\n.right.end #tooltip::after     { bottom: var(--_floating-arrow-size); }\n\n/* BOTTOM */\n.bottom #tooltip::after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.bottom.center #tooltip::after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.bottom.start #tooltip::after  { left: var(--_floating-arrow-size); }\n.bottom.end #tooltip::after    { right: var(--_floating-arrow-size); }\n\n`;
+const enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];
+const exitEvents = ['focusout', 'blur', 'mouseleave'];
+export class BaseTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        _BaseTooltip_float.set(this, new FloatingDOMController(this, {
+            arrow: true,
+            content: () => this.shadowRoot?.querySelector('#tooltip'),
+        }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        enterEvents.forEach(evt => this.addEventListener(evt, this.show));
+        exitEvents.forEach(evt => this.addEventListener(evt, this.hide));
+    }
+    async show() {
+        await this.updateComplete;
+        const placement = this.position;
+        const offset = !placement?.match(/top|bottom/) ? 15
+            : { mainAxis: 15, alignmentAxis: -4 };
+        await __classPrivateFieldGet(this, _BaseTooltip_float, "f").show({ offset, placement });
+    }
+    async hide() {
+        await __classPrivateFieldGet(this, _BaseTooltip_float, "f").hide();
+    }
+    render() {
+        const { alignment, anchor, open, styles } = __classPrivateFieldGet(this, _BaseTooltip_float, "f");
+        return html `
+      <div id="container"
+           style="${styleMap(styles)}"
+        class="${classMap({ open,
+            [anchor]: !!anchor,
+            [alignment]: !!alignment })}">
+        <slot id="invoker" role="tooltip" aria-labelledby="tooltip"></slot>
+        <slot id="tooltip"
+              name="content"
+              aria-hidden="${String(!open)}">${this.content}</slot>
+      </div>
+    `;
+    }
+}
+_BaseTooltip_float = new WeakMap();
+BaseTooltip.styles = [style];
+//# sourceMappingURL=BaseTooltip.js.map

package/pf-tooltip/BaseTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTooltip.js","sourceRoot":"","sources":["BaseTooltip.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;;;AAIpG,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AAC9D,MAAM,UAAU,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAEtD,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAQE,6BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,KAAK,EAAE,IAAI;YACX,OAAO,EAAE,GAAmC,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC;SAC1F,CAAC,EAAC;IAqCL,CAAC;IAnCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GACR,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE;YACtC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC;QACxC,MAAM,uBAAA,IAAI,0BAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,uBAAA,IAAI,0BAAO,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,uBAAA,IAAI,0BAAO,CAAC;QAExD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,MAAM,CAAC;iBACnB,QAAQ,CAAC,EAAE,IAAI;YACJ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM;YAClB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;;;;6BAI1B,MAAM,CAAC,CAAC,IAAI,CAAmB,KAAK,IAAI,CAAC,OAAO;;KAExE,CAAC;IACJ,CAAC;;;AA9Ce,kBAAM,GAAG,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport style from './BaseTooltip.css';\n\nconst enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst exitEvents = ['focusout', 'blur', 'mouseleave'];\n\nexport abstract class BaseTooltip extends LitElement {\n  static readonly styles = [style];\n\n  abstract content?: string;\n\n  /** The position of the tooltip, relative to the invoking content */\n  abstract position?: Placement;\n\n  #float = new FloatingDOMController(this, {\n    arrow: true,\n    content: (): HTMLElement | undefined | null => this.shadowRoot?.querySelector('#tooltip'),\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    enterEvents.forEach(evt => this.addEventListener(evt, this.show));\n    exitEvents.forEach(evt => this.addEventListener(evt, this.hide));\n  }\n\n  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({ offset, placement });\n  }\n\n  async hide() {\n    await this.#float.hide();\n  }\n\n  override render() {\n    const { alignment, anchor, open, styles } = this.#float;\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n        class=\"${classMap({ open,\n                            [anchor]: !!anchor,\n                            [alignment]: !!alignment })}\">\n        <slot id=\"invoker\" role=\"tooltip\" aria-labelledby=\"tooltip\"></slot>\n        <slot id=\"tooltip\"\n              name=\"content\"\n              aria-hidden=\"${String(!open) as 'true'|'false'}\">${this.content}</slot>\n      </div>\n    `;\n  }\n}\n"]}

package/pf-tooltip/demo/demo.css

@@ -0,0 +1,39 @@
+.narrow :is(section:not(#block) p, ul) {
+  max-width: 400px;
+  margin-inline: auto;
+}
+
+#block ul {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 1em;
+  list-style-type: none;
+  padding: 0;
+  margin-inline: 0;
+}
+
+#block li {
+  padding: 0;
+  display: block;
+}
+
+samp {
+  font-weight: bold;
+}
+
+#custom-styles pf-tooltip:nth-of-type(1) {
+  --pf-c-tooltip__content--Color: lightblue;
+}
+
+#custom-styles pf-tooltip:nth-of-type(2) {
+  --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--lg,
+      0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16),
+      0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+}
+
+#custom-styles pf-tooltip:nth-of-type(3) {
+  --pf-c-tooltip__content--PaddingTop: 2rem;
+  --pf-c-tooltip__content--PaddingRight: 2rem;
+  --pf-c-tooltip__content--PaddingBottom: 2rem;
+  --pf-c-tooltip__content--PaddingLeft: 2rem;
+}

package/pf-tooltip/demo/performance.js

@@ -0,0 +1,45 @@
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
+
+const $ = x => document.querySelector(x);
+const $$ = x => document.querySelectorAll(x);
+
+import { html, render } from 'lit';
+
+const submit = $('form pf-button');
+const target = $('#target');
+
+const getTooltip = (_, i) =>
+  html`<pf-tooltip content="Content for ${i + 1}">${i + 1}</pf-tooltip>`;
+
+async function measure(start) {
+  submit.loading = true;
+  submit.textContent = 'Rendering...';
+  await submit.updateComplete;
+  await new Promise(requestAnimationFrame);
+  render(Array.from({ length: 10000 }, getTooltip), target);
+  const tooltips = $$('pf-tooltip');
+  const [first] = tooltips;
+  first.show();
+  await Promise.all(Array.from(tooltips, x => x.updateComplete));
+  await first.hide();
+  return performance.now() - start;
+}
+
+$('form').addEventListener('submit', /** @this {HTMLFormElement} */async function(event) {
+  event.preventDefault();
+  const elapsed = await measure(performance.now());
+  this.output.value = `Render took ${(elapsed) / 1000} seconds`;
+  submit.loading = false;
+  submit.textContent = 'Rerender';
+});
+
+
+$('form').addEventListener('reset', /** @this {HTMLFormElement} */async function(event) {
+  event.preventDefault();
+  render('', target);
+  this.output.value = '';
+  submit.loading = false;
+  submit.textContent = 'Render';
+});
+

package/pf-tooltip/demo/pf-tooltip.js

@@ -0,0 +1,7 @@
+import '@patternfly/elements/pf-switch/pf-switch.js';
+import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
+
+document.getElementById('width-toggle').addEventListener('change', function(event) {
+  document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
+});
+

package/pf-tooltip/pf-tooltip.css

@@ -0,0 +1,40 @@
+:host {
+  --_timestamp-text-decoration: underline dashed 1px;
+  --_timestamp-text-underline-offset: 4px;
+}
+
+#tooltip {
+  --_timestamp-text-decoration: none;
+  --_timestamp-text-underline-offset: initial;
+  line-height: var(--pf-c-tooltip--line-height, 1.5);
+  max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);
+  box-shadow: var(--pf-c-tooltip--BoxShadow,
+    var(--pf-global--BoxShadow--md,
+      0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),
+      0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));
+  padding:
+    var(--pf-c-tooltip__content--PaddingTop,
+      var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-tooltip__content--PaddingRight,
+      var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-tooltip__content--PaddingBottom,
+      var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-tooltip__content--PaddingLeft,
+      var(--pf-global--spacer--sm, 0.5rem));
+  font-size: var(--pf-c-tooltip__content--FontSize,
+    var(--pf-global--FontSize--sm, 0.875rem));
+  color: var(--pf-c-tooltip__content--Color,
+    var(--pf-global--Color--light-100, #ffffff));
+  background-color: var(--pf-c-tooltip__content--BackgroundColor,
+    var(--pf-global--BackgroundColor--dark-100, #151515));
+}
+
+#container {
+  --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);
+}
+
+#tooltip::after {
+  background-color: var(--pf-c-tooltip__content--BackgroundColor,
+    var(--pf-global--BackgroundColor--dark-100, #151515));
+}
+

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

@@ -0,0 +1,101 @@
+import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { BaseTooltip } from './BaseTooltip.js';
+/**
+ * Patternfly tooltip
+ *
+ * A Tooltip is a floating text area triggered by a user that provides helpful or contextual information.
+ *
+ * @summary Toggle the visiblity of helpful or contextual information.
+ *
+ * @slot
+ *       This slot wraps around the element that should be used to invoke the tooltip content to display.
+ *       Typically this would be an icon, button, or other small sized element.
+ * @slot content
+ *       This slot renders the content that will be displayed inside of the tooltip.
+ *       Typically this would include a string of text without any additional elements.
+ *       This element is wrapped with a div inside of the component to give it the stylings and background colors.
+ *
+ * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor
+ *              Sets the background color for the tooltip content.
+ *              {@default `#1b1d21`}
+ * @cssprop     {<color>} --pf-c-tooltip__content--Color
+ *              Sets the font color for the tooltip content.
+ *              {@default `#e0e0e0`}
+ * @cssprop     {<number>} --pf-c-tooltip--line-height
+ *              Sets the font color for the tooltip content.
+ *              {@default `1.5`}
+ * @cssprop     {<length>} --pf-c-tooltip--MaxWidth
+ *              Maximum width for the tooltip.
+ *              {@default `18.75rem`}
+ * @cssprop     --pf-c-tooltip--BoxShadow
+ *              Box shadow for the tooltip.
+ *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}
+ * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop
+ *              Top padding for the tooltip.
+ *              {@default `0.5rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight
+ *              Right padding for the tooltip.
+ *              {@default `0.5rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom
+ *              Bottom padding for the tooltip.
+ *              {@default `0.5rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft
+ *              Left Padding for the tooltip.
+ *              {@default `0.5rem`}
+ * @cssprop     --pf-c-tooltip__content--FontSize
+ *              Font size for the tooltip content.
+ *              {@default `0.875rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__arrow--Width
+ *              Tooltip arrow width.
+ *              {@default `0.5rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__arrow--Height
+ *              Tooltip arrow height.
+ *              {@default `0.5rem`}
+ * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX
+ *              Positions the tooltip arrow along the x axis for `top` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY
+ *              Positions the tooltip arrow along the y axis for `top` positioned arrows.
+ *              {@default `50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate
+ *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.
+ *              {@default `45deg`}
+ * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX
+ *              Positions the tooltip arrow along the x axis for `right` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY
+ *              Positions the tooltip arrow along the y axis for `right` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate
+ *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.
+ *              {@default `45deg`}
+ * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX
+ *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY
+ *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate
+ *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.
+ *              {@default `45deg`}
+ * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX
+ *              Positions the tooltip arrow along the x axis for `left` positioned arrows.
+ *              {@default `50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY
+ *              Positions the tooltip arrow along the y axis for `left` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate
+ *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.
+ *              {@default `45deg`}
+ */
+export declare class PfTooltip extends BaseTooltip {
+    static readonly styles: import("lit").CSSResult[];
+    position: Placement;
+    /** Tooltip content. Overridden by the content slot */
+    content?: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-tooltip': PfTooltip;
+    }
+}

package/pf-tooltip/pf-tooltip.js

@@ -0,0 +1,111 @@
+import { __decorate } from "tslib";
+import { customElement, property } from 'lit/decorators.js';
+import { BaseTooltip } from './BaseTooltip.js';
+import { css } from "lit";
+const styles = css `:host {\n  --_timestamp-text-decoration: underline dashed 1px;\n  --_timestamp-text-underline-offset: 4px;\n}\n\n#tooltip {\n  --_timestamp-text-decoration: none;\n  --_timestamp-text-underline-offset: initial;\n  line-height: var(--pf-c-tooltip--line-height, 1.5);\n  max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);\n  box-shadow: var(--pf-c-tooltip--BoxShadow,\n    var(--pf-global--BoxShadow--md,\n      0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),\n      0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  padding:\n    var(--pf-c-tooltip__content--PaddingTop,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingRight,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingBottom,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingLeft,\n      var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-tooltip__content--Color,\n    var(--pf-global--Color--light-100, #ffffff));\n  background-color: var(--pf-c-tooltip__content--BackgroundColor,\n    var(--pf-global--BackgroundColor--dark-100, #151515));\n}\n\n#container {\n  --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);\n}\n\n#tooltip::after {\n  background-color: var(--pf-c-tooltip__content--BackgroundColor,\n    var(--pf-global--BackgroundColor--dark-100, #151515));\n}\n\n`;
+/**
+ * Patternfly tooltip
+ *
+ * A Tooltip is a floating text area triggered by a user that provides helpful or contextual information.
+ *
+ * @summary Toggle the visiblity of helpful or contextual information.
+ *
+ * @slot
+ *       This slot wraps around the element that should be used to invoke the tooltip content to display.
+ *       Typically this would be an icon, button, or other small sized element.
+ * @slot content
+ *       This slot renders the content that will be displayed inside of the tooltip.
+ *       Typically this would include a string of text without any additional elements.
+ *       This element is wrapped with a div inside of the component to give it the stylings and background colors.
+ *
+ * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor
+ *              Sets the background color for the tooltip content.
+ *              {@default `#1b1d21`}
+ * @cssprop     {<color>} --pf-c-tooltip__content--Color
+ *              Sets the font color for the tooltip content.
+ *              {@default `#e0e0e0`}
+ * @cssprop     {<number>} --pf-c-tooltip--line-height
+ *              Sets the font color for the tooltip content.
+ *              {@default `1.5`}
+ * @cssprop     {<length>} --pf-c-tooltip--MaxWidth
+ *              Maximum width for the tooltip.
+ *              {@default `18.75rem`}
+ * @cssprop     --pf-c-tooltip--BoxShadow
+ *              Box shadow for the tooltip.
+ *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}
+ * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop
+ *              Top padding for the tooltip.
+ *              {@default `0.5rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight
+ *              Right padding for the tooltip.
+ *              {@default `0.5rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom
+ *              Bottom padding for the tooltip.
+ *              {@default `0.5rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft
+ *              Left Padding for the tooltip.
+ *              {@default `0.5rem`}
+ * @cssprop     --pf-c-tooltip__content--FontSize
+ *              Font size for the tooltip content.
+ *              {@default `0.875rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__arrow--Width
+ *              Tooltip arrow width.
+ *              {@default `0.5rem`}
+ * @cssprop     {<length>} --pf-c-tooltip__arrow--Height
+ *              Tooltip arrow height.
+ *              {@default `0.5rem`}
+ * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX
+ *              Positions the tooltip arrow along the x axis for `top` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY
+ *              Positions the tooltip arrow along the y axis for `top` positioned arrows.
+ *              {@default `50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate
+ *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.
+ *              {@default `45deg`}
+ * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX
+ *              Positions the tooltip arrow along the x axis for `right` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY
+ *              Positions the tooltip arrow along the y axis for `right` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate
+ *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.
+ *              {@default `45deg`}
+ * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX
+ *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY
+ *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate
+ *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.
+ *              {@default `45deg`}
+ * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX
+ *              Positions the tooltip arrow along the x axis for `left` positioned arrows.
+ *              {@default `50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY
+ *              Positions the tooltip arrow along the y axis for `left` positioned arrows.
+ *              {@default `-50%`}
+ * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate
+ *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.
+ *              {@default `45deg`}
+ */
+let PfTooltip = class PfTooltip extends BaseTooltip {
+    constructor() {
+        super(...arguments);
+        this.position = 'top';
+    }
+};
+PfTooltip.styles = [...BaseTooltip.styles, styles];
+__decorate([
+    property()
+], PfTooltip.prototype, "position", void 0);
+__decorate([
+    property()
+], PfTooltip.prototype, "content", void 0);
+PfTooltip = __decorate([
+    customElement('pf-tooltip')
+], PfTooltip);
+export { PfTooltip };
+//# sourceMappingURL=pf-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAGO,aAAQ,GAAc,KAAK,CAAC;IAI1C,CAAC;;AANiB,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE7C;IAAX,QAAQ,EAAE;2CAA6B;AAG5B;IAAX,QAAQ,EAAE;0CAAkB;AANlB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAOrB;SAPY,SAAS","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { customElement, property } from 'lit/decorators.js';\nimport { BaseTooltip } from './BaseTooltip.js';\n\nimport styles from './pf-tooltip.css';\n\n/**\n * Patternfly tooltip\n *\n * A Tooltip is a floating text area triggered by a user that provides helpful or contextual information.\n *\n * @summary Toggle the visiblity 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 BaseTooltip {\n  static readonly styles = [...BaseTooltip.styles, styles];\n\n  @property() position: Placement = 'top';\n\n  /** Tooltip content. Overridden by the content slot */\n  @property() content?: string;\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,50 @@
+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('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;IACH,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;aACZ,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;aAC1B,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IACpC,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  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\n"]}

package/pfe.d.ts

@@ -0,0 +1,19 @@
+export * from './pf-accordion/pf-accordion.js';
+export * from './pf-avatar/pf-avatar.js';
+export * from './pf-badge/pf-badge.js';
+export * from './pf-button/pf-button.js';
+export * from './pf-card/pf-card.js';
+export * from './pf-clipboard-copy/pf-clipboard-copy.js';
+export * from './pf-code-block/pf-code-block.js';
+export * from './pf-icon/pf-icon.js';
+export * from './pf-jump-links/pf-jump-links.js';
+export * from './pf-label/pf-label.js';
+export * from './pf-modal/pf-modal.js';
+export * from './pf-panel/pf-panel.js';
+export * from './pf-progress-stepper/pf-progress-stepper.js';
+export * from './pf-spinner/pf-spinner.js';
+export * from './pf-switch/pf-switch.js';
+export * from './pf-tabs/pf-tabs.js';
+export * from './pf-tile/pf-tile.js';
+export * from './pf-timestamp/pf-timestamp.js';
+export * from './pf-tooltip/pf-tooltip.js';

package/pfe.js

@@ -0,0 +1,20 @@
+export * from './pf-accordion/pf-accordion.js';
+export * from './pf-avatar/pf-avatar.js';
+export * from './pf-badge/pf-badge.js';
+export * from './pf-button/pf-button.js';
+export * from './pf-card/pf-card.js';
+export * from './pf-clipboard-copy/pf-clipboard-copy.js';
+export * from './pf-code-block/pf-code-block.js';
+export * from './pf-icon/pf-icon.js';
+export * from './pf-jump-links/pf-jump-links.js';
+export * from './pf-label/pf-label.js';
+export * from './pf-modal/pf-modal.js';
+export * from './pf-panel/pf-panel.js';
+export * from './pf-progress-stepper/pf-progress-stepper.js';
+export * from './pf-spinner/pf-spinner.js';
+export * from './pf-switch/pf-switch.js';
+export * from './pf-tabs/pf-tabs.js';
+export * from './pf-tile/pf-tile.js';
+export * from './pf-timestamp/pf-timestamp.js';
+export * from './pf-tooltip/pf-tooltip.js';
+//# sourceMappingURL=pfe.js.map