@patternfly/elements 2.0.5 → 2.1.0

package/pf-tile/pf-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;;;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAGuC,aAAQ,GAAG,KAAK,CAAC;IAG/D,CAAC;;AALiB,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAEU;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAMlB;SANY,MAAM","sourcesContent":["\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseTile } from './BaseTile.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n)\n\n/**\n * A tile component is a form of selection that can be used in place of a\n * radio button and is commonly used in forms. A tile appears visually similar to a\n * [selectable card](../card/). However, tiles are used specifically when the user is selecting\n * a static option, whereas a selectable card triggers an action or opens a quickstart\n * or sidebar to provide additional information.\n *\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n *\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n *\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n *\n * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}\n *\n * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}\n *\n * @cssprop   --pf-c-tile--Transition {@default `none`}\n * @cssprop   --pf-c-tile--TranslateY {@default `0`}\n *\n * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}\n * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}\n *\n * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}\n * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}\n *\n * @cssprop   --pf-c-tile--after--Transition {@default `none`}\n * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}\n *\n * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}\n * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}\n *\n * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}\n * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}\n *\n * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}\n */\n@customElement('pf-tile')\nexport class PfTile extends BaseTile {\n  static readonly styles = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n}\n}\n"]}
+{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;;;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAG8C,aAAQ,GAAG,KAAK,CAAC;IAG/D,CAAC;;AALiB,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEU;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAMlB;SANY,MAAM","sourcesContent":["\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseTile } from './BaseTile.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n)\n\n/**\n * A **tile** component is a form of selection that can be used in place of a\n * radio button and is commonly used in forms. A tile appears visually similar to a\n * [selectable card](../card/). However, tiles are used specifically when the user is selecting\n * a static option, whereas a selectable card triggers an action or opens a quickstart\n * or sidebar to provide additional information.\n *\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n *\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n *\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n *\n * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}\n *\n * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}\n *\n * @cssprop   --pf-c-tile--Transition {@default `none`}\n * @cssprop   --pf-c-tile--TranslateY {@default `0`}\n *\n * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}\n * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}\n *\n * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}\n * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}\n *\n * @cssprop   --pf-c-tile--after--Transition {@default `none`}\n * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}\n *\n * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}\n * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}\n *\n * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}\n * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}\n *\n * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}\n */\n@customElement('pf-tile')\nexport class PfTile extends BaseTile {\n  static readonly styles = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n}\n}\n"]}

package/pf-timestamp/pf-timestamp.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 /**
- * A timestamp provides consistent formats for displaying date and time values.
+ * A **timestamp** provides consistent formats for displaying date and time values.
  */
 export declare class PfTimestamp extends LitElement {
     #private;

package/pf-timestamp/pf-timestamp.js

@@ -11,7 +11,7 @@ const BooleanStringConverter = {
     },
 };
 /**
- * A timestamp provides consistent formats for displaying date and time values.
+ * A **timestamp** provides consistent formats for displaying date and time values.
  */
 let PfTimestamp = class PfTimestamp extends LitElement {
     constructor() {
@@ -48,7 +48,10 @@ let PfTimestamp = class PfTimestamp extends LitElement {
     `;
     }
 };
-_PfTimestamp_date = new WeakMap(), _PfTimestamp_isoString = new WeakMap(), _PfTimestamp_instances = new WeakSet(), _PfTimestamp_getTimeRelative = function _PfTimestamp_getTimeRelative(date) {
+_PfTimestamp_date = new WeakMap();
+_PfTimestamp_isoString = new WeakMap();
+_PfTimestamp_instances = new WeakSet();
+_PfTimestamp_getTimeRelative = function _PfTimestamp_getTimeRelative(date) {
     const ms = date.getTime() - Date.now();
     const tense = ms > 0 ? 'until' : 'ago';
     let str = 'just now';

package/pf-timestamp/pf-timestamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-timestamp.js","sourceRoot":"","sources":["pf-timestamp.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComplexAttributeConverter } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-timestamp.css';\n\nconst BooleanStringConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return !value || value === 'true';\n  },\n};\n\n/**\n * A timestamp provides consistent formats for displaying date and time values.\n */\n@customElement('pf-timestamp')\nexport class PfTimestamp extends LitElement {\n  static readonly styles = [style];\n\n  @property({ reflect: true })\n  get date() {\n    return this.#date.toLocaleString();\n  }\n\n  set date(string) {\n    this.#date = new Date(string);\n    this.#isoString = this.#date.toISOString();\n  }\n\n  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: 'full' | 'long' | 'medium' | 'short';\n\n  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: 'full' | 'long' | 'medium' | 'short';\n\n  @property({ attribute: false }) customFormat?: object;\n\n  @property({ reflect: true, attribute: 'display-suffix' }) displaySuffix?: string;\n\n  @property({ reflect: true }) locale?: string;\n\n  @property({ reflect: true, type: Boolean }) relative?: boolean;\n\n  @property({ reflect: true, type: Boolean }) utc?: boolean;\n\n  @property({ reflect: true, attribute: 'hour-12', converter: BooleanStringConverter }) hour12?: boolean;\n\n  #date = new Date();\n\n  #isoString = this.#date.toISOString();\n\n  get isoString() {\n    return this.#isoString;\n  }\n\n  get time() {\n    const { hour12, customFormat, dateFormat: dateStyle, timeFormat: timeStyle, utc } = this;\n    const timeZone = utc ? 'UTC' : undefined;\n    const formatOptions = customFormat || { hour12, dateStyle, timeStyle, timeZone };\n    const formattedDate = this.#date.toLocaleString(this.locale, formatOptions);\n    return this.relative ? this.#getTimeRelative(this.#date) : `${formattedDate}${this.displaySuffix ? ` ${this.displaySuffix}` : ''}`;\n  }\n\n  willUpdate() {\n    if (!this.displaySuffix && this.utc) {\n      this.displaySuffix = 'UTC';\n    }\n  }\n\n  render() {\n    return html`\n      <time datetime=\"${this.isoString}\">${this.time}</time>\n    `;\n  }\n\n  /**\n   * Based off of Github Relative Time\n   * https://github.com/github/time-elements/blob/master/src/relative-time.js\n   */\n  #getTimeRelative(date: Date) {\n    const ms: number = date.getTime() - Date.now();\n    const tense = ms > 0 ? 'until' : 'ago';\n    let str = 'just now';\n    const s = Math.round(Math.abs(ms) / 1000);\n    const min = Math.round(s / 60);\n    const h = Math.round(min / 60);\n    const d = Math.round(h / 24);\n    const m = Math.round(d / 30);\n    const y = Math.round(m / 12);\n    if (m >= 18) {\n      str = `${y} years`;\n    } else if (m >= 12) {\n      str = 'a year';\n    } else if (d >= 45) {\n      str = `${m} months`;\n    } else if (d >= 30) {\n      str = 'a month';\n    } else if (h >= 36) {\n      str = `${d} days`;\n    } else if (h >= 24) {\n      str = 'a day';\n    } else if (min >= 90) {\n      str = `${h} hours`;\n    } else if (min >= 45) {\n      str = 'an hour';\n    } else if (s >= 90) {\n      str = `${min} minutes`;\n    } else if (s >= 45) {\n      str = 'a minute';\n    } else if (s >= 10) {\n      str = `${s} seconds`;\n    }\n\n    return str !== 'just now' ? `${str} ${tense}` : str;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-timestamp': PfTimestamp;\n  }\n}\n"]}
+{"version":3,"file":"pf-timestamp.js","sourceRoot":"","sources":["pf-timestamp.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComplexAttributeConverter } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-timestamp.css';\n\nconst BooleanStringConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return !value || value === 'true';\n  },\n};\n\n/**\n * A **timestamp** provides consistent formats for displaying date and time values.\n */\n@customElement('pf-timestamp')\nexport class PfTimestamp extends LitElement {\n  static readonly styles = [style];\n\n  @property({ reflect: true })\n  get date() {\n    return this.#date.toLocaleString();\n  }\n\n  set date(string) {\n    this.#date = new Date(string);\n    this.#isoString = this.#date.toISOString();\n  }\n\n  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: 'full' | 'long' | 'medium' | 'short';\n\n  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: 'full' | 'long' | 'medium' | 'short';\n\n  @property({ attribute: false }) customFormat?: object;\n\n  @property({ reflect: true, attribute: 'display-suffix' }) displaySuffix?: string;\n\n  @property({ reflect: true }) locale?: string;\n\n  @property({ reflect: true, type: Boolean }) relative?: boolean;\n\n  @property({ reflect: true, type: Boolean }) utc?: boolean;\n\n  @property({ reflect: true, attribute: 'hour-12', converter: BooleanStringConverter }) hour12?: boolean;\n\n  #date = new Date();\n\n  #isoString = this.#date.toISOString();\n\n  get isoString() {\n    return this.#isoString;\n  }\n\n  get time() {\n    const { hour12, customFormat, dateFormat: dateStyle, timeFormat: timeStyle, utc } = this;\n    const timeZone = utc ? 'UTC' : undefined;\n    const formatOptions = customFormat || { hour12, dateStyle, timeStyle, timeZone };\n    const formattedDate = this.#date.toLocaleString(this.locale, formatOptions);\n    return this.relative ? this.#getTimeRelative(this.#date) : `${formattedDate}${this.displaySuffix ? ` ${this.displaySuffix}` : ''}`;\n  }\n\n  willUpdate() {\n    if (!this.displaySuffix && this.utc) {\n      this.displaySuffix = 'UTC';\n    }\n  }\n\n  render() {\n    return html`\n      <time datetime=\"${this.isoString}\">${this.time}</time>\n    `;\n  }\n\n  /**\n   * Based off of Github Relative Time\n   * https://github.com/github/time-elements/blob/master/src/relative-time.js\n   */\n  #getTimeRelative(date: Date) {\n    const ms: number = date.getTime() - Date.now();\n    const tense = ms > 0 ? 'until' : 'ago';\n    let str = 'just now';\n    const s = Math.round(Math.abs(ms) / 1000);\n    const min = Math.round(s / 60);\n    const h = Math.round(min / 60);\n    const d = Math.round(h / 24);\n    const m = Math.round(d / 30);\n    const y = Math.round(m / 12);\n    if (m >= 18) {\n      str = `${y} years`;\n    } else if (m >= 12) {\n      str = 'a year';\n    } else if (d >= 45) {\n      str = `${m} months`;\n    } else if (d >= 30) {\n      str = 'a month';\n    } else if (h >= 36) {\n      str = `${d} days`;\n    } else if (h >= 24) {\n      str = 'a day';\n    } else if (min >= 90) {\n      str = `${h} hours`;\n    } else if (min >= 45) {\n      str = 'an hour';\n    } else if (s >= 90) {\n      str = `${min} minutes`;\n    } else if (s >= 45) {\n      str = 'a minute';\n    } else if (s >= 10) {\n      str = `${s} seconds`;\n    }\n\n    return str !== 'just now' ? `${str} ${tense}` : str;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-timestamp': PfTimestamp;\n  }\n}\n"]}

package/pf-tooltip/BaseTooltip.js

@@ -8,11 +8,10 @@ import { css } from "lit";
 const style = css `: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 .3s cubic-bezier(.54, 1.5, .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 #tooltip::after{right:calc(-.5 * var(--_floating-arrow-size))}.left.center #tooltip::after{top:calc(50% - .5 * var(--_floating-arrow-size))}.left.start #tooltip::after{top:var(--_floating-arrow-size)}.left.end #tooltip::after{bottom:var(--_floating-arrow-size)}.top #tooltip::after{top:calc(100% - .5 * var(--_floating-arrow-size))}.top.center #tooltip::after{right:calc(50% - .5 * var(--_floating-arrow-size))}.top.start #tooltip::after{left:var(--_floating-arrow-size)}.top.end #tooltip::after{right:var(--_floating-arrow-size)}.right #tooltip::after{right:calc(100% - .5 * var(--_floating-arrow-size))}.right.center #tooltip::after{top:calc(50% - .5 * var(--_floating-arrow-size))}.right.start #tooltip::after{top:var(--_floating-arrow-size)}.right.end #tooltip::after{bottom:var(--_floating-arrow-size)}.bottom #tooltip::after{bottom:calc(100% - .5 * var(--_floating-arrow-size))}.bottom.center #tooltip::after{right:calc(50% - .5 * var(--_floating-arrow-size))}.bottom.start #tooltip::after{left:var(--_floating-arrow-size)}.bottom.end #tooltip::after{right:var(--_floating-arrow-size)}`;
 const enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];
 const exitEvents = ['focusout', 'blur', 'mouseleave'];
-export class BaseTooltip extends LitElement {
+class BaseTooltip extends LitElement {
     constructor() {
         super(...arguments);
         _BaseTooltip_float.set(this, new FloatingDOMController(this, {
-            arrow: true,
             content: () => this.shadowRoot?.querySelector('#tooltip'),
         }));
     }
@@ -49,4 +48,5 @@ export class BaseTooltip extends LitElement {
 }
 _BaseTooltip_float = new WeakMap();
 BaseTooltip.styles = [style];
+export { BaseTooltip };
 //# sourceMappingURL=BaseTooltip.js.map

package/pf-tooltip/BaseTooltip.js.map

@@ -1 +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,CAAqB,KAAK,IAAI,CAAC,OAAO;;KAE1E,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"]}
+{"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,MAAsB,WAAY,SAAQ,UAAU;IAApD;;QAQE,6BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,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,CAAqB,KAAK,IAAI,CAAC,OAAO;;KAE1E,CAAC;IACJ,CAAC;;;AA7Ce,kBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;SADb,WAAW","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    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/pf-tooltip.d.ts

@@ -1,7 +1,7 @@
 import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 import { BaseTooltip } from './BaseTooltip.js';
 /**
- * A tooltip is in-app messaging used to identify elements on a page with short,
+ * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
  *
  * @summary Toggle the visibility of helpful or contextual information.

package/pf-tooltip/pf-tooltip.js

@@ -5,7 +5,7 @@ import { BaseTooltip } from './BaseTooltip.js';
 import { css } from "lit";
 const styles = css `: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 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));padding:var(--pf-c-tooltip__content--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingRight,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingLeft,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-tooltip__content--Color,var(--pf-global--Color--light-100,#fff));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))}`;
 /**
- * A tooltip is in-app messaging used to identify elements on a page with short,
+ * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
  *
  * @summary Toggle the visibility of helpful or contextual information.

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;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 } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { BaseTooltip } from './BaseTooltip.js';\n\nimport styles from './pf-tooltip.css';\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 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"]}
+{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AAEH,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAA1C;;QAGc,aAAQ,GAAc,KAAK,CAAC;IAI1C,CAAC;;AANiB,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;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 } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { BaseTooltip } from './BaseTooltip.js';\n\nimport styles from './pf-tooltip.css';\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 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"]}