pre-gitea addition

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>

package.json

@@ -1,7 +1,6 @@
 {
   "name": "dt-design-system",
   "version": "0.0.0",
-  "private": true,
   "description": "Dangerous Things design system — shared tokens, web CSS, and React Native components",
   "repository": {
     "type": "git",
@@ -36,4 +35,4 @@
     "node": ">=18.0.0"
   },
   "packageManager": "npm@10.0.0"
-}
+}

packages/react/src/components/DTMobileFilterOverlay.tsx

@@ -5,7 +5,7 @@
  * .dt-filter-overlay-content
  */
 
-import { useEffect, useCallback, useRef, type ReactNode, type CSSProperties } from 'react';
+import { useEffect, useCallback, useRef, useId, type ReactNode, type CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
 import type { DTVariant } from '@dangerousthings/tokens';
 import { cx } from '../utils/cx';
@@ -40,6 +40,7 @@ export function DTMobileFilterOverlay({
 }: DTMobileFilterOverlayProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
+  const headingId = useId();
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -105,8 +106,18 @@ export function DTMobileFilterOverlay({
 
   return createPortal(
     <div className={cx('dt-filter-overlay', getVariantClass(variant), className)} style={style}>
-      <div className="dt-filter-overlay-backdrop" onClick={onDismiss} />
-      <div ref={panelRef} className="dt-filter-overlay-content">
+      <div
+        className="dt-filter-overlay-backdrop"
+        onClick={onDismiss}
+        aria-hidden="true"
+      />
+      <div
+        ref={panelRef}
+        className="dt-filter-overlay-content"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={headingId}
+      >
         {/* Header */}
         <div
           style={{
@@ -116,7 +127,7 @@ export function DTMobileFilterOverlay({
             padding: '16px',
             borderBottom: '1px solid rgba(var(--color-primary-rgb), 0.2)',
           }}>
-          <span style={{ fontWeight: 700, fontSize: '1.125rem', letterSpacing: '0.05em' }}>
+          <span id={headingId} style={{ fontWeight: 700, fontSize: '1.125rem', letterSpacing: '0.05em' }}>
             {heading}
             {activeFilterCount !== undefined && activeFilterCount > 0 && (
               <span
@@ -144,6 +155,7 @@ export function DTMobileFilterOverlay({
             <button
               onClick={onDismiss}
               type="button"
+              aria-label={`Close ${heading}`}
               style={{
                 background: 'none',
                 border: 'none',

packages/showcase/desktop/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@dangerousthings/showcase-desktop",
   "version": "0.0.0",
-  "private": true,
   "license": "MIT",
   "description": "Desktop showcase for the Dangerous Things design system",
   "author": {

packages/showcase/mobile/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@dangerousthings/showcase-mobile",
   "version": "0.0.0",
-  "private": true,
   "license": "MIT",
   "main": "./index.js",
   "scripts": {
@@ -39,4 +38,4 @@
     "@types/react": "~19.1.0",
     "typescript": "^5.8.3"
   }
-}
+}

packages/web/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dangerousthings/web
 
+## 0.5.0
+
+### Minor Changes
+
+- `dt-scale-in` keyframes now hold `transform: none, opacity: 0` during `animation-delay` (the period when `animation-fill-mode: both` shows the first keyframe), then snap to `scale(0)` at animation start before scaling/fading to 1. Visual difference vs prior is a subtle fade-in alongside the scale-in. **Why:** prior keyframes held descendants at `transform: scale(0)` during the delay, which caused any child performing `getBoundingClientRect()`-based self-measurement on mount (R3F `<Canvas>`, ResizeObserver-driven charts, virtualized lists, etc.) to read a near-zero rect and never recover — `transform` changes don't fire `ResizeObserver` when they end. Fixes the SuggestedPlacements 3D viewer "blank teal block until scroll" bug on the Hydrogen storefront product pages.
+
 ## 0.4.1
 
 ### Patch Changes

packages/web/package.json

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

packages/web/src/components/animations.css

@@ -7,8 +7,16 @@
    ============================================================================ */
 
 @keyframes dt-scale-in {
-  from { transform: scale(0); }
-  to   { transform: scale(1); }
+  /* During animation-delay (with fill-mode: both), this 0% keyframe holds.
+     transform: none lets descendants self-measure correctly on mount —
+     critical for ResizeObserver-based components (R3F Canvas, charts,
+     virtualized lists) whose initial getBoundingClientRect() would
+     otherwise be transform-multiplied to ~0 inside a scale(0) ancestor. */
+  0%       { opacity: 0; transform: none; }
+  /* Snap to scale(0) at animation start so the entrance is still a
+     visible scale-in (with a brief fade-in alongside). */
+  0.001%   { opacity: 0; transform: scale(0); }
+  100%     { opacity: 1; transform: scale(1); }
 }
 
 @keyframes dt-fade-in {

packages/web/src/components/bevels.css

@@ -226,6 +226,9 @@
 [data-brand="dt"] .badge {
   --badge-border-color: var(--color-border);
   --badge-fill: var(--color-surface);
+  /* inline-block so a wrapping badge stays one box — clip-path and the
+     ::before fill fragment across line boxes on a plain inline span */
+  display: inline-block;
   position: relative;
   isolation: isolate;
   background: var(--badge-border-color);
@@ -404,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;
@@ -424,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;