@donotdev/ui 0.0.13 → 0.0.15

package/dist/styles/index.css

@@ -121,6 +121,15 @@
   --popover: var(--card);
   --popover-foreground: var(--card-foreground);
 
+  /*
+   * Root card snapshot — computed once on :root from --card/--card-foreground,
+   * then inherited unchanged. Variant blocks (e.g. primary) override --card but
+   * never touch these, so data-variant='default' can reset --card back to the
+   * root value even when nested inside another variant.
+   */
+  --card-base: var(--card);
+  --card-foreground-base: var(--card-foreground);
+
   /* ===========================
      BORDER RADIUS - 3 VALUES ONLY
      =========================== */
@@ -216,6 +225,16 @@
     -6px 12px 24px -6px var(--shadow-color),
     -3px 6px 12px -3px var(--shadow-color-light);
 
+  /* Root shadow snapshots — same principle as --card-base (see above) */
+  --shadow-md-base: var(--shadow-md);
+  --shadow-xl-base: var(--shadow-xl);
+
+  /* Per-variant shadows — essences override these with different colors/shapes */
+  --shadow-primary: var(--shadow-md);
+  --shadow-primary-xl: var(--shadow-xl);
+  --shadow-secondary: var(--shadow-md);
+  --shadow-secondary-xl: var(--shadow-xl);
+
   /* Interactive shadows */
   --shadow-interactive: 0 0 0 3px
     color-mix(in oklab, var(--ring) 20%, transparent);
@@ -519,7 +538,6 @@ body {
 /* Reset and base styles */
 
 :root {
-  font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -533,9 +551,10 @@ body {
   box-sizing: border-box;
 }
 
-/* Set core body defaults */
+/* Set core body defaults — font-family here so theme tokens on :root cascade cleanly */
 
 body {
+  font-family: var(--font-family, var(--font-sans));
   min-height: 100dvh;
   line-height: var(--line-height);
   text-rendering: optimizeSpeed;
@@ -610,17 +629,21 @@ h6 {
   color: var(--foreground);
   background: transparent;
   text-wrap: balance; /* Equalize line lengths, prevent orphans */
+  text-transform: var(--text-transform-heading, none);
+  letter-spacing: var(--letter-spacing-heading, normal);
 }
 
-h1 {
+:is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-headline);
+}
+
+h1 {
   font-size: var(--font-size-3xl);
   font-weight: var(--font-weight-bold);
   letter-spacing: -0.02em;
 }
 
 h2 {
-  font-family: var(--font-headline);
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   letter-spacing: -0.01em;
@@ -1051,10 +1074,20 @@ em {
    * - accent: Highlighted/active state (--accent colors, sets context for children)
    * - destructive: Error/danger state (--destructive colors)
    * 
-   * Variants only override --card and --card-foreground.
+   * Variants override --card and --card-foreground.
+   * Primary/secondary also override --shadow-md/--shadow-xl for per-variant shadows.
+   * Default resets --card from --card-base (root snapshot) so nested default cards
+   * inside other variants get the root card color, not the parent's.
    * Surface glow gradient is computed from --theme-is-dark flag and not affected by variants.
    */
 
+.dndev-surface[data-variant='default'] {
+    --card: var(--card-base);
+    --card-foreground: var(--card-foreground-base);
+    --shadow-md: var(--shadow-md-base);
+    --shadow-xl: var(--shadow-xl-base);
+  }
+
 .dndev-surface[data-variant='muted'] {
     --card: var(--muted);
     --card-foreground: var(--muted-foreground);
@@ -1064,12 +1097,16 @@ em {
 .dndev-surface[data-variant='primary'] {
     --card: var(--primary);
     --card-foreground: var(--primary-foreground);
+    --shadow-md: var(--shadow-primary);
+    --shadow-xl: var(--shadow-primary-xl);
     border-color: var(--primary);
   }
 
 .dndev-surface[data-variant='secondary'] {
     --card: var(--secondary);
     --card-foreground: var(--secondary-foreground);
+    --shadow-md: var(--shadow-secondary);
+    --shadow-xl: var(--shadow-secondary-xl);
     border-color: var(--secondary);
   }
 
@@ -1351,6 +1388,7 @@ em {
   border-radius: var(--radius-interactive);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
+  text-transform: var(--text-transform-button, none);
   transition: var(--transition-fast);
   cursor: pointer;
   border: var(--border-hairline) solid transparent;
@@ -1641,6 +1679,7 @@ em {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-transform: var(--text-transform-label, none);
 }
 
 /* Compact mode - always hide label */
@@ -1706,7 +1745,8 @@ em {
 
 .dndev-control[data-state='checked'],.dndev-control[data-state='on'],.dndev-control[data-pressed='true'] {
     background-color: var(--control-border);
-    color: var(--background);
+    /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+    color: var(--card);
   }
 
 /* CONTROL GROUP - Shared pattern for grouped controls (RadioGroup, Checkbox groups) */
@@ -2012,7 +2052,7 @@ em {
   height: var(--icon-md);
   border: 2px solid currentColor;
   border-radius: var(--radius-full);
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
   animation: spin 1s linear infinite;
 }
 
@@ -2352,7 +2392,6 @@ em {
   flex-shrink: 0;
   overflow: hidden;
   border-radius: var(--radius-full);
-  border: 1px solid var(--border);
 }
 
 .dndev-avatar-image {
@@ -2809,8 +2848,7 @@ em {
 .dndev-calendar-nav {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   height: var(--touch-target);
   pointer-events: none;
   z-index: 1;
@@ -2840,13 +2878,13 @@ em {
 }
 
 .dndev-calendar-nav-previous {
-  left: 0;
+  inset-inline-start: 0;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 
 .dndev-calendar-nav-next {
-  right: 0;
+  inset-inline-end: 0;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
@@ -3092,13 +3130,10 @@ em {
   background: var(--muted);
 }
 
-.dndev-cta[data-tone='elevated'] {
-  background: var(--background);
-}
-
 .dndev-cta[data-tone='contrast'] {
   background: var(--foreground);
-  color: var(--background);
+  /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+  color: var(--card);
 }
 
 .dndev-cta[data-tone='accent'] {
@@ -3153,7 +3188,8 @@ em {
 
 .dndev-cta-actions .dndev-interactive[data-variant='primary'] {
     background: var(--foreground);
-    color: var(--background);
+    /* --card not --background: inverted text must be opaque */
+    color: var(--card);
     border-color: var(--foreground);
   }
 
@@ -3171,7 +3207,8 @@ em {
 
 :is(.dndev-cta-actions .dndev-interactive[data-variant='outline']):hover {
       background: var(--foreground);
-      color: var(--background);
+      /* --card not --background: inverted text must be opaque */
+      color: var(--card);
       border-color: var(--foreground);
     }
 
@@ -3386,7 +3423,7 @@ em {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  text-align: left;
+  text-align: start;
 }
 
 .dndev-combobox-trigger button {
@@ -3543,6 +3580,10 @@ em {
   flex-shrink: 0;
 }
 
+.dndev-combobox-create-btn:hover {
+  opacity: 0.8;
+}
+
 .dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon svg,
 .dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon > * {
   transform: rotate(180deg);
@@ -3728,8 +3769,9 @@ em {
 }
 
 .dndev-code-line-number {
-  line-height: inherit;
-  /* Inherit from parent */
+  line-height: 1.5;
+  min-height: 1.5em;
+  font-size: inherit;
 }
 
 .dndev-code-code {
@@ -3749,7 +3791,21 @@ em {
 .dndev-code-code code {
   line-height: inherit;
   font-size: inherit;
-  /* Match parent font-size */
+}
+
+/* Shiki wraps each line in <span class="line"> — force consistent sizing */
+
+.dndev-code-code .line {
+  display: block;
+  line-height: 1.5;
+  font-size: inherit;
+  min-height: 1.5em;
+}
+
+/* Empty Shiki lines still need height to stay in sync with line numbers */
+
+.dndev-code-code .line:empty::after {
+  content: '\00a0';
 }
 
 /* packages/components/src/atomic/Command/Command.css */
@@ -3913,7 +3969,7 @@ em {
     order: 3;
     font-size: var(--font-size-xs);
     color: var(--muted-foreground);
-    padding-left: calc(var(--icon-md) + var(--gap-sm));
+    padding-inline-start: calc(var(--icon-md) + var(--gap-sm));
   }
 
   .dndev-command-favorite-button {
@@ -4199,6 +4255,54 @@ em {
   }
 }
 
+/* Responsive templateColumns via custom properties */
+
+.dndev-grid-component[data-responsive-tpl='true'] {
+  grid-template-columns: var(--grid-tpl-mobile);
+}
+
+@media (min-width: 768px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-laptop);
+  }
+}
+
+@media (min-width: 1440px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-desktop);
+  }
+}
+
+/* Responsive grid areas via custom properties */
+
+.dndev-grid-component[data-responsive-areas='true'] {
+  grid-template-areas: var(--grid-areas-mobile);
+}
+
+@media (min-width: 768px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-laptop);
+  }
+}
+
+@media (min-width: 1440px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-desktop);
+  }
+}
+
 /* Spacing from CSS variables */
 
 .dndev-grid-component[data-gap='none'] {
@@ -4512,7 +4616,8 @@ em {
   height: 44px;
   border: none;
   border-radius: var(--radius-full);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque */
+  background-color: var(--card);
   color: var(--foreground);
   cursor: pointer;
   opacity: 0;
@@ -5079,7 +5184,7 @@ input[type='number'] {
   }
 
 .dndev-nav-menu-content {
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   width: 100%;
 }
@@ -5094,7 +5199,7 @@ input[type='number'] {
 
 .dndev-nav-menu-viewport-wrapper {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 100%;
   display: flex;
   justify-content: center;
@@ -5134,7 +5239,7 @@ input[type='number'] {
   height: var(--gap-sm);
   width: var(--gap-sm);
   transform: rotate(45deg);
-  border-top-left-radius: 2px;
+  border-start-start-radius: 2px;
   background-color: var(--border);
   box-shadow: var(--shadow-md);
 }
@@ -5305,19 +5410,34 @@ input[type='number'] {
   }
 
   .dndev-pagination-size-label {
-    margin-right: var(--gap-sm);
+    margin-inline-end: var(--gap-sm);
   }
 
   .dndev-pagination-nav {
     justify-content: flex-end;
     width: auto;
-    margin-left: auto;
-    /* Push to right */
+    margin-inline-start: auto;
+    /* Push to end */
   }
 }
 
 /* packages/components/src/atomic/Popover/Popover.css */
 
+/* Popover content width constraints and wrapping */
+
+/* Targets Radix UI PopoverContent element */
+
+[data-radix-popover-content],
+.dndev-floating[data-radix-popover-content] {
+  max-width: min(90vw, 400px);
+  width: -moz-max-content;
+  width: max-content;
+  min-width: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
 /* packages/components/src/atomic/Progress/Progress.css */
 
 .dndev-progress {
@@ -5662,9 +5782,10 @@ input[type='number'] {
 /* Content wrapper: constrained + centered + padded */
 
 .dndev-section-content {
-  /* Respects PageContainer's --content-width */
+  /* Respects PageContainer's --content-width (passed through breakthrough root) */
   max-width: var(--content-width);
   margin-inline: auto;
+  min-width: 0; /* Allow shrinking so max-width wins when content would force wider */
   /* Padding with section background - responsive to match PageContainer */
   padding-inline: var(--gap-md);
   padding-top: var(--gap-lg);
@@ -5912,6 +6033,9 @@ input[type='number'] {
 
 /* Sheet positioning by side - SPATIAL METAPHOR */
 
+/* Physical properties intentional: Sheet anchors to viewport edges regardless of text direction.
+     Logical inset-inline would incorrectly swap sides in RTL for left/right sheet variants. */
+
 /* RIGHT / LEFT (Desktop Panels) */
 
 .dndev-sheet-content[data-side='right'],.dndev-sheet-content[data-side='left'] {
@@ -5952,8 +6076,7 @@ input[type='number'] {
     max-height: 92dvh;
     /* Never touch top edge */
     width: 100%;
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
 
     /* On larger screens, constrain width */
   }
@@ -5972,16 +6095,16 @@ input[type='number'] {
     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);
+    border-end-start-radius: var(--radius-lg);
+    border-end-end-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);
+    border-start-start-radius: var(--radius-lg);
+    border-start-end-radius: var(--radius-lg);
   }
 
 /* DRAG HANDLE PILL - Visual affordance for draggable sheets */
@@ -6300,7 +6423,8 @@ input[type='number'] {
   min-width: 1.25rem;
   min-height: 1.25rem;
   border-radius: var(--radius-full);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque (--background can be transparent in some themes) */
+  background-color: var(--card);
   border: 2px solid var(--primary);
   box-shadow: var(--shadow-md);
   transition: all var(--dur-fast) var(--ease-in-out);
@@ -6371,7 +6495,8 @@ input[type='number'] {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   color: var(--foreground);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque */
+  background-color: var(--card);
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius-interactive);
   box-shadow: var(--shadow-sm);
@@ -6395,7 +6520,7 @@ input[type='number'] {
   height: 1em;
   border: 2px solid transparent;
   border-top-color: var(--primary);
-  border-right-color: var(--primary);
+  border-inline-end-color: var(--primary);
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
   display: inline-block;
@@ -6405,42 +6530,42 @@ input[type='number'] {
 
 .dndev-spinner[data-variant='default'] {
   border-top-color: var(--foreground);
-  border-right-color: var(--foreground);
+  border-inline-end-color: var(--foreground);
 }
 
 .dndev-spinner[data-variant='muted'] {
   border-top-color: var(--muted-foreground);
-  border-right-color: var(--muted-foreground);
+  border-inline-end-color: var(--muted-foreground);
 }
 
 .dndev-spinner[data-variant='primary'] {
   border-top-color: var(--primary);
-  border-right-color: var(--primary);
+  border-inline-end-color: var(--primary);
 }
 
 .dndev-spinner[data-variant='secondary'] {
   border-top-color: var(--secondary);
-  border-right-color: var(--secondary);
+  border-inline-end-color: var(--secondary);
 }
 
 .dndev-spinner[data-variant='accent'] {
   border-top-color: var(--accent);
-  border-right-color: var(--accent);
+  border-inline-end-color: var(--accent);
 }
 
 .dndev-spinner[data-variant='success'] {
   border-top-color: var(--success);
-  border-right-color: var(--success);
+  border-inline-end-color: var(--success);
 }
 
 .dndev-spinner[data-variant='warning'] {
   border-top-color: var(--warning);
-  border-right-color: var(--warning);
+  border-inline-end-color: var(--warning);
 }
 
 .dndev-spinner[data-variant='destructive'] {
   border-top-color: var(--destructive);
-  border-right-color: var(--destructive);
+  border-inline-end-color: var(--destructive);
 }
 
 /* Overlay variant - full-page loading */
@@ -6724,6 +6849,8 @@ input[type='number'] {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--gap-md);
+  margin-top: var(--gap-md);
 }
 
 .dndev-stepper-info {
@@ -7163,19 +7290,20 @@ input[type='number'] {
   word-break: break-word;
   border: var(--border-hairline) solid var(--line-2); /* Show clickable area */
 
-  /* Fallback (no variant): inactive = primary, active = foreground/background */
+  /* Fallback (no variant): inactive = primary, active = foreground/card */
   background-color: var(--primary);
   color: var(--primary-foreground);
 }
 
 .dndev-interactive[data-role='tab-trigger'][data-state='active'] {
-    background-color: var(--background);
+    /* --card not --background: active tab surface must be opaque (--background can be transparent in some themes) */
+    background-color: var(--card);
     color: var(--foreground);
     box-shadow: var(--shadow-sm);
     border-color: var(--primary);
   }
 
-/* Default/Primary variant: inactive = primary, active = foreground/background */
+/* Default/Primary variant: inactive = primary, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='default'],.dndev-interactive[data-role='tab-trigger'][data-variant='primary'] {
     background-color: var(--primary);
@@ -7183,13 +7311,14 @@ input[type='number'] {
   }
 
 [data-state='active']:is(.dndev-interactive[data-role='tab-trigger'][data-variant='default'],.dndev-interactive[data-role='tab-trigger'][data-variant='primary']) {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--primary);
     }
 
-/* Secondary variant: inactive = secondary, active = foreground/background */
+/* Secondary variant: inactive = secondary, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='secondary'] {
     background-color: var(--secondary);
@@ -7197,13 +7326,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='secondary'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--secondary);
     }
 
-/* Accent variant: inactive = accent, active = foreground/background */
+/* Accent variant: inactive = accent, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='accent'] {
     background-color: var(--accent);
@@ -7211,7 +7341,8 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='accent'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--accent);
@@ -7231,7 +7362,7 @@ input[type='number'] {
       border-color: var(--primary);
     }
 
-/* Warning variant: inactive = warning, active = foreground/background */
+/* Warning variant: inactive = warning, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='warning'] {
     background-color: var(--warning);
@@ -7239,13 +7370,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='warning'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--warning);
     }
 
-/* Success variant: inactive = success, active = foreground/background */
+/* Success variant: inactive = success, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='success'] {
     background-color: var(--success);
@@ -7253,13 +7385,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='success'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--success);
     }
 
-/* Destructive variant: inactive = destructive, active = foreground/background */
+/* Destructive variant: inactive = destructive, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='destructive'] {
     background-color: var(--destructive);
@@ -7267,7 +7400,8 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='destructive'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--destructive);
@@ -7314,7 +7448,7 @@ input[type='number'] {
     align-items: center;
     justify-content: center;
     padding: 0;
-    margin-left: 2px;
+    margin-inline-start: 2px;
     background: transparent;
     border: none;
     cursor: pointer;
@@ -7477,7 +7611,11 @@ input[type='number'] {
     border-radius: var(--radius-interactive);
   }
 
-/* Level overrides */
+/* Level overrides — headline font for all heading levels */
+
+.dndev-text-base[data-level^='h'] {
+    font-family: var(--font-headline);
+  }
 
 .dndev-text-base[data-level='h1'] {
     font-size: var(--font-size-3xl);
@@ -7827,7 +7965,8 @@ input[type='number'] {
   z-index: var(--z-tooltip);
   /* Inverted colors for high contrast - industry standard (Vercel, GitHub, Stripe) */
   background: var(--foreground);
-  color: var(--background);
+  /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+  color: var(--card);
   box-shadow: var(--shadow-lg); /* Stronger shadow for visibility */
   padding: 0.375rem 0.5rem; /* 6px 8px - industry standard */
   font-size: var(--font-size-xs); /* 12px */
@@ -8467,6 +8606,12 @@ input[type='number'] {
 
 /* Tone backgrounds - apply directly to section element (like CallToAction) */
 
+/* Ghost (default) - transparent, allows background images to show through */
+
+.dndev-section-full-width[data-tone='ghost'],.dndev-section-full-width:not([data-tone]) {
+    background: transparent;
+  }
+
 .dndev-section-full-width[data-tone='base'] {
     background: var(--background);
   }
@@ -8475,16 +8620,37 @@ input[type='number'] {
     background: var(--muted);
   }
 
-.dndev-section-full-width[data-tone='elevated'] {
+.dndev-section-full-width[data-tone='contrast'] {
     background: var(--background);
+    color: var(--foreground);
   }
 
-.dndev-section-full-width[data-tone='contrast'] {
+.dndev-section-full-width[data-tone='accent'] {
+    background: color-mix(in oklab, var(--accent) 5%, transparent);
+  }
+
+/* HeroSection tone backgrounds - same system as Section/CallToAction */
+
+/* Ghost (default) - transparent, allows background images to show through */
+
+.dndev-hero-section[data-tone='ghost'],.dndev-hero-section:not([data-tone]) {
+    background: transparent;
+  }
+
+.dndev-hero-section[data-tone='base'] {
+    background: var(--background);
+  }
+
+.dndev-hero-section[data-tone='muted'] {
+    background: var(--muted);
+  }
+
+.dndev-hero-section[data-tone='contrast'] {
     background: var(--background);
     color: var(--foreground);
   }
 
-.dndev-section-full-width[data-tone='accent'] {
+.dndev-hero-section[data-tone='accent'] {
     background: color-mix(in oklab, var(--accent) 5%, transparent);
   }
 
@@ -8697,10 +8863,7 @@ h4[data-variant='code'] {
 }
 
 .dndev-inset-0 {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 
 .dndev-inset-y-0 {
@@ -8708,8 +8871,8 @@ h4[data-variant='code'] {
   bottom: 0;
 }
 
-.dndev-left-0 {
-  left: 0;
+.dndev-inset-inline-start-0 {
+  inset-inline-start: 0;
 }
 
 .dndev-min-h-0 {
@@ -9326,9 +9489,12 @@ main[role='main'][data-routing-animation='none'] {
 /* Desktop: opt-in via data-footer-mode="scroll" */
 
 .dndev-layout[data-footer-mode='scroll'] {
-  overflow-y: auto;
+  height: auto;
+  min-height: 100dvh;
+  max-height: none;
+  overflow-y: visible;
   overflow-x: hidden;
-  grid-template-rows: var(--header-height) 1fr auto;
+  grid-template-rows: var(--header-height) minmax(calc(100dvh - var(--header-height)), auto) auto;
 }
 
 .dndev-layout[data-footer-mode='scroll'] header[role='banner'] {
@@ -9346,11 +9512,13 @@ main[role='main'][data-routing-animation='none'] {
 .dndev-layout[data-footer-mode='scroll'] main[role='main'] {
     overflow-y: visible;
     overflow-x: hidden;
+    contain: style;
   }
 
 .dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
     grid-column: 2 / -1;
     height: auto;
+    margin-top: var(--gap-lg);
   }
 
 :is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
@@ -9362,9 +9530,12 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width <=1023px) {
   .dndev-layout {
-    overflow-y: auto;
+    height: auto;
+    min-height: 100dvh;
+    max-height: none;
+    overflow-y: visible;
     overflow-x: hidden;
-    grid-template-rows: var(--header-height) 1fr auto;
+    grid-template-rows: var(--header-height) minmax(calc(100dvh - var(--header-height)), auto) auto;
   }
 
     .dndev-layout header[role='banner'] {
@@ -9375,10 +9546,12 @@ main[role='main'][data-routing-animation='none'] {
     .dndev-layout main[role='main'] {
       overflow-y: visible;
       overflow-x: hidden;
+      contain: style;
     }
 
     .dndev-layout footer[role='contentinfo'] {
       height: auto;
+      margin-top: var(--gap-lg);
     }
 
       :is(.dndev-layout footer[role='contentinfo']) > * {
@@ -9412,6 +9585,7 @@ header[role='banner'] {
   position: relative;
   z-index: var(--z-header);
   contain: layout style;
+  overflow: visible; /* Allow absolutely positioned children's shadows to extend beyond bounds */
 
   /* Container queries support for responsive components */
   container-type: inline-size;
@@ -9425,7 +9599,6 @@ header[role='banner'] {
   padding-inline-start: var(--content-padding);
   padding-inline-end: var(--content-padding);
 
-  /* Theme-aware styling - 100% controlled by theme system */
   background: var(--background);
   border-bottom: var(--border-hairline) solid var(--border);
 
@@ -9447,7 +9620,11 @@ header[role='banner'] {
   height: 100%;
   max-height: 100%;
   gap: var(--gap-sm);
-  overflow: hidden;
+  overflow: visible; /* Allow shadows to show */
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 .header-end {
@@ -9459,7 +9636,11 @@ header[role='banner'] {
   max-height: 100%;
   margin-inline-start: auto;
   gap: var(--gap-sm);
-  overflow: hidden;
+  overflow: visible; /* Allow shadows to show */
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 /* Viewport-centered center content - absolutely positioned overlay */
@@ -9472,6 +9653,10 @@ header[role='banner'] .header-center {
   width: -moz-fit-content;
   width: fit-content;
   z-index: 1;
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 /* ===========================
@@ -9762,7 +9947,6 @@ footer[role='contentinfo'] {
   min-height: var(--footer-height);
   z-index: var(--z-footer);
 
-  /* Theme-aware styling - 100% controlled by theme system */
   background: var(--background);
   border-top: var(--border-hairline) solid var(--border);
 
@@ -9825,8 +10009,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 .merged-bar {
   position: fixed;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   display: none;
   /* Hidden by default - CSS shows on mobile */
   align-items: center;
@@ -9835,8 +10018,8 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   contain: layout style;
 
   /* Safe area padding for notched devices */
-  padding-left: max(var(--content-padding), env(safe-area-inset-left));
-  padding-right: max(var(--content-padding), env(safe-area-inset-right));
+  padding-inline-start: max(var(--content-padding), env(safe-area-inset-left));
+  padding-inline-end: max(var(--content-padding), env(safe-area-inset-right));
 }
 
 .merged-bar[data-position='top'] {
@@ -10181,6 +10364,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 .dndev-container {
   width: 100%;
   max-width: var(--content-width);
+  min-width: 0; /* Allow shrinking in flex so max-width wins */
   flex: 1 1 auto;
 
   /* First child spacing when enabled */
@@ -10296,7 +10480,6 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 .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 */
@@ -10306,6 +10489,19 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   /* Eat gap BEFORE section only */
   margin-top: calc(-1 * var(--gap-lg));
   margin-bottom: 0;
+  /* Pass through so inner content (e.g. .dndev-section-content) can use it */
+  --content-width: var(--max-content-width, 100%);
+}
+
+/* HeroSection: only breakthrough when it has fullHeight (needs full viewport background) */
+
+.dndev-container > .dndev-hero-section[style*='height'] {
+  width: calc(100dvw - var(--sidebar-width));
+  max-width: calc(100dvw - var(--sidebar-width));
+  margin-inline: calc((-50dvw + var(--sidebar-width) / 2) + 50%);
+  margin-top: calc(-1 * var(--gap-lg));
+  margin-bottom: 0;
+  --content-width: var(--max-content-width, 100%);
 }
 
 .footer-mobile-button:hover {