energy-foundations 2.5.0-beta.2 → 2.5.0

package/dist/foundations/_grid.scss

@@ -6,14 +6,14 @@
 @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.
+// Preserve historical physical padding; the default mixin only manages inline gutters.
 .rds-e-layout-max,
 .rds-layout-max {
-  @include layout-max;
+  @include layout-max($legacy-padding: true);
 }
 
 .rds-grid {
-  @include grid;
+  @include rds-grid;
 }
 
 // Map of breakpoint names to abbreviations

package/dist/generated/icon-layers.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-10-22T09:48:17.799Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-27T11:09:01.884Z */
 /* 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-22T09:48:17.799Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-27T11:09:01.884Z */
 /* 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-22T09:48:17.799Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-27T11:09:01.884Z */
 /* 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-22T09:48:17.799Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-27T11:09:01.884Z */
 /* eslint-disable */
 export const iconNames: string[] = [
   "ac-aire-acondicionado",

package/dist/mixins/_layout.scss

@@ -100,51 +100,61 @@ $_active-layout: null;
   $_active-layout: $previous-layout !global;
 }
 
+// Keep the public CSS classes' physical padding and responsive resets unchanged.
+@mixin _layout-max-padding($value, $legacy-padding) {
+  @if $legacy-padding {
+    padding: 0 $value;
+  } @else {
+    padding-inline: $value;
+  }
+}
+
 // 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.
+// Inline gutters preserve consumer block padding. Legacy padding is reserved for class compatibility.
 // use:
 //  .portal-main {
 //    @include layout-max;
 //  }
-@mixin layout-max {
+@mixin layout-max($legacy-padding: false) {
   @if not & {
     @error 'layout-max must be included inside a selector, e.g. `.portal-main { @include layout-max; }`.';
   }
 
-  padding: 0 $g-padding-mobile;
+  @include _layout-max-padding($g-padding-mobile, $legacy-padding);
 
   @include breakpoint(tablet) {
-    padding: 0 $g-padding-tablet;
+    @include _layout-max-padding($g-padding-tablet, $legacy-padding);
   }
 
   @include breakpoint(desktop) {
-    padding: 0 $g-padding-desktop;
+    @include _layout-max-padding($g-padding-desktop, $legacy-padding);
   }
 
   @include _layout-context(a) {
     @include fixed-breakpoint(ultrawide) {
       margin: 0 auto;
       max-width: 1600px;
-      padding: 0 $g-padding-ultrawide;
+      @include _layout-max-padding($g-padding-ultrawide, $legacy-padding);
     }
   }
 
   @include _layout-context(b) {
     @include fixed-breakpoint(desktop-large-v2) {
-      padding: 0 72px;
+      @include _layout-max-padding(72px, $legacy-padding);
     }
 
     @include fixed-breakpoint(ultrawide-v2) {
       margin: 0 auto;
       max-width: 1584px;
-      padding: 0 72px;
+      @include _layout-max-padding(72px, $legacy-padding);
     }
   }
 }
 
-@mixin grid {
+@mixin rds-grid {
   @if not & {
-    @error 'grid must be included inside a selector, e.g. `.portal-grid { @include grid; }`.';
+    @error 'rds-grid must be included inside a selector, e.g. `.portal-grid { @include rds-grid; }`.';
   }
 
   display: grid;

package/llms/03-sass-variables-and-mixins.md

@@ -398,8 +398,8 @@
 | Mixin | Parameters |
 |---|---|
 | breakpoint | $breakpoint |
-| layout-max | — |
-| grid | — |
+| layout-max | $legacy-padding: false |
+| rds-grid | — |
 
 ### _shadow.scss
 

package/llms/04-layouts.md

@@ -140,7 +140,7 @@ CONTEXTUAL A/B
 Layout A: padding 16px mobile, 24px tablet y 32px desktop, máximo 1600px. Layout B: padding progresivo hasta 72px, máximo 1584px.
 MIXIN SASS
 `@include layout-max`
-El mismo contenedor aplicado a tu propio selector, para cuando no puedes o no quieres añadir la clase al HTML.
+Espaciado interior responsive en el eje en línea y ancho máximo para tu propio selector, sin reiniciar el padding del eje de bloque.
 
 `.rds-layout-max` sigue el layout declarado en `body[data-rds-layout]`: aplica los márgenes de A sin atributo (o con `"a"`) y los de B con `data-rds-layout="b"`. Así, componentes y plantillas transversales no necesitan conocer el layout de la página.
 
@@ -155,22 +155,29 @@ El mismo contenedor aplicado a tu propio selector, para cuando no puedes o no qu
 
 #### Como mixin Sass
 
-Si no puedes añadir la clase al HTML (por ejemplo, en un componente de AEM o en una plantilla de terceros), aplica el mismo contenedor desde Sass con `layout-max`:
+Usa `layout-max` para selectores propios, por ejemplo en componentes de AEM o plantillas de terceros. Aplica el mismo espaciado interior responsive y los mismos anchos máximos que las clases de contenedor, pero conserva el padding del eje de bloque definido por el consumidor:
 
 ```scss
 @use 'energy-foundations/src/rds-variables' as rds;
 
 .portal-main {
+  padding-block: 40px;
   @include rds.layout-max;
 }
 ```
 
-Genera exactamente las mismas reglas que `.rds-layout-max`, aplicadas a tu selector: los márgenes de A o de B según el atributo del `body`, sin parámetros que elegir.
+El mixin genera `padding-inline` en todos los breakpoints. En escritura horizontal, el ejemplo conserva 40px de padding superior e inferior, mientras que el espaciado izquierdo y derecho sigue el Layout A o B. Puedes declarar el padding del eje de bloque antes o después del include; ya no necesitas sobrescribir un reset responsive.
+
+- `.rds-layout-max` y `.rds-e-layout-max` conservan su `padding: 0 X` histórico en todos los breakpoints, incluido el reset superior e inferior. Los proyectos que ya usan estas clases no necesitan migrar.
+- El argumento opcional `$legacy-padding: true` reproduce ese padding físico por compatibilidad; las clases públicas lo utilizan internamente. Para selectores propios, normalmente debes usar el comportamiento por defecto, sin argumentos.
+- `padding-inline` sigue el modo de escritura: afecta a izquierda/derecha en `horizontal-tb` y a arriba/abajo en `vertical-rl` o `vertical-lr`. El mixin conserva el padding del eje de bloque, no necesariamente el padding físico superior e inferior. Las media queries y `max-width` siguen usando ejes físicos.
+- El comportamiento por defecto requiere un navegador compatible con `padding-inline`; no se generan declaraciones físicas alternativas. Las clases existentes conservan sus declaraciones físicas.
+- El comportamiento de los márgenes no cambia: las reglas ultrawide siguen usando `margin: 0 auto`.
 
 - Debe usarse dentro de un selector; en el nivel raíz la compilación falla con un mensaje claro.
 - Funciona con cualquier selector, también sobre el propio `body` o con condiciones del `body` o del `html`, como `.dark .portal-main`.
 - La especificidad es la de tu selector: el mixin no la aumenta.
-- Puedes combinarlo con tus propias reglas; declara después las que quieras que prevalezcan.
+- Las propiedades abreviadas del consumidor, como `padding`, pueden seguir sobrescribiendo el espaciado del eje en línea según la especificidad y el orden de las reglas. Usa preferentemente `padding-block` para controlar el espaciado del eje de bloque de forma independiente.
 
 ### Composición contextual
 
@@ -218,17 +225,17 @@ No existe una escala tipográfica específica para tablet. El breakpoint `deskto
 
 ### Mixin Sass de grid
 
-El mixin público `grid` aplica el mismo comportamiento que `.rds-grid` a un selector propio, sin añadir esa clase al HTML:
+El mixin público `rds-grid` aplica el mismo comportamiento que `.rds-grid` a un selector propio, sin añadir esa clase al HTML:
 
 ```scss
 @use 'energy-foundations/src/rds-variables' as rds;
 
 .mi-grid {
-  @include rds.grid;
+  @include rds.rds-grid;
 }
 ```
 
-También está disponible desde `energy-foundations/src/mixins/layout`. Con `@use 'energy-foundations/src/rds-variables' as *`, se incluye mediante `@include grid`.
+También está disponible desde `energy-foundations/src/mixins/layout`. Con `@use 'energy-foundations/src/rds-variables' as *`, se incluye mediante `@include rds-grid;`.
 
 La clase `.rds-grid` consume ese mismo mixin. Ambos conservan display, ancho completo, centrado, columnas y gaps según los mapas `$grid-config` y `$grid-config-b` y el layout global del `body`. Inclúyelo dentro de un selector de un elemento descendiente del `body`; invocarlo en la raíz de la hoja Sass produce un error explícito.
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "energy-foundations",
-  "version": "2.5.0-beta.2",
+  "version": "2.5.0",
   "config": {
     "commitizen": {
       "path": "node_modules/cz-customizable"
     },
     "cz-customizable": {
-      "config": ".cz-config.ts"
+      "config": ".cz-config.cjs"
     }
   },
   "devDependencies": {
@@ -39,7 +39,7 @@
     "postcss-banner": "^4.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "release-it": "^17.3.0",
+    "release-it": "^21.1.1",
     "sass": "^1.94.2",
     "storybook": "^8.2.1",
     "storybook-addon-sass-postcss": "^0.3.0",

package/src/foundations/_grid.scss

@@ -6,14 +6,14 @@
 @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.
+// Preserve historical physical padding; the default mixin only manages inline gutters.
 .rds-e-layout-max,
 .rds-layout-max {
-  @include layout-max;
+  @include layout-max($legacy-padding: true);
 }
 
 .rds-grid {
-  @include grid;
+  @include rds-grid;
 }
 
 // Map of breakpoint names to abbreviations

package/src/generated/icon-layers.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-10-22T09:48:17.799Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-27T11:09:01.884Z */
 /* 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-10-22T09:48:17.799Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-27T11:09:01.884Z */
 /* 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-10-22T09:48:17.799Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-27T11:09:01.884Z */
 /* 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-10-22T09:48:17.799Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-27T11:09:01.884Z */
 /* eslint-disable */
 export const iconNames: string[] = [
   "ac-aire-acondicionado",

package/src/mixins/_layout.scss

@@ -100,51 +100,61 @@ $_active-layout: null;
   $_active-layout: $previous-layout !global;
 }
 
+// Keep the public CSS classes' physical padding and responsive resets unchanged.
+@mixin _layout-max-padding($value, $legacy-padding) {
+  @if $legacy-padding {
+    padding: 0 $value;
+  } @else {
+    padding-inline: $value;
+  }
+}
+
 // 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.
+// Inline gutters preserve consumer block padding. Legacy padding is reserved for class compatibility.
 // use:
 //  .portal-main {
 //    @include layout-max;
 //  }
-@mixin layout-max {
+@mixin layout-max($legacy-padding: false) {
   @if not & {
     @error 'layout-max must be included inside a selector, e.g. `.portal-main { @include layout-max; }`.';
   }
 
-  padding: 0 $g-padding-mobile;
+  @include _layout-max-padding($g-padding-mobile, $legacy-padding);
 
   @include breakpoint(tablet) {
-    padding: 0 $g-padding-tablet;
+    @include _layout-max-padding($g-padding-tablet, $legacy-padding);
   }
 
   @include breakpoint(desktop) {
-    padding: 0 $g-padding-desktop;
+    @include _layout-max-padding($g-padding-desktop, $legacy-padding);
   }
 
   @include _layout-context(a) {
     @include fixed-breakpoint(ultrawide) {
       margin: 0 auto;
       max-width: 1600px;
-      padding: 0 $g-padding-ultrawide;
+      @include _layout-max-padding($g-padding-ultrawide, $legacy-padding);
     }
   }
 
   @include _layout-context(b) {
     @include fixed-breakpoint(desktop-large-v2) {
-      padding: 0 72px;
+      @include _layout-max-padding(72px, $legacy-padding);
     }
 
     @include fixed-breakpoint(ultrawide-v2) {
       margin: 0 auto;
       max-width: 1584px;
-      padding: 0 72px;
+      @include _layout-max-padding(72px, $legacy-padding);
     }
   }
 }
 
-@mixin grid {
+@mixin rds-grid {
   @if not & {
-    @error 'grid must be included inside a selector, e.g. `.portal-grid { @include grid; }`.';
+    @error 'rds-grid must be included inside a selector, e.g. `.portal-grid { @include rds-grid; }`.';
   }
 
   display: grid;