import { css as l, LitElement as c, html as f } from "lit";
import { property as d, state as g } from "lit/decorators.js";
import { customElementSafe as m } from "./custom-element-safe.js";
var h = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (p, i, o, n) => {
  for (var t = n > 1 ? void 0 : n ? x(i, o) : i, r = p.length - 1, s; r >= 0; r--)
    (s = p[r]) && (t = (n ? s(i, o, t) : s(t)) || t);
  return n && t && h(i, o, t), t;
};
let e = class extends c {
  constructor() {
    super(...arguments), this.applicationsContext = "applications", this._transitioning = !0;
  }
  connectedCallback() {
    super.connectedCallback(), this._transitioning = !0;
  }
  render() {
    return this._transitioning && setTimeout(() => this._transitioning = !1, 10), f`
      <div class=${"wrapper" + (this._transitioning ? " begin-transition" : "")}>
        <polyfea-context name=${this.applicationsContext} style="display: contents;">
          <slot></slot>
        </polyfea-context>
      </div>
    `;
  }
};
e.styles = l`
    :host {
      box-sizing: border-box;
      width: 100%;
      height: fit-content;
      display: flex;
      padding: 1rem;
    }

    .wrapper {
      box-sizing: border-box;
      height: fit-content;
      padding: 1rem;
      width: 100%;
      margin: 0 auto;
      justify-content: space-evenly;
      display: flex;
      flex-flow: row wrap;
      gap: 1rem;
      align-content: start;
      transition: all 0.3s ease-in-out;
      opacity: 1;
    }

    .wrapper.begin-transition {
      opacity: 0;
    }

    * {
      box-sizing: border-box;
      width: 12rem;
      height: 12rem;
    }

    polyfea-context {
      display: contents;
    }
  `;
a([
  d({ attribute: "applications-context" })
], e.prototype, "applicationsContext", 2);
a([
  g()
], e.prototype, "_transitioning", 2);
e = a([
  m("polyfea-md-apps")
], e);
export {
  e as PolyfeaMdApps
};
