maxzilla-ui-core/dist/mz-badge-kTmmehAh.js

Core web components library for Maxzilla UI built with Lit Element

import { css as m, LitElement as c, html as l } from "lit";
import { property as g, customElement as b } from "lit/decorators.js";
import { classMap as p } from "lit/directives/class-map.js";
import { b as u } from "./base-CQAGJ0rS.js";
var v = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (a, t, s, o) => {
  for (var r = o > 1 ? void 0 : o ? z(t, s) : t, n = a.length - 1, i; n >= 0; n--)
    (i = a[n]) && (r = (o ? i(t, s, r) : i(r)) || r);
  return o && r && v(t, s, r), r;
};
let e = class extends c {
  constructor() {
    super(...arguments), this.variant = "primary", this.size = "md", this.dot = !1;
  }
  render() {
    const a = {
      badge: !0,
      [`badge--${this.variant}`]: !0
    };
    return l`
      <span class=${p(a)}>
        ${this.dot ? "" : l`<slot></slot>`}
      </span>
    `;
  }
};
e.styles = [
  u,
  m`
      :host {
        display: inline-block;
        --badge-padding-x: 0.5rem;
        --badge-padding-y: 0.25rem;
        --badge-font-size: var(--mz-text-xs);
        --badge-font-weight: 500;
        --badge-border-radius: var(--mz-radius-full);
      }

      .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--badge-padding-y) var(--badge-padding-x);
        font-size: var(--badge-font-size);
        font-weight: var(--badge-font-weight);
        line-height: 1;
        border-radius: var(--badge-border-radius);
        white-space: nowrap;
        transition: var(--mz-transition-normal);
      }

      /* Size variants */
      :host([size='xs']) {
        --badge-padding-x: 0.25rem;
        --badge-padding-y: 0.125rem;
        --badge-font-size: 0.625rem;
      }

      :host([size='sm']) {
        --badge-padding-x: 0.375rem;
        --badge-padding-y: 0.25rem;
        --badge-font-size: var(--mz-text-xs);
      }

      :host([size='lg']) {
        --badge-padding-x: 0.75rem;
        --badge-padding-y: 0.375rem;
        --badge-font-size: var(--mz-text-sm);
      }

      /* Variant styles */
      .badge--primary {
        background: var(--mz-color-primary-500);
        color: var(--mz-color-neutral-0);
      }

      .badge--secondary {
        background: var(--mz-color-neutral-100);
        color: var(--mz-color-neutral-700);
      }

      .badge--success {
        background: var(--mz-color-success);
        color: var(--mz-color-neutral-0);
      }

      .badge--warning {
        background: var(--mz-color-warning);
        color: var(--mz-color-neutral-0);
      }

      .badge--destructive {
        background: var(--mz-color-error);
        color: var(--mz-color-neutral-0);
      }

      .badge--outline {
        background: transparent;
        border: 1px solid var(--mz-color-neutral-300);
        color: var(--mz-color-neutral-700);
      }

      .badge--ghost {
        background: transparent;
        color: var(--mz-color-neutral-600);
      }

      /* Dot variant */
      :host([dot]) .badge {
        width: 0.5rem;
        height: 0.5rem;
        padding: 0;
        border-radius: 50%;
      }

      :host([dot][size='sm']) .badge {
        width: 0.375rem;
        height: 0.375rem;
      }

      :host([dot][size='lg']) .badge {
        width: 0.75rem;
        height: 0.75rem;
      }
    `
];
d([
  g({ type: String, reflect: !0 })
], e.prototype, "variant", 2);
d([
  g({ type: String, reflect: !0 })
], e.prototype, "size", 2);
d([
  g({ type: Boolean, reflect: !0 })
], e.prototype, "dot", 2);
e = d([
  b("mz-badge")
], e);
export {
  e as M
};
//# sourceMappingURL=mz-badge-kTmmehAh.js.map