DangerousThings/dt-design-system
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): media placeholder reads LOADING MEDIA, not MISSING MEDIA

Browse Source 
The ::after placeholder text on .dt-bevel-media and empty card bodies is
mostly seen while lazy media loads, where MISSING MEDIA reads as 'the
store is broken'. Neutral loading wording instead. Bump to 0.5.1.

Revert with: git revert <this-sha>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
michael
2026-07-12 22:55:18 -07:00
parent 2d49471ebb
commit 1951cf98da
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@dangerousthings/web",
"version": "0.5.0",
"version": "0.5.1",
"description": "Web CSS theme for the Dangerous Things design system — bevels, glows, form styles",
"license": "MIT",
"author": {

7
packages/web/src/components/bevels.css
View File

@@ -407,9 +407,10 @@
/* Media frame placeholder — shows when no image/video is present.
Surface-colored background is already provided by ::before.
This adds centered "MISSING MEDIA" text via ::after. */
This adds centered "LOADING MEDIA" text via ::after. Mostly seen while
lazy media loads, so it must read as a loading state, not an error. */
.dt-bevel-media::after {
content: 'MISSING MEDIA';
content: 'LOADING MEDIA';
position: absolute;
inset: 0;
display: flex;
@@ -427,7 +428,7 @@
Uses surface background and centered placeholder text. */
.dt-badge-parent:empty::after,
.card-body-flush:empty::after {
content: 'MISSING MEDIA';
content: 'LOADING MEDIA';
display: flex;
align-items: center;
justify-content: center;