@repobit/dex-system-design 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@2.0.1...@repobit/dex-system-design@2.1.0) (2026-10-16)
+
+### Features
+
+* **DEX-28949:** the page column's top steps land on the site menu and footer edges
+
+
+## [2.0.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@2.0.0...@repobit/dex-system-design@2.0.1) (2026-10-15)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [2.0.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@1.0.1...@repobit/dex-system-design@2.0.0) (2026-10-15)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -160,8 +160,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.51",
-    "@repobit/dex-store-elements": "2.1.21",
+    "@repobit/dex-store": "1.6.52",
+    "@repobit/dex-store-elements": "2.1.22",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -179,5 +179,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "2d3b6d84d6e805628c3b6448429fb190beff3e78"
+  "gitHead": "2b14e5a236f0cf4b62b2c0decbb0a1e2721f8ef6"
 }

package/schemas/component-manifest.json

@@ -1,7 +1,7 @@
 {
   "manifestVersion": 1,
   "package": "@repobit/dex-system-design",
-  "packageVersion": "2.0.0",
+  "packageVersion": "2.1.0",
   "generatedFrom": [
     "package.json exports",
     "Lit static properties",

package/src/components/header/header.css.js

@@ -578,13 +578,14 @@ export default css`
      width per step is fixed and so is the two-column arithmetic once the 64px
      gap comes out of it:
 
-       xxl  1320 - 80 = 1240  ->  588 per column
+       xxxl 1372 - 80 = 1292  ->  614 per column
+       xxl  1280 - 80 = 1200  ->  568
        xl   1140 - 80 = 1060  ->  498
        lg    960 - 80 =  880  ->  408
        md    720 - 64 =  656  ->  296
        sm    540 - 48 =  492  ->  214
 
-     The CTA row is 446px wide. It fits at xl and xxl, wraps at lg, and at md
+     The CTA row is 446px wide. It fits at xl and above, wraps at lg, and at md
      there is less room than one button needs. lg is therefore the last step
      where two columns are even arguable, and it is arguable rather than good --
      measured, two columns at lg cost the description a fourth line, the CTA

package/src/components/header/header.stories.js

@@ -179,13 +179,14 @@ two-column arithmetic is fixed:
 
 | step | content width | per column |
 |---|---|---|
-| xxl | 1320 − 80 = 1240 | 588 |
+| xxxl | 1372 − 80 = 1292 | 614 |
+| xxl | 1280 − 80 = 1200 | 568 |
 | xl | 1140 − 80 = 1060 | 498 |
 | lg | 960 − 80 = 880 | 408 |
 | md | 720 − 64 = 656 | 296 |
 | sm | 540 − 48 = 492 | 214 |
 
-The CTA row is **446px**. It fits at xl and xxl, wraps at lg, and at md there
+The CTA row is **446px**. It fits at xl and above, wraps at lg, and at md there
 is less room than one button needs. So:
 
 - **\`below('lg')\` — stack.** One column, 32px row gap.

package/src/components/shared/ensemble.css.js

@@ -18,7 +18,10 @@ import { above } from "./token-scales.js";
  * section whose width depended on the viewport.
  *
  * This is that container, implemented once, on the scale the docs promised:
- * --grid-container-max-* with --grid-padding-* per breakpoint. A module
+ * --grid-container-max-* with --grid-padding-* per breakpoint. The top two
+ * steps, xxl and xxxl, are not the grid's own progression: they put the
+ * column's content edges on the site menu's and footer's -- 1200 wide up to
+ * 1599, 1292 from 1600 (see --grid-container-max-* in tokens.js). A module
  * imports it first and puts the class on the element that holds its content:
  *
  *   static styles = [ensembleCSS, ownCSS];
@@ -90,4 +93,10 @@ export const ensembleCSS = css`
       max-width: var(--bd-ensemble-max-width, var(--grid-container-max-xxl));
     }
   }
+
+  @media ${unsafeCSS(above('xxxl'))} {
+    .bd-ensemble {
+      max-width: var(--bd-ensemble-max-width, var(--grid-container-max-xxxl));
+    }
+  }
 `;

package/src/components/shared/token-scales.js

@@ -198,12 +198,12 @@ export const spacingShorthand = value => {
 /* ================================================================
      BREAKPOINTS
    ================================================================
-   The six viewport widths, and the only place a media condition is built
+   The seven viewport widths, and the only place a media condition is built
    from them.
 
    This lives in JS rather than in the token file because a media condition
    cannot read a custom property — `@media (max-width: var(--breakpoint-md))`
-   is not valid CSS — so the six values have to be interpolated into the
+   is not valid CSS — so the seven values have to be interpolated into the
    stylesheet at author time. `--breakpoint-*` in src/tokens/tokens.js stays
    the published record of the scale; this is how a component consumes it.
 
@@ -246,18 +246,21 @@ export const spacingShorthand = value => {
    0.02 rather than 0.01 is the long-standing convention, from Safari having
    rounded a hundredth away.
 
-   The five subtractions are exact in IEEE 754 — 575.98, 767.98, 991.98,
-   1199.98 and 1399.98 all round-trip — so no rounding is needed here. If a
+   The six subtractions are exact in IEEE 754 — 575.98, 767.98, 991.98,
+   1199.98, 1399.98 and 1599.98 all round-trip — so no rounding is needed here. If a
    value is ever added to the scale whose complement does not, this is where
    the rounding belongs. */
 
 export const BREAKPOINTS = {
-  xs : 0,
-  sm : 576,
-  md : 768,
-  lg : 992,
-  xl : 1200,
-  xxl: 1400
+  xs  : 0,
+  sm  : 576,
+  md  : 768,
+  lg  : 992,
+  xl  : 1200,
+  xxl : 1400,
+  /* Not a grid-progression step: the site's menu and footer widen here, and
+     the page column has to widen with them. See --grid-container-max-xxxl. */
+  xxxl: 1600
 };
 
 export const BREAKPOINT_NAMES = Object.keys(BREAKPOINTS);

package/src/tokens/layout.css

@@ -31,7 +31,7 @@
 /* The page column for light-DOM markup: the twin of .bd-ensemble in
    src/components/shared/ensemble.css.js, which is the source of truth. A page
    that lays out its own sections gets the same edges the modules draw. The
-   breakpoints are the scale's own values (576 / 768 / 992 / 1200 / 1400). */
+   breakpoints are the scale's own values (576 / 768 / 992 / 1200 / 1400 / 1600). */
 .bd-container {
     box-sizing: border-box;
     width: 100%;
@@ -44,6 +44,7 @@
   @media (min-width: 992px)  { .bd-container { max-width: var(--grid-container-max-lg);  padding-inline: var(--grid-padding-lg); } }
   @media (min-width: 1200px) { .bd-container { max-width: var(--grid-container-max-xl); } }
   @media (min-width: 1400px) { .bd-container { max-width: var(--grid-container-max-xxl); } }
+  @media (min-width: 1600px) { .bd-container { max-width: var(--grid-container-max-xxxl); } }
   
   .bd-container-fluid {
     width: 100%;

package/src/tokens/tokens-grid.stories.js

@@ -134,7 +134,8 @@ const COLUMN_TABLE = [
   ['768', 'md', '720px', 32],
   ['992', 'lg', '960px', 40],
   ['1200', 'xl', '1140px', 40],
-  ['1400', 'xxl', '1320px', 40]
+  ['1400', 'xxl', '1280px', 40],
+  ['1600', 'xxxl', '1372px', 40]
 ];
 const columnOf = (vw, cmax, padding) => {
   const box = cmax === '100%' ? Number(vw) : parseInt(cmax, 10);
@@ -157,7 +158,7 @@ export const TheColumn = () => html`
     children: html`
       ${refSection({
         name    : 'Viewport to column',
-        meta    : '7 widths · container − 2 × gutter',
+        meta    : '8 widths · container − 2 × gutter',
         children: html`
           <div style="overflow-x: auto">
             <table class="tokens-table">
@@ -186,7 +187,7 @@ export const TheColumn = () => html`
             </table>
           </div>
           <p>
-            <b><code>xl</code> and <code>xxl</code> inherit <code>--grid-padding-lg</code>.</b>
+            <b><code>xl</code>, <code>xxl</code> and <code>xxxl</code> inherit <code>--grid-padding-lg</code>.</b>
             <code>ensemble.css.js</code> raises <code>max-width</code> above <code>lg</code> but
             never the padding, so <b>40px is the widest gutter this system has</b> — and the
             column therefore grows more slowly than the screen does. At 320 the gutters are 10%
@@ -245,7 +246,7 @@ export const GridTokens = () => {
 };
 
 export const GridContainer = () => {
-  const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'];
 
   return html`
     ${gridStyles}

package/src/tokens/tokens.css

@@ -1635,7 +1635,7 @@
        deliberately. A media condition cannot read a custom property — @media
        (max-width: var(--breakpoint-sm)) is not valid CSS — so a breakpoint
        token can never be referenced the way a colour is. It exists so the
-       six values have one place to be read from, by the lint that checks
+       seven values have one place to be read from, by the lint that checks
        media queries against them and by anything generating CSS. The grid
        tokens below are read: --grid-container-max-* and --grid-padding-*
        are the page column, through shared/ensemble.css.js and layout.css,
@@ -1647,13 +1647,24 @@
        references is dead weight, and the OLD VALUES and FONT TOKENS blocks
        that used to sit below were removed for exactly that reason.
      */
-    /* Grid container max widths */
+    /* Grid container max widths
+
+       The top two steps are set by the site's menu and footer, not by the
+       grid's own progression: a page built from these modules sits between
+       the two, so its content edges have to land on theirs. Measured on
+       bitdefender.com on 2026-10-16, the menu and footer share one container
+       whose content is 1200px wide from 1300 to 1599 (1300 max, 50px gutter)
+       and 1292px from 1600 up (1332 max, 20px gutter). The column keeps its
+       own 40px gutter, so each cap is that content plus 80: xxl 1280 gives
+       1200 and xxxl 1372 gives 1292. xxl was 1320, a 1240 column that sat
+       20px outside the menu's edges at 1440 and 26px inside them at 1920. */
     --grid-container-max-xs: 100%; /* mobile full width */
     --grid-container-max-sm: 540px;
     --grid-container-max-md: 720px;
     --grid-container-max-lg: 960px;
     --grid-container-max-xl: 1140px;
-    --grid-container-max-xxl: 1320px;
+    --grid-container-max-xxl: 1280px;
+    --grid-container-max-xxxl: 1372px;
 
     /* Column count (usually 12) */
     --grid-columns: 12;
@@ -1677,6 +1688,7 @@
     --breakpoint-lg: 992px;
     --breakpoint-xl: 1200px;
     --breakpoint-xxl: 1400px;
+    --breakpoint-xxxl: 1600px; /* the site menu and footer widen here */
     /* =====================
         FONT-FACE DEFINITIONS
         Intentionally NOT here. @font-face nested inside a :host rule is

package/src/tokens/tokens.js

@@ -1648,7 +1648,7 @@ const declarations = `
            deliberately. A media condition cannot read a custom property — @media
            (max-width: var(--breakpoint-sm)) is not valid CSS — so a breakpoint
            token can never be referenced the way a colour is. It exists so the
-           six values have one place to be read from, by the lint that checks
+           seven values have one place to be read from, by the lint that checks
            media queries against them and by anything generating CSS. The grid
            tokens below are read: --grid-container-max-* and --grid-padding-*
            are the page column, through shared/ensemble.css.js and layout.css,
@@ -1660,13 +1660,24 @@ const declarations = `
            references is dead weight, and the OLD VALUES and FONT TOKENS blocks
            that used to sit below were removed for exactly that reason.
          */
-        /* Grid container max widths */
+        /* Grid container max widths
+
+           The top two steps are set by the site's menu and footer, not by the
+           grid's own progression: a page built from these modules sits between
+           the two, so its content edges have to land on theirs. Measured on
+           bitdefender.com on 2026-10-16, the menu and footer share one container
+           whose content is 1200px wide from 1300 to 1599 (1300 max, 50px gutter)
+           and 1292px from 1600 up (1332 max, 20px gutter). The column keeps its
+           own 40px gutter, so each cap is that content plus 80: xxl 1280 gives
+           1200 and xxxl 1372 gives 1292. xxl was 1320, a 1240 column that sat
+           20px outside the menu's edges at 1440 and 26px inside them at 1920. */
         --grid-container-max-xs: 100%; /* mobile full width */
         --grid-container-max-sm: 540px;
         --grid-container-max-md: 720px;
         --grid-container-max-lg: 960px;
         --grid-container-max-xl: 1140px;
-        --grid-container-max-xxl: 1320px;
+        --grid-container-max-xxl: 1280px;
+        --grid-container-max-xxxl: 1372px;
 
         /* Column count (usually 12) */
         --grid-columns: 12;
@@ -1690,6 +1701,7 @@ const declarations = `
         --breakpoint-lg: 992px;
         --breakpoint-xl: 1200px;
         --breakpoint-xxl: 1400px;
+        --breakpoint-xxxl: 1600px; /* the site menu and footer widen here */
         /* =====================
             FONT-FACE DEFINITIONS
             Intentionally NOT here. @font-face nested inside a :host rule is

package/src/tokens/typography.stories.js

@@ -190,7 +190,7 @@ const FLUID = [
   ['body-lead', 20, 18, 'Regular']
 ];
 /* viewport -> column, from --grid-container-max-* minus 2x --grid-padding-* */
-const COLUMNS = [[320, 288], [375, 343], [576, 492], [768, 656], [992, 880], [1200, 1060], [1400, 1240]];
+const COLUMNS = [[320, 288], [375, 343], [576, 492], [768, 656], [992, 880], [1200, 1060], [1400, 1200], [1600, 1292]];
 const WINDOW = [320, 992];
 
 /** What the clamp resolves to at a given viewport width, in px. */