@nldd/design-system 0.8.95 → 0.8.96

package/dist/components/layout/page-footer/page-footer.styles.js

@@ -10,17 +10,15 @@ export const pageFooterStyles = css `
 		box-sizing: border-box;
 	}
 	:host {
-		--_max-width: var(--semantics-page-sections-body-max-width);
-		/* Official Rijksoverheid lintje color — identical across all
-		   .rijks.app / .overheid.nl sites by visual-identity policy, so it
-		   intentionally lives outside the semantic token system. Local
-		   --_ var keeps the value discoverable in one place. */
-		--_lintje-color: #154273;
-		--context-parent-background-color: var(--components-page-footer-background-color);
+		--_page-footer-max-width: var(--semantics-page-sections-body-max-width);
+		--_page-footer-ribbon-color: var(--semantics-brand-ribbon-color);
+		--_page-footer-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-50));
+		--_page-footer-divider-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-150));
+		--context-parent-background-color: var(--_page-footer-background-color);
 
 		container-type: inline-size;
 		display: block;
-		background-color: var(--components-page-footer-background-color);
+		background-color: var(--_page-footer-background-color);
 		width: 100%;
 	}
 
@@ -33,11 +31,11 @@ export const pageFooterStyles = css `
 	}
 
 	:host([width="full"]) {
-		--_max-width: none;
+		--_page-footer-max-width: none;
 	}
 
 	.page-footer {
-		--_lintje-height: calc(var(--_lintje-width) / 2);
+		--_page-footer-ribbon-height: calc(var(--_page-footer-ribbon-width) / 2);
 
 		box-sizing: border-box;
 		display: flex;
@@ -48,27 +46,27 @@ export const pageFooterStyles = css `
 
 		@container (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			--_lintje-width: var(--primitives-space-40);
+			--_page-footer-ribbon-width: var(--semantics-brand-ribbon-sm-width);
 		}
 
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
-			--_lintje-width: var(--primitives-space-44);
+			--_page-footer-ribbon-width: var(--semantics-brand-ribbon-md-width);
 		}
 
 		@container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-			--_lintje-width: var(--primitives-space-48);
+			--_page-footer-ribbon-width: var(--semantics-brand-ribbon-lg-width);
 		}
 	}
 
-	/* Empty footer = only the lintje. Add top space equal to the lintje height
+	/* Empty footer = only the ribbon. Add top space equal to the ribbon height
 	   (container-type on :host makes a BFC, so this margin stays inside the
 	   transparent host) so a preceding tinted page section doesn't butt right up
-	   against the lintje. */
+	   against the ribbon. */
 	:host([empty]) .page-footer {
-		min-height: var(--_lintje-height);
-		margin-top: var(--_lintje-height);
+		min-height: var(--_page-footer-ribbon-height);
+		margin-top: var(--_page-footer-ribbon-height);
 	}
 
 	.page-footer::after {
@@ -76,9 +74,9 @@ export const pageFooterStyles = css `
 		position: absolute;
 		bottom: 0;
 		left: 50%;
-		background-color: var(--_lintje-color);
-		width: var(--_lintje-width);
-		height: var(--_lintje-height);
+		background-color: var(--_page-footer-ribbon-color);
+		width: var(--_page-footer-ribbon-width);
+		height: var(--_page-footer-ribbon-height);
 		transform: translateX(-50%);
 	}
 
@@ -91,7 +89,7 @@ export const pageFooterStyles = css `
 	.page-footer__body {
 		display: flex;
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_page-footer-max-width);
 		flex-direction: column;
 	}
 
@@ -125,11 +123,11 @@ export const pageFooterStyles = css `
 	}
 
 	.page-footer__body > div:not([hidden]):not(:has(~ div:not([hidden]))) {
-		padding-bottom: calc(var(--primitives-space-16) + var(--_lintje-height));
+		padding-bottom: calc(var(--primitives-space-16) + var(--_page-footer-ribbon-height));
 	}
 
 	:host([single-slot]) .page-footer__body > div:not([hidden]) {
-		padding-top: calc(var(--primitives-space-16) + var(--_lintje-height));
+		padding-top: calc(var(--primitives-space-16) + var(--_page-footer-ribbon-height));
 	}
 
 	.page-footer__breadcrumbs[hidden],
@@ -142,7 +140,7 @@ export const pageFooterStyles = css `
 	.page-footer__divider {
 		margin: 0;
 		border: none;
-		background-color: var(--components-page-footer-divider-color);
+		background-color: var(--_page-footer-divider-color);
 		width: 100%;
 		height: var(--semantics-dividers-thickness);
 	}
@@ -199,6 +197,8 @@ export const pageFooterLegalBarStyles = css `
 `;
 export const pageFooterLegalBarItemStyles = css `
 	:host {
+		--_page-footer-legal-bar-item-color: var(--semantics-content-secondary-color);
+
 		${inheritedTextReset}
 		display: inline-flex;
 	}
@@ -209,12 +209,12 @@ export const pageFooterLegalBarItemStyles = css `
 
 	.page-footer__legal-bar-item {
 		display: inline-flex;
-		color: var(--components-page-footer-legal-bar-item-color);
+		color: var(--_page-footer-legal-bar-item-color);
 		font: var(--primitives-font-body-sm-regular-tight);
 	}
 
 	.page-footer__legal-bar-item-link {
-		color: var(--components-page-footer-legal-bar-item-color);
+		color: var(--_page-footer-legal-bar-item-color);
 		text-decoration: underline;
 	}
 

package/dist/components/layout/page-footer/page-footer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-footer.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,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,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyCR,KAAK;;;;;2BAKL,KAAK,qBAAqB,KAAK;;;;;2BAK/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyCL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;2BAML,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC/B,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2C1C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAA;;IAE3C,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,CAAC"}
+{"version":3,"file":"page-footer.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page-footer/page-footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,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,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAuCR,KAAK;;;;;2BAKL,KAAK,qBAAqB,KAAK;;;;;2BAK/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyCL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;2BAML,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC/B,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2C1C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAAA;;;;IAI3C,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,CAAC"}

package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js

@@ -42,12 +42,12 @@ let NLDDFullBleedSection = class NLDDFullBleedSection extends PageSectionMixin(L
             const w = this.width;
             // Sections constrain the body's max-width rather than the host's
             // outer width. The keyword 'full' is handled by CSS (sets
-            // --_max-width: none); CSS lengths feed --_max-width here.
+            // --_full-bleed-section-max-width: none); CSS lengths feed --_full-bleed-section-max-width here.
             if (w && w !== 'full' && CSS.supports('max-width', w)) {
-                this.style.setProperty('--_max-width', w);
+                this.style.setProperty('--_full-bleed-section-max-width', w);
             }
             else {
-                this.style.removeProperty('--_max-width');
+                this.style.removeProperty('--_full-bleed-section-max-width');
             }
         }
     }

package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"full-bleed-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAA/D;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAoBZ,CAAC;IAlBS,OAAO,CAAC,iBAAuC;QACvD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;YAC3C,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,wBAAwB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;;AAvBe,2BAAM,GAAG,sBAAsB,AAAzB,CAA0B;AAIhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC/B;AALC,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAyBhC"}
+{"version":3,"file":"full-bleed-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAA/D;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAoBZ,CAAC;IAlBS,OAAO,CAAC,iBAAuC;QACvD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,iGAAiG;YACjG,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,CAAC,CAAC,CAAC;YAC9D,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iCAAiC,CAAC,CAAC;YAC9D,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,wBAAwB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;;AAvBe,2BAAM,GAAG,sBAAsB,AAAzB,CAA0B;AAIhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC/B;AALC,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAyBhC"}

package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js

@@ -16,15 +16,15 @@ export const fullBleedSectionStyles = css `
 		container-type: inline-size;
 		/* Block-padding overrides from PageSectionMixin; 'initial' lets the
 		   block fall back to the responsive default until the mixin sets one. */
-		--_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);
+		--_full-bleed-section-padding-top: initial;
+		--_full-bleed-section-padding-bottom: initial;
+		--_full-bleed-section-sm-padding-top: initial;
+		--_full-bleed-section-sm-padding-bottom: initial;
+		--_full-bleed-section-md-padding-top: initial;
+		--_full-bleed-section-md-padding-bottom: initial;
+		--_full-bleed-section-lg-padding-top: initial;
+		--_full-bleed-section-lg-padding-bottom: initial;
+		--_full-bleed-section-max-width: var(--semantics-page-sections-body-max-width);
 
 		display: flex;
 		width: 100%;
@@ -37,7 +37,7 @@ export const fullBleedSectionStyles = css `
 	}
 
 	:host([width="full"]) {
-		--_max-width: none;
+		--_full-bleed-section-max-width: none;
 	}
 
 
@@ -53,18 +53,18 @@ export const fullBleedSectionStyles = css `
 
 
 		@container (max-width: ${smMax}) {
-			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)));
+			padding-top: var(--_full-bleed-section-sm-padding-top, var(--_full-bleed-section-padding-top, var(--semantics-page-sections-sm-margin-block)));
+			padding-bottom: var(--_full-bleed-section-sm-padding-bottom, var(--_full-bleed-section-padding-bottom, var(--semantics-page-sections-sm-margin-block)));
 		}
 
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			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)));
+			padding-top: var(--_full-bleed-section-md-padding-top, var(--_full-bleed-section-padding-top, var(--semantics-page-sections-md-margin-block)));
+			padding-bottom: var(--_full-bleed-section-md-padding-bottom, var(--_full-bleed-section-padding-bottom, var(--semantics-page-sections-md-margin-block)));
 		}
 
 		@container (min-width: ${lgMin}) {
-			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)));
+			padding-top: var(--_full-bleed-section-lg-padding-top, var(--_full-bleed-section-padding-top, var(--semantics-page-sections-lg-margin-block)));
+			padding-bottom: var(--_full-bleed-section-lg-padding-bottom, var(--_full-bleed-section-padding-bottom, var(--semantics-page-sections-lg-margin-block)));
 		}
 	}
 
@@ -74,7 +74,7 @@ export const fullBleedSectionStyles = css `
 	.full-bleed-section__body {
 		display: flex;
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_full-bleed-section-max-width);
 		flex-direction: column;
 		flex-grow: 1;
 

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

@@ -85,25 +85,25 @@ let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
         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);
+                this.style.setProperty('--_hero-max-width', w);
             }
             else {
-                this.style.removeProperty('--_max-width');
+                this.style.removeProperty('--_hero-max-width');
             }
         }
         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);
+                this.style.setProperty('--_hero-media-aspect-ratio', ratio);
             }
             else {
-                this.style.removeProperty('--_media-aspect-ratio');
+                this.style.removeProperty('--_hero-media-aspect-ratio');
             }
         }
     }

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;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;AAc3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAAnD;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;QAGX,mBAAc,GAAuB,QAAQ,CAAC;QAG9C,cAAS,GAAkB,KAAK,CAAC;QAGjC,iBAAY,GAAqB,aAAa,CAAC;QAE/C;yEACiE;QAEjE,qBAAgB,GAAG,EAAE,CAAC;QAEtB;;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;IA+CvB,CAAC;IA7CA,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,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,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,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,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,GAAG,CAAC,QAAQ,CAAC,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;gBAClD,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;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;;AAlFe,eAAM,GAAG,UAAU,AAAb,CAAc;AAIpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC/B;AAGX;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,KAAK,CAAC,EAAE,CAAC;2CACxE;AAGjC;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,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;kDACrD;AAMtB;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;AArCV,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoFpB"}

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

@@ -18,20 +18,20 @@ export const heroStyles = css `
 		/* 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);
-		--_media-aspect-ratio: 21 / 9;
-		--_main-width: 50%;
-		--_main-background-color: var(--semantics-categories-accent-reference-background-color);
-		--_main-content-color: var(--semantics-categories-accent-reference-content-color);
-		--_main-padding: var(--primitives-space-16);
+		--_hero-padding-top: initial;
+		--_hero-padding-bottom: initial;
+		--_hero-sm-padding-top: initial;
+		--_hero-sm-padding-bottom: initial;
+		--_hero-md-padding-top: initial;
+		--_hero-md-padding-bottom: initial;
+		--_hero-lg-padding-top: initial;
+		--_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-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);
 
 		${inheritedTextReset}
 		display: flex;
@@ -50,114 +50,114 @@ export const heroStyles = css `
 	}
 
 	:host([width="full"]) {
-		--_max-width: none;
+		--_hero-max-width: none;
 	}
 
 	:host([main-width="2/3"]) {
-		--_main-width: 66.667%;
+		--_hero-main-width: 66.667%;
 	}
 
 	:host([main-width="3/4"]) {
-		--_main-width: 75%;
+		--_hero-main-width: 75%;
 	}
 
 	:host([main-width="full"]) {
-		--_main-width: 100%;
+		--_hero-main-width: 100%;
 	}
 
 	:host([main-background="base"]) {
-		--_main-background-color: var(--semantics-surfaces-base-background-color);
-		--_main-content-color: var(--semantics-content-color);
+		--_hero-main-background-color: var(--semantics-surfaces-base-background-color);
+		--_hero-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-content-color);
+		--_hero-main-background-color: var(--semantics-categories-lintblauw-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-lintblauw-reference-content-color);
 	}
 
 	:host([main-background="donkerblauw"]) {
-		--_main-background-color: var(--semantics-categories-donkerblauw-reference-background-color);
-		--_main-content-color: var(--semantics-categories-donkerblauw-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-donkerblauw-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-donkerblauw-reference-content-color);
 	}
 
 	:host([main-background="hemelblauw"]) {
-		--_main-background-color: var(--semantics-categories-hemelblauw-reference-background-color);
-		--_main-content-color: var(--semantics-categories-hemelblauw-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-hemelblauw-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-hemelblauw-reference-content-color);
 	}
 
 	:host([main-background="lichtblauw"]) {
-		--_main-background-color: var(--semantics-categories-lichtblauw-reference-background-color);
-		--_main-content-color: var(--semantics-categories-lichtblauw-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-lichtblauw-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-lichtblauw-reference-content-color);
 	}
 
 	:host([main-background="paars"]) {
-		--_main-background-color: var(--semantics-categories-paars-reference-background-color);
-		--_main-content-color: var(--semantics-categories-paars-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-paars-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-paars-reference-content-color);
 	}
 
 	:host([main-background="violet"]) {
-		--_main-background-color: var(--semantics-categories-violet-reference-background-color);
-		--_main-content-color: var(--semantics-categories-violet-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-violet-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-violet-reference-content-color);
 	}
 
 	:host([main-background="robijnrood"]) {
-		--_main-background-color: var(--semantics-categories-robijnrood-reference-background-color);
-		--_main-content-color: var(--semantics-categories-robijnrood-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-robijnrood-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-robijnrood-reference-content-color);
 	}
 
 	:host([main-background="roze"]) {
-		--_main-background-color: var(--semantics-categories-roze-reference-background-color);
-		--_main-content-color: var(--semantics-categories-roze-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-roze-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-roze-reference-content-color);
 	}
 
 	:host([main-background="rood"]) {
-		--_main-background-color: var(--semantics-categories-rood-reference-background-color);
-		--_main-content-color: var(--semantics-categories-rood-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-rood-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-rood-reference-content-color);
 	}
 
 	:host([main-background="oranje"]) {
-		--_main-background-color: var(--semantics-categories-oranje-reference-background-color);
-		--_main-content-color: var(--semantics-categories-oranje-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-oranje-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-oranje-reference-content-color);
 	}
 
 	:host([main-background="donkergeel"]) {
-		--_main-background-color: var(--semantics-categories-donkergeel-reference-background-color);
-		--_main-content-color: var(--semantics-categories-donkergeel-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-donkergeel-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-donkergeel-reference-content-color);
 	}
 
 	:host([main-background="geel"]) {
-		--_main-background-color: var(--semantics-categories-geel-reference-background-color);
-		--_main-content-color: var(--semantics-categories-geel-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-geel-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-geel-reference-content-color);
 	}
 
 	:host([main-background="donkerbruin"]) {
-		--_main-background-color: var(--semantics-categories-donkerbruin-reference-background-color);
-		--_main-content-color: var(--semantics-categories-donkerbruin-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-donkerbruin-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-donkerbruin-reference-content-color);
 	}
 
 	:host([main-background="bruin"]) {
-		--_main-background-color: var(--semantics-categories-bruin-reference-background-color);
-		--_main-content-color: var(--semantics-categories-bruin-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-bruin-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-bruin-reference-content-color);
 	}
 
 	:host([main-background="donkergroen"]) {
-		--_main-background-color: var(--semantics-categories-donkergroen-reference-background-color);
-		--_main-content-color: var(--semantics-categories-donkergroen-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-donkergroen-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-donkergroen-reference-content-color);
 	}
 
 	:host([main-background="groen"]) {
-		--_main-background-color: var(--semantics-categories-groen-reference-background-color);
-		--_main-content-color: var(--semantics-categories-groen-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-groen-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-groen-reference-content-color);
 	}
 
 	:host([main-background="mosgroen"]) {
-		--_main-background-color: var(--semantics-categories-mosgroen-reference-background-color);
-		--_main-content-color: var(--semantics-categories-mosgroen-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-mosgroen-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-mosgroen-reference-content-color);
 	}
 
 	:host([main-background="mintgroen"]) {
-		--_main-background-color: var(--semantics-categories-mintgroen-reference-background-color);
-		--_main-content-color: var(--semantics-categories-mintgroen-reference-content-color);
+		--_hero-main-background-color: var(--semantics-categories-mintgroen-reference-background-color);
+		--_hero-main-content-color: var(--semantics-categories-mintgroen-reference-content-color);
 	}
 
 
@@ -177,22 +177,22 @@ export const heroStyles = css `
 
 		@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)));
+			padding-top: var(--_hero-sm-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-sm-margin-block)));
+			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}) {
-			--_main-padding: var(--primitives-space-24);
+			--_hero-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)));
+			padding-top: var(--_hero-md-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-md-margin-block)));
+			padding-bottom: var(--_hero-md-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-md-margin-block)));
 		}
 
 		@container (min-width: ${lgMin}) {
-			--_main-padding: var(--primitives-space-32);
+			--_hero-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)));
+			padding-top: var(--_hero-lg-padding-top, var(--_hero-padding-top, var(--semantics-page-sections-lg-margin-block)));
+			padding-bottom: var(--_hero-lg-padding-bottom, var(--_hero-padding-bottom, var(--semantics-page-sections-lg-margin-block)));
 		}
 	}
 
@@ -207,9 +207,9 @@ export const heroStyles = css `
 	.hero__body {
 		display: grid;
 		position: relative;
-		background-color: var(--_main-background-color);
+		background-color: var(--_hero-main-background-color);
 		width: 100%;
-		max-width: var(--_max-width);
+		max-width: var(--_hero-max-width);
 		flex-grow: 1;
 		grid-template-columns: 100%;
 	}
@@ -229,7 +229,7 @@ export const heroStyles = css `
 	:host([data-has-media]:not([main-width="full"])) .hero__body::before {
 		@container (min-width: ${mdMin}) {
 			content: '';
-			aspect-ratio: var(--_media-aspect-ratio);
+			aspect-ratio: var(--_hero-media-aspect-ratio);
 			grid-area: 1 / 1;
 			align-self: start;
 		}
@@ -282,7 +282,7 @@ export const heroStyles = css `
 		/* 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);
+		--context-parent-background-color: var(--_hero-main-background-color);
 
 		box-sizing: border-box;
 		display: flex;
@@ -290,11 +290,11 @@ export const heroStyles = css `
 		grid-area: 1 / 1;
 		align-self: end;
 		justify-self: start;
-		background-color: var(--_main-background-color);
-		width: var(--_main-width);
-		padding: var(--_main-padding);
+		background-color: var(--_hero-main-background-color);
+		width: var(--_hero-main-width);
+		padding: var(--_hero-main-padding);
 		flex-direction: column;
-		color: var(--_main-content-color);
+		color: var(--_hero-main-content-color);
 	}
 
 	:host(:not([data-has-media])) .hero__main {
@@ -350,7 +350,7 @@ export const heroStyles = css `
 
 		:host([data-has-media][main-width="full"]) .hero__media {
 			position: static;
-			aspect-ratio: var(--_media-aspect-ratio);
+			aspect-ratio: var(--_hero-media-aspect-ratio);
 		}
 	}
 
@@ -370,7 +370,7 @@ export const heroStyles = css `
 		.hero__media {
 			position: static;
 			overflow: hidden;
-			aspect-ratio: var(--_media-aspect-ratio);
+			aspect-ratio: var(--_hero-media-aspect-ratio);
 		}
 
 		.hero__main {

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

@@ -44,12 +44,12 @@ let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSect
             const w = this.width;
             // Sections constrain the body's max-width rather than the host's
             // outer width. The keyword 'full' is handled by CSS (sets
-            // --_max-width: none); CSS lengths feed --_max-width here.
+            // --_one-half-one-half-section-max-width: none); CSS lengths feed --_one-half-one-half-section-max-width here.
             if (w && w !== 'full' && CSS.supports('max-width', w)) {
-                this.style.setProperty('--_max-width', w);
+                this.style.setProperty('--_one-half-one-half-section-max-width', w);
             }
             else {
-                this.style.removeProperty('--_max-width');
+                this.style.removeProperty('--_one-half-one-half-section-max-width');
             }
         }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.js","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;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AAGjF,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAApE;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAoBZ,CAAC;IAlBS,OAAO,CAAC,iBAAuC;QACvD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;YAC3C,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,6BAA6B,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;;AAvBe,gCAAM,GAAG,2BAA2B,AAA9B,CAA+B;AAIrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAC/B;AALC,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CAyBrC"}
+{"version":3,"file":"one-half-one-half-section.js","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;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AAGjF,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAApE;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAoBZ,CAAC;IAlBS,OAAO,CAAC,iBAAuC;QACvD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,iEAAiE;YACjE,0DAA0D;YAC1D,+GAA+G;YAC/G,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAC;YACrE,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,wCAAwC,CAAC,CAAC;YACrE,CAAC;QACF,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,6BAA6B,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;;AAvBe,gCAAM,GAAG,2BAA2B,AAA9B,CAA+B;AAIrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAC/B;AALC,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CAyBrC"}