@reliability-design/web 1.4.6 → 1.4.8

package/dist/components/rel-skeleton/rel-skeleton.ts

@@ -1,143 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type SkeletonShape = "line" | "circle" | "block";
-export type SkeletonAnimation = "pulse" | "shimmer" | "none";
-
-@customElement("rel-skeleton")
-export class RelSkeleton extends LitElement {
-  @property({ type: String, reflect: true }) shape: SkeletonShape = "block";
-  @property({ type: Number }) lines = 1;
-  @property({ type: String }) width = "";
-  @property({ type: String }) height = "";
-  @property({ type: String, reflect: true }) animation: SkeletonAnimation = "pulse";
-  @property({ type: Boolean, reflect: true }) loaded = false;
-
-  protected override updated(changed: Map<string, unknown>) {
-    if (changed.has("width") && this.width) this.style.width = this.width;
-    if (changed.has("height") && this.height) this.style.height = this.height;
-    if (changed.has("loaded")) {
-      if (this.loaded) {
-        this.removeAttribute("role");
-        this.removeAttribute("aria-label");
-      } else {
-        this.setAttribute("role", "status");
-        this.setAttribute("aria-label", "Loading");
-      }
-    }
-  }
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-    }
-
-    :host([loaded]) {
-      display: none;
-    }
-
-    /* ── Circle: aspect-ratio keeps it square without requiring explicit height ── */
-    :host([shape="circle"]) {
-      aspect-ratio: 1 / 1;
-    }
-
-    /* ── Base skeleton surface ── */
-    .skeleton-shape,
-    .skeleton-bar {
-      background: var(--rel-skeleton-color, var(--rel-bg-neutral-elevated-3));
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    /* ── Lines layout ── */
-    .skeleton-lines {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      width: 100%;
-    }
-
-    .skeleton-bar {
-      height: 14px;
-      width: 100%;
-    }
-
-    /* Last line shortens to 65% — mimics real paragraph text that doesn't reach the edge */
-    .skeleton-bar.is-last {
-      width: 65%;
-    }
-
-    /* ── Shape (circle / block) ── */
-    .skeleton-shape {
-      width: 100%;
-      height: 100%;
-      min-height: 16px;
-    }
-
-    :host([shape="circle"]) .skeleton-shape {
-      border-radius: 50%;
-      /* No min-height — circle is sized entirely by host width + aspect-ratio */
-      min-height: unset;
-    }
-
-    /* ── Pulse animation ── */
-    @keyframes rel-skeleton-pulse {
-      0%, 100% { opacity: 1; }
-      50%       { opacity: 0.4; }
-    }
-
-    :host([animation="pulse"]) .skeleton-shape,
-    :host([animation="pulse"]) .skeleton-bar {
-      animation: rel-skeleton-pulse 1.5s ease-in-out infinite;
-    }
-
-    /* ── Shimmer animation ── */
-    @keyframes rel-skeleton-shimmer {
-      0%   { background-position: 200% center; }
-      100% { background-position: -200% center; }
-    }
-
-    :host([animation="shimmer"]) .skeleton-shape,
-    :host([animation="shimmer"]) .skeleton-bar {
-      background: linear-gradient(
-        90deg,
-        var(--rel-skeleton-color, var(--rel-bg-neutral-elevated-3)) 25%,
-        var(--rel-skeleton-highlight, var(--rel-bg-neutral-elevated-2)) 50%,
-        var(--rel-skeleton-color, var(--rel-bg-neutral-elevated-3)) 75%
-      );
-      background-size: 200% 100%;
-      animation: rel-skeleton-shimmer 1.5s linear infinite;
-    }
-
-    /* ── Respect reduced-motion preference ── */
-    @media (prefers-reduced-motion: reduce) {
-      .skeleton-shape,
-      .skeleton-bar {
-        animation: none !important;
-      }
-    }
-  `;
-
-  render() {
-    if (this.loaded) return html``;
-
-    if (this.shape === "line") {
-      const count = Math.max(1, this.lines);
-      return html`
-        <div class="skeleton-lines">
-          ${Array.from({ length: count }, (_, i) => html`
-            <div part="base" class="skeleton-bar ${i === count - 1 && count > 1 ? "is-last" : ""}"></div>
-          `)}
-        </div>
-      `;
-    }
-
-    return html`<div part="base" class="skeleton-shape"></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-skeleton": RelSkeleton;
-  }
-}