demo: layout fixes, sticky removal, style overrides, css-like rendering improvements

examples/demo/app.gltm

@@ -4,8 +4,7 @@
 // Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
 // @on click, variable binding, positioning (fixed, absolute),
 // typography, box model, opacity, overflow, grid layout, style inheritance.
-// Note: true CSS position:sticky requires scroll-tracking not exposed by Iced.
-// "Always-visible header above scrollable content" pattern used instead.
+// Note: position:sticky approximated via in-flow layout + overlay
 // ============================================================================
 
 @version 1
@@ -66,7 +65,7 @@
 // ── 3. Layout ────────────────────────────────────────────────────────────────
 Window(title=$title) {
 
-    // ── Header (always visible; body scrolls beneath — closest to sticky in Iced) ─
+    // ── Header (sticky — stays at top while body scrolls beneath) ─
     Panel(class="header") {
         Panel(class="header-inner") {
             Icon "◇"
@@ -76,8 +75,7 @@ Window(title=$title) {
         }
     }
 
-    // ── Scrollable body ─────────────────────────────────────────────────────
-    Panel(class="body-scroll") {
+    // ── Main body ────────────────────────────────────────────────────────────
     Panel(class="body") {
 
         // ── LEFT COLUMN ──────────────────────────────────────────────────────
@@ -199,13 +197,13 @@ Window(title=$title) {
                 Text(class="gauge-label") "* Opacity depends on Iced widget support — works on containers, not on text"
             }
 
-            // Panel: Scrollable Log with always-visible header
+            // Panel: Scrollable Log with sticky header
             Panel(class="card") {
                 Header "Scrollable Log"
-                Panel(class="log-header") {
-                        Text "Event Log (always visible — above scrollable area)"
-                }
                 Panel(class="log") {
+                    Panel(class="log-header") {
+                        Text "Event Log (sticky header — scroll below)"
+                    }
                     Text "Init: system boot"
                     Text "Info: all modules OK"
                     Text "Warn: CPU at $cpu%"
@@ -253,7 +251,6 @@ Window(title=$title) {
             }
         }
     }
-    }
 
     // ── Fixed Toast ──────────────────────────────────────────────────────────
     @if $notif {

examples/demo/styles.glts

@@ -45,8 +45,10 @@ Panel {
     direction: vertical
 }
 
-// ── Header ───────────────────────────────────────────────────────────────────
+// ── Header (sticky — sticks at top of Window when scrolled) ──────────────────
 .header {
+    position: sticky
+    top: 0
     background: $card
     padding: 8px 20px
     border-bottom: 1px solid $border
@@ -60,13 +62,6 @@ Panel {
 }
 
 // ── Layout ───────────────────────────────────────────────────────────────────
-.body-scroll {
-    overflow-y: auto
-    flex-grow: 1
-    padding: 0px
-    gap: 0px
-}
-
 .body {
     direction: horizontal
     padding: 12px
@@ -370,6 +365,8 @@ Slider {
 }
 
 .log-header {
+    position: sticky
+    top: 0
     background: $surface
     padding: 6px 10px
     border-radius: 4px
@@ -379,8 +376,7 @@ Slider {
     width: fill
 }
 
-// Note: position:sticky is not supported by Iced. "Always visible header above
-// scrollable content" is the working pattern.
+// Note: position:sticky approximated via in-flow spacer + overlay (no scroll-tracking)
 // ═══════════════════════════════════════════════════════════════════════════════
 
 // ── Style Inheritance ────────────────────────────────────────────────────────

examples/dock/dock.gltm

@@ -0,0 +1,17 @@
+@version 1
+@style "styles.glts"
+
+Window(title="Dock") {
+    Panel(class="wallpaper")
+
+    Panel(class="dock-outer") {
+        Panel(class="dock") {
+            Button(label=" Finder ", class="dock-icon")
+            Button(label=" Safari ", class="dock-icon")
+            Button(label="  Mail  ", class="dock-icon")
+            Button(label=" Music  ", class="dock-icon")
+            Button(label=" Photos ", class="dock-icon")
+            Button(label=" Trash  ", class="dock-icon")
+        }
+    }
+}

examples/dock/styles.glts

@@ -0,0 +1,56 @@
+$dock-bg   = #2c2c2e
+$icon-bg   = #3a3a3c
+$text      = #ffffff
+$accent    = #0a84ff
+
+Window {
+    background: #1c1c1e
+    height: 100vh
+}
+
+Panel {
+    background: transparent
+    border-width: 0px
+    padding: 0px
+    gap: 0px
+    direction: vertical
+}
+
+.wallpaper {
+    width: fill
+    height: fill
+}
+
+.dock-outer {
+    position: fixed
+    bottom: 12px
+    width: 50%
+    direction: horizontal
+    content-align: center
+    align-items: center
+}
+
+.dock {
+    direction: horizontal
+    gap: 6px
+    background: $dock-bg
+    padding: 8px 14px
+    border-radius: 16px
+    border-width: 1px
+    border-color: #444
+}
+
+.dock-icon {
+    background: $icon-bg
+    color: $text
+    font-size: 13px
+    font-weight: 600
+    padding: 6px 10px
+    border-width: 0px
+    border-radius: 8px
+}
+
+.dock-icon:hover {
+    background: $accent
+    color: #fff
+}