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", "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", "description": "Web CSS theme for the Dangerous Things design system — bevels, glows, form styles",
"license": "MIT", "license": "MIT",
"author": { "author": {

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

@@ -407,9 +407,10 @@
/* Media frame placeholder — shows when no image/video is present. /* Media frame placeholder — shows when no image/video is present.
Surface-colored background is already provided by ::before. 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 { .dt-bevel-media::after {
content: 'MISSING MEDIA'; content: 'LOADING MEDIA';
position: absolute; position: absolute;
inset: 0; inset: 0;
display: flex; display: flex;
@@ -427,7 +428,7 @@
Uses surface background and centered placeholder text. */ Uses surface background and centered placeholder text. */
.dt-badge-parent:empty::after, .dt-badge-parent:empty::after,
.card-body-flush:empty::after { .card-body-flush:empty::after {
content: 'MISSING MEDIA'; content: 'LOADING MEDIA';
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;