chrome/browser/resources/settings/controls/controlled_radio_button.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="pref_control_behavior.html">
<link rel="import" href="../prefs/pref_util.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="controlled-radio-button">
  <template>
    <style include="settings-shared cr-radio-button-style">
      :host([disabled]) {
        opacity: 1;
      }

      /* Disc and label should be transluscent, but not the policy indicator. */
      :host([disabled]) .disc-wrapper,
      :host([disabled]) #labelWrapper {
        opacity: var(--cr-disabled-opacity);
      }

      cr-policy-pref-indicator {
        margin-inline-start: var(--settings-controlled-by-spacing);
        /* Enable pointer events for the indicator so :hover works. Disable
         * clicks/taps via onIndicatorTap_ so outer on-tap doesn't trigger. */
        pointer-events: all;
      }
    </style>

    <div class="disc-wrapper">
      <div class="disc-border"></div>
      <div class="disc"></div>
    </div>

    <div id="labelWrapper">
      <span id="label" hidden$="[[!label]]">[[label]]</span>
      <slot></slot>
    </div>

    <template is="dom-if" if="[[showIndicator_(disabled, name, pref.*)]]">
      <cr-policy-pref-indicator pref="[[pref]]" on-click="onIndicatorTap_"
          icon-aria-label="[[label]]">
      </cr-policy-pref-indicator>
    </template>

  </template>
  <script src="controlled_radio_button.js"></script>
</dom-module>