agnosticui-core 2.0.0-alpha.2

package/dist/components/Tooltip/core/_Tooltip.js

@@ -0,0 +1,207 @@
+import { LitElement as g, css as _, html as w } from "lit";
+import { n } from "../../../property-CemaeiRl.js";
+import { r as E } from "../../../state-CovhUvdr.js";
+import { e as c } from "../../../query-BykXNUlT.js";
+import { a as y, c as b, o as L, f as k, s as x, b as C } from "../../../floating-ui.dom-muqvZJIo.js";
+var S = Object.defineProperty, s = (d, t, e, r) => {
+  for (var o = void 0, h = d.length - 1, l; h >= 0; h--)
+    (l = d[h]) && (o = l(t, e, o) || o);
+  return o && S(t, e, o), o;
+}, a;
+let i = (a = class extends g {
+  constructor() {
+    super(), this._handleMouseEnter = () => {
+      this.disabled || (clearTimeout(this._hideTimeout), this.show());
+    }, this._handleMouseLeave = () => {
+      this.disabled || (this._hideTimeout = window.setTimeout(() => {
+        this.hide();
+      }, 100));
+    }, this._handleFocus = () => {
+      this.disabled || this.show();
+    }, this._handleBlur = () => {
+      this.disabled || this.hide();
+    }, this._handleClick = () => {
+      this.disabled || (this._open ? this.hide() : this.show());
+    }, this._handleDocumentKeyDown = (t) => {
+      t.key === "Escape" && this._open && this.hide();
+    }, this.show = () => {
+      this._open || this.disabled || (this._open = !0);
+    }, this.hide = () => {
+      this._open && (this._open = !1);
+    }, this.toggle = () => {
+      this._open ? this.hide() : this.show();
+    }, this.content = "", this.placement = "top", this.distance = 8, this.skidding = 0, this.trigger = "hover focus", this.disabled = !1, this._open = !1;
+  }
+  firstUpdated() {
+    this._setupEventListeners(), this._setupARIA();
+  }
+  _setupEventListeners() {
+    const t = this.firstElementChild;
+    t && (this.trigger.includes("hover") && (this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseleave", this._handleMouseLeave)), this.trigger.includes("focus") && (t.addEventListener("focus", this._handleFocus), t.addEventListener("blur", this._handleBlur)), this.trigger.includes("click") && t.addEventListener("click", this._handleClick));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cleanup?.(), this._removeEventListeners(), document.removeEventListener("keydown", this._handleDocumentKeyDown);
+  }
+  _setupARIA() {
+  }
+  _removeEventListeners() {
+    const t = this.firstElementChild;
+    t && (this.removeEventListener("mouseenter", this._handleMouseEnter), this.removeEventListener("mouseleave", this._handleMouseLeave), t.removeEventListener("focus", this._handleFocus), t.removeEventListener("blur", this._handleBlur), t.removeEventListener("click", this._handleClick));
+  }
+  updated(t) {
+    if (super.updated(t), t.has("_open"))
+      if (this._open) {
+        document.addEventListener("keydown", this._handleDocumentKeyDown), this.updateComplete.then(() => {
+          this._startPositioning();
+        });
+        const e = new CustomEvent("show", {
+          detail: { visible: !0 },
+          bubbles: !0,
+          composed: !0
+        });
+        this.dispatchEvent(e), this.onShow && this.onShow(e);
+      } else {
+        this._stopPositioning(), document.removeEventListener("keydown", this._handleDocumentKeyDown);
+        const e = new CustomEvent("hide", {
+          detail: { visible: !1 },
+          bubbles: !0,
+          composed: !0
+        });
+        this.dispatchEvent(e), this.onHide && this.onHide(e);
+      }
+  }
+  _startPositioning() {
+    const t = this.shadowRoot?.querySelector("#tooltip"), e = this.shadowRoot?.querySelector("#arrow");
+    if (!t || !e) return;
+    const r = this.firstElementChild;
+    r && (this._updatePosition(), this._cleanup = y(r, t, () => {
+      this._updatePosition();
+    }));
+  }
+  _stopPositioning() {
+    this._cleanup?.(), this._cleanup = void 0;
+  }
+  async _updatePosition() {
+    const t = this.shadowRoot?.querySelector("#tooltip"), e = this.shadowRoot?.querySelector("#arrow");
+    if (!t || !e) return;
+    const r = this.firstElementChild;
+    if (!r) return;
+    const { x: o, y: h, placement: l, middlewareData: m } = await b(
+      r,
+      t,
+      {
+        placement: this.placement,
+        middleware: [
+          L({ mainAxis: this.distance, crossAxis: this.skidding }),
+          k(),
+          x({ padding: 8 }),
+          C({ element: e })
+        ]
+      }
+    );
+    Object.assign(t.style, {
+      left: `${o}px`,
+      top: `${h}px`
+    });
+    const { x: p, y: u } = m.arrow ?? {}, f = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[l.split("-")[0]], v = `-${8 / 2}px`;
+    Object.assign(e.style, {
+      left: p != null ? `${p}px` : "",
+      top: u != null ? `${u}px` : "",
+      right: "",
+      bottom: "",
+      [f]: v
+    });
+  }
+  render() {
+    return w`
+      <slot></slot>
+      <div
+        id="tooltip"
+        part="ag-tooltip"
+        role="tooltip"
+        class="tooltip"
+        ?data-show=${this._open}
+        @mouseenter="${() => clearTimeout(this._hideTimeout)}"
+        @mouseleave="${this.hide}"
+      >
+        <slot name="content">${this.content}</slot>
+        <div id="arrow" part="ag-tooltip-arrow"></div>
+      </div>
+    `;
+  }
+}, a.styles = _`
+    :host {
+      display: inline-block;
+    }
+
+    #tooltip {
+      display: none;
+      position: absolute;
+      z-index: var(--ag-z-index-modal);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity var(--ag-motion-fast) ease-in-out;
+      background: var(--ag-neutral-900);
+      color: var(--ag-white);
+      padding: var(--ag-space-2) var(--ag-space-3);
+      border-radius: var(--ag-radius-md);
+      font-size: var(--ag-font-size-sm);
+      max-inline-size: 300px;
+    }
+
+    #tooltip[data-show] {
+      display: block;
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    #arrow {
+      position: absolute;
+      background: inherit;
+      width: var(--ag-space-2);
+      height: var(--ag-space-2);
+      transform: rotate(45deg);
+    }
+  `, a);
+s([
+  n({ type: String })
+], i.prototype, "content");
+s([
+  n({ type: String, reflect: !0 })
+], i.prototype, "placement");
+s([
+  n({ type: Number })
+], i.prototype, "distance");
+s([
+  n({ type: Number })
+], i.prototype, "skidding");
+s([
+  n({ type: String })
+], i.prototype, "trigger");
+s([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+s([
+  n({ attribute: !1 })
+], i.prototype, "onShow");
+s([
+  n({ attribute: !1 })
+], i.prototype, "onHide");
+s([
+  E()
+], i.prototype, "_open");
+s([
+  c("#tooltip")
+], i.prototype, "tooltipElement");
+s([
+  c("#arrow")
+], i.prototype, "arrowElement");
+customElements.get("ag-tooltip") || customElements.define("ag-tooltip", i);
+export {
+  i as Tooltip
+};

package/dist/components/Tooltip/react/ReactTooltip.d.ts

@@ -0,0 +1,16 @@
+import { EventName } from '@lit/react';
+import { Tooltip, TooltipProps, TooltipShowEvent, TooltipHideEvent } from '../core/Tooltip';
+import * as React from 'react';
+/**
+ * React-specific props interface derived from core TooltipProps
+ * Extends core props including event handlers (onShow, onHide)
+ */
+export interface ReactTooltipProps extends TooltipProps {
+    children: React.ReactElement;
+}
+export declare const ReactTooltip: import('@lit/react').ReactWebComponent<Tooltip, {
+    onShow: EventName<TooltipShowEvent>;
+    onHide: EventName<TooltipHideEvent>;
+}>;
+export type { TooltipShowEvent, TooltipHideEvent } from '../core/Tooltip';
+//# sourceMappingURL=ReactTooltip.d.ts.map

package/dist/components/Tooltip/react/ReactTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/react/ReactTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAE3G;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B;AAGD,eAAO,MAAM,YAAY;YAKH,SAAS,CAAC,gBAAgB,CAAC;YAC3B,SAAS,CAAC,gBAAgB,CAAC;EAE/C,CAAC;AAGH,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/Tooltip/react/ReactTooltip.js

@@ -0,0 +1,16 @@
+import * as o from "react";
+import { o as t } from "../../../create-component-BPMDMe-q.js";
+import "../core/Tooltip.js";
+import { Tooltip as e } from "../core/_Tooltip.js";
+const p = t({
+  tagName: "ag-tooltip",
+  elementClass: e,
+  react: o,
+  events: {
+    onShow: "show",
+    onHide: "hide"
+  }
+});
+export {
+  p as ReactTooltip
+};

package/dist/components/Tooltip/react/ReactTooltip.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReactTooltip.spec.d.ts.map

package/dist/components/Tooltip/react/ReactTooltip.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactTooltip.spec.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/react/ReactTooltip.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Tooltip/react/ReactTooltip.spec.js

@@ -0,0 +1,52 @@
+import { j as t } from "../../../jsx-runtime-BzflLqGi.js";
+import { v as a, d as i, b as l, a as p, i as e, r as n, w as r, g as c, s as m } from "../../../react.esm-D32Kml16.js";
+import "react";
+import { ReactTooltip as s } from "./ReactTooltip.js";
+const u = a.spyOn(console, "log").mockImplementation(() => {
+});
+i("ReactTooltip Wrapper", () => {
+  l(() => {
+    u.mockClear();
+  }), p(() => {
+    document.body.innerHTML = "";
+  }), i("Basic Rendering", () => {
+    e("should render without errors", async () => {
+      n(
+        /* @__PURE__ */ t.jsx(s, { content: "Test tooltip", children: /* @__PURE__ */ t.jsx("button", { children: "Test Button" }) })
+      ), await r(() => {
+        const o = document.querySelector("ag-tooltip");
+        c(o).toBeInTheDocument();
+      });
+    }), e("should render children content", async () => {
+      n(
+        /* @__PURE__ */ t.jsx(s, { content: "Tooltip text", children: /* @__PURE__ */ t.jsx("span", { children: "Trigger Element" }) })
+      ), await r(() => {
+        const o = m.getByText("Trigger Element");
+        c(o).toBeInTheDocument();
+      });
+    }), e("should pass content prop to web component", async () => {
+      n(
+        /* @__PURE__ */ t.jsx(s, { content: "Test tooltip content", children: /* @__PURE__ */ t.jsx("button", { children: "Hover me" }) })
+      ), await r(() => {
+        const o = document.querySelector("ag-tooltip");
+        c(o).toBeInTheDocument();
+      });
+    });
+  }), i("Props Pass-Through", () => {
+    e("should pass placement prop to web component", async () => {
+      n(
+        /* @__PURE__ */ t.jsx(s, { content: "Tooltip", placement: "bottom", children: /* @__PURE__ */ t.jsx("button", { children: "Button" }) })
+      ), await r(() => {
+        const o = document.querySelector("ag-tooltip");
+        c(o).toBeInTheDocument();
+      });
+    }), e("should pass trigger prop to web component", async () => {
+      n(
+        /* @__PURE__ */ t.jsx(s, { content: "Tooltip", trigger: "click", children: /* @__PURE__ */ t.jsx("button", { children: "Button" }) })
+      ), await r(() => {
+        const o = document.querySelector("ag-tooltip");
+        c(o).toBeInTheDocument();
+      });
+    });
+  });
+});

package/dist/components/Tooltip/react/index.d.ts

@@ -0,0 +1,4 @@
+export { ReactTooltip } from './ReactTooltip';
+export type { ReactTooltipProps } from './ReactTooltip';
+export type { TooltipShowEvent, TooltipHideEvent } from '../core/Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/Tooltip/react/index.js

@@ -0,0 +1,4 @@
+import { ReactTooltip as e } from "./ReactTooltip.js";
+export {
+  e as ReactTooltip
+};

package/dist/components/Tooltip/styled/MinimalTooltip.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import { Placement } from '@floating-ui/dom';
+
+export declare class MinimalTooltip extends LitElement {
+    static styles: import('lit').CSSResult;
+    content: string;
+    placement: Placement;
+    distance: number;
+    skidding: number;
+    trigger: string;
+    disabled: boolean;
+    private _open;
+    tooltipElement: HTMLElement | undefined;
+    arrowElement: HTMLElement | undefined;
+    private _cleanup;
+    private _hideTimeout;
+    constructor();
+    firstUpdated(): void;
+    private _setupEventListeners;
+    disconnectedCallback(): void;
+    private _setupARIA;
+    private _removeEventListeners;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleClick;
+    private _handleDocumentKeyDown;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _startPositioning;
+    private _stopPositioning;
+    private _updatePosition;
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=MinimalTooltip.d.ts.map

package/dist/components/Tooltip/styled/MinimalTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/styled/MinimalTooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAA2D,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE3G,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,0BAiFX;IAGM,OAAO,EAAE,MAAM,CAAC;IAGhB,SAAS,EAAE,SAAS,CAAC;IAGrB,QAAQ,EAAE,MAAM,CAAC;IAGjB,QAAQ,EAAE,MAAM,CAAC;IAGjB,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,OAAO,CAAC;IAE1B,QACgB,KAAK,CAAU;IAG/B,cAAc,EAAE,WAAW,GAAG,SAAS,CAAC;IAGxC,YAAY,EAAE,WAAW,GAAG,SAAS,CAAC;IAEtC,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,YAAY,CAAqB;;IAazC,YAAY;IAKZ,OAAO,CAAC,oBAAoB;IAiB5B,oBAAoB;IAOpB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,iBAAiB,CAKvB;IAEF,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,YAAY,CAQlB;IAEF,OAAO,CAAC,sBAAsB,CAI5B;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAkB/C,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,gBAAgB;YAKV,eAAe;IA6C7B,IAAI,aAGH;IAED,IAAI,aAGH;IAED,MAAM,aAEL;IAED,MAAM;CAiBP"}

package/dist/components/Tooltip/styled/MinimalTooltip.js

@@ -0,0 +1,236 @@
+import { LitElement as g, css as v, html as _ } from "lit";
+import { n as r } from "../../../property-CemaeiRl.js";
+import { r as b } from "../../../state-CovhUvdr.js";
+import { e as m } from "../../../query-BykXNUlT.js";
+import { a as w, c as y, o as E, f as x, s as k, b as L } from "../../../floating-ui.dom-muqvZJIo.js";
+var C = Object.defineProperty, i = (d, t, o, n) => {
+  for (var s = void 0, a = d.length - 1, l; a >= 0; a--)
+    (l = d[a]) && (s = l(t, o, s) || s);
+  return s && C(t, o, s), s;
+};
+const h = class h extends g {
+  constructor() {
+    super(), this._handleMouseEnter = () => {
+      this.disabled || (clearTimeout(this._hideTimeout), this.show());
+    }, this._handleMouseLeave = () => {
+      this.disabled || (this._hideTimeout = window.setTimeout(() => {
+        this.hide();
+      }, 100));
+    }, this._handleFocus = () => {
+      this.disabled || this.show();
+    }, this._handleBlur = () => {
+      this.disabled || this.hide();
+    }, this._handleClick = () => {
+      this.disabled || (this._open ? this.hide() : this.show());
+    }, this._handleDocumentKeyDown = (t) => {
+      t.key === "Escape" && this._open && this.hide();
+    }, this.show = () => {
+      this._open || this.disabled || (this._open = !0);
+    }, this.hide = () => {
+      this._open && (this._open = !1);
+    }, this.toggle = () => {
+      this._open ? this.hide() : this.show();
+    }, this.content = "", this.placement = "top", this.distance = 8, this.skidding = 0, this.trigger = "hover focus", this.disabled = !1, this._open = !1;
+  }
+  firstUpdated() {
+    this._setupEventListeners(), this._setupARIA();
+  }
+  _setupEventListeners() {
+    const t = this.firstElementChild;
+    t && (this.trigger.includes("hover") && (this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseleave", this._handleMouseLeave)), this.trigger.includes("focus") && (t.addEventListener("focus", this._handleFocus), t.addEventListener("blur", this._handleBlur)), this.trigger.includes("click") && t.addEventListener("click", this._handleClick));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cleanup?.(), this._removeEventListeners(), document.removeEventListener("keydown", this._handleDocumentKeyDown);
+  }
+  _setupARIA() {
+    const t = this.firstElementChild;
+    t && t.setAttribute("aria-describedby", "tooltip");
+  }
+  _removeEventListeners() {
+    const t = this.firstElementChild;
+    t && (this.removeEventListener("mouseenter", this._handleMouseEnter), this.removeEventListener("mouseleave", this._handleMouseLeave), t.removeEventListener("focus", this._handleFocus), t.removeEventListener("blur", this._handleBlur), t.removeEventListener("click", this._handleClick));
+  }
+  updated(t) {
+    super.updated(t), t.has("_open") && (this._open ? (document.addEventListener("keydown", this._handleDocumentKeyDown), this.updateComplete.then(() => {
+      this._startPositioning();
+    }), this.dispatchEvent(new CustomEvent("show"))) : (this._stopPositioning(), document.removeEventListener("keydown", this._handleDocumentKeyDown), this.dispatchEvent(new CustomEvent("hide"))));
+  }
+  _startPositioning() {
+    const t = this.shadowRoot?.querySelector("#tooltip"), o = this.shadowRoot?.querySelector("#arrow");
+    if (!t || !o) return;
+    const n = this.firstElementChild;
+    n && (this._updatePosition(), this._cleanup = w(n, t, () => {
+      this._updatePosition();
+    }));
+  }
+  _stopPositioning() {
+    this._cleanup?.(), this._cleanup = void 0;
+  }
+  async _updatePosition() {
+    const t = this.shadowRoot?.querySelector("#tooltip"), o = this.shadowRoot?.querySelector("#arrow");
+    if (!t || !o) return;
+    const n = this.firstElementChild;
+    if (!n) return;
+    const { x: s, y: a, placement: l, middlewareData: u } = await y(
+      n,
+      t,
+      {
+        placement: this.placement,
+        middleware: [
+          E({ mainAxis: this.distance, crossAxis: this.skidding }),
+          x(),
+          k({ padding: 8 }),
+          L({ element: o })
+        ]
+      }
+    );
+    Object.assign(t.style, {
+      left: `${s}px`,
+      top: `${a}px`
+    });
+    const { x: p, y: c } = u.arrow ?? {}, f = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[l.split("-")[0]];
+    Object.assign(o.style, {
+      left: p != null ? `${p}px` : "",
+      top: c != null ? `${c}px` : "",
+      right: "",
+      bottom: "",
+      [f]: "-4px"
+    });
+  }
+  render() {
+    return _`
+      <slot></slot>
+      <div
+        id="tooltip"
+        part="base"
+        role="tooltip"
+        class="tooltip"
+        ?data-show=${this._open}
+        @mouseenter="${() => clearTimeout(this._hideTimeout)}"
+        @mouseleave="${this.hide}"
+      >
+        <slot name="content">${this.content}</slot>
+        <div id="arrow" part="arrow"></div>
+      </div>
+    `;
+  }
+};
+h.styles = v`
+    :host {
+      display: inline-block;
+    }
+
+    #tooltip {
+      display: none;
+      position: absolute;
+      z-index: var(--ag-z-index-modal, 1000);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity var(--ag-motion-fast, 0.15s) ease-in-out;
+
+      /* Minimal styling */
+      background: var(--tooltip-bg, #1f2937);
+      color: var(--tooltip-color, #ffffff);
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      max-inline-size: 250px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      line-height: 1.4;
+      text-align: center;
+    }
+
+    #tooltip[data-show] {
+      display: block;
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    #arrow {
+      position: absolute;
+      background: var(--tooltip-bg, #1f2937);
+      width: var(--ag-space-2, 0.5rem);
+      height: var(--ag-space-2, 0.5rem);
+      transform: rotate(45deg);
+      z-index: -1;
+    }
+
+    /* Theme support using CSS variables from playground */
+    [data-theme="dark"] minimal-tooltip #tooltip,
+    :host-context([data-theme="dark"]) #tooltip {
+      --tooltip-bg: #374151;
+      --tooltip-color: #f9fafb;
+      --tooltip-border: #4b5563;
+    }
+
+    [data-theme="light"] minimal-tooltip #tooltip,
+    :host-context([data-theme="light"]) #tooltip,
+    #tooltip {
+      --tooltip-bg: #1f2937;
+      --tooltip-color: #ffffff;
+      --tooltip-border: #374151;
+    }
+
+    /* System preference fallback */
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme]) minimal-tooltip #tooltip,
+      :host-context(:root:not([data-theme])) #tooltip {
+        --tooltip-bg: #374151;
+        --tooltip-color: #f9fafb;
+        --tooltip-border: #4b5563;
+      }
+    }
+
+    /* High contrast mode */
+    @media (prefers-contrast: high) {
+      #tooltip {
+        border: 1px solid var(--tooltip-color, #ffffff);
+        font-weight: 600;
+      }
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      #tooltip {
+        transition: none;
+      }
+    }
+  `;
+let e = h;
+i([
+  r({ type: String })
+], e.prototype, "content");
+i([
+  r({ type: String, reflect: !0 })
+], e.prototype, "placement");
+i([
+  r({ type: Number })
+], e.prototype, "distance");
+i([
+  r({ type: Number })
+], e.prototype, "skidding");
+i([
+  r({ type: String })
+], e.prototype, "trigger");
+i([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+i([
+  b()
+], e.prototype, "_open");
+i([
+  m("#tooltip")
+], e.prototype, "tooltipElement");
+i([
+  m("#arrow")
+], e.prototype, "arrowElement");
+customElements.define("minimal-tooltip", e);
+export {
+  e as MinimalTooltip
+};

package/dist/components/Tooltip/styled/index.d.ts

@@ -0,0 +1,2 @@
+export { MinimalTooltip } from './MinimalTooltip.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/styled/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/styled/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Tooltip/styled/index.js

@@ -0,0 +1,4 @@
+import { MinimalTooltip as l } from "./MinimalTooltip.js";
+export {
+  l as MinimalTooltip
+};

package/dist/components/Tooltip/vue/VueTooltip.js

@@ -0,0 +1,4 @@
+import { _ as f } from "../../../VueTooltip.vue_vue_type_script_setup_true_lang-BGhqFxll.js";
+export {
+  f as default
+};