Table Skeleton

<!-- Table Skeleton -->
<div class="nuda-table-skeleton" role="status" aria-label="Loading table" aria-busy="true">
  <!-- Header row -->
  <div class="nuda-table-skeleton__row nuda-table-skeleton__row--header">
    <span></span><span></span><span></span>
  </div>
  <!-- Data rows -->
  <div class="nuda-table-skeleton__row">
    <span></span><span></span><span></span>
  </div>
  <div class="nuda-table-skeleton__row">
    <span></span><span></span><span></span>
  </div>
  <div class="nuda-table-skeleton__row">
    <span></span><span></span><span></span>
  </div>
</div>

/* Table Skeleton
   Table rows placeholder with shimmer effect.
   Customize: --tbl-skel-base, --tbl-skel-highlight, --tbl-skel-header-bg */

.nuda-table-skeleton {
  --tbl-skel-base: rgba(255, 255, 255, 0.06);
  --tbl-skel-highlight: rgba(255, 255, 255, 0.12);
  --tbl-skel-header-bg: rgba(255, 255, 255, 0.05);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nuda-table-skeleton__row {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

.nuda-table-skeleton__row--header {
  background: var(--tbl-skel-header-bg);
}

.nuda-table-skeleton__row span {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--tbl-skel-base) 25%,
    var(--tbl-skel-highlight) 50%,
    var(--tbl-skel-base) 75%
  );
  background-size: 200% 100%;
  animation: nuda-table-shimmer 1.5s ease-in-out infinite;
}

.nuda-table-skeleton__row--header span {
  height: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.08) 75%
  );
  background-size: 200% 100%;
}

@keyframes nuda-table-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-table-skeleton__row span {
    animation: none;
    background: var(--tbl-skel-base);
  }
}