ranui/dist/state-dot-DnPwHJNT.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { i as o } from "./factory-WDxu11V0.js";
import "./builder-EH76YCFS.js";
import { i as e, n as a, o as n, t as i } from "./utils-U-9uH7EX.js";
import { a as l, n as d } from "./ssr-BzykYefm.js";
var h = ':host{display:inline-block;flex:none;width:var(--ran-state-dot-size, 8px);height:var(--ran-state-dot-size, 8px)}:host([hidden]){display:none}.ran-state-dot{position:relative;width:100%;height:100%;color:var(--ran-state-dot-color, var(--ran-color-text-disabled))}.ran-state-dot:before,.ran-state-dot:after{content:"";position:absolute;border-radius:50%;background:currentColor}.ran-state-dot:before{inset:0;opacity:var(--ran-state-dot-halo-opacity, .16)}.ran-state-dot:after{inset:20%}:host([state="running"]) .ran-state-dot{color:var(--ran-state-dot-running-color, var(--ran-color-primary))}:host([state="success"]) .ran-state-dot{color:var(--ran-state-dot-success-color, var(--ran-color-success))}:host([state="warning"]) .ran-state-dot{color:var(--ran-state-dot-warning-color, var(--ran-color-warning))}:host([state="error"]) .ran-state-dot{color:var(--ran-state-dot-error-color, var(--ran-color-danger))}:host([state="running"]) .ran-state-dot:after{animation:ran-state-dot-pulse 1.4s ease-in-out infinite}@keyframes ran-state-dot-pulse{0%,to{inset:20%;opacity:1}50%{inset:32%;opacity:.6}}@media(prefers-reduced-motion:reduce){:host([state="running"]) .ran-state-dot:after{animation:none}}', c = class extends d {
  _shadowDom;
  static get observedAttributes() {
    return [
      "state",
      "label",
      "sheet"
    ];
  }
  constructor() {
    super(), this._shadowDom = i(this, h), this._shadowDom.appendChild(o().class("ran-state-dot").attr("part", "dot").build());
  }
  get state() {
    const t = a(this, "state", "idle");
    return u.has(t) ? t : "idle";
  }
  set state(t) {
    e(this, "state", t);
  }
  get label() {
    return a(this, "label");
  }
  set label(t) {
    e(this, "label", t);
  }
  get sheet() {
    return a(this, "sheet");
  }
  set sheet(t) {
    e(this, "sheet", t);
  }
  connectedCallback() {
    this.handlerExternalCss(), this._syncRole();
  }
  attributeChangedCallback(t, r, s) {
    r !== s && (t === "sheet" && this.handlerExternalCss(), t === "label" && this._syncRole());
  }
  handlerExternalCss = () => {
    n(this, this._shadowDom, "sheet", null, this.sheet);
  };
  _syncRole() {
    const t = this.label;
    if (t === "") {
      this.setAttribute("aria-hidden", "true"), this.removeAttribute("role"), this.removeAttribute("aria-label");
      return;
    }
    this.removeAttribute("aria-hidden"), this.setAttribute("role", "img"), this.setAttribute("aria-label", t);
  }
}, u = /* @__PURE__ */ new Set([
  "idle",
  "running",
  "success",
  "warning",
  "error"
]);
l("r-state-dot", c);
export {
  c as t
};