feat: video letterboxing, card badge styling, component updates

- Add object-fit: contain + black background for video in DTMediaFrame - Style .dt-card-badge with mode-colored background, padding, and bevel-aware positioning (negative right offset for clean diagonal clip) - Restore DTStaggerContainer in react-native (was incorrectly deleted) - Update DTGallery, DTModal, DTMobileFilterOverlay, DTMediaFrame components - Refresh showcase pages for desktop and mobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 11:18:49 -07:00
parent d1e2bf1964
commit 195c47602d
24 changed files with 351 additions and 185 deletions
--- a/packages/react-native/src/components/DTAccordion.tsx
+++ b/packages/react-native/src/components/DTAccordion.tsx
@@ -251,7 +251,6 @@ const styles = StyleSheet.create({
  title: {
    fontWeight: '600',
    letterSpacing: 0.5,
-    textTransform: 'uppercase',
    fontSize: 14,
  },
  contentWrapper: {},
--- a/packages/react-native/src/components/DTButton.tsx
+++ b/packages/react-native/src/components/DTButton.tsx
@@ -243,6 +243,5 @@ const styles = StyleSheet.create({
  label: {
    fontWeight: '600',
    letterSpacing: 1,
-    textTransform: 'uppercase',
  },
 });
--- a/packages/react-native/src/components/DTCard.tsx
+++ b/packages/react-native/src/components/DTCard.tsx
@@ -49,6 +49,11 @@ interface DTCardProps {
   * @default 0
   */
  progress?: number;
+  /**
+   * Which area expands when the card grows to fill space
+   * @default 'body'
+   */
+  growArea?: 'body' | 'title';
  /**
   * Additional styles for the card container
   */
@@ -81,6 +86,10 @@ interface DTCardProps {
   * Background color (defaults to theme background)
   */
  backgroundColor?: string;
+  /**
+   * Element rendered at the right edge of the header
+   */
+  headerRight?: ReactNode;
  /**
   * Press handler
   */
@@ -215,6 +224,7 @@ export function DTCard({
  title,
  showHeader,
  progress = 0,
+  growArea = 'body',
  style,
  contentStyle,
  padding = 16,
@@ -222,6 +232,7 @@ export function DTCard({
  bevelSize = 32,
  bevelSizeSmall = 16,
  backgroundColor,
+  headerRight,
  onPress,
 }: DTCardProps) {
  const theme = useDTTheme();
@@ -327,7 +338,7 @@ export function DTCard({
      )}
      <View style={[styles.innerContainer, useBevels && {paddingLeft: bevelSizeSmall - borderWidth}]}>
        {shouldShowHeader && (
-          <View style={[styles.header, {backgroundColor: accentColor}]}>
+          <View style={[styles.header, {backgroundColor: accentColor}, growArea === 'title' && {flex: 1}, !!(title && headerRight) && styles.headerRow]}>
            {title && (
              <Text
                variant="titleMedium"
@@ -335,9 +346,10 @@ export function DTCard({
                {title}
              </Text>
            )}
+            {headerRight}
          </View>
        )}
-        <View style={[styles.content, {padding}, contentStyle]}>{children}</View>
+        <View style={[styles.content, {padding}, growArea === 'body' && {flex: 1}, contentStyle]}>{children}</View>
      </View>
      {/* Frame overlay (above content) — beveled mode only.
           Uses evenodd with 3 sub-paths: outer + inner + progressArea.
@@ -400,12 +412,18 @@ const styles = StyleSheet.create({
    position: 'relative',
    zIndex: 1,
    overflow: 'hidden',
+    flex: 1,
  },
  header: {
    paddingLeft: 8,
    paddingRight: 16,
    paddingVertical: 12,
  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
  headerText: {
    fontWeight: '700',
    letterSpacing: 0.5,
--- a/packages/react-native/src/components/DTFeatureLegend.tsx
+++ b/packages/react-native/src/components/DTFeatureLegend.tsx
@@ -109,7 +109,6 @@ const styles = StyleSheet.create({
  headerText: {
    fontWeight: '700',
    letterSpacing: 0.5,
-    textTransform: 'uppercase',
  },
  grid: {
    flexDirection: 'row',
--- a/packages/react-native/src/components/DTGallery.tsx
+++ b/packages/react-native/src/components/DTGallery.tsx
@@ -79,6 +79,11 @@ interface DTGalleryProps {
   * @default 3
   */
  borderWidth?: number;
+  /**
+   * Aspect ratio (width / height) for the display area
+   * @default 1
+   */
+  aspectRatio?: number;
  /**
   * Additional styles
   */
@@ -108,6 +113,7 @@ export function DTGallery({
  thumbnailSize = 64,
  bevelSize = 24,
  borderWidth = 3,
+  aspectRatio = 1,
  style,
 }: DTGalleryProps) {
  const theme = useDTTheme();
@@ -276,6 +282,7 @@ export function DTGallery({
      <View
        style={[
          styles.mainImageContainer,
+          { aspectRatio },
          !useBevels && {
            borderWidth,
            borderColor: accentColor,
@@ -355,7 +362,6 @@ const styles = StyleSheet.create({
    gap: 12,
  },
  mainImageContainer: {
-    aspectRatio: 1,
    position: 'relative',
  },
  mainImageContent: {
--- a/packages/react-native/src/components/DTMenu.tsx
+++ b/packages/react-native/src/components/DTMenu.tsx
@@ -341,7 +341,6 @@ const styles = StyleSheet.create({
  menuItemTitle: {
    fontWeight: '600',
    letterSpacing: 0.5,
-    textTransform: 'uppercase',
    fontSize: 14,
  },
  chevron: {
--- a/packages/react-native/src/components/DTModal.tsx
+++ b/packages/react-native/src/components/DTModal.tsx
@@ -9,8 +9,8 @@
 * - Content in beveled card container
 */

-import {StyleSheet, ViewStyle, StyleProp, KeyboardAvoidingView, Platform} from 'react-native';
-import {Portal, Modal} from 'react-native-paper';
+import {StyleSheet, ViewStyle, StyleProp, KeyboardAvoidingView, Platform, Pressable} from 'react-native';
+import {Portal, Modal, Text} from 'react-native-paper';
 import {useDTTheme} from '../theme/DTThemeProvider';
 import {type DTVariant} from '../utils/variantColors';
 import {DTCard} from './DTCard';
@@ -97,6 +97,17 @@ export function DTModal({
            mode={variant}
            title={title}
            showHeader={!!title}
+            headerRight={dismissable ? (
+              <Pressable
+                onPress={onDismiss}
+                hitSlop={8}
+                accessibilityLabel="Close"
+                accessibilityRole="button">
+                <Text style={{ color: theme.colors.onPrimary, fontSize: 18, lineHeight: 18 }}>
+                  {'\u2715'}
+                </Text>
+              </Pressable>
+            ) : undefined}
            contentStyle={contentStyle}>
            {children}
          </DTCard>
--- a/packages/react/src/components/DTDrawer.tsx
+++ b/packages/react/src/components/DTDrawer.tsx
@@ -160,7 +160,6 @@ export function DTDrawer({
              fontWeight: 900,
              fontSize: '2em',
              letterSpacing: '0.05em',
-              textTransform: 'uppercase',
              borderBottom: '1px solid var(--color-bg)',
            }}>
            <span>{heading}</span>
--- a/packages/react/src/components/DTGallery.tsx
+++ b/packages/react/src/components/DTGallery.tsx
@@ -1,56 +1,168 @@
 /**
- * DTGallery — Image gallery with beveled media frame and thumbnails.
+ * DTGallery — Media gallery with beveled frame and thumbnails.
+ * Supports images, 3D models (via <model-viewer>), videos, and external videos.
 *
 * CSS reference: bevels.css .dt-bevel-media
 */

-import { useState, type CSSProperties } from 'react';
+import { useState, useEffect, type CSSProperties } from 'react';
 import type { DTVariant } from '@dangerousthings/tokens';
 import { cx } from '../utils/cx';
 import { getVariantClass } from '../utils/variantClasses';

-export interface DTGalleryItem {
-  key: string;
-  src: string;
-  alt?: string;
-  thumbnail?: string;
+/* ── TypeScript declaration for <model-viewer> web component ── */
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'model-viewer': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & {
+        src?: string;
+        alt?: string;
+        poster?: string;
+        'camera-controls'?: boolean | string;
+        'auto-rotate'?: boolean | string;
+        'interaction-prompt'?: string;
+        ar?: boolean | string;
+        loading?: 'auto' | 'lazy' | 'eager';
+      };
+    }
+  }
 }

+/* ── Gallery item types ── */
+
+export type DTGalleryItem =
+  | { type?: 'image'; key: string; src: string; alt?: string; thumbnail?: string }
+  | { type: 'model3d'; key: string; src: string; alt?: string; thumbnail?: string; poster?: string }
+  | { type: 'video'; key: string; src: string; alt?: string; thumbnail?: string; poster?: string }
+  | { type: 'external-video'; key: string; src: string; alt?: string; thumbnail?: string };
+
 interface DTGalleryProps {
  items: DTGalleryItem[];
  /** Color variant @default 'normal' */
  variant?: DTVariant;
+  /** Aspect ratio (width / height) for the display area @default 1 */
+  aspectRatio?: number;
  className?: string;
  style?: CSSProperties;
 }

+/* ── Model-viewer script loader ── */
+
+const MODEL_VIEWER_SRC =
+  'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js';
+
+let modelViewerLoaded = false;
+
+function useModelViewerScript(needed: boolean) {
+  useEffect(() => {
+    if (!needed || modelViewerLoaded || typeof document === 'undefined') return;
+    if (customElements.get('model-viewer')) {
+      modelViewerLoaded = true;
+      return;
+    }
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.src = MODEL_VIEWER_SRC;
+    document.head.appendChild(script);
+    modelViewerLoaded = true;
+  }, [needed]);
+}
+
+/* ── Shared styles ── */
+
+const fillStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  display: 'block',
+};
+
+/* ── Component ── */
+
 export function DTGallery({
  items,
  variant = 'normal',
+  aspectRatio = 1,
  className,
  style,
 }: DTGalleryProps) {
  const [activeIndex, setActiveIndex] = useState(0);

+  const hasModel = items.some((i) => i.type === 'model3d');
+  useModelViewerScript(hasModel);
+
  if (items.length === 0) return null;

  const current = items[activeIndex];
+  const currentType = current.type || 'image';

  return (
    <div className={cx(getVariantClass(variant), className)} style={style}>
-      {/* Main image */}
-      <div className="dt-bevel-media" style={{ overflow: 'hidden' }}>
-        <img
-          src={current.src}
-          alt={current.alt || ''}
-          style={{
-            width: '100%',
-            height: 'auto',
-            display: 'block',
-            transition: 'opacity 300ms ease-in-out',
-          }}
-        />
+      {/* Main display */}
+      <div
+        className="dt-bevel-media"
+        style={{ overflow: 'hidden', aspectRatio, position: 'relative' }}
+      >
+        {currentType === 'image' && (
+          <img
+            src={current.src}
+            alt={current.alt || ''}
+            style={{
+              ...fillStyle,
+              objectFit: 'contain',
+              transition: 'opacity 300ms ease-in-out',
+            }}
+          />
+        )}
+
+        {currentType === 'model3d' && (
+          <model-viewer
+            src={current.src}
+            alt={current.alt || ''}
+            poster={'poster' in current ? current.poster : undefined}
+            camera-controls=""
+            auto-rotate=""
+            interaction-prompt="auto"
+            loading="lazy"
+            style={{
+              ...fillStyle,
+              backgroundColor: 'var(--color-bg, #000)',
+            }}
+          />
+        )}
+
+        {currentType === 'video' && (
+          <video
+            src={current.src}
+            poster={'poster' in current ? current.poster : undefined}
+            controls
+            playsInline
+            preload="metadata"
+            style={{
+              ...fillStyle,
+              objectFit: 'contain',
+            }}
+          />
+        )}
+
+        {currentType === 'external-video' && (
+          <iframe
+            src={current.src}
+            title={current.alt || 'Video'}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            style={{
+              ...fillStyle,
+              border: 'none',
+            }}
+          />
+        )}
      </div>
+
      {/* Thumbnails */}
      {items.length > 1 && (
        <div
@@ -59,31 +171,59 @@ export function DTGallery({
            gap: '8px',
            marginTop: '8px',
            overflowX: 'auto',
-          }}>
-          {items.map((item, i) => (
-            <button
-              key={item.key}
-              onClick={() => setActiveIndex(i)}
-              type="button"
-              style={{
-                flexShrink: 0,
-                width: '64px',
-                height: '64px',
-                padding: 0,
-                border: i === activeIndex
-                  ? '2px solid var(--dt-card-color, var(--color-primary))'
-                  : '2px solid transparent',
-                background: 'none',
-                cursor: 'pointer',
-                overflow: 'hidden',
-              }}>
-              <img
-                src={item.thumbnail || item.src}
-                alt={item.alt || ''}
-                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-              />
-            </button>
-          ))}
+          }}
+        >
+          {items.map((item, i) => {
+            const itemType = item.type || 'image';
+            const thumbSrc = item.thumbnail || ('poster' in item ? item.poster : undefined) || item.src;
+            const isMedia = itemType === 'video' || itemType === 'external-video';
+
+            return (
+              <button
+                key={item.key}
+                onClick={() => setActiveIndex(i)}
+                type="button"
+                style={{
+                  flexShrink: 0,
+                  width: '64px',
+                  height: '64px',
+                  padding: 0,
+                  border:
+                    i === activeIndex
+                      ? '2px solid var(--dt-card-color, var(--color-primary))'
+                      : '2px solid transparent',
+                  background: 'none',
+                  cursor: 'pointer',
+                  overflow: 'hidden',
+                  position: 'relative',
+                }}
+              >
+                <img
+                  src={thumbSrc}
+                  alt={item.alt || ''}
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />
+                {/* Play icon overlay for video thumbnails */}
+                {isMedia && (
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="white"
+                    style={{
+                      position: 'absolute',
+                      inset: 0,
+                      margin: 'auto',
+                      width: '24px',
+                      height: '24px',
+                      filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.6))',
+                      pointerEvents: 'none',
+                    }}
+                  >
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                )}
+              </button>
+            );
+          })}
        </div>
      )}
    </div>
--- a/packages/react/src/components/DTMediaFrame.tsx
+++ b/packages/react/src/components/DTMediaFrame.tsx
@@ -2,25 +2,43 @@
 * DTMediaFrame — Diagonal beveled frame (top-left + bottom-right).
 *
 * CSS reference: bevels.css .dt-bevel-media
+ *
+ * The outer div provides the colored bevel border via clip-path.
+ * A ::before pseudo-element fills the inner surface.
+ * Direct img/video children are auto-clipped to match.
+ * A ::after pseudo-element shows "MISSING MEDIA" when empty.
 */

 import type { ReactNode, CSSProperties } from 'react';
+import type { DTVariant } from '@dangerousthings/tokens';
 import { cx } from '../utils/cx';
+import { getVariantClass } from '../utils/variantClasses';

 interface DTMediaFrameProps {
  children: ReactNode;
+  /** Color variant for the bevel border @default 'normal' */
+  variant?: DTVariant;
+  /** Custom placeholder shown when children is nullish (overrides CSS ::after) */
+  placeholder?: ReactNode;
  className?: string;
  style?: CSSProperties;
 }

 export function DTMediaFrame({
  children,
+  variant = 'normal',
+  placeholder,
  className,
  style,
 }: DTMediaFrameProps) {
+  const isEmpty = children == null || children === false;
+
  return (
-    <div className={cx('dt-bevel-media', className)} style={style}>
-      {children}
+    <div
+      className={cx('dt-bevel-media', getVariantClass(variant), className)}
+      style={style}
+    >
+      {isEmpty && placeholder ? placeholder : children}
    </div>
  );
 }
--- a/packages/react/src/components/DTMobileFilterOverlay.tsx
+++ b/packages/react/src/components/DTMobileFilterOverlay.tsx
@@ -5,7 +5,7 @@
 * .dt-filter-overlay-content
 */

-import { useEffect, useCallback, type ReactNode, type CSSProperties } from 'react';
+import { useEffect, useCallback, useRef, type ReactNode, type CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
 import type { DTVariant } from '@dangerousthings/tokens';
 import { cx } from '../utils/cx';
@@ -38,6 +38,9 @@ export function DTMobileFilterOverlay({
  className,
  style,
 }: DTMobileFilterOverlayProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === 'Escape') onDismiss();
@@ -45,6 +48,7 @@ export function DTMobileFilterOverlay({
    [onDismiss],
  );

+  // Escape key
  useEffect(() => {
    if (visible) {
      document.addEventListener('keydown', handleKeyDown);
@@ -52,12 +56,57 @@ export function DTMobileFilterOverlay({
    }
  }, [visible, handleKeyDown]);

+  // Body scroll lock
+  useEffect(() => {
+    if (visible) {
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = ''; };
+    }
+  }, [visible]);
+
+  // Focus trap
+  useEffect(() => {
+    if (!visible) return;
+    triggerRef.current = document.activeElement as HTMLElement;
+
+    const timer = setTimeout(() => {
+      const first = panelRef.current?.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      first?.focus();
+    }, 100);
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab' || !panelRef.current) return;
+      const focusable = panelRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleTab);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('keydown', handleTab);
+      triggerRef.current?.focus();
+    };
+  }, [visible]);
+
  if (!visible) return null;

  return createPortal(
    <div className={cx('dt-filter-overlay', getVariantClass(variant), className)} style={style}>
      <div className="dt-filter-overlay-backdrop" onClick={onDismiss} />
-      <div className="dt-filter-overlay-content">
+      <div ref={panelRef} className="dt-filter-overlay-content">
        {/* Header */}
        <div
          style={{
@@ -67,7 +116,7 @@ export function DTMobileFilterOverlay({
            padding: '16px',
            borderBottom: '1px solid rgba(var(--color-primary-rgb), 0.2)',
          }}>
-          <span style={{ fontWeight: 700, fontSize: '1.125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+          <span style={{ fontWeight: 700, fontSize: '1.125rem', letterSpacing: '0.05em' }}>
            {heading}
            {activeFilterCount !== undefined && activeFilterCount > 0 && (
              <span
@@ -88,7 +137,6 @@ export function DTMobileFilterOverlay({
                  color: 'var(--color-primary)',
                  fontSize: '0.875rem',
                  cursor: 'pointer',
-                  textTransform: 'uppercase',
                }}>
                Clear All
              </button>
--- a/packages/react/src/components/DTModal.tsx
+++ b/packages/react/src/components/DTModal.tsx
@@ -82,13 +82,35 @@ export function DTModal({
          position: 'relative',
          maxWidth: '90vw',
          maxHeight: '85vh',
-          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
          ...style,
        }}
        role="dialog"
        aria-modal="true">
-        {title && <div className="card-title">{title}</div>}
-        <div style={{ padding: 'var(--space-6, 24px)' }}>{children}</div>
+        {title && (
+          <div className="card-title" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0 }}>
+            <span>{title}</span>
+            {dismissable && (
+              <button
+                type="button"
+                onClick={onDismiss}
+                aria-label="Close"
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'inherit',
+                  cursor: 'pointer',
+                  padding: 0,
+                  fontSize: '1.25rem',
+                  lineHeight: 1,
+                }}>
+                &#x2715;
+              </button>
+            )}
+          </div>
+        )}
+        <div style={{ padding: 'var(--space-6, 24px)', overflow: 'auto', flex: '1 1 auto' }}>{children}</div>
      </div>
    </div>,
    document.body,
--- a/packages/react/src/components/DTTextInput.tsx
+++ b/packages/react/src/components/DTTextInput.tsx
@@ -36,7 +36,6 @@ export function DTTextInput({
            marginBottom: '4px',
            fontSize: '0.875rem',
            fontWeight: 600,
-            textTransform: 'uppercase',
            letterSpacing: '0.05em',
          }}>
          {label}
--- a/packages/showcase/desktop/src/renderer/pages/AnimationsPage.tsx
+++ b/packages/showcase/desktop/src/renderer/pages/AnimationsPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { DTCard, DTStaggerContainer } from '@dangerousthings/react';
+import { DTCard } from '@dangerousthings/react';
 import { Section, Row, CodeLabel } from '../components/Section';

 function AnimBox({ className, label }: { className: string; label: string }) {
@@ -66,7 +66,7 @@ function ProgressBarDemo() {
          <DTCard
            key={v}
            variant={v}
-            title={`${v.toUpperCase()} ${progress[i]}%`}
+            title={`${v} ${progress[i]}%`}
            progress={progress[i]}
            style={{ width: 160, transition: 'all 0.1s ease-out' }}
          >
@@ -90,13 +90,12 @@ function ProgressBarDemo() {

 export function AnimationsPage() {
  const [entranceKey, setEntranceKey] = useState(0);
-  const [staggerKey, setStaggerKey] = useState(0);
  const [accordionExpanded, setAccordionExpanded] = useState(false);

  return (
    <>
      <h1 className="page-title">Animations</h1>
-      <p className="page-subtitle">Entrance animations, interactive effects, stagger containers, and transition utilities.</p>
+      <p className="page-subtitle">Entrance animations, interactive effects, and transition utilities.</p>

      <Section title="Entrance Animations" description="One-shot animations for elements entering the viewport.">
        <Row key={entranceKey}>
@@ -119,28 +118,6 @@ export function AnimationsPage() {
        <CodeLabel text=".dt-animate-pulse | .dt-animate-ping | .dt-animate-spin" />
      </Section>

-      <Section title="Stagger Container" description="Automatic staggered scale-in animation for child elements. Customizable via --dt-stagger-duration and --dt-stagger-interval.">
-        <DTStaggerContainer
-          key={staggerKey}
-          className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-dt-3"
-        >
-          {Array.from({ length: 12 }, (_, i) => (
-            <DTCard key={i} title={`CARD ${i + 1}`} style={{ textAlign: 'center' }}>
-              <div className="card-body" style={{ fontSize: '0.75rem' }}>Item #{i + 1}</div>
-            </DTCard>
-          ))}
-        </DTStaggerContainer>
-        <button
-          className="btn-secondary"
-          style={{ marginTop: 'var(--space-4)' }}
-          onClick={() => setStaggerKey(k => k + 1)}
-          type="button"
-        >
-          REPLAY STAGGER
-        </button>
-        <CodeLabel text="<DTStaggerContainer> — nth-child delays up to 24 children" />
-      </Section>
-
      <Section title="Transition Utilities" description="Accordion expand, chevron rotation, and progress bar transitions.">
        <div style={{ maxWidth: 400 }}>
          <button
@@ -156,7 +133,6 @@ export function AnimationsPage() {
              cursor: 'pointer',
              color: 'var(--color-text)',
              fontWeight: 600,
-              textTransform: 'uppercase',
            }}
            aria-expanded={accordionExpanded}
            onClick={() => setAccordionExpanded(!accordionExpanded)}
--- a/packages/showcase/desktop/src/renderer/pages/BevelsPage.tsx
+++ b/packages/showcase/desktop/src/renderer/pages/BevelsPage.tsx
@@ -53,12 +53,12 @@ export function BevelsPage() {
        <Row>
          {modes.map(mode => (
            <button key={mode} className={`dt-menu-item mode-${mode}`} type="button" onClick={() => setModalVariant(mode)}>
-              {mode.toUpperCase()} MODAL
+              {mode} Modal
            </button>
          ))}
        </Row>
        <CodeLabel text="<DTModal variant='normal' visible onDismiss title='...'>content</DTModal>" />
-        <DTModal visible={modalVariant !== null} onDismiss={() => setModalVariant(null)} variant={modalVariant ?? 'normal'} title={`${(modalVariant ?? 'normal').toUpperCase()} MODAL`}>
+        <DTModal visible={modalVariant !== null} onDismiss={() => setModalVariant(null)} variant={modalVariant ?? 'normal'} title={`${modalVariant ?? 'normal'} Modal`}>
          <p style={{ marginBottom: 'var(--space-4)' }}>This is a <strong>{modalVariant}</strong> modal with beveled card shape, backdrop blur, and scale-in animation.</p>
          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>Click the backdrop or press Escape to dismiss.</p>
        </DTModal>
@@ -74,7 +74,7 @@ export function BevelsPage() {
          </button>
        </Row>
        <CodeLabel text="<DTDrawer position='right' heading='...' visible onDismiss>content</DTDrawer>" />
-        <DTDrawer visible={drawerSide !== null} onDismiss={() => setDrawerSide(null)} position={drawerSide ?? 'right'} heading={`${(drawerSide ?? 'right').toUpperCase()} DRAWER`} headingVariant={drawerSide === 'left' ? 'other' : 'emphasis'}>
+        <DTDrawer visible={drawerSide !== null} onDismiss={() => setDrawerSide(null)} position={drawerSide ?? 'right'} heading={`${drawerSide ?? 'right'} Drawer`} headingVariant={drawerSide === 'left' ? 'other' : 'emphasis'}>
          <p style={{ marginBottom: 'var(--space-4)' }}>Sliding panel from the <strong>{drawerSide}</strong> edge with beveled corners and backdrop blur.</p>
          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>Click the backdrop, press Escape, or click ✕ to dismiss.</p>
        </DTDrawer>
@@ -91,7 +91,7 @@ export function BevelsPage() {

      <Section title="Accent Top" description="Used on accordion headers and menu items.">
        <div className="dt-accent-top" style={{ padding: 'var(--space-4)', background: 'var(--color-surface)', border: '1px solid var(--color-border)' }}>
-          <span style={{ fontWeight: 600, textTransform: 'uppercase' }}>Thick Top Border Accent</span>
+          <span style={{ fontWeight: 600 }}>Thick Top Border Accent</span>
        </div>
        <CodeLabel text=".dt-accent-top" />
      </Section>
@@ -99,7 +99,7 @@ export function BevelsPage() {
      <Section title="Card Color Modes" description="Per-card mode coloring — see Advanced Cards page for full demos.">
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-dt-3">
          {modes.map(mode => (
-            <DTCard key={mode} variant={mode} title={mode.toUpperCase()}>
+            <DTCard key={mode} variant={mode} title={mode}>
              <div className="card-body" style={{ fontSize: '0.75rem' }}>mode-{mode}</div>
            </DTCard>
          ))}
--- a/packages/showcase/desktop/src/renderer/pages/HexBackgroundPage.tsx
+++ b/packages/showcase/desktop/src/renderer/pages/HexBackgroundPage.tsx
@@ -58,7 +58,7 @@ export function HexBackgroundPage({ hexProps, onHexPropsChange }: HexBackgroundP
          {sliders.map(({ key, label, min, max, step }) => (
            <div key={key} style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 'var(--space-4)' }}>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
+                <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', letterSpacing: '0.1em' }}>
                  {label}
                </span>
                <input
--- a/packages/showcase/desktop/src/renderer/pages/HomePage.tsx
+++ b/packages/showcase/desktop/src/renderer/pages/HomePage.tsx
@@ -1,11 +1,11 @@
-import { DTCard, DTStaggerContainer } from '@dangerousthings/react';
+import { DTCard } from '@dangerousthings/react';
 import type { DTVariant } from '@dangerousthings/tokens';
 import { Section, CodeLabel } from '../components/Section';

 const categories: { hash: string; title: string; desc: string; mode: DTVariant; count: number }[] = [
  { hash: 'bevels', title: 'Bevels', desc: 'Angular clip-path patterns — cards, buttons, badges, media frames, modals, drawers', mode: 'normal', count: 8 },
  { hash: 'forms', title: 'Forms', desc: 'Text inputs, checkboxes, switches, radios, progress bars, accordions, steppers', mode: 'success', count: 7 },
-  { hash: 'animations', title: 'Animations', desc: 'Entrance animations, stagger containers, transition utilities, scrollbar styling', mode: 'other', count: 5 },
+  { hash: 'animations', title: 'Animations', desc: 'Entrance animations, transition utilities, scrollbar styling', mode: 'other', count: 5 },
  { hash: 'cards-advanced', title: 'Advanced Cards', desc: 'Card color modes, progress bars, badge overlays, interactive bevel buttons, feature legend', mode: 'warning', count: 6 },
  { hash: 'tokens', title: 'Tokens', desc: 'Color palette, typography, spacing, and shape values for the active brand', mode: 'normal', count: 3 },
 ];
@@ -31,7 +31,6 @@ export function HomePage() {
          fontWeight: 900,
          letterSpacing: '0.15em',
          marginBottom: '0.25rem',
-          textTransform: 'uppercase',
        }}>
          DANGEROUS THINGS
        </h1>
@@ -40,7 +39,6 @@ export function HomePage() {
          fontSize: '1.25rem',
          fontWeight: 700,
          letterSpacing: '0.2em',
-          textTransform: 'uppercase',
          marginTop: 0,
        }}>
          DESIGN SYSTEM
@@ -71,16 +69,15 @@ export function HomePage() {
        color: 'var(--color-text-muted)',
        fontSize: '0.7rem',
        letterSpacing: '0.15em',
-        textTransform: 'uppercase',
        marginBottom: 'var(--space-4)',
      }}>
        COMPONENT CATALOG
      </p>

-      <DTStaggerContainer className="grid grid-cols-1 md:grid-cols-2 gap-dt-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-dt-4">
        {categories.map(cat => (
          <a key={cat.hash} href={`#/${cat.hash}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-            <DTCard variant={cat.mode} title={cat.title.toUpperCase()}>
+            <DTCard variant={cat.mode} title={cat.title}>
              <div className="card-body">{cat.desc}</div>
              {cat.count > 0 && (
                <div style={{ color: 'var(--color-text-muted)', fontSize: '0.7rem', marginTop: 'var(--space-2)' }}>
@@ -90,7 +87,7 @@ export function HomePage() {
            </DTCard>
          </a>
        ))}
-      </DTStaggerContainer>
+      </div>

      <Section title="Quick Start" description="Import the React components and CSS to get started.">
        <div className="terminal dt-accent-top">
--- a/packages/showcase/desktop/src/renderer/style.css
+++ b/packages/showcase/desktop/src/renderer/style.css
@@ -43,7 +43,6 @@ body {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--color-primary);
-  text-transform: uppercase;
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-primary);
 }
@@ -65,7 +64,6 @@ body {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
-  text-transform: uppercase;
  transition: all var(--transition-fast);
 }

@@ -93,7 +91,6 @@ body {
  font-size: 0.625rem;
  font-weight: 600;
  cursor: pointer;
-  text-transform: uppercase;
  transition: all var(--transition-fast);
 }

@@ -117,7 +114,6 @@ body {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
-  text-transform: uppercase;
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
 }
@@ -151,7 +147,6 @@ body {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-primary);
-  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
@@ -175,7 +170,6 @@ body {
 .demo-label {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
-  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
@@ -200,7 +194,6 @@ body {
  padding: var(--space-3) var(--space-6);
  font-weight: 700;
  font-size: 0.875rem;
-  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition-fast);
@@ -244,7 +237,6 @@ body {
 .card-title {
  font-weight: 900;
  font-size: 1rem;
-  text-transform: uppercase;
  letter-spacing: 0.05em;
 }

@@ -260,7 +252,6 @@ body {
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  font-size: 0.75rem;
-  text-transform: uppercase;
  letter-spacing: 0.05em;
 }

@@ -300,7 +291,6 @@ input:focus {
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--color-primary);
-  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
 }
--- a/packages/showcase/mobile/src/screens/AnimationsScreen.tsx
+++ b/packages/showcase/mobile/src/screens/AnimationsScreen.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
-import { View } from 'react-native';
 import { Text } from 'react-native-paper';
 import {
  DTCard,
  DTLabel,
-  DTStaggerContainer,
  useDTTheme,
  useScaleIn,
  usePulse,
 } from '@dangerousthings/react-native';
-import type { DTVariant } from '@dangerousthings/react-native';
 import { ScreenContainer } from '../components/ScreenContainer';
 import { DemoSection } from '../components/DemoSection';
 import { CodeLabel } from '../components/CodeLabel';
@@ -20,44 +17,8 @@ export function AnimationsScreen() {
  const scaleAnim = useScaleIn({ duration: 600 });
  const pulseAnim = usePulse(true);

-  const modes: DTVariant[] = ['normal', 'emphasis', 'warning', 'success', 'other'];
-
  return (
    <ScreenContainer>
-      {/* Stagger Container */}
-      <DemoSection
-        title="DTStaggerContainer"
-        variant="normal"
-        description="Staggered scale-in entrance animation for child elements."
-      >
-        <DTStaggerContainer duration={330} interval={75}>
-          {modes.map((mode) => (
-            <DTCard key={mode} mode={mode} title={mode.toUpperCase()} style={{ marginBottom: 12 }}>
-              <Text variant="bodySmall" style={{ color: theme.colors.onSurface }}>
-                Staggered entrance with scale animation
-              </Text>
-            </DTCard>
-          ))}
-        </DTStaggerContainer>
-        <CodeLabel text="<DTStaggerContainer duration={330} interval={75}>" />
-      </DemoSection>
-
-      {/* Stagger with Labels */}
-      <DemoSection
-        title="Staggered Labels"
-        variant="emphasis"
-        description="Labels with staggered entrance animation."
-      >
-        <DTStaggerContainer duration={400} interval={100}>
-          {modes.map((mode) => (
-            <View key={mode} style={{ marginBottom: 8 }}>
-              <DTLabel primaryText={mode.toUpperCase()} mode={mode} />
-            </View>
-          ))}
-        </DTStaggerContainer>
-        <CodeLabel text="DTStaggerContainer > DTLabel — customizable timing" />
-      </DemoSection>
-
      {/* Scale-In Hook */}
      <DemoSection
        title="useScaleIn"
--- a/packages/showcase/mobile/src/screens/CardsAdvancedScreen.tsx
+++ b/packages/showcase/mobile/src/screens/CardsAdvancedScreen.tsx
@@ -5,7 +5,6 @@ import {
  DTCard,
  DTChip,
  DTBadgeOverlay,
-  DTStaggerContainer,
  useDTTheme,
 } from '@dangerousthings/react-native';
 import type { DTVariant } from '@dangerousthings/react-native';
@@ -83,29 +82,6 @@ export function CardsAdvancedScreen() {
        <CodeLabel text="<DTBadgeOverlay position='bottom-right'><DTChip variant='warning'>LAB</DTChip>" />
      </DemoSection>

-      {/* Stagger + Progress */}
-      <DemoSection
-        title="Staggered Cards with Progress"
-        variant="success"
-        description="Stagger container with progress bars across all modes."
-      >
-        <DTStaggerContainer>
-          {modes.map((mode) => (
-            <DTCard
-              key={mode}
-              mode={mode}
-              title={mode.toUpperCase()}
-              progress={Math.random()}
-              style={{ marginBottom: 12 }}
-            >
-              <Text variant="bodySmall" style={{ color: theme.colors.onSurface }}>
-                Staggered + progress
-              </Text>
-            </DTCard>
-          ))}
-        </DTStaggerContainer>
-        <CodeLabel text="DTStaggerContainer > DTCard progress" />
-      </DemoSection>
    </ScreenContainer>
  );
 }
--- a/packages/showcase/mobile/src/screens/HomeScreen.tsx
+++ b/packages/showcase/mobile/src/screens/HomeScreen.tsx
@@ -58,14 +58,14 @@ const categories: {
  },
  {
    title: 'ADVANCED CARDS',
-    subtitle: 'Selected state, progress bar, badge overlays, stagger',
+    subtitle: 'Selected state, progress bar, badge overlays',
    mode: 'emphasis',
    route: 'CardsAdvanced',
    count: 4,
  },
  {
    title: 'ANIMATIONS',
-    subtitle: 'DTStaggerContainer, useScaleIn, usePulse',
+    subtitle: 'useScaleIn, usePulse',
    mode: 'success',
    route: 'Animations',
    count: 3,
--- a/packages/web/src/components/bevels.css
+++ b/packages/web/src/components/bevels.css
@@ -585,8 +585,20 @@
 .dt-bevel-card > .dt-card-badge {
  position: absolute;
  bottom: calc(var(--bevel-md) * 0.25);
-  right: calc(var(--bevel-md) * 0.25);
+  right: calc(var(--bevel-md) * -0.15);
  z-index: 4;
+  background: var(--dt-card-color, var(--color-primary));
+  color: var(--color-bg);
+  padding: 0.35em 2em 0.35em 1em;
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+[data-brand="classic"] .card > .dt-card-badge,
+[data-brand="classic"] .dt-bevel-card > .dt-card-badge {
+  border-radius: 0.375rem;
 }

 /* ============================================================================
--- a/packages/web/src/components/forms-dt.css
+++ b/packages/web/src/components/forms-dt.css
@@ -251,7 +251,6 @@
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
-  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
@@ -351,7 +350,6 @@
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
-  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
 }
@@ -420,7 +418,6 @@
  border-top: 5px solid var(--color-primary);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.2);
  font-weight: 600;
-  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
 }