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

// src/components/skeleton/skeleton.ts
import { css, html } from "lit";
import { property } from "lit/decorators.js";
import cx from "classix";
var SdSkeleton = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.variant = "rectangular";
  }
  render() {
    return html`<div part="base" aria-hidden="true" class="${cx(
      "sd-6-22-0-skeleton-color w-full h-full animate-pulse",
      {
        rectangular: "rounded-sm",
        circular: "rounded-full inline-block"
      }[this.variant]
    )}"><slot></slot></div>`;
  }
};
SdSkeleton.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{display:block}::slotted(*){visibility:hidden}`
];
__decorateClass([
  property({ type: String, reflect: true })
], SdSkeleton.prototype, "variant", 2);
SdSkeleton = __decorateClass([
  customElement("sd-6-22-0-skeleton")
], SdSkeleton);

export {
  SdSkeleton
};
