@donotdev/ui 0.0.10 → 0.0.12

package/dist/dndev.css

@@ -3144,9 +3144,10 @@ em {
 
 .dndev-cta-actions {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: var(--gap-md);
   justify-content: center;
+
 }
 
 .dndev-cta-actions .dndev-interactive {
@@ -3179,13 +3180,6 @@ em {
       border-color: var(--foreground);
     }
 
-@media (width >= 768px) {
-
-.dndev-cta-actions {
-    flex-direction: row;
-}
-  }
-
 /* packages/components/src/atomic/Card/Card.css */
 
 /* Card layout - grid with gap */
@@ -3635,12 +3629,10 @@ em {
   /* Code-specific overrides: background color, text color, and layout */
   display: flex;
   flex-direction: column;
-  background: var(
-    --muted
-  ); /* Override surface gradient with code-specific dark background */
-  color: var(
-    --muted-foreground
-  ); /* Override surface text color for dark background */
+  background: var(--muted);
+  /* Override surface gradient with code-specific dark background */
+  color: var(--muted-foreground);
+  /* Override surface text color for dark background */
   overflow: hidden;
   font-family: var(--font-mono);
   font-size: var(--font-size-sm);
@@ -3714,8 +3706,6 @@ em {
   white-space: pre;
   overflow-x: auto;
   overflow-y: visible;
-  min-width: -moz-min-content;
-  min-width: min-content;
 }
 
 .dndev-code-pre[data-compact='true'] {
@@ -3732,16 +3722,19 @@ em {
           user-select: none;
   padding-inline-end: var(--gap-md);
   text-align: end;
-  font-size: inherit; /* Match parent code font-size */
+  font-size: inherit;
+  /* Match parent code font-size */
   opacity: var(--opacity-muted);
   width: 3rem;
   flex-shrink: 0;
   color: var(--muted-foreground);
-  line-height: 1.5; /* Consistent line height */
+  line-height: 1.5;
+  /* Consistent line height */
 }
 
 .dndev-code-line-number {
-  line-height: inherit; /* Inherit from parent */
+  line-height: inherit;
+  /* Inherit from parent */
 }
 
 .dndev-code-code {
@@ -3749,8 +3742,10 @@ em {
   min-width: 0;
   text-align: start;
   display: block;
-  line-height: 1.5; /* Match line numbers */
-  font-size: var(--font-size-sm); /* Explicit match with line numbers */
+  line-height: 1.5;
+  /* Match line numbers */
+  font-size: var(--font-size-sm);
+  /* Explicit match with line numbers */
 }
 
 /* Ensure shiki-generated code respects line-height AND font-size */
@@ -3758,7 +3753,8 @@ em {
 .dndev-code-code pre,
 .dndev-code-code code {
   line-height: inherit;
-  font-size: inherit; /* Match parent font-size */
+  font-size: inherit;
+  /* Match parent font-size */
 }
 
 /* packages/components/src/atomic/Command/Command.css */
@@ -4459,6 +4455,167 @@ em {
   padding-block: var(--gap-lg);
 }
 
+/* packages/components/src/advanced/ImageGallery/ImageGallery.css */
+
+.image-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  outline: none;
+}
+
+.image-gallery:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-lg);
+}
+
+/* Empty state */
+
+.image-gallery--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--muted);
+  border-radius: var(--radius-lg);
+}
+
+.image-gallery__placeholder {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+}
+
+/* Main image container */
+
+.image-gallery__main {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-surface);
+  background-color: var(--muted);
+}
+
+.image-gallery__main-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+  position: relative;
+}
+
+/* Navigation arrows */
+
+.image-gallery__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: var(--background);
+  color: var(--foreground);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    background-color 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 2;
+}
+
+.image-gallery__main:hover .image-gallery__nav,
+.image-gallery:focus-within .image-gallery__nav {
+  opacity: 1;
+}
+
+.image-gallery__nav:hover {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.image-gallery__nav:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.image-gallery__nav--prev {
+  inset-inline-start: var(--gap-md);
+}
+
+.image-gallery__nav--next {
+  inset-inline-end: var(--gap-md);
+}
+
+/* Thumbnails */
+
+.image-gallery__thumbnails {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+}
+
+.image-gallery__thumbnail {
+  flex: 0 0 auto;
+  width: 80px;
+  height: 60px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--radius-surface);
+  overflow: hidden;
+  cursor: pointer;
+  background: none;
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.image-gallery__thumbnail:hover {
+  border-color: var(--muted-foreground);
+}
+
+.image-gallery__thumbnail:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.image-gallery__thumbnail--selected {
+  border-color: var(--primary);
+}
+
+.image-gallery__thumbnail-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+
+/* Responsive adjustments */
+
+@media (max-width: 640px) {
+  .image-gallery__thumbnail {
+    width: 60px;
+    height: 45px;
+  }
+
+  .image-gallery__nav {
+    width: 36px;
+    height: 36px;
+    opacity: 0.8;
+  }
+
+  .image-gallery__nav svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 /* packages/components/src/atomic/Input/Input.css */
 
 /* Hide number input spinners - cleaner UI for price/range inputs */
@@ -7360,6 +7517,24 @@ input[type='number'] {
     font-size: var(--font-size-sm);
   }
 
+/* Font weight overrides (after level rules, so weight prop overrides level defaults) */
+
+.dndev-text-base[data-font-weight='normal'] {
+    font-weight: var(--font-weight-normal);
+  }
+
+.dndev-text-base[data-font-weight='medium'] {
+    font-weight: var(--font-weight-medium);
+  }
+
+.dndev-text-base[data-font-weight='semibold'] {
+    font-weight: var(--font-weight-semibold);
+  }
+
+.dndev-text-base[data-font-weight='bold'] {
+    font-weight: var(--font-weight-bold);
+  }
+
 /* packages/components/src/atomic/Toaster/Toaster.css */
 
 .dndev-toast-viewport {
@@ -8898,9 +9073,14 @@ h4[data-variant='code'] {
   --sidebar-resize-handle-width: 6px;
 
   /* Content width - max constraint only, grid handles sidebar space */
-  /* PageContainer sets --max-content-width, main's 1fr handles available space */
+  /* PageContainer sets --max-content-width per variant, components use --content-width */
+  --max-content-width: 100%;
   --content-width: var(--max-content-width, 100%);
 
+  /* Narrow content (mobile-first PWA, app-like single column) - single source of truth */
+  --narrow-content-max: 37.5rem;
+  /* 600px */
+
   /* Content Area Calculations */
   /* Header content area (excludes sidebar on some presets) */
   --header-content-width: 100%;
@@ -9010,8 +9190,7 @@ 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 */
@@ -9025,15 +9204,11 @@ 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;
   }
 }
 
@@ -9041,15 +9216,11 @@ 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;
   }
 }
 
@@ -9057,15 +9228,11 @@ 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;
   }
 }
 
@@ -9073,15 +9240,11 @@ 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;
   }
 }
 
@@ -9105,6 +9268,7 @@ 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;
@@ -9128,57 +9292,59 @@ 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;
-
-  /* Mobile: Grid scrolls instead of main - footer scrolls with content */
 }
 
-@media (width <=1023px) {
-
-.dndev-layout {
-    overflow-y: auto;
-    overflow-x: hidden;
-    /* Keep footer row - grid scrolls so footer scrolls with content */
-    grid-template-areas:
-      'header header'
-      'sidebar main'
-      'footer footer';
-    grid-template-rows: var(--header-height) min-content auto;
-}
-  }
+/* Footer scroll mode: grid scrolls, footer scrolls with content */
 
-/* Footer scroll mode - grid scrolls, footer scrolls with content (opt-in for desktop) */
+/* Desktop: opt-in via data-footer-mode="scroll" */
 
 .dndev-layout[data-footer-mode='scroll'] {
   overflow-y: auto;
   overflow-x: hidden;
-  grid-template-rows: var(--header-height) min-content auto;
+  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'] main[role='main'] {
-  overflow: visible;
-  min-height: -moz-min-content;
-  min-height: min-content;
-}
+.dndev-layout[data-footer-mode='scroll'] aside.sidebar[role='navigation'] {
+    position: sticky;
+    top: var(--header-height);
+    height: calc(100dvh - var(--header-height));
+    align-self: start;
+  }
 
-.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
-  height: auto;
-}
+.dndev-layout[data-footer-mode='scroll'] main[role='main'] { overflow-y: visible; overflow-x: hidden; }
 
-:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
+.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
+    grid-column: 2 / -1;
     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) */
+
+@media (width <=1023px) {
+  .dndev-layout {
+    overflow-y: auto;
+    overflow-x: hidden;
+    grid-template-rows: var(--header-height) 1fr auto;
+  }
+
+    .dndev-layout header[role='banner'] { position: sticky; top: 0; }
+
+    .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); }
+}
+
 /* Presets with no footer at all */
 
 [data-layout='moolti'] footer[role='contentinfo'],
@@ -9344,8 +9510,7 @@ 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);
 }
 
@@ -9361,10 +9526,7 @@ aside[role='navigation'].sidebar[data-dragging='true']
 /* 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;
   }
 }
@@ -9537,23 +9699,13 @@ 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 + * {
     flex: 1 1 auto;
   }
 
-/* Mobile: Grid scrolls, main doesn't */
-
-@media (width <=1023px) {
-
-main[role='main'] {
-    overflow: visible;
-    min-height: -moz-min-content;
-    min-height: min-content;
-}
-  }
-
 /* Footer: Full width by default, app presets start after sidebar */
 
 /* box-sizing: border-box ensures borders are included in height */
@@ -9675,6 +9827,7 @@ 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'],
@@ -10032,32 +10185,26 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 /* Standard width - responsive */
 
 .dndev-container[data-variant='standard'] {
-    --max-content-width: 100%;
+    --max-content-width: min(87.5rem, 100%);
+    max-width: var(--content-width);
+    /* 1480px max, but never exceeds container width */
   }
 
-@media (width >=1024px) {
-
-.dndev-container[data-variant='standard'] {
-      --max-content-width: 87.5rem;
-      /* 1480px */
-      /* Padding stays: part of centering space when max-width applies */
-  }
-    }
-
 /* Docs width - responsive */
 
 .dndev-container[data-variant='docs'] {
-    --max-content-width: 100%;
+    --max-content-width: min(56.25rem, 100%);
+    max-width: var(--content-width);
+    /* 900px max, but never exceeds container width */
   }
 
-@media (width >=1024px) {
+/* Narrow width - mobile-first single column (PWA, app-like on every device) */
 
-.dndev-container[data-variant='docs'] {
-      --max-content-width: 56.25rem;
-      /* 900px */
-      /* Padding stays: always prevents edge touching */
+.dndev-container[data-variant='narrow'] {
+    --max-content-width: min(var(--narrow-content-max), 100%);
+    max-width: var(--content-width);
+    /* 600px max, but never exceeds container width */
   }
-    }
 
 /* Fixed frame - fills parent exactly, prevents parent scroll */
 
@@ -10103,10 +10250,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));
@@ -10186,12 +10333,29 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   justify-content: space-between;
 }
 
-/* CTA Zone - Fixed at bottom */
+/* Narrow content wrapper - constrained by --narrow-content-max (mobile-first PWA) */
+
+.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%;
+}
+
+/* CTA Zone - Fixed at bottom; safe area for notched devices */
 
 .dndev-game-container__cta {
   display: flex;
   flex-direction: column;
   padding-top: var(--gap-md);
+  padding-bottom: env(safe-area-inset-bottom);
   border-top: 2px solid var(--border);
 }