energy-foundations 2.3.0 → 2.4.0

package/dist/foundations/_grid.scss

@@ -23,6 +23,28 @@
   }
 }
 
+.rds-layout-editorial {
+  padding: 0 $g-padding-mobile;
+
+  @include breakpoint(tablet-v2) {
+    padding: 0 $g-padding-tablet;
+  }
+
+  @include breakpoint(desktop-v2) {
+    padding: 0 $g-padding-desktop;
+  }
+
+  @include breakpoint(desktop-large-v2) {
+    padding: 0 72px;
+  }
+
+  @include breakpoint(ultrawide-v2) {
+    margin: 0 auto;
+    max-width: 1584px;
+    padding: 0 72px;
+  }
+}
+
 .rds-grid {
   display: grid;
   margin-left: auto;
@@ -37,6 +59,20 @@
   }
 }
 
+.rds-grid-editorial {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+
+  @each $breakpoint, $config in $grid-config-editorial {
+    @include breakpoint($breakpoint) {
+      gap: map.get($config, gap);
+      grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+    }
+  }
+}
+
 // Map of breakpoint names to abbreviations
 $breakpoint-abbr: (
   mobile: sd,

package/dist/generated/icon-layers.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
 /* eslint-disable */
 export const iconLayers = {
   "calendar_active": 8,

package/dist/generated/icon-layers.ts

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
 /* eslint-disable */
 export const iconLayers: Record<string, number> = {
   "calendar_active": 8,

package/dist/generated/icon-names.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
 /* eslint-disable */
 export const iconNames = [
   "ac-aire-acondicionado",

package/dist/generated/icon-names.ts

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
 /* eslint-disable */
 export const iconNames: string[] = [
   "ac-aire-acondicionado",

package/dist/index.css

@@ -4853,6 +4853,32 @@ html {
   }
 }
 
+.rds-layout-editorial {
+  padding: 0 16px;
+}
+@media (min-width: 800px) {
+  .rds-layout-editorial {
+    padding: 0 24px;
+  }
+}
+@media (min-width: 1024px) {
+  .rds-layout-editorial {
+    padding: 0 32px;
+  }
+}
+@media (min-width: 1250px) {
+  .rds-layout-editorial {
+    padding: 0 72px;
+  }
+}
+@media (min-width: 1584px) {
+  .rds-layout-editorial {
+    margin: 0 auto;
+    max-width: 1584px;
+    padding: 0 72px;
+  }
+}
+
 .rds-grid {
   display: grid;
   margin-left: auto;
@@ -4878,6 +4904,31 @@ html {
   }
 }
 
+.rds-grid-editorial {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+@media (max-width: 799px) {
+  .rds-grid-editorial {
+    gap: 16px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 800px) {
+  .rds-grid-editorial {
+    gap: 24px;
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .rds-grid-editorial {
+    gap: 24px;
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
 @media (max-width: 719px) {
   .rds-col-sd-1 {
     grid-column: span 1;

package/dist/mixins/_layout.scss

@@ -13,7 +13,7 @@
 
   // If the key exists in the map
   @if $value {
-    @if $breakpoint == mobile {
+    @if $breakpoint == mobile or $breakpoint == mobile-v2 {
       @media (max-width: $value) {
         @content;
       }

package/dist/style.css

@@ -4853,6 +4853,32 @@ html {
   }
 }
 
+.rds-layout-editorial {
+  padding: 0 16px;
+}
+@media (min-width: 800px) {
+  .rds-layout-editorial {
+    padding: 0 24px;
+  }
+}
+@media (min-width: 1024px) {
+  .rds-layout-editorial {
+    padding: 0 32px;
+  }
+}
+@media (min-width: 1250px) {
+  .rds-layout-editorial {
+    padding: 0 72px;
+  }
+}
+@media (min-width: 1584px) {
+  .rds-layout-editorial {
+    margin: 0 auto;
+    max-width: 1584px;
+    padding: 0 72px;
+  }
+}
+
 .rds-grid {
   display: grid;
   margin-left: auto;
@@ -4878,6 +4904,31 @@ html {
   }
 }
 
+.rds-grid-editorial {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+@media (max-width: 799px) {
+  .rds-grid-editorial {
+    gap: 16px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 800px) {
+  .rds-grid-editorial {
+    gap: 24px;
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .rds-grid-editorial {
+    gap: 24px;
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
 @media (max-width: 719px) {
   .rds-col-sd-1 {
     grid-column: span 1;

package/dist/variables/_grid.scss

@@ -5,6 +5,12 @@ $grid-config: (
   desktop: (max-columns: 12, gap: 24px)
 ) !default;
 
+$grid-config-editorial: (
+  mobile-v2: (max-columns: 4, gap: 16px),
+  tablet-v2: (max-columns: 8, gap: 24px),
+  desktop-v2: (max-columns: 12, gap: 24px)
+) !default;
+
 $g-padding-mobile: 16px;
 $g-padding-tablet: 24px;
 $g-padding-desktop: 32px;

package/dist/variables/_layout.scss

@@ -16,5 +16,10 @@ $breakpoints: (
   tablet: $bp-tablet,
   desktop: $bp-desktop,
   desktop-large: $bp-desktop-large,
-  ultrawide: $bp-ultrawide
+  ultrawide: $bp-ultrawide,
+  mobile-v2: 799px,
+  tablet-v2: 800px,
+  desktop-v2: 1024px,
+  desktop-large-v2: 1250px,
+  ultrawide-v2: 1584px
 ) !default;

package/llms/01-classes.md

@@ -12,7 +12,7 @@ Authoritative class reference derived from Storybook MDX. Prefer using classes f
 ## Grid
 
 `rds-body-01`, `rds-body-02`, `rds-col`, `rds-col-1`, `rds-col-2`, `rds-col-3`, `rds-col-ld`, `rds-col-md`, `rds-col-md-4-offset-2`, `rds-col-sd`, `rds-e-layout-max`, `rds-grid`
-`rds-title-01`, `rds-title-02`
+`rds-grid-editorial`, `rds-layout-editorial`, `rds-layout-max`, `rds-title-01`, `rds-title-02`
 
 ## Spacing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "energy-foundations",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "config": {
     "commitizen": {
       "path": "node_modules/cz-customizable"

package/src/foundations/_grid.scss

@@ -23,6 +23,28 @@
   }
 }
 
+.rds-layout-editorial {
+  padding: 0 $g-padding-mobile;
+
+  @include breakpoint(tablet-v2) {
+    padding: 0 $g-padding-tablet;
+  }
+
+  @include breakpoint(desktop-v2) {
+    padding: 0 $g-padding-desktop;
+  }
+
+  @include breakpoint(desktop-large-v2) {
+    padding: 0 72px;
+  }
+
+  @include breakpoint(ultrawide-v2) {
+    margin: 0 auto;
+    max-width: 1584px;
+    padding: 0 72px;
+  }
+}
+
 .rds-grid {
   display: grid;
   margin-left: auto;
@@ -37,6 +59,20 @@
   }
 }
 
+.rds-grid-editorial {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+
+  @each $breakpoint, $config in $grid-config-editorial {
+    @include breakpoint($breakpoint) {
+      gap: map.get($config, gap);
+      grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+    }
+  }
+}
+
 // Map of breakpoint names to abbreviations
 $breakpoint-abbr: (
   mobile: sd,

package/src/generated/icon-layers.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
 /* eslint-disable */
 export const iconLayers = {
   "calendar_active": 8,

package/src/generated/icon-layers.ts

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
 /* eslint-disable */
 export const iconLayers: Record<string, number> = {
   "calendar_active": 8,

package/src/generated/icon-names.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
 /* eslint-disable */
 export const iconNames = [
   "ac-aire-acondicionado",

package/src/generated/icon-names.ts

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
 /* eslint-disable */
 export const iconNames: string[] = [
   "ac-aire-acondicionado",

package/src/mixins/_layout.scss

@@ -13,7 +13,7 @@
 
   // If the key exists in the map
   @if $value {
-    @if $breakpoint == mobile {
+    @if $breakpoint == mobile or $breakpoint == mobile-v2 {
       @media (max-width: $value) {
         @content;
       }

package/src/variables/_grid.scss

@@ -5,6 +5,12 @@ $grid-config: (
   desktop: (max-columns: 12, gap: 24px)
 ) !default;
 
+$grid-config-editorial: (
+  mobile-v2: (max-columns: 4, gap: 16px),
+  tablet-v2: (max-columns: 8, gap: 24px),
+  desktop-v2: (max-columns: 12, gap: 24px)
+) !default;
+
 $g-padding-mobile: 16px;
 $g-padding-tablet: 24px;
 $g-padding-desktop: 32px;

package/src/variables/_layout.scss

@@ -16,5 +16,10 @@ $breakpoints: (
   tablet: $bp-tablet,
   desktop: $bp-desktop,
   desktop-large: $bp-desktop-large,
-  ultrawide: $bp-ultrawide
+  ultrawide: $bp-ultrawide,
+  mobile-v2: 799px,
+  tablet-v2: 800px,
+  desktop-v2: 1024px,
+  desktop-large-v2: 1250px,
+  ultrawide-v2: 1584px
 ) !default;