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

package/src/lightning/prompt/__docs__/prompt.md

@@ -40,20 +40,20 @@ This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blue
 
 `LightningPrompt` supports the following attributes:
 
--   `message`: Message text that displays in the prompt.
--   `defaultValue`: Optional. Initial leading text for the input text box.
--   `label`: Header text, also used as the `aria-label`. Default string is `Prompt`.
--   `variant`: Two values, `header` and `headerless`. Default value is `header`.
--   `theme`: Color theme for the header. The `theme` attribute supports the following [options](https://www.lightningdesignsystem.com/utilities/themes/#site-main-content) from SLDS:
-    -   `default`: white
-    -   `shade`: gray
-    -   `inverse`: dark blue
-    -   `alt-inverse`: darker blue
-    -   `success`: green
-    -   `info`: gray-ish blue
-    -   `warning`: yellow
-    -   `error`: red
-    -   `offline`: ​black​
+- `message`: Message text that displays in the prompt.
+- `defaultValue`: Optional. Initial leading text for the input text box.
+- `label`: Header text, also used as the `aria-label`. Default string is `Prompt`.
+- `variant`: Two values, `header` and `headerless`. Default value is `header`.
+- `theme`: Color theme for the header. The `theme` attribute supports the following [options](https://www.lightningdesignsystem.com/utilities/themes/#site-main-content) from SLDS:
+    - `default`: white
+    - `shade`: gray
+    - `inverse`: dark blue
+    - `alt-inverse`: darker blue
+    - `success`: green
+    - `info`: gray-ish blue
+    - `warning`: yellow
+    - `error`: red
+    - `offline`: ​black​
 
 If an invalid value is provided, `LightningPrompt` uses the `default` theme. `LightningPrompt` ignores the `style` attribute.
 

package/src/lightning/prompt/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/prompt/input-text.slds.css

@@ -225,118 +225,102 @@
    * Input Text
    */
 :host([data-render-mode="shadow"]) [part='input-text'] {
-        /* Host reassignments to composed slds-icon */
-        --slds-c-icon-color-foreground: var(
-            --slds-c-inputtext-icon-color-foreground,
-            var(--slds-g-color-on-surface-1)
-        );
-        --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
-        --sds-c-inputtext-sizing-height: var(
-            --slds-c-inputtext-sizing-height,
-            var(--slds-g-sizing-9)
-        );
-        --sds-c-inputtext-color-background: var(
-            --slds-c-inputtext-color-background,
-            var(--slds-g-color-surface-container-1)
-        );
-        --sds-c-inputtext-color-background-focus: var(
-            --slds-c-inputtext-color-background-focus,
-            var(--slds-g-color-surface-container-1)
-        );
-        --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
-        --sds-c-inputtext-font-size: var(
-            --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
-        );
-        --sds-c-inputtext-text-color-placeholder: var(
-            --slds-c-inputtext-text-color-placeholder,
-            var(--slds-g-color-on-surface-1)
-        );
-        --sds-c-inputtext-color-border: var(
-            --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-2)
-        );
-        --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
-        --sds-c-inputtext-radius-border: var(
-            --slds-c-inputtext-radius-border,
-            var(--slds-g-radius-border-2)
-        );
+  /* Host reassignments to composed slds-icon */
+  --slds-c-icon-color-foreground: var(
+    --slds-c-inputtext-icon-color-foreground,
+    var(--slds-g-color-on-surface-1)
+  );
+  --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
+  --sds-c-inputtext-sizing-height: var(--slds-c-inputtext-sizing-height, var(--slds-g-sizing-9));
+  --sds-c-inputtext-color-background: var(
+    --slds-c-inputtext-color-background,
+    var(--slds-g-color-surface-container-1)
+  );
+  --sds-c-inputtext-color-background-focus: var(
+    --slds-c-inputtext-color-background-focus,
+    var(--slds-g-color-surface-container-1)
+  );
+  --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
+  --sds-c-inputtext-font-size: var(--slds-c-inputtext-font-size, var(--slds-g-font-size-base));
+  --sds-c-inputtext-text-color-placeholder: var(
+    --slds-c-inputtext-text-color-placeholder,
+    var(--slds-g-color-on-surface-1)
+  );
+  --sds-c-inputtext-color-border: var(--slds-c-inputtext-color-border, var(--slds-g-color-border-2));
+  --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
+  --sds-c-inputtext-radius-border: var(--slds-c-inputtext-radius-border, var(--slds-g-radius-border-2));
 
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-    }
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
 /**
    * Input Container
    */
 :host([data-render-mode="shadow"]) [part='input-container'] {
-        flex: 1 0 100%;
-        align-items: stretch;
-        --sds-c-inputtext-spacing-inline: 0;
-        --sds-c-inputtext-spacing-block: 0;
-    }
+  flex: 1 0 100%;
+  align-items: stretch;
+  --sds-c-inputtext-spacing-inline: 0;
+  --sds-c-inputtext-spacing-block: 0;
+}
 :host([data-render-mode="shadow"]) [part='input-container'][type='range'] {
-        border: none;
-        display: inline-block;
-    }
+  border: none;
+  display: inline-block;
+}
 :host([data-render-mode="shadow"]) [part='input-container'] .slds-input__icon:not(button) {
-            pointer-events: none;
-    }
+  pointer-events: none;
+}
 :host([data-render-mode="shadow"]) [part='input'][type='range'] {
-        min-height: calc(1.875rem + (1px * 2));
-        margin: 0;
-    }
+  min-height: calc(1.875rem + (1px * 2));
+  margin: 0;
+}
 :host([data-render-mode="shadow"]) [part='input-container'][type='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part='input-container'][type='range']:active {
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
-        --sds-c-inputtext-shadow: 0 0 3px var(--slds-g-color-accent-2);
-        --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
+[part='input-container'][type='range']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
+  --sds-c-inputtext-shadow: 0 0 3px var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
 
-        outline: 0;
-        border-width: var(--sds-c-inputtext-sizing-border, var(--slds-g-sizing-border-1));
-        border-color: var(--sds-c-inputtext-color-border, var(--slds-g-color-border-2));
-    }
+  outline: 0;
+  border-width: var(--sds-c-inputtext-sizing-border, var(--slds-g-sizing-border-1));
+  border-color: var(--sds-c-inputtext-color-border, var(--slds-g-color-border-2));
+}
 /**
    * Input
    */
 :host([data-render-mode="shadow"]) [part='input'] {
-        padding-inline-start: var(
-            --slds-c-inputtext-spacing-inlinestart,
-            var(--slds-g-spacing-3));
-        padding-inline-end: var(
-            --slds-c-inputtext-spacing-inlineend,
-            var(--slds-g-spacing-4));
-        height: unset;
-        font-family: var(--slds-g-font-family);
-    }
+  padding-inline-start: var(--slds-c-inputtext-spacing-inlinestart, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-inputtext-spacing-inlineend, var(--slds-g-spacing-4));
+  height: unset;
+  font-family: var(--slds-g-font-family);
+}
 /**
    * Focus / active State
    */
-:host(:not([disabled])) [part="input-container"]:focus-within,
-   :host(:not([disabled])) [part="input-container"]:active {
-      --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
-      --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
-      --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
+:host(:not([disabled])) [part='input-container']:focus-within,
+:host(:not([disabled])) [part='input-container']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
+  --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
 
-      outline: 0;
-    }
+  outline: 0;
+}
 /**
    * Read Only State
    */
 :host([data-render-mode="shadow"][readonly]) [part='input-text'] {
-        --sds-c-inputtext-spacing-inline-start-readonly: 0;
-        --sds-c-inputtext-color-border-focus: transparent;
-        --slds-c-inputtext-color-border: transparent;
-        --slds-c-inputtext-color-background: transparent;
-        --slds-c-inputtext-color-background-focus: transparent;
-    }
-:host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
-       --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
-       --sds-c-inputtext-color-background: transparent;
+  --sds-c-inputtext-spacing-inline-start-readonly: 0;
+  --sds-c-inputtext-color-border-focus: transparent;
+  --slds-c-inputtext-color-border: transparent;
+  --slds-c-inputtext-color-background: transparent;
+  --slds-c-inputtext-color-background-focus: transparent;
+}
+:host([data-render-mode="shadow"][readonly]) [part='input-container']:focus-within,:host([data-render-mode="shadow"][readonly]) [part='input-container']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
+  --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: transparent;
 
-       outline: 0;
-     }
+  outline: 0;
+}
 /**
    * Invalid State
    *
@@ -345,25 +329,24 @@
    * uses :host([invalid]).
    */
 :host([data-render-mode="shadow"][invalid]) [part='input-text'] {
-        --sds-c-inputtext-shadow: 0 0 0 var(--slds-g-sizing-border-1) inset
-            var(--slds-g-color-error-1);
-        --slds-c-inputtext-color-border: var(--slds-g-color-border-error-1);
-        --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
-    }
+  --sds-c-inputtext-shadow: 0 0 0 var(--slds-g-sizing-border-1) inset var(--slds-g-color-error-1);
+  --slds-c-inputtext-color-border: var(--slds-g-color-border-error-1);
+  --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+}
 :host([data-render-mode="shadow"][invalid]) .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
-     }
-:host([data-render-mode="shadow"][invalid]) input[type="search"] {
-      --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
-      --slds-c-input-color-border: var(--slds-g-color-border-error-1);
-      --slds-c-input-text-color: var(--slds-s-input-color-invalid);
+  --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+}
+:host([data-render-mode="shadow"][invalid]) input[type='search'] {
+  --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
+  --slds-c-input-color-border: var(--slds-g-color-border-error-1);
+  --slds-c-input-text-color: var(--slds-s-input-color-invalid);
 
-      background-clip: padding-box;
-    }
-:host([data-render-mode="shadow"][invalid]) input[type="search"] + lightning-primitive-icon::part(icon) {
-      fill: var(--slds-g-color-error-1);
-      color: var(--slds-g-color-error-1);
-    }
+  background-clip: padding-box;
+}
+:host([data-render-mode="shadow"][invalid]) input[type='search'] + lightning-primitive-icon::part(icon) {
+  fill: var(--slds-g-color-error-1);
+  color: var(--slds-g-color-error-1);
+}
 /**
    * Invalid State - Focus
    *
@@ -371,26 +354,28 @@
    * here to prevent a bug with the focus state border and box-shadow
    */
 :host([data-render-mode="shadow"][invalid]) [part='input-container']:focus-within {
-      --sds-c-inputtext-shadow:
-        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-border-error-1);
-      --sds-c-inputtext-color-border: var(--slds-g-color-error-1);
-    }
+  --sds-c-inputtext-shadow:
+    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-border-error-1);
+  --sds-c-inputtext-color-border: var(--slds-g-color-error-1);
+}
 /**
    * Disabled State
    *
    * Both parts form the visible form control.
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
-        cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
-    }
+  cursor: not-allowed;
+  --sds-c-inputtext-color-background: var(
+    --slds-s-input-color-background-disabled,
+    var(--slds-g-color-disabled-container-1)
+  );
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+  --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
+}
 :host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
+  --sds-c-inputtext-text-color-placeholder: var(--slds-g-color-on-disabled-2);
+}
 /**
    * Label
    *
@@ -398,17 +383,14 @@
    * avoid collisions with other components using [part='label'] (e.g. slds-input-checkbox)
    */
 :host([data-render-mode="shadow"]) [part='input-text'] [part='label'] {
-        padding-block-start: var(--slds-g-spacing-1);
-        padding-inline-end: var(--slds-g-spacing-2);
-        color: var(
-            --slds-c-inputtext-label-color,
-            var(--slds-g-color-on-surface-2)
-        );
-        margin-block-end: var(--slds-g-sizing-1);
+  padding-block-start: var(--slds-g-spacing-1);
+  padding-inline-end: var(--slds-g-spacing-2);
+  color: var(--slds-c-inputtext-label-color, var(--slds-g-color-on-surface-2));
+  margin-block-end: var(--slds-g-sizing-1);
 
-        /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
-        display: inline-flex;
-    }
+  /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+  display: inline-flex;
+}
 /**
    * Start
    *
@@ -417,8 +399,8 @@
    * the icon in the inline help text.
    */
 :host([data-render-mode="shadow"]) [part='start'] {
-        --slds-c-icon-spacing-inlineend: var(--slds-g-spacing-2);
-    }
+  --slds-c-icon-spacing-inlineend: var(--slds-g-spacing-2);
+}
 /**
    * Label Inline Variant
    *
@@ -432,75 +414,75 @@
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
 @media (width >= 48em) {
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
-            display: block;
-        }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
+    display: block;
+  }
 
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='label'] {
-            float: left;
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='label'] {
+    float: left;
 
-            /* TODO: Get rid of these magic numbers */
-            max-width: calc(33% - 1.125rem);
-            padding-block-start: var(--slds-g-spacing-1);
-        }
+    /* TODO: Get rid of these magic numbers */
+    max-width: calc(33% - 1.125rem);
+    padding-block-start: var(--slds-g-spacing-1);
+  }
 
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
-            margin-inline-start: 33%;
-        }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
+    margin-inline-start: 33%;
+  }
 
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
-            float: left;
-            padding-block-start: var(--slds-g-spacing-1);
-        }
-    }
-:host([data-render-mode="shadow"]) input[type="search"] + lightning-primitive-icon::part(icon) {
-        left: var(--slds-g-spacing-3);
-        fill: var(--slds-g-color-on-surface-1);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
+    float: left;
+    padding-block-start: var(--slds-g-spacing-1);
+  }
+}
+:host([data-render-mode="shadow"]) input[type='search'] + lightning-primitive-icon::part(icon) {
+  left: var(--slds-g-spacing-3);
+  fill: var(--slds-g-color-on-surface-1);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
-        background-color: transparent;
-    }
+  background-color: transparent;
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon:focus,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--slds-g-color-accent-3);
-    }
+.slds-input-has-icon .slds-button_icon:hover {
+  --slds-c-icon-color-foreground: var(--slds-g-color-accent-3);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
-        width: 0.875rem;
-        height: 0.875rem;
-        position: absolute;
-        top: 50%;
-        margin-top: -0.4375rem;
-        line-height: 1;
-        border: 0;
-        z-index: 2;
-    }
+  width: 0.875rem;
+  height: 0.875rem;
+  position: absolute;
+  top: 50%;
+  margin-top: -0.4375rem;
+  line-height: 1;
+  border: 0;
+  z-index: 2;
+}
 /**
    * Has Icon Left
    */
 :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
-        --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon_left-right .slds-input__icon_left {
-        inset-inline-start: var(--slds-g-spacing-3);
-    }
+.slds-input-has-icon_left-right .slds-input__icon_left {
+  inset-inline-start: var(--slds-g-spacing-3);
+}
 /**
    * Has Icon Right
    */
 :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon_left-right .slds-input__icon_right {
-        inset-inline-end: var(--slds-g-spacing-3);
-    }
+.slds-input-has-icon_left-right .slds-input__icon_right {
+  inset-inline-end: var(--slds-g-spacing-3);
+}
 /**
    * Has Icon Left & Right
    */
 :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
-        --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
+  --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
+}
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
@@ -509,14 +491,14 @@
  * 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;
-  }
+  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/prompt/prompt.css

@@ -1 +1 @@
-@import './prompt.lbc.native.css'
+@import './prompt.lbc.native.css';

package/src/lightning/radioGroup/__docs__/radioGroup.md

@@ -99,8 +99,8 @@ To programmatically display error messages on invalid fields, use the `reportVal
 To reuse `lightning-radio-group` in a page or across multiple tabs such as in a Salesforce console app,
 follow one of these suggestions.
 
--   Omit the `name` attribute to enable the component to automatically generate a unique name.
--   Enclose each `lightning-radio-group` component in a `<form>` element and provide your own value for `name`.
+- Omit the `name` attribute to enable the component to automatically generate a unique name.
+- Enclose each `lightning-radio-group` component in a `<form>` element and provide your own value for `name`.
 
 If the reused component generates a unique name, each radio button group in the page renders
 `<input>` elements grouped correctly so that one value can be selected in each group.
@@ -125,10 +125,10 @@ Set `type="button"` to create a component that implements the
 
 Use the `variant` attribute with one of these values to change the appearance of the radio group.
 
--   `label-hidden` hides the radio group label but makes it available to assistive technology. This variant does not hide the option labels.
--   `label-inline` horizontally aligns the label and radio group.
--   `label-stacked` places the label above the radio group.
--   `standard` is the default variant, which displays the radio group label above the options.
+- `label-hidden` hides the radio group label but makes it available to assistive technology. This variant does not hide the option labels.
+- `label-inline` horizontally aligns the label and radio group.
+- `label-stacked` places the label above the radio group.
+- `standard` is the default variant, which displays the radio group label above the options.
 
 ##### Customize Component Styling
 

package/src/lightning/radioGroup/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/radioGroup/input-radio-group.slds.css

@@ -1,5 +1,4 @@
 
-
 :host([data-render-mode="shadow"]) .slds-radio {
   display: inline-block;
 }
@@ -20,7 +19,9 @@
   background-color: var(--slds-c-radio-color-background, var(--slds-g-color-surface-container-1));
   box-shadow: var(--slds-c-radio-shadow);
   /* stylelint-enable */
-  transition: border 0.1s linear, background-color 0.1s linear;
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
 }
 
 :host([data-render-mode="shadow"]) .slds-radio .slds-form-element__label {
@@ -139,9 +140,9 @@
 /* ------------------------------------------- */
 
 @media (width >=48em) {
-   :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
-     float: none;
-   }
+  :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+    float: none;
+  }
 }
 
 /**