@trebired/frontend 13.28.0 → 13.29.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 13.29.0
+
+- Fixed the `blurred` header surface: the mobile menu was not blurring anything. The preset put `backdrop-filter` on the header root and again on the menu, but an element with a `backdrop-filter` becomes a backdrop root for its descendants, so the menu's own filter sampled an empty backdrop and did nothing. The page showed through the open menu unblurred and the links were unreadable over busy content.
+- The surface now paints the bar and the menu, which are siblings, and the root carries nothing. Both get the tint, the filter and the edge, so they stay one material without one nesting inside the other's backdrop root.
+- `transparent` is split the same way, and its bar and menu are explicitly cleared rather than relying on the root.
+
 ## 13.28.0
 
 - `SiteHeader` accepts `brandHref={false}`. The brand slot was always wrapped in an `<a href>`, so a header whose brand opens a menu rather than navigating home had to nest a button inside a link: invalid markup, and the click bubbles to the anchor and navigates instead of opening. With `false` the same slot renders as a plain element and the content owns its own interaction.

package/dist/layout/styles/site-header.scss

@@ -276,7 +276,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 
 #{ns.data("site-header-surface", "transparent")},
 
-#{ns.data("site-header-surface", "transparent")} #{ns.element-class("site-header", "menu")} {
+#{ns.data("site-header-surface", "blurred")} {
   border-block-end-color: token("surface-border-color", transparent);
   background: transparent;
   backdrop-filter: none;
@@ -284,12 +284,22 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   box-shadow: none;
 }
 
-#{ns.data("site-header-surface", "blurred")},
+#{ns.data("site-header-surface", "transparent")} #{ns.element-class("site-header", "bar")},
+
+#{ns.data("site-header-surface", "transparent")} #{ns.element-class("site-header", "menu")} {
+  border-block-end-color: transparent;
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: none;
+}
+
+#{ns.data("site-header-surface", "blurred")} #{ns.element-class("site-header", "bar")},
 
 #{ns.data("site-header-surface", "blurred")} #{ns.element-class("site-header", "menu")} {
-  border-block-end-color: token(
-    "surface-border-color",
-    color-mix(in srgb, currentColor 12%, transparent)
+  border-block-end: token(
+    "surface-border",
+    var(#{ns.css-var("border-width")}, 1px) solid token("surface-border-color", color-mix(in srgb, currentColor 12%, transparent))
   );
   background: token(
     "surface-bg",

package/package.json

@@ -8,7 +8,7 @@
     }
   },
   "name": "@trebired/frontend",
-  "version": "13.28.0",
+  "version": "13.29.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,