@carbon/elements 10.52.0 → 10.54.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.52.0",
+  "version": "10.54.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,21 +35,21 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.36.0",
-    "@carbon/grid": "^10.41.0",
-    "@carbon/icons": "^10.46.0",
-    "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.36.0",
-    "@carbon/motion": "^10.28.0",
-    "@carbon/themes": "^10.51.0",
-    "@carbon/type": "^10.41.0"
+    "@carbon/colors": "^10.37.0",
+    "@carbon/grid": "^10.42.0",
+    "@carbon/icons": "^10.48.0-rc.0",
+    "@carbon/import-once": "^10.7.0",
+    "@carbon/layout": "^10.37.0",
+    "@carbon/motion": "^10.29.0",
+    "@carbon/themes": "^10.52.0",
+    "@carbon/type": "^10.42.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.33.0",
+    "@carbon/cli": "^10.34.0",
     "fs-extra": "^10.0.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "6a49764a3df2cc3e3b8fce6575f4853d1400e183"
+  "gitHead": "4cb0cf93101e8a4a6a67a950518793e006ed8a07"
 }

package/scss/grid/_inlined/_mixins.import.scss

@@ -25,8 +25,8 @@
 
 @use 'sass:meta';
 @use 'sass:math';
-@import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '../vendor/@carbon/layout/breakpoint';
+@import 'prefix';
 
 // -----------------------------------------------------------------------------
 // Columns

package/scss/grid/_mixins.import.scss

@@ -25,8 +25,8 @@
 
 @use 'sass:meta';
 @use 'sass:math';
-@import '../layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '../layout/breakpoint';
+@import 'prefix';
 
 // -----------------------------------------------------------------------------
 // Columns

package/scss/grid/modules/_breakpoint.scss

@@ -20,7 +20,7 @@
 /// @group @carbon/layout
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
@@ -32,7 +32,7 @@
 /// @return {String} Desired value
 /// @group @carbon/layout
 @function key-by-index($map, $index) {
-  $keys: map-keys($map);
+  $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
@@ -42,7 +42,7 @@
 /// @return {*} Desired value
 /// @group @carbon/layout
 @function last-map-item($map) {
-  $total-length: length($map);
+  $total-length: list.length($map);
   @return map-get($map, key-by-index($map, $total-length));
 }
 

package/scss/grid/modules/_css-grid.scss

@@ -5,10 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'sass:meta';
-@use "sass:math";
-
+@use 'sass:list';
 @use 'sass:map';
+@use "sass:math";
+@use 'sass:meta';
 @use 'config' as *;
 @use 'breakpoint' as *;
 

package/scss/grid/modules/_flex-grid.scss

@@ -70,11 +70,11 @@
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     @if meta.function-exists('div', 'math') {
-      max-width: percentage(math.div($span, $columns));
-      flex: 0 0 percentage(math.div($span, $columns));
+      max-width: math.percentage(math.div($span, $columns));
+      flex: 0 0 math.percentage(math.div($span, $columns));
     } @else {
-      max-width: percentage(($span / $columns));
-      flex: 0 0 percentage(($span / $columns));
+      max-width: math.percentage(($span / $columns));
+      flex: 0 0 math.percentage(($span / $columns));
     }
   }
 }
@@ -94,7 +94,7 @@
   @if $offset == 0 {
     margin-left: 0;
   } @else {
-    margin-left: percentage($offset);
+    margin-left: math.percentage($offset);
   }
 }
 
@@ -113,7 +113,7 @@
 
   @each $breakpoint in map-keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
 
     // Allow columns to stretch full width below their breakpoints
     @for $i from 0 through $columns {
@@ -257,11 +257,11 @@
   @include -set-largest-breakpoint();
 
   @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name));
-    $margin: map-get($value, margin);
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
 
     @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
+      $prev-margin: map.get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
           padding-right: #{($grid-gutter * 0.5) + $margin};
@@ -284,7 +284,7 @@
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: last-map-item($breakpoints);
 
-  max-width: map-get($largest-breakpoint, 'width');
+  max-width: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -294,7 +294,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include breakpoint($name) {
-      max-width: map-get($value, width);
+      max-width: map.get($value, width);
     }
   }
 }
@@ -341,26 +341,26 @@
 }
 
 @if $flex-grid-columns == 12 {
-  $flex-12-column-grid: map-merge(
+  $flex-12-column-grid: map.merge(
     $grid-breakpoints,
     (
       lg:
-        map-merge(
-          map-get($grid-breakpoints, lg),
+        map.merge(
+          map.get($grid-breakpoints, lg),
           (
             columns: 12,
           )
         ),
       xlg:
-        map-merge(
-          map-get($grid-breakpoints, xlg),
+        map.merge(
+          map.get($grid-breakpoints, xlg),
           (
             columns: 12,
           )
         ),
       max:
-        map-merge(
-          map-get($grid-breakpoints, max),
+        map.merge(
+          map.get($grid-breakpoints, max),
           (
             columns: 12,
           )

package/scss/grid/modules/_mixins.scss

@@ -65,11 +65,11 @@
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     @if meta.function-exists('div', 'math') {
-      max-width: percentage(math.div($span, $columns));
-      flex: 0 0 percentage(math.div($span, $columns));
+      max-width: math.percentage(math.div($span, $columns));
+      flex: 0 0 math.percentage(math.div($span, $columns));
     } @else {
-      max-width: percentage(($span / $columns));
-      flex: 0 0 percentage(($span / $columns));
+      max-width: math.percentage(($span / $columns));
+      flex: 0 0 math.percentage(($span / $columns));
     }
   }
 }
@@ -89,7 +89,7 @@
   @if $offset == 0 {
     margin-left: 0;
   } @else {
-    margin-left: percentage($offset);
+    margin-left: math.percentage($offset);
   }
 }
 
@@ -108,7 +108,7 @@
 
   @each $breakpoint in map-keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
 
     // Allow columns to stretch full width below their breakpoints
     @for $i from 0 through $columns {
@@ -252,11 +252,11 @@
   @include -set-largest-breakpoint();
 
   @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name));
-    $margin: map-get($value, margin);
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
 
     @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
+      $prev-margin: map.get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
           padding-right: #{($grid-gutter * 0.5) + $margin};
@@ -279,7 +279,7 @@
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: last-map-item($breakpoints);
 
-  max-width: map-get($largest-breakpoint, 'width');
+  max-width: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -289,7 +289,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include breakpoint($name) {
-      max-width: map-get($value, width);
+      max-width: map.get($value, width);
     }
   }
 }

package/scss/grid/vendor/@carbon/import-once/import-once.scss

@@ -18,7 +18,7 @@ $imported-modules: () !default;
 /// @content Declaration blocks to be imported
 /// @group @carbon/import-once
 @mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
+  @if not(index($imported-modules, $name)) {
     $imported-modules: append($imported-modules, $name) !global;
     @content;
   } @else if $warn == true {

package/scss/grid/vendor/@carbon/layout/_key-height.import.scss

@@ -21,8 +21,8 @@
 
 @use 'sass:meta';
 @use "sass:math";
-@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import 'breakpoint';
+@import 'utilities';
 
 /// Get the column width for a given breakpoint
 /// @param {String} $breakpoint

package/scss/grid/vendor/@carbon/layout/modules/_utilities.scss

@@ -14,7 +14,7 @@
 /// @group @carbon/layout
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
@@ -26,7 +26,7 @@
 /// @return {String} Desired value
 /// @group @carbon/layout
 @function key-by-index($map, $index) {
-  $keys: map-keys($map);
+  $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
@@ -36,6 +36,6 @@
 /// @return {*} Desired value
 /// @group @carbon/layout
 @function last-map-item($map) {
-  $total-length: length($map);
+  $total-length: list.length($map);
   @return map-get($map, carbon--key-by-index($map, $total-length));
 }

package/scss/import-once/import-once.scss

@@ -18,7 +18,7 @@ $imported-modules: () !default;
 /// @content Declaration blocks to be imported
 /// @group @carbon/import-once
 @mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
+  @if not(index($imported-modules, $name)) {
     $imported-modules: append($imported-modules, $name) !global;
     @content;
   } @else if $warn == true {

package/scss/layout/_key-height.import.scss

@@ -21,8 +21,8 @@
 
 @use 'sass:meta';
 @use "sass:math";
-@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import 'breakpoint';
+@import 'utilities';
 
 /// Get the column width for a given breakpoint
 /// @param {String} $breakpoint

package/scss/layout/modules/_utilities.scss

@@ -14,7 +14,7 @@
 /// @group @carbon/layout
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
@@ -26,7 +26,7 @@
 /// @return {String} Desired value
 /// @group @carbon/layout
 @function key-by-index($map, $index) {
-  $keys: map-keys($map);
+  $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
@@ -36,6 +36,6 @@
 /// @return {*} Desired value
 /// @group @carbon/layout
 @function last-map-item($map) {
-  $total-length: length($map);
+  $total-length: list.length($map);
   @return map-get($map, carbon--key-by-index($map, $total-length));
 }

package/scss/type/_inlined/_reset.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../vendor/@carbon/layout/convert';
+@import '../../layout/convert';
 @import 'font-family';
 @import 'styles';
 

package/scss/type/_inlined/_scale.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../vendor/@carbon/layout/convert';
+@import '../../layout/convert';
 
 /// Compute the type size for the given type scale step
 /// @param {Number} $step

package/scss/type/_inlined/_styles.import.scss

@@ -21,9 +21,9 @@
 
 @use "sass:meta";
 @use "sass:math";
-@import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'scale'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '../../layout/breakpoint';
+@import 'font-family';
+@import 'scale';
 
 /// @type Map
 /// @access public

package/scss/type/_inlined/_styles.scss

@@ -21,7 +21,7 @@
 
 // stylelint-disable number-max-precision
 
-@import '../vendor/@carbon/layout/breakpoint';
+@import '../../layout/breakpoint';
 @import 'font-family';
 @import 'scale';
 

package/scss/type/_styles.import.scss

@@ -21,9 +21,9 @@
 
 @use "sass:meta";
 @use "sass:math";
-@import '../layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'scale'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '../layout/breakpoint';
+@import 'font-family';
+@import 'scale';
 
 /// @type Map
 /// @access public

package/scss/type/modules/_font-family.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:string';
+
 /// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
 /// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
 /// @type Map
@@ -12,47 +14,47 @@
 /// @group @carbon/type
 $font-families: (
   'mono':
-    unquote(
+    string.unquote(
       "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace"
     ),
   'sans':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-condensed':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-arabic':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-devanagari':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-hebrew':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-jp':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans JP', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-kr':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-thai-looped':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Thai Looped', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-thai':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'serif':
-    unquote(
+    string.unquote(
       "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif"
     ),
 ) !default;

package/scss/type/modules/_scale.scss

@@ -6,6 +6,7 @@
 //
 
 @use '@carbon/layout';
+@use 'sass:list';
 
 /// Compute the type size for the given type scale step
 /// @param {Number} $step
@@ -26,7 +27,7 @@
 /// @group @carbon/type
 $type-scale: ();
 @for $i from 1 through 23 {
-  $type-scale: append($type-scale, layout.rem(get-type-size($i)));
+  $type-scale: list.append($type-scale, layout.rem(get-type-size($i)));
 }
 
 /// Get the value of a specific step in the type scale

package/scss/type/modules/_styles.scss

@@ -9,7 +9,7 @@
 
 @use 'sass:map';
 @use 'sass:math';
-@use '@carbon/layout';
+@use '../../grid/modules/breakpoint' as grid;
 @use 'font-family';
 @use 'scale';
 
@@ -716,7 +716,7 @@ $tokens: (
 /// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use
 /// @access public
 /// @group @carbon/type
-@mixin fluid-type($type-styles, $breakpoints: layout.$grid-breakpoints) {
+@mixin fluid-type($type-styles, $breakpoints: grid.$grid-breakpoints) {
   // Include the initial styles for the given token by default without any
   // media query guard. This includes `font-size` as a fallback in the case
   // that a browser does not support `calc()`
@@ -729,7 +729,7 @@ $tokens: (
   // token and apply the properties and fluid type size for that given
   // breakpoint
   @each $name, $values in map.get($type-styles, breakpoints) {
-    @include layout.breakpoint($name) {
+    @include grid.breakpoint($name) {
       @include properties($values);
       @include fluid-type-size($type-styles, $name, $breakpoints);
     }
@@ -745,7 +745,7 @@ $tokens: (
 @mixin fluid-type-size(
   $type-styles,
   $name,
-  $breakpoints: layout.$grid-breakpoints
+  $breakpoints: grid.$grid-breakpoints
 ) {
   // Get the information about the breakpoint we're currently working in. Useful
   // for getting initial width information
@@ -776,7 +776,7 @@ $tokens: (
 
   // We can use `breakpoint-next` to see if there is another breakpoint we can
   // use to update `max-font-size` and `max-vw` with larger values
-  $next-breakpoint-available: layout.breakpoint-next($name, $breakpoints);
+  $next-breakpoint-available: grid.breakpoint-next($name, $breakpoints);
   $next-fluid-breakpoint-name: null;
 
   // We need to figure out what the next available fluid breakpoint is for our
@@ -788,7 +788,7 @@ $tokens: (
       $next-fluid-breakpoint-name: $next-breakpoint-available;
       $next-breakpoint-available: null;
     } @else {
-      $next-breakpoint-available: layout.breakpoint-next(
+      $next-breakpoint-available: grid.breakpoint-next(
         $next-breakpoint-available,
         $breakpoints
       );
@@ -846,11 +846,7 @@ $custom-property-prefix: 'cds' !default;
 /// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use
 /// @access public
 /// @group @carbon/type
-@mixin type-style(
-  $name,
-  $fluid: false,
-  $breakpoints: layout.$grid-breakpoints
-) {
+@mixin type-style($name, $fluid: false, $breakpoints: grid.$grid-breakpoints) {
   @if not map.has-key($tokens, $name) {
     @error 'Unable to find a token with the name: `#{$name}`';
   }

package/scss/type/vendor/@carbon/grid/12.scss

@@ -0,0 +1,41 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'mixins';
+
+/// Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16
+/// @type Map
+/// @access public
+/// @group @carbon/grid
+$carbon--12-column-grid: map-merge(
+  $carbon--grid-breakpoints,
+  (
+    lg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, lg),
+        (
+          columns: 12,
+        )
+      ),
+    xlg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, xlg),
+        (
+          columns: 12,
+        )
+      ),
+    max:
+      map-merge(
+        map-get($carbon--grid-breakpoints, max),
+        (
+          columns: 12,
+        )
+      ),
+  )
+);
+
+@include carbon--grid($breakpoints: $carbon--12-column-grid);

package/scss/type/vendor/@carbon/grid/_inlined/12.scss

@@ -0,0 +1,41 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'mixins';
+
+/// Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16
+/// @type Map
+/// @access public
+/// @group @carbon/grid
+$carbon--12-column-grid: map-merge(
+  $carbon--grid-breakpoints,
+  (
+    lg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, lg),
+        (
+          columns: 12,
+        )
+      ),
+    xlg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, xlg),
+        (
+          columns: 12,
+        )
+      ),
+    max:
+      map-merge(
+        map-get($carbon--grid-breakpoints, max),
+        (
+          columns: 12,
+        )
+      ),
+  )
+);
+
+@include carbon--grid($breakpoints: $carbon--12-column-grid);