@nldd/design-system 0.8.46 → 0.8.48

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

@@ -9,10 +9,18 @@ export const fullBleedSectionStyles = css `
 
 	/* # Host */
 
-	/* No own container-type: page-sections read the outer layout-container
-	   (set by nldd-page / nldd-card). @media is the fallback for contexts
-	   without a layout-container. */
 	:host {
+		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);
 
 		display: flex;
@@ -40,28 +48,20 @@ export const fullBleedSectionStyles = css `
 		flex-grow: 1;
 		align-items: center;
 
-		@media (max-width: ${smMax}) {
-			padding-block: var(--semantics-page-sections-sm-margin-block);
-		}
-
-		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			padding-block: var(--semantics-page-sections-md-margin-block);
-		}
 
-		@media (min-width: ${lgMin}) {
-			padding-block: var(--semantics-page-sections-lg-margin-block);
+		@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)));
 		}
 
-		@container layout-container (max-width: ${smMax}) {
-			padding-block: 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)));
 		}
 
-		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			padding-block: var(--semantics-page-sections-md-margin-block);
-		}
-
-		@container layout-container (min-width: ${lgMin}) {
-			padding-block: var(--semantics-page-sections-lg-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)));
 		}
 	}
 
@@ -75,27 +75,15 @@ export const fullBleedSectionStyles = css `
 		flex-direction: column;
 		flex-grow: 1;
 
-		@media (max-width: ${smMax}) {
-			gap: var(--semantics-page-sections-sm-gap);
-		}
-
-		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			gap: var(--semantics-page-sections-md-gap);
-		}
-
-		@media (min-width: ${lgMin}) {
-			gap: var(--semantics-page-sections-lg-gap);
-		}
-
-		@container layout-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"full-bleed-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,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,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAoClB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;uBAe1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkBhD,CAAC"}
+{"version":3,"file":"full-bleed-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,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,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6Cd,KAAK;;;;;2BAKL,KAAK,qBAAqB,KAAK;;;;;2BAK/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

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

@@ -13,12 +13,36 @@
  * @slot right - Right column (1/2)
  * @slot footer - Content below the columns
  *
+ * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
+ * @attr {'inherit'|'light'|'dark'|'inverted'} [scheme] - Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme).
  * @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 {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}).
  */
 import { LitElement } from 'lit';
-export declare class NLDDOneHalfOneHalfSection extends LitElement {
+declare const NLDDOneHalfOneHalfSection_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    background: import("../../../../utilities/page-section-mixin.js").PageSectionBackground;
+    scheme: import("../../../../utilities/page-section-mixin.js").PageSectionScheme;
+    paddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    paddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    paddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    height?: string;
+});
+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;
@@ -30,4 +54,5 @@ declare global {
         'nldd-one-half-one-half-section': NLDDOneHalfOneHalfSection;
     }
 }
+export {};
 //# sourceMappingURL=one-half-one-half-section.d.ts.map

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;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,yBAA0B,SAAQ,UAAU;IACxD,OAAgB,MAAM,0BAA+B;IAErD,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IActD,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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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"}

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

@@ -19,21 +19,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot right - Right column (1/2)
  * @slot footer - Content below the columns
  *
+ * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
+ * @attr {'inherit'|'light'|'dark'|'inverted'} [scheme] - Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme).
  * @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 {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}).
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.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';
-let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends LitElement {
+let NLDDOneHalfOneHalfSection = class NLDDOneHalfOneHalfSection extends PageSectionMixin(LitElement) {
     constructor() {
         super(...arguments);
         /** Width mode: 'full' (removes body max-width) or any CSS length. */
         this.width = '';
     }
     updated(changedProperties) {
+        super.updated(changedProperties);
         if (changedProperties.has('width')) {
             const w = this.width;
             // Sections constrain the body's max-width rather than the host's

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;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AAGjF,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAAlD;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAmBZ,CAAC;IAjBS,OAAO,CAAC,iBAAuC;QACvD,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;;AAtBe,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,CAwBrC"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,2BAA2B,yBA8IvC,CAAC"}
+{"version":3,"file":"one-half-one-half-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,2BAA2B,yBAmHvC,CAAC"}

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

@@ -9,10 +9,18 @@ export const oneHalfOneHalfSectionStyles = css `
 
 	/* # Host */
 
-	/* No own container-type: page-sections read the outer layout-container
-	   (set by nldd-page / nldd-card). @media is the fallback for contexts
-	   without a layout-container. */
 	:host {
+		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);
 
 		display: flex;
@@ -39,34 +47,23 @@ export const oneHalfOneHalfSectionStyles = css `
 		flex-direction: column;
 		align-items: center;
 
-		@media (max-width: ${smMax}) {
-			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			padding-block: var(--semantics-page-sections-sm-margin-block);
-		}
 
-		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			padding-inline: var(--semantics-page-sections-md-margin-inline);
-			padding-block: var(--semantics-page-sections-md-margin-block);
-		}
-
-		@media (min-width: ${lgMin}) {
-			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-			padding-block: var(--semantics-page-sections-lg-margin-block);
-		}
-
-		@container layout-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			padding-block: var(--semantics-page-sections-sm-margin-block);
+			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 layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
-			padding-block: var(--semantics-page-sections-md-margin-block);
+			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 layout-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-			padding-block: var(--semantics-page-sections-lg-margin-block);
+			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)));
 		}
 	}
 
@@ -79,27 +76,15 @@ export const oneHalfOneHalfSectionStyles = css `
 		max-width: var(--_max-width);
 		flex-direction: column;
 
-		@media (max-width: ${smMax}) {
-			gap: var(--semantics-page-sections-sm-gap);
-		}
-
-		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			gap: var(--semantics-page-sections-md-gap);
-		}
-
-		@media (min-width: ${lgMin}) {
-			gap: var(--semantics-page-sections-lg-gap);
-		}
-
-		@container layout-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -108,27 +93,15 @@ export const oneHalfOneHalfSectionStyles = css `
 		display: flex;
 		flex-wrap: wrap;
 
-		@media (max-width: ${smMax}) {
-			gap: var(--semantics-page-sections-sm-gap);
-		}
-
-		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			gap: var(--semantics-page-sections-md-gap);
-		}
-
-		@media (min-width: ${lgMin}) {
-			gap: var(--semantics-page-sections-lg-gap);
-		}
-
-		@container layout-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"one-half-one-half-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,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,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmCvB,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;4CAKgB,KAAK;;;;;4CAKL,KAAK,qBAAqB,KAAK;;;;;4CAK/B,KAAK;;;;;;;;;;;;;;;uBAe1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;uBAS1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkBhD,CAAC"}
+{"version":3,"file":"one-half-one-half-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,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,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4CnB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;2BASL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

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

@@ -13,12 +13,36 @@
  * @slot right - Right column (2/3)
  * @slot footer - Content below the columns
  *
+ * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
+ * @attr {'inherit'|'light'|'dark'|'inverted'} [scheme] - Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme).
  * @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 {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}).
  */
 import { LitElement } from 'lit';
-export declare class NLDDOneThirdTwoThirdsSection extends LitElement {
+declare const NLDDOneThirdTwoThirdsSection_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    background: import("../../../../utilities/page-section-mixin.js").PageSectionBackground;
+    scheme: import("../../../../utilities/page-section-mixin.js").PageSectionScheme;
+    paddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    paddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    paddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    smPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    mdPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    lgPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
+    height?: string;
+});
+export declare class NLDDOneThirdTwoThirdsSection extends NLDDOneThirdTwoThirdsSection_base {
     static styles: import("lit").CSSResult;
     /** Width mode: 'full' (removes body max-width) or any CSS length. */
     width: string;
@@ -30,4 +54,5 @@ declare global {
         'nldd-one-third-two-thirds-section': NLDDOneThirdTwoThirdsSection;
     }
 }
+export {};
 //# sourceMappingURL=one-third-two-thirds-section.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,4BAA6B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAAkC;IAExD,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IActD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mCAAmC,EAAE,4BAA4B,CAAC;KAClE;CACD"}
+{"version":3,"file":"one-third-two-thirds-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;AAMjC,qBACa,4BAA6B,SAAQ,iCAA4B;IAC7E,OAAgB,MAAM,0BAAkC;IAExD,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,mCAAmC,EAAE,4BAA4B,CAAC;KAClE;CACD"}

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

@@ -19,21 +19,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot right - Right column (2/3)
  * @slot footer - Content below the columns
  *
+ * @attr {'inherit'|'base'|'tinted'} [background] - Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface).
+ * @attr {'inherit'|'light'|'dark'|'inverted'} [scheme] - Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme).
  * @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 {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}).
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { PageSectionMixin } from '../../../../utilities/page-section-mixin.js';
 import { oneThirdTwoThirdsSectionStyles } from './one-third-two-thirds-section.styles.js';
 import { oneThirdTwoThirdsSectionTemplate } from './one-third-two-thirds-section.template.js';
-let NLDDOneThirdTwoThirdsSection = class NLDDOneThirdTwoThirdsSection extends LitElement {
+let NLDDOneThirdTwoThirdsSection = class NLDDOneThirdTwoThirdsSection extends PageSectionMixin(LitElement) {
     constructor() {
         super(...arguments);
         /** Width mode: 'full' (removes body max-width) or any CSS length. */
         this.width = '';
     }
     updated(changedProperties) {
+        super.updated(changedProperties);
         if (changedProperties.has('width')) {
             const w = this.width;
             // Sections constrain the body's max-width rather than the host's

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

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,gCAAgC,EAAE,MAAM,4CAA4C,CAAC;AAGvF,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,UAAU;IAArD;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAmBZ,CAAC;IAjBS,OAAO,CAAC,iBAAuC;QACvD,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,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;;AAtBe,mCAAM,GAAG,8BAA8B,AAAjC,CAAkC;AAIxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAC/B;AALC,4BAA4B;IADxC,aAAa,CAAC,mCAAmC,CAAC;GACtC,4BAA4B,CAwBxC"}
+{"version":3,"file":"one-third-two-thirds-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,gCAAgC,EAAE,MAAM,4CAA4C,CAAC;AAGvF,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAAvE;;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,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;;AAvBe,mCAAM,GAAG,8BAA8B,AAAjC,CAAkC;AAIxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAC/B;AALC,4BAA4B;IADxC,aAAa,CAAC,mCAAmC,CAAC;GACtC,4BAA4B,CAyBxC"}

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

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBA8I1C,CAAC"}
+{"version":3,"file":"one-third-two-thirds-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBA4H1C,CAAC"}

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

@@ -9,10 +9,18 @@ export const oneThirdTwoThirdsSectionStyles = css `
 
 	/* # Host */
 
-	/* No own container-type: page-sections read the outer layout-container
-	   (set by nldd-page / nldd-card). @media is the fallback for contexts
-	   without a layout-container. */
 	:host {
+		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);
 
 		display: flex;
@@ -39,34 +47,23 @@ export const oneThirdTwoThirdsSectionStyles = css `
 		flex-direction: column;
 		align-items: center;
 
-		@media (max-width: ${smMax}) {
-			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			padding-block: var(--semantics-page-sections-sm-margin-block);
-		}
-
-		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			padding-inline: var(--semantics-page-sections-md-margin-inline);
-			padding-block: var(--semantics-page-sections-md-margin-block);
-		}
-
-		@media (min-width: ${lgMin}) {
-			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-			padding-block: var(--semantics-page-sections-lg-margin-block);
-		}
 
-		@container layout-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
-			padding-block: var(--semantics-page-sections-sm-margin-block);
+			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 layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
-			padding-block: var(--semantics-page-sections-md-margin-block);
+			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 layout-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
-			padding-block: var(--semantics-page-sections-lg-margin-block);
+			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)));
 		}
 	}
 
@@ -79,27 +76,15 @@ export const oneThirdTwoThirdsSectionStyles = css `
 		max-width: var(--_max-width);
 		flex-direction: column;
 
-		@media (max-width: ${smMax}) {
-			gap: var(--semantics-page-sections-sm-gap);
-		}
-
-		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			gap: var(--semantics-page-sections-md-gap);
-		}
-
-		@media (min-width: ${lgMin}) {
-			gap: var(--semantics-page-sections-lg-gap);
-		}
-
-		@container layout-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}
@@ -108,27 +93,24 @@ export const oneThirdTwoThirdsSectionStyles = css `
 		display: flex;
 		flex-wrap: wrap;
 
-		@media (max-width: ${smMax}) {
-			gap: var(--semantics-page-sections-sm-gap);
-		}
-
-		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			gap: var(--semantics-page-sections-md-gap);
-		}
-
-		@media (min-width: ${lgMin}) {
-			gap: var(--semantics-page-sections-lg-gap);
+		/* Below ~768px the 2/3 column would shrink under 400px and read as
+		   two near-equal columns; stack to a single column instead. nowrap
+		   stops the column-direction wrap container from stretching the
+		   shorter column to fill height. */
+		@container (max-width: 768px) {
+			flex-direction: column;
+			flex-wrap: nowrap;
 		}
 
-		@container layout-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			gap: var(--semantics-page-sections-sm-gap);
 		}
 
-		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			gap: var(--semantics-page-sections-md-gap);
 		}
 
-		@container layout-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			gap: var(--semantics-page-sections-lg-gap);
 		}
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"one-third-two-thirds-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,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,8BAA8B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmC1B,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;4CAKgB,KAAK;;;;;4CAKL,KAAK,qBAAqB,KAAK;;;;;4CAK/B,KAAK;;;;;;;;;;;;;;;uBAe1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;uBAS1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkBhD,CAAC"}
+{"version":3,"file":"one-third-two-thirds-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,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,8BAA8B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4CtB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;2BAkBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}