Wrapper slot hooks

The wrapper forwards the primitive contract directly, so style [data-slot="skeleton"] and branch from data-rounded and data-animated.

[data-slot="skeleton"] {
  background: linear-gradient(
    90deg,
    var(--tng-semantic-foreground-secondary) 0%,
    var(--tng-semantic-border-subtle) 50%,
    var(--tng-semantic-foreground-secondary) 100%
  );
  background-size: 220% 100%;
}

[data-slot="skeleton"][data-rounded="true"] {
  border-radius: 0.6rem;
}

[data-slot="skeleton"][data-rounded="false"] {
  border-radius: 0;
}

[data-slot="skeleton"][data-animated="true"] {
  animation: tng-skeleton-shimmer 1.3s linear infinite;
}

Default shell

The wrapper only adds a block-level host and the minimum shimmer shell. Width and height stay owner-controlled through the component inputs.

:host {
  display: block;
}

.tng-skeleton {
  background-size: 220% 100%;
}

/* width and height are applied inline from the wrapper inputs. */

Owner guidance

• Use width and height inputs for layout, then style visual identity through the slot selector.
• Turn shimmer off for dense dashboards or reduced-motion surfaces where constant movement is distracting.
• Use [rounded]="false" for media blocks and full-bleed placeholders that should stay rectangular.
• Keep skeleton shapes close to the final content rhythm so loading does not cause large reflow surprises.