@trebired/frontend 13.28.0 → 13.30.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 13.30.0
+
+- The site header's menu toggle pulls itself toward the container edge with a negative margin for optical alignment. That is now the `--tbf-shell-header-toggle-offset` token instead of a hard-coded value, so a site whose own rules forbid margins can set it to `0` from config rather than writing an override it is not allowed to write.
+
+## 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

@@ -129,7 +129,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   align-items: center;
   justify-content: center;
   padding: 0;
-  margin-inline-end: -0.5rem;
+  margin-inline-end: token("toggle-offset", -0.5rem);
   border: 0;
   border-radius: token("toggle-radius", 0.5rem);
   color: token("toggle-color", inherit);
@@ -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.30.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,