import { P as f, r as y, n as a } from "./plus-base-1920dd44.mjs";
import { e as v } from "./custom-element-eaccb8d2.mjs";
import { n as c } from "./static-be5c3b1c.mjs";
import { s as h } from "./index-975d3293.mjs";
const g = h({
  slots: {
    host: "font-sans antialised flex flex-row items-center justify-start gap-3 outline-none transition-colors duration-200 ease-in-out",
    separator: "plus-separator text-color-default",
    linkClass: "flex flex-row items-center justify-start visited:text-color-visited text-color-link hover:underline"
  },
  variants: {
    size: {
      sm: {
        host: "text-sm gap-1.5",
        linkClass: "text-sm gap-1.5",
        separator: "text-sm"
      },
      md: {
        host: "text-base gap-2",
        linkClass: "text-base gap-2",
        separator: "text-base"
      },
      lg: {
        host: "text-lg gap-2.5",
        linkClass: "text-lg gap-2.5",
        separator: "text-lg"
      }
    },
    disabled: {
      true: {}
    },
    readonly: {
      true: ""
    },
    active: {
      true: {
        linkClass: "text-default"
      }
    }
  },
  compoundVariants: [
    {
      disabled: !0,
      class: {
        linkClass: "text-color-disabled cursor-not-allowed hover:no-underline visited:text-color-disabled"
      }
    },
    {
      readonly: !0,
      class: {
        linkClass: "text-color-default user-select-none pointer-events-none"
      }
    },
    {
      disabled: !1,
      class: {
        linkClass: "visited:text-color-visited"
      }
    },
    {
      disabled: !1,
      active: !0,
      class: {
        linkClass: "text-color-default visited:text-color-default"
      }
    }
  ],
  defaultVariants: {
    size: "md",
    active: !1,
    disabled: !1,
    readonly: !1
  }
}), b = `:host{display:inline-flex}:host(:last-of-type) .plus-separator{display:none}
`;
var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (e, l, o, i) => {
  for (var s = i > 1 ? void 0 : i ? $(l, o) : l, n = e.length - 1, p; n >= 0; n--)
    (p = e[n]) && (s = (i ? p(l, o, s) : p(s)) || s);
  return i && s && C(l, o, s), s;
};
let t = class extends f {
  constructor() {
    super(...arguments), this.separator = "/", this.size = "md";
  }
  handleClick(e) {
    if (this.disabled || this.readonly) {
      e.preventDefault(), e.stopPropagation();
      return;
    }
    this.emit("plus-click");
  }
  render() {
    const { active: e, prefixIcon: l, suffixIcon: o, disabled: i, readonly: s, href: n, text: p, size: d } = this, { host: u, separator: x, linkClass: m } = g({ disabled: i, readonly: s, active: e, size: d });
    return c`
      <div class=${u()} aria-current=${e ? "page" : "false"}>
        <a .href=${n} class=${m()} @click=${this.handleClick}>
          <slot name="prefix"> ${l ? c`<i class=${l}></i>` : null}</slot>
          <slot>${p}</slot>
          <slot name="suffix"> ${o ? c`<i class=${o}></i>` : null}</slot>
        </a>
        ${c`<span class=${x()}>${this.separator}</span>`}
      </div>
    `;
  }
};
t.styles = [...f.styles, y(b)];
r([
  a({ type: String, reflect: !0 })
], t.prototype, "href", 2);
r([
  a({ type: String, reflect: !0 })
], t.prototype, "text", 2);
r([
  a({ type: Boolean, reflect: !0, converter: (e) => e != "false" })
], t.prototype, "active", 2);
r([
  a({ type: String, reflect: !0 })
], t.prototype, "prefixIcon", 2);
r([
  a({ type: String, reflect: !0 })
], t.prototype, "suffixIcon", 2);
r([
  a({ type: String, reflect: !0 })
], t.prototype, "separator", 2);
r([
  a({ type: String, reflect: !0 })
], t.prototype, "size", 2);
t = r([
  v("plus-breadcrumb-item")
], t);
export {
  t as BreadComponentNavItem
};
