@jsekulowicz/ds-components 0.6.1 → 0.7.1

package/custom-elements.json

@@ -12965,7 +12965,7 @@
         {
           "kind": "variable",
           "name": "footerStyles",
-          "default": "css` :host { display: block; container-type: inline-size; } footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--ds-space-4); /* Fixed 36px height; symmetric 16px inline padding. Padding is declared via padding-inline only — vertical centering is owned by the flexbox + fixed height. */ height: 36px; padding-inline: var(--ds-space-4); border-top: 1px solid var(--ds-color-border); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); box-sizing: border-box; } .start, .middle, .end { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; } .end { justify-content: flex-end; } @container (max-width: ${mobileBreakpoint}) { footer { gap: var(--ds-space-2); font-size: var(--ds-font-size-xs); } .start, .middle, .end { gap: var(--ds-space-2); } } `"
+          "default": "css` :host { display: block; container-type: inline-size; } footer { /* Full-width chrome: fixed 36px height + border-top span the footer's full width regardless of the inner content cap. */ height: 36px; border-top: 1px solid var(--ds-color-border); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); box-sizing: border-box; } .inner { /* Inner wrapper holds start / middle / end, optionally capped to align with a constrained content column above. 16px symmetric inline padding lives here so it scales with the (capped) content column, not the full-width chrome. */ height: 100%; width: 100%; max-width: var(--ds-footer-content-max-width, none); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--ds-space-4); padding-inline: var(--ds-space-4); box-sizing: border-box; } .start, .middle, .end { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; } .end { justify-content: flex-end; } @container (max-width: ${mobileBreakpoint}) { .inner { gap: var(--ds-space-2); font-size: var(--ds-font-size-xs); } .start, .middle, .end { gap: var(--ds-space-2); } } `"
         }
       ],
       "exports": [
@@ -12987,11 +12987,21 @@
           "kind": "class",
           "description": "",
           "name": "DsFooter",
+          "cssProperties": [
+            {
+              "description": "Max width of the inner content (start + middle + end). Defaults to `none` (no cap). Set to e.g. `var(--ds-page-shell-max-width)` to align with a content column above.",
+              "name": "--ds-footer-content-max-width"
+            }
+          ],
           "cssParts": [
             {
-              "description": "The internal `<footer>` element.",
+              "description": "The internal `<footer>` element (full-width chrome).",
               "name": "root"
             },
+            {
+              "description": "The capped content wrapper holding start / middle / end.",
+              "name": "inner"
+            },
             {
               "description": "The start region wrapper.",
               "name": "start"
@@ -13026,7 +13036,7 @@
           },
           "tagName": "ds-footer",
           "customElement": true,
-          "summary": "Slots-only page footer. Lays out start / middle / end regions; wraps to a column on narrow widths."
+          "summary": "Slots-only page footer. Lays out start / middle / end regions; wraps to a column on narrow widths.\n\nThe visible chrome (border-top + fixed height) always spans the full width of the\nfooter; the inner start / middle / end regions live in a centered `inner` wrapper\nwhose max-width is configurable via the `--ds-footer-content-max-width` custom\nproperty, so consumers (e.g. ds-page-shell) can align footer content with a\nconstrained content column above."
         }
       ],
       "exports": [
@@ -13505,7 +13515,7 @@
         {
           "kind": "variable",
           "name": "topBarStyles",
-          "default": "css` :host { display: block; } nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); /* Fixed 48px height at every viewport; 16px symmetric inline padding. Padding is declared via padding-inline only — vertical centering is owned by the flexbox + fixed height. */ height: 48px; padding-inline: var(--ds-space-4); background: var(--ds-top-bar-bg, var(--ds-color-bg)); border-bottom: 1px solid var(--ds-color-border); font-family: var(--ds-font-body); color: var(--ds-color-fg); box-sizing: border-box; } .brand { display: flex; align-items: center; gap: var(--ds-space-2); min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .actions { display: flex; align-items: center; gap: var(--ds-space-2); } `"
+          "default": "css` :host { display: block; } nav { /* Full-width chrome: background, border-bottom, and the fixed responsive height live on the nav itself so they always span the parent's full width regardless of the inner content cap. */ height: 48px; background: var(--ds-top-bar-bg, var(--ds-color-bg)); border-bottom: 1px solid var(--ds-color-border); font-family: var(--ds-font-body); color: var(--ds-color-fg); box-sizing: border-box; } .inner { /* Inner wrapper holds brand + actions, optionally capped to align with a constrained content column below the bar. 16px symmetric inline padding lives here so it scales with the (capped) content column, not the full-width chrome. */ height: 100%; width: 100%; max-width: var(--ds-top-bar-content-max-width, none); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding-inline: var(--ds-space-4); box-sizing: border-box; } .brand { display: flex; align-items: center; gap: var(--ds-space-2); min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .actions { display: flex; align-items: center; gap: var(--ds-space-2); } `"
         }
       ],
       "exports": [
@@ -13531,13 +13541,21 @@
             {
               "description": "Background color of the bar. Defaults to `var(--ds-color-bg)`. Override (e.g. to `transparent`) when nesting inside a container that paints its own background underneath, such as a sticky shell with `backdrop-filter`.",
               "name": "--ds-top-bar-bg"
+            },
+            {
+              "description": "Max width of the inner content (brand + actions). Defaults to `none` (no cap). Set to e.g. `var(--ds-page-shell-max-width)` to align with a content column below.",
+              "name": "--ds-top-bar-content-max-width"
             }
           ],
           "cssParts": [
             {
-              "description": "The internal `<nav>` landmark element.",
+              "description": "The internal `<nav>` landmark element (full-width chrome).",
               "name": "bar"
             },
+            {
+              "description": "The capped content wrapper holding brand + actions.",
+              "name": "inner"
+            },
             {
               "description": "The brand wrapper.",
               "name": "brand"
@@ -13584,7 +13602,7 @@
           },
           "tagName": "ds-top-bar",
           "customElement": true,
-          "summary": "Application chrome bar with a left brand region and a right actions region.\n\nThe bar is intentionally minimal: it does not own primary navigation. Pair it with\n`ds-sidenav` (typically inside `ds-page-shell`) for navigation. The bar has a fixed\n48px height at every viewport and a symmetric 16px inline padding."
+          "summary": "Application chrome bar with a left brand region and a right actions region.\n\nThe bar is intentionally minimal: it does not own primary navigation. Pair it with\n`ds-sidenav` (typically inside `ds-page-shell`) for navigation. The bar has a fixed\n48px height at every viewport and a symmetric 16px inline padding.\n\nThe visible chrome (background + border-bottom) always spans the full width of the\nbar; the inner brand + actions content is held in a centered `inner` wrapper whose\nmax-width is configurable via the `--ds-top-bar-content-max-width` custom property,\nso consumers (e.g. ds-page-shell) can align the bar's content with a constrained\ncontent column below."
         }
       ],
       "exports": [
@@ -13815,7 +13833,7 @@
         {
           "kind": "variable",
           "name": "pageShellStyles",
-          "default": "css` :host { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } /* The header composes ds-top-bar; let the top-bar own height, padding, border-bottom, and layout. We just make its background transparent so the sticky header's blurred bg shows through. */ .chrome { --ds-top-bar-bg: transparent; } footer { display: block; } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr auto; } :host([aside-end-empty]) .shell-body { grid-template-columns: auto 1fr; } :host([aside-empty][aside-end-empty]) .shell-body { grid-template-columns: 1fr; } aside { display: flex; overflow-x: clip; overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* No scrollbar-gutter reservation: the aside sits flush with its column edge so the consumer's <main> solely owns the gap. The scrollbar appears on demand when the aside genuinely overflows. */ } :host([aside-empty]) aside[part=\"aside\"], :host([aside-empty]) .mobile-backdrop { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { display: none; } main { padding: var(--ds-space-5); overflow: auto; min-width: 0; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* Reserve scrollbar gutters on both inline sides so the inline-start and inline-end visible empty bands stay equal in width whether the vertical scrollbar is present or not. */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { main { padding-block: var(--ds-space-4); padding-inline: var(--ds-space-4); } } .menu-toggle { display: none; } .menu-toggle::part(button), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-brand { display: none; } .drawer-close { display: none; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { /* Secondary inline-end region is not surfaced in the mobile drawer in v1. Consumers can opt back in by overriding via ::part(aside-end). */ display: none; } :host([mobile-layout]) aside[part=\"aside\"] { position: absolute; top: 0; left: 0; width: 16rem; display: flex; flex-direction: column; height: 100%; background: var(--ds-color-bg); border-right: 0; z-index: var(--ds-z-index-modal); transform: translateX(-100%); transition: transform var(--ds-duration-slow) var(--ds-easing-standard); scrollbar-gutter: auto; overflow: hidden; box-sizing: border-box; } :host([mobile-layout][data-mobile-nav-open]) aside[part=\"aside\"] { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-4); } :host([mobile-layout]) .drawer-brand { display: inline-flex; align-items: center; flex: 1; min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } :host([mobile-layout]) slot[name='drawer-brand']::slotted(*) { max-width: 100%; } :host([mobile-layout]) .drawer-close { display: inline-flex; flex: 0 0 auto; margin: 0; } :host([mobile-layout]) aside[part=\"aside\"] ::slotted(ds-sidenav) { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; min-width: 0; min-height: 0; height: auto !important; } :host([mobile-layout][data-mobile-nav-open]) .mobile-backdrop { display: block; position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: color-mix(in oklab, var(--ds-color-fg) 26%, transparent); z-index: var(--ds-z-index-overlay); } `"
+          "default": "css` :host { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative; height: 100vh; height: 100dvh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } /* The header composes ds-top-bar; let the top-bar own height, padding, border-bottom, and layout. We just (a) make its background transparent so the sticky header's blurred bg shows through, and (b) constrain its inner brand + actions content to the same max-width as the shell-body below so the bar's brand left-aligns with the aside, and its actions right-align with the aside-end (or the right edge of main when no aside-end is slotted). */ .chrome { --ds-top-bar-bg: transparent; --ds-top-bar-content-max-width: var(--ds-page-shell-max-width); } /* Same treatment for a slotted ds-footer: cap its inner content to the shell-body's max-width so footer content aligns with the column above. Consumers who slot a non-ds-footer custom element can override the property themselves. */ ::slotted(ds-footer) { --ds-footer-content-max-width: var(--ds-page-shell-max-width); } footer { display: block; } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr auto; } :host([aside-end-empty]) .shell-body { grid-template-columns: auto 1fr; } :host([aside-empty][aside-end-empty]) .shell-body { grid-template-columns: 1fr; } aside { display: flex; overflow-x: clip; overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* No scrollbar-gutter reservation: the aside sits flush with its column edge so the consumer's <main> solely owns the gap. The scrollbar appears on demand when the aside genuinely overflows. */ } :host([aside-empty]) aside[part=\"aside\"], :host([aside-empty]) .mobile-backdrop { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { display: none; } main { padding: var(--ds-space-5); overflow: auto; min-width: 0; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* Reserve scrollbar gutters on both inline sides so the inline-start and inline-end visible empty bands stay equal in width whether the vertical scrollbar is present or not. */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { main { padding-block: var(--ds-space-4); padding-inline: var(--ds-space-4); } } .menu-toggle { display: none; } .menu-toggle::part(button), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-brand { display: none; } .drawer-close { display: none; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { /* Secondary inline-end region is not surfaced in the mobile drawer in v1. Consumers can opt back in by overriding via ::part(aside-end). */ display: none; } :host([mobile-layout]) aside[part=\"aside\"] { position: absolute; top: 0; left: 0; width: 16rem; display: flex; flex-direction: column; height: 100%; background: var(--ds-color-bg); border-right: 0; z-index: var(--ds-z-index-modal); transform: translateX(-100%); transition: transform var(--ds-duration-slow) var(--ds-easing-standard); scrollbar-gutter: auto; overflow: hidden; box-sizing: border-box; } :host([mobile-layout][data-mobile-nav-open]) aside[part=\"aside\"] { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-4); } :host([mobile-layout]) .drawer-brand { display: inline-flex; align-items: center; flex: 1; min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } :host([mobile-layout]) slot[name='drawer-brand']::slotted(*) { max-width: 100%; } :host([mobile-layout]) .drawer-close { display: inline-flex; flex: 0 0 auto; margin: 0; } :host([mobile-layout]) aside[part=\"aside\"] ::slotted(ds-sidenav) { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; min-width: 0; min-height: 0; height: auto !important; } :host([mobile-layout][data-mobile-nav-open]) .mobile-backdrop { display: block; position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: color-mix(in oklab, var(--ds-color-fg) 26%, transparent); z-index: var(--ds-z-index-overlay); } `"
         }
       ],
       "exports": [

package/dist/organisms/footer/footer.d.ts

@@ -3,13 +3,24 @@ import { DsElement } from '@jsekulowicz/ds-core';
 /**
  * @tag ds-footer
  * @summary Slots-only page footer. Lays out start / middle / end regions; wraps to a column on narrow widths.
+ *
+ * The visible chrome (border-top + fixed height) always spans the full width of the
+ * footer; the inner start / middle / end regions live in a centered `inner` wrapper
+ * whose max-width is configurable via the `--ds-footer-content-max-width` custom
+ * property, so consumers (e.g. ds-page-shell) can align footer content with a
+ * constrained content column above.
+ *
  * @slot start - Left region. Typical use: copyright text.
  * @slot default - Middle region.
  * @slot end - Right region. Typical use: nav links, social icons.
- * @csspart root - The internal `<footer>` element.
+ * @csspart root - The internal `<footer>` element (full-width chrome).
+ * @csspart inner - The capped content wrapper holding start / middle / end.
  * @csspart start - The start region wrapper.
  * @csspart middle - The middle region wrapper.
  * @csspart end - The end region wrapper.
+ * @cssprop --ds-footer-content-max-width - Max width of the inner content
+ *   (start + middle + end). Defaults to `none` (no cap). Set to e.g.
+ *   `var(--ds-page-shell-max-width)` to align with a content column above.
  */
 export declare class DsFooter extends DsElement {
     static styles: import("lit").CSSResult[];

package/dist/organisms/footer/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD;;;;;;;;;;GAUG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAAuC;IAEpD,MAAM,IAAI,cAAc;CAOlC"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAAuC;IAEpD,MAAM,IAAI,cAAc;CASlC"}

package/dist/organisms/footer/footer.js

@@ -4,21 +4,34 @@ import { footerStyles } from './footer.styles.js';
 /**
  * @tag ds-footer
  * @summary Slots-only page footer. Lays out start / middle / end regions; wraps to a column on narrow widths.
+ *
+ * The visible chrome (border-top + fixed height) always spans the full width of the
+ * footer; the inner start / middle / end regions live in a centered `inner` wrapper
+ * whose max-width is configurable via the `--ds-footer-content-max-width` custom
+ * property, so consumers (e.g. ds-page-shell) can align footer content with a
+ * constrained content column above.
+ *
  * @slot start - Left region. Typical use: copyright text.
  * @slot default - Middle region.
  * @slot end - Right region. Typical use: nav links, social icons.
- * @csspart root - The internal `<footer>` element.
+ * @csspart root - The internal `<footer>` element (full-width chrome).
+ * @csspart inner - The capped content wrapper holding start / middle / end.
  * @csspart start - The start region wrapper.
  * @csspart middle - The middle region wrapper.
  * @csspart end - The end region wrapper.
+ * @cssprop --ds-footer-content-max-width - Max width of the inner content
+ *   (start + middle + end). Defaults to `none` (no cap). Set to e.g.
+ *   `var(--ds-page-shell-max-width)` to align with a content column above.
  */
 export class DsFooter extends DsElement {
     static { this.styles = [...DsElement.styles, footerStyles]; }
     render() {
         return html `<footer part="root">
-      <div class="start" part="start"><slot name="start"></slot></div>
-      <div class="middle" part="middle"><slot></slot></div>
-      <div class="end" part="end"><slot name="end"></slot></div>
+      <div class="inner" part="inner">
+        <div class="start" part="start"><slot name="start"></slot></div>
+        <div class="middle" part="middle"><slot></slot></div>
+        <div class="end" part="end"><slot name="end"></slot></div>
+      </div>
     </footer>`;
     }
 }

package/dist/organisms/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,QAAS,SAAQ,SAAS;aACrB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAEpD,MAAM;QACb,OAAO,IAAI,CAAA;;;;cAID,CAAC;IACb,CAAC"}
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,QAAS,SAAQ,SAAS;aACrB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAEpD,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;cAMD,CAAC;IACb,CAAC"}

package/dist/organisms/footer/footer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,yBA4CxB,CAAC"}
+{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,yBAsDxB,CAAC"}

package/dist/organisms/footer/footer.styles.js

@@ -7,20 +7,30 @@ export const footerStyles = css `
     container-type: inline-size;
   }
   footer {
+    /* Full-width chrome: fixed 36px height + border-top span the
+       footer's full width regardless of the inner content cap. */
+    height: 36px;
+    border-top: 1px solid var(--ds-color-border);
+    color: var(--ds-color-fg-muted);
+    font-family: var(--ds-font-body);
+    font-size: var(--ds-font-size-sm);
+    box-sizing: border-box;
+  }
+  .inner {
+    /* Inner wrapper holds start / middle / end, optionally capped to
+       align with a constrained content column above. 16px symmetric
+       inline padding lives here so it scales with the (capped) content
+       column, not the full-width chrome. */
+    height: 100%;
+    width: 100%;
+    max-width: var(--ds-footer-content-max-width, none);
+    margin-inline: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: nowrap;
     gap: var(--ds-space-4);
-    /* Fixed 36px height; symmetric 16px inline padding. Padding is
-       declared via padding-inline only — vertical centering is owned by
-       the flexbox + fixed height. */
-    height: 36px;
     padding-inline: var(--ds-space-4);
-    border-top: 1px solid var(--ds-color-border);
-    color: var(--ds-color-fg-muted);
-    font-family: var(--ds-font-body);
-    font-size: var(--ds-font-size-sm);
     box-sizing: border-box;
   }
   .start,
@@ -35,7 +45,7 @@ export const footerStyles = css `
     justify-content: flex-end;
   }
   @container (max-width: ${mobileBreakpoint}) {
-    footer {
+    .inner {
       gap: var(--ds-space-2);
       font-size: var(--ds-font-size-xs);
     }

package/dist/organisms/footer/footer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAiCJ,gBAAgB;;;;;;;;;;;CAW1C,CAAC"}
+{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA2CJ,gBAAgB;;;;;;;;;;;CAW1C,CAAC"}

package/dist/organisms/top-bar/top-bar.d.ts

@@ -8,14 +8,24 @@ import { DsElement } from '@jsekulowicz/ds-core';
  * `ds-sidenav` (typically inside `ds-page-shell`) for navigation. The bar has a fixed
  * 48px height at every viewport and a symmetric 16px inline padding.
  *
+ * The visible chrome (background + border-bottom) always spans the full width of the
+ * bar; the inner brand + actions content is held in a centered `inner` wrapper whose
+ * max-width is configurable via the `--ds-top-bar-content-max-width` custom property,
+ * so consumers (e.g. ds-page-shell) can align the bar's content with a constrained
+ * content column below.
+ *
  * @slot brand - Logo, wordmark, and/or page title (left).
  * @slot actions - Buttons, account menus, drawer toggle, etc. (right).
- * @csspart bar - The internal `<nav>` landmark element.
+ * @csspart bar - The internal `<nav>` landmark element (full-width chrome).
+ * @csspart inner - The capped content wrapper holding brand + actions.
  * @csspart brand - The brand wrapper.
  * @csspart actions - The actions wrapper.
  * @cssprop --ds-top-bar-bg - Background color of the bar. Defaults to `var(--ds-color-bg)`.
  *   Override (e.g. to `transparent`) when nesting inside a container that paints its own
  *   background underneath, such as a sticky shell with `backdrop-filter`.
+ * @cssprop --ds-top-bar-content-max-width - Max width of the inner content (brand +
+ *   actions). Defaults to `none` (no cap). Set to e.g. `var(--ds-page-shell-max-width)`
+ *   to align with a content column below.
  */
 export declare class DsTopBar extends DsElement {
     static styles: import("lit").CSSResult[];

package/dist/organisms/top-bar/top-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/organisms/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAAuC;IAEjD,KAAK,SAAa;IAErB,MAAM,IAAI,cAAc;CAMlC"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/organisms/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAAuC;IAEjD,KAAK,SAAa;IAErB,MAAM,IAAI,cAAc;CAQlC"}

package/dist/organisms/top-bar/top-bar.js

@@ -16,14 +16,24 @@ import { topBarStyles } from './top-bar.styles.js';
  * `ds-sidenav` (typically inside `ds-page-shell`) for navigation. The bar has a fixed
  * 48px height at every viewport and a symmetric 16px inline padding.
  *
+ * The visible chrome (background + border-bottom) always spans the full width of the
+ * bar; the inner brand + actions content is held in a centered `inner` wrapper whose
+ * max-width is configurable via the `--ds-top-bar-content-max-width` custom property,
+ * so consumers (e.g. ds-page-shell) can align the bar's content with a constrained
+ * content column below.
+ *
  * @slot brand - Logo, wordmark, and/or page title (left).
  * @slot actions - Buttons, account menus, drawer toggle, etc. (right).
- * @csspart bar - The internal `<nav>` landmark element.
+ * @csspart bar - The internal `<nav>` landmark element (full-width chrome).
+ * @csspart inner - The capped content wrapper holding brand + actions.
  * @csspart brand - The brand wrapper.
  * @csspart actions - The actions wrapper.
  * @cssprop --ds-top-bar-bg - Background color of the bar. Defaults to `var(--ds-color-bg)`.
  *   Override (e.g. to `transparent`) when nesting inside a container that paints its own
  *   background underneath, such as a sticky shell with `backdrop-filter`.
+ * @cssprop --ds-top-bar-content-max-width - Max width of the inner content (brand +
+ *   actions). Defaults to `none` (no cap). Set to e.g. `var(--ds-page-shell-max-width)`
+ *   to align with a content column below.
  */
 export class DsTopBar extends DsElement {
     constructor() {
@@ -33,8 +43,10 @@ export class DsTopBar extends DsElement {
     static { this.styles = [...DsElement.styles, topBarStyles]; }
     render() {
         return html `<nav part="bar" aria-label=${this.label}>
-      <div class="brand" part="brand"><slot name="brand"></slot></div>
-      <div class="actions" part="actions"><slot name="actions"></slot></div>
+      <div class="inner" part="inner">
+        <div class="brand" part="brand"><slot name="brand"></slot></div>
+        <div class="actions" part="actions"><slot name="actions"></slot></div>
+      </div>
     </nav>`;
     }
 }

package/dist/organisms/top-bar/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","sourceRoot":"","sources":["../../../src/organisms/top-bar/top-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,QAAS,SAAQ,SAAS;IAAvC;;QAGc,UAAK,GAAG,SAAS,CAAC;IAQhC,CAAC;aAViB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,AAAtC,CAAuC;IAIpD,MAAM;QACb,OAAO,IAAI,CAAA,8BAA8B,IAAI,CAAC,KAAK;;;WAG5C,CAAC;IACV,CAAC;;AAPW;IAAX,QAAQ,EAAE;uCAAmB"}
+{"version":3,"file":"top-bar.js","sourceRoot":"","sources":["../../../src/organisms/top-bar/top-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,OAAO,QAAS,SAAQ,SAAS;IAAvC;;QAGc,UAAK,GAAG,SAAS,CAAC;IAUhC,CAAC;aAZiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,AAAtC,CAAuC;IAIpD,MAAM;QACb,OAAO,IAAI,CAAA,8BAA8B,IAAI,CAAC,KAAK;;;;;WAK5C,CAAC;IACV,CAAC;;AATW;IAAX,QAAQ,EAAE;uCAAmB"}

package/dist/organisms/top-bar/top-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/top-bar/top-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAkCxB,CAAC"}
+{"version":3,"file":"top-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/top-bar/top-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA6CxB,CAAC"}

package/dist/organisms/top-bar/top-bar.styles.js

@@ -4,21 +4,32 @@ export const topBarStyles = css `
     display: block;
   }
   nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ds-space-3);
-    /* Fixed 48px height at every viewport; 16px symmetric inline
-       padding. Padding is declared via padding-inline only — vertical
-       centering is owned by the flexbox + fixed height. */
+    /* Full-width chrome: background, border-bottom, and the fixed
+       responsive height live on the nav itself so they always span
+       the parent's full width regardless of the inner content cap. */
     height: 48px;
-    padding-inline: var(--ds-space-4);
     background: var(--ds-top-bar-bg, var(--ds-color-bg));
     border-bottom: 1px solid var(--ds-color-border);
     font-family: var(--ds-font-body);
     color: var(--ds-color-fg);
     box-sizing: border-box;
   }
+  .inner {
+    /* Inner wrapper holds brand + actions, optionally capped to align
+       with a constrained content column below the bar. 16px symmetric
+       inline padding lives here so it scales with the (capped) content
+       column, not the full-width chrome. */
+    height: 100%;
+    width: 100%;
+    max-width: var(--ds-top-bar-content-max-width, none);
+    margin-inline: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ds-space-3);
+    padding-inline: var(--ds-space-4);
+    box-sizing: border-box;
+  }
   .brand {
     display: flex;
     align-items: center;

package/dist/organisms/top-bar/top-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.styles.js","sourceRoot":"","sources":["../../../src/organisms/top-bar/top-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC9B,CAAC"}
+{"version":3,"file":"top-bar.styles.js","sourceRoot":"","sources":["../../../src/organisms/top-bar/top-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C9B,CAAC"}

package/dist/templates/page-shell/page-shell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAgM3B,CAAC"}
+{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBA8M3B,CAAC"}

package/dist/templates/page-shell/page-shell.styles.js

@@ -8,7 +8,8 @@ export const pageShellStyles = css `
     display: flex;
     flex-direction: column;
     position: relative;
-    min-height: 100vh;
+    height: 100vh;
+    height: 100dvh;
     overflow-x: clip;
     background: var(--ds-color-bg);
     color: var(--ds-color-fg);
@@ -24,10 +25,23 @@ export const pageShellStyles = css `
   }
 
   /* The header composes ds-top-bar; let the top-bar own height, padding,
-     border-bottom, and layout. We just make its background transparent so
-     the sticky header's blurred bg shows through. */
+     border-bottom, and layout. We just (a) make its background transparent
+     so the sticky header's blurred bg shows through, and (b) constrain its
+     inner brand + actions content to the same max-width as the shell-body
+     below so the bar's brand left-aligns with the aside, and its actions
+     right-align with the aside-end (or the right edge of main when no
+     aside-end is slotted). */
   .chrome {
     --ds-top-bar-bg: transparent;
+    --ds-top-bar-content-max-width: var(--ds-page-shell-max-width);
+  }
+
+  /* Same treatment for a slotted ds-footer: cap its inner content to the
+     shell-body's max-width so footer content aligns with the column above.
+     Consumers who slot a non-ds-footer custom element can override the
+     property themselves. */
+  ::slotted(ds-footer) {
+    --ds-footer-content-max-width: var(--ds-page-shell-max-width);
   }
 
   footer {

package/dist/templates/page-shell/page-shell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-shell.styles.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAyFX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuG5C,CAAC"}
+{"version":3,"file":"page-shell.styles.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuGX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuG5C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsekulowicz/ds-components",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
   "license": "UNLICENSED",
   "repository": {
@@ -385,8 +385,8 @@
   ],
   "dependencies": {
     "lit": "^3.2.1",
-    "@jsekulowicz/ds-tokens": "0.5.0",
-    "@jsekulowicz/ds-core": "0.5.0"
+    "@jsekulowicz/ds-core": "0.5.0",
+    "@jsekulowicz/ds-tokens": "0.5.0"
   },
   "devDependencies": {
     "heroicons": "2.2.0",