Improve showcase pages: drawers, modals, badges, and Vite caching fix

- DTDrawer: storefront-matching dual-element bevel border, slide-in/out
  animations from correct edge, 99vh height, bold 2em header, box shadow
- DTModal: interactive demos on Bevels page with all 5 mode variants
- Badges: solid color fill with contrasting text (black on dark, white on light)
  instead of transparent fill with colored text
- Animations: add dt-slide-right and dt-slide-left keyframes for drawers
- Bevels page: remove trash "Button Bevels", add interactive modal/drawer
  demos, fix media frame to use real images with proper bevel styling
- Advanced Cards: remove redundant media frame sections, rename "Menu Items"
  to "Buttons", remove DTButton/dt-btn references
- Forms page: rename "Menu Items" to "Buttons"
- Vite config: exclude design system packages from optimizeDeps pre-bundling
  and watch dist directories to prevent stale CSS during development

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/web/src/components/animations.css

@@ -21,6 +21,16 @@
   to   { transform: translateY(0); }
 }
 
+@keyframes dt-slide-right {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes dt-slide-left {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+
 /* ============================================================================
    Interactive Animations
    ============================================================================ */

packages/web/src/components/bevels.css

@@ -228,36 +228,48 @@
       2px calc(100% - 2px));
 }
 
+/* Colored badge variants — solid color fill with contrasting text.
+   Dark mode: black text on bright neon fill.
+   Light mode: white text on bright fill (via --color-bg which flips per theme). */
 [data-brand="dt"] .badge-success {
   --badge-border-color: var(--color-success);
-  --badge-fill: rgba(var(--color-success-rgb), 0.25);
+  --badge-fill: var(--color-success);
+  color: var(--color-bg);
 }
 
 [data-brand="dt"] .badge-error {
   --badge-border-color: var(--color-error);
-  --badge-fill: rgba(var(--color-error-rgb), 0.25);
+  --badge-fill: var(--color-error);
+  color: var(--color-bg);
 }
 
 [data-brand="dt"] .badge-warning {
   --badge-border-color: var(--color-warning);
-  --badge-fill: rgba(var(--color-warning-rgb), 0.25);
+  --badge-fill: var(--color-warning);
+  color: var(--color-bg);
 }
 
 [data-brand="dt"] .badge-info {
   --badge-border-color: var(--color-info);
-  --badge-fill: rgba(var(--color-info-rgb), 0.25);
+  --badge-fill: var(--color-info);
+  color: var(--color-bg);
+}
+
+/* Classic brand colored badges — same solid fill approach */
+[data-brand="classic"] .badge-success {
+  color: var(--color-bg);
+}
+
+[data-brand="classic"] .badge-error {
+  color: var(--color-bg);
+}
+
+[data-brand="classic"] .badge-warning {
+  color: var(--color-bg);
 }
 
-/* ============================================================================
-   Badge text override for Classic — ensure readable text in light mode
-   Status-color text on 25% opacity backgrounds fails WCAG AA on light bg.
-   Use primary text color instead (same approach as DT badges above).
-   ============================================================================ */
-[data-brand="classic"] .badge-success,
-[data-brand="classic"] .badge-error,
-[data-brand="classic"] .badge-warning,
 [data-brand="classic"] .badge-info {
-  color: var(--color-text-primary);
+  color: var(--color-bg);
 }
 
 /* ============================================================================
@@ -386,6 +398,16 @@
       0% calc(100% - var(--bevel-lg)));
 }
 
+/* Inner surface clip — inset from outer to create colored border frame */
+.dt-bevel-drawer-right-inner {
+  clip-path: polygon(3px calc(var(--bevel-lg) + 1px),
+      calc(var(--bevel-lg) + 1px) 3px,
+      100% 3px,
+      100% calc(100% - 3px),
+      calc(var(--bevel-lg) + 1px) calc(100% - 3px),
+      3px calc(100% - var(--bevel-lg) - 1px));
+}
+
 .dt-bevel-drawer-left {
   clip-path: polygon(0% 0%,
       calc(100% - var(--bevel-lg)) 0%,
@@ -395,6 +417,16 @@
       0% 100%);
 }
 
+/* Inner surface clip — inset from outer to create colored border frame */
+.dt-bevel-drawer-left-inner {
+  clip-path: polygon(0% 3px,
+      calc(100% - var(--bevel-lg) - 1px) 3px,
+      calc(100% - 3px) calc(var(--bevel-lg) + 1px),
+      calc(100% - 3px) calc(100% - var(--bevel-lg) - 1px),
+      calc(100% - var(--bevel-lg) - 1px) calc(100% - 3px),
+      0% calc(100% - 3px));
+}
+
 /* ============================================================================
    Small Bevels — for compact elements (arrows, stepper buttons)
    ============================================================================ */