@donotdev/ui 0.0.12 → 0.0.13

package/dist/dndev.css

@@ -3147,7 +3147,6 @@ em {
   flex-direction: row;
   gap: var(--gap-md);
   justify-content: center;
-
 }
 
 .dndev-cta-actions .dndev-interactive {
@@ -7535,6 +7534,10 @@ input[type='number'] {
     font-weight: var(--font-weight-bold);
   }
 
+.dndev-text-base[data-italic] {
+    font-style: italic;
+  }
+
 /* packages/components/src/atomic/Toaster/Toaster.css */
 
 .dndev-toast-viewport {
@@ -7734,8 +7737,9 @@ input[type='number'] {
 
 .dndev-toggle-group {
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0;
+  gap: var(--gap-sm);
   padding: 0.125rem;
   border-radius: var(--radius-interactive);
   background-color: var(--muted);
@@ -7931,12 +7935,16 @@ input[type='number'] {
 
 .dndev-video-dialog {
   max-width: 90vw;
-  max-height: 90vh;
 }
 
 .dndev-video-dialog .dndev-modal-body {
     padding: 0;
+    overflow: hidden;
+  }
+
+.dndev-video-dialog .dndev-video-frame {
     aspect-ratio: 16/9;
+    max-height: calc(90vh - 5rem);
   }
 
 /* 6. Animation keyframes */
@@ -9080,6 +9088,8 @@ h4[data-variant='code'] {
   /* Narrow content (mobile-first PWA, app-like single column) - single source of truth */
   --narrow-content-max: 37.5rem;
   /* 600px */
+  --narrow-form-max: 30rem;
+  /* 480px - inner form/input width within narrow layout */
 
   /* Content Area Calculations */
   /* Header content area (excludes sidebar on some presets) */
@@ -9190,7 +9200,8 @@ main[role='main'][data-routing-animation='fade'] {
 /* Slide animation - keyframes handle opacity 0→1 */
 
 main[role='main'][data-routing-animation='slide'] {
-  animation: routeSlideIn var(--routing-default-duration, 300ms) ease-in forwards;
+  animation: routeSlideIn var(--routing-default-duration, 300ms) ease-in
+    forwards;
 }
 
 /* No animation - already visible by default, explicit for clarity */
@@ -9204,11 +9215,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width < 768px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-mobile-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-mobile-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-mobile-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-mobile-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9216,11 +9231,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=768px) and (width <=1023px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-tablet-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-tablet-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9228,11 +9247,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=1024px) and (width <=1439px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-desktop-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-desktop-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9240,11 +9263,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=1440px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-wide-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-wide-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-wide-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-wide-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9268,7 +9295,6 @@ main[role='main'][data-routing-animation='none'] {
 /* Mobile/Tablet: Hide sidebars - WCAG & Lighthouse best practices */
 
 @media (width <=1023px) {
-
   .dndev-layout aside[role='navigation'].sidebar,
   aside[role='navigation'].sidebar {
     display: none !important;
@@ -9292,8 +9318,10 @@ main[role='main'][data-routing-animation='none'] {
     'header header'
     'sidebar main'
     'footer footer';
-  grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height),
-      auto);
+  grid-template-rows: var(--header-height) 1fr minmax(
+      var(--footer-height),
+      auto
+    );
   grid-template-columns: var(--sidebar-width) 1fr;
 }
 
@@ -9307,7 +9335,10 @@ main[role='main'][data-routing-animation='none'] {
   grid-template-rows: var(--header-height) 1fr auto;
 }
 
-.dndev-layout[data-footer-mode='scroll'] header[role='banner'] { position: sticky; top: 0; }
+.dndev-layout[data-footer-mode='scroll'] header[role='banner'] {
+    position: sticky;
+    top: 0;
+  }
 
 .dndev-layout[data-footer-mode='scroll'] aside.sidebar[role='navigation'] {
     position: sticky;
@@ -9316,14 +9347,20 @@ main[role='main'][data-routing-animation='none'] {
     align-self: start;
   }
 
-.dndev-layout[data-footer-mode='scroll'] main[role='main'] { overflow-y: visible; overflow-x: hidden; }
+.dndev-layout[data-footer-mode='scroll'] main[role='main'] {
+    overflow-y: visible;
+    overflow-x: hidden;
+  }
 
 .dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
     grid-column: 2 / -1;
     height: auto;
   }
 
-:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * { height: auto; min-height: var(--footer-height); }
+:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
+      height: auto;
+      min-height: var(--footer-height);
+    }
 
 /* Mobile: footer scroll mode ON by default (same rules) */
 
@@ -9334,15 +9371,24 @@ main[role='main'][data-routing-animation='none'] {
     grid-template-rows: var(--header-height) 1fr auto;
   }
 
-    .dndev-layout header[role='banner'] { position: sticky; top: 0; }
+    .dndev-layout header[role='banner'] {
+      position: sticky;
+      top: 0;
+    }
 
-    .dndev-layout main[role='main'] { overflow-y: visible; overflow-x: hidden; }
+    .dndev-layout main[role='main'] {
+      overflow-y: visible;
+      overflow-x: hidden;
+    }
 
     .dndev-layout footer[role='contentinfo'] {
       height: auto;
     }
 
-      :is(.dndev-layout footer[role='contentinfo']) > * { height: auto; min-height: var(--footer-height); }
+      :is(.dndev-layout footer[role='contentinfo']) > * {
+        height: auto;
+        min-height: var(--footer-height);
+      }
 }
 
 /* Presets with no footer at all */
@@ -9510,7 +9556,8 @@ aside[role='navigation'].sidebar .dndev-sidebar-resize-handle:focus-visible {
 
 /* Active drag state */
 
-aside[role='navigation'].sidebar[data-dragging='true'] .dndev-sidebar-resize-handle {
+aside[role='navigation'].sidebar[data-dragging='true']
+  .dndev-sidebar-resize-handle {
   background: var(--primary);
 }
 
@@ -9526,7 +9573,10 @@ aside[role='navigation'].sidebar[data-dragging='true'] .dndev-sidebar-resize-han
 /* Landing: AUTO display mode - compact below wide breakpoint (< 1440px) */
 
 @media (width < 1440px) {
-  [data-layout='landing'] header[role='banner'] [data-display='auto'] .dndev-interactive-label {
+  [data-layout='landing']
+    header[role='banner']
+    [data-display='auto']
+    .dndev-interactive-label {
     display: none;
   }
 }
@@ -9699,7 +9749,6 @@ main[role='main'] {
   contain: layout style;
 
   /* First child after breadcrumbs grows to fill space */
-
 }
 
 main[role='main'] > *:not(.breadcrumbs-container):first-of-type,main[role='main'] > .breadcrumbs-container + * {
@@ -9827,7 +9876,6 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 /* Mobile (<1024px): Show merged-bar, hide zones */
 
 @media (width <=1023px) {
-
   /* Presets with mergedBar: top (admin, moolti, game, docs) */
   [data-layout='admin'] .merged-bar[data-position='top'],
   [data-layout='moolti'] .merged-bar[data-position='top'],
@@ -10250,10 +10298,10 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* Breakthrough pattern: only applies inside PageContainer */
 
-.dndev-container>.dndev-section-full-width,
-.dndev-container>.dndev-cta,
-.dndev-container>.dndev-hero-section,
-.dndev-container>.dndev-tech-bento {
+.dndev-container > .dndev-section-full-width,
+.dndev-container > .dndev-cta,
+.dndev-container > .dndev-hero-section,
+.dndev-container > .dndev-tech-bento {
   /* Break out of PageContainer padding and max-width constraint */
   /* Account for sidebar: --sidebar-width is 0px for presets without sidebar */
   width: calc(100dvw - var(--sidebar-width));
@@ -10294,7 +10342,16 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   width: 100%;
 }
 
-/* ScrollArea wrapper */
+/* Scroll wrapper - stretches to full width so scrollbar is at viewport edge */
+
+.dndev-game-container__scroll-wrapper {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+  align-self: stretch;
+}
+
+/* ScrollArea - fills wrapper */
 
 .dndev-game-container__scroll {
   width: 100%;
@@ -10333,20 +10390,16 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   justify-content: space-between;
 }
 
-/* Narrow content wrapper - constrained by --narrow-content-max (mobile-first PWA) */
+/* Narrow content wrapper - constrained by --narrow-content-max, centered inside scroll */
+
+/* height: 100% fills the scroll viewport so children can use percentage heights.
+   Content taller than viewport still scrolls — overflow propagates to the scroll container. */
 
 .dndev-game-container__content-narrow {
   width: 100%;
   max-width: var(--narrow-content-max);
   margin-inline: auto;
-  min-height: 0;
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.dndev-game-container__content-narrow .dndev-game-container__scroll {
-  width: 100%;
+  height: 100%;
 }
 
 /* CTA Zone - Fixed at bottom; safe area for notched devices */
@@ -10361,6 +10414,13 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* CTA Button */
 
+.dndev-game-container__cta-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--gap-sm);
+  width: 100%;
+}
+
 .dndev-game-container__cta-button {
   height: var(--touch-target);
   width: 100%;