lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/modalBase/modalBase.lbc.synthetic.css

@@ -6,13 +6,13 @@
      for focus in focus.js at isElementVisible()
 */
 .fix-slds-modal,
-:host([data-render-mode="shadow"]) .fix-slds-modal {
+:host([data-render-mode='shadow']) .fix-slds-modal {
     visibility: visible;
     z-index: unset;
 }
 
 /* Required for z-index */
 .fix-slds-backdrop,
-:host([data-render-mode="shadow"]) .fix-slds-backdrop {
+:host([data-render-mode='shadow']) .fix-slds-backdrop {
     z-index: unset;
 }

package/src/lightning/modalBody/__docs__/modalBody.md

@@ -40,4 +40,3 @@ For more information, see [Style Components Using Lightning Design System Stylin
 #### Accessibility
 
 See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.
-

package/src/lightning/modalBody/modal-body.slds.css

@@ -1,46 +1,45 @@
 
+:host([data-render-mode="shadow"]) .slds-modal__content_headless {
+  border-start-end-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+  border-start-start-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+}
 
-  :host([data-render-mode="shadow"]) .slds-modal__content_headless {
-    border-start-end-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
-    border-start-start-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
-  }
-
-  :host([data-render-mode="shadow"]) .slds-modal__content {
-    /**
+:host([data-render-mode="shadow"]) .slds-modal__content {
+  /**
      * Remap to SLDS blueprint hooks for parity
      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
      */
-    --slds-c-modal-content-color-background: var(--slds-c-modalbody-color-background);
-    --slds-c-modal-content-text-color: var(--slds-c-modalbody-text-color);
+  --slds-c-modal-content-color-background: var(--slds-c-modalbody-color-background);
+  --slds-c-modal-content-text-color: var(--slds-c-modalbody-text-color);
 
-    background-color: var(--slds-c-modalbody-color-background, var(--slds-g-color-surface-container-1));
-    color: var(--slds-c-modalbody-text-color);
-    overflow: hidden;
-    overflow-y: auto;
-  }
+  background-color: var(--slds-c-modalbody-color-background, var(--slds-g-color-surface-container-1));
+  color: var(--slds-c-modalbody-text-color);
+  overflow: hidden;
+  overflow-y: auto;
+}
 
-  :host([data-render-mode="shadow"]) .slds-modal__content_footless {
-    border-bottom-right-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
-    border-bottom-left-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
-    box-shadow: var(--slds-c-modalbody-shadow, var(--slds-g-shadow-2));
-  }
+:host([data-render-mode="shadow"]) .slds-modal__content_footless {
+  border-bottom-right-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+  border-bottom-left-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+  box-shadow: var(--slds-c-modalbody-shadow, var(--slds-g-shadow-2));
+}
 
-  /* Sizes: Full */
+/* Sizes: Full */
 
-  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+/* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
 
-  @media (width <= 30em) {
-    :host([data-render-mode="shadow"][data-size='full']) [part='modal-body'] {
-      grid-area: content;
-    }
+@media (width <= 30em) {
+  :host([data-render-mode="shadow"][data-size='full']) [part='modal-body'] {
+    grid-area: content;
+  }
 
-    :host([data-render-mode="shadow"][data-size='full'][data-variant-footless]) [part='modal-body'] {
-      border-end-end-radius: 0;
-      border-end-start-radius: 0;
-      box-shadow: none;
-    }
+  :host([data-render-mode="shadow"][data-size='full'][data-variant-footless]) [part='modal-body'] {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    box-shadow: none;
+  }
 
-    /**
+  /**
      * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
      *
      * SLDS Blueprint <> LBC Parity Patch
@@ -52,7 +51,7 @@
      * makes this not feasible. Not ideal, but this is the best solution for now.
      * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
      */
-    :host([data-render-mode="shadow"][data-size='full']) {
-      display: contents;
-    }
+  :host([data-render-mode="shadow"][data-size='full']) {
+    display: contents;
   }
+}

package/src/lightning/modalFooter/__docs__/modalFooter.md

@@ -34,11 +34,11 @@ but you can also use `<button>` elements.
     </lightning-modal-footer>
 </template>
 ```
+
 #### Component Styling
 
 `lightning-modal-footer` implements the [modals](https://www.lightningdesignsystem.com/components/modals/) blueprint in the Salesforce Lightning Design System (SLDS).
 
-
 Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Modals: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component.
 
 For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
@@ -51,4 +51,3 @@ When the modal opens, focus goes to the first interactive element in the modal.
 in the modal body, the first footer button gets initial focus.
 
 See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.
-

package/src/lightning/modalFooter/modal-footer.slds.css

@@ -1,61 +1,59 @@
 
+:host([data-render-mode="shadow"]) .slds-modal__footer {
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
 
-  :host([data-render-mode="shadow"]) .slds-modal__footer {
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
 
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
-
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-
-    /**
+  /**
      * Remap to SLDS blueprint hooks for parity
      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
      */
-    --slds-c-modal-footer-color-background: var(--slds-c-modalfooter-color-background);
-    --slds-c-modal-footer-text-color: var(--slds-c-modalfooter-text-color);
-    --slds-c-modal-footer-spacing-block-start: var(--slds-c-modalfooter-spacing-block-start);
-    --slds-c-modal-footer-spacing-inline-end: var(--slds-c-modalfooter-spacing-inline-end);
-    --slds-c-modal-footer-spacing-block-end: var(--slds-c-modalfooter-spacing-block-end);
-    --slds-c-modal-footer-spacing-inline-start: var(--slds-c-modalfooter-spacing-inline-start);
-
-    border-end-end-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
-    border-end-start-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
-    border-block-start-width: var(--slds-c-modalfooter-sizing-border, var(--slds-g-sizing-border-2));
-    border-block-start-style: solid;
-    border-block-start-color: var(--slds-c-modalfooter-color-border, var(--slds-g-color-border-1));
-    background-color: var(--slds-c-modalfooter-color-background, var(--slds-g-color-surface-container-2));
-    color: var(--slds-c-modalfooter-text-color);
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    padding-block-start: var(--slds-c-modalfooter-spacing-block-start, var(--slds-g-spacing-3));
-    padding-inline-end: var(--slds-c-modalfooter-spacing-inline-end, var(--slds-g-spacing-4));
-    padding-block-end: var(--slds-c-modalfooter-spacing-block-end, var(--slds-g-spacing-3));
-    padding-inline-start: var(--slds-c-modalfooter-spacing-inline-start, var(--slds-g-spacing-4));
-    text-align: right;
-    box-shadow: var(--slds-c-modalfooter-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
-
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  /* TODO W-12674349: Replace with visibility utility classes when available */
-
-  :host([data-render-mode="shadow"]) .slds-hide {
-    display: none !important;
+  --slds-c-modal-footer-color-background: var(--slds-c-modalfooter-color-background);
+  --slds-c-modal-footer-text-color: var(--slds-c-modalfooter-text-color);
+  --slds-c-modal-footer-spacing-block-start: var(--slds-c-modalfooter-spacing-block-start);
+  --slds-c-modal-footer-spacing-inline-end: var(--slds-c-modalfooter-spacing-inline-end);
+  --slds-c-modal-footer-spacing-block-end: var(--slds-c-modalfooter-spacing-block-end);
+  --slds-c-modal-footer-spacing-inline-start: var(--slds-c-modalfooter-spacing-inline-start);
+
+  border-end-end-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
+  border-end-start-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
+  border-block-start-width: var(--slds-c-modalfooter-sizing-border, var(--slds-g-sizing-border-2));
+  border-block-start-style: solid;
+  border-block-start-color: var(--slds-c-modalfooter-color-border, var(--slds-g-color-border-1));
+  background-color: var(--slds-c-modalfooter-color-background, var(--slds-g-color-surface-container-2));
+  color: var(--slds-c-modalfooter-text-color);
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  padding-block-start: var(--slds-c-modalfooter-spacing-block-start, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-modalfooter-spacing-inline-end, var(--slds-g-spacing-4));
+  padding-block-end: var(--slds-c-modalfooter-spacing-block-end, var(--slds-g-spacing-3));
+  padding-inline-start: var(--slds-c-modalfooter-spacing-inline-start, var(--slds-g-spacing-4));
+  text-align: right;
+  box-shadow: var(--slds-c-modalfooter-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
+
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+}
+
+/* TODO W-12674349: Replace with visibility utility classes when available */
+
+:host([data-render-mode="shadow"]) .slds-hide {
+  display: none !important;
+}
+
+/* Sizes: Full */
+
+/* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+
+@media (width <= 30em) {
+  :host([data-render-mode="shadow"][data-size='full']) [part='modal-footer'] {
+    grid-area: footer;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    box-shadow: none;
   }
 
-  /* Sizes: Full */
-
-  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
-
-  @media (width <= 30em) {
-    :host([data-render-mode="shadow"][data-size='full']) [part='modal-footer'] {
-      grid-area: footer;
-      border-start-end-radius: 0;
-      border-end-start-radius: 0;
-      box-shadow: none;
-    }
-
-    /**
+  /**
      * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
      *
      * SLDS Blueprint <> LBC Parity Patch
@@ -67,24 +65,24 @@
      * makes this not feasible. Not ideal, but this is the best solution for now.
      * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
      */
-    :host([data-render-mode="shadow"][data-size='full']) {
-      display: contents;
-    }
+  :host([data-render-mode="shadow"][data-size='full']) {
+    display: contents;
   }
+}
 
-  :host([data-render-mode="shadow"]) .slds-modal__footer .slds-button + .slds-button {
-    margin-inline-start: var(--slds-g-spacing-2);
-  }
+:host([data-render-mode="shadow"]) .slds-modal__footer .slds-button + .slds-button {
+  margin-inline-start: var(--slds-g-spacing-2);
+}
 
-  /* styles used in multi-column-sorting-modal and can be used in future usecases of
+/* styles used in multi-column-sorting-modal and can be used in future usecases of
      modal-footer
   */
 
-  :host([data-render-mode="shadow"].slds-modal__footer_directional) ::slotted(.slds-button:first-child) {
-    float: inline-start;
-    margin-inline-start: 0;
-  }
+:host([data-render-mode="shadow"].slds-modal__footer_directional) ::slotted(.slds-button:first-child) {
+  float: inline-start;
+  margin-inline-start: 0;
+}
 
-  :host([data-render-mode="shadow"].slds-modal__footer_directional) ::slotted(.slds-button) {
-    margin-inline-start: var(--slds-g-spacing-2);
-  }
+:host([data-render-mode="shadow"].slds-modal__footer_directional) ::slotted(.slds-button) {
+  margin-inline-start: var(--slds-g-spacing-2);
+}

package/src/lightning/modalHeader/__docs__/modalHeader.md

@@ -26,6 +26,7 @@ created in a separate component extended from `LightningModal`. See
     </lightning-modal-body>
 </template>
 ```
+
 #### Component Styling
 
 `lightning-modal-header` implements the [modals](https://www.lightningdesignsystem.com/components/modals/) blueprint in the Salesforce Lightning Design System (SLDS).

package/src/lightning/modalHeader/modal-header.slds.css

@@ -1,62 +1,61 @@
 
+/* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
 
-  /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
+/* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
 
-  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-
-  :host([data-render-mode="shadow"]) .slds-modal__header {
-    /**
+:host([data-render-mode="shadow"]) .slds-modal__header {
+  /**
      * Remap to SLDS blueprint hooks for parity
      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
      */
-    --slds-c-modal-header-color-background: var(--slds-c-modalheader-color-background);
-    --slds-c-modal-header-text-color: var(--slds-c-modalheader-text-color);
-    --slds-c-modal-header-spacing-block-start: var(--slds-c-modalheader-spacing-block-start);
-    --slds-c-modal-header-spacing-inline-end: var(--slds-c-modalheader-spacing-inline-end);
-    --slds-c-modal-header-spacing-block-end: var(--slds-c-modalheader-spacing-block-end);
-    --slds-c-modal-header-spacing-inline-start: var(--slds-c-modalheader-spacing-inline-start);
+  --slds-c-modal-header-color-background: var(--slds-c-modalheader-color-background);
+  --slds-c-modal-header-text-color: var(--slds-c-modalheader-text-color);
+  --slds-c-modal-header-spacing-block-start: var(--slds-c-modalheader-spacing-block-start);
+  --slds-c-modal-header-spacing-inline-end: var(--slds-c-modalheader-spacing-inline-end);
+  --slds-c-modal-header-spacing-block-end: var(--slds-c-modalheader-spacing-block-end);
+  --slds-c-modal-header-spacing-inline-start: var(--slds-c-modalheader-spacing-inline-start);
 
-    --slds-c-modal-heading-font-size: var(--slds-c-modalheader-heading-font-size);
-    --slds-c-modal-heading-font-weight: var(--slds-c-modalheader-heading-font-weight);
-    --slds-c-modal-heading-font-lineheight: var(--slds-c-modalheader-heading-font-lineheight);
+  --slds-c-modal-heading-font-size: var(--slds-c-modalheader-heading-font-size);
+  --slds-c-modal-heading-font-weight: var(--slds-c-modalheader-heading-font-weight);
+  --slds-c-modal-heading-font-lineheight: var(--slds-c-modalheader-heading-font-lineheight);
 
-    position: relative;
-    border-start-end-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
-    border-start-start-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
-    border-block-end-width: var(--slds-c-modalheader-sizing-border, var(--slds-g-sizing-border-2));
-    border-block-end-style: solid;
-    border-block-end-color: var(--slds-c-modalheader-color-border, var(--slds-g-color-border-1));
-    background-color: var(--slds-c-modalheader-color-background, var(--slds-g-color-surface-container-1));
-    color: var(--slds-c-modalheader-text-color);
-    flex-shrink: 0;
-    padding-block-start: var(--slds-c-modalheader-spacing-block-start, var(--slds-g-spacing-4));
-    padding-inline-end: var(--slds-c-modalheader-spacing-inline-end, var(--slds-g-spacing-4));
-    padding-block-end: var(--slds-c-modalheader-spacing-block-end, var(--slds-g-spacing-4));
-    padding-inline-start: var(--slds-c-modalheader-spacing-inline-start, var(--slds-g-spacing-4));
-    text-align: center;
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
+  position: relative;
+  border-start-end-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
+  border-start-start-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
+  border-block-end-width: var(--slds-c-modalheader-sizing-border, var(--slds-g-sizing-border-2));
+  border-block-end-style: solid;
+  border-block-end-color: var(--slds-c-modalheader-color-border, var(--slds-g-color-border-1));
+  background-color: var(--slds-c-modalheader-color-background, var(--slds-g-color-surface-container-1));
+  color: var(--slds-c-modalheader-text-color);
+  flex-shrink: 0;
+  padding-block-start: var(--slds-c-modalheader-spacing-block-start, var(--slds-g-spacing-4));
+  padding-inline-end: var(--slds-c-modalheader-spacing-inline-end, var(--slds-g-spacing-4));
+  padding-block-end: var(--slds-c-modalheader-spacing-block-end, var(--slds-g-spacing-4));
+  padding-inline-start: var(--slds-c-modalheader-spacing-inline-start, var(--slds-g-spacing-4));
+  text-align: center;
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
 
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+}
 
-  :host([data-render-mode="shadow"]) .slds-modal__title {
-    font-weight: var(--slds-c-modalheader-heading-font-weight);
-    font-size: var(--slds-c-modalheader-heading-font-size, 1.25rem);
-    line-height: var(--slds-c-modalheader-heading-font-lineheight, var(--slds-g-font-lineheight-2));
-  }
+:host([data-render-mode="shadow"]) .slds-modal__title {
+  font-weight: var(--slds-c-modalheader-heading-font-weight);
+  font-size: var(--slds-c-modalheader-heading-font-size, 1.25rem);
+  line-height: var(--slds-c-modalheader-heading-font-lineheight, var(--slds-g-font-lineheight-2));
+}
 
-  /* Sizes: Full */
+/* Sizes: Full */
 
-  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+/* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
 
-  @media (width <= 30em) {
-    :host([data-render-mode="shadow"][data-size='full']) [part='modal-header'] {
-      grid-area: header;
-      border-start-start-radius: 0;
-      border-start-end-radius: 0;
-    }
+@media (width <= 30em) {
+  :host([data-render-mode="shadow"][data-size='full']) [part='modal-header'] {
+    grid-area: header;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
 
-    /**
+  /**
      * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
      *
      * SLDS Blueprint <> LBC Parity Patch
@@ -68,7 +67,7 @@
      * makes this not feasible. Not ideal, but this is the best solution for now.
      * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
      */
-    :host([data-render-mode="shadow"][data-size='full']) {
-      display: contents;
-    }
+  :host([data-render-mode="shadow"][data-size='full']) {
+    display: contents;
   }
+}

package/src/lightning/modalHeader/modalHeader.css

@@ -3,7 +3,8 @@
 @import 'lightning/sldsUtilsHyphenation';
 
 @media only screen and (max-width: 40rem) {
-    .slds-modal__header__reflow_resize, .slds-modal_full .slds-modal__header__reflow_resize {
+    .slds-modal__header__reflow_resize,
+    .slds-modal_full .slds-modal__header__reflow_resize {
         padding-top: 0;
         padding-bottom: 0;
     }

package/src/lightning/multiColumnSortingModal/multiColumnSortingModal.css

@@ -1,13 +1,12 @@
 @import './multiColumnSortingModal.lbc.native.css';
 
-[part="columnadder"] {
+[part='columnadder'] {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.5rem;
 }
 
-
-[part="modal-body"] {
+[part='modal-body'] {
     height: 19rem;
 }

package/src/lightning/navigation/__docs__/navigation.md

@@ -27,8 +27,8 @@ export default class MyCustomElement extends NavigationMixin(
 
 The `NavigationMixin` adds two APIs to your component's class. Invoking these functions before the element is connected to the DOM can have unexpected results.
 
--   `[NavigationMixin.Navigate](pageReference, [replace])` - A component calls this API to navigate to another page in the application.
--   `[NavigationMixin.GenerateUrl](pageReference)` - A component calls this API to get a `promise` that resolves to the resulting URL. The component can use the URL in the `href` attribute of an anchor. It can also use the URL to open a new window using the `window.open(url)` browser API.
+- `[NavigationMixin.Navigate](pageReference, [replace])` - A component calls this API to navigate to another page in the application.
+- `[NavigationMixin.GenerateUrl](pageReference)` - A component calls this API to get a `promise` that resolves to the resulting URL. The component can use the URL in the `href` attribute of an anchor. It can also use the URL to open a new window using the `window.open(url)` browser API.
 
 This example shows how to invoke these API methods from `this`:
 
@@ -101,4 +101,3 @@ For a recipe that uses `lightning/navigation`, see the `c-nav-to-*` components i
 #### See Also
 
 [Navigate to Pages](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate)
-

package/src/lightning/overlay/__docs__/overlay.md

@@ -4,9 +4,9 @@
 
 This is as low level in the overlay library as one can get. For this reason the documentation below is aimed at primarily `Lightning*` developers or those creating new overlay types. The overview examples would need much more to be fully accessible.
 
--   Simple: Contains no wrapping HTML only a host element.
-    -   `<c-custom-overlay>`
--   Advanced: Contains a wrapping Component. Example: `LightningModal`.
+- Simple: Contains no wrapping HTML only a host element.
+    - `<c-custom-overlay>`
+- Advanced: Contains a wrapping Component. Example: `LightningModal`.
 
 ## Creating a Simple Overlay
 

package/src/lightning/overlay/__examples__/basic/basic.css

@@ -1,7 +1,7 @@
 .example {
     margin: 0.5rem;
     border-radius: 0.5rem;
-    background: #FFF;
+    background: #fff;
     box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
-}
+}

package/src/lightning/picklist/README.md

@@ -2,14 +2,14 @@
 
 > `lightning-picklist` is internal-only. It's not yet supported for use by customers on the Salesforce platform.
 
--   [Overview](#overview)
--   [Single Selection](#single-selection)
--   [Multiple Selection](#multiple-selection)
--   [Component Attributes](#component-attributes)
--   [Option Attributes](#option-attributes)
--   [Methods](#methods)
--   [Custom Events](#custom-events)
--   [Usage Considerations](#usage-considerations)
+- [Overview](#overview)
+- [Single Selection](#single-selection)
+- [Multiple Selection](#multiple-selection)
+- [Component Attributes](#component-attributes)
+- [Option Attributes](#option-attributes)
+- [Methods](#methods)
+- [Custom Events](#custom-events)
+- [Usage Considerations](#usage-considerations)
 
 ## Overview
 
@@ -133,7 +133,7 @@ Displays the error messages and returns false if the input is invalid. If the in
 
 Sets a custom error message to be displayed when a form is submitted.
 
--   `message` (string) - Describes the error. If `message` is an empty string, the error is reset.
+- `message` (string) - Describes the error. If `message` is an empty string, the error is reset.
 
 **`showHelpMessageIfInvalid()`**
 

package/src/lightning/pill/__docs__/pill.md

@@ -70,9 +70,9 @@ Insert an avatar on the pill using `lightning-avatar`. For more information, see
 
 A pill has three clickable elements.
 
--   The optional icon or avatar
--   The text label
--   The remove button
+- The optional icon or avatar
+- The text label
+- The remove button
 
 All three elements trigger the `onclick` handler when clicked. If you provide an `href` value, clicking the text label triggers the `onclick` handler and then takes you to the provided path.