@mapbox/assembly 1.2.0 → 1.4.0

package/README.md

@@ -16,6 +16,10 @@ Assembly targets modern versions of Chrome, Firefox, Safari, and Edge on desktop
 
 See https://labs.mapbox.com/assembly/ for usage guidelines.
 
+## Migration
+
+See our [`Migration guides`](https://github.com/mapbox/assembly/blob/publisher-staging/MIGRATION_GUIDES.md) to understand what changes you might need to make when upgrading Assembly in your project.
+
 ## Custom Builds
 
 Assembly exposes a JS module for creating custom builds. Why might you want to create a custom build?

package/dist/assembly.css

@@ -117,8 +117,7 @@ q::after {
 pre {
   display: block;
   white-space: pre-wrap;
-  -moz-tab-size: 2;
-       tab-size: 2;
+  tab-size: 2;
 }
 
 legend {
@@ -2707,17 +2706,17 @@ textarea {
  */
 
 /**
- * Grids require at minimum two elements: A parent with the class `grid` and a child with the class `col`. By default, each `col` in a grid will occupy equal space. The `grid` class includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
+ * Grids require at minimum two elements: A parent with the class `grid` and a child with the class `col`. To define the width of `col` in a grid, add a width class, `col--auto`, or both. The `grid` class includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
  *
- * When using these classes, do not apply left or right margin or padding directly to the \`grid\` or \`col\` elements or you will face unexpected side-effects.
+ * To avoid unexpected side-effects, do not add margin left or right to `grid` and do not add padding left or right to `col`.
  *
  * @group
  * @memberof Grid
  * @example
  * <div class='grid'>
- *   <div class='col border border--darken10'>one</div>
- *   <div class='col border border--darken10'>two</div>
- *   <div class='col border border--darken10'>three</div>
+ *   <div class='col w-1/3 border border--darken10'>one</div>
+ *   <div class='col w-1/3 border border--darken10'>two</div>
+ *   <div class='col w-1/3 border border--darken10'>three</div>
  * </div>
  */
 .grid {
@@ -2727,13 +2726,12 @@ textarea {
 .col {
   display: block;
   max-width: 100%;
-  flex-grow: 1;
   flex-shrink: 1;
 }
 /** @endgroup */
 
 /**
- * Apply to a `col` element to override a`col--{size}` rule and take on default `col`,occupying equal space with other `col` siblings.
+ * Apply to a `col` element to override a`col--{size}` rule and take on default `col`, occupying equal space with other `col` siblings.
  * This class is designed to be used with `*-mm`, `*-ml`, and `*-mxl` variations
  * to target screen sizes.
  *
@@ -2747,6 +2745,7 @@ textarea {
 .col--auto {
   width: auto !important;
   flex: auto;
+  flex-basis: 0;
 }
 
 /**
@@ -3881,13 +3880,13 @@ scripts/build-layout-scales.js to produce the output you want */
 /** @endgroup */
 
 /**
- * Apply percentage-based margin on the right.
+ * Apply percentage-based margin on the right. When using with `col`, add a width class, `col--auto`, or both to define the size of the element.
  *
  * @group
  * @memberof Margins
  * @example
  * <div class='grid'>
- *   <div class='col mr-1/2 bg-darken10'>mr-1/2</div>
+ *   <div class='col w-1/2 mr-1/2 bg-darken10'>mr-1/2</div>
  * </div>
  */
 .mr-1\/12 {
@@ -4191,13 +4190,13 @@ scripts/build-layout-scales.js to produce the output you want */
 /** @endgroup */
 
 /**
- * Apply percentage-based margin on the left.
+ * Apply percentage-based margin on the left. When using with `col`, add a width class, `col--auto`, or both to define the size of the element.
  *
  * @group
  * @memberof Margins
  * @example
  * <div class='grid'>
- *   <div class='col ml-1/2 bg-darken10'>ml-1/2</div>
+ *   <div class='col w-1/2 ml-1/2 bg-darken10'>ml-1/2</div>
  * </div>
  */
 .ml-1\/12 {
@@ -11215,7 +11214,6 @@ scripts/build-layout-scales.js to produce the output you want */
   border-left-color: rgba(255, 255, 255, 0.25);
   border-right-color: rgba(255, 255, 255, 0.25);
   border-bottom-color: rgba(255, 255, 255, 0.25);
-  border-top-color: currentColor;
 }
 
 .loading--s {
@@ -15332,12 +15330,12 @@ input:checked + .switch--dot-transparent::after {
 .col-mm {
   display: block;
   max-width: 100%;
-  flex-grow: 1;
   flex-shrink: 1;
 }
 .col--auto-mm {
   width: auto !important;
   flex: auto;
+  flex-basis: 0;
 }
 .inline-mm { display: inline !important; }
 .block-mm { display: block !important; }
@@ -15526,12 +15524,12 @@ input:checked + .switch--dot-transparent::after {
 .col-ml {
   display: block;
   max-width: 100%;
-  flex-grow: 1;
   flex-shrink: 1;
 }
 .col--auto-ml {
   width: auto !important;
   flex: auto;
+  flex-basis: 0;
 }
 .inline-ml { display: inline !important; }
 .block-ml { display: block !important; }
@@ -15720,12 +15718,12 @@ input:checked + .switch--dot-transparent::after {
 .col-mxl {
   display: block;
   max-width: 100%;
-  flex-grow: 1;
   flex-shrink: 1;
 }
 .col--auto-mxl {
   width: auto !important;
   flex: auto;
+  flex-basis: 0;
 }
 .inline-mxl { display: inline !important; }
 .block-mxl { display: block !important; }