Wrapper slot hooks

Both primitives and wrappers expose the same selectors: progress-bar and progress-bar-indicator.

[data-slot="progress-bar"] {
  background: var(--tng-semantic-background-surface);
  border-radius: 9999px;
  height: 0.625rem;
  overflow: hidden;
}

[data-slot="progress-bar-indicator"] {
  background: var(--tng-semantic-accent-brand);
  border-radius: inherit;
  display: block;
  height: 100%;
}

[data-slot="progress-bar-indicator"][data-indeterminate] {
  animation: tng-progress-bar-indeterminate 1.1s ease-in-out infinite;
}

Default shell

The wrapper adds a minimal block-level host and a gentle width transition so determinate updates feel responsive without imposing heavy visual styling.

:host {
  display: block;
  width: 100%;
}

.tng-progress-bar-indicator {
  transition: width 180ms ease;
}

Owner guidance

• Style thresholds, color ramps, and motion timing through the slot selectors instead of depending on internal wrapper markup.
• Increase track height and contrast for touch-heavy or glanceable dashboard surfaces.
• Keep indeterminate motion calm so long-running jobs do not create visual noise.
• Pair status copy with the bar when completion value alone does not explain what is happening.