lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/radioGroup/input-radio-group.slds.css

@@ -1,460 +1,138 @@
+
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-:host([data-render-mode="shadow"][role='radio']:focus-visible) {
-  outline: 0;
-}
-
-/* [role='radio'] is used to scope state styles for compatibility with the monolithic <lightning-radio-group> component. */
-
-:host([data-render-mode="shadow"][role='radio']:hover) {
-  --sds-c-inputradio-indicator-color-background: var(--sds-c-inputradio-indicator-color-background-hover);
-  --sds-c-inputradio-indicator-color-border: var(--sds-c-inputradio-indicator-color-border-hover);
-}
-
-:host([data-render-mode="shadow"][role='radio']:focus-within) {
-  --sds-c-inputradio-indicator-shadow: var(
-    --sds-c-inputradio-indicator-shadow-focus,
-    var(--sds-s-input-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3))
-  );
-  --sds-c-inputradio-indicator-color-background: var(--sds-c-inputradio-indicator-color-background-focus);
-  --sds-c-inputradio-indicator-color-border: var(--sds-c-inputradio-indicator-color-border-focus);
-}
-
-/**
- * Checked State
- */
-
-:host([data-render-mode="shadow"][role='radio'][checked]) {
-  --sds-c-inputradio-indicator-color-background: var(--sds-c-inputradio-indicator-color-background-checked);
-  --sds-c-inputradio-indicator-color-border: var(--sds-c-inputradio-indicator-color-border-checked);
+:host([data-render-mode="shadow"]) .slds-radio {
+  display: inline-block;
 }
 
-:host([data-render-mode="shadow"][role='radio'][checked]:hover) {
-  --sds-c-inputradio-indicator-color-background: var(
-    --sds-c-inputradio-indicator-color-background-checked-hover
-  );
-  --sds-c-inputradio-indicator-color-border: var(--sds-c-inputradio-indicator-color-border-checked-hover);
-  --sds-c-inputradio-mark-color-background: var(--sds-c-inputradio-mark-color-background-hover);
+:host([data-render-mode="shadow"]) .slds-radio .slds-radio_faux {
+  width: var(--slds-g-sizing-5);
+  height: var(--slds-g-sizing-5);
+  display: inline-block;
+  position: relative;
+  flex-shrink: 0;
+  vertical-align: middle;
+  /* stylelint-disable */
+  border: 1px solid var(--slds-c-radio-color-border, var(--slds-g-color-border-1));
+  /* stylelint-enable */
+  border-radius: var(--slds-g-radius-border-circle);
+  background: none;
+  /* stylelint-disable */
+  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;
+}
+
+:host([data-render-mode="shadow"]) .slds-radio .slds-form-element__label {
+  display: inline;
+  vertical-align: middle;
+  font-size: var(--slds-g-font-scale-neg-3);
 }
 
-:host([data-render-mode="shadow"][role='radio'][checked]:focus-within) {
-  --sds-c-inputradio-indicator-color-background: var(
-    --sds-c-inputradio-indicator-color-background-checked-focus
-  );
-  --sds-c-inputradio-indicator-color-border: var(--sds-c-inputradio-indicator-color-border-checked-focus);
-  --sds-c-inputradio-mark-color-background: var(--sds-c-inputradio-mark-color-background-focus);
+:host([data-render-mode="shadow"]) .slds-radio [type='radio'],:host([data-render-mode="shadow"]) 
+.slds-radio_button [type='radio'] {
+  width: var(--slds-g-sizing-1);
+  height: var(--slds-g-sizing-1);
+  border: 0;
+  clip: rect(0 0 0 0);
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
 }
 
-/**
- * States 
- */
-
-/* TODO: Add Global/Shared Styling Hooks for disabled states across all inputs */
-
-:host([data-render-mode="shadow"][role='radio'][disabled]) {
-  --sds-c-inputradio-indicator-color-background: var(
-    --sds-c-inputradio-indicator-color-background-disabled,
-    var(--sds-g-color-neutral-base-2)
-  );
-  --sds-c-inputradio-indicator-color-border: var(
-    --sds-c-inputradio-indicator-color-border-disabled,
-    var(--sds-g-color-neutral-base-contrast-1)
-  );
+:host([data-render-mode="shadow"]) .slds-radio [type='radio']:checked + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio']:checked ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux {
+  /* stylelint-disable */
+  border-color: var(--slds-c-radio-color-border-checked, var(--slds-g-color-border-1));
+  background: none;
+  background-color: var(--slds-c-radio-color-background-checked, var(--slds-g-color-surface-container-1));
+  /* stylelint-enable */
 }
 
-:host([data-render-mode="shadow"][role='radio'][aria-invalid='true']) {
-  --sds-c-inputradio-indicator-color-background: var(--sds-c-inputradio-indicator-color-background-invalid);
-  --sds-c-inputradio-indicator-color-border: var(
-    --sds-c-inputradio-indicator-color-border-invalid,
-    var(--sds-g-color-error-base-contrast-1)
-  );
-  --sds-c-inputradio-indicator-sizing-border: var(
-    --sds-c-inputradio-indicator-sizing-border-invalid,
-    var(--sds-g-sizing-border-2, 2px)
-  );
-}
+:host([data-render-mode="shadow"]) .slds-radio [type='radio']:checked + .slds-radio_faux::after,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio']:checked ~ .slds-radio_faux::after,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux::after {
+  width: var(--slds-g-sizing-3);
+  height: var(--slds-g-sizing-3);
+  content: '';
+  position: absolute;
+  top: 50%;
 
-:host([data-render-mode="shadow"][role='radio'][disabled][checked]) {
-  --sds-c-inputradio-indicator-color-background: var(
-    --sds-c-inputradio-indicator-color-background-disabled,
-    var(--sds-g-color-neutral-base-2)
-  );
-  --sds-c-inputradio-indicator-color-border: var(
-    --sds-c-inputradio-indicator-color-border-disabled,
-    var(--sds-g-color-neutral-base-contrast-1)
-  );
-  --sds-c-inputradio-mark-color-background: var(
-    --sds-c-inputradio-mark-color-background-disabled,
-    var(--sds-g-color-neutral-base-contrast-2)
-  );
+  /*! @noflip */
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  border-radius: 50%;
+  background: none;
+  /* stylelint-disable */
+  background-color: var(--slds-c-radio-mark-color-foreground, var(--slds-g-color-accent-container-2));
 }
 
-:host([data-render-mode="shadow"][role='radio'][aria-invalid='true'][checked]) {
-  --sds-c-inputradio-indicator-color-background: var(--sds-c-inputradio-indicator-color-background-invalid);
-  --sds-c-inputradio-indicator-color-border: var(
-    --sds-c-inputradio-indicator-color-border-invalid,
-    var(--sds-g-color-error-base-contrast-1)
-  );
-  --sds-c-inputradio-indicator-sizing-border: var(
-    --sds-c-inputradio-sizing-border-invalid,
-    var(--sds-g-sizing-border-2, 2px)
-  );
-  --sds-c-inputradio-mark-color-background: var(
-    --sds-c-inputradio-mark-color-background-invalid,
-    var(--sds-g-color-error-base-contrast-1)
-  );
+:host([data-render-mode="shadow"]) .slds-radio [type='radio']:focus + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio']:focus ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio']:focus + .slds-radio__label .slds-radio_faux {
+  border-color: var(--slds-c-radio-color-border-focus, var(--slds-g-color-accent-1));
+  box-shadow: var(--slds-c-radio-shadow-focus, 0 0 3px var(--slds-g-color-accent-2));
+  /* stylelint-enable */
 }
 
-/* The Radio Input */
-
-:host([data-render-mode="shadow"]) [part~='input-radio'] {
-  display: flex;
-  align-items: center;
-  column-gap: var(--sds-c-inputradio-label-spacing-inline-start, var(--sds-g-spacing-2, 0.5rem));
+:host([data-render-mode="shadow"]) .slds-radio [type='radio'][disabled] {
+  cursor: not-allowed;
+  user-select: none;
 }
 
-/* The Radio Input Indicator */
-
-:host([data-render-mode="shadow"]) [part~='indicator'] {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  justify-content: center;
-  width: var(--sds-c-inputradio-indicator-sizing, 1rem);
-  height: var(--sds-c-inputradio-indicator-sizing, 1rem);
-  border-radius: var(--sds-g-radius-border-circle, 100%);
-  border-width: var(--sds-c-inputradio-indicator-sizing-border, var(--sds-g-sizing-border-1, 1px));
-  border-style: solid;
-  border-color: var(--sds-c-inputradio-indicator-color-border, var(--sds-g-color-neutral-base-contrast-4));
-  background-color: var(--sds-c-inputradio-indicator-color-background);
-  box-shadow: var(--sds-c-inputradio-indicator-shadow, var(--sds-g-input-shadow));
-}
-
-/* The Indicator Mark */
-
-:host([data-render-mode="shadow"][checked]) [part~='indicator']::after {
-  width: var(--sds-c-inputradio-mark-sizing, calc(var(--sds-c-inputradio-indicator-sizing, 1rem) - 50%));
-  height: var(--sds-c-inputradio-mark-sizing, calc(var(--sds-c-inputradio-indicator-sizing, 1rem) - 50%));
-  border-radius: var(--sds-g-radius-border-circle, 100%);
-  background-color: var(--sds-c-inputradio-mark-color-background, var(--sds-g-color-neutral-base-contrast-4));
-  content: '';
+:host([data-render-mode="shadow"]) .slds-radio [type='radio'][disabled] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio'][disabled] + .slds-radio__label .slds-radio_faux {
+  background-color: var(--slds-g-color-surface-container-2);
+  border-color: var(--slds-g-color-border-1);
 }
 
-/* The Radio Option Label */
-
-:host([data-render-mode="shadow"]) [part~='label'] {
-  color: var(--sds-c-inputradio-label-color);
-  font-size: var(--sds-c-inputradio-label-font-size);
-  line-height: 1;
+:host([data-render-mode="shadow"]) .slds-radio [type='radio'][disabled] ~ .slds-radio_faux::after,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio'][disabled] + .slds-radio__label .slds-radio_faux::after {
+  background: var(--slds-g-color-neutral-base-60);
 }
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-/**
- * Legend
- */
-
-:host([data-render-mode="shadow"]) [part~='legend'] {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-  display: inline-block;
-  color: var(--sds-c-inputradiogroup-legend-color, var(--sds-g-color-neutral-base-contrast-4));
-  font-weight: var(--sds-c-inputradiogroup-legend-font-weight, var(--sds-g-font-weight-bold, bold));
-  font-size: var(--sds-c-inputradiogroup-legend-font-size);
-  margin-block-end: var(--sds-c-inputradiogroup-legend-spacing-block-end, var(--sds-g-spacing-2, 0.5rem));
+:host([data-render-mode="shadow"]) .slds-has-error .slds-radio [type='radio'] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-has-error .slds-radio [type='radio'] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-has-error .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux {
+  border-color: var(--slds-g-color-error-base-40);
+  border-width: var(--slds-g-sizing-2);
 }
 
-/**
- * Radio-Group
- */
-
-:host([data-render-mode="shadow"]) [part~='input-radio-group'] {
-  border: 0;
-  padding: 0;
-  margin: 0;
-  display: block;
-}
-
-/**
- * Options
- */
-
-:host([data-render-mode="shadow"]) [part~='options'] {
-  display: flex;
-  row-gap: var(--sds-c-inputradiogroup-options-spacing-gap, var(--sds-g-spacing-2, 0.5rem));
-  flex-direction: column;
-  align-items: flex-start;
+:host([data-render-mode="shadow"]) .slds-has-error .slds-radio [type='radio']:checked + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux {
+  /* stylelint-disable */
+  --slds-c-radio-color-background: var(
+    --slds-c-radio-color-background-checked,
+    var(--slds-g-color-surface-container-1)
+  );
+  /* stylelint-enable */
+  background: none;
 }
 
-:host([data-render-mode="shadow"][orientation='horizontal']) [part~='options'] {
-  column-gap: var(--sds-c-inputradiogroup-options-spacing-gap, var(--sds-g-spacing-4, 1rem));
-  flex-direction: row;
+:host([data-render-mode="shadow"]) .slds-has-error .slds-radio [type='radio']:checked + .slds-radio_faux::after,:host([data-render-mode="shadow"]) 
+.slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio_faux::after,:host([data-render-mode="shadow"]) 
+.slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux::after {
+  background: var(--slds-g-color-error-base-40);
 }
 
-/* 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"]) {
-    /* Default State */
-
-    /* Radio Group: Spacing */
-    --sds-c-inputradiogroup-legend-spacing-block-end: var(
-      --slds-c-inputradiogroup-legend-spacing-blockend,
-      var(--sds-g-spacing-1, 0.25rem)
-    );
-    --sds-c-inputradiogroup-options-spacing-gap: var(
-      --slds-c-inputradiogroup-options-spacing-gap,
-      var(--sds-g-spacing-1, 0.25rem)
-    );
-
-    /* Radio Group: Sizing */
-    --sds-c-inputradiogroup-legend-font-weight: var(--slds-c-inputradiogroup-legend-font-weight, 700);
-    --sds-c-inputradiogroup-legend-font-size: var(
-      --slds-c-inputradiogroup-legend-font-size,
-      var(--sds-g-font-scale-neg-3, 0.75rem)
-    );
-
-    /* Radio Group: Color */
-    --sds-c-inputradiogroup-legend-color: var(
-      --slds-c-inputradiogroup-legend-color,
-      var(--sds-g-color-neutral-base-30, #444444)
-    );
-
-    /* Radio: Spacing */
-    --sds-c-inputradio-label-spacing-inline-start: var(
-      --slds-c-inputradiogroup-label-spacing-inlinestart,
-      var(--sds-g-spacing-2, 0.5rem)
-    );
-
-    /* Radio: Sizing */
-    --sds-c-inputradio-label-font-size: var(
-      --slds-c-inputradiogroup-label-font-size,
-      var(--sds-g-font-scale-neg-2, 0.8125rem)
-    );
-    --sds-c-inputradio-indicator-sizing: var(--slds-c-inputradiogroup-indicator-sizing, 16px);
-    --sds-c-inputradio-indicator-sizing-border: var(
-      --slds-c-inputradiogroup-indicator-sizing-border,
-      var(--sds-g-sizing-border-1, 1px)
-    );
-
-    /* Radio: Color */
-    --sds-c-inputradio-label-color: var(
-      --slds-c-inputradiogroup-label-color,
-      var(--sds-g-color-neutral-base-30, #444444)
-    );
-    --sds-c-inputradio-indicator-color-border: var(
-      --slds-c-inputradiogroup-indicator-color-border,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-  }
-
-  /* ------------------------------------------- */
-
-  /* Input Radio Group (type="radio") */
-
-  /* ------------------------------------------- */
-
-  /* Apply assistive text utility to input */
-
-  :host([data-render-mode="shadow"]) [part='radio'] {
-    width: 1px;
-    height: 1px;
-    border: 0;
-    clip: rect(0 0 0 0);
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-  }
-
-  :host([data-render-mode="shadow"]) [part='required'] {
-    border: 0;
-    color: var(--sds-g-color-error-base-50, #ea001e);
-    margin: 0 0.125rem;
-  }
-
-  :host([data-render-mode="shadow"]) [part='required'][title] {
-    text-decoration: none;
-  }
-
-  /**
-   * Interaction states from sds-input-radio ported to monolith
-   *
-   * Notes:
-   * - SDS relies on the [checked] attribute because of the nested encapsulation
-   * - LBC radios are within the same shadow root, hence the input:checked
-   *
-   */
-
-  :host([data-render-mode="shadow"]) [part='radio'][checked] ~ [part='input-radio'],:host([data-render-mode="shadow"]) 
-  [part='radio']:checked ~ [part='input-radio'] {
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background-checked,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-inputradio-indicator-color-border: var(
-      --slds-c-inputradiogroup-indicator-color-border-checked,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-  }
-
-  /* Hover States */
-
-  :host([data-render-mode="shadow"]) [part='radio'] ~ [part='input-radio']:hover {
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background-hover,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-inputradio-indicator-color-border: var(
-      --slds-c-inputradiogroup-indicator-color-border-hover,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-  }
-
-  :host([data-render-mode="shadow"]) [part='radio'][checked] ~ [part='input-radio']:hover,:host([data-render-mode="shadow"]) 
-  [part='radio']:checked ~ [part='input-radio']:hover {
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background-checked-hover,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-inputradio-indicator-color-border: var(
-      --slds-c-inputradiogroup-indicator-color-border-checked-hover,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-inputradiogroup-mark-color-background: var(
-      --slds-c-inputradiogroup-mark-color-background-hover,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-  }
-
-  /* Focus States */
-
-  :host([data-render-mode="shadow"]) [part='radio']:focus ~ [part='input-radio'] {
-    --sds-c-inputradio-indicator-shadow: var(
-      --slds-c-inputradiogroup-indicator-shadow-focus,
-      var(--sds-s-input-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3))
-    );
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background-focus,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-inputradio-indicator-color-border: var(
-      --slds-c-inputradiogroup-indicator-color-border-focus,
-      var(--sds-g-color-brand-base-60, #1b96ff)
-    );
-  }
-
-  :host([data-render-mode="shadow"]) [part='radio'][checked]:focus ~ [part='input-radio'],:host([data-render-mode="shadow"]) 
-  [part='radio']:checked:focus ~ [part='input-radio'] {
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background-checked-focus,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-inputradio-indicator-color-border: var(
-      --slds-c-inputradiogroup-indicator-color-border-checked-focus,
-      var(--sds-g-color-brand-base-60, #1b96ff)
-    );
-    --slds-c-inputradiogroup-mark-color-background: var(
-      --slds-c-inputradiogroup-mark-color-background-focus,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-  }
-
-  /* Disabled State */
-
-  :host([data-render-mode="shadow"][disabled]) [part='radio'] ~ [part='input-radio'] {
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background-disabled,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --sds-c-inputradio-indicator-color-border: var(
-      --slds-c-inputradiogroup-indicator-color-border-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-inputradiogroup-mark-color-background: var(
-      --slds-c-inputradiogroup-mark-color-background-disabled,
-      var(--sds-g-color-neutral-base-60, #939393)
-    );
-  }
-
-  /**
-   * Invalid State
-   *
-   * Notes:
-   * - SDS relies on the [aria-invalid="true"] attribute (This may be revisited in the future)
-   * - LBC uses the `invalid` attribute instead
-   *
-   */
-
-  :host([data-render-mode="shadow"][aria-invalid='true']) [part='radio'] ~ [part='input-radio'],:host([data-render-mode="shadow"][invalid]) [part='radio'] ~ [part='input-radio'] {
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background-invalid,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-inputradio-indicator-color-border: var(
-      --slds-c-inputradiogroup-indicator-color-border-invalid,
-      var(--sds-g-color-error-base-50, #ea001e)
-    );
-    --sds-c-inputradio-indicator-sizing-border: var(
-      --slds-c-inputradiogroup-indicator-sizing-border-invalid,
-      2px
-    );
-    --slds-c-inputradiogroup-mark-color-background: var(
-      --slds-c-inputradiogroup-mark-color-background-invalid,
-      var(--sds-g-color-error-base-60, #fe5c4c)
-    );
-  }
-
-  /* Disabled & Invalid */
-
-  :host([data-render-mode="shadow"][disabled][aria-invalid='true']) [part='radio'] ~ [part='input-radio'],:host([data-render-mode="shadow"][disabled][invalid]) [part='radio'] ~ [part='input-radio'] {
-    --sds-c-inputradio-indicator-color-background: var(
-      --slds-c-inputradiogroup-indicator-color-background-disabled,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-  }
-
-  /* Mark Styling */
-
-  :host([data-render-mode="shadow"]) [part='radio'][checked] ~ [part='input-radio'] [part='indicator']::after,:host([data-render-mode="shadow"]) 
-  [part='radio']:checked ~ [part='input-radio'] [part='indicator']::after {
-    width: var(--slds-c-inputradiogroup-mark-sizing, 8px);
-    height: var(--slds-c-inputradiogroup-mark-sizing, 8px);
-    border-radius: var(--sds-g-radius-border-circle, 100%);
-    background-color: var(--slds-c-inputradiogroup-mark-color-background, var(--sds-g-color-brand-base-50, #0176d3));
-    content: '';
-  }
-
-  /* Help Text */
-  :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-  .slds-form-element__helper {
-    display: block;
-    margin-block-start: 0.125rem;
-    font-size: var(--slds-c-inputradiogroup-helptext-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-  }
-
-  :host([data-render-mode="shadow"].slds-has-error) .slds-form-element__help {
-    color: var(--slds-c-inputradiogroup-helptext-color, var(--sds-g-color-error-base-50, #ea001e));
-  }
+:host([data-render-mode="shadow"]) .slds-form-element .slds-radio [type='radio'] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-form-element .slds-radio [type='radio'] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux {
+  margin-inline-end: var(--slds-g-spacing-2);
 }
 
-/**
-  * Override margin due implementation differences of the input radio indicator.
-  * (Synthetic shadow shows larger margin without this.)
-  */
-
-:host([data-render-mode="shadow"]) [part='input-radio-group'] [part='indicator'] {
+:host([data-render-mode="shadow"]) [dir='rtl'] .slds-form-element .slds-radio [type='radio'] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+[dir='rtl'] [dir='rtl'] .slds-form-element .slds-radio [type='radio'] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+[dir='rtl'] [dir='rtl'] .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux,:host([data-render-mode="shadow"]) 
+[dir='rtl'] .slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux {
+  /*! @noflip */
   margin-inline-end: 0;
+  margin-inline-start: var(--slds-g-spacing-2);
 }
 
 /* ------------------------------------------- */
@@ -484,7 +162,7 @@
   background: 0 0;
   background-color: transparent;
   background-clip: padding-box;
-  color: var(--sds-g-color-brand-base-40, #0b5cab);
+  color: var(--slds-g-color-accent-2);
   display: flex;
   line-height: 1.875rem;
   text-decoration: none;
@@ -494,17 +172,17 @@
 
 :host([data-render-mode="shadow"]) .slds-button:focus,:host([data-render-mode="shadow"]) 
 .slds-button:hover {
-  color: var(--sds-g-color-brand-base-30, #014486);
+  color: var(--slds-g-color-accent-4);
 }
 
 :host([data-render-mode="shadow"]) .slds-button:focus {
-  box-shadow: 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3);
+  box-shadow: 0 0 3px var(--slds-g-color-accent-2);
   outline: 0;
   padding: 30px;
 }
 
 :host([data-render-mode="shadow"]) .slds-button:active {
-  color: var(--sds-g-color-palette-blue-30, #014486);
+  color: var(--slds-g-color-accent-4);
 }
 
 /**
@@ -515,7 +193,7 @@
 :host([data-render-mode="shadow"]) .slds-radio_button-group {
   display: inline-flex;
   border: 1px solid #dddbda;
-  border-radius: var(--sds-g-radius-border-2, 0.25rem);
+  border-radius: var(--slds-g-radius-border-2);
 }
 
 :host([data-render-mode="shadow"]) .slds-radio_button {
@@ -528,8 +206,8 @@
 /* Create styled button when adjacent to the input[radio] element */
 
 :host([data-render-mode="shadow"]) .slds-radio_button .slds-radio_faux {
-  padding-inline-start: var(--sds-g-spacing-4, 1rem);
-  padding-inline-end: var(--sds-g-spacing-4, 1rem);
+  padding-inline-start: var(--slds-g-spacing-4);
+  padding-inline-end: var(--slds-g-spacing-4);
   text-align: center;
   vertical-align: middle;
 }
@@ -537,7 +215,7 @@
 /* Apply left borders to anything radio button after the first button */
 
 :host([data-render-mode="shadow"]) .slds-radio_button + .slds-radio_button {
-  border-inline-start: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-palette-neutral-90, #e5e5e5);
+  border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
   margin: 0;
 }
 
@@ -545,15 +223,15 @@
 
 :host([data-render-mode="shadow"]) .slds-radio_button:first-child > .slds-radio_button__label,:host([data-render-mode="shadow"]) 
 .slds-radio_button:first-child > .slds-radio_faux {
-  border-start-start-radius: var(--sds-g-radius-border-2, 0.25rem);
-    border-end-start-radius: var(--sds-g-radius-border-2, 0.25rem);
+  border-start-start-radius: var(--slds-g-radius-border-2);
+  border-end-start-radius: var(--slds-g-radius-border-2);
 }
 
 :host([data-render-mode="shadow"]) .slds-button_last > .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button:last-child > .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button:last-child > .slds-radio_button__label {
-  border-start-end-radius: var(--sds-g-radius-border-2, 0.25rem);
-    border-end-end-radius: var(--sds-g-radius-border-2, 0.25rem);
+  border-start-end-radius: var(--slds-g-radius-border-2);
+  border-end-end-radius: var(--slds-g-radius-border-2);
 }
 
 /* Checked State with Interactions */
@@ -561,8 +239,8 @@
 :host([data-render-mode="shadow"]) .slds-radio_button [part='radio']:checked + .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button [part='radio']:checked ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button [part='radio']:checked + .slds-radio_button__label {
-  background-color: var(--sds-g-color-brand-base-50, #0176d3);
-  color: var(--sds-g-color-brand-base-100, #ffffff);
+  background-color: var(--slds-g-color-accent-container-2);
+  color: var(--slds-g-color-on-accent-1);
 }
 
 /* Need something stronger when the input is checked */
@@ -573,7 +251,7 @@
 .slds-radio_button [part='radio']:checked ~ .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
 .slds-radio_button [part='radio']:checked + .slds-radio_button__label:hover,:host([data-render-mode="shadow"]) 
 .slds-radio_button [part='radio']:checked + .slds-radio_button__label:focus {
-  background-color: var(--sds-g-color-brand-base-30, #014486);
+  background-color: var(--slds-g-color-accent-container-3);
 }
 
 /* Focus State */
@@ -582,7 +260,7 @@
 .slds-radio_button [part='radio']:focus ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button [part='radio']:focus + .slds-radio_button__label {
   outline: 0;
-  box-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+  box-shadow: 0 0 3px var(--slds-g-color-accent-2);
   z-index: 1;
 }
 
@@ -591,8 +269,8 @@
 :host([data-render-mode="shadow"]) .slds-radio_button [part='radio'][disabled] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button [part='radio'][disabled] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button [part='radio'][disabled] + .slds-radio_button__label {
-  background-color: var(--sds-g-color-neutral-base-100, #ffffff);
-  color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+  background-color: var(--slds-g-color-surface-container-1);
+  color: var(--slds-g-color-disabled-1);
 }
 
 :host([data-render-mode="shadow"]) .slds-radio_button [part='radio'][disabled] + .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
@@ -608,7 +286,7 @@
 .slds-radio_button [part='radio'][disabled][checked] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button [part='radio'][disabled][checked] + .slds-radio_button__label {
   background-color: #c9c7c5;
-  color: var(--sds-g-color-neutral-base-100, #ffffff);
+  color: var(--slds-g-color-disabled-1);
 }
 
 :host([data-render-mode="shadow"]) .slds-radio_button [part='radio'][disabled][checked] + .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
@@ -623,135 +301,10 @@
 /* Label element inside of a radio button */
 
 :host([data-render-mode="shadow"]) .slds-radio_button__label {
-  background-color: var(--sds-g-color-neutral-base-100, #ffffff);
+  background-color: var(--slds-g-color-surface-container-1);
 }
 
 :host([data-render-mode="shadow"]) .slds-radio_button__label:hover,:host([data-render-mode="shadow"]) 
 .slds-radio_button__label:focus {
   cursor: pointer;
 }
-
-/* ------------------------------------------- */
-
-/**
-  * Variants: label-inline, label-hidden, label-stacked
-  * https://developer.salesforce.com/docs/component-library/bundle/lightning-radio-group/specification
-  *
-  * Styles are adapted from the SLDS Form Element > View Mode:
-  * https://www.lightningdesignsystem.com/components/form-element/#View-Mode
-  *
-  * Important: LBC synthetic adds the "form-element" related classes to the host. In Native we leverage the "variant" attribute.
-*/
-
-/* ------------------------------------------- */
-
-/**
-  * LBC variant: label-inline
-  *
-  * SLDS Form Element > View Mode: Horizontal Alignment
-  * https://www.lightningdesignsystem.com/components/form-element/#Horizontal-Alignment
-  */
-
-:host([data-render-mode="shadow"][variant='label-inline']) [part='input-radio-group'] {
-  display: block;
-}
-
-@media (width >= 48em) {
-  /**
-    * Handle label - default behavior
-    */
-  :host([data-render-mode="shadow"][variant='label-inline']) [part='legend'] {
-    float: left;
-    max-width: calc(33% - 1.25rem); /* Removing icon width for when the help-text icon is present */
-    flex-basis: calc(33% - 1.25rem); /* Some form element controls are set to display:flex */
-    flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
-    margin-block-end: 0;
-    position: relative;
-    z-index: 1;
-  }
-
-  /**
-    * Handle control - default behavior
-    */
-  :host([data-render-mode="shadow"][variant='label-inline']) [part='options'] {
-    padding-inline-start: 33%;
-    clear: none; /* Reset clear: left when switching to horizontal form layout */
-  }
-
-  /**
-    * Since the HTML differs for radio groups, adjust the display behavior
-    */
-  :host([data-render-mode="shadow"][variant='label-inline']) ~ [part='input-radio'] [part='indicator'] {
-    position: relative;
-    float: none;
-    max-width: 100%;
-    width: auto;
-    flex-basis: auto; /* For IE not taking up the available space */
-  }
-
-  /* Position the inline help text correctly when in horizontal/compact layout */
-  :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
-    margin-inline-start: 33%;
-  }
-}
-
-/**
-  * LBC variant: label-hidden
-  * https://www.lightningdesignsystem.com/utilities/visibility/#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;
-}
-
-/**
-  * LBC variant: label-stacked
-  *
-  * SLDS Form Element > View Mode: Stacked Alignment
-  * https://www.lightningdesignsystem.com/components/form-element/#Stacked-Alignment
-  */
-
-:host([data-render-mode="shadow"][variant='label-stacked']) [part='input-radio-group'] {
-  display: block;
-}
-
-/**
-  * Make sure radio elements always stacked in fieldsets
-  */
-
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-radio {
-  display: block; /* Override display: inline-block found on checkbox/radio */
-}
-
-:host([data-render-mode="shadow"][variant='label-stacked']) [part='legend'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='options'] {
-  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']) [part='options'] {
-  width: 100%;
-  flex-basis: 100%;
-  clear: left;
-}
-
-/* ------------------------------------------- */
-
-/**
- * TODO: Can we remove this? (common.css leaks into synthetic shadow)
- * https://github.com/salesforce-ux/product-subsystem/issues/44#issuecomment-1139150562
- */
-
-:host([data-render-mode="shadow"]) [part='input-radio-group'] *,:host([data-render-mode="shadow"]) 
-[part='input-radio-group'] ::before,:host([data-render-mode="shadow"]) 
-[part='input-radio-group'] ::after {
-  box-sizing: border-box;
-}