import { x as d, n as p } from "./plus-base-10eea8a6.mjs";
import { e as m } from "./custom-element-eaccb8d2.mjs";
import c from "./plus.js";
import { F as h } from "./floating.service-ed834de8.mjs";
import { s as u } from "./index-975d3293.mjs";
import "./floating-ui-5c56eab3.mjs";
const b = u({
  slots: {
    base: [
      "plus-tooltip font-sans antialiased",
      "rounded bg-color-invert-default text-color-base",
      "absolute top-0 left-0 z-50 hidden select-none"
    ],
    descriptionClass: [""],
    messageClass: ["font-medium"],
    arrowClass: ["arrow absolute w-3 h-3 bg-color-invert-default rotate-45 rounded-sm"]
  },
  variants: {
    size: {
      sm: {
        base: ["text-xs"],
        descriptionClass: ["py-1 px-2"],
        messageClass: ["py-1 px-2"]
      },
      md: {
        base: ["text-sm"],
        descriptionClass: ["py-1 px-3"],
        messageClass: ["py-1 px-3"]
      },
      lg: {
        base: ["text-base"],
        descriptionClass: ["py-1 px-4"],
        messageClass: ["py-1 px-4"]
      }
    },
    available: {
      true: {
        base: ["shadow-md"]
      },
      false: {
        base: []
      }
    }
  },
  compoundVariants: [],
  defaultVariants: {
    size: "md",
    available: !0
  }
});
var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (l, s, a, o) => {
  for (var t = o > 1 ? void 0 : o ? f(s, a) : s, i = l.length - 1, n; i >= 0; i--)
    (n = l[i]) && (t = (o ? n(s, a, t) : n(t)) || t);
  return o && t && v(s, a, t), t;
};
let e = class extends h {
  // hover focus click manual
  constructor() {
    super(), this.size = c.Sizes.md, this.placement = "top", this.showArrow = !0, this.trigger = "hover focus";
  }
  firstUpdated() {
    this.options = {
      ...this.options,
      position: this.placement,
      showArrow: this.showArrow
    };
  }
  render() {
    const { size: l, message: s, showArrow: a } = this, { base: o, descriptionClass: t, arrowClass: i } = b({ size: l, available: !!s });
    return d`
      <slot @slotchange=${this.handleSlotChange.bind(this)}></slot>
      <div class=${o()}>${a && s ? d`<div class=${i()}></div>` : ""} ${s ? d`<div class=${t()}>${s}</div>` : ""}</div>
    `;
  }
};
r([
  p({ type: String })
], e.prototype, "size", 2);
r([
  p({ type: String })
], e.prototype, "placement", 2);
r([
  p({ type: Boolean, attribute: "show-arrow" })
], e.prototype, "showArrow", 2);
r([
  p({ type: String })
], e.prototype, "message", 2);
r([
  p()
], e.prototype, "trigger", 2);
e = r([
  m("plus-tooltip")
], e);
export {
  e as TooltipComponent
};
