@donotdev/ui 0.0.8 → 0.0.10

package/dist/styles/index.css

@@ -2209,6 +2209,20 @@ em {
   padding-inline-start: var(--gap-md);
 }
 
+/* Bare mode - no visual chrome, used inside FloatingLabel or custom wrappers */
+
+[data-bare] {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+[data-bare]:hover,[data-bare]:focus,[data-bare]:focus-visible {
+    border-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+
 /* Password strength bar height override */
 
 .dndev-password-strength-bar {
@@ -2724,6 +2738,34 @@ em {
 
 /* Label styling moved to patterns.css (.dndev-interactive-label) */
 
+/* Loading state */
+
+[data-loading] {
+  cursor: wait;
+  pointer-events: none;
+}
+
+/* Button spinner - inherits size from button font-size */
+
+.dndev-button-spinner {
+  flex-shrink: 0;
+}
+
+/* Progress ring for upload percentage */
+
+.dndev-button-progress {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.dndev-progress-ring {
+  width: 1em;
+  height: 1em;
+  transform: rotate(-90deg);
+}
+
 /* packages/components/src/atomic/Calendar/Calendar.css */
 
 /**
@@ -3282,6 +3324,7 @@ em {
 
 .dndev-collapsible-content[data-state='open'] {
   animation: slideDown var(--dur-normal) var(--ease-in-out);
+  overflow: visible; /* Allow dropdowns/overlays to escape when open */
 }
 
 .dndev-collapsible-content[data-state='closed'] {
@@ -4414,6 +4457,18 @@ em {
 
 /* packages/components/src/atomic/Input/Input.css */
 
+/* Hide number input spinners - cleaner UI for price/range inputs */
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
 /* Input with leading icon (search, etc.) */
 
 .dndev-input-with-leading-icon {
@@ -4612,47 +4667,79 @@ em {
     margin-inline-start: var(--gap-sm);
   }
 
-/* Floating Label - positioned absolutely at top of input fields */
+/* Floating Fieldset - native border-cutting via legend */
 
-.dndev-floating-label {
-  position: absolute;
-  inset-inline-start: var(--gap-md);
-  top: calc(-1 * var(--font-size-xs) / 2 - 1px);
+.dndev-floating-fieldset {
+  position: relative;
+  border: var(--border-hairline) solid var(--line-2);
+  border-radius: var(--radius-interactive);
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  transition: all var(--dur-normal) var(--ease-in-out);
+  text-align: start;
+  /* Flex-aware: allow fieldset to shrink in flex containers */
+  min-width: 0;
+  width: 100%;
+}
+
+.dndev-floating-fieldset:hover {
+  border-color: var(--ring);
+}
+
+.dndev-floating-fieldset:focus-within {
+  border-color: var(--ring);
+}
+
+.dndev-floating-fieldset[data-disabled='true'] {
+  opacity: var(--opacity-muted);
+  cursor: not-allowed;
+}
+
+/* Legend sits on border - browser natively cuts border */
+
+.dndev-floating-legend {
+  margin-inline-start: var(--gap-sm);
+  padding: 0 var(--gap-sm);
   font-size: var(--font-size-xs);
   font-weight: 500;
-  pointer-events: none;
-  z-index: 1;
-  background-color: var(--background);
-  padding: 0 var(--gap-sm);
   line-height: 1;
   color: var(--foreground);
+  /* Ellipsis by default */
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* Inherit background when inside floating containers (dropdowns, menus, popovers) */
+.dndev-floating-legend label {
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-tight);
+}
 
-.dndev-floating .dndev-floating-label,
-.dndev-menu-content .dndev-floating-label,
-[class*='dndev-dropdown'] .dndev-floating-label,
-[class*='dndev-navigation'] .dndev-floating-label {
-  background-color: var(--popover);
-  color: var(--popover-foreground);
+.dndev-floating-fieldset[data-disabled='true'] .dndev-floating-legend {
+  color: var(--muted-foreground);
 }
 
-/* When floating container has blank glow, use solid popover background */
+/* Disable truncation when explicitly set to false */
 
-.dndev-floating[data-glow='blank'] .dndev-floating-label {
-  background-color: var(--popover);
+.dndev-floating-legend[data-truncate='false'] {
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
 }
 
-.dndev-floating-label[data-disabled='true'] {
-  color: var(--muted-foreground);
-}
+/* Input inside fieldset uses bare mode via data-bare attribute (set by Input component) */
 
-.dndev-floating-label[data-truncate='true'] {
-  max-width: calc(100% - var(--gap-md) * 2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* This rule is kept for non-Input children that might need border removal */
+
+.dndev-floating-fieldset > .dndev-input:not([data-bare]) {
+  border: none;
+  box-shadow: none;
+  background: transparent;
 }
 
 /* packages/components/src/atomic/List/List.css */
@@ -5003,11 +5090,33 @@ em {
 /* packages/components/src/atomic/Pagination/Pagination.css */
 
 .dndev-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  width: 100%;
+}
+
+.dndev-pagination-info {
+  display: none;
+}
+
+.dndev-pagination-size {
+  display: flex;
+  align-items: center;
+}
+
+.dndev-pagination-size-label {
+  display: none;
+}
+
+.dndev-pagination-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--gap-sm);
-  flex-wrap: wrap;
+  width: 100%;
 }
 
 .dndev-pagination-list {
@@ -5019,57 +5128,36 @@ em {
   margin: 0;
 }
 
-.dndev-pagination-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .dndev-pagination-button {
-  min-width: var(--touch-target);
+  width: var(--touch-target);
   height: var(--touch-target);
-  display: flex;
+  padding: 0;
+  flex-shrink: 0;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--gap-sm);
-  border-radius: var(--radius-interactive);
-  font-weight: 500;
-  transition: var(--transition-fast);
-  cursor: pointer;
-  border: var(--border-hairline) solid var(--line-2);
-  background: transparent;
-  color: var(--foreground);
-  padding: var(--gap-sm) var(--gap-md);
 }
 
-.dndev-pagination-button:hover:not(:disabled) {
-    background: var(--accent);
-    color: var(--accent-foreground);
-  }
+/* Desktop: Show all elements in one row */
 
-.dndev-pagination-button:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
+@media (min-width: 768px) {
+  .dndev-pagination-info,
+  .dndev-pagination-size {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
   }
 
-.dndev-pagination-button:disabled {
-    opacity: var(--opacity-muted);
-    cursor: not-allowed;
+  .dndev-pagination-size-label {
+    margin-right: var(--gap-sm);
   }
 
-.dndev-pagination-button[aria-current='page'] {
-    background: var(--primary);
-    color: var(--primary-foreground);
-    border-color: var(--primary);
+  .dndev-pagination-nav {
+    justify-content: flex-end;
+    width: auto;
+    margin-left: auto;
+    /* Push to right */
   }
-
-.dndev-pagination-ellipsis {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--touch-target);
-  height: var(--touch-target);
-  color: var(--muted-foreground);
 }
 
 /* packages/components/src/atomic/Popover/Popover.css */
@@ -5642,50 +5730,214 @@ em {
   display: flex;
   flex-direction: column;
   z-index: var(--z-modal);
-  border-radius: var(--radius-floating); /* Square like floating panels */
+  background: var(--card);
+  /* Ensure background is opaque */
+  color: var(--card-foreground);
+  box-shadow: var(--shadow-xl);
+  /* Focus Tunnel: Deep elevation */
+  overflow: hidden;
+  /* Scroll Trap: Container clips overflow */
+
+  /* Motion Physics: Base state */
+  will-change: transform, opacity;
 
-  /* Sheet positioning by side */
+  /* Open state animation - "Heavy" ease for premium feel */
 }
 
+.dndev-sheet-content[data-state='open'] {
+    animation: sheet-slide-in var(--dur-heavy) var(--ease-heavy);
+  }
+
+/* Closed state animation */
+
+.dndev-sheet-content[data-state='closed'] {
+    animation: sheet-slide-out var(--dur-normal) var(--ease-in-out);
+  }
+
+/* Sheet positioning by side - SPATIAL METAPHOR */
+
+/* RIGHT / LEFT (Desktop Panels) */
+
 .dndev-sheet-content[data-side='right'],.dndev-sheet-content[data-side='left'] {
     top: 0;
     bottom: 0;
     width: 80%;
     max-width: 56rem;
+    /* Standard panel width */
+    height: 100%;
+    /* Full height */
+    border-radius: 0;
+    /* Square edges for panel metaphor */
   }
 
 .dndev-sheet-content[data-side='right'] {
+    /* Physical positioning: right edge */
     right: 0;
+    left: auto;
+    /* Border on logical start (left in LTR, right in RTL) */
+    border-inline-start: var(--border-hairline) solid var(--line-1);
   }
 
 .dndev-sheet-content[data-side='left'] {
+    /* Physical positioning: left edge */
     left: 0;
+    right: auto;
+    /* Border on logical end (right in LTR, left in RTL) */
+    border-inline-end: var(--border-hairline) solid var(--line-1);
   }
 
+/* TOP / BOTTOM (Mobile Cards) */
+
 .dndev-sheet-content[data-side='top'],.dndev-sheet-content[data-side='bottom'] {
     left: 0;
     right: 0;
-    height: 80%;
-    max-height: 56rem;
-    overflow: hidden;
+    /* Card metaphor: Detached from opposite edge */
+    height: auto;
+    max-height: 92dvh;
+    /* Never touch top edge */
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    /* On larger screens, constrain width */
+  }
+
+@media (width >=768px) {
+
+.dndev-sheet-content[data-side='top'],.dndev-sheet-content[data-side='bottom'] {
+      max-width: 56rem;
+      width: 90%;
+      border-radius: var(--radius-lg);
+      /* Fully rounded card on desktop */
   }
+    }
 
 .dndev-sheet-content[data-side='top'] {
     top: 0;
+    border-bottom: var(--border-hairline) solid var(--line-1);
+    /* Rounded bottom corners only */
+    border-bottom-left-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
   }
 
 .dndev-sheet-content[data-side='bottom'] {
     bottom: 0;
+    border-top: var(--border-hairline) solid var(--line-1);
+    /* Rounded top corners only */
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
   }
 
+/* DRAG HANDLE PILL - Visual affordance for draggable sheets */
+
+.dndev-sheet-drag-handle {
+  width: 2.5rem;
+  height: 0.25rem;
+  background: var(--line-2);
+  border-radius: var(--radius-full);
+  margin: var(--gap-sm) auto 0;
+  flex-shrink: 0;
+  cursor: grab;
+  transition: background-color var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-sheet-drag-handle:active {
+    cursor: grabbing;
+  }
+
+/* Positioning for bottom sheets */
+
+.dndev-sheet-content[data-side='bottom'] > .dndev-sheet-drag-handle {
+  margin-top: var(--gap-sm);
+  margin-bottom: 0;
+}
+
+/* Positioning for top sheets */
+
+.dndev-sheet-content[data-side='top'] > .dndev-sheet-drag-handle {
+  margin-top: max(var(--gap-sm), env(safe-area-inset-top));
+  margin-bottom: 0;
+}
+
+/* HEADER - Pinned, No Padding (Tight Layout) */
+
+/* Industry standard: Title always on start, X always on end (consistent across all sides) */
+
 .dndev-sheet-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-md);
   flex-shrink: 0;
+  /* Never shrink */
   min-height: var(--touch-target);
-  margin-bottom: var(--gap-md);
+  /* No padding - tight layout: [ Title               X ] */
+  padding-block: 0;
+  /* RTL-aware: padding on logical start only */
+  padding-inline-start: var(--gap-md);
+  padding-inline-end: 0; /* X button has its own spacing */
+  border-bottom: var(--border-hairline) solid var(--line-1);
+  /* Separator */
+
+  /* Thumb Ergonomics: Top Safe Area (only for top sheets) */
+}
+
+.dndev-sheet-content[data-side='top'] .dndev-sheet-header {
+    padding-top: max(0, env(safe-area-inset-top));
+  }
+
+/* Adjust header padding when drag handle is present (sibling selector) */
+
+.dndev-sheet-content[data-side='bottom']
+  .dndev-sheet-drag-handle
+  ~ .dndev-sheet-header,
+.dndev-sheet-content[data-side='top']
+  .dndev-sheet-drag-handle
+  ~ .dndev-sheet-header {
+  padding-top: 0;
+}
+
+/* BODY - Scrollable */
+
+.dndev-sheet-body {
+  flex: 1;
+  /* Consumes available space */
+  overflow-y: auto;
+  /* Independent scroll */
+  overflow-x: hidden;
+  padding: var(--gap-md);
+  overscroll-behavior: contain;
+  /* Prevent body scroll chaining */
+}
+
+/* FOOTER - Pinned */
+
+.dndev-sheet-footer {
+  flex-shrink: 0;
+  /* Never shrink */
+  padding: var(--gap-md);
+  border-top: var(--border-hairline) solid var(--line-1);
+  /* Separator */
+  display: flex;
+  flex-direction: column-reverse;
+  /* Mobile-first stacking */
+  gap: var(--gap-sm);
+
+  /* Desktop: Row layout */
+}
+
+@media (width >=640px) {
+
+.dndev-sheet-footer {
+    flex-direction: row;
+    justify-content: flex-end;
+}
+  }
+
+.dndev-sheet-footer {
+
+  /* Thumb Ergonomics: Bottom Safe Area (Home Indicator) */
+  padding-bottom: max(var(--gap-md), env(safe-area-inset-bottom));
 }
 
 .dndev-sheet-title {
@@ -5695,9 +5947,12 @@ em {
 }
 
 .dndev-sheet-close {
-  position: absolute;
-  top: var(--gap-md);
-  inset-inline-end: var(--gap-md);
+  /* Position relative - flex handles alignment */
+  position: relative;
+  margin-inline-start: auto;
+  /* Push to end (RTL-aware: end = right in LTR, left in RTL) */
+  margin-inline-end: var(--gap-sm);
+  /* Spacing from edge - use margin not padding to keep icon centered */
   opacity: var(--opacity-muted);
 }
 
@@ -5705,9 +5960,56 @@ em {
     opacity: 1;
   }
 
-.dndev-sheet-footer {
-  flex-shrink: 0;
-  margin-top: var(--gap-md);
+/* ===========================
+   ANIMATIONS (Motion Physics)
+   =========================== */
+
+/* Slide In/Out Keyframes - Context Aware */
+
+@keyframes sheet-slide-in {
+  from {
+    opacity: 0;
+    transform: var(--slide-enter-transform);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes sheet-slide-out {
+  from {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: var(--slide-exit-transform);
+  }
+}
+
+/* Define Transforms based on Side */
+
+.dndev-sheet-content[data-side='right'] {
+  --slide-enter-transform: translateX(100%);
+  --slide-exit-transform: translateX(100%);
+}
+
+.dndev-sheet-content[data-side='left'] {
+  --slide-enter-transform: translateX(-100%);
+  --slide-exit-transform: translateX(-100%);
+}
+
+.dndev-sheet-content[data-side='bottom'] {
+  --slide-enter-transform: translateY(100%);
+  --slide-exit-transform: translateY(100%);
+}
+
+.dndev-sheet-content[data-side='top'] {
+  --slide-enter-transform: translateY(-100%);
+  --slide-exit-transform: translateY(-100%);
 }
 
 /* packages/components/src/atomic/Skeleton/Skeleton.css */
@@ -6380,7 +6682,8 @@ em {
 
 .dndev-switch-label {
   font-size: var(--font-size-sm);
-  transition: color var(--dur-normal) var(--ease-in-out),
+  transition:
+    color var(--dur-normal) var(--ease-in-out),
     font-weight var(--dur-normal) var(--ease-in-out);
   white-space: nowrap;
 }
@@ -6389,16 +6692,14 @@ em {
 
 .dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
   .dndev-switch-label-unchecked,
-.dndev-switch-with-labels[data-checked='false']
-  .dndev-switch-label-unchecked {
+.dndev-switch-with-labels[data-checked='false'] .dndev-switch-label-unchecked {
   color: var(--foreground);
   font-weight: var(--font-weight-medium);
 }
 
 .dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
   .dndev-switch-label-unchecked,
-.dndev-switch-with-labels[data-checked='true']
-  .dndev-switch-label-unchecked {
+.dndev-switch-with-labels[data-checked='true'] .dndev-switch-label-unchecked {
   color: var(--muted-foreground);
   font-weight: var(--font-weight-normal);
 }
@@ -6407,16 +6708,14 @@ em {
 
 .dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
   .dndev-switch-label-checked,
-.dndev-switch-with-labels[data-checked='true']
-  .dndev-switch-label-checked {
+.dndev-switch-with-labels[data-checked='true'] .dndev-switch-label-checked {
   color: var(--foreground);
   font-weight: var(--font-weight-medium);
 }
 
 .dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
   .dndev-switch-label-checked,
-.dndev-switch-with-labels[data-checked='false']
-  .dndev-switch-label-checked {
+.dndev-switch-with-labels[data-checked='false'] .dndev-switch-label-checked {
   color: var(--muted-foreground);
   font-weight: var(--font-weight-normal);
 }
@@ -6439,7 +6738,21 @@ em {
 }
 
 .dndev-table-header {
-  /* Base header styles */
+  background-color: var(--accent);
+}
+
+/* Filter row above header */
+
+.dndev-table-filter-row {
+  border: 1px solid var(--border);
+  border-bottom: none;
+}
+
+.dndev-table-filter-row .dndev-table-head {
+  background-color: var(--muted);
+  padding: var(--gap-xs);
+  height: auto;
+  min-height: auto;
 }
 
 .dndev-table-body {
@@ -6457,6 +6770,12 @@ em {
     background-color: color-mix(in oklab, var(--accent) 15%, transparent);
   }
 
+/* Cursor pointer for clickable rows */
+
+.dndev-table-row.dndev-cursor-pointer {
+  cursor: pointer;
+}
+
 /* Zebra striping for data tables */
 
 .dndev-table-body .dndev-table-row:nth-child(even) {
@@ -6495,22 +6814,34 @@ em {
   padding-block: var(--gap-sm);
 }
 
-.dndev-table-head[data-sortable='true'] {
+/* Header cells use accent foreground for contrast */
+
+.dndev-table-header .dndev-table-head {
+  color: var(--accent-foreground);
+}
+
+[data-sortable='true']:is(.dndev-table-header .dndev-table-head) {
     cursor: pointer;
   }
 
-.dndev-table-head[data-align='center'] {
+[data-align='center']:is(.dndev-table-header .dndev-table-head) {
     text-align: center;
   }
 
-.dndev-table-head[data-align='end'] {
+[data-align='end']:is(.dndev-table-header .dndev-table-head) {
     text-align: end;
   }
 
-.dndev-table-head[data-align='start'] {
+[data-align='start']:is(.dndev-table-header .dndev-table-head) {
     text-align: start;
   }
 
+/* Active filter indicator */
+
+.dndev-table-filter-active {
+  color: var(--primary);
+}
+
 /* Table cell (td) styles */
 
 .dndev-table-cell {
@@ -6518,6 +6849,7 @@ em {
   padding-inline: var(--gap-md);
   padding-block: var(--gap-sm);
   min-height: var(--touch-target);
+  line-height: 1.5; /* Ensure consistent line height for empty cells */
 }
 
 .dndev-table-cell[data-align='center'] {
@@ -6551,8 +6883,8 @@ em {
 /* Input components inside grid cells should be borderless and fit snugly */
 
 .dndev-table-grid .dndev-table-cell .dndev-input,
-.dndev-table-grid .dndev-table-cell input[type="text"],
-.dndev-table-grid .dndev-table-cell input[type="number"] {
+.dndev-table-grid .dndev-table-cell input[type='text'],
+.dndev-table-grid .dndev-table-cell input[type='number'] {
   border: none;
   background: transparent;
   width: 100%;
@@ -6596,6 +6928,64 @@ em {
   padding-inline-start: calc(var(--gap-md) + var(--icon-md) + var(--gap-sm));
 }
 
+/* Skeleton rows - apply standard skeleton pulse animation to entire rows */
+
+/* Keep existing background colors (zebra striping) - just add opacity pulse */
+
+.dndev-table-body .dndev-table-row.dndev-skeleton-row {
+  animation: dndev-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  pointer-events: none;
+
+  /* Keep hover state but disabled (pointer-events: none prevents hover) */
+}
+
+:is(.dndev-table-body .dndev-table-row.dndev-skeleton-row):hover {
+    /* Inherit from parent .dndev-table-row hover styles */
+  }
+
+/* Even rows keep their var(--muted) background, just pulse */
+
+.dndev-table-body .dndev-table-row.dndev-skeleton-row:nth-child(even) {
+  animation: dndev-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+:is(.dndev-table-body .dndev-table-row.dndev-skeleton-row:nth-child(even)):hover {
+    /* Inherit from parent .dndev-table-row:nth-child(even) hover styles */
+  }
+
+/* Skeleton bars inside cells - adapt to row background for visibility */
+
+/* Odd rows (transparent background): use default var(--muted) skeleton */
+
+/* Even rows (var(--muted) background): use lighter skeleton for contrast */
+
+.dndev-table-body .dndev-table-row.dndev-skeleton-row .dndev-skeleton {
+  background-color: var(--muted);
+}
+
+.dndev-table-body
+  .dndev-table-row.dndev-skeleton-row:nth-child(even)
+  .dndev-skeleton {
+  /* Even rows have var(--muted) background, so skeleton should be lighter for contrast */
+  background-color: color-mix(
+    in oklab,
+    var(--muted) 60%,
+    var(--foreground) 40%
+  );
+}
+
+/* Use the same pulse animation as standard skeleton (from Skeleton.css) */
+
+@keyframes dndev-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: var(--opacity-muted);
+  }
+}
+
 /* packages/components/src/atomic/Tabs/Tabs.css */
 
 /* Tabs list: use flexbox for natural wrapping, not grid */
@@ -8155,6 +8545,10 @@ h4[data-variant='code'] {
   pointer-events: auto;
 }
 
+.dndev-cursor-pointer {
+  cursor: pointer;
+}
+
 .dndev-aspect-video {
   aspect-ratio: 16 / 9;
 }
@@ -8531,6 +8925,7 @@ h4[data-variant='code'] {
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
@@ -8540,6 +8935,7 @@ h4[data-variant='code'] {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -8552,6 +8948,7 @@ h4[data-variant='code'] {
     opacity: 1;
     transform: translateX(0);
   }
+
   to {
     opacity: 0;
     transform: translateX(-100%);
@@ -8563,6 +8960,7 @@ h4[data-variant='code'] {
     opacity: 0;
     transform: translateX(100%);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -8637,7 +9035,7 @@ main[role='main'][data-routing-animation='none'] {
 
 /* Tablet (768px - 1023px) */
 
-@media (width >= 768px) and (width <= 1023px) {
+@media (width >=768px) and (width <=1023px) {
   main[role='main'][data-routing-animation='fade'] {
     animation: routeFadeIn
       var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
@@ -8653,7 +9051,7 @@ main[role='main'][data-routing-animation='none'] {
 
 /* Desktop (1024px - 1439px) */
 
-@media (width >= 1024px) and (width <= 1439px) {
+@media (width >=1024px) and (width <=1439px) {
   main[role='main'][data-routing-animation='fade'] {
     animation: routeFadeIn
       var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
@@ -8669,7 +9067,7 @@ main[role='main'][data-routing-animation='none'] {
 
 /* Wide (>= 1440px) */
 
-@media (width >= 1440px) {
+@media (width >=1440px) {
   main[role='main'][data-routing-animation='fade'] {
     animation: routeFadeIn
       var(--routing-wide-duration, var(--routing-default-duration, 300ms))
@@ -8702,7 +9100,7 @@ main[role='main'][data-routing-animation='none'] {
 
 /* Mobile/Tablet: Hide sidebars - WCAG & Lighthouse best practices */
 
-@media (width <= 1023px) {
+@media (width <=1023px) {
   .dndev-layout aside[role='navigation'].sidebar,
   aside[role='navigation'].sidebar {
     display: none !important;
@@ -8721,10 +9119,7 @@ main[role='main'][data-routing-animation='none'] {
   max-height: 100dvh;
   overflow: hidden;
   display: grid;
-  /* ONE DRY grid structure: 3 rows, 2 columns */
-  /* Footer starts at sidebar edge (column 2) - when sidebar-width is 0px, footer starts at left edge */
-  /* Footer grows with content wrapping. For pixel-perfect calc() accuracy when footer wraps,
-     implement ResizeObserver to update --footer-height dynamically. */
+  /* Grid structure: 3 rows, 2 columns */
   grid-template-areas:
     'header header'
     'sidebar main'
@@ -8735,16 +9130,58 @@ main[role='main'][data-routing-animation='none'] {
     );
   grid-template-columns: var(--sidebar-width) 1fr;
 
-  /* Game layout: Grid rows adjust based on breakpoint (footer hidden on tablet/mobile) */
+  /* Mobile: Grid scrolls instead of main - footer scrolls with content */
 }
 
-[data-layout='game']:root .dndev-layout {
-    grid-template-rows: var(--header-height) 1fr minmax(
-        var(--footer-height),
-        auto
-      );
+@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 (opt-in for desktop) */
+
+.dndev-layout[data-footer-mode='scroll'] {
+  overflow-y: auto;
+  overflow-x: hidden;
+  grid-template-rows: var(--header-height) min-content auto;
+}
+
+.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'] footer[role='contentinfo'] {
+  height: auto;
+}
+
+:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
+    height: auto;
+    min-height: var(--footer-height);
+  }
+
+/* Presets with no footer at all */
+
+[data-layout='moolti'] footer[role='contentinfo'],
+[data-layout='plain'] footer[role='contentinfo'] {
+  display: none;
+}
+
 /* ===========================
    LAYOUT ZONE POSITIONING RULES
    Follows logical flow: Header → Sidebar → Main → Footer
@@ -8758,6 +9195,8 @@ header[role='banner'] {
   grid-area: header;
   box-sizing: border-box;
   height: var(--header-height);
+  min-height: var(--header-height);
+  max-height: var(--header-height);
   position: relative;
   z-index: var(--z-header);
   contain: layout style;
@@ -8777,14 +9216,26 @@ header[role='banner'] {
   /* Theme-aware styling - 100% controlled by theme system */
   background: var(--background);
   border-bottom: var(--border-hairline) solid var(--border);
+
+  /* Mobile: Sticky header (for presets that keep header visible) */
 }
 
+@media (width <=1023px) {
+
+header[role='banner'] {
+    position: sticky;
+    top: 0;
+}
+  }
+
 .header-start {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   height: 100%;
+  max-height: 100%;
   gap: var(--gap-sm);
+  overflow: hidden;
 }
 
 .header-end {
@@ -8792,8 +9243,11 @@ header[role='banner'] {
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
+  height: 100%;
+  max-height: 100%;
   margin-inline-start: auto;
   gap: var(--gap-sm);
+  overflow: hidden;
 }
 
 /* Viewport-centered center content - absolutely positioned overlay */
@@ -8827,19 +9281,20 @@ header[role='banner'] .header-center {
 aside[role='navigation'].sidebar {
   grid-area: sidebar;
   box-sizing: border-box;
-  min-width: calc(
-    var(--sidebar-resize-handle-width) + 48px
-  ); /* Min: 48px content + 6px handle = 54px */
-  max-width: calc(
-    var(--sidebar-resize-handle-width) + 400px
-  ); /* Max: 400px content + 6px handle = 406px */
+  min-width: calc(var(--sidebar-resize-handle-width) + 48px);
+  /* Min: 48px content + 6px handle = 54px */
+  max-width: calc(var(--sidebar-resize-handle-width) + 400px);
+  /* Max: 400px content + 6px handle = 406px */
   z-index: var(--z-sidebar);
-  overflow: none; /* No clipping needed - handle is in grid */
+  overflow: none;
+  /* No clipping needed - handle is in grid */
   contain: layout style;
   padding: 0;
   display: grid;
-  grid-template-columns: auto var(--sidebar-resize-handle-width); /* Content | Handle - column 1 width set inline */
-  grid-template-rows: auto 1fr auto; /* Top | Content | Bottom */
+  grid-template-columns: auto var(--sidebar-resize-handle-width);
+  /* Content | Handle - column 1 width set inline */
+  grid-template-rows: auto 1fr auto;
+  /* Top | Content | Bottom */
   height: 100%;
 
   /* Theme-aware styling - 100% controlled by theme system */
@@ -8894,7 +9349,8 @@ aside[role='navigation'].sidebar[data-dragging='true']
 
 @media (hover: none) {
   aside[role='navigation'].sidebar .dndev-sidebar-resize-handle {
-    width: calc(var(--sidebar-resize-handle-width) * 2); /* 12px for touch */
+    width: calc(var(--sidebar-resize-handle-width) * 2);
+    /* 12px for touch */
   }
 }
 
@@ -8963,7 +9419,8 @@ aside[role='navigation'].sidebar[data-dragging='true']
 .sidebar-content .dndev-interactive[data-role='menu-item'],.sidebar-content .dndev-interactive[data-role='nav-trigger'] {
     height: var(--touch-target);
     min-height: var(--touch-target);
-    padding-block: 0; /* No vertical padding - buttons fill exact 48px */
+    padding-block: 0;
+    /* No vertical padding - buttons fill exact 48px */
   }
 
 /* Other interactive elements (not menu items) - consistent padding */
@@ -9003,7 +9460,8 @@ aside.sidebar[role='navigation'] .sidebar-top,aside.sidebar[role='navigation'] .
   }
 
 aside.sidebar[role='navigation'] .sidebar-content {
-    overflow-x: hidden; /* Prevent horizontal scroll, allow vertical */
+    overflow-x: hidden;
+    /* Prevent horizontal scroll, allow vertical */
   }
 
 aside.sidebar[role='navigation'] .dndev-interactive {
@@ -9068,12 +9526,9 @@ aside.sidebar[role='navigation'][data-collapsed='true'] .app-branding {
 main[role='main'] {
   grid-area: main;
   overflow-y: auto;
-  /* Default: allow scrolling */
   overflow-x: hidden;
-  /* Prevent horizontal scroll from breakthrough components */
   display: flex;
   flex-direction: column;
-  /* No automatic padding; spacing handled by gaps */
   padding: 0;
   contain: layout style;
 
@@ -9082,12 +9537,17 @@ main[role='main'] {
 
 main[role='main'] > *:not(.breadcrumbs-container):first-of-type,main[role='main'] > .breadcrumbs-container + * {
     flex: 1 1 auto;
-    /* Page content grows */
   }
 
-main[role='main'] > *:last-child {
-    flex-shrink: 0;
-    /* Footer stays at bottom */
+/* 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 */
@@ -9122,31 +9582,25 @@ footer[role='contentinfo'] > * {
     padding-inline-end: var(--content-padding);
   }
 
-/* Game: Hide footer on tablet/mobile - merged into GameMergedBar */
+/* Mobile: Allow footer to grow when content wraps */
 
-@media (width <= 1023px) {
-    [data-layout='game']:root footer[role='contentinfo'] {
-      display: none;
-    }
-  }
+@media (width <=1023px) {
 
-/* Moolti: No footer (built into sidebar) */
-
-[data-layout='moolti']:root footer[role='contentinfo'] {
-    display: none;
-  }
-
-/* Plain: No footer (full-screen apps) */
+footer[role='contentinfo'] {
+    height: auto;
+}
 
-[data-layout='plain']:root footer[role='contentinfo'] {
-    display: none;
+    footer[role='contentinfo'] > * {
+      height: auto;
+      min-height: var(--footer-height);
+    }
   }
 
 /* Footer text styles */
 
 footer[role='contentinfo'] .footer-copyright {
   color: var(--muted-foreground);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
 }
 
 footer[role='contentinfo'] a:not(.dndev-interactive) {
@@ -9186,7 +9640,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 .merged-bar[data-position='top'] {
   top: 0;
-  height: 64px;
+  height: var(--header-height);
   border-bottom: 2px solid var(--border);
   padding-top: env(safe-area-inset-top);
 }
@@ -9214,9 +9668,9 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   min-height: 0;
 }
 
-/* Mobile (<1024px): Show merged-bar, hide zones, add padding */
+/* Mobile (<1024px): Show merged-bar, hide zones */
 
-@media (width <= 1023px) {
+@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'],
@@ -9229,7 +9683,8 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   [data-layout='moolti'] .dndev-layout,
   [data-layout='game'] .dndev-layout,
   [data-layout='docs'] .dndev-layout {
-    padding-top: calc(64px + env(safe-area-inset-top));
+    /* Remove padding-top - grid already accounts for header-height, mergedBar is fixed and doesn't affect grid flow */
+    /* Content won't go under mergedBar because grid positions main after header row */
   }
 
   [data-layout='admin'] header[role='banner'],
@@ -9255,7 +9710,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* Desktop (>=1024px): Always hide merged-bar */
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
   .merged-bar {
     display: none !important;
   }
@@ -9279,7 +9734,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   /* Admin: Mobile/Tablet (<1024px) - only overrides */
 }
 
-@media (width <= 1023px) {
+@media (width <=1023px) {
 
 [data-layout='admin'] {
     --sidebar-width: 0px;
@@ -9310,7 +9765,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* Moolti: Mobile/Tablet (<1024px) - only overrides */
 
-@media (width <= 1023px) {
+@media (width <=1023px) {
 
 [data-layout='moolti'] {
     --header-height: 62px;
@@ -9337,7 +9792,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* Docs: Mobile/Tablet (<1024px) - only overrides */
 
-@media (width <= 1023px) {
+@media (width <=1023px) {
 
 [data-layout='docs'] {
     --sidebar-width: 0px;
@@ -9363,7 +9818,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   /* Blog: Mobile/Tablet (<1024px) - only overrides */
 }
 
-@media (width <= 1023px) {
+@media (width <=1023px) {
 
 [data-layout='blog'] {
     --header-height: 0px;
@@ -9413,7 +9868,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   /* Game: Mobile/Tablet (<1024px) - only overrides */
 }
 
-@media (width <= 1023px) {
+@media (width <=1023px) {
 
 [data-layout='game'] {
     --footer-height: 0px;
@@ -9534,7 +9989,14 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
     padding-top: var(--gap-lg);
   }
 
+/* First Section child gets gap-md spacing from top */
+
+.dndev-container  > .dndev-section-full-width:first-child {
+    margin-top: var(--gap-md);
+  }
+
 .dndev-container {
+
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -9569,7 +10031,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
     --max-content-width: 100%;
   }
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
 
 .dndev-container[data-variant='standard'] {
       --max-content-width: 87.5rem;
@@ -9584,7 +10046,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
     --max-content-width: 100%;
   }
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
 
 .dndev-container[data-variant='docs'] {
       --max-content-width: 56.25rem;