feat(PageHeader/PageFooter/PageBody): pas dsn.page.max-inline-size toe op inner containers

Achtergronden blijven full-bleed; __inner containers beperken de
inhoudsbreedte via var(--dsn-page-max-inline-size). Templates kunnen
full-width gedrag inschakelen via --dsn-page-max-inline-size: none op
PageLayout.

Closes #171

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: jeffreylauwers

packages/components-html/src/page-body/page-body.css

@@ -27,4 +27,6 @@
 
 .dsn-page-body__inner {
   padding-inline: var(--dsn-page-body-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
 }

packages/components-html/src/page-footer/page-footer.css

@@ -38,6 +38,8 @@
 .dsn-page-footer__inner {
   padding-block: var(--dsn-page-footer-padding-block);
   padding-inline: var(--dsn-page-footer-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
 }
 
 /* =============================================================================

packages/components-html/src/page-header/page-header.css

@@ -85,13 +85,15 @@
 .dsn-page-header__masthead {
   background-color: var(--dsn-page-header-masthead-background-color);
   padding-block: var(--dsn-page-header-masthead-padding-block);
-  padding-inline: var(--dsn-page-header-masthead-padding-inline);
 }
 
 .dsn-page-header__masthead-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-inline: var(--dsn-page-header-masthead-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
 }
 
 /* =============================================================================
@@ -133,13 +135,18 @@
    logo (inline-start) en servicemenu + zoekknop (inline-end).
    ============================================================================= */
 
+.dsn-page-header__compact-layout {
+  background-color: var(--dsn-page-header-compact-background-color);
+}
+
 .dsn-page-header__compact-inner {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  background-color: var(--dsn-page-header-compact-background-color);
   padding-block: var(--dsn-page-header-compact-padding-block);
   padding-inline: var(--dsn-page-header-compact-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
 }
 
 /* Logo in compact context links uitlijnen — niet centreren zoals in de mobile bar.
@@ -168,7 +175,6 @@
 
 .dsn-page-header__navbar {
   background-color: var(--dsn-page-header-navbar-background-color);
-  padding-inline: var(--dsn-page-header-navbar-padding-inline);
 
   /* MenuLink-items in de navbar krijgen een grotere min-block-size en ruimere
      padding-inline. Door de tokens te overschrijven op de container werkt de
@@ -177,6 +183,12 @@
   --dsn-menu-item-padding-inline: var(--dsn-space-inline-xl);
 }
 
+.dsn-page-header__navbar-inner {
+  padding-inline: var(--dsn-page-header-navbar-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+}
+
 /* =============================================================================
    Sticky gedrag
    ============================================================================= */
@@ -226,6 +238,8 @@
   align-items: center;
   padding-block: var(--dsn-page-header-padding-block);
   padding-inline: var(--dsn-page-header-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
 }
 
 /* =============================================================================
@@ -281,13 +295,15 @@
 .dsn-page-header__search-panel {
   background-color: var(--dsn-page-header-search-panel-background-color);
   padding-block: var(--dsn-page-header-search-panel-padding-block);
-  padding-inline: var(--dsn-page-header-search-panel-padding-inline);
 }
 
 .dsn-page-header__search-inner {
   display: flex;
   gap: var(--dsn-space-inline-md);
   align-items: flex-start;
+  padding-inline: var(--dsn-page-header-search-panel-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
 }
 
 /* SearchInput wrapper vult beschikbare ruimte volledig — overschrijft de standaard

packages/storybook/src/templates/BasePage.stories.tsx

@@ -311,3 +311,40 @@ export const Inverse: Story = {
     </Body>
   ),
 };
+
+export const FullWidth: Story = {
+  name: 'Base Page: Full Width',
+  render: () => (
+    <Body>
+      <SkipLink href="#main-content" />
+      <PageLayout
+        style={{ '--dsn-page-max-inline-size': 'none' } as React.CSSProperties}
+      >
+        <PageHeader
+          logoSlot={logoSlot}
+          primaryNavigation={<PrimaryNavigation />}
+          primaryNavigationLarge={primaryNavigationLarge}
+          secondaryNavigation={secondaryNavigation}
+          secondaryNavigationLarge={secondaryNavigationLarge}
+          searchSlot={searchSlot}
+        />
+        <PageBody>
+          <main id="main-content" tabIndex={-1} style={mainStyle}>
+            <Heading level={1}>Paginatitel</Heading>
+            <Paragraph>
+              Full-width variant: <code>--dsn-page-max-inline-size</code> is
+              ingesteld op <code>none</code> op de PageLayout. Header, body en
+              footer nemen de volledige viewport-breedte in.
+            </Paragraph>
+          </main>
+        </PageBody>
+        <PageFooter
+          slot1={footerSlot1}
+          slot2={footerSlot2}
+          slot3={footerSlot3}
+          slot4={footerSlot4}
+        />
+      </PageLayout>
+    </Body>
+  ),
+};

packages/storybook/src/templates/GridPage.stories.tsx

@@ -260,3 +260,46 @@ export const Default: Story = {
     </Body>
   ),
 };
+
+export const FullWidth: Story = {
+  name: 'Grid Page: Full Width',
+  render: () => (
+    <Body>
+      <SkipLink href="#main-content" />
+      <PageLayout
+        style={{ '--dsn-page-max-inline-size': 'none' } as React.CSSProperties}
+      >
+        <PageHeader
+          logoSlot={logoSlot}
+          primaryNavigation={<PrimaryNavigation />}
+          primaryNavigationLarge={primaryNavigationLarge}
+          secondaryNavigation={secondaryNavigation}
+          secondaryNavigationLarge={secondaryNavigationLarge}
+          searchSlot={searchSlot}
+        />
+        <PageBody>
+          <main id="main-content" tabIndex={-1} style={mainStyle}>
+            <Stack space="2xl">
+              <Grid style={{ '--dsn-grid-margin': '0' } as React.CSSProperties}>
+                <GridItem colSpan={12}>
+                  <Container>
+                    <Paragraph>
+                      Full-width: inhoud strekt zich uit over de volledige
+                      viewport-breedte.
+                    </Paragraph>
+                  </Container>
+                </GridItem>
+              </Grid>
+            </Stack>
+          </main>
+        </PageBody>
+        <PageFooter
+          slot1={footerSlot1}
+          slot2={footerSlot2}
+          slot3={footerSlot3}
+          slot4={footerSlot4}
+        />
+      </PageLayout>
+    </Body>
+  ),
+};