@nldd/design-system 0.8.57 → 0.8.59

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

@@ -0,0 +1,516 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+import { inheritedTextReset, slottedReset } from '../../../../assets/styles/slotted-reset.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const heroStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		container-type: inline-size;
+		/* Block-padding overrides from PageSectionMixin; 'initial' makes the
+		   var() in .hero fall back to the responsive default until the mixin
+		   sets a value inline on the host. */
+		--_padding-top: initial;
+		--_padding-bottom: initial;
+		--_sm-padding-top: initial;
+		--_sm-padding-bottom: initial;
+		--_md-padding-top: initial;
+		--_md-padding-bottom: initial;
+		--_lg-padding-top: initial;
+		--_lg-padding-bottom: initial;
+		--_max-width: var(--semantics-page-sections-body-max-width);
+		/* Rijkshuisstijl shape language: the corner radius derives from the
+		   ribbon width — 1.5X on small containers, 2X on md/lg, and the panel
+		   corner at half the media radius so text clears the curve. Never
+		   animated. */
+		--_corner-radius: calc(var(--semantics-brand-ribbon-sm-width) * 1.5);
+		--_main-width: 50%;
+		--_main-background-color: var(--semantics-categories-accent-reference-background-color);
+		--_main-content-color: var(--semantics-categories-accent-reference-primary-content-color);
+		--_main-padding: var(--primitives-space-16);
+
+		${inheritedTextReset}
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host(:last-child),
+	:host(.is-last) {
+		flex-grow: 1;
+	}
+
+	:host([width="full"]) {
+		--_max-width: none;
+	}
+
+	:host([main-width="2/3"]) {
+		--_main-width: 66.667%;
+	}
+
+	:host([main-width="3/4"]) {
+		--_main-width: 75%;
+	}
+
+	:host([main-width="full"]) {
+		--_main-width: 100%;
+	}
+
+	:host([main-background="base"]) {
+		--_main-background-color: var(--semantics-surfaces-base-background-color);
+		--_main-content-color: var(--semantics-content-color);
+	}
+
+	:host([main-background="lintblauw"]) {
+		--_main-background-color: var(--semantics-categories-lintblauw-reference-background-color);
+		--_main-content-color: var(--semantics-categories-lintblauw-reference-primary-content-color);
+	}
+
+	:host([main-background="donkerblauw"]) {
+		--_main-background-color: var(--semantics-categories-donkerblauw-reference-background-color);
+		--_main-content-color: var(--semantics-categories-donkerblauw-reference-primary-content-color);
+	}
+
+	:host([main-background="hemelblauw"]) {
+		--_main-background-color: var(--semantics-categories-hemelblauw-reference-background-color);
+		--_main-content-color: var(--semantics-categories-hemelblauw-reference-primary-content-color);
+	}
+
+	:host([main-background="lichtblauw"]) {
+		--_main-background-color: var(--semantics-categories-lichtblauw-reference-background-color);
+		--_main-content-color: var(--semantics-categories-lichtblauw-reference-primary-content-color);
+	}
+
+	:host([main-background="paars"]) {
+		--_main-background-color: var(--semantics-categories-paars-reference-background-color);
+		--_main-content-color: var(--semantics-categories-paars-reference-primary-content-color);
+	}
+
+	:host([main-background="violet"]) {
+		--_main-background-color: var(--semantics-categories-violet-reference-background-color);
+		--_main-content-color: var(--semantics-categories-violet-reference-primary-content-color);
+	}
+
+	:host([main-background="robijnrood"]) {
+		--_main-background-color: var(--semantics-categories-robijnrood-reference-background-color);
+		--_main-content-color: var(--semantics-categories-robijnrood-reference-primary-content-color);
+	}
+
+	:host([main-background="roze"]) {
+		--_main-background-color: var(--semantics-categories-roze-reference-background-color);
+		--_main-content-color: var(--semantics-categories-roze-reference-primary-content-color);
+	}
+
+	:host([main-background="rood"]) {
+		--_main-background-color: var(--semantics-categories-rood-reference-background-color);
+		--_main-content-color: var(--semantics-categories-rood-reference-primary-content-color);
+	}
+
+	:host([main-background="oranje"]) {
+		--_main-background-color: var(--semantics-categories-oranje-reference-background-color);
+		--_main-content-color: var(--semantics-categories-oranje-reference-primary-content-color);
+	}
+
+	:host([main-background="donkergeel"]) {
+		--_main-background-color: var(--semantics-categories-donkergeel-reference-background-color);
+		--_main-content-color: var(--semantics-categories-donkergeel-reference-primary-content-color);
+	}
+
+	:host([main-background="geel"]) {
+		--_main-background-color: var(--semantics-categories-geel-reference-background-color);
+		--_main-content-color: var(--semantics-categories-geel-reference-primary-content-color);
+	}
+
+	:host([main-background="donkerbruin"]) {
+		--_main-background-color: var(--semantics-categories-donkerbruin-reference-background-color);
+		--_main-content-color: var(--semantics-categories-donkerbruin-reference-primary-content-color);
+	}
+
+	:host([main-background="bruin"]) {
+		--_main-background-color: var(--semantics-categories-bruin-reference-background-color);
+		--_main-content-color: var(--semantics-categories-bruin-reference-primary-content-color);
+	}
+
+	:host([main-background="donkergroen"]) {
+		--_main-background-color: var(--semantics-categories-donkergroen-reference-background-color);
+		--_main-content-color: var(--semantics-categories-donkergroen-reference-primary-content-color);
+	}
+
+	:host([main-background="groen"]) {
+		--_main-background-color: var(--semantics-categories-groen-reference-background-color);
+		--_main-content-color: var(--semantics-categories-groen-reference-primary-content-color);
+	}
+
+	:host([main-background="mosgroen"]) {
+		--_main-background-color: var(--semantics-categories-mosgroen-reference-background-color);
+		--_main-content-color: var(--semantics-categories-mosgroen-reference-primary-content-color);
+	}
+
+	:host([main-background="mintgroen"]) {
+		--_main-background-color: var(--semantics-categories-mintgroen-reference-background-color);
+		--_main-content-color: var(--semantics-categories-mintgroen-reference-primary-content-color);
+	}
+
+
+	/* # Block */
+
+	.hero {
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		flex-grow: 1;
+		align-items: center;
+
+		/* The responsive overrides live here, not on :host — a container
+		   query inside :host would match an ancestor container, while these
+		   must query the host's own inline size. The derived panel radius is
+		   also declared here (not on :host): a custom property resolves its
+		   var() on the declaring element, so it must sit below the
+		   breakpoint overrides to track them. */
+		--_main-corner-radius: calc(var(--_corner-radius) / 2);
+
+		@container (max-width: ${smMax}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-top: var(--_sm-padding-top, var(--_padding-top, var(--semantics-page-sections-sm-margin-block)));
+			padding-bottom: var(--_sm-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-sm-margin-block)));
+		}
+
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			--_corner-radius: calc(var(--semantics-brand-ribbon-md-width) * 2);
+			--_main-padding: var(--primitives-space-24);
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+			padding-top: var(--_md-padding-top, var(--_padding-top, var(--semantics-page-sections-md-margin-block)));
+			padding-bottom: var(--_md-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-md-margin-block)));
+		}
+
+		@container (min-width: ${lgMin}) {
+			--_corner-radius: calc(var(--semantics-brand-ribbon-lg-width) * 2);
+			--_main-padding: var(--primitives-space-32);
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+			padding-top: var(--_lg-padding-top, var(--_padding-top, var(--semantics-page-sections-lg-margin-block)));
+			padding-bottom: var(--_lg-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-lg-margin-block)));
+		}
+	}
+
+
+	/* # Body
+	   No overflow clipping here: it would zero the grid's automatic content
+	   minimum and stop the hero from growing with the panel. The background
+	   is painted in the panel color so subpixel seams between the media and
+	   the panel (fractional aspect-ratio heights) never show as a light
+	   hairline. */
+
+	.hero__body {
+		display: grid;
+		position: relative;
+		background-color: var(--_main-background-color);
+		width: 100%;
+		max-width: var(--_max-width);
+		flex-grow: 1;
+		grid-template-columns: 100%;
+	}
+
+	/* Without media a base-colored shape would be invisible on the base
+	   surface; border the sides that meet the rounded corner, like
+	   blockquote does. */
+	:host(:not([data-has-media])[main-background="base"][data-media-corner="top-left"]) .hero__body {
+		border-top: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+		border-left: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+	}
+
+	:host(:not([data-has-media])[main-background="base"][data-media-corner="top-right"]) .hero__body {
+		border-top: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+		border-right: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+	}
+
+	:host(:not([data-has-media])[main-background="base"][data-media-corner="bottom-left"]) .hero__body {
+		border-bottom: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+		border-left: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+	}
+
+	:host(:not([data-has-media])[main-background="base"][data-media-corner="bottom-right"]) .hero__body {
+		border-bottom: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+		border-right: var(--primitives-border-width-regular) solid var(--semantics-content-color);
+	}
+
+	/* A ghost cell sets the body's minimum height from the aspect ratio
+	   without forcing it: the panel shares the same grid cell, so a taller
+	   panel grows the row past this floor. Putting the ratio on a ghost
+	   (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 {
+		@container (min-width: ${mdMin}) {
+			content: '';
+			aspect-ratio: 21 / 9;
+			grid-area: 1 / 1;
+			align-self: start;
+		}
+	}
+
+	/* Without media the full-bleed panel would paint square over the
+	   body's rounded corner; clipping is safe here because there is no
+	   aspect-ratio in this mode, so the content minimum still sizes the
+	   body. */
+	:host(:not([data-has-media])) .hero__body {
+		overflow: hidden;
+	}
+
+	:host([data-media-corner="top-left"]) .hero__body {
+		border-top-left-radius: var(--_corner-radius);
+	}
+
+	:host([data-media-corner="top-right"]) .hero__body {
+		border-top-right-radius: var(--_corner-radius);
+	}
+
+	:host([data-media-corner="bottom-left"]) .hero__body {
+		border-bottom-left-radius: var(--_corner-radius);
+	}
+
+	:host([data-media-corner="bottom-right"]) .hero__body {
+		border-bottom-right-radius: var(--_corner-radius);
+	}
+
+	@media (forced-colors: active) {
+		.hero__body {
+			border: var(--primitives-border-width-thin) solid CanvasText;
+		}
+	}
+
+
+	/* # Media */
+
+	.hero__media {
+		position: absolute;
+		inset: 0;
+		overflow: hidden;
+		border-radius: inherit;
+	}
+
+	.hero__media[hidden] {
+		display: none;
+	}
+
+	.hero__media ::slotted(img) {
+		${slottedReset}
+		display: block !important;
+		width: 100% !important;
+		height: 100% !important;
+		object-fit: cover !important;
+	}
+
+	.hero__media ::slotted(nldd-image) {
+		display: block !important;
+		width: 100% !important;
+		height: 100% !important;
+	}
+
+
+	/* # Main */
+
+	.hero__main {
+		/* Cascade the panel color so descendants that key off the parent
+		   background (inherit-filled buttons, badge rings) read this
+		   surface. */
+		--context-parent-background-color: var(--_main-background-color);
+
+		box-sizing: border-box;
+		display: flex;
+		position: relative;
+		grid-area: 1 / 1;
+		align-self: end;
+		justify-self: start;
+		background-color: var(--_main-background-color);
+		width: var(--_main-width);
+		padding: var(--_main-padding);
+		flex-direction: column;
+		color: var(--_main-content-color);
+	}
+
+	:host(:not([data-has-media])) .hero__main {
+		width: 100%;
+	}
+
+	/* Without media the big corner radius sits on the panel itself; give the
+	   corner-adjacent inline side extra room so content clears the curve. */
+	:host(:not([data-has-media]):is([data-media-corner="top-left"], [data-media-corner="bottom-left"])) .hero__main {
+		padding-left: calc(var(--_main-padding) + var(--_corner-radius) / 2);
+	}
+
+	:host(:not([data-has-media]):is([data-media-corner="top-right"], [data-media-corner="bottom-right"])) .hero__main {
+		padding-right: calc(var(--_main-padding) + var(--_corner-radius) / 2);
+	}
+
+	:host([main-position="top-left"]) .hero__main {
+		align-self: start;
+	}
+
+	:host([main-position="top-right"]) .hero__main {
+		align-self: start;
+		justify-self: end;
+	}
+
+	:host([main-position="bottom-right"]) .hero__main {
+		justify-self: end;
+	}
+
+	:host([main-position="left"]) .hero__main {
+		align-self: stretch;
+	}
+
+	:host([main-position="right"]) .hero__main {
+		align-self: stretch;
+		justify-self: end;
+	}
+
+	/* A grown corner panel keeps at least the corner-radius height of media
+	   visible on its media-facing side, so the rounded corner never gets
+	   squeezed out. Keyed off the JS-computed main corner (top-* sits the panel
+	   at the bottom → margin-top; bottom-* → margin-bottom) rather than
+	   main-position, so it still holds when main-position is left to its default
+	   and the attribute isn't reflected. The cornerless left/right panels have
+	   data-main-corner="none" and fall through. Only in the overlay layout (md+). */
+	:host([data-has-media]:is([data-main-corner="top-left"], [data-main-corner="top-right"])) .hero__main {
+		@container (min-width: ${mdMin}) {
+			margin-top: var(--_corner-radius);
+		}
+	}
+
+	:host([data-has-media]:is([data-main-corner="bottom-left"], [data-main-corner="bottom-right"])) .hero__main {
+		@container (min-width: ${mdMin}) {
+			margin-bottom: var(--_corner-radius);
+		}
+	}
+
+	/* The two sides meeting the panel's rounded corner get a step more
+	   padding so content clears the curve. Only md and up — mobile zeroes
+	   the corner. */
+	:host([data-main-corner="top-left"]) .hero__main {
+		border-top-left-radius: var(--_main-corner-radius);
+
+		@container (min-width: ${mdMin}) {
+			padding-top: calc(var(--_main-padding) + var(--primitives-space-8));
+			padding-left: calc(var(--_main-padding) + var(--primitives-space-8));
+		}
+	}
+
+	:host([data-main-corner="top-right"]) .hero__main {
+		border-top-right-radius: var(--_main-corner-radius);
+
+		@container (min-width: ${mdMin}) {
+			padding-top: calc(var(--_main-padding) + var(--primitives-space-8));
+			padding-right: calc(var(--_main-padding) + var(--primitives-space-8));
+		}
+	}
+
+	:host([data-main-corner="bottom-left"]) .hero__main {
+		border-bottom-left-radius: var(--_main-corner-radius);
+
+		@container (min-width: ${mdMin}) {
+			padding-bottom: calc(var(--_main-padding) + var(--primitives-space-8));
+			padding-left: calc(var(--_main-padding) + var(--primitives-space-8));
+		}
+	}
+
+	:host([data-main-corner="bottom-right"]) .hero__main {
+		border-bottom-right-radius: var(--_main-corner-radius);
+
+		@container (min-width: ${mdMin}) {
+			padding-bottom: calc(var(--_main-padding) + var(--primitives-space-8));
+			padding-right: calc(var(--_main-padding) + var(--primitives-space-8));
+		}
+	}
+
+	@media (forced-colors: active) {
+		.hero__main {
+			border: var(--primitives-border-width-thin) solid CanvasText;
+		}
+	}
+
+
+	/* # 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 — the
+	   overlay's absolute media would otherwise hide its own rounded corner under
+	   the panel. 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. The rounded corner still follows
+	   data-media-corner — resolved to the strip's outer edge in hero.ts — so the
+	   per-corner body rules above keep painting it. */
+
+	@container (min-width: ${mdMin}) {
+		:host([data-has-media][main-width="full"]) .hero__body {
+			display: flex;
+			flex-direction: column;
+		}
+
+		: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][main-width="full"]) .hero__media {
+			position: static;
+			aspect-ratio: 21 / 9;
+		}
+	}
+
+
+	/* # Mobile — stack media over a full-width cornerless panel.
+	   Placed after the corner rules so the equal-specificity zero-out
+	   wins on source order. */
+
+	@container (max-width: ${smMax}) {
+		.hero__body {
+			display: flex;
+			flex-direction: column;
+		}
+
+		:host(:is([main-position="top-left"], [main-position="top-right"])) .hero__body {
+			flex-direction: column-reverse;
+		}
+
+		:host([data-media-corner]) .hero__body {
+			border-radius: 0;
+		}
+
+		.hero__media {
+			position: static;
+			overflow: hidden;
+			aspect-ratio: 21 / 9;
+		}
+
+		/* On mobile the rounded corner always sits at the top: a bottom
+		   corner flips to its top counterpart, also when the consumer set
+		   one explicitly. The radius goes on the body so its painted
+		   background rounds along; the media inherits it. */
+		:host(:is([data-media-corner="top-left"], [data-media-corner="bottom-left"])) .hero__body {
+			border-top-left-radius: var(--_corner-radius);
+		}
+
+		:host(:is([data-media-corner="top-right"], [data-media-corner="bottom-right"])) .hero__body {
+			border-top-right-radius: var(--_corner-radius);
+		}
+
+		:host([data-main-corner]) .hero__main {
+			border-radius: 0;
+		}
+
+		.hero__main {
+			width: 100%;
+		}
+	}
+`;
+//# sourceMappingURL=hero.styles.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6BzB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAkJK,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;;;2BAQ/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyDL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqD5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA+EW,KAAK;;;;;;2BAML,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;0BAwBN,KAAK;;;;;;;;;;;;;;;;;;;;;0BAqBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9B,CAAC"}

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

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDHero } from './hero.js';
+export declare function heroTemplate(component: NLDDHero): TemplateResult;
+//# sourceMappingURL=hero.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,wBAAgB,YAAY,CAAC,SAAS,EAAE,QAAQ,GAAG,cAAc,CAehE"}

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

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+export function heroTemplate(component) {
+    return html `
+		<section class="hero">
+			<div class="hero__body">
+				<div class="hero__media"
+					?hidden=${!component._hasMedia}
+				>
+					<slot name="media" @slotchange=${component._onMediaSlotChange}></slot>
+				</div>
+				<div class="hero__main">
+					<slot></slot>
+				</div>
+			</div>
+		</section>
+	`;
+}
+//# sourceMappingURL=hero.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,YAAY,CAAC,SAAmB;IAC/C,OAAO,IAAI,CAAA;;;;eAIG,CAAC,SAAS,CAAC,SAAS;;sCAEG,SAAS,CAAC,kBAAkB;;;;;;;EAOhE,CAAC;AACH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAEhF,wBAAgB,6BAA6B,CAAC,SAAS,EAAE,yBAAyB,GAAG,cAAc,CAsBlG"}
+{"version":3,"file":"one-half-one-half-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAEhF,wBAAgB,6BAA6B,CAAC,SAAS,EAAE,yBAAyB,GAAG,cAAc,CA0BlG"}

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

@@ -3,7 +3,9 @@ export function oneHalfOneHalfSectionTemplate(component) {
     return html `
 		<section class="one-half-one-half-section">
 			<div class="one-half-one-half-section__body">
-				<header class="one-half-one-half-section__header" hidden>
+				<header class="one-half-one-half-section__header"
+					hidden
+				>
 					<slot name="header" @slotchange=${component._onSlotChange}></slot>
 				</header>
 				<div class="one-half-one-half-section__columns">
@@ -15,7 +17,9 @@ export function oneHalfOneHalfSectionTemplate(component) {
 						<slot name="right"></slot>
 					</div>
 				</div>
-				<footer class="one-half-one-half-section__footer" hidden>
+				<footer class="one-half-one-half-section__footer"
+					hidden
+				>
 					<slot name="footer" @slotchange=${component._onSlotChange}></slot>
 				</footer>
 			</div>

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,6BAA6B,CAAC,SAAoC;IACjF,OAAO,IAAI,CAAA;;;;uCAI2B,SAAS,CAAC,aAAa;;;;;;;;;;;;uCAYvB,SAAS,CAAC,aAAa;;;;EAI5D,CAAC;AACH,CAAC"}
+{"version":3,"file":"one-half-one-half-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,6BAA6B,CAAC,SAAoC;IACjF,OAAO,IAAI,CAAA;;;;;;uCAM2B,SAAS,CAAC,aAAa;;;;;;;;;;;;;;uCAcvB,SAAS,CAAC,aAAa;;;;EAI5D,CAAC;AACH,CAAC"}

package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEtF,wBAAgB,gCAAgC,CAAC,SAAS,EAAE,4BAA4B,GAAG,cAAc,CAsBxG"}
+{"version":3,"file":"one-third-two-thirds-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEtF,wBAAgB,gCAAgC,CAAC,SAAS,EAAE,4BAA4B,GAAG,cAAc,CA0BxG"}

package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.js

@@ -3,7 +3,9 @@ export function oneThirdTwoThirdsSectionTemplate(component) {
     return html `
 		<section class="one-third-two-thirds-section">
 			<div class="one-third-two-thirds-section__body">
-				<header class="one-third-two-thirds-section__header" hidden>
+				<header class="one-third-two-thirds-section__header"
+					hidden
+				>
 					<slot name="header" @slotchange=${component._onSlotChange}></slot>
 				</header>
 				<div class="one-third-two-thirds-section__columns">
@@ -15,7 +17,9 @@ export function oneThirdTwoThirdsSectionTemplate(component) {
 						<slot name="right"></slot>
 					</div>
 				</div>
-				<footer class="one-third-two-thirds-section__footer" hidden>
+				<footer class="one-third-two-thirds-section__footer"
+					hidden
+				>
 					<slot name="footer" @slotchange=${component._onSlotChange}></slot>
 				</footer>
 			</div>

package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,gCAAgC,CAAC,SAAuC;IACvF,OAAO,IAAI,CAAA;;;;uCAI2B,SAAS,CAAC,aAAa;;;;;;;;;;;;uCAYvB,SAAS,CAAC,aAAa;;;;EAI5D,CAAC;AACH,CAAC"}
+{"version":3,"file":"one-third-two-thirds-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,gCAAgC,CAAC,SAAuC;IACvF,OAAO,IAAI,CAAA;;;;;;uCAM2B,SAAS,CAAC,aAAa;;;;;;;;;;;;;;uCAcvB,SAAS,CAAC,aAAa;;;;EAI5D,CAAC;AACH,CAAC"}

package/dist/components/layout/page-sections/simple-section/simple-section.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAgBlF"}
+{"version":3,"file":"simple-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAoBlF"}

package/dist/components/layout/page-sections/simple-section/simple-section.template.js

@@ -3,13 +3,17 @@ export function simpleSectionTemplate(component) {
     return html `
 		<section class="simple-section">
 			<div class="simple-section__body">
-				<header class="simple-section__header" hidden>
+				<header class="simple-section__header"
+					hidden
+				>
 					<slot name="header" @slotchange=${component._onSlotChange}></slot>
 				</header>
 				<div class="simple-section__main">
 					<slot></slot>
 				</div>
-				<footer class="simple-section__footer" hidden>
+				<footer class="simple-section__footer"
+					hidden
+				>
 					<slot name="footer" @slotchange=${component._onSlotChange}></slot>
 				</footer>
 			</div>

package/dist/components/layout/page-sections/simple-section/simple-section.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,qBAAqB,CAAC,SAA4B;IACjE,OAAO,IAAI,CAAA;;;;uCAI2B,SAAS,CAAC,aAAa;;;;;;uCAMvB,SAAS,CAAC,aAAa;;;;EAI5D,CAAC;AACH,CAAC"}
+{"version":3,"file":"simple-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,qBAAqB,CAAC,SAA4B;IACjE,OAAO,IAAI,CAAA;;;;;;uCAM2B,SAAS,CAAC,aAAa;;;;;;;;uCAQvB,SAAS,CAAC,aAAa;;;;EAI5D,CAAC;AACH,CAAC"}

package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"two-thirds-one-third-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEtF,wBAAgB,gCAAgC,CAAC,SAAS,EAAE,4BAA4B,GAAG,cAAc,CAsBxG"}
+{"version":3,"file":"two-thirds-one-third-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEtF,wBAAgB,gCAAgC,CAAC,SAAS,EAAE,4BAA4B,GAAG,cAAc,CA0BxG"}