Changelog

Version history for steam-block.

Versions follow semver: a patch for a fix, a minor for a backwards-compatible addition, a major for anything that changes existing attribute or CSS-variable behavior.

1.2.0 (2026-10-13)

The hero aspect ratio is now a minimum wherever the content overlays the media: at and above the breakpoint, and at every width with overlay="true". The hero keeps --steam-block-media-aspect-ratio while the content fits and grows taller when it doesn’t, so long copy, for example from a CMS, is no longer clipped. Heroes whose content fits look exactly as before.
This replaces the special case where only overlay="true" with media="fluid" dropped the ratio below the breakpoint. Those heroes now keep the ratio as a minimum on phones as well, so a hero with very short content can be a little taller than in 1.1.
Visible change: overlaid hero content now sits inside --steam-block-padding, like the media does. Before, it ignored that padding. If you set -padding on an overlaid hero and compensated in --steam-block-content-padding, reduce the content padding by the same amount.
Added --steam-block-content-margin-stacked and --steam-block-media-margin-stacked. They set the content and media margins in the stacked layout below the breakpoint, where -content-margin and -media-margin are not read. Use a negative top margin to pull the content over the media, or to lift the media out of the block, on phones too. Both default to 0px, so existing layouts are unaffected.
steam-emerge.js is unchanged and keeps its 1.1 SRI hash.

steam-block.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.2.0/dist/steam-block.js" integrity="sha384-oLp3ANpEh8l7QFa7niYEAhVcDMzyFCDiXx/CKeEQuIooSKzW/wc/Gk9KB3kdlrX7" crossorigin="anonymous" defer></script>

steam-emerge.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.2.0/dist/steam-emerge.js" integrity="sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+" crossorigin="anonymous" defer></script>

SRI

steam-block.js
sha384-oLp3ANpEh8l7QFa7niYEAhVcDMzyFCDiXx/CKeEQuIooSKzW/wc/Gk9KB3kdlrX7
steam-emerge.js
sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+

1.1.1 (2026-09-28)

Package release. The component code is unchanged, so both files are byte for byte identical to 1.1.0 and keep the same SRI hashes.

Source now public on GitHub: https://github.com/gommaar/steam-block. The npm Repository and Issues links point there.
Shorter README with an attribute table and links to the Visual reference, Quickstart and Changelog.
Concise source comments.

steam-block.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.1.1/dist/steam-block.js" integrity="sha384-iQB69ION+fOI85hIazKAsDqsORX4sV3IemwxcTiqslH/JsGXlJly9as9oMh12ob8" crossorigin="anonymous" defer></script>

steam-emerge.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.1.1/dist/steam-emerge.js" integrity="sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+" crossorigin="anonymous" defer></script>

SRI

steam-block.js
sha384-iQB69ION+fOI85hIazKAsDqsORX4sV3IemwxcTiqslH/JsGXlJly9as9oMh12ob8
steam-emerge.js
sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+

1.1.0 (2026-09-25)

Added --steam-block-hero-content-width, default auto. Sets the width of the hero content overlay at and above the breakpoint.
Why: --steam-block-hero-content-max-width only caps the overlay. The overlay sizes to its own content, so short content never reaches the cap and a content box with a background changed width with its text. The only way to force a width was --steam-block-hero-align-items: stretch, which also dropped the left, center or right positioning. Use the new variable for a fixed box, and keep -hero-content-max-width as its upper limit, for example width: 45% with max-width: 40rem.
Existing layouts are unaffected: with the auto default the overlay sizes exactly as in 1.0.x.
Removed --steam-block-media-before-blend-mode. It never had a visible effect: the media before layer is the bottom layer inside the isolated media box, so there was nothing behind it to blend with. To blend the media with the before layer, use --steam-block-media-blend-mode.
Removed --steam-block-align-items. It never had a visible effect: both split columns always fill the full row height, so there was no space to align in. To place the content vertically, use --steam-block-content-justify-content.
Fixed --steam-block-content-blend-mode, which had no visible effect: the slotted content sat in an isolated wrapper with nothing behind it to blend with. It now blends with the content background, the content before layer and, in a hero, the photo behind it.
Added parts: every box inside the component is exposed for ::part() styling (section, media, content, content-inner, left, right, background, foreground), including their before and after layers. Optional and additive: without a ::part() rule nothing changes, and all CSS variables keep working. See the new Parts page.
Fixed --steam-block-hero-media-max-width on small screens: a cap wider than the viewport made the fluid hero wider than the screen, so the page scrolled sideways. The media is now never wider than the viewport.
The npm README now includes the optional steam-emerge import in its install snippet.

steam-block.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.1.0/dist/steam-block.js" integrity="sha384-iQB69ION+fOI85hIazKAsDqsORX4sV3IemwxcTiqslH/JsGXlJly9as9oMh12ob8" crossorigin="anonymous" defer></script>

steam-emerge.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.1.0/dist/steam-emerge.js" integrity="sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+" crossorigin="anonymous" defer></script>

SRI

steam-block.js
sha384-iQB69ION+fOI85hIazKAsDqsORX4sV3IemwxcTiqslH/JsGXlJly9as9oMh12ob8
steam-emerge.js
sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+ (unchanged)

1.0.1 (2026-09-23)

Documentation release. The component code is unchanged, so both files are byte for byte identical to 1.0.0 and keep the same SRI hashes.

Updated npm README with npm and CDN install instructions.

steam-block.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.0.1/dist/steam-block.js" integrity="sha384-YwIY+hiJmmY++WoHN6pIgs5jecZz/0XMHA98EA3oRhtVUIVCW1+OaNNKsMhV2PaE" crossorigin="anonymous" defer></script>

steam-emerge.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.0.1/dist/steam-emerge.js" integrity="sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+" crossorigin="anonymous" defer></script>

SRI

steam-block.js
sha384-YwIY+hiJmmY++WoHN6pIgs5jecZz/0XMHA98EA3oRhtVUIVCW1+OaNNKsMhV2PaE
steam-emerge.js
sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+

1.0.0 (2026-09-14)

Initial release.

Two layout templates, split and hero, styled entirely through CSS custom properties, no build step, no dependencies.
Optional steam-emerge scroll-reveal module, loaded separately so it’s only paid for if used.
Full CSS-variable reference and live examples in the Documentation and Examples sections.

steam-block.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.0.0/dist/steam-block.js" integrity="sha384-YwIY+hiJmmY++WoHN6pIgs5jecZz/0XMHA98EA3oRhtVUIVCW1+OaNNKsMhV2PaE" crossorigin="anonymous" defer></script>

steam-emerge.js

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.0.0/dist/steam-emerge.js" integrity="sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+" crossorigin="anonymous" defer></script>

SRI

steam-block.js
sha384-YwIY+hiJmmY++WoHN6pIgs5jecZz/0XMHA98EA3oRhtVUIVCW1+OaNNKsMhV2PaE
steam-emerge.js
sha384-PUXKVdqPLk7akL4rVn2ozcfToQqu5RLDUZ7Xamn074ilP5U/fIwla1lVOJkihDv+