igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/tooltip/service.js.map

@@ -1 +1 @@
-{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../src/components/tooltip/service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAKlD,MAAM,sBAAsB;IAA5B;QACU,gBAAW,GAAG,IAAI,GAAG,EAA4C,CAAC;IA6C5E,CAAC;IA3CS,YAAY,CAAC,KAAK,GAAG,IAAI;QAE/B,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAC9B,KAAK;gBACH,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC;gBAC9C,CAAC,CAAC,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAEM,GAAG,CACR,QAA6B,EAC7B,YAAiC;QAEjC,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC/C,CAAC;IAEM,MAAM,CAAC,QAA6B;QACzC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAClC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAGM,KAAK,CAAC,WAAW,CAAC,KAAoB;QAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QACzE,MAAM,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;CACF;AAED,MAAM,OAAO,GAAG,IAAI,sBAAsB,EAAE,CAAC;AAC7C,eAAe,OAAO,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport { escapeKey } from '../common/controllers/key-bindings.js';\nimport { isEmpty, last } from '../common/util.js';\nimport type IgcTooltipComponent from './tooltip.js';\n\ntype TooltipHideCallback = () => unknown;\n\nclass TooltipEscapeCallbacks {\n  private _collection = new Map<IgcTooltipComponent, TooltipHideCallback>();\n\n  private _setListener(state = true): void {\n    /* c8 ignore next 3 */\n    if (isServer) {\n      return;\n    }\n\n    if (isEmpty(this._collection)) {\n      state\n        ? globalThis.addEventListener('keydown', this)\n        : globalThis.removeEventListener('keydown', this);\n    }\n  }\n\n  public add(\n    instance: IgcTooltipComponent,\n    hideCallback: TooltipHideCallback\n  ): void {\n    if (this._collection.has(instance)) {\n      return;\n    }\n\n    this._setListener();\n    this._collection.set(instance, hideCallback);\n  }\n\n  public remove(instance: IgcTooltipComponent): void {\n    if (!this._collection.has(instance)) {\n      return;\n    }\n\n    this._collection.delete(instance);\n    this._setListener(false);\n  }\n\n  /** @internal */\n  public async handleEvent(event: KeyboardEvent): Promise<void> {\n    if (event.key !== escapeKey) {\n      return;\n    }\n\n    const [tooltip, callback] = last(Array.from(this._collection.entries()));\n    await callback?.call(tooltip);\n  }\n}\n\nconst service = new TooltipEscapeCallbacks();\nexport default service;\n"]}
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../src/components/tooltip/service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAK7D,MAAM,sBAAsB;IAA5B;QACU,gBAAW,GAAG,IAAI,GAAG,EAA4C,CAAC;IAyC5E,CAAC;IAtCS,aAAa;QAEnB,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;YACvB,CAAC,CAAC,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC;YACjD,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACnD,CAAC;IAEM,GAAG,CACR,QAA6B,EAC7B,YAAiC;QAEjC,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEM,MAAM,CAAC,QAA6B;QACzC,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAGM,KAAK,CAAC,WAAW,CAAC,KAAoB;QAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAGD,MAAM,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;IAC1D,CAAC;CACF;AAED,MAAM,OAAO,GAAG,IAAI,sBAAsB,EAAE,CAAC;AAC7C,eAAe,OAAO,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport { escapeKey } from '#internals/controllers/key-bindings.js';\nimport { isEmpty, lastOf } from '#internals/utils/arrays.js';\nimport type IgcTooltipComponent from './tooltip.js';\n\ntype TooltipHideCallback = () => unknown;\n\nclass TooltipEscapeCallbacks {\n  private _collection = new Map<IgcTooltipComponent, TooltipHideCallback>();\n\n  /** Keeps the global `keydown` listener bound while any tooltip is shown. */\n  private _syncListener(): void {\n    /* c8 ignore next 3 */\n    if (isServer) {\n      return;\n    }\n\n    isEmpty(this._collection)\n      ? globalThis.removeEventListener('keydown', this)\n      : globalThis.addEventListener('keydown', this);\n  }\n\n  public add(\n    instance: IgcTooltipComponent,\n    hideCallback: TooltipHideCallback\n  ): void {\n    if (this._collection.has(instance)) {\n      return;\n    }\n\n    this._collection.set(instance, hideCallback);\n    this._syncListener();\n  }\n\n  public remove(instance: IgcTooltipComponent): void {\n    if (this._collection.delete(instance)) {\n      this._syncListener();\n    }\n  }\n\n  /** @internal */\n  public async handleEvent(event: KeyboardEvent): Promise<void> {\n    if (event.key !== escapeKey) {\n      return;\n    }\n\n    // The last registered tooltip is the last one shown.\n    await lastOf(Array.from(this._collection.values()))?.();\n  }\n}\n\nconst service = new TooltipEscapeCallbacks();\nexport default service;\n"]}

package/components/tooltip/themes/shared/tooltip.common.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `[part=base]{background:var(--background);color:var(--text-color);border-radius:var(--border-radius);box-shadow:var(--elevation)}#arrow[part=top],#arrow[part=bottom]{border-left:.25rem solid rgba(0,0,0,0);border-right:.25rem solid rgba(0,0,0,0)}#arrow[part=top]{border-top:.25rem solid var(--background)}#arrow[part=bottom]{border-bottom:.25rem solid var(--background)}#arrow[part=left],#arrow[part=right]{border-top:.25rem solid rgba(0,0,0,0);border-bottom:.25rem solid rgba(0,0,0,0)}#arrow[part=left]{border-left:.25rem solid var(--background)}#arrow[part=right]{border-right:.25rem solid var(--background)}`;
+export const styles = css `[part~=base]{background:var(--background);color:var(--text-color);border-radius:var(--border-radius);box-shadow:var(--elevation)}#arrow[part~=top],#arrow[part~=bottom]{border-left:.25rem solid rgba(0,0,0,0);border-right:.25rem solid rgba(0,0,0,0)}#arrow[part~=top]{border-top:.25rem solid var(--background)}#arrow[part~=bottom]{border-bottom:.25rem solid var(--background)}#arrow[part~=left],#arrow[part~=right]{border-top:.25rem solid rgba(0,0,0,0);border-bottom:.25rem solid rgba(0,0,0,0)}#arrow[part~=left]{border-left:.25rem solid var(--background)}#arrow[part~=right]{border-right:.25rem solid var(--background)}`;
 //# sourceMappingURL=tooltip.common.css.js.map

package/components/tooltip/themes/shared/tooltip.common.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.common.css.js","sourceRoot":"","sources":["../../../../../src/components/tooltip/themes/shared/tooltip.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kmBAAkmB,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part=base]{background:var(--background);color:var(--text-color);border-radius:var(--border-radius);box-shadow:var(--elevation)}#arrow[part=top],#arrow[part=bottom]{border-left:.25rem solid rgba(0,0,0,0);border-right:.25rem solid rgba(0,0,0,0)}#arrow[part=top]{border-top:.25rem solid var(--background)}#arrow[part=bottom]{border-bottom:.25rem solid var(--background)}#arrow[part=left],#arrow[part=right]{border-top:.25rem solid rgba(0,0,0,0);border-bottom:.25rem solid rgba(0,0,0,0)}#arrow[part=left]{border-left:.25rem solid var(--background)}#arrow[part=right]{border-right:.25rem solid var(--background)}`;\n  "]}
+{"version":3,"file":"tooltip.common.css.js","sourceRoot":"","sources":["../../../../../src/components/tooltip/themes/shared/tooltip.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2mBAA2mB,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part~=base]{background:var(--background);color:var(--text-color);border-radius:var(--border-radius);box-shadow:var(--elevation)}#arrow[part~=top],#arrow[part~=bottom]{border-left:.25rem solid rgba(0,0,0,0);border-right:.25rem solid rgba(0,0,0,0)}#arrow[part~=top]{border-top:.25rem solid var(--background)}#arrow[part~=bottom]{border-bottom:.25rem solid var(--background)}#arrow[part~=left],#arrow[part~=right]{border-top:.25rem solid rgba(0,0,0,0);border-bottom:.25rem solid rgba(0,0,0,0)}#arrow[part~=left]{border-left:.25rem solid var(--background)}#arrow[part~=right]{border-right:.25rem solid var(--background)}`;\n  "]}

package/components/tooltip/themes/shared/tooltip.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `[part=base]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}`;
+export const styles = css `[part~=base]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}`;
 //# sourceMappingURL=tooltip.indigo.css.js.map

package/components/tooltip/themes/shared/tooltip.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tooltip/themes/shared/tooltip.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kcAAkc,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part=base]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}`;\n  "]}
+{"version":3,"file":"tooltip.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tooltip/themes/shared/tooltip.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mcAAmc,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part~=base]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}`;\n  "]}

package/components/tooltip/themes/themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/tooltip/themes/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/tooltip/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/tooltip.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/tooltip.fluent.css.js';\nimport { styles as indigoDark } from './dark/tooltip.indigo.css.js';\nimport { styles as materialDark } from './dark/tooltip.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/tooltip.bootstrap.css.js';\nimport { styles as fluentLight } from './light/tooltip.fluent.css.js';\nimport { styles as indigoLight } from './light/tooltip.indigo.css.js';\nimport { styles as materialLight } from './light/tooltip.material.css.js';\nimport { styles as shared } from './light/tooltip.shared.css.js';\nimport { styles as indigo } from './shared/tooltip.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/tooltip/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/tooltip.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/tooltip.fluent.css.js';\nimport { styles as indigoDark } from './dark/tooltip.indigo.css.js';\nimport { styles as materialDark } from './dark/tooltip.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/tooltip.bootstrap.css.js';\nimport { styles as fluentLight } from './light/tooltip.fluent.css.js';\nimport { styles as indigoLight } from './light/tooltip.indigo.css.js';\nimport { styles as materialLight } from './light/tooltip.material.css.js';\nimport { styles as shared } from './light/tooltip.shared.css.js';\nimport { styles as indigo } from './shared/tooltip.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/tooltip/themes/tooltip.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{position:fixed;display:flex;align-items:center;text-align:center}[part~=base]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));font-size:.625rem;font-weight:600;line-height:1rem;text-align:start;display:flex;align-items:flex-start;gap:.5rem;position:relative}[part~=simple-text]{max-width:200px}#arrow{position:absolute;width:0;height:0}igc-popover::part(container){background-color:rgba(0,0,0,0)}slot[name=close-button] igc-icon{--component-size: 1}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{position:fixed;display:flex;align-items:center;text-align:center}[part~=base]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));font-size:.625rem;font-weight:600;line-height:1rem;text-align:start;display:flex;align-items:flex-start;gap:.5rem;position:relative}[part~=simple-text]{max-width:200px}#arrow{position:absolute;width:0;height:0}igc-popover::part(container){background-color:rgba(0,0,0,0)}slot[name=close-button] button{display:flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer}slot[name=close-button] igc-icon{--component-size: 1}`;
 //# sourceMappingURL=tooltip.base.css.js.map

package/components/tooltip/themes/tooltip.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.base.css.js","sourceRoot":"","sources":["../../../../src/components/tooltip/themes/tooltip.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u9EAAu9E,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{position:fixed;display:flex;align-items:center;text-align:center}[part~=base]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));font-size:.625rem;font-weight:600;line-height:1rem;text-align:start;display:flex;align-items:flex-start;gap:.5rem;position:relative}[part~=simple-text]{max-width:200px}#arrow{position:absolute;width:0;height:0}igc-popover::part(container){background-color:rgba(0,0,0,0)}slot[name=close-button] igc-icon{--component-size: 1}`;\n  "]}
+{"version":3,"file":"tooltip.base.css.js","sourceRoot":"","sources":["../../../../src/components/tooltip/themes/tooltip.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ylFAAylF,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{position:fixed;display:flex;align-items:center;text-align:center}[part~=base]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);padding:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));font-size:.625rem;font-weight:600;line-height:1rem;text-align:start;display:flex;align-items:flex-start;gap:.5rem;position:relative}[part~=simple-text]{max-width:200px}#arrow{position:absolute;width:0;height:0}igc-popover::part(container){background-color:rgba(0,0,0,0)}slot[name=close-button] button{display:flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer}slot[name=close-button] igc-icon{--component-size: 1}`;\n  "]}

package/components/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, type PropertyValues } from 'lit';
-import type { Constructor } from '../common/mixins/constructor.js';
+import type { Constructor } from '#internals/mixins/constructor.js';
 import { type PopoverPlacement } from '../popover/popover.js';
 export interface IgcTooltipComponentEventMap {
     igcOpening: CustomEvent<void>;
@@ -7,7 +7,7 @@ export interface IgcTooltipComponentEventMap {
     igcClosing: CustomEvent<void>;
     igcClosed: CustomEvent<void>;
 }
-declare const IgcTooltipComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTooltipComponentEventMap>> & Constructor<LitElement>;
+declare const IgcTooltipComponent_base: Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcTooltipComponentEventMap>> & Constructor<LitElement>;
 /**
  * Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus).
  * It offers features such as placement customization, delays, sticky mode, and animations.
@@ -19,6 +19,7 @@ declare const IgcTooltipComponent_base: Constructor<import("../common/mixins/eve
  *
  * @csspart base - The wrapping container of the tooltip content.
  * @csspart simple-text - The container where the message property of the tooltip is rendered.
+ * @csspart close-button - The default sticky-mode close button.
  *
  * @fires igcOpening - Emitted before the tooltip begins to open. Can be canceled to prevent opening.
  * @fires igcOpened - Emitted after the tooltip has successfully opened and is visible.
@@ -36,12 +37,27 @@ export default class IgcTooltipComponent extends IgcTooltipComponent_base {
     private readonly _slots;
     private readonly _showAnimation;
     private readonly _hideAnimation;
-    private _timeoutId?;
-    private _autoHideDelay;
+    /** The queued, not yet committed transition, if a delay is in effect. */
+    private _pending?;
+    /** A commit that finishes with a stale id has been superseded. */
+    private _transitionId;
+    private _animating;
+    /**
+     * The state the tooltip is heading to. A show commits `open` upfront so the
+     * popover renders; a hide commits it only once its animation is done.
+     */
+    private _requestedState;
     private _showDelay;
     private _hideDelay;
-    private _arrowElement;
+    private readonly _popover;
+    private readonly _arrowElement;
     private get _arrowOffset();
+    /**
+     * Whether the consumer projected anything into the default slot. Queried
+     * without flattening, which would report the rendered `message` - the slot's
+     * own fallback content - as if it came from the consumer.
+     */
+    private get _hasProjectedContent();
     /**
      * Whether the tooltip is showing.
      *
@@ -65,7 +81,7 @@ export default class IgcTooltipComponent extends IgcTooltipComponent_base {
      */
     offset: number;
     /**
-     * Where to place the floating element relative to the parent anchor element.
+     * Where to place the tooltip relative to its anchor element.
      *
      * @attr placement
      * @default bottom
@@ -75,7 +91,7 @@ export default class IgcTooltipComponent extends IgcTooltipComponent_base {
      * An element instance or an IDREF to use as the anchor for the tooltip.
      *
      * @remarks
-     * Trying to bind to an IDREF that does not exist in the current DOM root at will not work.
+     * Trying to bind to an IDREF that does not exist in the current DOM root will not work.
      * In such scenarios, it is better to get a DOM reference and pass it to the tooltip instance.
      *
      * @attr anchor
@@ -83,19 +99,19 @@ export default class IgcTooltipComponent extends IgcTooltipComponent_base {
     anchor?: Element | string;
     /**
      * Which event triggers will show the tooltip.
-     * Expects a comma separate string of different event triggers.
+     * Expects a comma separated string of different event triggers.
      *
      * @attr show-triggers
-     * @default pointerenter
+     * @default pointerenter,focusin
      */
     set showTriggers(value: string);
     get showTriggers(): string;
     /**
      * Which event triggers will hide the tooltip.
-     * Expects a comma separate string of different event triggers.
+     * Expects a comma separated string of different event triggers.
      *
      * @attr hide-triggers
-     * @default pointerleave, click
+     * @default pointerleave,click,focusout
      */
     set hideTriggers(value: string);
     get hideTriggers(): string;
@@ -116,7 +132,7 @@ export default class IgcTooltipComponent extends IgcTooltipComponent_base {
     set hideDelay(value: number);
     get hideDelay(): number;
     /**
-     * Specifies a plain text as tooltip content.
+     * Specifies plain text as the tooltip content.
      *
      * @attr message
      */
@@ -130,24 +146,54 @@ export default class IgcTooltipComponent extends IgcTooltipComponent_base {
     sticky: boolean;
     constructor();
     protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     private _emitEvent;
+    /**
+     * Invalidates the queued and/or running transition, resolving a delayed one
+     * with `false`. The caller must settle the state it left behind.
+     *
+     * @returns Whether the aborted transition was mid-animation.
+     */
+    private _abortTransition;
+    /** Lands the tooltip on `state` after its transition was aborted. */
+    private _settleState;
+    /**
+     * Drops a queued or running transition and settles on `state`, by default
+     * the state the tooltip is already committed to.
+     */
+    private _cancelTransition;
     private _applyTooltipState;
     /**
-     *  Shows the tooltip if not already showing.
-     *  If a target is provided, sets it as a transient anchor.
+     * Shows the tooltip if not already showing.
+     * If a target is provided, sets it as a transient anchor.
+     *
+     * @remarks
+     * Bypasses `showDelay` and does not emit `igcOpening`/`igcOpened`.
+     * Resolves with whether the tooltip transitioned to a shown state.
      */
     show(target?: Element | string): Promise<boolean>;
-    /** Hides the tooltip if not already hidden. */
+    /**
+     * Hides the tooltip if not already hidden.
+     *
+     * @remarks
+     * Bypasses `hideDelay` and does not emit `igcClosing`/`igcClosed`.
+     * Resolves with whether the tooltip transitioned to a hidden state.
+     */
     hide(): Promise<boolean>;
-    /** Toggles the tooltip between shown/hidden state */
+    /**
+     * Toggles the tooltip between shown/hidden state.
+     *
+     * @remarks
+     * Resolves with whether the tooltip transitioned to the opposite state.
+     */
     toggle(): Promise<boolean>;
     protected _showWithEvent(): Promise<boolean>;
     protected _hideWithEvent(): Promise<boolean>;
     private _showOnInteraction;
-    private _stopTimeoutAndAnimation;
-    private _setAutoHide;
     private _hideOnInteraction;
+    /** Sticky mode close action - closes without waiting out `hideDelay`. */
+    private _hideOnCloseClick;
     private _hideOnEscape;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/components/tooltip/tooltip.js

@@ -7,23 +7,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { EaseOut } from '../../animations/easings.js';
-import { addAnimationController } from '../../animations/player.js';
-import { fadeOut } from '../../animations/presets/fade/index.js';
-import { scaleInCenter } from '../../animations/presets/scale/index.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addInternalsController } from '../common/controllers/internals.js';
-import { addSlotController, setSlots } from '../common/controllers/slot.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { partMap } from '../common/part-map.js';
-import { asNumber, isLTR } from '../common/util.js';
+import { EaseOut } from '#animations/easings.js';
+import { addAnimationController } from '#animations/player.js';
+import { fadeOut } from '#animations/presets/fade/index.js';
+import { scaleInCenter } from '#animations/presets/scale/index.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { partMap } from '#internals/part-map.js';
+import { isElement, isLTR } from '#internals/utils/dom.js';
+import { asNumber } from '#internals/utils/math.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcPopoverComponent from '../popover/popover.js';
-import { addTooltipController, TooltipRegexes } from './controller.js';
+import { addTooltipController } from './controller.js';
 import { styles as shared } from './themes/shared/tooltip.common.css.js';
 import { all } from './themes/themes.js';
 import { styles } from './themes/tooltip.base.css.js';
+const ARROW_OFFSET = 8;
 export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
     static { this.tagName = 'igc-tooltip'; }
     static { this.styles = [styles, shared]; }
@@ -31,23 +33,23 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
         registerComponent(IgcTooltipComponent, IgcPopoverComponent, IgcIconComponent);
     }
     get _arrowOffset() {
-        if (this.placement.includes('-')) {
-            if (TooltipRegexes.horizontalStart.test(this.placement)) {
-                return -8;
-            }
-            if (TooltipRegexes.horizontalEnd.test(this.placement)) {
-                return 8;
-            }
-            if (TooltipRegexes.start.test(this.placement)) {
-                return isLTR(this) ? -8 : 8;
-            }
-            if (TooltipRegexes.end.test(this.placement)) {
-                return isLTR(this) ? 8 : -8;
-            }
+        const [side, alignment] = this.placement.split('-');
+        if (!alignment) {
+            return 0;
         }
-        return 0;
+        const offset = alignment === 'start' ? -ARROW_OFFSET : ARROW_OFFSET;
+        const isHorizontal = side === 'left' || side === 'right';
+        return isHorizontal || isLTR(this) ? offset : -offset;
+    }
+    get _hasProjectedContent() {
+        return this._slots
+            .getAssignedNodes('[default]')
+            .some((node) => isElement(node) ||
+            (node.nodeType === Node.TEXT_NODE &&
+                Boolean(node.textContent?.trim())));
     }
     set open(value) {
+        this._requestedState = value;
         this._controller.open = value;
     }
     get open() {
@@ -87,10 +89,11 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
             },
         });
         this._controller = addTooltipController(this, {
-            onShow: this._showOnInteraction,
-            onHide: this._hideOnInteraction,
-            onEscape: this._hideOnEscape,
-            onClick: this._stopTimeoutAndAnimation,
+            onShow: () => this._showOnInteraction(),
+            onHide: () => this._hideOnInteraction(),
+            onEscape: () => this._hideOnEscape(),
+            onClick: () => this._cancelTransition(),
+            onReset: () => this._cancelTransition(false),
         });
         this._containerRef = createRef();
         this._player = addAnimationController(this, this._containerRef);
@@ -105,7 +108,9 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
             duration: 75,
             easing: EaseOut.Sine,
         });
-        this._autoHideDelay = 180;
+        this._transitionId = 0;
+        this._animating = false;
+        this._requestedState = false;
         this._showDelay = 200;
         this._hideDelay = 300;
         this.withArrow = false;
@@ -119,10 +124,14 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
         if (this.open) {
             this.updateComplete.then(() => {
                 this._player.playExclusive(this._showAnimation);
-                this.requestUpdate();
             });
         }
     }
+    updated(changedProperties) {
+        if (changedProperties.has('withArrow')) {
+            this._popover.arrow = this.withArrow ? this._arrowElement : null;
+        }
+    }
     willUpdate(changedProperties) {
         if (changedProperties.has('anchor')) {
             this._controller.resolveAnchor(this.anchor);
@@ -136,19 +145,53 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
             cancelable: name === 'igcOpening' || name === 'igcClosing',
         });
     }
+    _abortTransition() {
+        const wasAnimating = this._animating;
+        this._transitionId++;
+        this._animating = false;
+        clearTimeout(this._pending?.timer);
+        this._pending?.resolve(false);
+        this._pending = undefined;
+        return wasAnimating;
+    }
+    _settleState(state, wasAnimating) {
+        this._requestedState = state;
+        if (wasAnimating) {
+            this._player.cancelAll();
+            this.inert = false;
+        }
+        if (this.open !== state) {
+            this.open = state;
+        }
+    }
+    _cancelTransition(state = this.open) {
+        this._settleState(state, this._abortTransition());
+    }
     async _applyTooltipState({ show, withDelay = false, withEvents = false, }) {
-        if (show === this.open) {
+        if (show === this._requestedState) {
+            return false;
+        }
+        const wasAnimating = this._abortTransition();
+        this._requestedState = show;
+        if (show === this.open && !wasAnimating) {
             return false;
         }
         if (withEvents && !this._emitEvent(show ? 'igcOpening' : 'igcClosing')) {
+            this._settleState(!show, wasAnimating);
             return false;
         }
+        const id = this._transitionId;
         const commitStateChange = async () => {
             if (show) {
                 this.open = true;
             }
             this.inert = true;
+            this._animating = true;
             const animationComplete = await this._player.playExclusive(show ? this._showAnimation : this._hideAnimation);
+            if (id !== this._transitionId) {
+                return false;
+            }
+            this._animating = false;
             this.inert = false;
             this.open = show;
             if (animationComplete && withEvents) {
@@ -156,17 +199,20 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
             }
             return animationComplete;
         };
-        if (withDelay) {
-            clearTimeout(this._timeoutId);
-            return new Promise(() => {
-                this._timeoutId = setTimeout(async () => await commitStateChange(), show ? this.showDelay : this.hideDelay);
-            });
+        if (!withDelay) {
+            return commitStateChange();
         }
-        return commitStateChange();
+        return new Promise((resolve) => {
+            const timer = setTimeout(() => {
+                this._pending = undefined;
+                commitStateChange().then(resolve);
+            }, show ? this.showDelay : this.hideDelay);
+            this._pending = { timer, resolve };
+        });
     }
     async show(target) {
         if (target) {
-            this._stopTimeoutAndAnimation();
+            this._cancelTransition();
             this._controller.setAnchor(target, true);
         }
         return await this._applyTooltipState({ show: true });
@@ -192,30 +238,26 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
         });
     }
     _showOnInteraction() {
-        this._stopTimeoutAndAnimation();
+        this._cancelTransition();
         this._showWithEvent();
     }
-    _stopTimeoutAndAnimation() {
-        clearTimeout(this._timeoutId);
-        this._player.cancelAll();
-    }
-    _setAutoHide() {
-        this._stopTimeoutAndAnimation();
-        this._timeoutId = setTimeout(this._hideWithEvent.bind(this), this._autoHideDelay);
-    }
     _hideOnInteraction() {
         if (!this.sticky) {
-            this._setAutoHide();
+            this._hideWithEvent();
         }
     }
+    _hideOnCloseClick() {
+        this._applyTooltipState({ show: false, withEvents: true });
+    }
     async _hideOnEscape() {
-        await this.hide();
-        this._emitEvent('igcClosed');
+        if (await this.hide()) {
+            this._emitEvent('igcClosed');
+        }
     }
     render() {
         const parts = {
             base: true,
-            'simple-text': !this._slots.hasAssignedNodes('[default]', true),
+            'simple-text': !this._hasProjectedContent,
         };
         return html `
       <igc-popover
@@ -223,7 +265,6 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
         .placement=${this.placement}
         .offset=${this.offset}
         .anchor=${this._controller.anchor ?? undefined}
-        .arrow=${this.withArrow ? this._arrowElement : null}
         .arrowOffset=${this._arrowOffset}
         .shiftPadding=${8}
         ?open=${this.open}
@@ -234,14 +275,20 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
           <slot>${this.message}</slot>
           ${this.sticky
             ? html `
-                <slot name="close-button" @click=${this._setAutoHide}>
-                  <igc-icon
-                    name="input_clear"
-                    collection="default"
-                    aria-hidden="true"
-                  ></igc-icon>
-                </slot>
-              `
+                  <slot name="close-button" @click=${this._hideOnCloseClick}>
+                    <button
+                      type="button"
+                      part="close-button"
+                      aria-label="Close"
+                    >
+                      <igc-icon
+                        name="input_clear"
+                        collection="default"
+                        aria-hidden="true"
+                      ></igc-icon>
+                    </button>
+                  </slot>
+                `
             : nothing}
           ${this.withArrow ? html `<div id="arrow"></div>` : nothing}
         </div>
@@ -249,6 +296,9 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
+__decorate([
+    query('igc-popover', true)
+], IgcTooltipComponent.prototype, "_popover", void 0);
 __decorate([
     query('#arrow')
 ], IgcTooltipComponent.prototype, "_arrowElement", void 0);