import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const scSkeletonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--border-radius:var(--sc-border-radius-pill);--color:var(--sc-color-gray-300);--sheen-color:var(--sc-color-gray-400);display:block;position:relative}.skeleton{display:flex;width:100%;height:100%;min-height:1rem}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:var(--border-radius)}.skeleton--sheen .skeleton__indicator{background:linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));background-size:400% 100%;background-size:400% 100%;animation:sheen 3s ease-in-out infinite}.skeleton--pulse .skeleton__indicator{animation:pulse 2s ease-in-out 0.5s infinite}@keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}";

const ScSkeleton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /** Animation effect */
    this.effect = 'sheen';
  }
  render() {
    return (h("div", { part: "base", class: {
        'skeleton': true,
        'skeleton--pulse': this.effect === 'pulse',
        'skeleton--sheen': this.effect === 'sheen',
      }, "aria-busy": "true", "aria-live": "polite" }, h("div", { part: "indicator", class: "skeleton__indicator" })));
  }
  static get style() { return scSkeletonCss; }
}, [1, "sc-skeleton", {
    "effect": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-skeleton"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-skeleton":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScSkeleton);
      }
      break;
  } });
}
defineCustomElement();

export { ScSkeleton as S, defineCustomElement as d };
