feat(ui): add in-flow floating navbar

packages/ui/components/Navbar.wrn

@@ -17,6 +17,8 @@ size: string = "default"
     actions: unknown[] = []
     active: string = ""
     sticky: boolean = false
+    floating: boolean = false
+    startFloating: string = "0px"
     openOnHover: boolean = false
     maxWidth: string = "full"
     mobileLabel: string = "Toggle navigation"
@@ -76,7 +78,7 @@ size: string = "default"
   }
 
   view {
-    <header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}">
+    <header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {floating ? 'wrn-navbar--floating' : ''} {class}" style="--wrn-navbar-floating-start: {startFloating};" data-wrn-navbar data-open-on-hover="{openOnHover}" data-floating="{floating ? 'true' : 'false'}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}">
       <div class="wrn-navbar__topbar" aria-label="{topbarLabel}">
         <slot name="topbar" />
       </div>
@@ -165,7 +167,7 @@ size: string = "default"
     /* Full application navigation */
     .wrn-navbar {
       position: relative;
-      z-index: 40;
+      z-index: 1000;
       width: 100%;
       color: var(--wrn-color-text);
       background: color-mix(in srgb, var(--wrn-color-surface) 96%, transparent);
@@ -178,6 +180,14 @@ size: string = "default"
       backdrop-filter: blur(16px);
     }
 
+    .wrn-navbar--floating {
+      position: sticky;
+      z-index: 1000;
+      top: var(--wrn-navbar-floating-start, 0px);
+      box-shadow: 0 10px 30px rgb(15 23 42 / 0.08);
+      backdrop-filter: blur(16px);
+    }
+
     .wrn-navbar__topbar:not(:has(> *)) {
       display: none;
     }
@@ -369,6 +379,7 @@ size: string = "default"
 
     .wrn-navbar__panel {
       position: absolute;
+      z-index: 1100;
       top: calc(100% + 0.55rem);
       left: 50%;
       display: grid;