@nldd/design-system 0.8.45 → 0.8.47

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

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

@@ -0,0 +1,226 @@
+import { Directive, type ElementPart, type PartInfo } from 'lit/directive.js';
+/**
+ * Shared Storybook controls for the PageSectionMixin surface API
+ * (background, scheme, width, height and the 12 block-padding overrides).
+ * Spread into a section story's `argTypes` / `args`, and bind onto the host
+ * element in `render` with the `pageSectionAttrs` directive.
+ */
+export declare const pageSectionArgTypes: {
+    background: {
+        control: {
+            type: string;
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    scheme: {
+        control: {
+            type: string;
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    width: {
+        control: string;
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    height: {
+        control: string;
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'padding-block': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'padding-top': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'padding-bottom': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'sm-padding-block': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'sm-padding-top': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'sm-padding-bottom': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'md-padding-block': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'md-padding-top': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'md-padding-bottom': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'lg-padding-block': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'lg-padding-top': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    'lg-padding-bottom': {
+        control: {
+            type: "select";
+        };
+        options: string[];
+        description: string;
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+};
+export declare const pageSectionArgs: {
+    background: string;
+    scheme: string;
+    width: string;
+    height: string;
+    'padding-block': string;
+    'padding-top': string;
+    'padding-bottom': string;
+    'sm-padding-block': string;
+    'sm-padding-top': string;
+    'sm-padding-bottom': string;
+    'md-padding-block': string;
+    'md-padding-top': string;
+    'md-padding-bottom': string;
+    'lg-padding-block': string;
+    'lg-padding-top': string;
+    'lg-padding-bottom': string;
+};
+declare class PageSectionAttrsDirective extends Directive {
+    constructor(partInfo: PartInfo);
+    render(_args: Record<string, unknown>): symbol;
+    update(part: ElementPart, [args]: [Record<string, unknown>]): symbol;
+}
+/**
+ * Element-part directive that mirrors the PageSectionMixin args onto a section
+ * host: `<nldd-simple-section ${pageSectionAttrs(args)}>`. Empty/non-string
+ * values remove the attribute so unset controls fall back to the defaults.
+ */
+export declare const pageSectionAttrs: (_args: Record<string, unknown>) => import("lit-html/directive.js").DirectiveResult<typeof PageSectionAttrsDirective>;
+export {};
+//# sourceMappingURL=page-section-controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-section-controls.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-sections/page-section-controls.ts"],"names":[],"mappings":"AACA,OAAO,EACN,SAAS,EAGT,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,MAAM,kBAAkB,CAAC;AAc1B;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC/B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAIF,cAAM,yBAA0B,SAAQ,SAAS;gBACpC,QAAQ,EAAE,QAAQ;IAO9B,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAI5B,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAYpE;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,uHAAuC,CAAC"}

package/dist/components/layout/page-sections/page-section-controls.js

@@ -0,0 +1,104 @@
+import { nothing } from 'lit';
+import { Directive, directive, PartType, } from 'lit/directive.js';
+const PADDING_OPTIONS = [
+    '', '0', '2', '4', '6', '8', '10', '12', '16', '20', '24',
+    '28', '32', '40', '44', '48', '56', '64', '80', '96',
+];
+const paddingControl = (description) => ({
+    control: { type: 'select' },
+    options: PADDING_OPTIONS,
+    description,
+    table: { defaultValue: { summary: '' } },
+});
+/**
+ * Shared Storybook controls for the PageSectionMixin surface API
+ * (background, scheme, width, height and the 12 block-padding overrides).
+ * Spread into a section story's `argTypes` / `args`, and bind onto the host
+ * element in `render` with the `pageSectionAttrs` directive.
+ */
+export const pageSectionArgTypes = {
+    background: {
+        control: { type: 'select' },
+        options: ['inherit', 'base', 'tinted'],
+        description: 'Oppervlak: "inherit" (transparant) toont het oppervlak van de ouder; "base"/"tinted" tekenen een oppervlak en cascaden het naar afstammelingen',
+        table: { defaultValue: { summary: 'inherit' } },
+    },
+    scheme: {
+        control: { type: 'select' },
+        options: ['inherit', 'light', 'dark', 'inverted'],
+        description: 'Kleurschema: "inherit" erft; "inverted" is het tegenovergestelde van het omliggende paginaschema',
+        table: { defaultValue: { summary: 'inherit' } },
+    },
+    width: {
+        control: 'text',
+        description: 'Body max-width: "full" verwijdert de constraint, of een CSS length (bv. "480px") overschrijft de default max-width',
+        table: { defaultValue: { summary: '' } },
+    },
+    height: {
+        control: 'text',
+        description: 'Minimale sectiehoogte (CSS length, bv. "400px", "100dvh") — net als width op de body-max-width, mapt height op min-height van de host',
+        table: { defaultValue: { summary: '' } },
+    },
+    'padding-block': paddingControl('Block (boven+onder) padding-override (token 0–96; "0" verwijdert de padding)'),
+    'padding-top': paddingControl('Override van alleen de bovenpadding'),
+    'padding-bottom': paddingControl('Override van alleen de onderpadding'),
+    'sm-padding-block': paddingControl('Block-padding op sm (≤640px)'),
+    'sm-padding-top': paddingControl('Bovenpadding op sm (≤640px)'),
+    'sm-padding-bottom': paddingControl('Onderpadding op sm (≤640px)'),
+    'md-padding-block': paddingControl('Block-padding op md (641–1007px)'),
+    'md-padding-top': paddingControl('Bovenpadding op md (641–1007px)'),
+    'md-padding-bottom': paddingControl('Onderpadding op md (641–1007px)'),
+    'lg-padding-block': paddingControl('Block-padding op lg (≥1008px)'),
+    'lg-padding-top': paddingControl('Bovenpadding op lg (≥1008px)'),
+    'lg-padding-bottom': paddingControl('Onderpadding op lg (≥1008px)'),
+};
+export const pageSectionArgs = {
+    background: 'inherit',
+    scheme: 'inherit',
+    width: '',
+    height: '',
+    'padding-block': '',
+    'padding-top': '',
+    'padding-bottom': '',
+    'sm-padding-block': '',
+    'sm-padding-top': '',
+    'sm-padding-bottom': '',
+    'md-padding-block': '',
+    'md-padding-top': '',
+    'md-padding-bottom': '',
+    'lg-padding-block': '',
+    'lg-padding-top': '',
+    'lg-padding-bottom': '',
+};
+const PAGE_SECTION_ATTR_KEYS = Object.keys(pageSectionArgs);
+class PageSectionAttrsDirective extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        if (partInfo.type !== PartType.ELEMENT) {
+            throw new Error('pageSectionAttrs must be used on an element');
+        }
+    }
+    render(_args) {
+        return nothing;
+    }
+    update(part, [args]) {
+        const el = part.element;
+        for (const key of PAGE_SECTION_ATTR_KEYS) {
+            const value = args[key];
+            if (typeof value === 'string' && value !== '') {
+                el.setAttribute(key, value);
+            }
+            else {
+                el.removeAttribute(key);
+            }
+        }
+        return nothing;
+    }
+}
+/**
+ * Element-part directive that mirrors the PageSectionMixin args onto a section
+ * host: `<nldd-simple-section ${pageSectionAttrs(args)}>`. Empty/non-string
+ * values remove the attribute so unset controls fall back to the defaults.
+ */
+export const pageSectionAttrs = directive(PageSectionAttrsDirective);
+//# sourceMappingURL=page-section-controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-section-controls.js","sourceRoot":"","sources":["../../../../src/components/layout/page-sections/page-section-controls.ts"],"names":[],"mappings":"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"}

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

@@ -11,12 +11,36 @@
  * @slot - Main content
  * @slot footer - Content below the main content
  *
+ * @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 NLDDSimpleSection extends LitElement {
+declare const NLDDSimpleSection_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 NLDDSimpleSection extends NLDDSimpleSection_base {
     static styles: import("lit").CSSResult;
     /** Width mode: 'full' (removes body max-width) or any CSS length. */
     width: string;
@@ -29,4 +53,5 @@ declare global {
         'nldd-simple-section': NLDDSimpleSection;
     }
 }
+export {};
 //# sourceMappingURL=simple-section.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"simple-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,iBAAkB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAuB;IAE7C,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAc/D,aAAa,CAAC,CAAC,EAAE,KAAK;IAMb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}
+{"version":3,"file":"simple-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;AAMjC,qBACa,iBAAkB,SAAQ,sBAA4B;IAClE,OAAgB,MAAM,0BAAuB;IAE7C,qEAAqE;IAErE,KAAK,SAAM;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAe/D,aAAa,CAAC,CAAC,EAAE,KAAK;IAMb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}

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

@@ -17,21 +17,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot - Main content
  * @slot footer - Content below the main content
  *
+ * @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 { simpleSectionStyles } from './simple-section.styles.js';
 import { simpleSectionTemplate } from './simple-section.template.js';
-let NLDDSimpleSection = class NLDDSimpleSection extends LitElement {
+let NLDDSimpleSection = class NLDDSimpleSection 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/simple-section/simple-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAG9D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IAyBZ,CAAC;IAvBS,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;IAED,aAAa,CAAC,CAAQ;QACrB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,aAA4B,CAAC;QAClD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;IACvD,CAAC;IAEQ,MAAM;QACd,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;;AA5Be,wBAAM,GAAG,mBAAmB,AAAtB,CAAuB;AAI7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC/B;AALC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8B7B"}
+{"version":3,"file":"simple-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;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,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAG9D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAA5D;;QAGN,qEAAqE;QAErE,UAAK,GAAG,EAAE,CAAC;IA0BZ,CAAC;IAxBS,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;IAED,aAAa,CAAC,CAAQ;QACrB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,aAA4B,CAAC;QAClD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;IACvD,CAAC;IAEQ,MAAM;QACd,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;;AA7Be,wBAAM,GAAG,mBAAmB,AAAtB,CAAuB;AAI7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC/B;AALC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA+B7B"}

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

@@ -1 +1 @@
-{"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,yBAwH/B,CAAC"}
+{"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,yBA0G/B,CAAC"}