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

package/src/lightning/tabset/__docs__/tabset.md

@@ -97,11 +97,11 @@ You can use a combination of the `variant` and `class` attributes to customize t
 
 Use the `variant` attribute to group your content and apply styling.
 
--   `default` creates global tabs. When you select a tab, its content replaces the content of the previously selected tab. The default variant tab encapsulates the content underneath it without enclosing it visually.
+- `default` creates global tabs. When you select a tab, its content replaces the content of the previously selected tab. The default variant tab encapsulates the content underneath it without enclosing it visually.
 
--   `scoped` creates a tab set that has a closed container with a defined border. Scoped tabs are useful for stacking several tabbed sections, where you want to change only a portion of the content displayed. When you click those tabs, the content at the bottom remains the same while the content at the top changes for the activity.
+- `scoped` creates a tab set that has a closed container with a defined border. Scoped tabs are useful for stacking several tabbed sections, where you want to change only a portion of the content displayed. When you click those tabs, the content at the bottom remains the same while the content at the top changes for the activity.
 
--   `vertical` resembles the scoped variant in appearance, but the tabs are arranged vertically to the side instead of on the top.
+- `vertical` resembles the scoped variant in appearance, but the tabs are arranged vertically to the side instead of on the top.
 
 You can nest scoped tabs within a global tab set, but don't nest global tabs. If additional hierarchy is necessary, consider using a `lightning-tree` component.
 
@@ -120,7 +120,7 @@ This example adds a gray background and padding to the content area on the first
 </lightning-tabset>
 ```
 
-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 [Tabs: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/tabs/) for documentation on component-specific hooks for this component. 
+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 [Tabs: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/tabs/) 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.
 

package/src/lightning/tabset/tabset.slds.css

@@ -1,13 +1,13 @@
 
-  :host([data-render-mode="shadow"]) .slds-vertical-tabs {
-      display: flex;
-      overflow: visible;
-      border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1, --slds-g-color-border-1);
-      border-radius: var(--slds-g-spacing-1);
-  }
-  :host([data-render-mode="shadow"]) .slds-tabs_default .slds-tabs_default__header {
-    font-weight: var(--sds-g-font-weight-bold, bold);
-  }
-  :host([data-render-mode="shadow"]) .slds-tabs_default .slds-tabs_default__header:not(.slds-assistive-text) {
-    font-size: var(--sds-g-font-scale-neg-2, 0.625rem);
-  }
+:host([data-render-mode="shadow"]) .slds-vertical-tabs {
+  display: flex;
+  overflow: visible;
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1, --slds-g-color-border-1);
+  border-radius: var(--slds-g-spacing-1);
+}
+:host([data-render-mode="shadow"]) .slds-tabs_default .slds-tabs_default__header {
+  font-weight: var(--sds-g-font-weight-bold, bold);
+}
+:host([data-render-mode="shadow"]) .slds-tabs_default .slds-tabs_default__header:not(.slds-assistive-text) {
+  font-size: var(--sds-g-font-scale-neg-2, 0.625rem);
+}

package/src/lightning/textarea/__docs__/textarea.md

@@ -54,9 +54,9 @@ length using the `maxlength` attribute or a minimum length using the
 `minlength` attribute. An error message is automatically displayed in the
 following cases:
 
--   A required field is empty when `required` is present on the `lightning-textarea` tag.
--   The input value contains fewer characters than that specified by the `minlength` attribute.
--   The input value contains more characters than that specified by the `maxlength` attribute.
+- A required field is empty when `required` is present on the `lightning-textarea` tag.
+- The input value contains fewer characters than that specified by the `minlength` attribute.
+- The input value contains more characters than that specified by the `maxlength` attribute.
 
 To check the validity states of an input, use the `validity` attribute, which
 is based on the `ValidityState` object. You can access the validity states in
@@ -101,10 +101,10 @@ The `setRangeText()` method follows the API of the standard `HTMLInputElement.se
 
 Valid values for selectMode are:
 
--   `select` - Selects the inserted text. The text area must have focus when `setRangeText()` is called.
--   `start` - Moves the selection to just before the inserted text.
--   `end` - Moves the selection to just after the inserted text.
--   `preserve` - Attempts to preserve the selection in effect before the insertion. This is the default.
+- `select` - Selects the inserted text. The text area must have focus when `setRangeText()` is called.
+- `start` - Moves the selection to just before the inserted text.
+- `end` - Moves the selection to just after the inserted text.
+- `preserve` - Attempts to preserve the selection in effect before the insertion. This is the default.
 
 To insert replacement text at the current cursor location, specify only the
 replacement string and no other parameters. After the insertion, the cursor

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

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }

package/src/lightning/textarea/textarea.js

@@ -539,6 +539,28 @@ export default class LightningTextarea extends LightningShadowBaseClass {
     handleInput(event) {
         event.stopPropagation();
 
+        const inputElement = event.target;
+        const inputLength = inputElement.value.length;
+        const warningId = 'char-limit-warning';
+        // Check if the warning element already exists
+        let warningEl = this.template.querySelector(`#${warningId}`);
+        if (inputLength >= this.maxLength) {
+            if (!warningEl) {
+                // Create and insert the warning element if it does not exist
+                warningEl = document.createElement('p');
+                warningEl.textContent = `Limit reached. You can only use ${this.maxLength} characters in this field.`;
+                warningEl.setAttribute('role', 'alert');
+                warningEl.id = warningId;
+                warningEl.classList.add('slds-assistive-text');
+                inputElement.after(warningEl); // Insert right after the input element
+            }
+        } else {
+            // Remove the warning element if it exists and limit is not reached
+            if (warningEl) {
+                warningEl.remove();
+            }
+        }
+
         // If the current value is the same as it was prior to last update, don't fire the event.
         // This allows us to fix an issue with IE11 which fires an 'input' event every time the placeholder
         // is changed, since the value isn't affected we're effectively ignoring such events.

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

@@ -2,4 +2,3 @@
 textarea {
     display: block;
 }
-

package/src/lightning/textarea/textarea.slds.css

@@ -1,110 +1,135 @@
 
-  :host([data-render-mode="shadow"]) {
-          /**
+:host([data-render-mode="shadow"]) {
+  /**
           * Remap to SLDS blueprint hooks for parity
           * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
           */
 
-          /* stylelint-disable */
-          --slds-c-textarea-spacing-blockstart: var(--slds-c-textarea-spacing-block-start);
-          --slds-c-textarea-spacing-blockend: var(--slds-c-textarea-spacing-block-end);
-          --slds-c-textarea-spacing-inlinestart: var(--slds-c-textarea-spacing-inline-start);
-          --slds-c-textarea-spacing-inlineend: var(--slds-c-textarea-spacing-inline-end);
-          /* stylelint-enable */
-  }
+  /* stylelint-disable */
+  --slds-c-textarea-spacing-blockstart: var(--slds-c-textarea-spacing-block-start);
+  --slds-c-textarea-spacing-blockend: var(--slds-c-textarea-spacing-block-end);
+  --slds-c-textarea-spacing-inlinestart: var(--slds-c-textarea-spacing-inline-start);
+  --slds-c-textarea-spacing-inlineend: var(--slds-c-textarea-spacing-inline-end);
+  /* stylelint-enable */
+}
 
-    /* sldsCommon.css file comments indicate intentionally
+/* sldsCommon.css file comments indicate intentionally
         not adding textarea selector to that file due to
         style leaks in synthetic shadow mode.
         adding here instead
     */
 
-    :host([data-render-mode="shadow"]) textarea {
-        color: inherit;
-        font: inherit;
-        margin: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-textarea {
-        appearance: none;
-        min-height: var(--slds-c-textarea-sizing-min-height);
-        width: 100%;
-        padding-block-start: var(--slds-c-textarea-spacing-blockstart, var(--slds-g-spacing-2));
-        padding-inline-end: var(--slds-c-textarea-spacing-inlineend, var(--slds-g-spacing-3));
-        padding-block-end: var(--slds-c-textarea-spacing-blockend, var(--slds-g-spacing-2));
-        padding-inline-start: var(--slds-c-textarea-spacing-inlinestart, var(--slds-g-spacing-3));
-        background-color: var(--slds-c-textarea-color-background, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
-        color: var(--slds-c-textarea-text-color);
-        border: var(--slds-g-sizing-border-1) solid var(--slds-c-textarea-color-border, var(--slds-g-color-border-2, var(--slds-g-color-border-1)));
-        border-radius: var(--slds-c-textarea-radius-border, var(--slds-g-radius-border-2));
-        box-shadow: var(--slds-c-textarea-shadow);
-        resize: vertical;
-        transition: border 0.1s linear, background-color 0.1s linear;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-textarea:required {
-        --slds-c-textarea-shadow: none;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-textarea:focus,:host([data-render-mode="shadow"]) 
-    .slds-textarea:active {
-        outline: 0;
-        color: var(--slds-c-textarea-text-color-focus);
-        background-color: var(--slds-c-textarea-color-background-focus, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
-        border-color: var(--slds-c-textarea-color-border-focus, var(--slds-g-color-brand-base-60, var(--slds-g-color-brand-base-60)));
-        box-shadow: var(--slds-c-textarea-shadow-focus, 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-brand-base-50));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-textarea[disabled],:host([data-render-mode="shadow"]) 
-    .slds-textarea.slds-is-disabled {
-        background-color: var(--slds-g-color-disabled-container-2);
-        border-color: var(--slds-g-color-border-disabled-2);
-        color: inherit;
-        cursor: not-allowed;
-        user-select: none;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-textarea[disabled]:focus,:host([data-render-mode="shadow"]) 
-    .slds-textarea[disabled]:active,:host([data-render-mode="shadow"]) 
-    .slds-textarea.slds-is-disabled:focus,:host([data-render-mode="shadow"]) 
-    .slds-textarea.slds-is-disabled:active {
-        box-shadow: none;
-    }
-
-    /* replace .slds-has-error with invalid */
-
-    :host([data-render-mode="shadow"][invalid]) .slds-textarea {
-        --slds-c-textarea-color-background: var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100));
-        --slds-c-textarea-color-border: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50));
-        --slds-c-textarea-shadow: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50)) 0 0 0 var(--slds-g-sizing-border-1) inset;
-
-        background-clip: padding-box;
-    }
-
-    /* replace .slds-has-error with invalid */
-
-    :host([data-render-mode="shadow"][invalid]) .slds-textarea:focus,:host([data-render-mode="shadow"][invalid]) .slds-textarea:active {
-        --slds-c-textarea-text-color-focus: var(--slds-c-textarea-text-color-error-focus);
-        --slds-c-textarea-color-background-focus: var(--slds-c-textarea-color-background-error-focus, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
-        --slds-c-textarea-shadow-focus: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50)) 0 0 0 var(--slds-g-sizing-border-1) inset, 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-brand-base-50);
-    }
-
-    /* TODO W-12674349: remove after name-value-list utils are added */
-
-    :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;
-  }
-
-    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
-    padding: 0;
-    margin-block-end: 0;
-  }
+:host([data-render-mode="shadow"]) textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-textarea {
+  appearance: none;
+  min-height: var(--slds-c-textarea-sizing-min-height);
+  width: 100%;
+  padding-block-start: var(--slds-c-textarea-spacing-blockstart, var(--slds-g-spacing-2));
+  padding-inline-end: var(--slds-c-textarea-spacing-inlineend, var(--slds-g-spacing-3));
+  padding-block-end: var(--slds-c-textarea-spacing-blockend, var(--slds-g-spacing-2));
+  padding-inline-start: var(--slds-c-textarea-spacing-inlinestart, var(--slds-g-spacing-3));
+  background-color: var(
+    --slds-c-textarea-color-background,
+    var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100))
+  );
+  color: var(--slds-c-textarea-text-color);
+  border: var(--slds-g-sizing-border-1) solid
+    var(--slds-c-textarea-color-border, var(--slds-g-color-border-2, var(--slds-g-color-border-1)));
+  border-radius: var(--slds-c-textarea-radius-border, var(--slds-g-radius-border-2));
+  box-shadow: var(--slds-c-textarea-shadow);
+  resize: vertical;
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
+}
+
+:host([data-render-mode="shadow"]) .slds-textarea:required {
+  --slds-c-textarea-shadow: none;
+}
+
+:host([data-render-mode="shadow"]) .slds-textarea:focus,:host([data-render-mode="shadow"]) 
+.slds-textarea:active {
+  outline: 0;
+  color: var(--slds-c-textarea-text-color-focus);
+  background-color: var(
+    --slds-c-textarea-color-background-focus,
+    var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100))
+  );
+  border-color: var(
+    --slds-c-textarea-color-border-focus,
+    var(--slds-g-color-brand-base-60, var(--slds-g-color-brand-base-60))
+  );
+  box-shadow: var(
+    --slds-c-textarea-shadow-focus,
+    0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-brand-base-50)
+  );
+}
+
+:host([data-render-mode="shadow"]) .slds-textarea[disabled],:host([data-render-mode="shadow"]) 
+.slds-textarea.slds-is-disabled {
+  background-color: var(--slds-g-color-disabled-container-2);
+  border-color: var(--slds-g-color-border-disabled-2);
+  color: inherit;
+  cursor: not-allowed;
+  user-select: none;
+}
+
+:host([data-render-mode="shadow"]) .slds-textarea[disabled]:focus,:host([data-render-mode="shadow"]) 
+.slds-textarea[disabled]:active,:host([data-render-mode="shadow"]) 
+.slds-textarea.slds-is-disabled:focus,:host([data-render-mode="shadow"]) 
+.slds-textarea.slds-is-disabled:active {
+  box-shadow: none;
+}
+
+/* replace .slds-has-error with invalid */
+
+:host([data-render-mode="shadow"][invalid]) .slds-textarea {
+  --slds-c-textarea-color-background: var(
+    --slds-g-color-neutral-base-100,
+    var(--slds-g-color-neutral-base-100)
+  );
+  --slds-c-textarea-color-border: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50));
+  --slds-c-textarea-shadow: var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50)) 0 0 0
+    var(--slds-g-sizing-border-1) inset;
+
+  background-clip: padding-box;
+}
+
+/* replace .slds-has-error with invalid */
+
+:host([data-render-mode="shadow"][invalid]) .slds-textarea:focus,:host([data-render-mode="shadow"][invalid]) .slds-textarea:active {
+  --slds-c-textarea-text-color-focus: var(--slds-c-textarea-text-color-error-focus);
+  --slds-c-textarea-color-background-focus: var(
+    --slds-c-textarea-color-background-error-focus,
+    var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100))
+  );
+  --slds-c-textarea-shadow-focus:
+    var(--slds-g-color-error-base-40, var(--slds-g-color-error-base-50)) 0 0 0 var(--slds-g-sizing-border-1)
+      inset,
+    0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-brand-base-50);
+}
+
+/* TODO W-12674349: remove after name-value-list utils are added */
+
+: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;
+}
+
+:host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
+  padding: 0;
+  margin-block-end: 0;
+}

package/src/lightning/tile/tile.slds.css

@@ -1,6 +1,5 @@
 
 @supports (--styling-hooks: '') {
-
   :host([data-render-mode="shadow"].slds-tile:not(:first-of-type)) {
     margin-block-start: var(--slds-g-spacing-2);
   }

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

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }

package/src/lightning/timepicker/timepicker.slds.css

@@ -1,15 +1,14 @@
 
-
-  /* ASSISTIVE TEXT */
-  :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;
-  }
+/* ASSISTIVE TEXT */
+: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/__docs__/toast.md

@@ -8,7 +8,7 @@ To specify your toast position and the maximum number of toasts to display, use
 
 To show a toast notification, call the function `show(config, comp)` from `lightning/toast`. The function creates a single page-level toast container if one does not exist. The `show(config, comp)` function contains two parameters:
 
-- The `config` parameter references an object that specifies toast configuration attributes.  See the **Toast Configuration Attributes** section for a list of properties to include in the config.
+- The `config` parameter references an object that specifies toast configuration attributes. See the **Toast Configuration Attributes** section for a list of properties to include in the config.
 - The `comp` parameter is a reference to the local component or `this`.
 
 This example creates an informational toast that displays until the user dismisses it.
@@ -73,19 +73,19 @@ To provide links in toasts on small screens and mobile environments, we recommen
 
 For more information on the toast configuration attributes, see the Specification tab.
 
-When you use `labelLinks` or `messageLinks`, the content of `label` or `message` is rendered using [`lightning-formatted-rich-text`](/docs/component-library/bundle/lightning-formatted-rich-text/documentation). See the 
- [`lightning-formatted-rich-text` documentation](/docs/component-library/bundle/lightning-formatted-rich-text/documentation) for expected styling when rendering a link.
+When you use `labelLinks` or `messageLinks`, the content of `label` or `message` is rendered using [`lightning-formatted-rich-text`](/docs/component-library/bundle/lightning-formatted-rich-text/documentation). See the
+[`lightning-formatted-rich-text` documentation](/docs/component-library/bundle/lightning-formatted-rich-text/documentation) for expected styling when rendering a link.
 
 #### Toast Variants
 
 The `variant` attribute sets the component's color and icon.
 
-| Value | Color | Icon |
-| --- | --- | --- |
-| `info` (default) | grey | `utility:info`|
-| `success` | green | `utility:success`|
-| `warning` | orange | `utility:warning`|
-| `error` | red | `utility:error`|
+| Value            | Color  | Icon              |
+| ---------------- | ------ | ----------------- |
+| `info` (default) | grey   | `utility:info`    |
+| `success`        | green  | `utility:success` |
+| `warning`        | orange | `utility:warning` |
+| `error`          | red    | `utility:error`   |
 
 #### Toast Dismissal
 
@@ -96,13 +96,13 @@ The `mode` attribute sets the component's dismissal.
 
 If you don't provide a `mode` value, the toast dismissal is determined by the value of `variant` and whether the `toast` has a link or links present in `label` or `message`.
 
-| Variant | Has link? | Default Mode |
-| --- | --- | --- |
-| `info` | Yes| `sticky`|
-| `info` | No | `sticky`|
-| `success` | Yes | `sticky`|
-| `success` | No | `dismissible`|
-| `warning` | Yes | `sticky`|
-| `warning` | No | `sticky`|
-| `error` | Yes | `sticky`|
-| `error` | No | `sticky`|
+| Variant   | Has link? | Default Mode  |
+| --------- | --------- | ------------- |
+| `info`    | Yes       | `sticky`      |
+| `info`    | No        | `sticky`      |
+| `success` | Yes       | `sticky`      |
+| `success` | No        | `dismissible` |
+| `warning` | Yes       | `sticky`      |
+| `warning` | No        | `sticky`      |
+| `error`   | Yes       | `sticky`      |
+| `error`   | No        | `sticky`      |