lightning-base-components 1.18.2-alpha → 1.18.3-alpha

package/src/lightning/datatable/__docs__/datatable.md

@@ -42,7 +42,10 @@ include:
 
 Tables can be populated during initialization using the `data`, `columns`, and
 `key-field` attributes. The `key-field` attribute is required for correct table behavior.
-It associates each row with a unique identifier.
+It associates each row with a unique identifier. The value you use for `key-field` is
+case-sensitive and must match what's in your `data` array.
+If you use `key-field="Id"`, make sure the Id you provide in the `data` array
+uses `Id` and not `id`.
 
 This example creates a table whose first column displays a checkbox for row selection.
 The checkbox column is displayed by default, and you can hide it by adding `hide-checkbox-column` in your markup.
@@ -53,7 +56,7 @@ Selecting the checkbox selects the entire row of data and triggers the `onrowsel
     <lightning-datatable
         data={data}
         columns={columns}
-        key-field="id"
+        key-field="Id"
         onrowselection={getSelectedName}
     >
     </lightning-datatable>
@@ -71,51 +74,51 @@ or decreasing confidence trend. The icon is specified with the `cellAttributes`
 property. See **Working with Column Properties** for more information about the
 properties for columns.
 
-The JavaScript also loads two rows of data in the table. The id for each
+The JavaScript also loads two rows of data in the table. The Id for each
 table row is used as the `key-field`.
 
 ```javascript
 import { LightningElement } from 'lwc';
 
 const columns = [
-    { label: 'Opportunity name', fieldName: 'opportunityName', type: 'text' },
+    { label: 'Opportunity name', fieldName: 'OpportunityName', type: 'text' },
     {
         label: 'Confidence',
-        fieldName: 'confidence',
+        fieldName: 'Confidence',
         type: 'percent',
         cellAttributes: {
-            iconName: { fieldName: 'trendIcon' },
+            iconName: { fieldName: 'TrendIcon' },
             iconPosition: 'right',
         },
     },
     {
         label: 'Amount',
-        fieldName: 'amount',
+        fieldName: 'Amount',
         type: 'currency',
         typeAttributes: { currencyCode: 'EUR', step: '0.001' },
     },
-    { label: 'Contact Email', fieldName: 'contact', type: 'email' },
-    { label: 'Contact Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Contact Email', fieldName: 'Contact', type: 'email' },
+    { label: 'Contact Phone', fieldName: 'Phone', type: 'phone' },
 ];
 
 const data = [
     {
-        id: 'a',
-        opportunityName: 'Cloudhub',
-        confidence: 0.2,
-        amount: 25000,
-        contact: 'jrogers@cloudhub.com',
-        phone: '2352235235',
-        trendIcon: 'utility:down',
+        Id: 'a',
+        OpportunityName: 'Cloudhub',
+        Confidence: 0.2,
+        Amount: 25000,
+        Contact: 'jrogers@cloudhub.com',
+        Phone: '2352235235',
+        TrendIcon: 'utility:down',
     },
     {
-        id: 'b',
-        opportunityName: 'Quip',
-        confidence: 0.78,
-        amount: 740000,
-        contact: 'quipy@quip.com',
-        phone: '2352235235',
-        trendIcon: 'utility:up',
+        Id: 'b',
+        OpportunityName: 'Quip',
+        Confidence: 0.78,
+        Amount: 740000,
+        Contact: 'quipy@quip.com',
+        Phone: '2352235235',
+        TrendIcon: 'utility:up',
     },
 ];
 
@@ -127,7 +130,7 @@ export default class DatatableExample extends LightningElement {
         const selectedRows = event.detail.selectedRows;
         // Display that fieldName of the selected rows
         for (let i = 0; i < selectedRows.length; i++) {
-            alert('You selected: ' + selectedRows[i].opportunityName);
+            alert('You selected: ' + selectedRows[i].OpportunityName);
         }
     }
 }
@@ -154,7 +157,7 @@ public with sharing class ContactController {
 }
 ```
 
-The template wires up the datatable to the contact records using the `Id` field.
+The template wires up the datatable to the contact records using the `id` field.
 
 ```html
 <template>
@@ -552,7 +555,7 @@ there are no more data to load.
         <lightning-datatable
             columns={columns}
             data={data}
-            key-field="id"
+            key-field="Id"
             enable-infinite-loading
             onloadmore={loadMoreData}
         >
@@ -657,7 +660,7 @@ Publishing State column matches either the Published or Unpublished state.
     <lightning-datatable
         columns={mycolumns}
         data={mydata}
-        key-field="id"
+        key-field="Id"
         onheaderaction={handleHeaderAction}
     >
     </lightning-datatable>
@@ -746,7 +749,7 @@ Supported attributes for the row actions are as follows.
     <lightning-datatable
         columns={mycolumns}
         data={mydata}
-        key-field="id"
+        key-field="Id"
         onrowaction={handleRowAction}
     >
     </lightning-datatable>
@@ -890,7 +893,7 @@ Columns have a default minimum width of 50px and maximum width of 1000px. To cha
 
 ```html
 <lightning-datatable
-    key-field="id"
+    key-field="Id"
     data={data}
     columns={columns}
     min-column-width="80"
@@ -904,7 +907,7 @@ Resizing a column fires the `resize` event. For more information, See the **Cust
 
 ```html
 <lightning-datatable
-    key-field="id"
+    key-field="Id"
     data={data}
     columns={columns}
     onresize={handleResize}
@@ -982,7 +985,7 @@ useful when you want to preselect rows.
 <lightning-datatable
     columns={columns}
     data={data}
-    key-field="id"
+    key-field="Id"
     selected-rows={selectedRows}
 >
 </lightning-datatable>
@@ -1051,7 +1054,7 @@ press the Enter or Tab key, or move away from the cell.
 ```html
 <template>
     <lightning-datatable
-        key-field="id"
+        key-field="Id"
         data={data}
         columns={columns}
         onsave={handleSave}
@@ -1104,7 +1107,7 @@ Your `lightning-datatable` component should look like this.
 ```html
 <template>
     <lightning-datatable
-        key-field="id"
+        key-field="Id"
         data={data}
         columns={columns}
         errors={errors}
@@ -1187,7 +1190,7 @@ This example displays three lines of text and hides the rest; the text on line 3
 <lightning-datatable
     data={data}
     columns={columns}
-    key-field="id"
+    key-field="Id"
     wrap-text-max-lines="3"
 >
 </lightning-datatable>
@@ -1247,7 +1250,7 @@ If you have descriptions on an element or on multiple elements for the table, se
 <h3 id="table-desc2">EMEA Region</h3>
 <lightning-datatable
     aria-labelledby="table-desc1 table-desc2"
-    key-field="id"
+    key-field="Id"
     data={data}
     columns={columns}
 >
@@ -1426,3 +1429,10 @@ The event properties are as follows.
 | bubbles    | false | This event does not bubble.                                                                                |
 | cancelable | false | This event has no default behavior that can be canceled. You cannot call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside the template in which it was dispatched.                             |
+
+
+#### LWC Recipes
+
+The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.
+
+For a recipe that uses `lightning-datatable`, see the `c-datatable-*` components in the LWC Recipes repo.

package/src/lightning/datatable/autoWidthStrategy.js

@@ -282,6 +282,9 @@ export class AutoWidthStrategy {
                 if (columnDefinition && columnDefinition.wrapText) {
                     return width / widthsMetadata.wrapTextMaxLines;
                 }
+                if (columnDefinition.fixedWidth) {
+                    return columnDefinition.fixedWidth;
+                }
                 return width;
             });
         const headerCellWidths = datatableInterface.getHeaderCellWidths();

package/src/lightning/datatable/columnWidthManager.js

@@ -411,7 +411,7 @@ export class ColumnWidthManager {
         return (
             newData.length > 0 &&
             (previousData.length === 0 ||
-                previousData.length === newData.length)
+                previousData.length !== newData.length)
         );
     }
 

package/src/lightning/datatable/datatable.js

@@ -421,8 +421,8 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Required for better performance.
-     * Associates each row with a unique ID.
+     * Required for better performance. Associates each row with a unique ID.
+     * key-field is case sensitive and must match the value you provide in the data array.
      * @type {string}
      * @required
      */
@@ -471,7 +471,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * The maximum number of rows that can be selected.
+     * The maximum number of rows that can be selected. Value should be a positive integer
      * Checkboxes are used for selection by default,
      * and radio buttons are used when maxRowSelection is 1.
      * @type {number}
@@ -792,11 +792,12 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get computedTableStyle() {
-        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
-            return styleToString(['table-layout:auto']);
-        }
+        const tableLayout =
+            this._columnWidthManager.isAutoResizingUpdateQueued()
+                ? 'auto'
+                : 'fixed';
         return styleToString([
-            'table-layout:fixed',
+            `table-layout:${tableLayout}`,
             getCSSWidthStyleOfTable(this.widthsData),
         ]);
     }

package/src/lightning/datatable/rowSelection.js

@@ -616,10 +616,13 @@ export function setMaxRowSelection(state, value) {
         }
     } else {
         state.maxRowSelection = MAX_ROW_SELECTION_DEFAULT;
-        // eslint-disable-next-line no-console
-        console.error(
-            `The maxRowSelection value passed into lightning:datatable should be a positive integer. We receive instead (${value}).`
-        );
+        // suppress console error if no value is passed in
+        if (value !== null && value !== undefined) {
+            // eslint-disable-next-line no-console
+            console.error(
+                `The maxRowSelection value passed into lightning:datatable should be a positive integer. We receive instead (${value}).`
+            );
+        }
     }
 }
 

package/src/lightning/datatable/templates/table/table.html

@@ -49,6 +49,7 @@
                                 <template for:each={state.columns} for:item="def" for:index="colIndex">
                                     <!-- Column Header -->
                                     <th style={def.style}
+                                        role="gridcell"
                                         scope="col"
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}

package/src/lightning/datepicker/datepicker.css

@@ -1,3 +1,3 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './form-element.slds.css'; */
+@import './form-element.slds.css';

package/src/lightning/datepicker/datepicker.js

@@ -7,7 +7,8 @@ import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicke
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeISODate,
     parseFormattedDate,
@@ -63,7 +64,7 @@ const DATE_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningDatePicker extends LightningElement {
+export default class LightningDatePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -381,6 +382,7 @@ export default class LightningDatePicker extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
 
         this.keyboardInterface = this.datepickerKeyboardInterface();

package/src/lightning/datetimepicker/datetimepicker.css

@@ -1,3 +1,3 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './form-element.slds.css'; */
+@import './form-element.slds.css';

package/src/lightning/datetimepicker/datetimepicker.js

@@ -4,7 +4,8 @@ import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.range
 import labelTime from '@salesforce/label/LightningDateTimePicker.timeLabel';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import sfTimeZone from '@salesforce/i18n/timeZone';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -34,7 +35,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningDateTimePicker extends LightningElement {
+export default class LightningDateTimePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -409,6 +410,7 @@ export default class LightningDateTimePicker extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
 
         // we set the initial values here in order to make sure timezone is available.

package/src/lightning/dualListbox/dualListbox.js

@@ -778,17 +778,26 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         const toMove = values.filter(
             (option) => this.highlightedOptions.indexOf(option) > -1
         );
-        const validSelection =
-            toMove.length === 0 ||
-            this.selectedList !== this.computedSelectedListId;
-        if (validSelection) {
+        const inValidSelection =
+            !toMove.length || this.selectedList !== this.computedSelectedListId;
+
+        if (inValidSelection) {
             return;
         }
+
         let start = moveUp ? 0 : toMove.length - 1;
         let index = values.indexOf(toMove[start]);
-        const validMove =
-            (moveUp && index === 0) || (!moveUp && index === values.length - 1);
-        if (validMove) {
+
+        const nextItemIndex = moveUp ? index - 1 : index + 1;
+        const previousItem = this.computedSelectedList[nextItemIndex];
+        const isPreviousItemLocked = !!previousItem?.isLocked;
+
+        const inValidMove =
+            (moveUp && index === 0) ||
+            (!moveUp && index === values.length - 1) ||
+            isPreviousItemLocked;
+
+        if (inValidMove) {
             return;
         }
 

package/src/lightning/formattedRichText/formatted-rich-text.slds.css

@@ -0,0 +1,230 @@
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) {
+  line-height: var(--sds-g-line-height);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h1 {
+  font-size: var(--sds-g-font-scale-1, 1.125rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h2 {
+  font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+  font-weight: var(--sds-g-font-weight-7, 700);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h3 {
+  font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h4 {
+  font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+  font-weight: var(--sds-g-font-weight-7, 700);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h5 {
+  font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h6 {
+  font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+  font-weight: var(--sds-g-font-weight-7, 700);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h1,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h2,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h3,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h4,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h5,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h6,:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul,:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol,:host([data-render-mode="shadow"].slds-rich-text-editor__output) dl,:host([data-render-mode="shadow"].slds-rich-text-editor__output) img {
+  margin-block-end: var(--sds-g-spacing-3, 0.75rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) blockquote {
+  margin: var(--sds-g-spacing-6, 2rem) var(--sds-g-spacing-5, 1.5rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ins {
+  color: var(--slds-g-color-success-base-50, var(--sds-g-color-success-base-50, #2e844a));
+  text-decoration: underline;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) del {
+  color: var(--slds-g-color-error-base-30, var(--sds-g-color-error-base-50, #ea001e));
+  text-decoration: line-through;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul {
+  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  list-style: disc;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul {
+  list-style: circle;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul {
+  list-style: square;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul ul {
+  list-style: disc;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul ul ul {
+  list-style: circle;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ol {
+  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  list-style: decimal;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol {
+  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  list-style: decimal;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol {
+  list-style: lower-alpha;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol {
+  list-style: lower-roman;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol ol {
+  list-style: decimal;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol ol ol {
+  list-style: lower-alpha;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ul {
+  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  list-style: disc;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) dd {
+  margin-inline-start: var(--sds-g-spacing-7, 2.5rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) abbr[title],:host([data-render-mode="shadow"].slds-rich-text-editor__output) acronym[title] {
+  border-bottom: var(--sds-g-sizing-border-1, 1px) dotted;
+  cursor: help;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) table {
+  overflow-wrap: normal;
+  word-wrap: normal;
+  word-break: normal;
+  width: auto;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) table caption {
+  text-align: center;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) th,:host([data-render-mode="shadow"].slds-rich-text-editor__output) td {
+  padding: var(--sds-g-spacing-2, 0.5rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .sans-serif {
+  font-family: sans-serif;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .courier {
+  font-family: courier;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .verdana {
+  font-family: verdana;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .tahoma {
+  font-family: tahoma;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .garamond {
+  font-family: garamond;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .serif {
+  font-family: serif;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-1:not(.ql-direction-rtl) {
+  padding-inline-start: var(--sds-g-spacing-8, 3rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-inline-end: var(--sds-g-spacing-8, 3rem);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-2:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 2);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 2);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-3:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 3);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 3);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-4:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 4);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 4);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-5:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 5);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 5);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-6:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 6);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 6);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-7:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 7);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 7);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-8:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 8);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 8);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-9:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 9);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 9);
+}

package/src/lightning/formattedRichText/formattedRichText.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './formatted-rich-text.slds.css';

package/src/lightning/formattedRichText/formattedRichText.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import sanitizeHTML from 'lightning/purifyLib';
 import { linkify } from './linkify';
 import { richTextConfig } from './richTextConfig';
@@ -12,7 +13,7 @@ import {
  * Displays rich text that's formatted with allowed tags and attributes.
  * Other tags and attributes are removed and only their text content is displayed.
  */
-export default class LightningFormattedRichText extends LightningElement {
+export default class LightningFormattedRichText extends LightningShadowBaseClass {
     /**
      * If present, the component does not create links in the rich text.
      * @type {boolean}
@@ -57,6 +58,7 @@ export default class LightningFormattedRichText extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-rich-text-editor__output');
         this.connected = true;
     }

package/src/lightning/formattedText/formattedText.css

@@ -0,0 +1 @@
+@import 'lightning/sldsCommon'