energy-foundations 2.5.0-beta.0 → 2.5.0-beta.1

package/dist/foundations/_grid.scss

@@ -3,46 +3,13 @@
 *************************/
 @use 'sass:map';
 @use '../rds-variables' as *;
+@use '../mixins/breakpoint-fixed' as *;
 
+// Contextual container: follows the page layout declared on body[data-rds-layout].
+// Also available as the `layout-max` mixin for custom selectors.
 .rds-e-layout-max,
 .rds-layout-max {
-  padding: 0 $g-padding-mobile;
-
-  @include breakpoint(tablet) {
-    padding: 0 $g-padding-tablet;
-  }
-
-  @include breakpoint(desktop) {
-    padding: 0 $g-padding-desktop;
-  }
-
-  @include breakpoint(ultrawide) {
-    margin: 0 auto;
-    max-width: 1600px;
-    padding: 0 $g-padding-ultrawide;
-  }
-}
-
-.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;
-  }
+  @include layout-max;
 }
 
 .rds-grid {
@@ -52,23 +19,20 @@
   width: 100%;
 
   @each $breakpoint, $config in $grid-config {
-    @include breakpoint($breakpoint) {
-      gap: map.get($config, gap);
-      grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+    :where(body:not([data-rds-layout='b'])) & {
+      @include fixed-breakpoint($breakpoint) {
+        gap: map.get($config, gap);
+        grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+      }
     }
   }
-}
 
-.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);
+  @each $breakpoint, $config in $grid-config-b {
+    :where(body[data-rds-layout='b']) & {
+      @include fixed-breakpoint($breakpoint) {
+        gap: map.get($config, gap);
+        grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+      }
     }
   }
 }
@@ -86,7 +50,7 @@ $breakpoint-abbr: (
   $max-columns: map.get($config, max-columns);
   $abbr: map.get($breakpoint-abbr, $breakpoint);
 
-  @include breakpoint($breakpoint) {
+  @include fixed-breakpoint($breakpoint) {
     // Clases sin offset: rds-col-sd-3
     @for $i from 1 through $max-columns {
       .rds-col-#{$abbr}-#{$i} {
@@ -111,7 +75,7 @@ $breakpoint-abbr: (
   
   @for $i from 1 through $max-columns {
     .rds-col-#{$i} {
-      @include breakpoint($breakpoint) {
+      @include fixed-breakpoint($breakpoint) {
         grid-column: span #{$i};
       }
     }
@@ -153,7 +117,7 @@ $flex-prefix: 'rds-flex';
 @each $breakpoint, $config in $grid-config {
   $abbr: map.get($breakpoint-abbr, $breakpoint);
 
-  @include breakpoint($breakpoint) {
+  @include fixed-breakpoint($breakpoint) {
     .#{$flex-prefix}-#{$abbr}-row {
       flex-direction: row;
     }
@@ -186,7 +150,7 @@ $flex-prefix: 'rds-flex';
 @each $breakpoint, $config in $grid-config {
   $abbr: map.get($breakpoint-abbr, $breakpoint);
 
-  @include breakpoint($breakpoint) {
+  @include fixed-breakpoint($breakpoint) {
     .#{$flex-prefix}-grow-#{$abbr} {
       flex-grow: 1;
     }

package/dist/generated/icon-layers.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-10-15T08:50:14.974Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-19T12:32:44.265Z */
 /* 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-10-15T08:50:14.974Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-19T12:32:44.265Z */
 /* 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-10-15T08:50:14.974Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-19T12:32:44.265Z */
 /* 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-10-15T08:50:14.974Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-19T12:32:44.265Z */
 /* eslint-disable */
 export const iconNames: string[] = [
   "ac-aire-acondicionado",

package/dist/index.css

@@ -5029,46 +5029,44 @@ html {
   padding: 0 16px;
 }
 @media (min-width: 720px) {
-  .rds-e-layout-max,
-  .rds-layout-max {
+  :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-e-layout-max, :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-layout-max {
     padding: 0 24px;
   }
 }
-@media (min-width: 1280px) {
-  .rds-e-layout-max,
-  .rds-layout-max {
-    padding: 0 32px;
+
+@media (min-width: 800px) {
+  :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-e-layout-max, :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-layout-max {
+    padding: 0 24px;
   }
 }
-@media (min-width: 1600px) {
-  .rds-e-layout-max,
-  .rds-layout-max {
-    margin: 0 auto;
-    max-width: 1600px;
+
+@media (min-width: 1280px) {
+  :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-e-layout-max, :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-layout-max {
     padding: 0 32px;
   }
 }
 
-.rds-layout-editorial {
-  padding: 0 16px;
-}
-@media (min-width: 800px) {
-  .rds-layout-editorial {
-    padding: 0 24px;
+@media (min-width: 1024px) {
+  :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-e-layout-max, :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-layout-max {
+    padding: 0 32px;
   }
 }
-@media (min-width: 1024px) {
-  .rds-layout-editorial {
+
+@media (min-width: 1600px) {
+  :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-e-layout-max, :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-layout-max {
+    margin: 0 auto;
+    max-width: 1600px;
     padding: 0 32px;
   }
 }
+
 @media (min-width: 1250px) {
-  .rds-layout-editorial {
+  :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-e-layout-max, :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-layout-max {
     padding: 0 72px;
   }
 }
 @media (min-width: 1584px) {
-  .rds-layout-editorial {
+  :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-e-layout-max, :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-layout-max {
     margin: 0 auto;
     max-width: 1584px;
     padding: 0 72px;
@@ -5082,44 +5080,37 @@ html {
   width: 100%;
 }
 @media (max-width: 719px) {
-  .rds-grid {
+  :where(body:not([data-rds-layout=b])) .rds-grid {
     gap: 16px;
     grid-template-columns: repeat(4, 1fr);
   }
 }
 @media (min-width: 720px) {
-  .rds-grid {
+  :where(body:not([data-rds-layout=b])) .rds-grid {
     gap: 16px;
     grid-template-columns: repeat(8, 1fr);
   }
 }
 @media (min-width: 1280px) {
-  .rds-grid {
+  :where(body:not([data-rds-layout=b])) .rds-grid {
     gap: 24px;
     grid-template-columns: repeat(12, 1fr);
   }
 }
-
-.rds-grid-editorial {
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-}
 @media (max-width: 799px) {
-  .rds-grid-editorial {
+  :where(body[data-rds-layout=b]) .rds-grid {
     gap: 16px;
     grid-template-columns: repeat(4, 1fr);
   }
 }
 @media (min-width: 800px) {
-  .rds-grid-editorial {
+  :where(body[data-rds-layout=b]) .rds-grid {
     gap: 24px;
     grid-template-columns: repeat(8, 1fr);
   }
 }
 @media (min-width: 1024px) {
-  .rds-grid-editorial {
+  :where(body[data-rds-layout=b]) .rds-grid {
     gap: 24px;
     grid-template-columns: repeat(12, 1fr);
   }

package/dist/mixins/_breakpoint-fixed.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../variables/layout' as *;
+
+// Internal fixed media query, independent of body[data-rds-layout].
+// Not forwarded by rds-variables: consumers must use `breakpoint`.
+@mixin fixed-breakpoint($breakpoint) {
+  $value: map.get($breakpoints, $breakpoint);
+
+  // If the key exists in the map
+  @if $value {
+    @if $breakpoint == mobile or $breakpoint == mobile-v2 {
+      @media (max-width: $value) {
+        @content;
+      }
+    } @else {
+      @media (min-width: $value) {
+        @content;
+      }
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map.";
+  }
+}

package/dist/mixins/_layout.scss

@@ -1,31 +1,194 @@
+@use 'sass:list';
 @use 'sass:map';
+@use 'sass:selector';
+@use 'sass:string';
+@use '../variables/grid' as *;
 @use '../variables/layout' as *;
+@use 'breakpoint-fixed' as *;
 
-// Responsive media queries
+$_layout-b-keys: (
+  mobile: mobile-v2,
+  tablet: tablet-v2,
+  desktop: desktop-v2,
+  desktop-large: desktop-large-v2,
+  ultrawide: ultrawide-v2
+);
+
+$_layout-conditions: (
+  a: ":not([data-rds-layout='b'])",
+  b: "[data-rds-layout='b']"
+);
+
+// Layout resolved by an enclosing breakpoint; nested calls reuse it instead of adding a second body context.
+$_active-layout: null;
+
+// Responsive media queries that follow the layout declared on body[data-rds-layout].
+// Semantic keys use Layout A by default and their *-v2 values with body[data-rds-layout='b'].
+// Explicit *-v2 and custom keys are fixed media queries.
 // use:
 //  .element {
-//    @include breakpoint(mobile|tablet|desktop|desktop-large|ultrawide){
+//    @include breakpoint(mobile|tablet|desktop|desktop-large|ultrawide) {
+//      ...
+//    }
+//  }
+// or at the root:
+//  @include breakpoint(tablet) {
+//    .element {
 //      ...
 //    }
-//   }
+//  }
 @mixin breakpoint($breakpoint) {
-  $value: map.get($breakpoints, $breakpoint);
+  @if map.has-key($_layout-b-keys, $breakpoint) {
+    $layout-b-key: map.get($_layout-b-keys, $breakpoint);
+
+    @if not map.get($breakpoints, $breakpoint) or not map.get($breakpoints, $layout-b-key) {
+      @error 'Missing layout A/B values for breakpoint: #{$breakpoint}.';
+    }
 
-  // If the key exists in the map
-  @if $value {
-    @if $breakpoint == mobile or $breakpoint == mobile-v2 {
-      @media (max-width: $value) {
+    @if $_active-layout == a {
+      @include fixed-breakpoint($breakpoint) {
         @content;
       }
-    } @else {
-      @media (min-width: $value) {
+    } @else if $_active-layout == b {
+      @include fixed-breakpoint($layout-b-key) {
         @content;
       }
+    } @else {
+      @include _layout-context(a) {
+        @include fixed-breakpoint($breakpoint) {
+          @content;
+        }
+      }
+
+      @include _layout-context(b) {
+        @include fixed-breakpoint($layout-b-key) {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @include fixed-breakpoint($breakpoint) {
+      @content;
+    }
+  }
+}
+
+@mixin _layout-context($layout) {
+  $previous-layout: $_active-layout;
+  $condition: map.get($_layout-conditions, $layout);
+
+  @if $previous-layout == $layout {
+    // Already resolved by an enclosing breakpoint: do not add a second body condition.
+    @content;
+  } @else if $previous-layout {
+    // Nested inside the other layout: these rules can never match.
+  } @else if & {
+    $_active-layout: $layout !global;
+
+    @at-root #{_contextualize(&, $condition)} {
+      @content;
+    }
+  } @else {
+    $_active-layout: $layout !global;
+
+    // At the root the context prefixes the selectors written inside the content.
+    :where(body#{$condition}) {
+      @content;
     }
   }
 
-  // If the key doesn't exist in the map
-  @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map.";
+  $_active-layout: $previous-layout !global;
+}
+
+// Page container that follows the layout declared on body[data-rds-layout].
+// Layout A: 16/24/32px gutters and 1600px max width. Layout B: up to 72px gutters and 1584px max width.
+// use:
+//  .portal-main {
+//    @include layout-max;
+//  }
+@mixin layout-max {
+  @if not & {
+    @error 'layout-max must be included inside a selector, e.g. `.portal-main { @include layout-max; }`.';
+  }
+
+  padding: 0 $g-padding-mobile;
+
+  @include breakpoint(tablet) {
+    padding: 0 $g-padding-tablet;
   }
+
+  @include breakpoint(desktop) {
+    padding: 0 $g-padding-desktop;
+  }
+
+  @include _layout-context(a) {
+    @include fixed-breakpoint(ultrawide) {
+      margin: 0 auto;
+      max-width: 1600px;
+      padding: 0 $g-padding-ultrawide;
+    }
+  }
+
+  @include _layout-context(b) {
+    @include fixed-breakpoint(desktop-large-v2) {
+      padding: 0 72px;
+    }
+
+    @include fixed-breakpoint(ultrawide-v2) {
+      margin: 0 auto;
+      max-width: 1584px;
+      padding: 0 72px;
+    }
+  }
+}
+
+// The condition is checked on the selected element itself, so other conditions such as `.dark` or `[dir='rtl']`
+// keep working when they live on body or html. It is inserted at the start of the last compound (after a type
+// selector), so `&--modifier`, `&__element` and pseudo-elements can still be appended by the content.
+@function _contextualize($selector, $condition) {
+  $result: ();
+
+  @each $complex in selector.parse($selector) {
+    $subject: list.nth($complex, -1);
+    $check: ':where(body#{$condition}, body#{$condition} *)';
+
+    @if _starts-with-type($subject, 'html') or _starts-with-type($subject, ':root') {
+      // html and :root are never inside body: they check their child body, which requires :has().
+      $check: ':where(:has(> body#{$condition}))';
+    }
+
+    $result: list.append($result, list.set-nth($complex, -1, _insert-after-type($subject, $check)), $separator: comma);
+  }
+
+  @return $result;
+}
+
+// A type or universal selector must stay first in a compound selector.
+@function _insert-after-type($compound, $check) {
+  $compound: '#{$compound}';
+  $position: 1;
+
+  @if not string.index('.#[:', string.slice($compound, 1, 1)) {
+    @while $position <= string.length($compound) and not string.index('.#[:', string.slice($compound, $position, $position)) {
+      $position: $position + 1;
+    }
+  }
+
+  @return string.unquote(string.insert($compound, $check, $position));
+}
+
+@function _starts-with-type($compound, $type) {
+  $compound: string.to-lower-case('#{$compound}');
+
+  @if string.index($compound, $type) != 1 {
+    @return false;
+  }
+
+  @if string.length($compound) == string.length($type) {
+    @return true;
+  }
+
+  $next: string.slice($compound, string.length($type) + 1, string.length($type) + 1);
+
+  @return not string.index('abcdefghijklmnopqrstuvwxyz0123456789-_', $next);
 }

package/dist/mixins/_typography.scss

@@ -3,7 +3,7 @@
 
 @use '../variables/typography' as *;
 @use '../mixins/utils' as *;
-@use '../mixins/layout' as *;
+@use '../mixins/breakpoint-fixed' as *;
 
 @mixin numeric-typography($name) {
   @if string.index($name, 'numbers') {
@@ -72,32 +72,32 @@
   @if map.has-key($rds-types-fluid, $name) {
     @include rds-font-style-sd($name);
 
-    @include breakpoint(tablet) {
+    @include fixed-breakpoint(tablet) {
       @include rds-font-style-md($name);
     }
 
-    @include breakpoint(desktop) {
+    @include fixed-breakpoint(desktop) {
       @include rds-font-style-ld($name);
     }
 
-    @include breakpoint(ultrawide) {
+    @include fixed-breakpoint(ultrawide) {
       @include rds-font-style-xd($name);
     }
 
     :where(body[data-rds-layout='b']) & {
-      @include breakpoint(tablet) {
+      @include fixed-breakpoint(tablet) {
         @include rds-font-style-sd($name);
       }
 
-      @include breakpoint(tablet-v2) {
+      @include fixed-breakpoint(tablet-v2) {
         @include rds-font-style-md($name);
       }
 
-      @include breakpoint(desktop-v2) {
+      @include fixed-breakpoint(desktop-v2) {
         @include rds-font-style-ld($name);
       }
 
-      @include breakpoint(ultrawide-v2) {
+      @include fixed-breakpoint(ultrawide-v2) {
         @include rds-font-style-xd($name);
       }
     }

package/dist/style.css

@@ -5029,46 +5029,44 @@ html {
   padding: 0 16px;
 }
 @media (min-width: 720px) {
-  .rds-e-layout-max,
-  .rds-layout-max {
+  :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-e-layout-max, :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-layout-max {
     padding: 0 24px;
   }
 }
-@media (min-width: 1280px) {
-  .rds-e-layout-max,
-  .rds-layout-max {
-    padding: 0 32px;
+
+@media (min-width: 800px) {
+  :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-e-layout-max, :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-layout-max {
+    padding: 0 24px;
   }
 }
-@media (min-width: 1600px) {
-  .rds-e-layout-max,
-  .rds-layout-max {
-    margin: 0 auto;
-    max-width: 1600px;
+
+@media (min-width: 1280px) {
+  :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-e-layout-max, :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-layout-max {
     padding: 0 32px;
   }
 }
 
-.rds-layout-editorial {
-  padding: 0 16px;
-}
-@media (min-width: 800px) {
-  .rds-layout-editorial {
-    padding: 0 24px;
+@media (min-width: 1024px) {
+  :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-e-layout-max, :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-layout-max {
+    padding: 0 32px;
   }
 }
-@media (min-width: 1024px) {
-  .rds-layout-editorial {
+
+@media (min-width: 1600px) {
+  :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-e-layout-max, :where(body:not([data-rds-layout=b]), body:not([data-rds-layout=b]) *).rds-layout-max {
+    margin: 0 auto;
+    max-width: 1600px;
     padding: 0 32px;
   }
 }
+
 @media (min-width: 1250px) {
-  .rds-layout-editorial {
+  :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-e-layout-max, :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-layout-max {
     padding: 0 72px;
   }
 }
 @media (min-width: 1584px) {
-  .rds-layout-editorial {
+  :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-e-layout-max, :where(body[data-rds-layout=b], body[data-rds-layout=b] *).rds-layout-max {
     margin: 0 auto;
     max-width: 1584px;
     padding: 0 72px;
@@ -5082,44 +5080,37 @@ html {
   width: 100%;
 }
 @media (max-width: 719px) {
-  .rds-grid {
+  :where(body:not([data-rds-layout=b])) .rds-grid {
     gap: 16px;
     grid-template-columns: repeat(4, 1fr);
   }
 }
 @media (min-width: 720px) {
-  .rds-grid {
+  :where(body:not([data-rds-layout=b])) .rds-grid {
     gap: 16px;
     grid-template-columns: repeat(8, 1fr);
   }
 }
 @media (min-width: 1280px) {
-  .rds-grid {
+  :where(body:not([data-rds-layout=b])) .rds-grid {
     gap: 24px;
     grid-template-columns: repeat(12, 1fr);
   }
 }
-
-.rds-grid-editorial {
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-}
 @media (max-width: 799px) {
-  .rds-grid-editorial {
+  :where(body[data-rds-layout=b]) .rds-grid {
     gap: 16px;
     grid-template-columns: repeat(4, 1fr);
   }
 }
 @media (min-width: 800px) {
-  .rds-grid-editorial {
+  :where(body[data-rds-layout=b]) .rds-grid {
     gap: 24px;
     grid-template-columns: repeat(8, 1fr);
   }
 }
 @media (min-width: 1024px) {
-  .rds-grid-editorial {
+  :where(body[data-rds-layout=b]) .rds-grid {
     gap: 24px;
     grid-template-columns: repeat(12, 1fr);
   }

package/dist/variables/_grid.scss

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

package/llms/01-classes.md

@@ -12,7 +12,7 @@ For Layout A/B, read [the layout guide](./04-layouts.md) before choosing contain
 
 ## Grid
 
-`rds-col`, `rds-col-ld-6`, `rds-col-md-4`, `rds-col-md-4-offset-2`, `rds-col-sd-4`, `rds-grid`, `rds-grid-editorial`, `rds-layout-editorial`, `rds-layout-max`, `rds-variables`
+`rds-col`, `rds-col-ld-6`, `rds-col-md-4`, `rds-col-md-4-offset-2`, `rds-col-sd-4`, `rds-grid`, `rds-layout`, `rds-layout-max`, `rds-variables`
 
 ## Spacing