/**
 * Non-side-effect class export for `<skeleton-ui>`.
 *
 * Importing this file gives you the class(es) without auto-registering the tag.
 * Useful for test isolation, subclassing with tag-name override, or selective
 * composition.
 *
 * The auto-register path stays at `@adia-ai/web-components/components/skeleton`
 * (which imports this file + calls `defineIfFree()`).
 *
 * @see ../../USAGE.md#registration--auto-vs-explicit
 */

/**
 * <skeleton-ui width="200px" height="1.2em" radius="sm"></skeleton-ui>
 * <skeleton-ui width="100%" height="3rem" radius="md" static></skeleton-ui>
 *
 * Placeholder shimmer for loading states.
 * Purely presentational — no DOM stamping needed.
 *
 * Props (attributes):
 *   static — suppress the shimmer animation (default: false — shimmer on)
 *
 * Radius: none, sm (default), md, lg, full
 */

import { UIElement } from '../../core/element.js';

export class UISkeleton extends UIElement {
  static properties = {
    width:  { type: String,  default: '100%',  reflect: true },
    height: { type: String,  default: '1.2em', reflect: true },
    radius: { type: String,  default: 'sm',    reflect: true },
    static: { type: Boolean, default: false,   reflect: true },
  };

  static template = () => null;

  connected() {
    this.setAttribute('aria-hidden', 'true');
    this.#applySize();
  }

  render() {
    this.#applySize();
  }

  #applySize() {
    this.style.width  = this.width;
    this.style.height = this.height;
  }
}
