import {
  LocalizeController
} from "./chunk.X3FE7OHE.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/loader/loader.ts
import { css, html } from "lit";
import { property } from "lit/decorators.js";
import cx from "classix";
var SdLoader = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.color = "currentColor";
    this.localize = new LocalizeController(this);
  }
  render() {
    return html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="progressbar" aria-label="${this.localize.term("loading")}"><circle class="${cx(
      "dot",
      {
        primary: "text-primary animate-loader-primary",
        white: "text-white animate-loader-white",
        currentColor: "animate-loader-current"
      }[this.color]
    )}" cx="20" cy="12" r="2" fill="currentColor"/><circle class="${cx(
      "dot",
      {
        primary: "text-primary animate-loader-primary",
        white: "text-white animate-loader-white",
        currentColor: "animate-loader-current"
      }[this.color]
    )}" cx="12" cy="12" r="2" fill="currentColor"/><circle class="${cx(
      "dot",
      {
        primary: "text-primary animate-loader-primary",
        white: "text-white animate-loader-white",
        currentColor: "animate-loader-current"
      }[this.color]
    )}" cx="4" cy="12" r="2" fill="currentColor"/></svg>`;
  }
};
/**
 * Inherits global stylesheet including TailwindCSS
 */
SdLoader.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{display:inline-block;width:1em;height:1em}.dot:nth-child(2){animation-delay:.1s}.dot:nth-child(1){animation-delay:.2s}`
];
__decorateClass([
  property({ type: String, reflect: true })
], SdLoader.prototype, "color", 2);
SdLoader = __decorateClass([
  customElement("sd-6-22-0-loader")
], SdLoader);

export {
  SdLoader
};
