lightning-base-components 1.18.5-alpha → 1.18.7-alpha

package/src/lightning/{primitiveInputFile/button.slds.css → toast/button-icon.slds.css}

@@ -525,3 +525,385 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   border: 0;
   text-align: inherit;
 }
+
+/* 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: '') {
+  :host([data-render-mode="shadow"]) [part~='button-icon'] {
+    display: inline-flex;
+  }
+
+  /**
+      * part - button-icon
+      *
+      * Default styling is "border" variant
+      */
+  :host([data-render-mode="shadow"]) [part~='button-icon'] {
+    /* slds-icon mapping */
+    --slds-c-icon-sizing-border: 0;
+    --slds-c-icon-sizing: var(--slds-c-buttonicon-sizing, 0.875rem);
+    --slds-c-icon-color-foreground: var(
+      --slds-c-buttonicon-color-foreground,
+      var(--sds-g-color-neutral-base-50, #747474)
+    );
+
+    /* Text */
+    --slds-c-button-neutral-font-lineheight: var(
+      --slds-c-buttonicon-neutral-font-lineheight,
+      var(--sds-g-font-lineheight-1, 1)
+    );
+
+    /* Background */
+    --slds-c-button-neutral-color-background: var(--slds-c-buttonicon-color-background, transparent);
+    --slds-c-button-neutral-color-background-hover: var(
+      --slds-c-buttonicon-color-background-hover,
+      transparent
+    );
+    --slds-c-button-neutral-color-background-focus: var(
+      --slds-c-buttonicon-color-background-focus,
+      transparent
+    );
+    --slds-c-button-neutral-color-background-active: var(
+      --slds-c-buttonicon-color-background-active,
+      var(--slds-c-button-neutral-color-background-focus)
+    );
+
+    /* Spacing */
+    --slds-c-button-neutral-spacing-inline: var(
+      --slds-c-buttonicon-spacing-inline,
+      var(--sds-s-button-spacing-inline, var(--sds-g-spacing-2, 0.5rem))
+    );
+    --slds-c-button-neutral-spacing-block: var(
+      --slds-c-buttonicon-spacing-block,
+      var(--sds-s-button-spacing-block, var(--sds-g-spacing-2, 0.5rem))
+    );
+
+    /* Border */
+    --slds-c-button-neutral-color-border: var(
+      --slds-c-buttonicon-color-border,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --slds-c-button-neutral-color-border-hover: var(
+      --slds-c-buttonicon-color-border-hover,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --slds-c-button-neutral-color-border-focus: var(
+      --slds-c-buttonicon-color-border-focus,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --slds-c-button-neutral-color-border-active: var(
+      --slds-c-buttonicon-color-border-active,
+      var(--slds-c-button-neutral-color-border-focus)
+    );
+
+    /* Shadow */
+    --slds-c-button-neutral-shadow: var(--slds-c-buttonicon-shadow);
+    --slds-c-button-neutral-shadow-focus: var(--slds-c-buttonicon-shadow-focus);
+
+    /* Disabled */
+    --slds-c-button-neutral-color-background-disabled: var(--slds-c-buttonicon-color-background-disabled);
+    --slds-c-button-neutral-color-border-disabled: var(--slds-c-buttonicon-color-border-disabled);
+    --slds-c-button-neutral-text-color-disabled: var(--slds-c-buttonicon-text-color-disabled);
+  }
+
+  /* slds-icon interaction states */
+  :host([data-render-mode="shadow"]) [part~='button-icon']:hover {
+    --slds-c-icon-color-foreground: var(
+      --slds-c-buttonicon-color-foreground-hover,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+  }
+
+  :host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+    --slds-c-icon-color-foreground: var(
+      --slds-c-buttonicon-color-foreground-focus,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+  }
+
+  :host([data-render-mode="shadow"]) [part~='button-icon']:active {
+    --slds-c-icon-color-foreground: var(
+      --slds-c-buttonicon-color-foreground-active,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+  }
+
+  /* Create disabled state for the 1st time since icon doesn't have disabled state. */
+  :host([data-render-mode="shadow"]) [part~='button-icon']:disabled {
+    --slds-c-icon-color-foreground: var(--slds-c-buttonicon-color-foreground-disabled);
+  }
+
+  /**
+   * Variant - Bare
+   *
+   * Note: `_bare` variant is deprecated in SLDS and SLDS (light DOM version) assumes the `bare` variant
+   * will be the default styling.
+   *
+   * We include it here as an explicit variant for two reasons:
+   *
+   * 1. LBC parity; LBC uses `border` variant as default, not `bare`.
+   * 2. `bare` is the only variant that excludes padding; it is an outlier. All
+   *    variants share common styling except `bare`. Separating out `bare` into
+   *    its own variant saves us having to expose additional styling APIs on all
+   *    the other variants just to reassign what `bare` is doing if it is default.
+   */
+  :host([data-render-mode="shadow"][variant='bare']) [part~='button-icon'] {
+    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-bare-color-border, transparent);
+    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttonicon-bare-color-border-hover, transparent);
+    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttonicon-bare-color-border-focus, transparent);
+    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-bare-color-border-active, transparent);
+    --slds-c-buttonicon-spacing-inline: var(--slds-c-buttonicon-bare-spacing-inline, 0);
+    --slds-c-buttonicon-spacing-block: var(--slds-c-buttonicon-bare-spacing-block, 0);
+
+    /* Disabled */
+    --slds-c-buttonicon-color-border-disabled: var(
+      --slds-c-buttonicon-bare-color-border-disabled,
+      transparent
+    );
+    --slds-c-buttonicon-color-background-disabled: var(
+      --slds-c-buttonicon-bare-color-background-disabled,
+      transparent
+    );
+  }
+
+  /**
+      * Variant - Container
+      */
+  :host([data-render-mode="shadow"][variant='container']) [part~='button-icon'] {
+    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-container-color-border, transparent);
+    --slds-c-buttonicon-color-border-hover: var(
+      --slds-c-buttonicon-container-color-border-hover,
+      transparent
+    );
+    --slds-c-buttonicon-color-border-focus: var(
+      --slds-c-buttonicon-container-color-border-focus,
+      transparent
+    );
+    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-container-color-border-active);
+
+    /* Disabled */
+    --slds-c-buttonicon-color-border-disabled: var(
+      --slds-c-buttonicon-container-color-border-disabled,
+      transparent
+    );
+  }
+
+  /**
+      * Variant - Brand
+      */
+  :host([data-render-mode="shadow"][variant='brand']) [part~='button-icon'] {
+    --slds-c-button-brand-color-background: var(--slds-c-buttonicon-brand-color-background);
+    --slds-c-button-brand-color-background-hover: var(--slds-c-buttonicon-brand-color-background-hover);
+    --slds-c-button-brand-color-background-focus: var(--slds-c-buttonicon-brand-color-background-focus);
+    --slds-c-button-brand-color-background-active: var(--slds-c-buttonicon-brand-color-background-active);
+    --slds-c-button-brand-color-border: var(--slds-c-buttonicon-brand-color-border);
+    --slds-c-button-brand-color-border-hover: var(--slds-c-buttonicon-brand-color-border-hover);
+    --slds-c-button-brand-color-border-focus: var(--slds-c-buttonicon-brand-color-border-focus);
+    --slds-c-button-brand-color-border-active: var(--slds-c-buttonicon-brand-color-border-active);
+
+    --slds-c-buttonicon-color-foreground: var(
+      --slds-c-buttonicon-brand-color-foreground,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-foreground-hover: var(
+      --slds-c-buttonicon-brand-color-foreground-hover,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-foreground-focus: var(
+      --slds-c-buttonicon-brand-color-foreground-focus,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-foreground-active: var(
+      --slds-c-buttonicon-brand-color-foreground-active,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+  }
+
+  /**
+      * Variant - Bare Inverse
+      */
+  :host([data-render-mode="shadow"][variant='bare-inverse']) [part~='button-icon'] {
+    /* Background */
+    --slds-c-buttonicon-color-background-active: transparent;
+
+    /* Border */
+    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-bareinverse-color-border, transparent);
+    --slds-c-buttonicon-color-border-hover: var(
+      --slds-c-buttonicon-bareinverse-color-border-hover,
+      transparent
+    );
+    --slds-c-buttonicon-color-border-focus: var(
+      --slds-c-buttonicon-bareinverse-color-border-focus,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-color-border-focus);
+
+    /* Spacing */
+    --slds-c-buttonicon-spacing-inline: var(--slds-c-buttonicon-bareinverse-spacing-inline, 0);
+    --slds-c-buttonicon-spacing-block: var(--slds-c-buttonicon-bareinverse-spacing-block, 0);
+
+    /* Shadow */
+    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
+
+    /* Icon */
+    --slds-c-buttonicon-color-foreground: var(
+      --slds-c-buttonicon-bareinverse-color-foreground,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-foreground-hover: var(
+      --slds-c-buttonicon-bareinverse-color-foreground-hover,
+      var(--sds-g-color-brand-base-95, #eef4ff)
+    );
+    --slds-c-buttonicon-color-foreground-focus: var(
+      --slds-c-buttonicon-bareinverse-color-foreground-focus,
+      var(--sds-g-color-brand-base-95, #eef4ff)
+    );
+    --slds-c-buttonicon-color-foreground-active: var(
+      --slds-c-buttonicon-bareinverse-color-foreground-active,
+      var(--sds-g-color-brand-base-95, #eef4ff)
+    );
+
+    /* Disabled */
+    --slds-c-buttonicon-color-border-disabled: var(
+      --slds-c-buttonicon-bareinverse-color-border-disabled,
+      transparent
+    );
+  }
+
+  /**
+      * Variant - Border Inverse
+      */
+  :host([data-render-mode="shadow"][variant='border-inverse']) [part~='button-icon'] {
+    /* Border */
+    --slds-c-buttonicon-color-border: var(
+      --slds-c-buttonicon-borderinverse-color-border,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-border-hover: var(
+      --slds-c-buttonicon-borderinverse-color-border-hover,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-border-focus: var(
+      --slds-c-buttonicon-borderinverse-color-border-focus,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-border-active: var(
+      --slds-c-buttonicon-borderinverse-color-border-active,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+
+    /* Shadow */
+    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
+
+    /* Icon */
+    --slds-c-buttonicon-color-foreground: var(
+      --slds-c-buttonicon-borderinverse-color-foreground,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-foreground-hover: var(
+      --slds-c-buttonicon-borderinverse-color-foreground-hover,
+      var(--sds-g-color-brand-base-95, #eef4ff)
+    );
+    --slds-c-buttonicon-color-foreground-focus: var(
+      --slds-c-buttonicon-borderinverse-color-foreground-focus,
+      var(--sds-g-color-brand-base-95, #eef4ff)
+    );
+    --slds-c-buttonicon-color-foreground-active: var(
+      --slds-c-buttonicon-borderinverse-color-foreground-active,
+      var(--sds-g-color-brand-base-90, #d8e6fe)
+    );
+  }
+
+  /**
+      * Variant - Border Filled
+      */
+  :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
+    --slds-c-buttonicon-color-background: var(
+      --slds-c-buttonicon-borderfilled-color-background,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-background-hover: var(
+      --slds-c-buttonicon-borderfilled-color-background-hover,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-background-focus: var(
+      --slds-c-buttonicon-borderfilled-color-background-focus,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-background-active: var(
+      --slds-c-buttonicon-borderfilled-color-background-active,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-borderfilled-color-border);
+    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttonicon-borderfilled-color-border-hover);
+    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttonicon-borderfilled-color-border-focus);
+    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-borderfilled-color-border-active);
+  }
+
+  /**
+      * Sizes
+      *
+      * Sizes are restricted to specific variants.
+      */
+  :host([data-render-mode="shadow"][size='xx-small']) [part~='button-icon'] {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-sizing: 0.5rem;
+  }
+
+  :host([data-render-mode="shadow"][size='x-small']) [part~='button-icon'] {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-sizing: 0.75rem;
+  }
+
+  :host([data-render-mode="shadow"][size='small']) [part~='button-icon'] {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-sizing: 0.875rem;
+  }
+
+  :host([data-render-mode="shadow"][size='x-small'][variant='bare']) [part~='button-icon'] {
+    --slds-c-buttonicon-spacing-block: 0;
+    --slds-c-buttonicon-spacing-inline: 0;
+    --slds-c-buttonicon-sizing: 0.5rem;
+  }
+
+  :host([data-render-mode="shadow"][size='small'][variant='bare']) [part~='button-icon'] {
+    --slds-c-buttonicon-spacing-block: 0;
+    --slds-c-buttonicon-spacing-inline: 0;
+    --slds-c-buttonicon-sizing: 0.75rem;
+  }
+
+  :host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'] {
+    --slds-c-buttonicon-sizing: 1.5rem;
+  }
+
+  /**
+      * End part
+      */
+  :host([data-render-mode="shadow"]) [part~='end'] {
+    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
+  }
+
+  /**
+      * A temporarily baked-in utility class until SLDS gets a proper utility package.
+      *
+      * This is a hybrid patch between synthetic and native shadow. The ideal final
+      * outcome is the removal of this class and replacing the class with the SLDS
+      * utility package solution.
+      */
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+  }
+}

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

@@ -0,0 +1,230 @@
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) {
+  line-height: var(--sds-g-font-lineheight, 1.5);
+  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);
+}