lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/dualListbox/dualListbox.html

@@ -48,14 +48,14 @@
                             <template for:each={computedSelectedList} for:item="option" for:index="index">
                                 <li key={option.value} role="presentation" class="slds-listbox__item">
                                     <div class={option.classList} aria-selected={option.selected} role="option" tabindex={option.tabIndex} data-index={index}
-                                        data-value={option.value} data-type={computedSelectedListId} onclick={handleOptionClick}
-                                        onkeydown={handleOptionKeyDown}>
+                                        aria-disabled={option.isLocked} draggable={option.draggable} data-value={option.value} data-type={computedSelectedListId}
+                                        onclick={handleOptionClick} onkeydown={handleOptionKeyDown}>
                                         <span class="slds-media__body">
                                             <span class="slds-truncate" title={option.label}>{option.label}</span>
                                         </span>
                                         <template if:true={option.isLocked}>
                                             <span class="slds-media__figure slds-media__figure_reverse">
-                                                <lightning-icon icon-name="utility:lock" size="x-small" alternative-text={computedLockAssistiveText}></lightning-icon>
+                                                <lightning-icon icon-name="utility:lock" size="x-small" alternative-text={computedLockAssistiveText} class="slds-icon_container slds-current-color"></lightning-icon>
                                             </span>
                                         </template>
                                     </div>

package/src/lightning/dualListbox/dualListbox.js

@@ -17,7 +17,8 @@ import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
 import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { handleKeyDownOnOption } from './keyboard';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -59,7 +60,7 @@ const i18n = {
 /**
  * A pair of listboxes that enables multiple options to be selected and reordered.
  */
-export default class LightningDualListbox extends LightningElement {
+export default class LightningDualListbox extends LightningShadowBaseClass {
     // Component attributes
     /**
      * Label for the source options listbox.
@@ -354,6 +355,7 @@ export default class LightningDualListbox extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.keyboardInterface = this.selectKeyboardInterface();
@@ -457,6 +459,7 @@ export default class LightningDualListbox extends LightningElement {
                 const option = optionsMap[optionValue];
                 if (option) {
                     option.isLocked = true;
+                    option.draggable = false;
                 }
             });
 
@@ -475,15 +478,33 @@ export default class LightningDualListbox extends LightningElement {
         );
     }
 
+    isOptionDisabled(elm) {
+        return !!(elm?.getAttribute('aria-disabled') === 'true');
+    }
+
+    isOptionRequiredOrLocked(option) {
+        return !!(
+            this.requiredOptions.includes(option.value) || option.isLocked
+        );
+    }
+
     computeListOptions(options, focusableOptionValue) {
         if (options.length > 0) {
             const focusableOption = options.find((option) => {
-                return option.value === focusableOptionValue;
+                return (
+                    option.value === focusableOptionValue &&
+                    !this.isOptionRequiredOrLocked(option)
+                );
             });
 
+            const firstFocusableOption = options.find(
+                (option) => !this.isOptionRequiredOrLocked(option)
+            );
+
             const focusableValue = focusableOption
                 ? focusableOption.value
-                : options[0].value;
+                : firstFocusableOption?.value;
+
             return options.map((option) => {
                 return this.computeOptionProperties(option, focusableValue);
             });
@@ -632,7 +653,7 @@ export default class LightningDualListbox extends LightningElement {
 
     handleOptionClick(event) {
         this.interactingState.interacting();
-        if (this.disabled) {
+        if (this.disabled || this.isOptionDisabled(event.currentTarget)) {
             return;
         }
         const selectMultiple = event.metaKey || event.ctrlKey || event.shiftKey;
@@ -757,17 +778,26 @@ export default class LightningDualListbox extends LightningElement {
         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;
         }
 
@@ -803,7 +833,7 @@ export default class LightningDualListbox extends LightningElement {
         this.highlightedOptionsLabel = [];
         for (let i = 0; i < options.length; i++) {
             select = (i - start) * (i - end) <= 0;
-            if (select) {
+            if (select && !this.isOptionDisabled(options[i])) {
                 val = options[i].getAttribute('data-value');
                 this.highlightedOptions.push(val);
             }
@@ -811,6 +841,10 @@ export default class LightningDualListbox extends LightningElement {
     }
 
     updateSelectedOptions(option, select, isMultiple) {
+        if (this.isOptionDisabled(option)) {
+            return;
+        }
+
         const value = option.getAttribute('data-value');
         const listId = this.getListId(option);
         const optionIndex = this.getOptionIndex(option);

package/src/lightning/dualListbox/form-element.slds.css

@@ -2,6 +2,13 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   @supports (--styling-hooks: '') {
+    /* TODO: Swap with utility classes */
+    :host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
     /* FORM ELEMENT: BASE */
     :host([data-render-mode="shadow"]) .slds-form-element {
         position: relative;
@@ -29,11 +36,6 @@
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio,:host([data-render-mode="shadow"]) 
-    .slds-form-element__control .slds-checkbox {
-        display: block;
-    }
-
     :host([data-render-mode="shadow"]) .slds-form-element__icon {
         display: inline-block;
         position: relative;
@@ -48,7 +50,7 @@
     }
 
     :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-    .slds-form-element__helper { 
+    .slds-form-element__helper {
         font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
         margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
         display: block;
@@ -135,29 +137,31 @@
         display: block;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-  
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1, 0.25rem);
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
     }
-  
+
+    :host([variant~='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1);
+    } */
+
+    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not([class*="slds-size"]) {
-          width: 100%;
-          flex-basis: 100%;
-    }
-  
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
-  
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
@@ -170,26 +174,39 @@
     }
 
     /* --------------------------------------- */
-    
+
     /* FORM ELEMENT: INLINE */
 
     :host([data-render-mode="shadow"][variant~='label-inline']) {
         display: block;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+
+    /*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+        padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not([class*="slds-size"]) {
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
-        padding: var(--sds-g-spacing-1, 0.25rem);   
-    }
-  
+
+    :host([variant~='label-inline']:not(.slds-is-editing)) {
+        padding: var(--sds-g-spacing-1);
+    } */
+
     :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
@@ -204,16 +221,20 @@
           position: relative;
           z-index: 1;
         }
-  
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+          float: left;
+        }
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
-          padding-inline-start: 33%;
+          margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
-  
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
-      
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
@@ -225,8 +246,36 @@
             margin-block-end: 0;
         }
 
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+          margin-inline-start: 33%;
+        }
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: COMPOUND */
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
+      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--sds-g-spacing-1, 0.25rem);
+      padding-right: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
 }

package/src/lightning/dualListbox/keyboard.js

@@ -1,5 +1,9 @@
 import { keyCodes } from 'lightning/utilsPrivate';
 
+function isNextOptionElmDisabled(optionEl) {
+    return !!(optionEl?.getAttribute('aria-disabled') === 'true');
+}
+
 function preventDefaultAndStopPropagation(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -17,10 +21,18 @@ function setFocusOnNextOption(option, moveUp, intf) {
 
 function selectNextOption(option, moveUp, intf) {
     const selected = option.getAttribute('aria-selected') === 'true';
+    const isLockedOption = option.getAttribute('aria-disabled') === 'true';
     const index = parseInt(option.getAttribute('data-index'), 10);
-    const i = index + (selected ? (moveUp ? -1 : 1) : 0);
+    const i = index + (selected || isLockedOption ? (moveUp ? -1 : 1) : 0);
     const options = intf.getElementsOfList(option.getAttribute('data-type'));
     const next = options[i];
+
+    // To skip selection on the locked option and move on to the next selectable option.
+    if (isNextOptionElmDisabled(next)) {
+        selectNextOption(next, moveUp, intf);
+        return;
+    }
+
     if (next) {
         intf.updateSelectedOptions(next, true, false);
     }
@@ -37,6 +49,13 @@ function selectNextOptionFromShift(option, moveUp, isMultiple, intf) {
     const shiftAdd = pos === moveUp || intf.getShiftIndex() === next;
     const options = intf.getElementsOfList(option.getAttribute('data-type'));
     const nextOption = options[next];
+
+    // To skip multi-selection on the locked option and move on to the next selectable option.
+    if (isNextOptionElmDisabled(nextOption)) {
+        selectNextOptionFromShift(nextOption, moveUp, isMultiple, intf);
+        return;
+    }
+
     if (nextOption) {
         intf.updateSelectedOptions(nextOption, shiftAdd, true);
         intf.setLastShift(moveUp);

package/src/lightning/dynamicIcon/dynamicIcon.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 import eqHtml from './eq.html';
@@ -12,7 +13,7 @@ import defaultHtml from './default.html';
 /**
  * Represents various animated icons with different states.
  */
-export default class LightningDynamicIcon extends LightningElement {
+export default class LightningDynamicIcon extends LightningShadowBaseClass {
     /**
      * The alternative text used to describe the dynamic icon.
      * This text should describe what's happening.

package/src/lightning/dynamicIcon/ellie.css

@@ -1 +1 @@
-/* @import './dynamic-icon-ellie.slds.css'; */
+@import './dynamic-icon-ellie.slds.css';

package/src/lightning/dynamicIcon/eq.css

@@ -1 +1 @@
-/* @import './dynamic-icon-eq.slds.css'; */
+@import './dynamic-icon-eq.slds.css';

package/src/lightning/dynamicIcon/score.css

@@ -1 +1 @@
-/* @import './dynamic-icon-score.slds.css'; */
+@import './dynamic-icon-score.slds.css';

package/src/lightning/dynamicIcon/strength.css

@@ -1 +1 @@
-/* @import './dynamic-icon-strength.slds.css'; */
+@import './dynamic-icon-strength.slds.css';

package/src/lightning/dynamicIcon/trend.css

@@ -1 +1 @@
-/* @import './dynamic-icon-trend.slds.css'; */
+@import './dynamic-icon-trend.slds.css';

package/src/lightning/dynamicIcon/waffle.css

@@ -1 +1 @@
-/* @import './dynamic-icon-waffle.slds.css'; */
+@import './dynamic-icon-waffle.slds.css';

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';