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

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
 

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

@@ -385,16 +385,35 @@
 
 ## Mixins
 
+### _elevation.scss
+
+| Mixin | Parameters |
+|---|---|
+| rds-style-effect-overlay | — |
+| rds-style-effect-glass | — |
+| rds-style-effect-glassnavy | — |
+
 ### _layout.scss
 
 | Mixin | Parameters |
 |---|---|
 | breakpoint | $breakpoint |
+| layout-max | — |
+| grid | — |
+
+### _shadow.scss
+
+| Mixin | Parameters |
+|---|---|
+| rds-style-shadow-s | — |
+| rds-style-shadow-m | — |
+| rds-style-shadow-negative | — |
 
 ### _state.scss
 
 | Mixin | Parameters |
 |---|---|
+| rds-style-state-disabled | — |
 | rds-style-border-focus | $color: $rds-color-interactive-border-state-focus,
   $borderWidth: 2px,
   $internalColor: $rds-color-neutral-white,

package/llms/04-layouts.md

@@ -6,10 +6,10 @@ Layout A es el valor por defecto y Layout B es editorial y opt-in. No migres por
 
 | Perfil | Contexto tipográfico | Contenedor | Grid |
 |---|---|---|---|
-| A | body sin atributo data-rds-layout | .rds-layout-max | .rds-grid |
-| B | body[data-rds-layout="b"] | .rds-layout-editorial | .rds-grid-editorial |
+| A | body sin atributo data-rds-layout | .rds-layout-max o @include rds.layout-max (contextual) | .rds-grid |
+| B | body[data-rds-layout="b"] | .rds-layout-max o @include rds.layout-max (contextual) | .rds-grid (contextual) |
 
-Estas tres capas son independientes. Un contenedor editorial local no activa el contexto tipográfico B. Los helpers rds-col-* y Flex responsive siguen usando los cortes de A; no los trates como helpers B.
+El contenedor .rds-layout-max y el grid .rds-grid siguen automáticamente el atributo del body. No existe contenedor ni clase de grid editorial local. Los helpers rds-col-* y Flex responsive siguen usando los cortes de A; no los trates como helpers B.
 
 Solo la página o el shell controla el atributo global. Dos perfiles tipográficos simultáneos requieren un contexto local diseñado expresamente; no alternes el body desde componentes individuales.
 
@@ -17,88 +17,176 @@ Solo la página o el shell controla el atributo global. Dos perfiles tipográfic
 
 ### Breakpoints Sass
 
-A Layout A Breakpoints default
+A Layout A Sin atributo en el body (por defecto)
 `mobile`: max-width: 719px
 `tablet`: min-width: 720px
 `desktop`: min-width: 1280px
 `desktop-large`: min-width: 1440px
 `ultrawide`: min-width: 1600px
-B Layout B Breakpoints editoriales
-`mobile-v2`: max-width: 799px
-`tablet-v2`: min-width: 800px
-`desktop-v2`: min-width: 1024px
-`desktop-large-v2`: min-width: 1250px
-`ultrawide-v2`: min-width: 1584px
+B Layout B Con body[data-rds-layout="b"]
+`mobile`: max-width: 799px
+`tablet`: min-width: 800px
+`desktop`: min-width: 1024px
+`desktop-large`: min-width: 1250px
+`ultrawide`: min-width: 1584px
 
-Los nombres `*-v2` se conservan por compatibilidad. Representan los breakpoints de Layout B.
+Los nombres son los mismos en ambos layouts: el atributo del `body` decide qué valor se aplica.
 
 ```scss
 .component {
   // Mobile first
 
   @include breakpoint(tablet) {
-    // Layout A desde 720px
+    // Layout A desde 720px y Layout B desde 800px, según el body
   }
+}
+```
+
+#### Breakpoints contextuales
 
-  @include breakpoint(tablet-v2) {
-    // Layout B desde 800px
+`breakpoint` siempre tiene en cuenta el layout declarado en el `body` para los nombres semánticos (`mobile`, `tablet`, `desktop`, `desktop-large` y `ultrawide`). No hay parámetros ni configuración que activar:
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.card {
+  flex-direction: column;
+
+  @include rds.breakpoint(desktop) {
+    flex-direction: row;
   }
 }
 ```
 
+El mixin genera dos reglas excluyentes: desktop desde 1280px bajo `body:not([data-rds-layout="b"])`
+y desde 1024px bajo `body[data-rds-layout="b"]`. `:where()` no aumenta la especificidad.
+Sin atributo, o con `data-rds-layout="a"`, se aplica A. El mismo CSS compilado sirve para ambos layouts.
+Los estilos base quedan fuera del mixin y se comparten.
+
+También puede usarse en el nivel raíz, escribiendo los selectores dentro del bloque. Ambas formas aplican los mismos cortes:
+
+```scss
+@include rds.breakpoint(desktop) {
+  .card {
+    flex-direction: row;
+  }
+}
+```
+
+En el nivel raíz, Sass no permite al mixin inspeccionar los selectores del bloque, así que el contexto se añade delante (`:where(body…) .card`). Por eso, dentro del bloque solo deben ir selectores cuyos ancestros estén dentro del `body`. Usa la forma anidada cuando el selector:
+
+- sea `:root`, `html` o `body`;
+- dependa de una clase o atributo del `body` o del `html`, como `.dark .card`, `[dir='rtl'] .card` o `.no-js .card`.
+
+Tampoco escribas declaraciones sueltas en el nivel raíz: se aplicarían sobre el propio `body`.
+
+Los breakpoints anidados reutilizan el layout del breakpoint exterior, así que solo se añade un contexto:
+
+```scss
+.card {
+  @include rds.breakpoint(tablet) {
+    gap: 16px;
+
+    @include rds.breakpoint(desktop) {
+      gap: 24px; // A: 720px y 1280px · B: 800px y 1024px
+    }
+  }
+}
+```
+
+En la forma anidada, la condición del layout se comprueba sobre el propio elemento seleccionado, así que funcionan también las condiciones del `body` o del `html` y los propios `body`, `html` y `:root`:
+
+```scss
+:root {
+  --page-gap: 16px;
+
+  @include rds.breakpoint(desktop) {
+    --page-gap: 24px;
+  }
+}
+
+.dark .card {
+  @include rds.breakpoint(tablet) {
+    padding: 24px; // funciona aunque .dark esté en el body
+  }
+}
+```
+
+- La condición se inserta al principio del elemento seleccionado: `.dark :where(body[data-rds-layout='b'], body[data-rds-layout='b'] *).card`. Así siguen funcionando `&--modificador`, `&__elemento`, `&:hover` y los pseudoelementos.
+- `html` y `:root` comprueban su `body` hijo con `:has()`: `:where(:has(> body[data-rds-layout='b'])):root`. Requiere Chrome 105, Safari 15.4 o Firefox 121; en navegadores sin `:has()` esa regla no se aplica y se mantiene el valor base.
+- Todas las condiciones van dentro de `:where()`, así que la especificidad no cambia.
+- Un selector que ya limita el layout a mano (`body[data-rds-layout='b'] .card`) compila y solo se aplica en Layout B, con los cortes de B.
+
+Las claves personalizadas añadidas al mapa `$breakpoints` son cortes fijos que no dependen del `body`.
+Los valores se leen del mapa `$breakpoints` configurado por el consumidor. Si falta uno de los dos cortes de un nombre semántico, la compilación falla.
+Una clave desconocida mantiene el warning histórico.
+
+El contexto se resuelve a partir del `body` del documento, así que no funciona dentro de Shadow DOM. Un iframe utiliza el atributo de su propio `body`.
+En Vue `scoped`, el contexto global debe quedar fuera del scope: utiliza un bloque de estilos no scoped para estas reglas.
+El atributo global del `body` selecciona B y las clases `.rds-layout-max` y `.rds-grid` adaptan sus reglas al contexto.
+
+Si distribuyes CSS precompilado, el atributo del `body` debe estar presente en la página para seleccionar el perfil correspondiente.
+
+Las primitivas internas que necesitan cortes fijos (helpers `rds-col-*`, Flex responsive y la escala tipográfica) usan un mixin interno que no forma parte de la API pública.
+En páginas sin atributo, los cortes son los mismos que antes: no es necesario migrar las integraciones existentes de Layout A.
+
 ### Contenedores
 
 LEGACY
 `.rds-e-layout-max`
-Alias compatible de `.rds-layout-max`.
-LAYOUT A
+Alias compatible de `.rds-layout-max`, con el mismo comportamiento contextual.
+CONTEXTUAL A/B
 `.rds-layout-max`
-Padding 16px mobile, 24px tablet y 32px desktop. Máximo 1600px.
-LAYOUT B
-`.rds-layout-editorial`
-Padding progresivo hasta 72px. Máximo editorial de 1584px.
+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.
 
-### Riesgo: doble fuente de verdad
-
-El contexto tipográfico del `body` y las clases de contenedor y grid son independientes. La librería no detecta ni corrige automáticamente las combinaciones incoherentes.
-
-#### Caso incoherente: tipografía B con maquetación A
+`.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.
 
 ```html
 <body data-rds-layout="b">
-  <main class="rds-layout-max">
-    <div class="rds-grid"><!-- Contenido --></div>
-  </main>
+  <main class="rds-layout-max">...</main>
 </body>
 ```
 
-La tipografía cambia a desktop desde 1024px, pero el grid no pasa a 12 columnas hasta 1280px. El contenedor conserva los márgenes de A. Por ejemplo, a 1100px se combina tipografía desktop B con el grid de 8 columnas de A.
+- No existe un contenedor editorial local: el contenedor siempre sigue al `body`.
+- Los selectores de contexto usan `:where()`, así que la especificidad es la misma que la de una clase simple.
 
-#### Caso incoherente: tipografía A con maquetación B
+#### Como mixin Sass
 
-```html
-<body>
-  <main class="rds-layout-editorial">
-    <div class="rds-grid-editorial"><!-- Contenido --></div>
-  </main>
-</body>
+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`:
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.portal-main {
+  @include rds.layout-max;
+}
 ```
 
-El grid pasa a 12 columnas desde 1024px y el contenedor usa los márgenes de B, pero la tipografía mantiene la escala base de A hasta 1280px.
+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.
+
+- 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.
 
-#### Composición recomendada para una página B
+### Composición contextual
+
+El contenedor `.rds-layout-max` y el grid `.rds-grid` siguen al `body`, por lo que la página no necesita seleccionar una clase de grid editorial alternativa.
 
 ```html
 <body data-rds-layout="b">
-  <main class="rds-layout-editorial">
-    <div class="rds-grid-editorial"><!-- Contenido --></div>
+  <main class="rds-layout-max">
+    <div class="rds-grid"><!-- Contenido --></div>
   </main>
 </body>
 ```
 
-Para una página A, omite el atributo y combina `.rds-layout-max` con `.rds-grid`. La clase del contenedor solo controla ancho y márgenes: no crea un grid ni selecciona la tipografía.
+Con `data-rds-layout="b"`, la tipografía, el contenedor y el grid usan los cortes de Layout B. Para Layout A, omite el atributo. El contenedor solo controla ancho y márgenes; el grid controla columnas y gaps.
 
-Resuelve el perfil una sola vez en el shell de Vue o en el Page Component de AEM y deriva de esa decisión las tres capas. Al cambiar de ruta, actualiza tanto el contexto global como el contenedor y el grid del destino.
+Resuelve el perfil una sola vez en el shell de Vue o en el Page Component de AEM. Al cambiar de ruta, actualiza el contexto global del destino y las primitivas se adaptan.
 
 Esta composición no cambia los helpers `rds-col-*` ni Flex responsive: siguen usando los breakpoints de A. Para spans editoriales, utiliza las reglas Sass del perfil B descritas en Grid.
 
@@ -128,6 +216,24 @@ No existe una escala tipográfica específica para tablet. El breakpoint `deskto
 
 ## Grid: columnas, offsets y perfil editorial
 
+### 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:
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.mi-grid {
+  @include 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`.
+
+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.
+
+El mixin solo configura el contenedor: no incorpora `layout-max`, no genera utilidades de columnas y no cambia `rds-col-*` ni sus offsets.
+
 ### Columnas y offsets · Layout A
 
 El perfil A usa 4 columnas con gap de 16px hasta 719px, 8 columnas con gap de 16px desde 720px y 12 columnas con gap de 24px desde 1280px.
@@ -155,15 +261,14 @@ Los offsets disponibles van de cero a `máximo de columnas - n`.
 </article>
 ```
 
-### Grid editorial · Layout B
+### Grid contextual · Layout B
 
-El grid editorial usa los cortes de B, pero los helpers `rds-col-*` actuales se generan con los de A.
-Por tanto, no basta con cambiar la clase del grid para sincronizar los spans.
-Para un componente editorial, define sus columnas con los mixins de B:
+El grid `.rds-grid` usa automáticamente los cortes de B cuando el `body` tiene `data-rds-layout="b"`.
+Los helpers `rds-col-*` actuales se generan con los cortes de A. Para spans que sigan el layout de la página, define las columnas en el Sass del componente con `breakpoint`, que aplica los cortes de A o B según el `body`:
 
 ```html
-<div class="rds-layout-editorial">
-  <div class="rds-grid-editorial">
+<div class="rds-layout-max">
+  <div class="rds-grid">
     <article class="portal-editorial-card">Contenido</article>
   </div>
 </div>
@@ -175,12 +280,12 @@ Para un componente editorial, define sus columnas con los mixins de B:
 .portal-editorial-card {
   grid-column: span 4;
 
-  @include rds.breakpoint(tablet-v2) {
-    grid-column: span 4;
+  @include rds.breakpoint(tablet) {
+    grid-column: span 4; // A: desde 720px · B: desde 800px
   }
 
-  @include rds.breakpoint(desktop-v2) {
-    grid-column: span 6;
+  @include rds.breakpoint(desktop) {
+    grid-column: span 6; // A: desde 1280px · B: desde 1024px
   }
 }
 ```
@@ -303,8 +408,8 @@ El layout debe resolverse en el Page Component, template o policy porque esa cap
 ```html
 <!-- Layout B: selección editorial -->
 <body data-rds-layout="b">
-  <main class="rds-layout-editorial">
-    <div class="rds-grid-editorial"><!-- Contenido --></div>
+  <main class="rds-layout-max">
+    <div class="rds-grid"><!-- Contenido --></div>
   </main>
 </body>
 ```
@@ -336,5 +441,15 @@ Los componentes comunes y moleculares:
 - No se duplican como componente A y componente B.
 - Permiten que el Page Component y Foundations resuelvan el contexto.
 
-Los componentes específicos de portal siguen el mismo contrato. Pueden usar un contenedor editorial local, pero `.rds-layout-editorial` por sí sola no cambia los breakpoints tipográficos de toda la página.
+Los componentes específicos de portal siguen el mismo contrato. `.rds-layout-max` adapta sus márgenes al atributo del `body`, pero ninguna clase cambia por sí sola los breakpoints tipográficos de la página.
+
+Si la plantilla HTL no permite añadir la clase al contenedor, aplica el mismo comportamiento desde el Sass del componente:
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.cmp-page__main {
+  @include rds.layout-max;
+}
+```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "energy-foundations",
-  "version": "2.5.0-beta.0",
+  "version": "2.5.0-beta.2",
   "config": {
     "commitizen": {
       "path": "node_modules/cz-customizable"
@@ -98,6 +98,7 @@
     "storybook:preview": "npx http-server storybook-static",
     "stylelint": "npx stylelint '**/*.scss'",
     "stylelint:fix": "npx stylelint '**/*.scss' --fix",
+    "test:breakpoints": "node tests/verify-breakpoints.mjs",
     "test:typography": "node tests/verify-typography.mjs"
   },
   "style": "dist/style.css",

package/src/foundations/_grid.scss

@@ -3,74 +3,17 @@
 *************************/
 @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 {
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  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);
-    }
-  }
-}
-
-.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);
-    }
-  }
+  @include grid;
 }
 
 // Map of breakpoint names to abbreviations
@@ -86,7 +29,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 +54,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 +96,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 +129,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/src/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-22T09:48:17.799Z */
 /* 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-15T08:50:14.974Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-22T09:48:17.799Z */
 /* 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-15T08:50:14.974Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-22T09:48:17.799Z */
 /* 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-15T08:50:14.974Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-22T09:48:17.799Z */
 /* eslint-disable */
 export const iconNames: string[] = [
   "ac-aire-acondicionado",

package/src/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.";
+  }
+}