lightning-base-components 1.26.3-rc.0-alpha → 1.27.2-alpha

package/src/lightning/lookupAddress/listbox.slds.css

@@ -1,176 +1,182 @@
 
-  /* Horizontal listbox - used for pill container */
-   :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
-     display: inline-flex;
-     flex-wrap: wrap;
-     align-items: center;
-   }
-   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
-    display: flex;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
-     padding-inline-start: 0.125rem;
-   }
-   /* Vertical listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
-    text-decoration: none;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:hover {
-    background-color: var(--slds-c-listbox-option-color-background-hover, var(--slds-g-color-surface-container-2));
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
-    background-color: var(--slds-c-listbox-option-color-background-focus, var(--slds-g-color-surface-container-2));
-    box-shadow: var(--slds-g-shadow-inset-focus-1);
-    outline: 0;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"]:hover,:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"]:focus {
-    background-color: var(--slds-c-listbox-option-color-background-disabled, transparent);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
-  .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
-    cursor: default;
-  }
-   /* Modifies the listbox option if it contains an entity object */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
-    padding-block: var(--slds-g-spacing-1);
-    padding-inline: var(--slds-g-spacing-3);
-  }
-   /* Modifies the listbox option if it contains a plain object or string */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
-    padding-block: var(--slds-g-spacing-2);
-    padding-inline: var(--slds-g-spacing-3);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
-    padding-block: var(--slds-g-spacing-2);
-    padding-inline: var(--slds-g-spacing-3);
-  }
-   /* Choosable option within listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option {
-    color: var(--slds-c-listbox-option-color);
-    background-color: var(--slds-c-listbox-option-color-background);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
-    cursor: pointer;
-    color: var(--slds-c-listbox-option-color-hover);
-    background-color: var(--slds-c-listbox-option-color-background-hover);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
-    outline: 0;
-    color: var(--slds-c-listbox-option-color-focus);
-    background-color: var(--slds-c-listbox-option-color-background-focus);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
-  .slds-listbox__option[aria-disabled="true"]:hover,:host([data-render-mode="shadow"]) 
-  .slds-listbox__option[aria-disabled="true"]:focus {
-    color: var(--slds-c-listbox-option-color-disabled, var(--slds-g-color-disabled-2));
-    background-color: var(--slds-c-listbox-option-color-background-disabled);
-  }
-   /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
-   /* the _vertical variations only apply to combobox's */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
-    margin-inline-end: var(--slds-g-spacing-2);
-  }
-   /* If the listbox option has metadata or secondary information that sits below its primary text */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
-    margin-block-start: var(--slds-g-spacing-1);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
-    display: inline-block;
-    vertical-align: middle;
-  }
-   /* Header for choosable option within listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
-    font-size: var(--slds-g-font-scale-neg-1);
-    font-weight: 700;
-  }
-   /* Container for listbox option icon */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
-    width: var(--slds-g-sizing-7);
-    display: inline-flex;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-    color: var(--slds-g-color-accent-2);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
-     color: currentcolor;
-   }
-   /* The icon within a plain listbox that indicates if an option has been selected or not. */
-   :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
-    opacity: 0;
-    fill: var(--slds-g-color-accent-2);
-  }
-   /* Modifier that makes selected icon visible */
-   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
-    opacity: 1;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
-    color: var(--slds-g-color-accent-2);
-  }
-   /* The main text of an entity listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
-     max-width: 100%;
-     overflow: hidden;
-     text-overflow: ellipsis;
-     white-space: nowrap;
-     display: block;
-     margin-block-end: 0.125rem;
-   }
-   /* The metadata or secondary text of an entity listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
-    display: block;
-    margin-block-start: calc(var(--slds-g-spacing-1) * -1);
-    color: var(--slds-c-listbox-option-meta-color, var(--slds-g-color-neutral-base-30));
-  }
-   :host([data-render-mode="shadow"]:hover) .slds-listbox__option-meta {
-    color: var(--slds-c-listbox-option-meta-color-hover);
-  }
-   :host([data-render-mode="shadow"]:focus) .slds-listbox__option-meta,:host([data-render-mode="shadow"].slds-has-focus) .slds-listbox__option-meta {
-    color: var(--slds-c-listbox-option-meta-color-focus);
-  }
-   :host([data-render-mode="shadow"][aria-disabled="true"]) .slds-listbox__option-meta,:host([data-render-mode="shadow"]) 
-  .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
-    color: var(--slds-c-listbox-option-meta-color-disabled, currentColor);
-   }
-   /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
-   /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
-   /* The container of pill selections found inside of a combobox group */
-   /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
-     position: relative;
-     padding: 0;
-     padding-inline-end: calc(var(--slds-g-spacing-8) + var(--slds-g-spacing-3));
-     height: 1.875rem;
-     overflow: hidden;
-   }
-   /* Expanded state of a selection group */
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
-    height: auto;
-    padding: 0;
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
-     padding-block-start: 0;
-     padding-block-end: 0.125rem;
-     padding-inline: 0;
-   }
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
-     padding-block-start: 0.125rem;
-     padding-block-end: 0;
-     padding-inline: 0.125rem;
-   }
-   /* Toggle button to show all of the pill selections */
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: var(--slds-g-spacing-2);
-  }
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
-    line-height: 1;
-  }
+/* Horizontal listbox - used for pill container */
+:host([data-render-mode="shadow"]) .slds-listbox_horizontal {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+  display: flex;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_horizontal li + li {
+  padding-inline-start: 0.125rem;
+}
+/* Vertical listbox */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+  text-decoration: none;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:hover {
+  background-color: var(
+    --slds-c-listbox-option-color-background-hover,
+    var(--slds-g-color-surface-container-2)
+  );
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+  background-color: var(
+    --slds-c-listbox-option-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
+  box-shadow: var(--slds-g-shadow-inset-focus-1);
+  outline: 0;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled='true'],:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option[role='presentation']:hover,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option[aria-disabled='true']:hover,:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option[aria-disabled='true']:focus {
+  background-color: var(--slds-c-listbox-option-color-background-disabled, transparent);
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled='true'],:host([data-render-mode="shadow"]) 
+.slds-listbox_vertical .slds-listbox__option[role='presentation']:hover {
+  cursor: default;
+}
+/* Modifies the listbox option if it contains an entity object */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+  padding-block: var(--slds-g-spacing-1);
+  padding-inline: var(--slds-g-spacing-3);
+}
+/* Modifies the listbox option if it contains a plain object or string */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+  padding-block: var(--slds-g-spacing-2);
+  padding-inline: var(--slds-g-spacing-3);
+}
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+  padding-block: var(--slds-g-spacing-2);
+  padding-inline: var(--slds-g-spacing-3);
+}
+/* Choosable option within listbox */
+:host([data-render-mode="shadow"]) .slds-listbox__option {
+  color: var(--slds-c-listbox-option-color);
+  background-color: var(--slds-c-listbox-option-color-background);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+  cursor: pointer;
+  color: var(--slds-c-listbox-option-color-hover);
+  background-color: var(--slds-c-listbox-option-color-background-hover);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+  outline: 0;
+  color: var(--slds-c-listbox-option-color-focus);
+  background-color: var(--slds-c-listbox-option-color-background-focus);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled='true'],:host([data-render-mode="shadow"]) 
+.slds-listbox__option[aria-disabled='true']:hover,:host([data-render-mode="shadow"]) 
+.slds-listbox__option[aria-disabled='true']:focus {
+  color: var(--slds-c-listbox-option-color-disabled, var(--slds-g-color-disabled-2));
+  background-color: var(--slds-c-listbox-option-color-background-disabled);
+}
+/* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+/* the _vertical variations only apply to combobox's */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+  margin-inline-end: var(--slds-g-spacing-2);
+}
+/* If the listbox option has metadata or secondary information that sits below its primary text */
+:host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+  margin-block-start: var(--slds-g-spacing-1);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* Header for choosable option within listbox */
+:host([data-render-mode="shadow"]) .slds-listbox__option-header {
+  font-size: var(--slds-g-font-scale-neg-1);
+  font-weight: 700;
+}
+/* Container for listbox option icon */
+:host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+  width: var(--slds-g-sizing-7);
+  display: inline-flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  color: var(--slds-g-color-accent-2);
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled='true'] .slds-listbox__option-icon {
+  color: currentcolor;
+}
+/* The icon within a plain listbox that indicates if an option has been selected or not. */
+:host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+  opacity: 0;
+  fill: var(--slds-g-color-accent-2);
+}
+/* Modifier that makes selected icon visible */
+:host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+  opacity: 1;
+}
+:host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+  color: var(--slds-g-color-accent-2);
+}
+/* The main text of an entity listbox */
+:host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  margin-block-end: 0.125rem;
+}
+/* The metadata or secondary text of an entity listbox */
+:host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+  display: block;
+  margin-block-start: calc(var(--slds-g-spacing-1) * -1);
+  color: var(--slds-c-listbox-option-meta-color, var(--slds-g-color-neutral-base-30));
+}
+:host([data-render-mode="shadow"]:hover) .slds-listbox__option-meta {
+  color: var(--slds-c-listbox-option-meta-color-hover);
+}
+:host([data-render-mode="shadow"]:focus) .slds-listbox__option-meta,:host([data-render-mode="shadow"].slds-has-focus) .slds-listbox__option-meta {
+  color: var(--slds-c-listbox-option-meta-color-focus);
+}
+:host([data-render-mode="shadow"][aria-disabled='true']) .slds-listbox__option-meta,:host([data-render-mode="shadow"]) 
+.slds-listbox__option[aria-disabled='true'] .slds-listbox__option-meta {
+  color: var(--slds-c-listbox-option-meta-color-disabled, currentColor);
+}
+/* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
+/* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
+/* The container of pill selections found inside of a combobox group */
+/* .slds-listbox_selection-group items need to be moved out to pill/pill container */
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group {
+  position: relative;
+  padding: 0;
+  padding-inline-end: calc(var(--slds-g-spacing-8) + var(--slds-g-spacing-3));
+  height: 1.875rem;
+  overflow: hidden;
+}
+/* Expanded state of a selection group */
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+  height: auto;
+  padding: 0;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
+  padding-block-start: 0;
+  padding-block-end: 0.125rem;
+  padding-inline: 0;
+}
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
+  padding-block-start: 0.125rem;
+  padding-block-end: 0;
+  padding-inline: 0.125rem;
+}
+/* Toggle button to show all of the pill selections */
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: var(--slds-g-spacing-2);
+}
+:host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+  line-height: 1;
+}

package/src/lightning/lookupAddress/lookup-address.slds.css

@@ -1,8 +1,8 @@
 
-  /* due to native shadow, css rule isn't applied
+/* due to native shadow, css rule isn't applied
      .slds-form-element_compound .slds-form-element__row
        .slds-form-element__label { padding: 0 }
   */
-  :host([data-render-mode="shadow"]) [part~='label'] {
-    padding-block-start: 0;
-  }
+:host([data-render-mode="shadow"]) [part~='label'] {
+  padding-block-start: 0;
+}

package/src/lightning/lookupAddress/lookupAddress.css

@@ -1,2 +1 @@
 @import './lookupAddress.lbc.native.css';
-

package/src/lightning/lookupAddress/lookupAddress.lbc.native.css

@@ -1,4 +1,3 @@
 @import 'lightning/sldsCommon';
 @import './form-element.slds.css';
 @import './lookup-address.slds.css';
-

package/src/lightning/mediaUtils/__docs__/mediaUtils.md

@@ -3,6 +3,7 @@ The `mediaUtils` library contains utility functions that can be used by an LWC d
 ## processImage
 
 You can use `processImage` function to resize and compress image files. To use this function, simply import it in your LWC first:
+
 ```
 import { processImage } from 'lightning/mediaUtils';
 ```
@@ -11,26 +12,27 @@ You can then call this function by passing in an input image and a set of option
 
 #### Parameters
 
-* `input`: Defines the input image, which can either be a `File` or `Blob` object
-* `options`: An object that defines the options to be used when processing the input image. It is an optional parameter containing a number of flags. If this parameter or any of its flags are omitted, default values will be used as further described below.
-    * `resizeMode`: A string that determines how the image will be resized. It can contain one of the below values
-        * `fill`: This is default. The image will be resized to fill the target dimension. If necessary, the image will be stretched or squished to fit.
-        * `contain`: The image keeps its aspect ratio but will be resized to fit within the target dimension.
-        * `none`: The image will not be resized and will retain its original dimension.
-    * `resizeStrategy`: A string that determines how to resize the image. If `resizeMode` is set to `none` this flag will be ignored.
-        * `reduce`: Only resize if the image is larger than the target size (smaller images won't be resized).
-        * `enlarge`: Only resize if the image is smaller than the target size (larger images won't be resized).
-        * `always`: This is default. Always resize the image to the target size regardless of the original image dimensions.
-    * `targetWidth`: The target width when resizing an image. If omitted, defaults to the original image width. If `resizeMode` is set to `none` this flag will be ignored.
-    * `targetHeight`: The target height when resizing an image. If omitted, defaults to the original image height. If `resizeMode` is set to `none` this flag will be ignored.
-    * `compressionQuality`: A number between 0-1 that determines the compression quality. If omitted then the browser/webview picks a default value as it sees fit. Note that this parameter will be considered as a suggested compression quality, however the browser/webview may choose to override this value if it deems it necessary. For example if the value is larger than 1 or if it is considered to be too small by the browser/webview, then it will override the value to something that it deems more appropriate.
-    * `imageSmoothingEnabled`: A boolean that determines whether scaled images are smoothed or not. Defaults to `true`.
-    * `preserveTransparency`: A boolean that determines whether the transparency info of the input image (if any) should be preserved or not. Defaults to `true`. If the input image is a GIF/PNG and this flag is set to `true` the output image will be a PNG. For all other cases the output will be a JPEG.
-    * `backgroundColor`: A string that defines a CSS color as described [here](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Defaults to `white`. When `preserveTransparency` is set to `false`, the output image will have its background set to this color before the input image is resized and drawn on top.
+- `input`: Defines the input image, which can either be a `File` or `Blob` object
+- `options`: An object that defines the options to be used when processing the input image. It is an optional parameter containing a number of flags. If this parameter or any of its flags are omitted, default values will be used as further described below.
+    - `resizeMode`: A string that determines how the image will be resized. It can contain one of the below values
+        - `fill`: This is default. The image will be resized to fill the target dimension. If necessary, the image will be stretched or squished to fit.
+        - `contain`: The image keeps its aspect ratio but will be resized to fit within the target dimension.
+        - `none`: The image will not be resized and will retain its original dimension.
+    - `resizeStrategy`: A string that determines how to resize the image. If `resizeMode` is set to `none` this flag will be ignored.
+        - `reduce`: Only resize if the image is larger than the target size (smaller images won't be resized).
+        - `enlarge`: Only resize if the image is smaller than the target size (larger images won't be resized).
+        - `always`: This is default. Always resize the image to the target size regardless of the original image dimensions.
+    - `targetWidth`: The target width when resizing an image. If omitted, defaults to the original image width. If `resizeMode` is set to `none` this flag will be ignored.
+    - `targetHeight`: The target height when resizing an image. If omitted, defaults to the original image height. If `resizeMode` is set to `none` this flag will be ignored.
+    - `compressionQuality`: A number between 0-1 that determines the compression quality. If omitted then the browser/webview picks a default value as it sees fit. Note that this parameter will be considered as a suggested compression quality, however the browser/webview may choose to override this value if it deems it necessary. For example if the value is larger than 1 or if it is considered to be too small by the browser/webview, then it will override the value to something that it deems more appropriate.
+    - `imageSmoothingEnabled`: A boolean that determines whether scaled images are smoothed or not. Defaults to `true`.
+    - `preserveTransparency`: A boolean that determines whether the transparency info of the input image (if any) should be preserved or not. Defaults to `true`. If the input image is a GIF/PNG and this flag is set to `true` the output image will be a PNG. For all other cases the output will be a JPEG.
+    - `backgroundColor`: A string that defines a CSS color as described [here](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Defaults to `white`. When `preserveTransparency` is set to `false`, the output image will have its background set to this color before the input image is resized and drawn on top.
 
 #### Example
 
 As an example, consider the scenario where you would like to upload files to a Salesforce org using a [`lightning-input`](bundle/lightning-input/documentation) component. In your HTML code, you may have:
+
 ```
 .
 .
@@ -48,6 +50,7 @@ As an example, consider the scenario where you would like to upload files to a S
 ```
 
 In your Javascript file, you can now use `processImage` from `mediaUtils`, for example to reduce image sizes and hence reduce the bandwidth used to upload the images, as illustrated below:
+
 ```
 import { processImage } from 'lightning/mediaUtils';
 .
@@ -76,7 +79,7 @@ async handleFilesSelected(event) {
             let blob = await processImage(file, options);
             // here we can upload the data contained in the blob that is returned by processImage
         }
-    } 
+    }
     catch (error) {
         console.error("ERROR: ", error)
     }

package/src/lightning/menuDivider/menu-divider.slds.css

@@ -1,10 +1,10 @@
 
-  :host([data-render-mode="shadow"]) .slds-has-divider_top {
-    border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
-  }
+:host([data-render-mode="shadow"]) .slds-has-divider_top {
+  border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+}
 
-  :host([data-render-mode="shadow"]) .slds-has-divider_top-space {
-    border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
-    margin-top: var(--slds-g-spacing-2);
-    padding-top: var(--slds-g-spacing-2);
-  }
+:host([data-render-mode="shadow"]) .slds-has-divider_top-space {
+  border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+  margin-top: var(--slds-g-spacing-2);
+  padding-top: var(--slds-g-spacing-2);
+}

package/src/lightning/menuItem/__docs__/menuItem.md

@@ -66,13 +66,8 @@ Use the `icon-name` attribute to add an icon after the text of the menu item.
 Use the `prefix-icon-name` attribute to add an icon before the text of the menu
 item.
 
-You can also use the `icon-type` attribute to control the appearance of icons in menu items. The `icon-type` attribute accepts two values:
-
-- `standard` (default): All icons are displayed in grayscale.
-- `color`: All icons and their respective background colors are supported.
-
-
 This example displays an icon in grayscale before the menu item text.
+
 ```html
 <template>
     <lightning-button-menu>
@@ -83,7 +78,17 @@ This example displays an icon in grayscale before the menu item text.
 </template>
 ```
 
-To enable colored icons and backgrounds, use the `icon-type="color"` attribute:
+#### Adding Icons with Background Colors
+
+The [SLDS action and object icons](https://v1.lightningdesignsystem.com/icons/) (standard and custom) are defined with color backgrounds. However, when you use these icons in menu items, the colors aren't displayed by default.
+
+To display icons with a background color in menu items, use the `icon-type` attribute. The `icon-type` attribute accepts two values.
+
+- `standard` (default): Displays the icon on the menu item in grayscale.
+- `color`: Displays the icon on the menu item with a background color. Action icons and object icons display a white glyph on a colored background that's defined in [SLDS](https://v1.lightningdesignsystem.com/icons/#standard). Doctype and utility icons don't display with a background color.
+
+To enable colored icons and backgrounds, use the `icon-type="color"` attribute. In this example, the `standard:event` icon is displayed with a background color and the `utility:settings` icon is displayed in grayscale.
+
 ```html
 <template>
     <lightning-button-menu>