@nldd/design-system 0.8.95 → 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,32 +126,121 @@ 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 --_max-width inline.
+            // handled by CSS; CSS lengths feed --_hero-max-width inline.
             const w = this.width;
-            if (w && w !== 'full' && CSS.supports('max-width', w)) {
-                this.style.setProperty('--_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('--_max-width');
+                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 --_media-aspect-ratio.
+            // 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)) {
-                this.style.setProperty('--_media-aspect-ratio', ratio);
+            if (ratio && takesValue('aspect-ratio', ratio)) {
+                this.style.setProperty('--_hero-media-aspect-ratio', ratio);
             }
             else {
-                this.style.removeProperty('--_media-aspect-ratio');
+                this.style.removeProperty('--_hero-media-aspect-ratio');
             }
         }
     }
+    _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":"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"}

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"}