feat(condensed): add condensed view support for Progress, Skeleton, and Spinner

[garrity-miepub]

Condensed view support for Progress, Skeleton, and Spinner components

Progress

• Add 8 data-slots: progress, progress-label-row, progress-label, progress-value, progress-track, progress-fill, circular-progress, circular-progress-value
• All bar track sizes collapse to sm (h-1 = 0.25rem) in condensed mode
• All circular sizes collapse to sm (2rem) with SVG scaling
• Smaller label/value text (0.625rem), circular value text (0.5rem for tiny circle)

Skeleton

• Add 4 data-slots: skeleton, skeleton-text, skeleton-card, skeleton-table
• Smaller placeholder heights for text/title/button/card variants
• Tighter line gaps for SkeletonText (margin overrides for space-y-*)
• Compact padding and margin spacing for SkeletonCard and SkeletonTable

Spinner

• Add 5 data-slots: spinner, spinner-with-label, spinner-label, full-page-spinner
• All spinner sizes collapse to sm (1rem) in condensed mode
• Tighter gaps and smaller label text

Review fixes

• Consolidate progress track and circular selectors with :is()
• Fix circular progress SVG overflow (force svg to 100% of container)
• Fix SkeletonText/Card/Table gap → margin overrides (space-y-* uses margins, not flex gap)

[Copilot]

Pull request overview

Adds condensed-density support for the Progress component family by introducing data-slot hooks and new condensed CSS overrides so Progress bars and CircularProgress render more compactly in body.condensed mode.

Changes:

• Added data-slot attributes to Progress and CircularProgress DOM nodes to enable condensed-mode targeting.
• Added condensed CSS overrides for Progress label/value typography and bar track height.
• Added condensed CSS overrides to collapse CircularProgress container sizes down to the small (2rem) footprint.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/styles/condensed-view.css	Adds condensed-mode overrides for Progress bar/circular sizing and label/value typography.
src/components/Progress/Progress.tsx	Adds data-slot hooks for Progress/CircularProgress sub-elements for condensed-mode styling.

Comments suppressed due to low confidence (1)

src/components/Progress/Progress.tsx:253

• Condensed CSS collapses [data-slot='circular-progress'] container to 2rem for md/lg/xl, but the inner <svg> still uses fixed width/height based on sizeMap (48/64/96). That will likely overflow the shrunken container and defeat the condensed sizing. Consider making the SVG size derive from the container (e.g., width/height 100% + a viewBox), or add a dedicated slot/class so condensed CSS can also constrain the SVG dimensions.

  return (
    <div
      data-slot="circular-progress"
      role="progressbar"
      aria-valuenow={indeterminate ? undefined : value}
      aria-valuemin={0}
      aria-valuemax={max}
      aria-label="Progress"
      className={cn(circularProgressVariants({ size }), className)}
    >

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cloudflare-workers-and-pages]

Deploying ui with    Cloudflare Pages

Latest commit:	d0030ed
Status:	✅  Deploy successful!
Preview URL:	https://a24f3e2a.ui-6d0.pages.dev
Branch Preview URL:	https://feature-condensed-view-loade.ui-6d0.pages.dev

View logs

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.