v1.1.0

Added

• pierce-shadow attribute — measure inside the open shadow roots of slotted custom elements, for design systems built with Stencil, Lit, or other Web Component tooling. Resolves default and named
  slots to their projected content, treats slot-only containers as measurable leaves, and hides shadow content during loading. Closed shadow roots are not reachable. See the Design Systems
  guide.

• mask-image icon hiding — icons drawn with CSS mask-image tinted via background-color (including masks on ::before / ::after pseudo-elements) are now detected at runtime and hidden like real
  media during loading, instead of leaking through the shimmer. Works in light DOM and pierced shadow roots.

Notes

• For inline SVGs that contain a text layer, use data-shimmer-no-children on the wrapper to capture the icon as a single block.

Thanks to the community for testing this against a real Stencil design system.

v1.0.0

First stable release. The public API is now covered by semantic versioning guarantees — documented attributes, data attributes, CSS custom properties, and TypeScript types will not change in a breaking way without a major version bump.

Nothing changed in the runtime since 0.10.1. This release is the commitment to API stability: you can build on phantom-ui without things shifting under you.

Since the journey began

• Structure-aware skeleton generation by measuring the real DOM at runtime
• 4 animation modes (shimmer, pulse, breathe, solid) + shimmer direction
• count / count-gap repeat mode with container replication
• stagger, reveal, debug, loading-label
• Fine-grained data-shimmer-* controls
• SSR pre-hydration CSS + automatic framework setup CLI
• Safe to import multiple times (micro-frontends, lazy modules, HMR)
• Works with React, Vue, Svelte, Angular, Solid, Qwik, HTMX, and vanilla HTML

Thanks to everyone who starred, used it, and opened issues.

v0.10.1

Fixed

• Duplicate custom element registration (#10, #11). phantom-ui can now be imported multiple times without throwing `NotSupportedError`. The `@customElement` decorator was replaced with a guarded `customElements.define()` call, making the library safe for micro-frontends, lazy-loaded modules, dynamic imports, and HMR / hot reload environments.

First-load behavior is unchanged. Re-imports become a no-op.

v0.10.0

Added

• `debug` attribute that outlines each measured block with an index for visual inspection of how phantom-ui interprets the DOM. Leaf blocks get pink outlines with numeric indices, container blocks get blue outlines with C-prefixed indices.

Documentation

• HTMX added to the supported frameworks list
• Qwik SSR usage example
• `aria-busy` accessibility behavior documented

v0.9.0

New Features

• shimmer-direction attribute — control the direction of the shimmer sweep: ltr (default), rtl, ttb, or btt. Only applies to animation="shimmer".

Improvements

• Upgraded Biome to v2.4
• Upgraded TypeScript to v6.0
• Added HTMX framework guide and example app
• Added direction control to the interactive demo page
• Fixed Solid attr:loading to properly remove attribute using ternary pattern
• Added data fetching example to Angular app

Tests

• 30 tests (5 new for shimmer-direction)

v0.8.1

Refactor

• Extracted light-DOM styles and JSX types into separate files for cleaner architecture
• Replaced inline style strings with Lit styleMap in block rendering
• Disconnected MutationObserver during measurement to prevent double re-trigger from table cell text measurement

Bug Fixes

• data-shimmer-width or data-shimmer-height set alone no longer silently skips the element
• Removed dead tag field from ElementInfo
• Removed HR duplicate from VOID_TAGS (already in ALWAYS_LEAF_TAGS)

v0.8.0

Features

• Container replication on count: When count > 1, repeated skeleton rows now replicate the slotted element's background, border, border-radius, and box-shadow. Previously only the first row showed the card styling.

Performance

Benchmarked the DOM measurement pipeline:

Elements	Leaf nodes	Time
100	334	~20ms
500	1,667	~25ms
1,000	3,334	~31ms

Tests

• Added tests verifying container blocks are emitted for styled elements and skipped for transparent ones (25 total)

Docs

• Performance section in README and How It Works page
• Card-based count example in demo playground
• Favicon on standalone demo page
• Body scroll lock when mobile settings sheet is open

v0.7.1

DX Improvements

• JSX types: added key, ref, data-* attributes and style object to PhantomUiAttributes for React/Solid compatibility
• JSDoc on every prop: hover documentation for all attributes in supported IDEs
• Updated code examples: use class instead of className (React 19+ supports it natively)

Docs

• React Query + phantom-ui interactive demo (StackBlitz)
• Redesigned demo page: ghost SVG hero, Get Started / GitHub stars nav
• Version badge in docs header (fetched from npm at build)
• Landing page button polish and social icon colors

v0.7.0

Features

• loading="false" treated as falsy — No more || undefined workaround. Pass booleans directly in React <19, Qwik, Solid, and vanilla HTML. React 19+, Vue, and Svelte already handled this natively.

• Auto-generated changelog — Docs now include a Changelog page pulled from GitHub releases at build time. Stays up to date automatically on every deploy.

Docs & Demo

• Redesigned demo controls: ghost mascot toggle button with bounce animation
• Handwritten "click me!" chalk annotation on desktop
• Mobile: floating action button + bottom sheet for settings (swipe to close)
• Compact bottom sheet layout: 2-column grid for colors and sliders
• Responsive dashboard card grid (4→2 columns on mobile)
• Ghost-style back button with arrow icon
• Landing page cards with subtle colored borders and tinted backgrounds
• Matched docs background colors to demo page (dark/light)
• Improved data fetching guide: clarified that layout structure is the skeleton, no fake placeholder text needed
• Removed || undefined pattern from all code examples across docs, README, and framework guides

v0.6.1

Bug Fixes

• data-shimmer-ignore: elements with data-shimmer-ignore now properly stay visible during loading. Previously, light DOM styles (-webkit-text-fill-color: transparent, opacity: 0) were hiding text and media inside ignored zones.

Tests

• Added tests verifying data-shimmer-ignore keeps text and images visible during loading state.

Docs

• Standalone interactive demo page with 11 card types, sticky controls bar, and theme switcher
• Custom moon/sun theme toggle component for docs
• Package manager tabs (npm/pnpm/yarn/bun) on all install commands
• Data fetching guide with TanStack Query, SWR, and Vue composable patterns
• Improved light mode contrast and purple accent color
• Fixed default color values in README