@nldd/design-system 0.8.96 → 0.8.97

package/dist/components/layout/page-sections/hero/hero.js

@@ -7,15 +7,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Nederlandse Digitale Dienst Hero Component (Lit + TypeScript)
  *
- * A page header with a media area and a text panel (the main) that can stand in
- * six positions. Every area is rectangular.
+ * The section that says what a page is for: it names the main goal of what
+ * you can find there, draws the eye and is the visual welcome. It has a media
+ * area and a text panel (the main) that can stand in eight positions. Every
+ * area is rectangular. Use it on pages where a visitor first has to know where
+ * they are, such as a home or a topic page; where the title already does
+ * that, a section with a title is enough.
  *
- * With `main-width="full"` the media area sits as its own strip above or below
- * the panel rather than behind it. On mobile the media always stacks above the
- * full-width panel. Without media the main fills the whole area; with
+ * The image in a hero sets the mood and is never the main content, so the
+ * panel always stands on it. Over an image the panel keeps a section gap from
+ * its edges, so it reads as a panel on the image rather than a frame cut out of
+ * it; with `main-width="full"` it is a strip across the whole image, the same
+ * gap from the sides. On mobile the image comes first and the panel below it,
+ * indented by the section gap and overlapping the image by 48px. For an
+ * image beside text without that relation, use a section with an image beside
+ * text instead. Without media the main fills the whole area; with
  * `main-background="base"` that area gets a border so it stays visible on the
  * base surface.
  *
+ * The hero is the head of a page and sits right under the top bar, so its top
+ * padding is half that of the other page sections: the full distance is meant
+ * to separate two sections, and under the top bar it reads as a gap. The
+ * bottom keeps the full distance to the section below. Set `padding-top` to
+ * place a hero elsewhere.
+ *
+ * By default the panel falls over the bottom of the image and runs on below it
+ * (`layout="overlap"`), so the image keeps its height whatever the content.
+ * `layout="contained"` keeps the panel on the image, for a short panel or one
+ * that stands at the top or along a side.
+ *
+ * The height of a hero comes from its image: `media-aspect-ratio`, or a fixed
+ * `media-height`. The `height` of the other page sections is not used here: as
+ * a minimum height for the whole hero it stretched the panel once that sat
+ * below the image. A hero given `height` says so in development.
+ *
  * `main-background` gives the panel a surface color from the filled categories.
  * Those carry a pure white or black content color along, so components with
  * `color="inherit"` (title, rich-text) are guaranteed to keep their contrast.
@@ -24,17 +49,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * @attr {'inherit'|'base'|'tinted'} background - Surface behind the hero (section API)
  * @attr {string} width - Body max-width; 'full' removes the bound (section API)
- * @attr {string} height - Minimum height of the section (section API)
+ * @attr {boolean} grow - Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow.
  * @attr {string} padding-block - Block padding override, also per edge and responsive (section API)
+ * @attr {'contained'|'overlap'} layout - How the panel relates to the image (default: 'overlap'). 'contained' keeps it on the image, in any of the eight positions; 'overlap' lets it fall `overlap-size` over the bottom of the image and run on below as far as its content needs, so the image keeps its height whatever the content. In 'overlap' the image has a fixed height (320px on md, 400px on lg) unless `media-height` or `media-aspect-ratio` is set, and only the horizontal side of `main-position` counts. A panel shorter than `overlap-size` ends inside the image and says so in development
  * @attr {string} main-background - Surface color of the panel: 'base' (the base surface)
  *   or a category color — 'accent' (default) or a Rijkshuisstijl color such as
  *   'lintblauw'|'donkerblauw'|'oranje'
- * @attr {'1/2'|'2/3'|'3/4'|'full'} main-width - Width of the panel (default: '1/2');
- *   'full' makes a full top or bottom strip and is ignored with 'left'/'right'
- * @attr {'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left'|'right'} main-position -
+ * @attr {string} main-width - Width of the panel (default: 'auto'). 'auto' follows the content, between 480px and 640px and never wider than the image allows: a short title gets a narrow panel, a paragraph runs on to a readable line length. 'full' makes a strip across the whole image, at the top or the bottom, and is ignored with 'left'/'right'. Any CSS width (e.g. '560px', '60%') sets it exactly on md and lg, still never wider than the image allows; an invalid value falls back to 'auto'
+ * @attr {'top-left'|'top-center'|'top-right'|'bottom-left'|'bottom-center'|'bottom-right'|'left'|'right'} main-position -
  *   Position of the text panel (default: 'bottom-left'); 'left'/'right' span the full height
+ * @attr {string} overlap-size - With layout="overlap": how far the panel falls over the bottom of the image, any CSS length (default: 160px). The overlap stays the same whatever the height of the image; a panel shorter than this ends inside the image
  * @attr {string} media-aspect-ratio - Aspect ratio of the media area (CSS form, '16/9' or '16:9');
  *   default '21/9'. On md/lg it sets the height of the hero, on sm the height of the media area
+ * @attr {string} media-height - Fixed height of the media area, any CSS length (e.g. '320px', '40vh'); wins over media-aspect-ratio. An invalid value falls back to the ratio
  * @attr {string} media-src - Source of the media area (an alternative to the media slot);
  *   ignored as soon as the media slot is filled
  * @attr {string} media-srcset - Responsive source set for media-src
@@ -52,17 +79,30 @@ import { PageSectionMixin } from '../../../../utilities/page-section-mixin.js';
 import { reflectNonDefault } from '../../../../utilities/reflect-non-default.js';
 import { heroStyles } from './hero.styles.js';
 import { heroTemplate } from './hero.template.js';
+const CSS_WIDE_KEYWORDS = new Set(['inherit', 'initial', 'unset', 'revert', 'revert-layer']);
+/**
+ * Whether `property` takes `value` as a value of its own. CSS.supports alone
+ * also says yes to the CSS-wide keywords, for any property; written into a
+ * custom property those would not fall back to the default but resolve to
+ * something else.
+ */
+function takesValue(property, value) {
+    return !CSS_WIDE_KEYWORDS.has(value.trim().toLowerCase()) && CSS.supports(property, value);
+}
 let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
     constructor() {
         super(...arguments);
         /** Width mode: 'full' (removes body max-width) or any CSS length. */
         this.width = '';
+        this.layout = 'overlap';
         this.mainBackground = 'accent';
-        this.mainWidth = '1/2';
+        this.mainWidth = 'auto';
         this.mainPosition = 'bottom-left';
         /** Media aspect-ratio in CSS form ('16/9' or '16:9'); default '21/9'. Drives
          *  the hero height on md/lg and the media strip height on sm. */
         this.mediaAspectRatio = '';
+        this.overlapSize = '';
+        this.mediaHeight = '';
         /** Hybrid media source: media-src renders an internal <img>, but a slotted
          *  media element wins (mirrors nldd-image / nldd-identity). srcset/sizes/alt
          *  feed that internal img. */
@@ -71,6 +111,11 @@ let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
         this.mediaSizes = '';
         this.mediaAlt = '';
         this._slotHasMedia = false;
+        /** DEV-only latch for the `height` warning. */
+        this._warnedHeight = false;
+        /** DEV-only: watches an overlap hero for a panel that does not reach below its image. */
+        this._overlapObserver = null;
+        this._warnedOverlap = false;
     }
     /** Media is present when the slot has content or media-src is set. */
     get _hasMedia() {
@@ -81,25 +126,79 @@ let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
         // The stylesheet only keys off whether media is present.
         this.toggleAttribute('data-has-media', this._hasMedia);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (import.meta.env?.DEV && this.hasUpdated)
+            this._watchOverlap();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._overlapObserver?.disconnect();
+        this._overlapObserver = null;
+        // A hero that comes back is watched again, so it may warn again.
+        this._warnedOverlap = false;
+    }
     updated(changed) {
         super.updated(changed);
         if (changed.has('width')) {
             // Same contract as the other page sections: the keyword 'full' is
             // handled by CSS; CSS lengths feed --_hero-max-width inline.
             const w = this.width;
-            if (w && w !== 'full' && CSS.supports('max-width', w)) {
+            if (w && w !== 'full' && takesValue('max-width', w)) {
                 this.style.setProperty('--_hero-max-width', w);
             }
             else {
                 this.style.removeProperty('--_hero-max-width');
             }
         }
+        if (import.meta.env?.DEV && changed.has('layout'))
+            this._watchOverlap();
+        if (changed.has('mainWidth')) {
+            const width = (this.mainWidth ?? '').trim();
+            const length = width !== '' && width !== 'auto' && width !== 'full';
+            const valid = length && takesValue('width', width);
+            if (valid)
+                this.style.setProperty('--_hero-main-width', width);
+            else
+                this.style.removeProperty('--_hero-main-width');
+            this.toggleAttribute('data-main-width-length', valid);
+            if (import.meta.env?.DEV && length && !valid) {
+                console.warn(`<nldd-hero>: main-width="${width}" is not "auto", "full" or a CSS width, and falls back to "auto", which follows the content between 480px and 640px.`, this);
+            }
+        }
+        if (changed.has('overlapSize')) {
+            const size = (this.overlapSize ?? '').trim();
+            if (size && takesValue('margin-top', size)) {
+                this.style.setProperty('--_hero-overlap-size', size);
+            }
+            else {
+                this.style.removeProperty('--_hero-overlap-size');
+            }
+        }
+        if (changed.has('mediaHeight')) {
+            const height = (this.mediaHeight ?? '').trim();
+            if (height && takesValue('height', height)) {
+                this.style.setProperty('--_hero-media-height', height);
+            }
+            else {
+                this.style.removeProperty('--_hero-media-height');
+            }
+        }
+        if (changed.has('height') && this.height) {
+            // The section API turns `height` into the host's min-height; a hero
+            // takes its height from its image instead.
+            this.style.removeProperty('min-height');
+            if (import.meta.env?.DEV && !this._warnedHeight) {
+                this._warnedHeight = true;
+                console.warn('<nldd-hero>: `height` is not used on a hero, whose height comes from its image. Use `media-height` for a fixed height, or `media-aspect-ratio`.', this);
+            }
+        }
         if (changed.has('mediaAspectRatio')) {
             // Accept '16:9' as well as '16/9' (like nldd-image). Clearing the
             // attribute makes Lit set the property to null, so guard with ?? '';
             // the empty value falls back to the stylesheet's --_hero-media-aspect-ratio.
             const ratio = (this.mediaAspectRatio ?? '').replace(':', '/').trim();
-            if (ratio && CSS.supports('aspect-ratio', ratio)) {
+            if (ratio && takesValue('aspect-ratio', ratio)) {
                 this.style.setProperty('--_hero-media-aspect-ratio', ratio);
             }
             else {
@@ -107,6 +206,41 @@ let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
             }
         }
     }
+    _watchOverlap() {
+        const watch = this.layout !== 'contained' && typeof ResizeObserver !== 'undefined';
+        if (!watch) {
+            this._overlapObserver?.disconnect();
+            this._overlapObserver = null;
+            return;
+        }
+        if (this._overlapObserver)
+            return;
+        const media = this.shadowRoot?.querySelector('.hero__media');
+        const main = this.shadowRoot?.querySelector('.hero__main');
+        if (!media || !main)
+            return;
+        this._overlapObserver = new ResizeObserver(() => this._checkOverlap(media, main));
+        this._overlapObserver.observe(media);
+        this._overlapObserver.observe(main);
+    }
+    /**
+     * In an overlap hero the panel is meant to run on below the image. When it
+     * ends inside it, the content is shorter than `overlap-size`; the consumer
+     * decides how far it runs on, so this only says so, in development.
+     */
+    _checkOverlap(media, main) {
+        if (!this._hasMedia || getComputedStyle(media).position === 'static')
+            return;
+        const falls = main.getBoundingClientRect().bottom <= media.getBoundingClientRect().bottom;
+        if (!falls) {
+            this._warnedOverlap = false;
+            return;
+        }
+        if (this._warnedOverlap)
+            return;
+        this._warnedOverlap = true;
+        console.warn('<nldd-hero>: With layout="overlap" the panel is shorter than `overlap-size` and ends inside the image. Give it more content or a smaller `overlap-size`, or set layout="contained" to keep the panel on the image.', this);
+    }
     /** @internal Tracks the media slot so the no-media mode can collapse it. */
     _onMediaSlotChange(e) {
         const slot = e.target;
@@ -118,20 +252,29 @@ let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
 };
 NLDDHero.styles = heroStyles;
 __decorate([
-    property({ type: String, reflect: true })
+    property({ reflect: true, converter: reflectNonDefault('') })
 ], NLDDHero.prototype, "width", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('overlap') })
+], NLDDHero.prototype, "layout", void 0);
 __decorate([
     property({ reflect: true, attribute: 'main-background', converter: reflectNonDefault('accent') })
 ], NLDDHero.prototype, "mainBackground", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'main-width', converter: reflectNonDefault('1/2') })
+    property({ reflect: true, attribute: 'main-width', converter: reflectNonDefault('auto') })
 ], NLDDHero.prototype, "mainWidth", void 0);
 __decorate([
     property({ reflect: true, attribute: 'main-position', converter: reflectNonDefault('bottom-left') })
 ], NLDDHero.prototype, "mainPosition", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'media-aspect-ratio' })
+    property({ reflect: true, attribute: 'media-aspect-ratio', converter: reflectNonDefault('') })
 ], NLDDHero.prototype, "mediaAspectRatio", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'overlap-size', converter: reflectNonDefault('') })
+], NLDDHero.prototype, "overlapSize", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'media-height', converter: reflectNonDefault('') })
+], NLDDHero.prototype, "mediaHeight", void 0);
 __decorate([
     property({ type: String, attribute: 'media-src' })
 ], NLDDHero.prototype, "mediaSrc", void 0);

package/dist/components/layout/page-sections/hero/hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAMlD,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;AAE7F;;;;;GAKG;AACH,SAAS,UAAU,CAAC,QAAgB,EAAE,KAAa;IAClD,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AAC5F,CAAC;AAWM,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAAnD;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;QAGX,WAAM,GAAe,SAAS,CAAC;QAG/B,mBAAc,GAAuB,QAAQ,CAAC;QAG9C,cAAS,GAAkB,MAAM,CAAC;QAGlC,iBAAY,GAAqB,aAAa,CAAC;QAE/C;yEACiE;QAEjE,qBAAgB,GAAG,EAAE,CAAC;QAGtB,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,EAAE,CAAC;QAEjB;;sCAE8B;QAE9B,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,eAAU,GAAG,EAAE,CAAC;QAGhB,aAAQ,GAAG,EAAE,CAAC;QAGd,kBAAa,GAAG,KAAK,CAAC;QAwFtB,+CAA+C;QACvC,kBAAa,GAAG,KAAK,CAAC;QAE9B,yFAAyF;QACjF,qBAAgB,GAA0B,IAAI,CAAC;QAC/C,mBAAc,GAAG,KAAK,CAAC;IA4ChC,CAAC;IAvIA,sEAAsE;IACtE,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC;IACnD,CAAC;IAEQ,UAAU,CAAC,OAAuB;QAC1C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,yDAAyD;QACzD,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACxD,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,aAAa,EAAE,CAAC;IACnE,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,iEAAiE;QACjE,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC7B,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1B,kEAAkE;YAClE,6DAA6D;YAC7D,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACrD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC;YAChD,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;YAChD,CAAC;QACF,CAAC;QACD,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;YAAE,IAAI,CAAC,aAAa,EAAE,CAAC;QACxE,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAC9B,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;YAC5C,MAAM,MAAM,GAAG,KAAK,KAAK,EAAE,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,MAAM,CAAC;YACpE,MAAM,KAAK,GAAG,MAAM,IAAI,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACnD,IAAI,KAAK;gBAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;;gBAC1D,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;YACrD,IAAI,CAAC,eAAe,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC;YACtD,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC9C,OAAO,CAAC,IAAI,CAAC,4BAA4B,KAAK,sHAAsH,EAAE,IAAI,CAAC,CAAC;YAC7K,CAAC;QACF,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAChC,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;YAC7C,IAAI,IAAI,IAAI,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,CAAC;gBAC5C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC;YACtD,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC;YACnD,CAAC;QACF,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAChC,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;YAC/C,IAAI,MAAM,IAAI,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC;gBAC5C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;YACxD,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC;YACnD,CAAC;QACF,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAC1C,oEAAoE;YACpE,2CAA2C;YAC3C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;YACxC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACjD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;gBAC1B,OAAO,CAAC,IAAI,CAAC,iJAAiJ,EAAE,IAAI,CAAC,CAAC;YACvK,CAAC;QACF,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACrC,kEAAkE;YAClE,qEAAqE;YACrE,6EAA6E;YAC7E,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;YACrE,IAAI,KAAK,IAAI,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;gBAChD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;YAC7D,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,4BAA4B,CAAC,CAAC;YACzD,CAAC;QACF,CAAC;IACF,CAAC;IASO,aAAa;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,KAAK,WAAW,IAAI,OAAO,cAAc,KAAK,WAAW,CAAC;QACnF,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;YACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,OAAO;QACR,CAAC;QACD,IAAI,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QAC7D,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC3D,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI;YAAE,OAAO;QAC5B,IAAI,CAAC,gBAAgB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACK,aAAa,CAAC,KAAc,EAAE,IAAa;QAClD,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC,QAAQ,KAAK,QAAQ;YAAE,OAAO;QAC7E,MAAM,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,IAAI,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC1F,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,OAAO;QACR,CAAC;QACD,IAAI,IAAI,CAAC,cAAc;YAAE,OAAO;QAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,OAAO,CAAC,IAAI,CAAC,oNAAoN,EAAE,IAAI,CAAC,CAAC;IAC1O,CAAC;IAED,4EAA4E;IAC5E,kBAAkB,CAAC,CAAQ;QAC1B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACzD,CAAC;IAEQ,MAAM;QACd,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;;AArLe,eAAM,GAAG,UAAU,AAAb,CAAc;AAIpC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;uCAC3D;AAGX;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAa,SAAS,CAAC,EAAE,CAAC;wCAClD;AAG/B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,CAAqB,QAAQ,CAAC,EAAE,CAAC;gDACxE;AAG9C;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,CAAgB,MAAM,CAAC,EAAE,CAAC;2CACxE;AAGlC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,iBAAiB,CAAmB,aAAa,CAAC,EAAE,CAAC;8CACxE;AAK/C;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;kDACjF;AAGtB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;6CAChF;AAGjB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;6CAChF;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACrC;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;4CACrC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACrC;AAGd;IADC,KAAK,EAAE;+CACc;AA9CV,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuLpB"}

package/dist/components/layout/page-sections/hero/hero.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,yBAoXtB,CAAC"}
+{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,yBA0atB,CAAC"}

package/dist/components/layout/page-sections/hero/hero.styles.js

@@ -28,10 +28,19 @@ export const heroStyles = css `
 		--_hero-lg-padding-bottom: initial;
 		--_hero-max-width: var(--semantics-page-sections-body-max-width);
 		--_hero-media-aspect-ratio: 21 / 9;
-		--_hero-main-width: 50%;
+		--_hero-media-height: auto;
+		--_hero-main-min-width: var(--primitives-area-480);
+		--_hero-main-max-width: var(--primitives-area-640);
+		--_hero-main-width: auto;
 		--_hero-main-background-color: var(--semantics-categories-accent-reference-background-color);
 		--_hero-main-content-color: var(--semantics-categories-accent-reference-content-color);
 		--_hero-main-padding: var(--primitives-space-16);
+		--_hero-main-inset: var(--primitives-space-0);
+		--_hero-sm-main-inset: var(--semantics-page-sections-sm-gap);
+		--_hero-sm-main-overlap: var(--primitives-space-48);
+		--_hero-overlap-size: initial;
+		--_hero-default-overlap-size: var(--primitives-space-0);
+		--_hero-default-media-height: auto;
 
 		${inheritedTextReset}
 		display: flex;
@@ -44,8 +53,8 @@ export const heroStyles = css `
 		display: none;
 	}
 
-	:host(:last-child),
-	:host(.is-last) {
+	:host([data-growing]),
+	:host([grow]) {
 		flex-grow: 1;
 	}
 
@@ -53,18 +62,6 @@ export const heroStyles = css `
 		--_hero-max-width: none;
 	}
 
-	:host([main-width="2/3"]) {
-		--_hero-main-width: 66.667%;
-	}
-
-	:host([main-width="3/4"]) {
-		--_hero-main-width: 75%;
-	}
-
-	:host([main-width="full"]) {
-		--_hero-main-width: 100%;
-	}
-
 	:host([main-background="base"]) {
 		--_hero-main-background-color: var(--semantics-surfaces-base-background-color);
 		--_hero-main-content-color: var(--semantics-content-color);
@@ -177,21 +174,27 @@ export const heroStyles = css `
 
 		@container (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			padding-top: var(--_hero-sm-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-sm-margin-block)));
+			padding-top: var(--_hero-sm-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-sm-margin-block) / 2)));
 			padding-bottom: var(--_hero-sm-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-sm-margin-block)));
 		}
 
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			--_hero-main-padding: var(--primitives-space-24);
+			--_hero-main-inset: var(--semantics-page-sections-md-gap);
+			--_hero-default-overlap-size: var(--primitives-area-160);
+			--_hero-default-media-height: var(--primitives-area-320);
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
-			padding-top: var(--_hero-md-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-md-margin-block)));
+			padding-top: var(--_hero-md-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-md-margin-block) / 2)));
 			padding-bottom: var(--_hero-md-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-md-margin-block)));
 		}
 
 		@container (min-width: ${lgMin}) {
 			--_hero-main-padding: var(--primitives-space-32);
+			--_hero-main-inset: var(--semantics-page-sections-lg-gap);
+			--_hero-default-overlap-size: var(--primitives-area-160);
+			--_hero-default-media-height: var(--primitives-area-400);
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-			padding-top: var(--_hero-lg-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-lg-margin-block)));
+			padding-top: var(--_hero-lg-padding-top, var(--_hero-padding-top, calc(var(--semantics-page-sections-lg-margin-block) / 2)));
 			padding-bottom: var(--_hero-lg-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-lg-margin-block)));
 		}
 	}
@@ -207,13 +210,16 @@ export const heroStyles = css `
 	.hero__body {
 		display: grid;
 		position: relative;
-		background-color: var(--_hero-main-background-color);
 		width: 100%;
 		max-width: var(--_hero-max-width);
 		flex-grow: 1;
 		grid-template-columns: 100%;
 	}
 
+	:host(:not([data-has-media])) .hero__body {
+		background-color: var(--_hero-main-background-color);
+	}
+
 	/* Without media a base-colored panel would be invisible on the base surface;
 	   give it a full border so the rectangle reads. */
 	:host(:not([data-has-media])[main-background="base"]) .hero__body {
@@ -226,9 +232,10 @@ export const heroStyles = css `
 	   (instead of aspect-ratio on the body) keeps growth content-driven
 	   rather than rigidly tied to the width. align-self: start stops the
 	   stretch fit from cancelling the ratio. */
-	:host([data-has-media]:not([main-width="full"])) .hero__body::before {
+	:host([data-has-media]) .hero__body::before {
 		@container (min-width: ${mdMin}) {
 			content: '';
+			height: var(--_hero-media-height);
 			aspect-ratio: var(--_hero-media-aspect-ratio);
 			grid-area: 1 / 1;
 			align-self: start;
@@ -262,7 +269,11 @@ export const heroStyles = css `
 		object-fit: cover !important;
 	}
 
+	/* Two heights: the host fills the media area, and the variable makes the
+	   image inside the host fill the host. Without either one it collapses. */
 	.hero__media ::slotted(nldd-image) {
+		--context-image-height: 100%;
+
 		display: block !important;
 		width: 100% !important;
 		height: 100% !important;
@@ -291,7 +302,9 @@ export const heroStyles = css `
 		align-self: end;
 		justify-self: start;
 		background-color: var(--_hero-main-background-color);
-		width: var(--_hero-main-width);
+		width: fit-content;
+		min-width: min(var(--_hero-main-min-width), 100% - 2 * var(--_hero-main-inset));
+		max-width: min(var(--_hero-main-max-width), 100% - 2 * var(--_hero-main-inset));
 		padding: var(--_hero-main-padding);
 		flex-direction: column;
 		color: var(--_hero-main-content-color);
@@ -299,6 +312,26 @@ export const heroStyles = css `
 
 	:host(:not([data-has-media])) .hero__main {
 		width: 100%;
+		min-width: 0;
+		max-width: none;
+	}
+
+	:host([data-has-media]) .hero__main {
+		margin: var(--_hero-main-inset);
+	}
+
+	:host([data-has-media][data-main-width-length]) .hero__main {
+		@container (min-width: ${mdMin}) {
+			width: var(--_hero-main-width);
+			min-width: 0;
+			max-width: calc(100% - 2 * var(--_hero-main-inset));
+		}
+	}
+
+	:host([data-has-media][main-width="full"]) .hero__main {
+		width: auto;
+		max-width: none;
+		justify-self: stretch;
 	}
 
 	:host([main-position="top-left"]) .hero__main {
@@ -314,6 +347,15 @@ export const heroStyles = css `
 		justify-self: end;
 	}
 
+	:host([main-position="bottom-center"]) .hero__main {
+		justify-self: center;
+	}
+
+	:host([main-position="top-center"]) .hero__main {
+		align-self: start;
+		justify-self: center;
+	}
+
 	:host([main-position="left"]) .hero__main {
 		align-self: stretch;
 	}
@@ -330,32 +372,38 @@ export const heroStyles = css `
 	}
 
 
-	/* # Full-width strip (md+)
-	   With main-width="full" the panel is a full top or bottom strip and the
-	   media stacks on the opposite side instead of sitting behind it. Switch the
-	   body to a column so the two blocks stack: a bottom panel keeps the media on
-	   top, a top panel (column-reverse) drops it below. The media keeps the
-	   overlay's 21/9 strip. Below sm every layout already stacks, so this only
-	   targets md and up. */
+	/* # Overlap (md+) — the media keeps a fixed height; the panel sits in the
+	   row below it, pulled up over it by the overlap size. */
 
 	@container (min-width: ${mdMin}) {
-		:host([data-has-media][main-width="full"]) .hero__body {
-			display: flex;
-			flex-direction: column;
+		:host([data-has-media]:not([layout="contained"])) .hero__body::before {
+			content: none;
+		}
+
+		:host([data-has-media]:not([layout="contained"])) .hero__media {
+			position: relative;
+			width: 100%;
+			height: var(--_hero-media-height);
+			aspect-ratio: var(--_hero-media-aspect-ratio);
+			grid-area: 1 / 1;
+			align-self: start;
 		}
 
-		:host([data-has-media][main-width="full"]:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
-			flex-direction: column-reverse;
+		:host([data-has-media]:not([layout="contained"]):not([media-height], [media-aspect-ratio])) .hero__media {
+			height: var(--_hero-default-media-height);
 		}
 
-		:host([data-has-media][main-width="full"]) .hero__media {
-			position: static;
-			aspect-ratio: var(--_hero-media-aspect-ratio);
+		:host([data-has-media]:not([layout="contained"])) .hero__main {
+			margin-top: calc(-1 * var(--_hero-overlap-size, var(--_hero-default-overlap-size)));
+			margin-bottom: 0;
+			grid-area: 2 / 1;
+			align-self: start;
 		}
 	}
 
 
-	/* # Mobile — stack media over a full-width panel. */
+	/* # Mobile — the media on top, the panel below it, indented and overlapping
+	   it a little. */
 
 	@container (max-width: ${smMax}) {
 		.hero__body {
@@ -363,18 +411,24 @@ export const heroStyles = css `
 			flex-direction: column;
 		}
 
-		:host(:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
-			flex-direction: column-reverse;
-		}
-
 		.hero__media {
 			position: static;
+			width: 100%;
+			height: var(--_hero-media-height);
 			overflow: hidden;
 			aspect-ratio: var(--_hero-media-aspect-ratio);
 		}
 
 		.hero__main {
 			width: 100%;
+			min-width: 0;
+			max-width: none;
+		}
+
+		:host([data-has-media]) .hero__main {
+			margin: calc(-1 * var(--_hero-sm-main-overlap)) var(--_hero-sm-main-inset) 0;
+			width: auto;
+			align-self: stretch;
 		}
 	}
 `;

package/dist/components/layout/page-sections/hero/hero.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAE9F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA8IK,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;;2BAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAuCL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4B5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAmFU,KAAK;;;;;;;;;;;;;;;;;;;0BAmBL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB9B,CAAC"}
+{"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAE9F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqCzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAkIK,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;;;;;2BAU/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6CL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6B5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA2DW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsDN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA8BL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B9B,CAAC"}

package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts

@@ -10,10 +10,12 @@
  * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
  * @attr {string} [width] - Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width.
  * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+ * @attr {boolean} grow - Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow.
  * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
  * @attr {string} [padding-top] - Top padding override.
  * @attr {string} [padding-bottom] - Bottom padding override.
  * @attr {string} [sm-padding-block] - Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}).
+ * @attr {'top'|'center'|'bottom'} [vertical-alignment] - Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other.
  *
  * @slot header - Content above the columns
  * @slot - Left column (1/2), alternative for slot="left"
@@ -37,12 +39,14 @@ declare const NLDDOneHalfOneHalfSection_base: typeof LitElement & (new (...args:
     lgPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
     lgPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
     height?: string;
+    grow: boolean;
     _onSlotChange(e: Event): void;
 });
 export declare class NLDDOneHalfOneHalfSection extends NLDDOneHalfOneHalfSection_base {
     static styles: import("lit").CSSResult;
     /** Width mode: 'full' (removes body max-width) or any CSS length. */
     width: string;
+    verticalAlignment: 'top' | 'center' | 'bottom';
     updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult;
 }

package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;AAMjC,qBACa,yBAA0B,SAAQ,8BAA4B;IAC1E,OAAgB,MAAM,0BAA+B;IAErD,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAetD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gCAAgC,EAAE,yBAAyB,CAAC;KAC5D;CACD"}
+{"version":3,"file":"one-half-one-half-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;AAOjC,qBACa,yBAA0B,SAAQ,8BAA4B;IAC1E,OAAgB,MAAM,0BAA+B;IAErD,qEAAqE;IAErE,KAAK,SAAM;IAGX,iBAAiB,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAS;IAE9C,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAetD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gCAAgC,EAAE,yBAAyB,CAAC;KAC5D;CACD"}

package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.js

@@ -16,10 +16,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
  * @attr {string} [width] - Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width.
  * @attr {string} [height] - Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width).
+ * @attr {boolean} grow - Takes the height the page has left, so the footer sits at the bottom of a short page. Without it, nldd-page lets its last section grow.
  * @attr {string} [padding-block] - Block (top and bottom) padding override (token 0-96; '0' strips it).
  * @attr {string} [padding-top] - Top padding override.
  * @attr {string} [padding-bottom] - Bottom padding override.
  * @attr {string} [sm-padding-block] - Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}).
+ * @attr {'top'|'center'|'bottom'} [vertical-alignment] - Where the shorter column sits next to the longer one ('top' default). Only where the columns stand side by side; stacked, they follow each other.
  *
  * @slot header - Content above the columns
  * @slot - Left column (1/2), alternative for slot="left"
@@ -29,6 +31,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { reflectNonDefault } from '../../../../utilities/reflect-non-default.js';
 import { PageSectionMixin } from '../../../../utilities/page-section-mixin.js';
 import { oneHalfOneHalfSectionStyles } from './one-half-one-half-section.styles.js';
 import { oneHalfOneHalfSectionTemplate } from './one-half-one-half-section.template.js';
@@ -37,6 +40,7 @@ let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSect
         super(...arguments);
         /** Width mode: 'full' (removes body max-width) or any CSS length. */
         this.width = '';
+        this.verticalAlignment = 'top';
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -59,8 +63,11 @@ let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSect
 };
 NLDDOneHalfOneHalfSection.styles = oneHalfOneHalfSectionStyles;
 __decorate([
-    property({ type: String, reflect: true })
+    property({ reflect: true, converter: reflectNonDefault('') })
 ], NLDDOneHalfOneHalfSection.prototype, "width", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'vertical-alignment', converter: reflectNonDefault('top') })
+], NLDDOneHalfOneHalfSection.prototype, "verticalAlignment", void 0);
 NLDDOneHalfOneHalfSection = __decorate([
     customElement('nldd-one-half-one-half-section')
 ], NLDDOneHalfOneHalfSection);