@taprootio/espalier 4.16.0 → 4.18.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# 4.18.0
+
+A brand logo holds its place before it loads, the header's menu button is one button, and a stored theme's declared roles finally take effect.
+
+- A configured brand logo now reserves its box before the image arrives. Previously the header and footer gave the logo a fixed height and let the image decide its width — so until the bytes landed there was nothing to decide it with: the brand region collapsed to nothing on first paint, and widened to fit the alt text whenever a logo failed to load. Because both schemes swap the logo at runtime, that happened again on every scheme change. A logo that loads is laid out exactly as before, at its own proportions.
+- `--esp-header-brand-logo-aspect-ratio` and `--esp-footer-brand-logo-aspect-ratio` set the proportions of that reserved box (`3 / 1` by default). Set one to your logo's real ratio — per scheme, if your light and dark assets differ — and the region does not resize at all when the image arrives. A loaded image always wins over this value, so it can never crop or letterbox a logo that renders correctly today.
+- The header's menu button is now a single control. It used to expose button semantics twice — once on the `esp-header-button` element and again on the button inside it, under the same name — so screen readers announced a button inside a button and `getByRole("button", { name: "Close navigation" })` matched two elements. It now matches one, and a strict-mode locator that used to fail on the ambiguity works as written. **The elements are unchanged** — same tags, same classes, same nesting — so selectors that name them are unaffected. Two things do change: the outer element no longer carries `role="button"`, so a selector matching on that attribute no longer matches; and a locator that worked around the double match by asking for the *second* of the two (`.nth(1)`) now resolves to nothing. `.first()` and `.last()` both still resolve, to the one remaining button. Keyboard activation, focus placement and return, and the single `esp-clicked` per click or key press are unchanged.
+- `esp-header-button` forwards `aria-controls` and `aria-expanded` to its inner button, alongside the `aria-label` it already forwarded. Set them on the element and they reach the control that actually owns the semantics. Buttons that set neither are unaffected. One limit worth knowing, unchanged by this release: `aria-controls` is an id reference, and a browser resolves it only within the tree the referring element is in — so a value naming an element outside the button's shadow root, such as `esp-header`'s own `drawer-target`, is present as an attribute but resolves to no relationship. `aria-expanded` and `aria-label` are unaffected, since neither is a reference.
+- A stored theme that carries cached color mappings no longer overrides the roles it declares. A theme document that records every resolved mapping plus a marker for which ones a person actually authored was having every mapping treated as authored, so declaring a new `canvas` or `ink` role changed nothing. The roles now recompile the mappings the marker does not claim. **This is visible**: a site whose stored theme carries cached mappings *and* declares roles will see its role-derived colors move to what those roles ask for — which is what it asked for. The rule is the one the marker states, and it is worth reading literally: any mapping the marker does not claim may now move — to what the theme's roles compile, or, where no role produces that token, to whatever it would have resolved to had the entry not been stored at all (the default, or for the type inks the body text mapping, which may itself be a pin you authored). An authored pin never moves. Documents with no marker at all are untouched, and so is a marked document whose stored mappings already match what this version resolves for it — which is why regenerating a default-theme artifact from this version produces identical output.
+
+# 4.17.0
+
+A banner can dissolve into the section beneath it, and a lightbox swipe stays in the lightbox.
+
+- `esp-image` gains `scrim-edge`. Set it to `flush` on a banner with a directional scrim and the scrim reaches full opacity along the edge it is anchored to, relaxing to the ordinary `scrim-strength` over a short band — so a full-bleed banner sitting directly above an `esp-section` in the same context meets that band with no seam, instead of showing a quarter of the photograph through a visible line. It defaults to `none`, and is inert for `scrim="none"`, `scrim="flat"` and `scrim="radial"`, where a full-opacity edge has no meaning.
+- The join works because both sides paint the same token: when a banner's polarity matches the page scheme its scrim ink *is* `--esp-color-background`, which is what a section paints its band with. A banner pinned to the opposite polarity with `banner-scheme` keeps that polarity, so its flush edge reads as a deliberate colour break rather than a dissolve.
+- `--esp-image-scrim-edge-depth` sets how far the edge takes to relax (12% of the gradient axis by default), and `--esp-image-scrim-edge-image` with `--esp-image-scrim-edge-size` let a flush edge carry the adjoining band's own seamless tile up over the photograph, fading out with it. The component anchors its side of the tile to the scrim's edge; match the band's `background-size` and anchor its background to the top to keep the pattern continuous.
+- Nothing about the existing scrim changes: `scrim-strength`, `--esp-image-scrim-color`, `--esp-image-scrim-opacity` and the reduced-transparency treatment all behave exactly as before, and a banner without `scrim-edge` renders pixel for pixel what it did in 4.16.0.
+- Swiping inside an open `esp-lightbox` no longer opens the navigation drawer as well. A right-swipe for the previous image that started near the screen edge used to trigger both, dropping the menu over the photograph it had just turned to.
+
 # 4.16.0
 
 Breadcrumbs read as navigation, and a tab strip stays inside its own rounded corners.