feat (Navbar): add Navbar.center, shadow prop, hideOnScroll Prop, etc.

apps/www/src/components/demo/demo-preview.tsx

@@ -71,19 +71,3 @@ export default function DemoPreview({
     </LiveProvider>
   );
 }
-{
-  /* // {Array.isArray(codePreview) ? ( */
-}
-//   <Tabs
-//     items={codePreview.map(tab => tab.label)}
-//     className={styles.codeTabGroup}
-//   >
-//     {codePreview.map(tab => (
-//       <Tab className={styles.codeTab} value={tab.label} key={tab.label}>
-//         <Editor code={tab.code} />
-//       </Tab>
-//     ))}
-//   </Tabs>
-// ) : (
-//   <Editor code={previewCode} />
-// )}

apps/www/src/components/demo/styles.module.css

@@ -24,6 +24,46 @@
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
 }
 
+.preview:has(:global(.navbar-demo-wrapper)) {
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-height: unset;
+}
+
+/* Opt-in: top-aligned preview with dotted content area (e.g. navbar demos) */
+.previewTop {
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0;
+  min-height: unset;
+}
+
+.previewContentTop {
+  padding: 0 !important;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+
+.previewContentTop>* {
+  margin-bottom: var(--rs-space-8);
+}
+
+.previewContentTop::after {
+  content: "";
+  display: block;
+  width: calc(100% - 2 * var(--rs-space-8));
+  min-height: 200px;
+  margin: 0 var(--rs-space-8) var(--rs-space-8);
+  border: 2px dashed var(--rs-color-border-base-secondary);
+  box-sizing: border-box;
+}
+
+/* Hide dashed box for sticky demo - it has its own scrollable box inside */
+.previewContentTop:has(> :global(.navbar-sticky-demo-scroll))::after {
+  display: none;
+}
+
 .previewReset {
   position: absolute;
   bottom: 8px;
@@ -48,6 +88,7 @@
   flex-shrink: 0;
   max-height: 400px;
 }
+
 .noShadow {
   box-shadow: none;
 }
@@ -148,13 +189,15 @@
   .previewContainer {
     flex-direction: column;
   }
+
   .form {
     width: 100%;
     max-height: 280px;
     border-top: 0.5px solid var(--rs-color-border-base-primary);
     border-left: none;
   }
 }
+
 .playgroundDialog {
   height: 88vh;
   width: 72%;
@@ -165,40 +208,48 @@
   display: flex;
   flex-direction: column;
 }
+
 .playgroundHeader {
   border: 0.5px solid var(--rs-color-border-base-primary);
   background: var(--rs-color-background-base-secondary);
   height: 32px;
   padding: 0 var(--rs-space-5);
 }
+
 .playgroundTitle {
   font-size: var(--rs-font-size-small);
   font-weight: var(--rs-font-weight-medium);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
 }
+
 .playgroundContent {
   flex: 1;
   border-radius: 0;
   border: none;
 }
+
 .playgroundPreviewContainer {
   flex: 2;
 }
+
 .playgroundPreview {
   border-bottom: none;
   padding-bottom: 1px;
 }
+
 .playgroundControls {
   border-bottom: none;
   max-height: none;
 }
+
 .playgroundEditor {
   flex: 1;
   border-top: 0.5px solid var(--rs-color-border-base-primary);
   overflow: auto;
 }
+
 .playgroundPreviewContent {
   padding: var(--rs-space-12);
   align-items: safe center;
-}
+}

apps/www/src/content/docs/components/navbar/demo.css

@@ -0,0 +1,6 @@
+.navbar-demo-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}