cloudstructs 0.9.44 → 0.9.46

package/node_modules/mjml-carousel/README.md

@@ -1,12 +1,10 @@
-## mj-carousel
+### mj-carousel
 
-<p style="text-align: center;" >
-  <img src="https://static.mailjet.com/mjml-website/documentation/carousel-example.gif" alt="desktop" />
-</p>
-
-`mj-carousel` displays a gallery of images or "carousel". Readers can interact by hovering and clicking on thumbnails depending on the email client they use.
+Displays a gallery of images or "carousel". Readers can interact by hovering and clicking on thumbnails depending on the email client they use.
 
-This component enables you to set the styles of the carousel elements.
+<figure>
+  <img src="https://static.mailjet.com/mjml-website/documentation/carousel-example.gif" alt="desktop" />
+</figure>
 
 ```xml
 <mjml>
@@ -24,44 +22,53 @@ This component enables you to set the styles of the carousel elements.
 </mjml>
 ```
 
-<p style="text-align: center;" >
-  <a href="https://mjml.io/try-it-live/components/carousel">
-    <img width="100px" src="https://mjml.io/assets/img/svg/TRYITLIVE.svg" alt="sexy" />
-  </a>
-</p>
+#### Attributes
+
+| attribute                  | accepts                        | description                                            | default value                     |
+| -------------------------- | ------------------------------ | ------------------------------------------------------ | --------------------------------- |
+| align                      | `left` `center` `right`        | horizontal alignment                                   | `center`                          |
+| border-radius              | `px` `%`                       | border radius                                          | `6px`                             |
+| container-background-color | CSS color formats              | column background color                                |                                   |
+| css-class                  | string                         | class name, added to the root HTML element created     |                                   |
+| icon-width                 | `px` `%`                       | width of the icons on left and right of the main image | `44px`                            |
+| left-icon                  | string                         | icon on the left of the main image                     | `https://i.imgur.com/xTh3hln.png` |
+| padding                    | `px` `%`                       | carousel padding, supports up to 4 parameters          |                                   |
+| padding-bottom             | `px` `%`                       | carousel bottom padding                                |                                   |
+| padding-left               | `px` `%`                       | carousel left padding                                  |                                   |
+| padding-right              | `px` `%`                       | carousel right padding                                 |                                   |
+| padding-top                | `px` `%`                       | carousel top padding                                   |                                   |
+| right-icon                 | string                         | icon on the right of the main image                    | `https://i.imgur.com/os7o9kz.png` |
+| tb-border                  | string                         | border of the thumbnails in CSS border format          | `2px solid transparent`           |
+| tb-border-radius           | `px` `%`                       | border-radius of the thumbnails                        | `6px`                             |
+| tb-hover-border-color      | CSS color formats              | border color of the hovered thumbnail                  | `#fead0d`                         |
+| tb-selected-border-color   | CSS color formats              | border color of the selected thumbnail                 | `#ccc`                            |
+| tb-width                   | `px` `%`                       | thumbnail width                                        |                                   |
+| thumbnails                 | `visible` `hidden` `supported` | display the thumbnails                                 | `hidden`                          |
 
-<aside class="notice">
-  `mj-carousel-image` is an "ending tag", which means it can contain HTML code which will be left as it is, so it can contain HTML tags with attributes, but it cannot contain other MJML components. More information about ending tags <a href="#ending-tags">in this section</a>.
-</aside>
+<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/carousel">Try it live</a></p>
 
+#### mj-carousel-image
 
-attribute | unit | description | default value
-----------|------|-------------|---------------
-align | string | horizontal alignment | center
-container-background-color | string | column background color | none
-border-radius | px | border radius | n/a
-css-class | string | class name, added to the root HTML element created | n/a
-icon-width | px | width of the icons on left and right of the main image | 44px
-left-icon | url | icon on the left of the main image | https://i.imgur.com/xTh3hln.png
-right-icon | url | icon on the right of the main image | https://i.imgur.com/os7o9kz.png
-tb-border | css border format | border of the thumbnails | none
-tb-border-radius | px | border-radius of the thumbnails | none
-tb-hover-border-color | string | css border color of the hovered thumbnail | none
-tb-selected-border-color | string | css border color of the selected thumbnail | none
-tb-width | px | thumbnail width | null
-thumbnails | String | visible / hidden / supported ('supported' shows only for clients that support full carousel functionality) | visible
+Enables you to add and style the images in the carousel.
 
-### mj-carousel-image
+<div class="alert alert-note" role="alert">
+  <p>Note</p>
+  <p><code>mj-carousel-image</code> is an "ending tag", which means that it can contain HTML code but it cannot contain other MJML components.</p>
+  <p>More information about ending tags <a href="#ending-tags">in this section</a>.</p>
+</div>
 
-This component enables you to add and style the images in the carousel.
+#### Attributes
 
-attribute | unit | description | default value
-----------|------|-------------|---------------
-alt | string | image description | ''
-css-class | string | class name, added to the root HTML element created | n/a
-href | url | link to redirect to on click | n/a
-rel | string | specify the rel attribute | n/a
-src | url | image source | n/a
-target | string | link target on click | \_blank
-thumbnails-src | url | image source to have a thumbnail different than the image it's linked to | null
-title | string | tooltip & accessibility | n/a
+| attribute        | accepts  | description                                        | default value |
+| ---------------- | -------- | -------------------------------------------------- | ------------- |
+| alt              | string   | image description                                  | `''`          |
+| border-radius    | `px` `%` | border radius of the main image                    |               |
+| css-class        | string   | class name, added to the root HTML element created |               |
+| href             | string   | link to redirect to on click, <br>URL format       |               |
+| rel              | string   | specify the rel attribute                          |               |
+| src              | string   | URL format                                         |               |
+| target           | string   | link target on click                               | `_blank`      |
+| tb-border        | string   | CSS border format                                  |               |
+| tb-border-radius | `px` `%` | border radius of the thumbnail                     |               |
+| thumbnails-src   | string   | specify a different thumbnail image in URL format  |               |
+| title            | string   | tooltip & accessibility                            |               |

package/node_modules/mjml-carousel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-carousel",
   "description": "mjml-carousel",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,11 +23,11 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "lodash": "^4.17.21",
-    "mjml-core": "4.17.1"
+    "mjml-core": "4.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "3f3b0bcc5f297d9bc84999908c213bc42d9792eb"
+  "gitHead": "7f4872c48af877d98448335fb9002585cfc8fcbf"
 }

package/node_modules/mjml-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-cli",
   "description": "MJML: the only framework that makes responsive-email easy",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "main": "bin/mjml",
   "bin": {
     "mjml-cli": "bin/mjml"
@@ -32,15 +32,15 @@
     "js-beautify": "^1.6.14",
     "lodash": "^4.17.21",
     "minimatch": "^9.0.3",
-    "mjml-core": "4.17.1",
-    "mjml-migrate": "4.17.1",
-    "mjml-parser-xml": "4.17.1",
-    "mjml-validator": "4.17.1",
+    "mjml-core": "4.18.0",
+    "mjml-migrate": "4.18.0",
+    "mjml-parser-xml": "4.18.0",
+    "mjml-validator": "4.18.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "3f3b0bcc5f297d9bc84999908c213bc42d9792eb"
+  "gitHead": "7f4872c48af877d98448335fb9002585cfc8fcbf"
 }

package/node_modules/mjml-column/README.md

@@ -1,12 +1,14 @@
-## mj-column
+### mj-column
 
-Columns enable you to horizontally organize the content within your sections. They must be located under `mj-section` tags in order to be considered by the engine.
-To be responsive, columns are expressed in terms of percentage.
+Columns enable you to organize the content of your sections into distinct columns which stack when viewed on a mobile device.
 
-<aside class="notice">
-  The sum of columns in a section cannot be greater than
-      the width of the parent `mj-section` (or 100%).
-</aside>
+They must be located within `mj-section` tags in order to be considered by the engine.
+
+<div class="alert alert-caution" role="alert">
+  <p>Caution</p>
+  <p>The sum of columns in a section cannot be greater than
+      the width of the parent <code>mj-section</code> (or 100%).</p>
+</div>
 
 Every single column has to contain something because they are responsive containers, and will be vertically stacked on a mobile view. Any standard component, or component that you have defined and registered, can be placed within a column – except `mj-column` or `mj-section` elements.
 
@@ -25,41 +27,42 @@ Every single column has to contain something because they are responsive contain
 </mjml>
 ```
 
-<p style="text-align: center;" >
-  <a href="https://mjml.io/try-it-live/components/column">
-    <img width="100px" src="https://mjml.io/assets/img/svg/TRYITLIVE.svg" alt="try it live" />
-  </a>
-</p>
+<div class="alert alert-caution" role="alert">
+  <p>Caution</p>
+  <p>Columns are used as a container for your content and should not be used to offset. Any MJML component included in a column will have a width equivalent to 100% of this column's width.</p>
+</div>
+
+<div class="alert alert-caution" role="alert">
+  <p>Caution</p>
+  <p>Neither the <code>mj-column</code> or <code>mj-section</code> tags can be nested in an <code>mj-column</code> tag</p>
+</div>
 
-<aside class="notice">
-  Columns are meant to be used as a container for your content. They must not be used as offset. Any mj-element included in a column will have a width equivalent to 100% of this column's width.
-</aside>
+#### Attributes
 
-<aside class="warning">
-  Columns cannot be nested into columns, and sections cannot be nested into columns as well.
-</aside>
+| attribute              | accepts                 | description                                                                              | default attributes                             |
+| ---------------------- | ----------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| background-color       | CSS color formats       | background color for a column                                                            |                                                |
+| border                 | string                  | CSS border format                                                                        |                                                |
+| border-bottom          | string                  | CSS border format                                                                        |                                                |
+| border-left            | string                  | CSS border format                                                                        |                                                |
+| border-radius          | `px` `%`                | border radius                                                                            |                                                |
+| border-right           | string                  | CSS border format                                                                        |                                                |
+| border-top             | string                  | CSS border format                                                                        |                                                |
+| css-class              | string                  | class name, added to the root HTML element created                                       |                                                |
+| direction              | `ltr` `rtl`             | set the display order of direct children                                                 | `ltr`                                          |
+| inner-background-color | CSS color formats       | inner background color for column; requires a padding                                    |                                                |
+| inner-border           | string                  | CSS border; requires a padding format                                                    |                                                |
+| inner-border-bottom    | string                  | CSS border format; requires a padding                                                    |                                                |
+| inner-border-left      | string                  | CSS border format; requires a padding                                                    |                                                |
+| inner-border-radius    | `px` `%`                | border radius ; requires a padding                                                       |                                                |
+| inner-border-right     | string                  | CSS border format; requires a padding                                                    |                                                |
+| inner-border-top       | string                  | CSS border format; requires a padding                                                    |                                                |
+| padding                | `px` `%`                | column padding, supports up to 4 parameters                                              |                                                |
+| padding-bottom         | `px` `%`                | column bottom padding                                                                    |                                                |
+| padding-left           | `px` `%`                | column left padding                                                                      |                                                |
+| padding-right          | `px` `%`                | column right padding                                                                     |                                                |
+| padding-top            | `px` `%`                | column top padding                                                                       |                                                |
+| width                  | `px` `%`                | column width                                                                             | (100 / number of non-raw elements in section)% |
+| vertical-align         | `top` `middle` `bottom` | vertical alignment.<br>Note: `middle` only applies when all `mj-column` instances use it | `top`                                          |
 
-attribute              | unit        | description                                                                                  | default attributes
------------------------|-------------|----------------------------------------------------------------------------------------------|----------------------------------------------
-background-color       | color       | background color for a column                                                                | n/a
-inner-background-color | color       | requires: a padding, inner background color for column                                       | n/a
-border                 | string      | css border format                                                                            | none
-border-bottom          | string      | css border format                                                                            | n/a
-border-left            | string      | css border format                                                                            | n/a
-border-right           | string      | css border format                                                                            | n/a
-border-top             | string      | css border format                                                                            | n/a
-border-radius          | percent/px  | border radius                                                                                | n/a
-inner-border           | string      | css border format                                                                            | n/a
-inner-border-bottom    | string      | css border format ; requires a padding                                                       | n/a
-inner-border-left      | string      | css border format ; requires a padding                                                       | n/a
-inner-border-right     | string      | css border format ; requires a padding                                                       | n/a
-inner-border-top       | string      | css border format ; requires a padding                                                       | n/a
-inner-border-radius    | percent/px  | border radius ; requires a padding                                                           | n/a
-width                  | percent/px  | column width                                                                                 | (100 / number of non-raw elements in section)%
-vertical-align         | string      | middle/top/bottom (note: middle works only when adjacent mj-column is also set to middle)    | top
-padding                | px          | supports up to 4 parameters                                                                  | n/a
-padding-top            | px          | section top offset                                                                           | n/a
-padding-bottom         | px          | section bottom offset                                                                        | n/a
-padding-left           | px          | section left offset                                                                          | n/a
-padding-right          | px          | section right offset                                                                         | n/a
-css-class              | string      | class name, added to the root HTML element created                                           | n/a
+<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/column">Try it live</a></p>

package/node_modules/mjml-column/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-column",
   "description": "mjml-column",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,11 +23,11 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "lodash": "^4.17.21",
-    "mjml-core": "4.17.1"
+    "mjml-core": "4.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "3f3b0bcc5f297d9bc84999908c213bc42d9792eb"
+  "gitHead": "7f4872c48af877d98448335fb9002585cfc8fcbf"
 }

package/node_modules/mjml-core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-core",
   "description": "mjml-core",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -29,14 +29,14 @@
     "js-beautify": "^1.6.14",
     "juice": "^10.0.0",
     "lodash": "^4.17.21",
-    "mjml-migrate": "4.17.1",
-    "mjml-parser-xml": "4.17.1",
-    "mjml-validator": "4.17.1"
+    "mjml-migrate": "4.18.0",
+    "mjml-parser-xml": "4.18.0",
+    "mjml-validator": "4.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "chai": "^4.1.1",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "3f3b0bcc5f297d9bc84999908c213bc42d9792eb"
+  "gitHead": "7f4872c48af877d98448335fb9002585cfc8fcbf"
 }

package/node_modules/mjml-divider/README.md

@@ -1,4 +1,4 @@
-## mj-divider
+### mj-divider
 
 Displays a horizontal divider that can be customized like a HTML border.
 
@@ -14,23 +14,21 @@ Displays a horizontal divider that can be customized like a HTML border.
 </mjml>
 ```
 
-<p style="text-align: center;" >
-  <a href="https://mjml.io/try-it-live/components/divider">
-    <img width="100px" src="https://mjml.io/assets/img/svg/TRYITLIVE.svg" alt="try it live" />
-  </a>
-</p>
+#### Attributes
 
-| attribute                  | unit       | description                                        | default value |
-| -------------------------- | -----------| -------------------------------------------------- | ------------- |
-| align                      | string     | left/right/center                                  | center        |
-| border-color               | color      | divider color                                      | #000000       |
-| border-style               | string     | dashed/dotted/solid                                | solid         |
-| border-width               | px         | divider's border width                             | 4px           |
-| container-background-color | color      | inner element background color                     | n/a           |
-| css-class                  | string     | class name, added to the root HTML element created | n/a           |
-| padding                    | px         | supports up to 4 parameters                        | 10px 25px     |
-| padding-bottom             | px         | bottom offset                                      | n/a           |
-| padding-left               | px         | left offset                                        | n/a           |
-| padding-right              | px         | right offset                                       | n/a           |
-| padding-top                | px         | top offset                                         | n/a           |
-| width                      | px/percent | divider width                                      | 100%          |
+| attribute                  | accepts                 | description                                        | default value |
+| -------------------------- | ----------------------- | -------------------------------------------------- | ------------- |
+| align                      | `left` `center` `right` | horizontal alignment                               | `center`      |
+| border-color               | CSS color formats       | divider color                                      | `#000000`     |
+| border-style               | string                  | CSS values, e.g. `dashed` `dotted` `solid`         | `solid`       |
+| border-width               | `px`                    | divider's border width                             | `4px`         |
+| container-background-color | CSS color formats       | inner element background color                     |               |
+| css-class                  | string                  | class name, added to the root HTML element created |               |
+| padding                    | `px` `%`                | divider padding, supports up to 4 parameters       | `10px 25px`   |
+| padding-bottom             | `px` `%`                | divider bottom padding                             |               |
+| padding-left               | `px` `%`                | divider left padding                               |               |
+| padding-right              | `px` `%`                | divider right padding                              |               |
+| padding-top                | `px` `%`                | divider top padding                                |               |
+| width                      | `px` `%`                | divider width                                      | `100%`        |
+
+<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/divider">Try it live</a></p>

package/node_modules/mjml-divider/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-divider",
   "description": "mjml-divider",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,11 +23,11 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "lodash": "^4.17.21",
-    "mjml-core": "4.17.1"
+    "mjml-core": "4.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "3f3b0bcc5f297d9bc84999908c213bc42d9792eb"
+  "gitHead": "7f4872c48af877d98448335fb9002585cfc8fcbf"
 }

package/node_modules/mjml-group/README.md

@@ -1,19 +1,18 @@
-## mj-group
+### mj-group
 
+Prevent adjacent `mj-column` instances from stacking on mobile by wrapping them inside an `mj-group` tag, keeping them side by side on mobile.
 
-<p style="text-align: center;" >
-  Desktop<br />
+<figure>
+  <figcaption>Desktop</figcaption>
   <img src="https://static.mailjet.com/mjml-website/documentation/group-example-1.png"
        alt="easy and quick; responsive" />
-</p>
+</figure>
 
-<p style="text-align: center;" >
-  Mobile<br />
+<figure>
+  <figcaption>Mobile</figcaption>
   <img src="https://static.mailjet.com/mjml-website/documentation/group-example-2.png"
       alt="easy and quick; responsive" />
-</p>
-
-mj-group allows you to prevent columns from stacking on mobile. To do so, wrap the columns inside a `mj-group` tag, so they'll stay side by side on mobile.
+</figure>
 
 ```xml
 <mjml>
@@ -40,28 +39,25 @@ mj-group allows you to prevent columns from stacking on mobile. To do so, wrap t
 </mjml>
 ```
 
-<p style="text-align: center;" >
-  <a href="https://mjml.io/try-it-live/components/group"><img width="100px" src="https://mjml.io/assets/img/svg/TRYITLIVE.svg" alt="try it live" /></a>
-</p>
-
-<aside class="notice">
-  Column inside a group must have a width in percentage, not in pixel
-</aside>
+<div class="alert alert-important" role="alert">
+  <p>Important</p>
+  <p>Column inside a group must have a width in percentage, not in pixel.</p>
+</div>
 
+<div class="alert alert-note" role="alert">
+  <p>Note</p>
+  <p>You can nest both <code>mj-column</code> and <code>mj-group</code> inside a <code>mj-section</code>.</p>
+</div>
 
-<aside class="notice">
-  You can have both column and group inside a Section
-</aside>
 
-<aside class="notice">
-  <b>iOS 9 Issue:</b> If you use a HTML beautifier for MJML output, iOS9 will render your columns inside a mj-group as stacked. On the output HTML, remove the <b>blank space</b> between the two columns inside a mj-group.
-</aside>
+#### Attributes
 
+| attribute        | accepts           | description                                        | default attributes                             |
+| ---------------- | ----------------- | -------------------------------------------------- | ---------------------------------------------- |
+| background-color | CSS color formats | background color for a group                       |                                                |
+| css-class        | string            | class name, added to the root HTML element created |                                                |
+| direction        | `ltr` `rtl`       | set the display order of direct children           | `ltr`                                          |
+| vertical-align   | string            | CSS values, e.g. `middle` `top` `bottom`           |                                                |
+| width            | `px` `%`          | group width                                        | (100 / number of non-raw elements in section)% |
 
-attribute           | unit        | description                    | default attributes
---------------------|-------------|--------------------------------|--------------------------------------
-width               | percent/px  | group width                    | (100 / number of non-raw elements in section)%
-vertical-align      | string      | middle/top/bottom              | top
-background-color    | string      | background color for a group   | n/a
-direction           | ltr / rtl   | set the display order of direct children | ltr
-css-class           | string      | class name, added to the root HTML element created | n/a
+<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/group">Try it live</a></p>

package/node_modules/mjml-group/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-group",
   "description": "mjml-group",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,11 +23,11 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "lodash": "^4.17.21",
-    "mjml-core": "4.17.1"
+    "mjml-core": "4.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "3f3b0bcc5f297d9bc84999908c213bc42d9792eb"
+  "gitHead": "7f4872c48af877d98448335fb9002585cfc8fcbf"
 }

package/node_modules/mjml-head/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-head",
   "description": "mjml-head",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,11 +23,11 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "lodash": "^4.17.21",
-    "mjml-core": "4.17.1"
+    "mjml-core": "4.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "3f3b0bcc5f297d9bc84999908c213bc42d9792eb"
+  "gitHead": "7f4872c48af877d98448335fb9002585cfc8fcbf"
 }

package/node_modules/mjml-head-attributes/README.md

@@ -1,48 +1,43 @@
-## mj-attributes
+### mj-attributes
 
-Inside `mj-attributes`, a tag citing one MJML component (like `mj-text`;
-see example) overrides default settings for listed MJML attributes
-on the one component.
+Inside the `mj-attributes` tag, you can cite other MJML components, like `mj-text` for example, to override the default settings for that component.
 
-An `mj-all` is like the above, but affects all MJML components via the one tag.
+An `mj-all` tag is like the above, but affects all MJML components.
 
-`mj-class` tags create a named group of MJML attributes you can apply to MJML
-components. To apply them, use `mj-class="<name>"`.
+An `mj-class` tag creates a named group of MJML attributes you can apply to MJML
+components using `mj-class="<name>"`.
 
- ```xml
+```xml
 <mjml>
-  <mj-head>
-    <mj-attributes>
-      <mj-text padding="0" />
-      <mj-class name="blue" color="blue" />
-      <mj-class name="big" font-size="20px" />
-      <mj-all font-family="Arial" />
-    </mj-attributes>
-  </mj-head>
-  <mj-body>
-    <mj-section>
-      <mj-column>
-        <mj-text mj-class="blue big">
-          Hello World!
-        </mj-text>
-      </mj-column>
-    </mj-section>
-  </mj-body>
+ <mj-head>
+   <mj-attributes>
+     <mj-text padding="0" />
+     <mj-class name="blue" color="blue" />
+     <mj-class name="big" font-size="20px" />
+     <mj-all font-family="Arial" />
+   </mj-attributes>
+ </mj-head>
+ <mj-body>
+   <mj-section>
+     <mj-column>
+       <mj-text mj-class="blue big">
+         Hello World!
+       </mj-text>
+     </mj-column>
+   </mj-section>
+ </mj-body>
 </mjml>
- ```
+```
 
-<p style="text-align: center;" >
-  <a href="https://mjml.io/try-it-live/components/head-attributes">
-    <img width="100px" src="https://mjml.io/assets/img/svg/TRYITLIVE.svg" alt="try it live" />
-  </a>
-</p>
-
-<aside class="notice">
-  In the following list, MJML applies only the first MJML attributes found:
+<div class="alert alert-important" role="alert">
+  <p>Important</p>
+  <p>MJML will apply found attributes in the following order:</p>
   <ul>
-    <li>inline MJML attributes,</li>
-    <li>the entry for the same MJML component (like, "mj-text") in "mj-attributes",</li>
-    <li>"mj-all" in "mj-attributes", and</li>
-    <li>default MJML values.</li>
+    <li>inline attributes within tags,</li>
+    <li>attributes found in tags within the <code>mj-attributes</code> tag, e.g. <code>mj-text</code>,</li>
+    <li>the <code>mj-all</code> tag wuthin <code>mj-attributes</code>, and</li>
+    <li>the default MJML values.</li>
   </ul>
-</aside>
+</div>
+
+<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/head-attributes">Try it live</a></p>

package/node_modules/mjml-head-attributes/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mjml-head-attributes",
   "description": "mjml-head-attributes",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "main": "lib/index.js",
   "files": [
     "lib"
@@ -23,11 +23,11 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "lodash": "^4.17.21",
-    "mjml-core": "4.17.1"
+    "mjml-core": "4.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "3f3b0bcc5f297d9bc84999908c213bc42d9792eb"
+  "gitHead": "7f4872c48af877d98448335fb9002585cfc8fcbf"
 }