@donotdev/components 0.0.16 → 0.0.18

package/dist/styles/index.css

@@ -113,6 +113,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
      =========================== */
@@ -208,6 +217,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);
@@ -511,7 +530,6 @@ body {
 /* Reset and base styles */
 
 :root {
-  font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -525,9 +543,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;
@@ -602,17 +621,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;
@@ -1043,10 +1066,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);
@@ -1056,12 +1089,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);
   }
 
@@ -1343,6 +1380,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;
@@ -1633,6 +1671,7 @@ em {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-transform: var(--text-transform-label, none);
 }
 
 /* Compact mode - always hide label */
@@ -1698,7 +1737,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) */
@@ -2004,7 +2044,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;
 }
 
@@ -2344,7 +2384,6 @@ em {
   flex-shrink: 0;
   overflow: hidden;
   border-radius: var(--radius-full);
-  border: 1px solid var(--border);
 }
 
 .dndev-avatar-image {
@@ -2801,8 +2840,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;
@@ -2832,13 +2870,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;
 }
@@ -3084,13 +3122,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'] {
@@ -3132,7 +3167,7 @@ em {
 
 .dndev-cta-actions {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: var(--gap-md);
   justify-content: center;
 }
@@ -3145,7 +3180,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);
   }
 
@@ -3163,17 +3199,11 @@ 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);
     }
 
-@media (width >= 768px) {
-
-.dndev-cta-actions {
-    flex-direction: row;
-}
-  }
-
 /* packages/components/src/atomic/Card/Card.css */
 
 /* Card layout - grid with gap */
@@ -3385,7 +3415,7 @@ em {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  text-align: left;
+  text-align: start;
 }
 
 .dndev-combobox-trigger button {
@@ -3623,12 +3653,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);
@@ -3702,8 +3730,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'] {
@@ -3720,16 +3746,20 @@ 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: 1.5;
+  min-height: 1.5em;
+  font-size: inherit;
 }
 
 .dndev-code-code {
@@ -3737,8 +3767,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 */
@@ -3746,7 +3778,22 @@ em {
 .dndev-code-code pre,
 .dndev-code-code code {
   line-height: inherit;
-  font-size: inherit; /* Match parent font-size */
+  font-size: inherit;
+}
+
+/* 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 */
@@ -3910,7 +3957,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 {
@@ -4196,6 +4243,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'] {
@@ -4509,7 +4604,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;
@@ -5076,7 +5172,7 @@ input[type='number'] {
   }
 
 .dndev-nav-menu-content {
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   width: 100%;
 }
@@ -5091,7 +5187,7 @@ input[type='number'] {
 
 .dndev-nav-menu-viewport-wrapper {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 100%;
   display: flex;
   justify-content: center;
@@ -5131,7 +5227,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);
 }
@@ -5302,19 +5398,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 {
@@ -5659,9 +5770,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);
@@ -5909,6 +6021,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'] {
@@ -5949,8 +6064,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 */
   }
@@ -5969,16 +6083,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 */
@@ -6297,7 +6411,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);
@@ -6368,7 +6483,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);
@@ -6392,7 +6508,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;
@@ -6402,42 +6518,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 */
@@ -6721,6 +6837,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 {
@@ -7160,19 +7278,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);
@@ -7180,13 +7299,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);
@@ -7194,13 +7314,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);
@@ -7208,7 +7329,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);
@@ -7228,7 +7350,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);
@@ -7236,13 +7358,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);
@@ -7250,13 +7373,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);
@@ -7264,7 +7388,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);
@@ -7311,7 +7436,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;
@@ -7474,7 +7599,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);
@@ -7527,6 +7656,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 {
@@ -7726,8 +7859,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);
@@ -7819,7 +7953,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 */
@@ -7923,12 +8058,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 */
@@ -8455,6 +8594,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);
   }
@@ -8463,16 +8608,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);
   }
 
@@ -8685,10 +8851,7 @@ h4[data-variant='code'] {
 }
 
 .dndev-inset-0 {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 
 .dndev-inset-y-0 {
@@ -8696,8 +8859,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 {